Feature/#247 팀 rud api 연결

src/app/api/team.ts

@@ -1,4 +1,4 @@
-import { EditTeamDto } from '@/types';
+import { Team } from '@/types';
 
 import { fetcher } from './fetcher';
 
@@ -10,10 +10,10 @@ const postCreateTeam = (team: FormData) =>
     body: team,
   });
 
-const putEditTeam = (teamId: number, team: EditTeamDto) =>
+const putEditTeam = (teamId: number, teamInfo: Pick<Team, 'name' | 'description'>) =>
   teamFetcher(`/teams/${teamId}`, {
     method: 'PUT',
-    body: team,
+    body: teamInfo,
   });
 
 const patchEditTeamImage = (teamId: number, file: FormData) =>

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

@@ -16,12 +16,17 @@ import AssetGridView from '@/containers/team/AssetGridView';
 import AttendanceRate from '@/containers/team/AttendanceRate';
 import NavigationButton from '@/containers/team/NavigationButton';
 import StudyGridView from '@/containers/team/StudyGridView';
+import TeamControlPanel from '@/containers/team/TeamControlPanel';
 import TeamMember from '@/containers/team/teamMember';
 import { gardenInfos1 } from '@/mocks/Garden3D';
 import studyAssetCardData from '@/mocks/studyAssetCard';
 import studyCardData from '@/mocks/studyCard';
+import teamInfoData from '@/mocks/teamInfo';
 
 const Page = () => {
+  // TODO 팀 조회 연결
+  const teamInfo = teamInfoData;
+
   const [category, setCategory] = useState<string>(TEAM_CATEGORY_INFOS[0].name);
   const [cardIdx, setCardIdx] = useState<number>(0);
 
@@ -78,9 +83,9 @@ const Page = () => {
   };
 
   return (
-    <Flex direction="column" gap="8" w="100%" p="8">
+    <Flex direction="column" gap="2" w="100%" p="8">
       <Flex justify="space-between">
-        <Title isTeam name="열사모" description="팀입니다" />
+        <Title isTeam imageUrl={teamInfo.imageUrl} name={teamInfo.name} description={teamInfo.description} />
         {/* TODO 팀원 목록, 초대링크 버튼 */}
         <Flex align="center" gap={{ base: '2', lg: '8' }}>
           <TeamMember />
@@ -89,6 +94,7 @@ const Page = () => {
           </Button>
         </Flex>
       </Flex>
+      <TeamControlPanel teamInfo={teamInfo} />
 
       <Flex pos="relative" align="center" flex="1" gap="8">
         {/* TODO  잔디 */}
@@ -105,7 +111,7 @@ const Page = () => {
         </Box>
 
         {/* TODO  진행도 */}
-        <AttendanceRate attendanceRate={75} />
+        <AttendanceRate attendanceRate={teamInfo.attendanceRate} />
       </Flex>
 
       <Flex direction="column" flex="1" gap="4">

src/components/Sidebar/SidebarContent/index.tsx

@@ -90,7 +90,7 @@ const SidebarContent = ({ isOpen, setIsOpen }: SidebarContentProps) => {
           </>
         )}
       </Flex>
-      <TeamModal isOpen={isTeamModalOpen} setIsOpen={setIsTeamModalOpen} />
+      <TeamModal isOpen={isTeamModalOpen} onClose={() => setIsTeamModalOpen(false)} />
     </>
   );
 };

src/components/Title/index.tsx

@@ -2,7 +2,7 @@ import { Text, Flex, Avatar, Box } from '@chakra-ui/react';
 
 import { TitleProps } from './types';
 
-const Title = ({ isTeam = false, teamImg, name, description }: TitleProps) => {
+const Title = ({ isTeam = false, name, description, imageUrl }: TitleProps) => {
   return (
     <Flex pos="relative" align="center" gap="3">
       {isTeam && (
@@ -11,7 +11,7 @@ const Title = ({ isTeam = false, teamImg, name, description }: TitleProps) => {
           borderColor="gray.100"
           shadow="none"
           size="md"
-          src={teamImg || '/images/doore_logo.png'}
+          src={imageUrl ?? '/images/doore_logo.png'}
         />
       )}
       <Text textStyle="bold_3xl">{name}</Text>

src/components/Title/types.ts

@@ -1,6 +1,5 @@
-export interface TitleProps {
+import { Team } from '@/types';
+
+export interface TitleProps extends Omit<Team, 'id'> {
   isTeam?: boolean;
-  teamImg?: string;
-  name: string;
-  description: string;
 }

src/containers/team/DeleteTeamModal/index.tsx

@@ -0,0 +1,32 @@
+import { Text } from '@chakra-ui/react';
+
+import { deleteTeam } from '@/app/api/team';
+import ConfirmModal from '@/components/Modal/ConfirmModal';
+
+import { DeleteTeamModalProps } from './type';
+
+const DeleteTeamModal = ({ id, name, isOpen, onClose }: DeleteTeamModalProps) => {
+  const handleDeleteTeamButtonClick = () => {
+    deleteTeam(id).then(() => {
+      onClose();
+    });
+  };
+
+  return (
+    <ConfirmModal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="팀 삭제"
+      confirmButtonText="삭제"
+      onConfirmButtonClick={() => handleDeleteTeamButtonClick()}
+    >
+      <Text align="center">
+        삭제된 팀은 되돌릴 수 없습니다.
+        <br />
+        {name} 팀을 삭제하시겠습니까?
+      </Text>
+    </ConfirmModal>
+  );
+};
+
+export default DeleteTeamModal;

src/containers/team/DeleteTeamModal/type.ts

@@ -0,0 +1,6 @@
+import { Team } from '@/types';
+
+export interface DeleteTeamModalProps extends Pick<Team, 'id' | 'name'> {
+  isOpen: boolean;
+  onClose: () => void;
+}

src/containers/team/TeamControlPanel/index.tsx

@@ -0,0 +1,57 @@
+import { Button, Flex } from '@chakra-ui/react';
+import { useState } from 'react';
+
+import { TeamControlPanelProps } from './types';
+import DeleteTeamModal from '../DeleteTeamModal';
+import TeamModal from '../TeamModal';
+
+const TeamControlPanel = ({ teamInfo }: TeamControlPanelProps) => {
+  const [isEditModalOpen, setIsEditModalOpen] = useState<boolean>(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);
+
+  return (
+    <Flex gap="2" mb="8">
+      <Button
+        w="fit-content"
+        px="4"
+        py="1"
+        color="white"
+        bg="orange"
+        shadow="md"
+        _hover={{ bg: 'orange' }}
+        aria-label=""
+        onClick={() => setIsEditModalOpen(true)}
+        size="xs"
+      >
+        수정
+      </Button>
+      <Button
+        w="fit-content"
+        px="4"
+        py="1"
+        color="black"
+        bg="white"
+        shadow="md"
+        _hover={{ bg: 'white' }}
+        aria-label="delete-team-button"
+        onClick={() => setIsDeleteModalOpen(true)}
+        size="xs"
+      >
+        삭제
+      </Button>
+      {isEditModalOpen && (
+        <TeamModal teamInfo={teamInfo} isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} />
+      )}
+      {isDeleteModalOpen && (
+        <DeleteTeamModal
+          id={teamInfo?.id}
+          name={teamInfo?.name}
+          isOpen={isDeleteModalOpen}
+          onClose={() => setIsDeleteModalOpen(false)}
+        />
+      )}
+    </Flex>
+  );
+};
+
+export default TeamControlPanel;

src/containers/team/TeamControlPanel/types.ts

@@ -0,0 +1,5 @@
+import { TeamDetail } from '@/types';
+
+export interface TeamControlPanelProps {
+  teamInfo: TeamDetail;
+}

src/containers/team/TeamModal/index.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { Flex, Text, Textarea, Image } from '@chakra-ui/react';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { BiEdit, BiFile } from 'react-icons/bi';
 
-import { postCreateTeam } from '@/app/api/team';
+import { patchEditTeamImage, postCreateTeam, putEditTeam } from '@/app/api/team';
 import IconBox from '@/components/IconBox';
 import ActionModal from '@/components/Modal/ActionModal';
 
@@ -18,52 +18,92 @@ const AlertContent = ({ message }: { message: string }) => {
   );
 };
 
-const TeamModal = ({ isOpen, setIsOpen }: TeamModalProps) => {
+const TeamModal = ({ teamInfo, isOpen, onClose }: TeamModalProps) => {
   const inputFileRef = useRef<HTMLInputElement>(null);
   const [name, setName] = useState<string>('');
   const [description, setDescription] = useState<string>('');
+  const [thumbnailPath, setThumbnailPath] = useState<string>('');
   const [thumbnail, setThumbnail] = useState<File | null>();
   const [alertName, setAlertName] = useState<boolean>(false);
   const [alertDescription, setAlertDescription] = useState<boolean>(false);
 
-  const onClose = () => {
+  const resetState = () => {
     setName('');
     setDescription('');
+    setThumbnailPath('');
     setThumbnail(null);
     setAlertName(false);
     setAlertDescription(false);
-    setIsOpen(false);
   };
 
-  const onSave = () => {
-    if (name === '') setAlertName(true);
-    else if (description === '') setAlertDescription(true);
-    else {
-      const teamForm = new FormData();
-      const request = {
+  const resetAndCloseModal = () => {
+    resetState();
+    onClose();
+  };
+
+  const isTeamInfoValid = () => {
+    const isValidName = name.trim() !== '';
+    const isValidDescription = description.trim() !== '';
+    setAlertName(!isValidName);
+    setAlertDescription(!isValidDescription);
+
+    return isValidName && isValidDescription;
+  };
+
+  const handleEditTeamButtonClick = () => {
+    if (!isTeamInfoValid()) return;
+
+    if (teamInfo) {
+      putEditTeam(teamInfo.id, {
         name,
         description,
-      };
-      const requestBlob = new Blob([JSON.stringify(request)], { type: 'application/json' });
-
-      teamForm.append('request', requestBlob);
-      teamForm.append('file', thumbnail as Blob);
+      }).then(() => {
+        if (thumbnail) {
+          const teamForm = new FormData();
+          teamForm.append('file', thumbnail as Blob);
 
-      postCreateTeam(teamForm).then(() => {
-        onClose();
+          patchEditTeamImage(teamInfo.id, teamForm).then(() => {});
+        }
+        resetAndCloseModal();
       });
     }
   };
 
+  const handleAddTeamButtonClick = () => {
+    if (!isTeamInfoValid) return;
+
+    const teamForm = new FormData();
+    const request = {
+      name,
+      description,
+    };
+    const requestBlob = new Blob([JSON.stringify(request)], { type: 'application/json' });
+
+    teamForm.append('request', requestBlob);
+    teamForm.append('file', thumbnail as Blob);
+
+    postCreateTeam(teamForm).then(() => {
+      resetAndCloseModal();
+    });
+  };
+
+  useEffect(() => {
+    if (teamInfo) {
+      setName(teamInfo.name);
+      setDescription(teamInfo.description);
+      setThumbnailPath(teamInfo.imageUrl ?? '');
+    }
+  }, [teamInfo]);
+
   return (
     <ActionModal
       isOpen={isOpen}
-      onClose={onClose}
-      title="팀 생성"
+      onClose={resetAndCloseModal}
+      title={`팀 ${teamInfo ? '수정' : '생성'}`}
       subButtonText="취소"
-      onSubButtonClick={onClose}
-      mainButtonText="저장"
-      onMainButtonClick={onSave}
+      onSubButtonClick={resetAndCloseModal}
+      mainButtonText={teamInfo ? '수정' : '생성'}
+      onMainButtonClick={teamInfo ? handleEditTeamButtonClick : handleAddTeamButtonClick}
     >
       <Flex direction="column" gap="10" w="100%">
         <Flex direction="column">
@@ -112,6 +152,7 @@ const TeamModal = ({ isOpen, setIsOpen }: TeamModalProps) => {
             onChange={(e) => {
               if (e.target.files && e.target.files[0]) {
                 setThumbnail(e.target.files[0]);
+                setThumbnailPath('');
               }
             }}
           />
@@ -121,7 +162,11 @@ const TeamModal = ({ isOpen, setIsOpen }: TeamModalProps) => {
             content={thumbnail ? thumbnail.name : '파일을 추가해주세요.'}
             handleClick={() => inputFileRef.current?.click()}
           />
-          {thumbnail && <Image w="40" alt="thumbnail" src={URL.createObjectURL(thumbnail)} />}
+          {thumbnailPath ? (
+            <Image w="40" alt="thumbnail" src={thumbnailPath} />
+          ) : (
+            thumbnail && <Image w="40" alt="thumbnail" src={URL.createObjectURL(thumbnail)} />
+          )}
         </Flex>
       </Flex>
     </ActionModal>

src/containers/team/TeamModal/type.ts

@@ -1,4 +1,7 @@
+import { Team } from '@/types';
+
 export interface TeamModalProps {
+  teamInfo?: Team;
   isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  onClose: () => void;
 }

src/mocks/teamInfo.ts

@@ -0,0 +1,10 @@
+import { TeamDetail } from '@/types';
+
+const teamInfoData: TeamDetail = {
+  id: 99,
+  name: '열사모',
+  description: '팀 설명이옵니다',
+  imageUrl: 'https://doo-re-dev-bucket.s3.ap-northeast-2.amazonaws.com/images/005bd2bf-b000-47e2-b092-f5210416ecbc.png',
+  attendanceRate: 50,
+};
+export default teamInfoData;

src/types.ts

@@ -60,9 +60,15 @@ export interface EditStudyDto {
   status: string;
 }
 
-export interface EditTeamDto {
+export interface Team {
+  readonly id: number;
   name: string;
   description: string;
+  imageUrl: string;
+}
+
+export interface TeamDetail extends Team {
+  attendanceRate: number;
 }
 
 export interface Curriculum {