From 9516b38b283c179f9ed022efe3938ea8e85632f4 Mon Sep 17 00:00:00 2001
From: Dobbymin <gmin0701@knu.ac.kr>
Date: Sat, 28 Sep 2024 21:09:12 +0900
Subject: [PATCH] =?UTF-8?q?Feat(challenge-list):=20=EC=B9=B4=ED=85=8C?=
 =?UTF-8?q?=EA=B3=A0=EB=A6=AC=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EC=B1=8C?=
 =?UTF-8?q?=EB=A6=B0=EC=A7=80=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EB=B3=B4?=
 =?UTF-8?q?=EA=B8=B0=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/contents/index.tsx             | 83 +++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 src/pages/challenge-list/components/contents/index.tsx

diff --git a/src/pages/challenge-list/components/contents/index.tsx b/src/pages/challenge-list/components/contents/index.tsx
new file mode 100644
index 0000000..2aa0b64
--- /dev/null
+++ b/src/pages/challenge-list/components/contents/index.tsx
@@ -0,0 +1,83 @@
+import { useState } from 'react';
+
+import { Box, Text } from '@chakra-ui/react';
+import styled from '@emotion/styled';
+
+type Props = {
+  title: string;
+  content: string;
+  startDate: string;
+  endDate: string;
+  participantCount: number;
+};
+
+const Contents = ({
+  title,
+  content,
+  startDate,
+  endDate,
+  participantCount,
+}: Props) => {
+  const [isClicked, setIsClicked] = useState(false);
+
+  const handleBoxClick = () => {
+    setIsClicked(!isClicked);
+  };
+
+  const date = `${startDate} ~ ${endDate}`;
+
+  return (
+    <ContentsBox onClick={handleBoxClick} isClicked={isClicked}>
+      <Box mb={2}>
+        <Text
+          fontSize='1.25rem'
+          fontWeight='bold'
+          color='var(--color-green-04)'
+        >
+          {title}
+        </Text>
+      </Box>
+      <FlexBox mb={4}>
+        <TextItem isClicked={isClicked}>{content}</TextItem>
+        <TextItem isClicked={isClicked}>
+          누적 참여자 수 : {participantCount}명
+        </TextItem>
+      </FlexBox>
+      <Box>
+        <Text mb={1.5} fontSize='1.2rem' fontWeight='700'>
+          참여 가능 기간
+        </Text>
+        <TextItem isClicked={isClicked}>{date}</TextItem>
+      </Box>
+    </ContentsBox>
+  );
+};
+
+export default Contents;
+
+const ContentsBox = styled(Box)<{ isClicked: boolean }>`
+  width: 100%;
+  height: 100%;
+  background-color: ${({ isClicked }) =>
+    isClicked ? 'var(--color-green-06)' : 'var(--color-green-01)'};
+  border-radius: 1.2rem;
+  padding: 1rem;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-bottom: 1.5rem;
+  cursor: pointer;
+`;
+
+const FlexBox = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+const TextItem = styled(Text)<{ isClicked: boolean }>`
+  color: ${({ isClicked }) => (isClicked ? '#000' : '#fff')};
+  font-size: 1rem;
+`;