Feature/#198 학습자료 갤러리 (#216)

* feat : page 레이이웃 설정 * feat : 화면 레이아웃 마무리 * feat : 충돌 커밋 수정 및 title 수정 * feat : PageNavigation 분리 --------- Co-authored-by: 김문경 <>
BDD-CLUB · May 23, 2024 · 3ca90a8 · 3ca90a8
1 parent 78a0e43
commit 3ca90a8
Show file tree

Hide file tree

Showing 4 changed files with 401 additions and 1 deletion.
diff --git a/src/app/team/[teamId]/study/[studyId]/asset/page.tsx b/src/app/team/[teamId]/study/[studyId]/asset/page.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import { Button, Flex, Text } from '@chakra-ui/react';
+
+import StudyAssets from '@/containers/studyAsset/StudyAssets';
+
+const Page = () => {
+  return (
+    <Flex align="center" direction="column" gap="9" w="100%" p="8">
+      <Flex justify="space-between" w="100%">
+        <Flex direction="row" gap="2">
+          <Text textStyle="bold_2xl">학습자료 갤러리</Text>
+        </Flex>
+        <Button color="white" bg="orange_dark" rounded="full">
+          자료 등록
+        </Button>
+      </Flex>
+      <StudyAssets />
+    </Flex>
+  );
+};
+
+export default Page;
diff --git a/src/app/team/[teamId]/study/[studyId]/page.tsx b/src/app/team/[teamId]/study/[studyId]/page.tsx
@@ -40,7 +40,7 @@ const Page = () => {
           <Flex direction="column" rowGap={{ base: '6', '2xl': '12' }}>
             <CurriculumCard />
             <Flex align="right" direction="column" rowGap="3">
-              <Link as={NextLink} gap="3" display="flex" w="fit-content" ml="auto" href="/">
+              <Link as={NextLink} gap="3" display="flex" w="fit-content" ml="auto" href="/team/1/study/1/asset">
                 <IconButton
                   fontSize="16px"
                   aria-label=""

diff --git a/src/containers/studyAsset/StudyAssets/index.tsx b/src/containers/studyAsset/StudyAssets/index.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import { Flex, Grid } from '@chakra-ui/react';
+
+import StudyAssetCard from '@/components/StudyAssetCard';
+import studyAssetCardDataAll from '@/mocks/studyAssetCardAll';
+
+const StudyAssets = () => {
+  return (
+    <Flex direction="column">
+      <Grid gap={{ sm: '2', md: '4', xl: '8' }} templateColumns="repeat(4, 1fr)" w="100%">
+        {studyAssetCardDataAll.map((data) => (
+          <StudyAssetCard
+            key={data.title}
+            title={data.title}
+            content={data.content}
+            date={data.date}
+            bookmark={data.bookmark}
+            img={data.img}
+          />
+        ))}
+      </Grid>
+    </Flex>
+  );
+};
+
+export default StudyAssets;