Feature/#214 스터디 자료 전체보기 (#215)

* design : icon_orange variants 추가 #214 * feat : 스터디 자료 전체보기 #214
BDD-CLUB · May 9, 2024 · 0cf4b4e · 0cf4b4e
1 parent e050d4e
commit 0cf4b4e
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 12 deletions.
diff --git a/src/app/team/[teamId]/study/[studyId]/page.tsx b/src/app/team/[teamId]/study/[studyId]/page.tsx
@@ -1,4 +1,6 @@
-import { Flex, Grid } from '@chakra-ui/react';
+import { Flex, Grid, IconButton, Text, Link } from '@chakra-ui/react';
+import NextLink from 'next/link';
+import { MdOutlineArrowForwardIos } from 'react-icons/md';
 
 import CurriculumCard from '@/components/CurriculumCard';
 import StudyAssetCard from '@/components/StudyAssetCard';
@@ -26,18 +28,31 @@ const Page = () => {
       <Grid gap="4" templateColumns={{ base: '', xl: '2fr 1fr' }} w="100%">
         <Flex direction="column" rowGap={{ base: '6', '2xl': '12' }}>
           <CurriculumCard />
-          <Grid gap="2" templateColumns={{ base: 'repeat(2, 1fr)', lg: 'repeat(4, 1fr)' }}>
-            {studyAssetCardData.map((data) => (
-              <StudyAssetCard
-                key={data.title}
-                title={data.title}
-                content={data.content}
-                date={data.date}
-                bookmark={data.bookmark}
-                img={data.img}
+          <Flex align="right" direction="column" rowGap="3">
+            <Link as={NextLink} gap="3" display="flex" w="fit-content" ml="auto" href="/">
+              <IconButton
+                fontSize="16px"
+                aria-label=""
+                icon={<MdOutlineArrowForwardIos />}
+                isRound
+                size="icon_sm"
+                variant="icon_orange"
               />
-            ))}
-          </Grid>
+              <Text>전체 보기</Text>
+            </Link>
+            <Grid gap="2" templateColumns={{ base: 'repeat(2, 1fr)', lg: 'repeat(4, 1fr)' }}>
+              {studyAssetCardData.map((data) => (
+                <StudyAssetCard
+                  key={data.title}
+                  title={data.title}
+                  content={data.content}
+                  date={data.date}
+                  bookmark={data.bookmark}
+                  img={data.img}
+                />
+              ))}
+            </Grid>
+          </Flex>
         </Flex>
         <Flex direction="column" rowGap={{ base: '6', '2xl': '12' }}>
           <Feed />

diff --git a/src/theme/components/button.ts b/src/theme/components/button.ts
@@ -16,6 +16,10 @@ const Button = defineStyleConfig({
       color: 'white',
       minW: '24',
     },
+    icon_orange: {
+      bg: 'orange',
+      color: 'white',
+    },
     transparent: {
       bg: 'transparent',
       color: 'white',