Merge branch 'develop' of https://github.com/BDD-CLUB/01-doo-re-front …

…into Feature/#380-팀_및_스터디_탈퇴

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',
@@ -117,6 +125,7 @@ export {
   useGetTeamInfoQuery,
   putEditTeam,
   patchEditTeamImage,
+  deleteTeamImage,
   deleteTeam,
   postInviteTeam,
   postJoinTeam,

src/app/page.tsx

@@ -40,8 +40,8 @@ const Page = () => {
                     community for developer
                   </Text>
                   <Text textStyle="title_sm" mb="4">
-                    Investigators have raided the home of the teenage suspect behind the physical attack on ruling party
-                    lawmaker Bae Hyun-jin as police are trying to determine the exact motive of the...
+                    Plant the seeds of knowledge, record your learning journey, and wholeheartedly support and encourage
+                    each other&apos;s efforts as we grow together to cultivate a flourishing forest of achievements.
                   </Text>
                   <GoogleLoginButton />
                 </Flex>

src/containers/team/Modal/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<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 {
@@ -189,12 +207,27 @@ const TeamModal = ({ teamInfo, isOpen, onClose }: TeamModalProps) => {
               }
             }}
           />
-          <IconBox
-            leftIcon={<BiFile />}
-            rightIcon={<BiEdit />}
-            content={thumbnail ? thumbnail.name : '파일을 추가해주세요.'}
-            handleClick={() => inputFileRef.current?.click()}
-          />
+          <Flex align="center" gap={2} w="100%">
+            <Box w="368px">
+              <IconBox
+                leftIcon={<BiFile />}
+                rightIcon={<BiEdit />}
+                content={thumbnail ? thumbnail.name : '파일을 추가해주세요.'}
+                handleClick={() => inputFileRef.current?.click()}
+              />
+            </Box>
+            <IconButton
+              flexShrink="0"
+              minW="40px"
+              h="40px"
+              borderRadius="2xl"
+              aria-label=""
+              icon={<BiTrash />}
+              onClick={handleDeleteImage}
+              size="icon_md"
+              variant="orange_light"
+            />
+          </Flex>
           {thumbnailPath ? (
             <Image w="40" alt="thumbnail" src={S3_URL(thumbnailPath)} />
           ) : (

src/containers/team/teamMember/RemoveTeamMemberModal/index.tsx

@@ -12,10 +12,9 @@ const RemoveTeamMemberModal = ({ member, isOpen, teamId, teamName, onClose }: Me
   const handleRemoveMemberClick = () => {
     deleteMember(teamId, member.id).then((res) => {
       if (!res.ok) {
-        alert('팀원을 삭제하는데 실패했습니다.');
-      } else {
-        onClose();
+        alert(res.body.message || '팀원을 삭제하는데 실패했습니다.');
       }
+      onClose();
     });
   };