diff --git a/src/app/api/team.ts b/src/app/api/team.ts index aabb2d9f..70266707 100644 --- a/src/app/api/team.ts +++ b/src/app/api/team.ts @@ -13,21 +13,39 @@ const postCreateTeam = (token: string, team: FormData) => }, }); -const putEditTeam = (teamId: number, teamInfo: Pick) => +const getTeamInfo = (token: string, teamId: number) => teamFetcher(`/teams/${teamId}`, { + method: 'GET', + headers: { + Authorization: `Bearer ${token}`, + }, + }); + +const putEditTeam = (token: string, teamId: number, teamInfo: Pick) => { + 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, diff --git a/src/app/team/[teamId]/page.tsx b/src/app/team/[teamId]/page.tsx index db5577a6..6b3982c3 100644 --- a/src/app/team/[teamId]/page.tsx +++ b/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([]); @@ -113,7 +111,7 @@ const Page = ({ params }: { params: { teamId: number } }) => { <> - + <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"> diff --git a/src/components/Title/index.tsx b/src/components/Title/index.tsx index 7a782695..0afcf9fe 100644 --- a/src/components/Title/index.tsx +++ b/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> diff --git a/src/constants/s3Url.ts b/src/constants/s3Url.ts new file mode 100644 index 00000000..b0cb01b5 --- /dev/null +++ b/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; diff --git a/src/containers/team/DeleteTeamModal/index.tsx b/src/containers/team/DeleteTeamModal/index.tsx index e1fb75ea..d7ef9578 100644 --- a/src/containers/team/DeleteTeamModal/index.tsx +++ b/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('/'); }); }; diff --git a/src/containers/team/TeamModal/index.tsx b/src/containers/team/TeamModal/index.tsx index a38a7866..530a2727 100644 --- a/src/containers/team/TeamModal/index.tsx +++ b/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)} /> )} diff --git a/src/mocks/teamInfo.ts b/src/mocks/teamInfo.ts deleted file mode 100644 index 1ffd7dd4..00000000 --- a/src/mocks/teamInfo.ts +++ /dev/null @@ -1,10 +0,0 @@ -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; diff --git a/src/types.ts b/src/types.ts index 1eb1c233..a31396fa 100644 --- a/src/types.ts +++ b/src/types.ts @@ -45,7 +45,7 @@ export interface Team { } export interface TeamDetail extends Team { - attendanceRate: number; + attendanceRatio: number; } export interface Member {