Feature/#339 스터디 카드 및 사이브바 UI 수정 (#340)

* feat: 사이드바에서 아직 지원하지 않는 기능인 알람 및 마이페이지 버튼 주석 처리 #339 * design: 스터디 카드에서 스터디명 가운데 정렬 및 말줄임 추가 #339 * dsign: 스터디 카드에서 너비가 좁을 때, 스터디 기간이 통으로 내려가도록 수정 #339
BDD-CLUB · Nov 17, 2024 · ae0cac9 · ae0cac9
1 parent 859bbcf
commit ae0cac9
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git a/src/components/Sidebar/SidebarContent/index.tsx b/src/components/Sidebar/SidebarContent/index.tsx
@@ -4,7 +4,7 @@ import { Avatar, Button, Flex, IconButton, Text } from '@chakra-ui/react';
 import { useSetAtom } from 'jotai';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import { BiBell, BiUser } from 'react-icons/bi';
+// import { BiBell, BiUser } from 'react-icons/bi';
 import { BsPlus, BsGrid } from 'react-icons/bs';
 import { MdOutlineLogout } from 'react-icons/md';
 
@@ -75,8 +75,9 @@ const SidebarContent = ({ isOpen, setIsOpen }: SidebarContentProps) => {
             </Text>
           )}
           <Flex direction={isOpen ? 'row' : 'column'} gap="4">
-            <SidebarIconButton icon={<BiBell />} onClick={() => {}} />
-            <SidebarIconButton icon={<BiUser />} onClick={() => {}} />
+            {/* TODO: 기능 완료하고 주석 풀기 */}
+            {/* <SidebarIconButton icon={<BiBell />} onClick={() => {}} />
+            <SidebarIconButton icon={<BiUser />} onClick={() => {}} /> */}
             <SidebarIconButton icon={<MdOutlineLogout />} onClick={handleLogOutButtonClick} />
           </Flex>
         </Flex>

diff --git a/src/components/StudyCard/index.tsx b/src/components/StudyCard/index.tsx
@@ -1,4 +1,4 @@
-import { Card, CardHeader, CardBody, CardFooter, Text, Image, Progress, Link } from '@chakra-ui/react';
+import { Card, CardHeader, CardBody, CardFooter, Text, Image, Progress, Link, Flex } from '@chakra-ui/react';
 
 import CROP from '@/constants/crop';
 
@@ -22,25 +22,28 @@ const StudyCard = ({
       display="flex"
       w="100%"
       h="100%"
-      pt="6"
+      p="24px 16px"
       shadow="lg"
       _hover={{ bg: 'gray.100', transition: '0.5s ease-in-out' }}
+      boxSizing="border-box"
       rounded="2xl"
     >
-      <Link href={`/team/${teamId}/study/${id}`}>
+      <Link w="100%" href={`/team/${teamId}/study/${id}`}>
         <CardHeader py="2">
-          <Text textStyle="bold_md">{name}</Text>
+          <Text textStyle="bold_md" overflow="hidden" textAlign="center" whiteSpace="nowrap" textOverflow="ellipsis">
+            {name}
+          </Text>
         </CardHeader>
         <CardBody py="0" textAlign="center" id={cropId.toString()}>
           {CROP.filter((crop) => crop.id === cropId).map((crop) => (
             <Image key={crop.id} w="16" mx="auto" py="4" alt="crops" src={crop.imageUrl} />
           ))}
           <Text textStyle="sm">{description}</Text>
-          <Text textStyle="sm">
-            {startDate} ~ {endDate}
-          </Text>
+          <Flex textStyle="sm" justify="center" wrap="wrap" columnGap="2">
+            <Text>{startDate}</Text>~<Text>{endDate}</Text>
+          </Flex>
         </CardBody>
-        <CardFooter alignItems="center" justifyContent="center" gap="4" display="flex" w="100%" pt="0">
+        <CardFooter alignItems="center" justifyContent="center" gap="4" display="flex" w="100%" py="0">
           <Card textStyle="bold_md" alignItems="center" w="8" h="8" textAlign="center" shadow="md">
             {rank}
           </Card>