Feature/#103 팀 페이지 레이아웃 배치 (#105)

* design: 팀 페이지 레이아웃 배치

#103

* design: 타이틀 말풍선 크기 수정

#103

---------

Co-authored-by: Kim DoKyun <51306225+jasper200207@users.noreply.github.com>

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

@@ -1,10 +1,16 @@
 'use client';
 
-import { Box, Flex, SimpleGrid } from '@chakra-ui/react';
+import { Box, Button, Flex, Grid } from '@chakra-ui/react';
 import { useState } from 'react';
+import { BsLink45Deg } from 'react-icons/bs';
 
+import Garden3D from '@/components/Garden3D';
 import StudyCard from '@/components/StudyCard';
 import TabButton from '@/components/TabButton';
+import Title from '@/components/Title';
+import AttendanceRate from '@/containers/team/AttendanceRate';
+import TeamMember from '@/containers/team/teamMember';
+import { gardenInfos1 } from '@/mocks/Garden3D';
 import studyCardData from '@/mocks/studyCard';
 import teamPageCategoryInfos from '@/mocks/team';
 
@@ -13,27 +19,36 @@ const Page = () => {
 
   return (
     <Flex direction="column" gap="8" w="100%" p="8">
-      <Flex justify="space-between" bg="gray.100">
-        {/* TODO 이름 + 소개글 컴포넌트 */}
-        <Box w="96" h="16" bg="gray.200" />
+      <Flex justify="space-between">
+        <Title isTeam name="열사모" description="팀입니다" />
         {/* TODO 팀원 목록, 초대링크 버튼 */}
-        <Box w="52" h="16" bg="gray.200" />
+        <Flex align="center" justify="space-between" gap="8" w="fit-content" pr="8">
+          <TeamMember />
+          <Button color="white" bg="orange_dark" rightIcon={<BsLink45Deg size="24px" />} rounded="full" size="sm">
+            초대
+          </Button>
+        </Flex>
       </Flex>
 
-      <Flex align="center" flex="1" gap="8" bg="gray.100">
+      <Flex align="center" flex="1" gap="8">
         {/* TODO  잔디 */}
-        <Flex flex="1" h="300px" bg="gray.200" />
+        <Box pos="relative" overflow="hidden" w="70%" h="100%">
+          <Box pos="absolute" left="50%" transform="translate(-50%, 0%)">
+            <Garden3D rotate rotateY={0} cubeGap={4} cubeSize={28} gardenInfos={gardenInfos1} />
+          </Box>
+        </Box>
+        <Box h="300px" />
         {/* TODO  진행도 */}
-        <Box w="200px" h="200px" bg="gray.200" rounded="full" />
+        <AttendanceRate attendanceRate={75} />
       </Flex>
 
-      <Flex direction="column" flex="1" gap="4" bg="gray.100">
+      <Flex direction="column" flex="1" gap="4" px="30">
         {/* TODO 스터디, 학습자료, 작물창고 버튼 */}
         <TabButton currentTab={category} changeTab={setCategory} categoryInfos={teamPageCategoryInfos} />
         {/* TODO 전체보기, 네비게이션 이동 버튼 */}
-        <Box h="10" bg="gray.200" />
+        <Box h="10" />
         {/* TODO 스터디 카드 */}
-        <SimpleGrid justifyContent="center" gap="4" px="24" minChildWidth="64">
+        <Grid gap="4" templateColumns="repeat(4, 1fr)">
           {studyCardData.map((study) => {
             return (
               <StudyCard
@@ -48,11 +63,7 @@ const Page = () => {
               />
             );
           })}
-          {/* <GridItem w="100%" h="64" bg="gray.200" />
-          <GridItem w="100%" h="64" bg="gray.200" />
-          <GridItem w="100%" h="64" bg="gray.200" />
-          <GridItem w="100%" h="64" bg="gray.200" /> */}
-        </SimpleGrid>
+        </Grid>
       </Flex>
     </Flex>
   );

src/components/Title/index.tsx

@@ -11,7 +11,7 @@ const Title = ({ isTeam = false, teamImg, name, description }: TitleProps) => {
       <Text mr="5" fontSize="3xl" fontWeight="bold">
         {name}
       </Text>
-      <Box pos="relative" maxW="96" minH="8" maxH="12">
+      <Box pos="relative" maxW="96" h="12px">
         <Box
           pos="absolute"
           zIndex="1"
@@ -28,9 +28,9 @@ const Title = ({ isTeam = false, teamImg, name, description }: TitleProps) => {
           left="0"
           overflow="hidden"
           w={{ base: '72', '2xl': '96' }}
-          minH="8"
+          minH="6"
           maxH="12"
-          px="2"
+          px="3"
           bg="white"
           borderRadius="base"
           shadow="md"