Skip to content

Feat/24/mydashboardcard component #63

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rak517 merged 2 commits into from
Feb 6, 2025
Merged

Feat/24/mydashboardcard component #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b5cdc28
:sparkles: feat: mydashboard, sidebar에 사용하는 공통 컴포넌트 dashboardCard 구현
rak517 Feb 5, 2025
36dfbf8
:recycle: refactor: SidebarItemList에서 MyDashboardCard를 사용하게 수정 및 mock…
rak517 Feb 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
148 changes: 148 additions & 0 deletions src/apis/dashboards/mockData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
export const mockDashboardData = {
dashboards: [
{
id: 1,
title: '비브리지',
color: 'green-30',
createdAt: '2025-02-05T09:23:00.603Z',
updatedAt: '2025-02-05T09:23:00.603Z',
createdByMe: true, // hasCrown이 true였던 경우
userId: 0,
},
{
id: 2,
title: '코드잇',
color: 'blue-20',
createdAt: '2025-02-05T09:23:00.603Z',
updatedAt: '2025-02-05T09:23:00.603Z',
createdByMe: true,
userId: 0,
},
{
id: 3,
title: '3분기 계획',
color: 'green-30',
createdAt: '2025-02-05T09:23:00.603Z',
updatedAt: '2025-02-05T09:23:00.603Z',
createdByMe: false,
userId: 0,
},
{
id: 4,
title: '회의록',
color: 'blue-20',
createdAt: '2025-02-05T09:23:00.603Z',
updatedAt: '2025-02-05T09:23:00.603Z',
createdByMe: false,
userId: 0,
},
{
id: 5,
title: '중요 문서함',
color: 'pink-20',
createdAt: '2025-02-05T09:23:00.603Z',
updatedAt: '2025-02-05T09:23:00.603Z',
createdByMe: false,
userId: 0,
},
{
id: 6,
title: '비브리지',
color: 'blue-20',
createdAt: '2025-02-05T09:23:00.603Z',
updatedAt: '2025-02-05T09:23:00.603Z',
createdByMe: true,
userId: 0,
},
{
id: 7,
title: '코드잇',
color: 'purple',
createdAt: '2025-02-05T09:23:00.603Z',
updatedAt: '2025-02-05T09:23:00.603Z',
createdByMe: true,
userId: 0,
},
{
id: 8,
title: '3분기 계획',
color: 'blue-20',
createdAt: '2025-02-05T09:23:00.603Z',
updatedAt: '2025-02-05T09:23:00.603Z',
createdByMe: false,
userId: 0,
},
{
id: 9,
title: '회의록',
color: 'purple',
createdAt: '2025-02-05T09:23:00.603Z',
updatedAt: '2025-02-05T09:23:00.603Z',
createdByMe: false,
userId: 0,
},
{
id: 10,
title: '중요 문서함',
color: 'blue-20',
createdAt: '2025-02-05T09:23:00.603Z',
updatedAt: '2025-02-05T09:23:00.603Z',
createdByMe: false,
userId: 0,
},
{
id: 11,
title: '비브리지',
color: 'blue-20',
createdAt: '2025-02-05T09:23:00.603Z',
updatedAt: '2025-02-05T09:23:00.603Z',
createdByMe: true,
userId: 0,
},
{
id: 12,
title: '코드잇',
color: 'pink-20',
createdAt: '2025-02-05T09:23:00.603Z',
updatedAt: '2025-02-05T09:23:00.603Z',
createdByMe: true,
userId: 0,
},
{
id: 13,
title: '3분기 계획',
color: 'orange-20',
createdAt: '2025-02-05T09:23:00.603Z',
updatedAt: '2025-02-05T09:23:00.603Z',
createdByMe: false,
userId: 0,
},
{
id: 14,
title: '회의록',
color: 'blue-20',
createdAt: '2025-02-05T09:23:00.603Z',
updatedAt: '2025-02-05T09:23:00.603Z',
createdByMe: false,
userId: 0,
},
{
id: 15,
title: '중요 문서함',
color: 'blue-20',
createdAt: '2025-02-05T09:23:00.603Z',
updatedAt: '2025-02-05T09:23:00.603Z',
createdByMe: false,
userId: 0,
},
{
id: 16,
title: '중요 테스트',
color: 'blue-20',
createdAt: '2025-02-05T09:23:00.603Z',
updatedAt: '2025-02-05T09:23:00.603Z',
createdByMe: false,
userId: 0,
},
],
};
38 changes: 15 additions & 23 deletions src/components/Sidebar/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,38 +6,30 @@ import { UseChunkPagination } from '@/hooks/useChunkPagination';
import PaginationControls from '../pagination/PaginationControls';
import SidebarLogo from './SidebarLogo';
import SidebarItemList from './SidebarItemList';

import add_box from '@/assets/icons/add_box.svg';

// TODO : 실제 api 요청으로 변경
import { mockDashboardData } from '@/apis/dashboards/mockData';

interface ItemList {
id: number;
name: string;
colorClass: 'green-30' | 'blue-20' | 'orange-20' | 'purple' | 'pink-20';
hasCrown?: boolean;
title: string;
color: 'green-30' | 'blue-20' | 'orange-20' | 'purple' | 'pink-20';
createdByMe: boolean;
}

const mockBoardData: ItemList[] = [
{ id: 1, name: '비브리지', colorClass: 'green-30', hasCrown: true },
{ id: 2, name: '코드잇', colorClass: 'blue-20', hasCrown: true },
{ id: 3, name: '3분기 계획', colorClass: 'green-30' },
{ id: 4, name: '회의록', colorClass: 'blue-20' },
{ id: 5, name: '중요 문서함', colorClass: 'pink-20' },
{ id: 6, name: '비브리지', colorClass: 'blue-20', hasCrown: true },
{ id: 7, name: '코드잇', colorClass: 'purple', hasCrown: true },
{ id: 8, name: '3분기 계획', colorClass: 'blue-20' },
{ id: 9, name: '회의록', colorClass: 'purple' },
{ id: 10, name: '중요 문서함', colorClass: 'blue-20' },
{ id: 11, name: '비브리지', colorClass: 'blue-20', hasCrown: true },
{ id: 12, name: '코드잇', colorClass: 'pink-20', hasCrown: true },
{ id: 13, name: '3분기 계획', colorClass: 'orange-20' },
{ id: 14, name: '회의록', colorClass: 'blue-20' },
{ id: 15, name: '중요 문서함', colorClass: 'blue-20' },
{ id: 16, name: '중요 테스트', colorClass: 'blue-20' },
];
const dashboardsForSidebar: ItemList[] = mockDashboardData.dashboards.map((dash) => {
return {
id: dash.id,
title: dash.title,
color: dash.color as ItemList['color'],
createdByMe: dash.createdByMe,
};
});

export default function Sidebar() {
const { currentGroups, totalPages, canGoPrev, canGoNext, handlePrev, handleNext } = UseChunkPagination({
items: mockBoardData,
items: dashboardsForSidebar,
chunkSize: 5,
maxGroupsPerPage: 3,
});
Expand Down
21 changes: 5 additions & 16 deletions src/components/Sidebar/SidebarItemList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import Image from 'next/image';
import Dot from './Dot';
import crown from '@/assets/icons/crown.svg';
import MyDashboardCard from '../mydashboard-card/MyDashboardCard';

interface ItemList {
id: number;
name: string;
colorClass: 'green-30' | 'blue-20' | 'orange-20' | 'purple' | 'pink-20';
hasCrown?: boolean;
title: string;
color: 'green-30' | 'blue-20' | 'orange-20' | 'purple' | 'pink-20';
createdByMe: boolean | undefined;
}

interface SidebarItemListProps {
Expand All @@ -19,16 +17,7 @@ export default function SidebarItemList({ currentGroups }: SidebarItemListProps)
{currentGroups.map((group, groupIndex) => (
<div key={groupIndex} className='flex flex-col gap-2'>
{group.map((item) => (
<div key={item.id} className='flex justify-center gap-2.5 rounded-md p-3 md:justify-start md:hover:bg-violet-10'>
<div className='flex items-center gap-4'>
<Dot colorClass={item.colorClass} />

<div className='hidden gap-1.5 md:flex'>
<span className='text-2lg font-medium text-gray-50'>{item.name}</span>
{item.hasCrown && <Image src={crown} width={17} height={14} alt='crown' />}
</div>
</div>
</div>
<MyDashboardCard key={item.id} title={item.title} color={item.color} createdByMe={item.createdByMe} variant='sidebar' />
))}
</div>
))}
Expand Down
36 changes: 36 additions & 0 deletions src/components/mydashboard-card/MyDashboardCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { cn } from '@/utils/helper';
import Dot from '../Sidebar/Dot';
import Image from 'next/image';
import crown from '@/assets/icons/crown.svg';
import right_arrow from '@/assets/icons/right_arrow.svg';

interface MyDashboardCardProps {
title: string;
color: 'green-30' | 'blue-20' | 'orange-20' | 'purple' | 'pink-20';
createdByMe: boolean | undefined;
variant?: 'sidebar' | 'card';
}

export default function MyDashboardCard({ title, color, createdByMe, variant }: MyDashboardCardProps) {
const containerClass = cn(
'flex rounded-md ',
variant === 'sidebar' && 'justify-center gap-2.5 p-3 md:justify-start md:hover:bg-violet-10',
variant === 'card' && 'items-center justify-between border border-gray-30 hover:shadow-md px-5 py-[22px] w-[260px] md:w-[247px] lg:w-[332px]',
);

const textContainerClass = cn(variant === 'sidebar' ? 'hidden md:flex gap-1.5' : 'flex gap-1.5');

const titleClass = cn(variant === 'sidebar' && 'text-lg lg:text-2lg text-gray-50 font-medium', variant === 'card' && 'text-lg sm:text-md font-semibold text-[#333236]');
return (
<div className={containerClass}>
<div className='flex items-center gap-2.5'>
<Dot colorClass={color} />
<div className={textContainerClass}>
<span className={titleClass}>{title}</span>
{createdByMe && <Image src={crown} width={17} height={14} alt='crown' />}
</div>
</div>
{variant === 'card' && <Image src={right_arrow} width={7} height={13} alt='right_arrow' />}
</div>
);
}