feat: nickname이 store에 적절하게 업데이트 되도록 수정

DDD-Community · Nov 4, 2024 · 351e5d6 · 351e5d6
1 parent 1724ae3
commit 351e5d6
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/src/pages/MyPage.tsx b/src/pages/MyPage.tsx
@@ -4,15 +4,17 @@ import { useModals } from "@/hooks/useModals"
 import { useAuthStore } from "@/store"
 
 export default function MyPage() {
-  const userInfo = useAuthStore((state) => state.user)
+  const { user, setNickName } = useAuthStore()
 
   const { openModal } = useModals()
 
   const onClickModifyNickName = () => {
     openModal(modals.nickNameModal, {
       onSubmit: (newNickName) => {
-        if (userInfo && newNickName) {
-          modifyNickName(userInfo.uid, newNickName)
+        if (user && newNickName) {
+          modifyNickName(user.uid, newNickName).then(({ data }) => {
+            setNickName(data.nickname)
+          })
         }
       },
     })
@@ -25,7 +27,7 @@ export default function MyPage() {
         <div className="flex h-[56px] max-w-[998px] items-center justify-between rounded-xl border border-gray-200 bg-white pl-6">
           <div className="flex items-center gap-6">
             <div className="text-sm">닉네임</div>
-            <div>{userInfo?.nickname}</div>
+            <div>{user?.nickname}</div>
           </div>
           <div className="pr-[27px]">
             <button

diff --git a/src/store/AuthStore.ts b/src/store/AuthStore.ts
@@ -1,14 +1,16 @@
 import { create } from "zustand"
 import { persist } from "zustand/middleware"
 
+interface UserInfo {
+  uid: number
+  nickname: string
+}
 interface AuthState {
   isAuthenticated: boolean
-  user: {
-    uid: number
-    nickname: string
-  } | null
+  user: UserInfo | null
   accessToken: string
-  setUser: (user: any, accessToken: string) => void
+  setUser: (user: UserInfo, accessToken: string) => void
+  setNickName: (nickname: string) => void
   logout: (callback: () => void) => void
 }
 
@@ -19,12 +21,16 @@ export const useAuthStore = create(
         isAuthenticated: false,
         user: null,
         accessToken: "",
-        setUser: (user: any, accessToken: string) =>
+        setUser: (user: UserInfo, accessToken: string) =>
           set({
             user,
             isAuthenticated: true,
             accessToken,
           }),
+        setNickName: (nickname: string) =>
+          set((state) => ({
+            user: state.user ? { ...state.user, nickname } : null,
+          })),
         logout: (callback) => {
           set({
             user: null,