[FE] FEAT: 이미지 초기화 버튼 추가 #229

Author: 42inshin

src/frontend/src/api/endpoints/user/user.api.ts

@@ -15,7 +15,7 @@ export const userApi = {
   },
 
   // 프로필 이미지 업데이트
-  updateProfileImage: async (profileImageUrl: string) => {
+  updateProfileImage: async (profileImageUrl: string | null) => {
     const { data } = await instance.patch(`users/me/profile-image`, {
       profileImageUrl,
     });

src/frontend/src/components/Profile/MyProfile/index.css.ts

@@ -20,6 +20,10 @@ export const Header = styled.div`
   justify-content: space-between;
 `;
 
+export const ProfileImageContainer = styled.div`
+  position: relative;
+`;
+
 export const ProfileImage = styled.img<{ $onClick: boolean }>`
   width: 64px;
   height: 64px;
@@ -32,6 +36,25 @@ export const ProfileImage = styled.img<{ $onClick: boolean }>`
   }
 `;
 
+export const ProfileImageResetButton = styled.button`
+  position: absolute;
+  top: -6px;
+  left: -6px;
+  background-color: var(--palette-background-normal-alternative);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--palette-line-normal-neutral);
+  cursor: pointer;
+  border-radius: 50%;
+  padding: 8px;
+
+  & > img {
+    width: 8px;
+    height: 8px;
+  }
+`;
+
 export const HeaderButtonContainer = styled.div`
   display: flex;
   gap: 8px;

src/frontend/src/components/Profile/MyProfile/index.tsx

@@ -13,6 +13,8 @@ import {
   StateMessageInput,
   StateMessagePlus,
   ErrorMessage,
+  ProfileImageResetButton,
+  ProfileImageContainer,
 } from './index.css';
 
 import Edit from '@/assets/img/Edit.svg';
@@ -99,25 +101,37 @@ export const MyProfile = () => {
     }
   };
 
+  const handleImageReset = async () => {
+    const updateUser = await updateProfileImage(null);
+    console.log('image reset', updateUser);
+  };
+
   return (
     <Container>
       <Profile>
         <Header>
-          <ProfileImage
-            src={user.profileImageUrl ?? DefaultProfile}
-            onClick={handleImageClick}
-            $onClick={isEditMode}
-            onError={e => {
-              e.currentTarget.src = DefaultProfile;
-            }}
-          />
-          <input
-            type="file"
-            ref={fileInputRef}
-            onChange={handleImageChange}
-            style={{ display: 'none' }}
-            accept="image/*"
-          />
+          <ProfileImageContainer>
+            <ProfileImage
+              src={user.profileImageUrl ?? DefaultProfile}
+              onClick={handleImageClick}
+              $onClick={isEditMode}
+              onError={e => {
+                e.currentTarget.src = DefaultProfile;
+              }}
+            />
+            <input
+              type="file"
+              ref={fileInputRef}
+              onChange={handleImageChange}
+              style={{ display: 'none' }}
+              accept="image/*"
+            />
+            {isEditMode && (
+              <ProfileImageResetButton onClick={handleImageReset}>
+                <img src={Cancel} alt="cancel" />
+              </ProfileImageResetButton>
+            )}
+          </ProfileImageContainer>
           <HeaderButtonContainer>
             <IconButton
               beforeImgUrl={isEditMode ? Check : Edit}

src/frontend/src/stores/useUserStore.ts

@@ -10,7 +10,7 @@ interface UserStore {
   updateMyProfile: (
     updateUserRequestDto: UpdateUserRequestDto,
   ) => Promise<UserResponseDto | undefined>;
-  updateProfileImage: (profileImageUrl: string) => Promise<UserResponseDto | undefined>;
+  updateProfileImage: (profileImageUrl: string | null) => Promise<UserResponseDto | undefined>;
   clearProfile: () => void;
 }
 
@@ -34,7 +34,7 @@ export const useUserStore = create(
         set({ user: data });
         return data;
       },
-      updateProfileImage: async (profileImageUrl: string) => {
+      updateProfileImage: async (profileImageUrl: string | null) => {
         try {
           const data = await userApi.updateProfileImage(profileImageUrl);
           set({ user: data });