diff --git a/src/containers/team/TeamModal/index.tsx b/src/containers/team/TeamModal/index.tsx index e5fed87..ff48a73 100644 --- a/src/containers/team/TeamModal/index.tsx +++ b/src/containers/team/TeamModal/index.tsx @@ -4,7 +4,7 @@ import { Flex, Text, Textarea, Image, IconButton, Box } from '@chakra-ui/react'; import { useEffect, useRef, useState } from 'react'; 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 { @@ -205,10 +223,7 @@ const TeamModal = ({ teamInfo, isOpen, onClose }: TeamModalProps) => { borderRadius="2xl" aria-label="" icon={} - onClick={() => { - setThumbnail(null); - setThumbnailPath(''); - }} + onClick={handleDeleteImage} size="icon_md" variant="orange_light" />