Feat(mogua-station#132): 프로필 이미지 변경 후 스토어에 업데이트

Stilllee · Feb 12, 2025 · 610aa38 · 610aa38
1 parent 3983240
commit 610aa38
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/src/components/user/UserHeader.tsx b/src/components/user/UserHeader.tsx
@@ -8,6 +8,7 @@ import BackButton from "./BackButton";
 import Edit from "@/assets/images/icons/edit.svg";
 import LogoIcon from "@/assets/images/icons/mogua.svg";
 import PlusIcon from "@/assets/images/icons/plus-thin.svg";
+import { getUserProfile } from "@/lib/user/getUserProfile";
 import useUserStore, { type User } from "@/store/auth/useUserStore";
 
 const EXCLUDED_USER_PATHS = [
@@ -79,7 +80,7 @@ function NavigationLinks({ user }: { user: User | null }) {
 export default function UserHeader() {
   const pathname = usePathname();
   const router = useRouter();
-  const { user } = useUserStore();
+  const { user, setUser } = useUserStore();
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
@@ -100,6 +101,28 @@ export default function UserHeader() {
   const currentUserId = isUserPage ? Number(pathname.split("/")[2]) : null;
   const isMyPage = currentUserId === user?.userId;
 
+  // 프로필 이미지 변경 감지 및 업데이트
+  useEffect(() => {
+    const updateProfileImage = async () => {
+      const hasImageChanged = sessionStorage.getItem("profileImageChanged");
+
+      if (user && hasImageChanged) {
+        try {
+          const data = await getUserProfile(user.userId.toString());
+          setUser({
+            ...user,
+            profileImg: data.profileImg,
+          });
+          sessionStorage.removeItem("profileImageChanged");
+        } catch (error) {
+          console.error("[프로필 이미지 URL 조회 실패]:", error);
+        }
+      }
+    };
+
+    updateProfileImage();
+  }, [user, setUser]);
+
   const headerBgColor = isEditProfile
     ? "bg-gray-900 desktop:bg-gray-950"
     : "bg-[#0E0E10]";

diff --git a/src/hooks/user/useEditProfile.ts b/src/hooks/user/useEditProfile.ts
@@ -31,18 +31,25 @@ export function useEditProfile() {
     if (!(request instanceof Blob)) return;
 
     const requestData = JSON.parse(await request.text());
+    const hasImageFile = formData.get("image") instanceof File;
 
     updateProfileMutation.mutate(
       { formData },
       {
         onSuccess: () => {
-          if (requestData) {
+          // 닉네임만 스토어에 업데이트
+          if (requestData?.nickname) {
             setUser({
               ...user,
-              name: requestData.nickname || user.name,
-              profileImg: requestData.profileImg || user.profileImg,
+              name: requestData.nickname,
             });
           }
+
+          // 이미지가 변경된 경우 sessionStorage에 표시
+          if (hasImageFile) {
+            sessionStorage.setItem("profileImageChanged", "true");
+          }
+
           modal.open(
             ({ close }) =>
               createElement(EditProfileSuccessModal, {