diff --git a/src/app/api/team.ts b/src/app/api/team.ts index 68a62061..135c0811 100644 --- a/src/app/api/team.ts +++ b/src/app/api/team.ts @@ -51,6 +51,14 @@ const patchEditTeamImage = (token: string, teamId: number, file: FormData) => }, }); +const deleteTeamImage = (token: string, teamId: number) => + teamFetcher(`/teams/${teamId}/image`, { + method: 'DELETE', + headers: { + Authorization: `Bearer ${token}`, + }, + }); + const deleteTeam = (token: string, teamId: number) => teamFetcher(`/teams/${teamId}`, { method: 'DELETE', @@ -109,6 +117,7 @@ export { useGetTeamInfoQuery, putEditTeam, patchEditTeamImage, + deleteTeamImage, deleteTeam, postInviteTeam, postJoinTeam, diff --git a/src/containers/team/TeamModal/index.tsx b/src/containers/team/TeamModal/index.tsx index b7938aac..ff48a738 100644 --- a/src/containers/team/TeamModal/index.tsx +++ b/src/containers/team/TeamModal/index.tsx @@ -1,10 +1,10 @@ 'use client'; -import { Flex, Text, Textarea, Image } from '@chakra-ui/react'; +import { Flex, Text, Textarea, Image, IconButton, Box } from '@chakra-ui/react'; import { useEffect, useRef, useState } from 'react'; -import { BiEdit, BiFile } from 'react-icons/bi'; +import { BiEdit, BiFile, BiTrash } from 'react-icons/bi'; -import { patchEditTeamImage, postCreateTeam, putEditTeam } from '@/app/api/team'; +import { deleteTeamImage, patchEditTeamImage, postCreateTeam, putEditTeam } from '@/app/api/team'; import IconBox from '@/components/IconBox'; import ActionModal from '@/components/Modal/ActionModal'; import S3_URL from '@/constants/s3Url'; @@ -30,10 +30,12 @@ const TeamModal = ({ teamInfo, isOpen, onClose }: TeamModalProps) => { const [thumbnail, setThumbnail] = useState(); const [alertName, setAlertName] = useState(false); const [alertDescription, setAlertDescription] = useState(false); + const [isImageDeleted, setIsImageDeleted] = useState(false); const createTeam = useMutateWithToken(postCreateTeam); const editTeam = useMutateWithToken(putEditTeam); const editTeamImage = useMutateWithToken(patchEditTeamImage); + const removeTeamImage = useMutateWithToken(deleteTeamImage); const refetchSideBar = useRefetchSideBar(); const refetchTeamInfo = useRefetchTeamInfo(); @@ -69,6 +71,12 @@ const TeamModal = ({ teamInfo, isOpen, onClose }: TeamModalProps) => { } }; + const handleDeleteImage = () => { + setThumbnail(null); + setThumbnailPath(''); + setIsImageDeleted(true); + }; + const handleEditTeamButtonClick = () => { if (!isTeamInfoValid()) return; @@ -85,6 +93,16 @@ const TeamModal = ({ teamInfo, isOpen, onClose }: TeamModalProps) => { editTeamImage(teamInfo.id, teamForm).then((editTeamImageResponse) => { if (editTeamImageResponse.ok) { updateTeamInfo(); + } else { + alert('팀 이미지 수정에 실패했습니다.'); + } + }); + } else if (isImageDeleted) { + removeTeamImage(teamInfo.id).then((deleteImageResponse) => { + if (deleteImageResponse.ok) { + updateTeamInfo(); + } else { + alert('팀 이미지 삭제에 실패했습니다.'); } }); } else { @@ -189,12 +207,27 @@ const TeamModal = ({ teamInfo, isOpen, onClose }: TeamModalProps) => { } }} /> - } - rightIcon={} - content={thumbnail ? thumbnail.name : '파일을 추가해주세요.'} - handleClick={() => inputFileRef.current?.click()} - /> + + + } + rightIcon={} + content={thumbnail ? thumbnail.name : '파일을 추가해주세요.'} + handleClick={() => inputFileRef.current?.click()} + /> + + } + onClick={handleDeleteImage} + size="icon_md" + variant="orange_light" + /> + {thumbnailPath ? ( thumbnail ) : (