[#437] [독서모임] Avartar, bookGroupStatus 적용 및 typo 수정 (#438)

* fix: Avartar, bookGroupStatus 적용 및 typo 수정

* Chore: 불필요한 타입정의 삭제

src/v1/bookGroup/DetailBookGroupCard.tsx

@@ -1,7 +1,9 @@
 import Image from 'next/image';
 
 import Badge from '@/ui/Base/Badge';
+import Avatar from '@/ui/Base/Avatar';
 import { IconCalendar, IconMembers, IconComments } from '@public/icons';
+import BookGroupStatus from './BookGroupStatus';
 
 interface DetailBookGroupCardProps {
   title: string;
@@ -15,33 +17,6 @@ interface DetailBookGroupCardProps {
   handleClick: () => void;
 }
 
-type BookGroupStatus = 'before' | 'dday' | 'ongoing' | 'end';
-
-const getBookGroupStatus = (ddayByStart: number, ddayByEnd: number) => {
-  if (ddayByStart > 0) {
-    return {
-      status: 'before' as const,
-      ddayCount: ddayByStart,
-    };
-  } else if (ddayByStart === 0 && ddayByEnd > 0) {
-    return {
-      status: 'dday' as const,
-    };
-  } else if (ddayByStart < 0 && ddayByEnd >= 0) {
-    return {
-      status: 'ongoing' as const,
-    };
-  } else {
-    return {
-      status: 'end' as const,
-    };
-  }
-};
-
-const toDayFromMillseconds = (value: number) => {
-  return Math.ceil(value / (1000 * 60 * 60 * 24));
-};
-
 const DetailBookGroupCard = ({
   title,
   description,
@@ -53,42 +28,30 @@ const DetailBookGroupCard = ({
   isPublic,
   handleClick,
 }: DetailBookGroupCardProps) => {
-  const ddayByStart = toDayFromMillseconds(
-    new Date(date.start).getTime() - new Date().getTime()
-  );
-  const ddayByEnd = toDayFromMillseconds(
-    new Date(date.end).getTime() - new Date().getTime()
-  );
-
-  const { ...ddayProps } = getBookGroupStatus(ddayByStart, ddayByEnd);
-
   return (
     <div
       onClick={handleClick}
       className="h-[16.142rem] w-[35.5rem] rounded-[0.4rem] px-[1.6rem] py-[0.9rem] shadow-[0_0_0.6rem_rgba(180,180,180,0.25)]"
     >
       <div className="mb-[1rem] flex gap-[0.5rem]">
-        <Dday {...ddayProps}></Dday>
-        <Public isPublic={isPublic}></Public>
+        <BookGroupStatus start={date.start} end={date.end} />
+        <Public isPublic={isPublic} />
       </div>
       <div className="flex gap-[1.4rem]">
         <div className="flex flex-col gap-[0.63rem]">
-          <Title title={title}></Title>
-          <Description description={description}></Description>
-          <Duration start={date.start} end={date.end}></Duration>
+          <Title title={title} />
+          <Description description={description} />
+          <Duration start={date.start} end={date.end} />
           <div className="flex w-[22.5rem] justify-between">
-            <Owner
-              name={owner.name}
-              profileImageSrc={owner.profileImageSrc}
-            ></Owner>
+            <Owner name={owner.name} profileImageSrc={owner.profileImageSrc} />
             <div className="flex gap-[0.5rem]">
-              <MemberCount memberCount={memberCount}></MemberCount>
-              <CommentCount commentCount={commentCount}></CommentCount>
+              <MemberCount memberCount={memberCount} />
+              <CommentCount commentCount={commentCount} />
             </div>
           </div>
         </div>
         <div>
-          <Book title={book.title} bookImageSrc={book.bookImageSrc}></Book>
+          <Book title={book.title} bookImageSrc={book.bookImageSrc} />
         </div>
       </div>
     </div>
@@ -97,51 +60,6 @@ const DetailBookGroupCard = ({
 
 export default DetailBookGroupCard;
 
-const getDdayBadgeInfo = (status: BookGroupStatus, ddayCount?: number) => {
-  switch (status) {
-    case 'before':
-      return {
-        colorScheme: 'main' as const,
-        isFilled: true,
-        text: `D-${ddayCount}`,
-      };
-    case 'dday':
-      return {
-        colorScheme: 'main' as const,
-        isFilled: false,
-        text: 'D-day',
-      };
-    case 'ongoing':
-      return {
-        colorScheme: 'main' as const,
-        isFilled: true,
-        text: '진행중',
-      };
-    case 'end':
-      return {
-        colorScheme: 'grey' as const,
-        isFilled: true,
-        text: '모임종료',
-      };
-  }
-};
-
-const Dday = ({
-  status,
-  ddayCount,
-}: {
-  status: BookGroupStatus;
-  ddayCount?: number;
-}) => {
-  const { text, ...badgeProps } = getDdayBadgeInfo(status, ddayCount);
-
-  return (
-    <Badge size="large" {...badgeProps}>
-      {text}
-    </Badge>
-  );
-};
-
 const Public = ({ isPublic }: { isPublic: boolean }) => (
   <Badge size="large" colorScheme="grey">
     {isPublic ? '공개' : '비공개'}
@@ -188,10 +106,7 @@ const Owner = ({
 }) => {
   return (
     <div className="flex h-[2rem] gap-[0.5rem]">
-      {/* 아바타 컴포넌트로 변경 예정 */}
-      <div className={'relative h-[2rem] w-[2rem] rounded-full bg-black-400'}>
-        {profileImageSrc && <Image alt={name} src={profileImageSrc} fill />}
-      </div>
+      <Avatar name={name} src={profileImageSrc} size="small" />
       <div className="flex items-center text-xs">
         <span>{name}</span>
       </div>