From 610aa3881ed280d934190fdd647034788d9b8a68 Mon Sep 17 00:00:00 2001
From: Stilllee <orodae@gmail.com>
Date: Wed, 12 Feb 2025 10:17:45 +0900
Subject: [PATCH] =?UTF-8?q?Feat(#132):=20=ED=94=84=EB=A1=9C=ED=95=84=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=B3=80=EA=B2=BD=20=ED=9B=84=20?=
 =?UTF-8?q?=EC=8A=A4=ED=86=A0=EC=96=B4=EC=97=90=20=EC=97=85=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/user/UserHeader.tsx | 25 ++++++++++++++++++++++++-
 src/hooks/user/useEditProfile.ts   | 13 ++++++++++---
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/components/user/UserHeader.tsx b/src/components/user/UserHeader.tsx
index ceda1d49..6f29bdfa 100644
--- 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
index 4819cd81..b82d3a8e 100644
--- 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, {