From 4116c22b14af0c595a9438ca873f74fb712c3d6c Mon Sep 17 00:00:00 2001
From: yeonddori <126975394+yeonddori@users.noreply.github.com>
Date: Sun, 17 Nov 2024 23:19:50 +0900
Subject: [PATCH] =?UTF-8?q?Feature/#341=20=EC=8A=A4=ED=84=B0=EB=94=94=20?=
 =?UTF-8?q?=EC=B9=B4=EB=93=9C=EC=97=90=EC=84=9C=20=EC=A2=85=EB=A3=8C?=
 =?UTF-8?q?=EB=90=9C=20=EC=8A=A4=ED=84=B0=EB=94=94=EC=99=80=20=EC=A7=84?=
 =?UTF-8?q?=ED=96=89=EC=A4=91=EC=9D=B8=20=EC=8A=A4=ED=84=B0=EB=94=94=20?=
 =?UTF-8?q?=EA=B5=AC=EB=B6=84=20=ED=91=9C=EC=8B=9C=20(#342)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 진행 중인 스터디와 종료된 스터디를 배지로 표시

* design: 위치 변경 및 rounded 추가

#341

* design: 진행 전 표시 추가

#341
---
 src/components/StudyCard/index.tsx | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/StudyCard/index.tsx b/src/components/StudyCard/index.tsx
index 828bf17..8f7e720 100644
--- a/src/components/StudyCard/index.tsx
+++ b/src/components/StudyCard/index.tsx
@@ -1,4 +1,5 @@
-import { Card, CardHeader, CardBody, CardFooter, Text, Image, Progress, Link, Flex } from '@chakra-ui/react';
+import { Card, CardHeader, CardBody, CardFooter, Text, Image, Progress, Link, Flex, Badge } from '@chakra-ui/react';
+import dayjs from 'dayjs';
 
 import CROP from '@/constants/crop';
 
@@ -15,6 +16,24 @@ const StudyCard = ({
   studyProgressRatio,
   rank,
 }: StudyCardProps) => {
+  const currentDate = dayjs().format('YYYY-MM-DD');
+  const isOngoing =
+    currentDate >= dayjs(startDate).format('YYYY-MM-DD') &&
+    (currentDate <= dayjs(endDate).format('YYYY-MM-DD') || !endDate);
+  const isNotStarted = currentDate < dayjs(startDate).format('YYYY-MM-DD');
+
+  const getColorScheme = () => {
+    if (isNotStarted) return 'gray';
+    if (isOngoing) return 'purple';
+    return 'red';
+  };
+
+  const getBadgeText = () => {
+    if (isNotStarted) return '진행 전';
+    if (isOngoing) return '진행 중';
+    return '종료';
+  };
+
   return (
     <Card
       alignItems="center"
@@ -28,6 +47,9 @@ const StudyCard = ({
       boxSizing="border-box"
       rounded="2xl"
     >
+      <Badge pos="absolute" top="3" right="3" colorScheme={getColorScheme()} rounded="2xl">
+        {getBadgeText()}
+      </Badge>
       <Link w="100%" href={`/team/${teamId}/study/${id}`}>
         <CardHeader py="2">
           <Text textStyle="bold_md" overflow="hidden" textAlign="center" whiteSpace="nowrap" textOverflow="ellipsis">