Feature/#225 텃밭 r api 연결 (#265)

* api: 텃밭 조회 api 정의 #225 * feat: 텃밭 조회 api 연결 #225 * refact: 텃밭 색상을 정의한 변수 위치 이동 #225 * refact: 텃밭 관련 mocks data 삭제 #225
BDD-CLUB · Jun 29, 2024 · 9b7d20a · 9b7d20a
1 parent 894e191
commit 9b7d20a
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 90 deletions.
diff --git a/src/app/api/garden.ts b/src/app/api/garden.ts
@@ -0,0 +1,8 @@
+/* eslint-disable import/prefer-default-export */
+import { fetcher } from './fetcher';
+
+const gardenFetcher = fetcher();
+
+const getGarden = (teamId: number) => gardenFetcher(`/garden/${teamId}`);
+
+export { getGarden };
diff --git a/src/app/team/[teamId]/page.tsx b/src/app/team/[teamId]/page.tsx
@@ -6,6 +6,7 @@ import { Box, Button, Flex, useBreakpointValue } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
 import { BsLink45Deg } from 'react-icons/bs';
 
+import { getGarden } from '@/app/api/garden';
 import { postInviteTeam } from '@/app/api/team';
 import { DocumentCardProps } from '@/components/DocumentCard/types';
 import Garden3D from '@/components/Garden3D';
@@ -22,14 +23,16 @@ import TeamControlPanel from '@/containers/team/TeamControlPanel';
 import TeamMember from '@/containers/team/teamMember';
 import { useMutateWithToken } from '@/hooks/useFetchWithToken';
 import documentCardData from '@/mocks/documentCard';
-import { gardenData } from '@/mocks/Garden3D';
 import studyCardData from '@/mocks/studyCard';
 import teamInfoData from '@/mocks/teamInfo';
+import { Garden } from '@/types';
 
 const Page = ({ params }: { params: { teamId: number } }) => {
   // TODO 팀 조회 연결
   const teamInfo = teamInfoData;
 
+  const [garden, setGarden] = useState<Garden[]>([]);
+
   const [category, setCategory] = useState<string>(TEAM_CATEGORY_INFOS[0].name);
   const [cardIdx, setCardIdx] = useState<number>(0);
 
@@ -57,6 +60,10 @@ const Page = ({ params }: { params: { teamId: number } }) => {
     //       팀 상세 정보 조회 api에서 팀의 스터디와 학습자료 갯수를 받아와야할 것 같습니다.
     setStudyLength(studyCardData.length);
     setDocumentLength(documentCardData.length);
+
+    getGarden(params.teamId).then((res) => {
+      setGarden(res.body);
+    });
   }, []);
 
   useEffect(() => {
@@ -125,15 +132,14 @@ const Page = ({ params }: { params: { teamId: number } }) => {
         <TeamControlPanel teamInfo={teamInfo} />
 
         <Flex pos="relative" align="center" flex="1" gap="8">
-          {/* TODO  잔디 */}
           <Box pos="relative" overflow="hidden" w="100%" h={{ base: '250px', md: '300px', xl: '320px' }}>
             <Box pos="absolute" w="100%" h="100%">
               <Garden3D
                 rotate
                 rotateY={0}
                 cubeGap={useBreakpointValue({ base: 3, xl: 4 }) || 3}
                 cubeSize={useBreakpointValue({ base: 20, md: 26, xl: 30 }) || 20}
-                garden={gardenData}
+                garden={garden}
               />
             </Box>
           </Box>

diff --git a/src/components/Garden3D/Bar/index.tsx b/src/components/Garden3D/Bar/index.tsx
@@ -1,6 +1,6 @@
 import { Box } from '@chakra-ui/react';
 
-import { colorInfo } from '@/mocks/Garden3D';
+import { gardenColor } from '@/constants/gardenColor';
 
 import { CubeProps } from '../types';
 
@@ -19,7 +19,7 @@ const Bar = ({ count, maxCount, currX, currZ, offsetY, cubeSizeHalf }: CubeProps
         style={{
           width: `${cubeSizeHalf * 2}px`,
           height: `${barHeight}px`,
-          background: `${colorInfo[barX].side1}`,
+          background: `${gardenColor[barX].side1}`,
           transform: `translateX(${currX}px) translateY(${offsetY - barHeight}px) translateZ(${currZ + cubeSizeHalf}px)`,
         }}
       />
@@ -30,7 +30,7 @@ const Bar = ({ count, maxCount, currX, currZ, offsetY, cubeSizeHalf }: CubeProps
         style={{
           width: `${cubeSizeHalf * 2}px`,
           height: `${barHeight}px`,
-          background: `${colorInfo[barX].side1}`,
+          background: `${gardenColor[barX].side1}`,
           transform: `translateX(${currX}px) translateY(${offsetY - barHeight}px) translateZ(${currZ}px) rotateY(180deg) translateZ(${cubeSizeHalf}px)`,
         }}
       />
@@ -41,7 +41,7 @@ const Bar = ({ count, maxCount, currX, currZ, offsetY, cubeSizeHalf }: CubeProps
         style={{
           width: `${cubeSizeHalf * 2}px`,
           height: `${barHeight}px`,
-          background: `${colorInfo[barX].side2}`,
+          background: `${gardenColor[barX].side2}`,
           transform: `translateX(${currX}px) translateY(${offsetY - barHeight}px) translateZ(${currZ}px) rotateY(90deg) translateZ(${cubeSizeHalf}px)`,
         }}
       />
@@ -52,7 +52,7 @@ const Bar = ({ count, maxCount, currX, currZ, offsetY, cubeSizeHalf }: CubeProps
         style={{
           width: `${cubeSizeHalf * 2}px`,
           height: `${barHeight}px`,
-          background: `${colorInfo[barX].side2}`,
+          background: `${gardenColor[barX].side2}`,
           transform: `translateX(${currX}px) translateY(${offsetY - barHeight}px) translateZ(${currZ}px) rotateY(270deg) translateZ(${cubeSizeHalf}px)`,
         }}
       />
@@ -63,7 +63,7 @@ const Bar = ({ count, maxCount, currX, currZ, offsetY, cubeSizeHalf }: CubeProps
         style={{
           width: `${cubeSizeHalf * 2}px`,
           height: `${cubeSizeHalf * 2}px`,
-          background: `${colorInfo[barX].ceil}`,
+          background: `${gardenColor[barX].ceil}`,
           transform: `translateX(${currX}px) translateY(${offsetY - barHeight}px) translateZ(${currZ}px) rotateX(90deg) translateZ(${cubeSizeHalf}px)`,
         }}
       />

diff --git a/src/constants/gardenColor.ts b/src/constants/gardenColor.ts
@@ -0,0 +1,35 @@
+/* eslint-disable import/prefer-default-export */
+
+export interface GardenColor {
+  ceil: string;
+  side1: string;
+  side2: string;
+}
+
+export const gardenColor: GardenColor[] = [
+  {
+    ceil: '#EDF2F7',
+    side1: '#CBD5E0',
+    side2: '#A0AEC0',
+  },
+  {
+    ceil: '#D4EDC3',
+    side1: '#C9E2AF',
+    side2: '#B1D195',
+  },
+  {
+    ceil: '#B3D8AB',
+    side1: '#99C490',
+    side2: '#7EAF74',
+  },
+  {
+    ceil: '#81AF7E',
+    side1: '#709B6D',
+    side2: '#5D845B',
+  },
+  {
+    ceil: '#567754',
+    side1: '#4C6B4A',
+    side2: '#425B40',
+  },
+];
diff --git a/src/mocks/Garden3D.ts b/src/mocks/Garden3D.ts
diff --git a/src/types.ts b/src/types.ts
@@ -1,9 +1,3 @@
-export interface CubeColorType {
-  ceil: string;
-  side1: string;
-  side2: string;
-}
-
 export interface ParticipantType {
   id: number;
   name: string;