Feature/#7 학습카드 구현 (#24)

* feat:types.ts 추가 * Revert "feat:types.ts 추가" This reverts commit b12d014. * 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 반영
BDD-CLUB · Feb 21, 2024 · 62bd0f2 · 62bd0f2
1 parent 04ae4b5
commit 62bd0f2
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;