Feature/#272 팀 crud 토큰 연결 (#278)

src/app/api/team.ts

@@ -13,21 +13,39 @@ const postCreateTeam = (token: string, team: FormData) =>
     },
   });
 
-const putEditTeam = (teamId: number, teamInfo: Pick<Team, 'name' | 'description'>) =>
+const getTeamInfo = (token: string, teamId: number) =>
   teamFetcher(`/teams/${teamId}`, {
+    method: 'GET',
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+const putEditTeam = (token: string, teamId: number, teamInfo: Pick<Team, 'name' | 'description'>) => {
+  return teamFetcher(`/teams/${teamId}`, {
     method: 'PUT',
     body: teamInfo,
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
   });
+};
 
-const patchEditTeamImage = (teamId: number, file: FormData) =>
+const patchEditTeamImage = (token: string, teamId: number, file: FormData) =>
   teamFetcher(`/teams/${teamId}/image`, {
     method: 'PATCH',
     body: file,
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
   });
 
-const deleteTeam = (teamId: number) =>
+const deleteTeam = (token: string, teamId: number) =>
   teamFetcher(`/teams/${teamId}`, {
     method: 'DELETE',
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
   });
 
 const postInviteTeam = (token: string, teamId: number) =>
@@ -55,6 +73,7 @@ const getMyTeams = (memberId: number) => teamFetcher(`/teams/members/${memberId}
 
 export {
   postCreateTeam,
+  getTeamInfo,
   putEditTeam,
   patchEditTeamImage,
   deleteTeam,

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

@@ -7,7 +7,7 @@ import { useEffect, useState } from 'react';
 import { BsLink45Deg } from 'react-icons/bs';
 
 import { getGarden } from '@/app/api/garden';
-import { postInviteTeam } from '@/app/api/team';
+import { getTeamInfo, postInviteTeam } from '@/app/api/team';
 import { DocumentCardProps } from '@/components/DocumentCard/types';
 import Garden3D from '@/components/Garden3D';
 import { StudyCardProps } from '@/components/StudyCard/types';
@@ -21,15 +21,13 @@ 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 { useMutateWithToken } from '@/hooks/useFetchWithToken';
+import { useGetFetchWithToken, useMutateWithToken } from '@/hooks/useFetchWithToken';
 import documentCardData from '@/mocks/documentCard';
 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 teamInfo = useGetFetchWithToken(getTeamInfo, [params.teamId]);
 
   const [garden, setGarden] = useState<Garden[]>([]);
 
@@ -113,7 +111,7 @@ const Page = ({ params }: { params: { teamId: number } }) => {
     <>
       <Flex direction="column" gap="8" w="100%" p="8">
         <Flex justify="space-between">
-          <Title isTeam imageUrl={teamInfo.imageUrl} name={teamInfo.name} description={teamInfo.description} />
+          <Title isTeam imageUrl={teamInfo?.imageUrl} name={teamInfo?.name} description={teamInfo?.description} />
           {/* TODO 팀원 목록, 초대링크 버튼 */}
           <Flex align="center" gap={{ base: '2', lg: '8' }}>
             <TeamMember teamId={params.teamId} />
@@ -145,7 +143,7 @@ const Page = ({ params }: { params: { teamId: number } }) => {
           </Box>
 
           {/* TODO  진행도 */}
-          <AttendanceRate attendanceRate={teamInfo.attendanceRate} />
+          <AttendanceRate attendanceRate={teamInfo?.attendanceRatio} />
         </Flex>
 
         <Flex direction="column" flex="1" gap="4">

src/components/Title/index.tsx

@@ -1,5 +1,7 @@
 import { Text, Flex, Avatar, Box } from '@chakra-ui/react';
 
+import S3_URL from '@/constants/s3Url';
+
 import { TitleProps } from './types';
 
 const Title = ({ isTeam, name, description, imageUrl }: TitleProps) => {
@@ -11,7 +13,7 @@ const Title = ({ isTeam, name, description, imageUrl }: TitleProps) => {
           borderColor="gray.100"
           shadow="none"
           size="md"
-          src={imageUrl ?? '/images/doore_logo.png'}
+          src={imageUrl ? S3_URL(imageUrl) : '/images/doore_logo.png'}
         />
       )}
       <Text textStyle="bold_3xl">{name}</Text>

src/constants/s3Url.ts

@@ -0,0 +1,3 @@
+const S3_URL = (key: string) => `https://doo-re-dev-bucket.s3.ap-northeast-2.amazonaws.com/${key}`;
+
+export default S3_URL;

src/containers/team/DeleteTeamModal/index.tsx

@@ -1,14 +1,20 @@
 import { Text } from '@chakra-ui/react';
+import { useRouter } from 'next/navigation';
 
-import { deleteTeam } from '@/app/api/team';
+import { deleteTeam as deleteTeamApi } from '@/app/api/team';
 import ConfirmModal from '@/components/Modal/ConfirmModal';
+import { useMutateWithToken } from '@/hooks/useFetchWithToken';
 
 import { DeleteTeamModalProps } from './type';
 
 const DeleteTeamModal = ({ id, name, isOpen, onClose }: DeleteTeamModalProps) => {
+  const deleteTeam = useMutateWithToken(deleteTeamApi);
+  const router = useRouter();
+
   const handleDeleteTeamButtonClick = () => {
     deleteTeam(id).then(() => {
       onClose();
+      router.replace('/');
     });
   };
 

src/containers/team/TeamModal/index.tsx

@@ -7,6 +7,7 @@ import { BiEdit, BiFile } from 'react-icons/bi';
 import { patchEditTeamImage, postCreateTeam, putEditTeam } from '@/app/api/team';
 import IconBox from '@/components/IconBox';
 import ActionModal from '@/components/Modal/ActionModal';
+import S3_URL from '@/constants/s3Url';
 import { useMutateWithToken } from '@/hooks/useFetchWithToken';
 
 import { TeamModalProps } from './type';
@@ -29,6 +30,8 @@ const TeamModal = ({ teamInfo, isOpen, onClose }: TeamModalProps) => {
   const [alertDescription, setAlertDescription] = useState<boolean>(false);
 
   const createTeam = useMutateWithToken(postCreateTeam);
+  const editTeam = useMutateWithToken(putEditTeam);
+  const editTeamImage = useMutateWithToken(patchEditTeamImage);
 
   const resetState = () => {
     setName('');
@@ -57,17 +60,23 @@ const TeamModal = ({ teamInfo, isOpen, onClose }: TeamModalProps) => {
     if (!isTeamInfoValid()) return;
 
     if (teamInfo) {
-      putEditTeam(teamInfo.id, {
+      editTeam(teamInfo.id, {
         name,
         description,
-      }).then(() => {
-        if (thumbnail) {
-          const teamForm = new FormData();
-          teamForm.append('file', thumbnail as Blob);
-
-          patchEditTeamImage(teamInfo.id, teamForm).then(() => {});
+      }).then((editTeamResponse) => {
+        if (editTeamResponse.ok) {
+          if (thumbnail) {
+            const teamForm = new FormData();
+            teamForm.append('file', thumbnail as Blob);
+
+            editTeamImage(teamInfo.id, teamForm).then((editTeamImageResponse) => {
+              if (editTeamImageResponse.ok) {
+                resetAndCloseModal();
+              }
+            });
+          }
+          resetAndCloseModal();
         }
-        resetAndCloseModal();
       });
     }
   };
@@ -168,7 +177,7 @@ const TeamModal = ({ teamInfo, isOpen, onClose }: TeamModalProps) => {
             handleClick={() => inputFileRef.current?.click()}
           />
           {thumbnailPath ? (
-            <Image w="40" alt="thumbnail" src={thumbnailPath} />
+            <Image w="40" alt="thumbnail" src={S3_URL(thumbnailPath)} />
           ) : (
             thumbnail && <Image w="40" alt="thumbnail" src={URL.createObjectURL(thumbnail)} />
           )}

src/types.ts

@@ -45,7 +45,7 @@ export interface Team {
 }
 
 export interface TeamDetail extends Team {
-  attendanceRate: number;
+  attendanceRatio: number;
 }
 
 export interface Member {