From 62bd0f2e36865d6cb86dc835b45cb7b770dff52a Mon Sep 17 00:00:00 2001
From: mun-kyeong <96461334+mun-kyeong@users.noreply.github.com>
Date: Wed, 21 Feb 2024 23:46:13 +0900
Subject: [PATCH] =?UTF-8?q?Feature/#7=20=ED=95=99=EC=8A=B5=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=EA=B5=AC=ED=98=84=20(#24)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat:types.ts 추가

* Revert "feat:types.ts 추가"

This reverts commit b12d01406f484ba4e6ee3f99f14eb7c145aa2061.

* feat:types.ts 추가

* feat : 학습자료 컴포넌트 구현

* feat : page.tsx 원본 파일 복구

* feat : bookmark =>  img에서 icon으로 변경

* feat : 마지막줄 여백 조정

* feat : mocks 폴더 분리 + 더미데이터 파일 작성

* feat : 학습자료 이름변경 (studycard => studyAssetCard)

* feat : mocks 파일명 study.jsx로 변경

* refactor : types.js 파일 위치 수정

* feat : interface 파일 수정

* feat : 색변경 gray.100

* refactor : PR 반영
---
 .../team/[teamId]/study/[studyId]/page.tsx    | 26 +++++++++----
 src/components/StudyAssetCard/index.tsx       | 37 +++++++++++++++++++
 src/components/StudyAssetCard/types.ts        |  7 ++++
 src/mocks/study.ts                            | 34 +++++++++++++++++
 4 files changed, 96 insertions(+), 8 deletions(-)
 create mode 100644 src/components/StudyAssetCard/index.tsx
 create mode 100644 src/components/StudyAssetCard/types.ts
 create mode 100644 src/mocks/study.ts

diff --git a/src/app/team/[teamId]/study/[studyId]/page.tsx b/src/app/team/[teamId]/study/[studyId]/page.tsx
index fcb7bb9a..79eb1b38 100644
--- a/src/app/team/[teamId]/study/[studyId]/page.tsx
+++ b/src/app/team/[teamId]/study/[studyId]/page.tsx
@@ -1,4 +1,7 @@
-import { Box, Flex, Grid, GridItem } from '@chakra-ui/react';
+import { Box, Flex, SimpleGrid } from '@chakra-ui/react';
+
+import StudyAssetCard from '@/components/StudyAssetCard';
+import studyAssetCardData from '@/mocks/study';
 
 const Page = () => {
   return (
@@ -10,15 +13,22 @@ const Page = () => {
         <Flex flex="1" p="2" bg="gray.200" />
         {/* TODO 학습자료 */}
         <Flex direction="column" gap="2">
-          {/* TODO 전체보기 버튼 */}
           <Box w="100%" h="10" bg="gray.200" />
           {/* TODO 학습자료 카드 */}
-          <Grid gap="4" templateColumns="repeat(4, 1fr)" bg="gray.100">
-            <GridItem w="100%" h="80" bg="gray.200" />
-            <GridItem w="100%" h="80" bg="gray.200" />
-            <GridItem w="100%" h="80" bg="gray.200" />
-            <GridItem w="100%" h="80" bg="gray.200" />
-          </Grid>
+          <SimpleGrid gap="4" overflow="hidden" minH="32" minChildWidth="64">
+            {studyAssetCardData.map((data) => {
+              return (
+                <StudyAssetCard
+                  key={data.title}
+                  title={data.title}
+                  content={data.content}
+                  date={data.date}
+                  bookmark={data.bookmark}
+                  img={data.img}
+                />
+              );
+            })}
+          </SimpleGrid>
         </Flex>
       </Flex>
       <Flex direction="column" gap="8" w="33%" bg="gray.100">
diff --git a/src/components/StudyAssetCard/index.tsx b/src/components/StudyAssetCard/index.tsx
new file mode 100644
index 00000000..b2fa9188
--- /dev/null
+++ b/src/components/StudyAssetCard/index.tsx
@@ -0,0 +1,37 @@
+import { Flex, Card, CardBody, CardFooter, Image, Text, IconButton } from '@chakra-ui/react';
+import { BiBookmark } from 'react-icons/bi';
+
+import { StudyAssetCardProps } from './types';
+
+const StudyAssetCard = ({ title, content, date, bookmark, img }: StudyAssetCardProps) => {
+  return (
+    <Card w="100%" maxW="80" p="2" shadow="md" _hover={{ bg: 'gray.100', transition: '0.5s ease-in-out' }} rounded="xl">
+      <Image objectFit="cover" alt="study card" rounded="sm" src={img} />
+      <CardBody px="2">
+        <Text fontSize="xl" fontWeight="bold">
+          {title}
+        </Text>
+        <Text fontSize="sm">{content}</Text>
+      </CardBody>
+      <CardFooter alignItems="center" justify="space-between" px="2" py="0">
+        <Text color="gray.200" fontSize="sm">
+          {date}
+        </Text>
+        <Flex align="center">
+          <IconButton
+            color="black"
+            fontSize="md"
+            bg="transparent"
+            _hover={{ bg: 'transparent' }}
+            aria-label="bookmark"
+            icon={<BiBookmark />}
+            // onClick={() =>}
+          />
+          <Text fontSize="sm">{bookmark}</Text>
+        </Flex>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default StudyAssetCard;
diff --git a/src/components/StudyAssetCard/types.ts b/src/components/StudyAssetCard/types.ts
new file mode 100644
index 00000000..8c1ce82a
--- /dev/null
+++ b/src/components/StudyAssetCard/types.ts
@@ -0,0 +1,7 @@
+export interface StudyAssetCardProps {
+  title: string;
+  content: string;
+  date: string;
+  bookmark: number;
+  img: string;
+}
diff --git a/src/mocks/study.ts b/src/mocks/study.ts
new file mode 100644
index 00000000..f6cde12d
--- /dev/null
+++ b/src/mocks/study.ts
@@ -0,0 +1,34 @@
+import { StudyAssetCardProps } from '@/components/StudyAssetCard/types';
+
+const studyAssetCardData: StudyAssetCardProps[] = [
+  {
+    title: '자료이름1',
+    content: '이번 포스팅은 [스터디 목적]에 관한것입니다. 먼저 [목차]는 이렇습니다.',
+    date: '2024/01/01',
+    bookmark: 1111,
+    img: 'https://images.unsplash.com/photo-1531403009284-440f080d1e12?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80',
+  },
+  {
+    title: '자료이름2',
+    content: '이번 포스팅은 [스터디 목적]에 관한것입니다. 먼저 [목차]는 이렇습니다.',
+    date: '2024/02/02',
+    bookmark: 2222,
+    img: 'https://images.unsplash.com/photo-1531403009284-440f080d1e12?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80',
+  },
+  {
+    title: '자료이름3',
+    content: '이번 포스팅은 [스터디 목적]에 관한것입니다. 먼저 [목차]는 이렇습니다.',
+    date: '2024/03/03',
+    bookmark: 3333,
+    img: 'https://images.unsplash.com/photo-1531403009284-440f080d1e12?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80',
+  },
+  {
+    title: '자료이름4',
+    content: '이번 포스팅은 [스터디 목적]에 관한것입니다. 먼저 [목차]는 이렇습니다.',
+    date: '2024/04/04',
+    bookmark: 4444,
+    img: 'https://images.unsplash.com/photo-1531403009284-440f080d1e12?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80',
+  },
+];
+
+export default studyAssetCardData;