Feature/#79 탭 버튼 구현 (#89)

* feat: catogoryInfoType 추가

#79

* refactoring: interface 이름 변경

#79

* feat: 팀페이지의 tab button mocks data 추가

#79

* feat: tab button props type 생성

#79

* feat: TabButton 골격만 작성

#79

* feat: team page 에 tabButton 추가하기

#79

* feat: Tab Button UI 구현

#79

* feat: TabButton 클릭 이벤트 구현

#79

* design: button hover 시 background 색상 변경

#79

* design: 코드리뷰 반영 (120px -> 28(112px) 로 변경

#79

src/app/team/[teamId]/page.tsx

@@ -1,9 +1,16 @@
-import { Box, Flex, SimpleGrid } from '@chakra-ui/react';
+'use client';
 
+import { Box, Flex, Grid, GridItem, SimpleGrid } from '@chakra-ui/react';
+import { useState } from 'react';
+
+import TabButton from '@/components/TabButton';
+import teamPageCategoryInfos from '@/mocks/team';
 import StudyCard from '@/components/StudyCard';
 import studyCardData from '@/mocks/studyCard';
 
 const Page = () => {
+  const [category, setCategory] = useState<string>(teamPageCategoryInfos[0].name);
+
   return (
     <Flex direction="column" gap="8" w="100%" p="8">
       <Flex justify="space-between" bg="gray.100">
@@ -22,7 +29,7 @@ const Page = () => {
 
       <Flex direction="column" flex="1" gap="4" bg="gray.100">
         {/* TODO 스터디, 학습자료, 작물창고 버튼 */}
-        <Box w="96" h="10" bg="gray.200" />
+        <TabButton currentTab={category} changeTab={setCategory} categoryInfos={teamPageCategoryInfos} />
         {/* TODO 전체보기, 네비게이션 이동 버튼 */}
         <Box h="10" bg="gray.200" />
         {/* TODO 스터디 카드 */}

src/components/TabButton/index.tsx

@@ -0,0 +1,29 @@
+import { Flex, Button, Text } from '@chakra-ui/react';
+
+import { TabButtonProps } from './type';
+
+const TabButton = ({ currentTab, changeTab, categoryInfos }: TabButtonProps) => {
+  return (
+    <Flex gap="30px">
+      {categoryInfos.map((data) => {
+        return (
+          <Button
+            key={data.id}
+            w="28"
+            bg={data.name === currentTab ? 'orange_dark' : 'white'}
+            borderRadius="30px"
+            shadow="md"
+            _hover={{ bg: 'orange_light' }}
+            onClick={() => changeTab(data.name)}
+          >
+            <Text color={data.name === currentTab ? 'white' : 'black'} fontSize="md" fontWeight="bold">
+              {data.name}
+            </Text>
+          </Button>
+        );
+      })}
+    </Flex>
+  );
+};
+
+export default TabButton;

src/components/TabButton/type.ts

@@ -0,0 +1,7 @@
+import { TabButtonInfoType } from '@/types';
+
+export interface TabButtonProps {
+  currentTab: string;
+  changeTab: (tab: string) => void;
+  categoryInfos: TabButtonInfoType[];
+}

src/mocks/team.ts

@@ -0,0 +1,9 @@
+import { TabButtonInfoType } from '@/types';
+
+const teamPageCategoryInfos: TabButtonInfoType[] = [
+  { id: 1, name: '스터디' },
+  { id: 2, name: '학습자료' },
+  { id: 3, name: '작물창고' },
+];
+
+export default teamPageCategoryInfos;

src/types.ts

@@ -26,3 +26,8 @@ export interface ParticipantType {
   profileImg: string;
   myPageUrl: string;
 }
+
+export interface TabButtonInfoType {
+  id: number;
+  name: string;
+}