Feature/#126 팀페이지 반응형 구현 (#128)

* design: 팀 소개글 반응형 구현 #126 * design: 팀 구성원 반응형 구현 #126 * design: 스터디 카드 반응형 구현 #126 * design: 수강률 반응형 구현 #126 * design: 팀 레이아웃 반응형 구현 #126 * design: 잔디 반응형 구현 #126 * design: 잔디 배경색 제거 #126
BDD-CLUB · Mar 18, 2024 · 0a58e44 · 0a58e44
1 parent f04d7a3
commit 0a58e44
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 52 deletions.
diff --git a/src/app/team/[teamId]/layout.tsx b/src/app/team/[teamId]/layout.tsx
@@ -1,10 +1,10 @@
-import { Box } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <Box w="100%" bg="gray.50">
+    <Flex w="100%" h="100%" bg="gray.50">
       {children}
-    </Box>
+    </Flex>
   );
 };
 

diff --git a/src/app/team/[teamId]/page.tsx b/src/app/team/[teamId]/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Box, Button, Flex, Grid } from '@chakra-ui/react';
+import { Box, Button, Flex, Grid, useBreakpointValue } from '@chakra-ui/react';
 import { useState } from 'react';
 import { BsLink45Deg } from 'react-icons/bs';
 
@@ -22,33 +22,38 @@ const Page = () => {
       <Flex justify="space-between">
         <Title isTeam name="열사모" description="팀입니다" />
         {/* TODO 팀원 목록, 초대링크 버튼 */}
-        <Flex align="center" justify="space-between" gap="8" w="fit-content" pr="8">
+        <Flex align="center" gap={{ base: '2', lg: '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">
+      <Flex pos="relative" align="center" flex="1" gap="8">
         {/* TODO  잔디 */}
-        <Box pos="relative" overflow="hidden" w="70%" h="100%">
+        <Box pos="relative" overflow="hidden" w="100%" h={{ base: '250px', md: '300px' }}>
           <Box pos="absolute" left="50%" transform="translate(-50%, 0%)">
-            <Garden3D rotate rotateY={0} cubeGap={4} cubeSize={28} gardenInfos={gardenInfos1} />
+            <Garden3D
+              rotate
+              rotateY={0}
+              cubeGap={useBreakpointValue({ base: 3, xl: 4 }) || 3}
+              cubeSize={useBreakpointValue({ base: 20, md: 26, xl: 30 }) || 20}
+              gardenInfos={gardenInfos1}
+            />
           </Box>
         </Box>
-        <Box h="300px" />
+
         {/* TODO  진행도 */}
         <AttendanceRate attendanceRate={75} />
       </Flex>
 
-      <Flex direction="column" flex="1" gap="4" px="30">
+      <Flex direction="column" flex="1" gap="4">
         {/* TODO 스터디, 학습자료, 작물창고 버튼 */}
         <TabButton currentTab={category} changeTab={setCategory} categoryInfos={teamPageCategoryInfos} />
         {/* TODO 전체보기, 네비게이션 이동 버튼 */}
-        <Box h="10" />
         {/* TODO 스터디 카드 */}
-        <Grid gap="4" templateColumns="repeat(4, 1fr)">
+        <Grid gap="4" templateColumns={{ base: 'repeat(2, 1fr)', lg: 'repeat(4, 1fr)' }}>
           {studyCardData.map((study) => {
             return (
               <StudyCard

diff --git a/src/components/StudyCard/index.tsx b/src/components/StudyCard/index.tsx
@@ -1,43 +1,40 @@
-import { Card, CardHeader, CardBody, CardFooter, Text, Image, Progress, Flex } from '@chakra-ui/react';
+import { Card, CardHeader, CardBody, CardFooter, Text, Image, Progress } from '@chakra-ui/react';
 
 import { StudyCardProps } from '@/components/StudyCard/types';
 
 const StudyCard = ({ name, description, startDate, endDate, cropId, percent, rank }: StudyCardProps) => {
   return (
-    <Flex justify="center">
-      <Card
-        alignItems="center"
-        justifyContent="center"
-        display="flex"
-        w="100%"
-        maxW="80"
-        h="100%"
-        pt="6"
-        shadow="lg"
-        _hover={{ bg: 'gray.100', transition: '0.5s ease-in-out' }}
-        rounded="2xl"
-      >
-        <CardHeader py="2">
-          <Text fontWeight="bold" size="xl">
-            {name}
-          </Text>
-        </CardHeader>
-        <CardBody py="0" textAlign="center" id={cropId.toString()}>
-          <Image w="16" mx="auto" py="4" alt="crops" id="cropId" src="\png\circle.png" />
-          <Text fontSize="sm">{description}</Text>
-          <Text fontSize="sm">
-            {startDate} ~ {endDate}
-          </Text>
-        </CardBody>
-        <CardFooter alignItems="center" justifyContent="center" gap="4" display="flex" pt="0">
-          <Card alignItems="center" w="8" h="8" fontWeight="bold" textAlign="center" shadow="md">
-            {rank}
-          </Card>
-          <Progress w="32" h="1.5" colorScheme="blackAlpha" rounded="md" value={percent} />
-          <Text fontSize="sm">{percent}%</Text>
-        </CardFooter>
-      </Card>
-    </Flex>
+    <Card
+      alignItems="center"
+      justifyContent="center"
+      display="flex"
+      w="100%"
+      h="100%"
+      pt="6"
+      shadow="lg"
+      _hover={{ bg: 'gray.100', transition: '0.5s ease-in-out' }}
+      rounded="2xl"
+    >
+      <CardHeader py="2">
+        <Text fontWeight="bold" size="xl">
+          {name}
+        </Text>
+      </CardHeader>
+      <CardBody py="0" textAlign="center" id={cropId.toString()}>
+        <Image w="16" mx="auto" py="4" alt="crops" id="cropId" src="\png\circle.png" />
+        <Text fontSize="sm">{description}</Text>
+        <Text fontSize="sm">
+          {startDate} ~ {endDate}
+        </Text>
+      </CardBody>
+      <CardFooter alignItems="center" justifyContent="center" gap="4" display="flex" w="100%" pt="0">
+        <Card alignItems="center" w="8" h="8" fontWeight="bold" textAlign="center" shadow="md">
+          {rank}
+        </Card>
+        <Progress flex="1" h="1.5" colorScheme="blackAlpha" rounded="md" value={percent} />
+        <Text fontSize="sm">{percent}%</Text>
+      </CardFooter>
+    </Card>
   );
 };
 

diff --git a/src/components/Title/index.tsx b/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" h="12px">
+      <Box pos="relative" display={{ base: 'none', lg: 'block' }} maxW="96" h="12px">
         <Box
           pos="absolute"
           zIndex="1"

diff --git a/src/containers/team/AttendanceRate/index.tsx b/src/containers/team/AttendanceRate/index.tsx
@@ -1,10 +1,20 @@
-import { CircularProgress, CircularProgressLabel } from '@chakra-ui/react';
+import { CircularProgress, CircularProgressLabel, useBreakpointValue } from '@chakra-ui/react';
 
 import { AttendanceRateProps } from './types';
 
 const AttendanceRate = ({ attendanceRate }: AttendanceRateProps) => {
   return (
-    <CircularProgress color="orange" size="3xs" thickness="5" value={attendanceRate}>
+    <CircularProgress
+      pos="absolute"
+      top={{ base: '0', lg: '50%' }}
+      right={{ base: '0', lg: '4' }}
+      color="orange"
+      opacity="0.8"
+      transform={{ base: 'translateY(0%)', lg: 'translateY(-50%)' }}
+      size={useBreakpointValue({ base: 24, md: 40, lg: 56 })}
+      thickness="5"
+      value={attendanceRate}
+    >
       <CircularProgressLabel color="orange" fontSize="2xl" fontWeight="bold">
         {attendanceRate}%
       </CircularProgressLabel>

diff --git a/src/containers/team/teamMember/index.tsx b/src/containers/team/teamMember/index.tsx
@@ -1,10 +1,10 @@
-import { Avatar, AvatarGroup } from '@chakra-ui/react';
+import { Avatar, AvatarGroup, useBreakpointValue } from '@chakra-ui/react';
 
 import teamMemberList from '@/mocks/teamMember';
 
 const TeamMember = () => {
   return (
-    <AvatarGroup max={4} size="md">
+    <AvatarGroup max={useBreakpointValue({ base: 3, lg: 4 })} size="md">
       {teamMemberList.map((member) => {
         return <Avatar key={member.googleId} name={member.name} src={member.imageUrl} />;
       })}