feat: 팀 이미지 삭제 api 연결

#378
BDD-CLUB · Jan 12, 2025 · 2cb5af8 · 2cb5af8
1 parent 63c0e43
commit 2cb5af8
Showing 1 changed file with 20 additions and 5 deletions.
diff --git 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<File | null>();
   const [alertName, setAlertName] = useState<boolean>(false);
   const [alertDescription, setAlertDescription] = useState<boolean>(false);
+  const [isImageDeleted, setIsImageDeleted] = useState<boolean>(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={<BiTrash />}
-              onClick={() => {
-                setThumbnail(null);
-                setThumbnailPath('');
-              }}
+              onClick={handleDeleteImage}
               size="icon_md"
               variant="orange_light"
             />