Merge pull request #188 from part3-4team-Taskify/minji

[Refactor, Style] Zustand 전역 상태 관리에 유저 정보 추가 / mypage: 프로필 변경 즉시 반영

Author: ozen0718

src/api/users.ts

@@ -20,7 +20,7 @@ export const signUp = async ({ payload }: { payload: SignUpRequest }) => {
 };
 
 // 내 정보 조회 (GET)
-export const getUserInfo = async () => {
+export const getUserInfo = async (): Promise<UserType> => {
   const response = await axiosInstance.get<UserType>(apiRoutes.usersMe());
   return response.data;
 };

src/components/card/ChangePassword.tsx

@@ -42,9 +42,6 @@ export default function ChangePassword() {
     setNewPassword("");
     setCheckNewPassword("");
     setIsSubmitting(false);
-    setTimeout(() => {
-      router.reload();
-    }, 1500);
   };
 
   return (

src/components/card/Profile.tsx

@@ -1,14 +1,14 @@
 import { useState, useEffect } from "react";
-import { useRouter } from "next/router";
+import useUserStore from "@/store/useUserStore";
 import Image from "next/image";
 import { getUserInfo, updateProfile, uploadProfileImage } from "@/api/users";
 import Input from "@/components/input/Input";
 import { toast } from "react-toastify";
 
-export default function ProfileCard() {
-  const router = useRouter();
-  const [image, setImage] = useState<string | null>(null);
-  const [nickname, setNickname] = useState("");
+export const ProfileCard = () => {
+  const { user, updateNickname, updateProfileImage } = useUserStore();
+  const [image, setImage] = useState(user?.profileImageUrl);
+  const [nickname, setNickname] = useState(user?.nickname);
   const [email, setEmail] = useState("");
   const [preview, setPreview] = useState<string | null>(null);
 
@@ -46,28 +46,22 @@ export default function ProfileCard() {
         setImage(response.profileImageUrl); // 서버에서 받은 URL 저장
       } catch (error) {
         console.error("이미지 업로드 실패:", error);
-        toast.error("이미지 업로드에 실패하였습니다.");
+        toast.error("이미지 업로드에 실패했습니다.");
       }
     }
   };
 
   const handleSave = async () => {
     if (!nickname || !image) return;
 
-    const userProfile = {
-      nickname,
-      profileImageUrl: image,
-    };
-
     try {
-      await updateProfile(userProfile);
+      await updateProfile({ nickname, profileImageUrl: image });
+      updateNickname(nickname);
+      updateProfileImage(image);
       toast.success("프로필 변경이 완료되었습니다.");
-      setTimeout(() => {
-        router.reload();
-      }, 1500);
     } catch (error) {
       console.error("프로필 변경 실패:", error);
-      toast.error("프로필 변경에 실패하였습니다.");
+      toast.error("프로필 변경에 실패했습니다.");
     }
   };
 
@@ -138,4 +132,4 @@ export default function ProfileCard() {
       </div>
     </div>
   );
-}
+};

src/components/gnb/HeaderDashboard.tsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from "react";
 import { useRouter } from "next/router";
+import useUserStore from "@/store/useUserStore";
 import clsx from "clsx";
 import Image from "next/image";
 import SkeletonUser from "@/shared/skeletonUser";
-import { MemberType, UserType } from "@/types/users";
+import { MemberType } from "@/types/users";
 import { getMembers } from "@/api/members";
-import { getUserInfo } from "@/api/users";
 import { getDashboardById } from "@/api/dashboards";
 import { UserProfileIcon } from "@/components/gnb/ProfileIcon";
 import MembersProfileIconList from "@/components/gnb/MembersProfileIconList";
@@ -28,8 +28,10 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
   onToggleEditMode,
 }) => {
   const router = useRouter();
+  const user = useUserStore((state) => state.user);
+  const isUserLoading = !user;
+  const nickname = useUserStore((state) => state.user?.nickname);
   const [isLoading, setIsLoading] = useState(true);
-  const [user, setUser] = useState<UserType | null>(null);
   const [members, setMembers] = useState<MemberType[]>([]);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isListOpen, setIsListOpen] = useState(false);
@@ -63,32 +65,12 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
         setIsLoading(false);
       }
     };
-    if (
-      (variant === "dashboard" || variant === "mypage" || variant === "edit") &&
-      dashboardId
-    ) {
+    if (variant === "mypage" || variant === "mydashboard") {
+      setIsLoading(false);
+    } else if ((variant === "dashboard" || variant === "edit") && dashboardId) {
       fetchMembers();
     }
-  }, [dashboardId, variant]);
-
-  /*유저 정보 api 호출*/
-  useEffect(() => {
-    const fetchUser = async () => {
-      try {
-        const user = await getUserInfo();
-        setUser(user);
-      } catch (error) {
-        console.error("유저 정보 불러오기 실패", error);
-        setErrorMessage("유저 정보를 불러오지 못했습니다.");
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    const token = localStorage.getItem("accessToken");
-    if (token) {
-      fetchUser();
-    }
-  }, []);
+  }, [variant, dashboardId]);
 
   /*대시보드 api 호출*/
   useEffect(() => {
@@ -273,14 +255,14 @@ const HeaderDashboard: React.FC<HeaderDashboardProps> = ({
                 setIsMenuOpen={setIsMenuOpen}
               />
               {/*유저 프로필*/}
-              {isLoading ? (
+              {isUserLoading ? (
                 <SkeletonUser />
               ) : (
                 user && (
                   <>
                     <UserProfileIcon user={user} />
                     <span className="hidden md:block text-black3 md:text-base md:font-medium max-w-[90px] truncate whitespace-nowrap">
-                      {user.nickname}
+                      {nickname}
                     </span>
                   </>
                 )

src/components/table/invited/InvitedDashBoard.tsx

@@ -104,14 +104,15 @@ function InvitedList({
       )}
 
       {/* 리스트 */}
-      <div className="scroll-area h-[150vw] max-h-[570px] sm:max-h-[320px] lg:max-h-[280px] overflow-y-auto overflow-x-hidden">
+      <div className="scroll-area h-[150vw] max-h-[380px] sm:max-h-[240px] lg:max-h-[280px] overflow-y-auto overflow-x-hidden">
         {filteredData.length > 0 ? (
           filteredData.map((invite, index) => (
             <div
               key={index}
               className="pb-5 mb-[20px] w-full max-w-[260px] sm:max-w-[504px] lg:max-w-[966px]
                  h-auto sm:h-[50px] border-b border-[var(--color-gray4)]
                  sm:grid sm:grid-cols-[3fr_2fr_3fr] sm:items-center
+                 text-black3 text-[14px] sm:text-[16px] font-normal
                  flex flex-col gap-10"
             >
               {/* 모바일 레이아웃 */}
@@ -274,7 +275,7 @@ export default function InvitedDashBoard() {
       {invitationArray.length === 0 ? (
         <EmptyInvitations />
       ) : (
-        <div className="relative bg-white rounded-lg shadow-md w-[260px] sm:w-[504px] lg:w-[1022px] h-[770px] sm:h-[592px] lg:h-[500px] max-w-none">
+        <div className="relative bg-white rounded-lg shadow-md w-[260px] sm:w-[504px] lg:w-[1022px] h-[550px] sm:h-[450px] lg:h-[500px] max-w-none">
           <div className="flex flex-col p-6 w-full h-[104px]">
             <div className="flex flex-col w-full sm:w-[448px] lg:w-[966px] gap-[24px]">
               <p className="text-black3 text-[16px] sm:text-[20px] font-bold">

src/pages/dashboard/[dashboardId]/edit.tsx

@@ -64,13 +64,14 @@ export default function EditDashboard() {
         <HeaderDashboardEdit variant="edit" dashboardId={dashboardId} />
 
         <div
-          className="overflow-auto flex-1 px-6 pt-6 pb-10"
+          className="overflow-auto flex-1 pt-6 pb-10"
           style={{ backgroundColor: "#F5F2FC" }}
         >
-          <BackButton />
-
+          <div className="sm:px-8 lg:px-6 px-2.5">
+            <BackButton />
+          </div>
           {/* 백버튼 아래 전체 아이템 컨테이너 */}
-          <div className="flex flex-col items-center lg:items-start mt-6 gap-6">
+          <div className="flex flex-col items-center lg:items-start px-6 mt-6 gap-6">
             <ChangeBebridge />
             {/* MemberList는 아래쪽에 배치 */}
             <MemberList dashboardId={dashboardId} />

src/pages/mypage.tsx

@@ -1,32 +1,48 @@
 import React, { useState, useEffect } from "react";
-import { useRouter } from "next/router";
 import { useAuthGuard } from "@/hooks/useAuthGuard";
+import useUserStore from "@/store/useUserStore";
 import HeaderMyPage from "@/components/gnb/HeaderDashboard";
 import SideMenu from "@/components/sideMenu/SideMenu";
-import ProfileCard from "@/components/card/Profile";
+import { ProfileCard } from "@/components/card/Profile";
 import ChangePassword from "@/components/card/ChangePassword";
 import BackButton from "@/components/button/BackButton";
 import { Dashboard, getDashboards } from "@/api/dashboards";
+import { getUserInfo } from "@/api/users";
 import { TEAM_ID } from "@/constants/team";
 import LoadingSpinner from "@/components/common/LoadingSpinner";
+import { toast } from "react-toastify";
 
 export default function MyPage() {
   const { user, isInitialized } = useAuthGuard();
-  const router = useRouter();
+  const { setUser } = useUserStore();
   const [dashboards, setDashboards] = useState<Dashboard[]>([]);
 
+  // 사이드메뉴 대시보드 목록 api 호출
   const fetchDashboards = async () => {
     try {
       const res = await getDashboards({});
-      setDashboards(res.dashboards); // 👉 정상 저장
+      setDashboards(res.dashboards);
     } catch (error) {
       console.error("대시보드 불러오기 실패:", error);
+      toast.error("대시보드를 불러오는 데 실패했습니다");
+    }
+  };
+
+  // 프로필 변경 섹션 유저 정보 api 호출
+  const fetchUserData = async () => {
+    try {
+      const res = await getUserInfo();
+      setUser(res);
+    } catch (error) {
+      console.error("유저 정보 불러오기 실패:", error);
+      toast.error("유저 정보를 불러오는 데 실패했습니다.");
     }
   };
 
   useEffect(() => {
     if (isInitialized && user) {
       fetchDashboards();
+      fetchUserData();
     }
   }, [isInitialized, user]);
 
@@ -43,10 +59,13 @@ export default function MyPage() {
       />
       <div className="flex flex-col flex-1 overflow-hidden bg-[#F5F2FC]">
         <HeaderMyPage variant="mypage" />
-        <div className="flex flex-col justify-start overflow-auto w-full px-6 mt-6 pb-10">
-          <BackButton />
+        <div className="flex flex-col justify-start overflow-auto w-full mt-6 pb-10">
+          {/* 백버튼 여백 */}
+          <div className="sm:px-8 lg:px-6 px-2.5">
+            <BackButton />
+          </div>
           {/* 백버튼 아래 전체 아이템 컨테이너 */}
-          <div className="flex flex-col items-center lg:items-start mt-6 gap-6">
+          <div className="flex flex-col items-center lg:items-start px-6 mt-6 gap-6">
             <ProfileCard />
             <ChangePassword />
           </div>

src/store/useUserStore.ts

@@ -1,24 +1,26 @@
 import { create } from "zustand";
-
-interface UserInfo {
-  id: number;
-  email: string;
-  nickname: string;
-  profileImageUrl: string;
-}
+import { UserType } from "@/types/users";
 
 interface UserState {
-  user: UserInfo | null;
+  user: UserType | null;
   isInitialized: boolean;
-  setUser: (user: UserInfo) => void;
+  setUser: (user: UserType) => void;
   clearUser: () => void;
+  updateNickname: (nickname: string) => void;
+  updateProfileImage: (url: string) => void;
 }
 
 const useUserStore = create<UserState>((set) => ({
   user: null,
   isInitialized: false,
   setUser: (user) => set({ user, isInitialized: true }),
   clearUser: () => set({ user: null, isInitialized: true }),
+  updateNickname: (nickname: string) =>
+    set((state) => ({ user: state.user ? { ...state.user, nickname } : null })),
+  updateProfileImage: (url: string) =>
+    set((state) => ({
+      user: state.user ? { ...state.user, profileImageUrl: url } : null,
+    })),
 }));
 
 export default useUserStore;