Feat/47/todo card component (#105)

* 📦 chore: dayjs 패키지 추가

* ✨ feat: 날짜 포매팅 함수 추가

* 💄 feat: 할일 카드 모바일 UI 구현 및 임시 이미지 추가

* 💄 feat: 할일 카드 반응형 처리 작업

* Ux/94/sidebar (#100)

* 📦 chore : 사이드바용 이미지 추가 (svg)

* 💄 style : 사이드바 모바일 사용성 개선

* ✨ feat: props받을 수 있게  TodoCardProps 추가 및 임시 코드 삭제

* 🔥 fix: console.log 코드 삭제

-------

Author: rak517

package-lock.json

@@ -6,7 +6,6 @@ export default async function DashboardDetailPage({ params }: { params: Promise<
 
   return (
     <div className='p-10'>
-      <div className='mb-8'>아이디 {id} : 대시보드 상세페이지</div>
       <div>
         <Link href={`/dashboard/${id}/edit`}>
           <Button>수정하기</Button>

src/app/(after-login)/dashboard/[id]/page.tsx

@@ -0,0 +1,37 @@
+import Image from 'next/image';
+import { formatDate } from '@/utils/formatDate';
+import { Card } from '@/apis/cards/types';
+import Avatar from '../ui/Avatar/Avatar';
+import TagChip from '../ui/Chip/TagChip';
+import calendar from '@/assets/icons/calendar.svg';
+
+interface TodoCardProps {
+  card: Card;
+}
+
+export default function TodoCard({ card }: TodoCardProps) {
+  const formattedDate = formatDate(card.createdAt);
+
+  return (
+    <div className='flex w-full flex-col gap-1 rounded-md border border-gray-30 bg-white px-3 py-[5px] md:flex-row md:gap-2.5 lg:w-[314px] lg:flex-col'>
+      {card.imageUrl && <Image src={card.imageUrl} alt={card.description} className='w-full md:w-[90px] lg:w-full' width={90} height={20} />}
+      <div className='flex flex-col gap-1.5 md:flex-1 md:flex-row lg:flex-col lg:gap-2'>
+        <div className='flex flex-col gap-1.5 md:flex-none lg:gap-2.5'>
+          <span className='text-md font-medium text-gray-70 lg:text-lg'>{card.title}</span>
+          <div className='flex gap-1.5'>
+            {card.tags.map((tag) => (
+              <TagChip key={card.id} label={tag} />
+            ))}
+          </div>
+        </div>
+        <div className='flex justify-between md:flex-auto md:items-end'>
+          <div className='flex items-center gap-1'>
+            <Image src={calendar} width={10} height={11} alt='캘린더' />
+            <span className='text-xs font-medium text-gray-50'>{formattedDate}</span>
+          </div>
+          <Avatar email={card.assignee.nickname} size='sm' />
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/dashboard/TodoCard.tsx

@@ -0,0 +1,7 @@
+import dayjs from 'dayjs';
+
+const DATE_FORMAT = 'YYYY.MM.DD';
+
+export const formatDate = (dateInput: string | number | Date): string => {
+  return dayjs(dateInput).format(DATE_FORMAT);
+};