feat: implement session management with Zustand and enhance login flow in Login component

src/app/api/auth/route.ts

@@ -14,7 +14,7 @@ export async function POST(request: Request) {
     loginId,
     pwd,
   })
-  console.log('🚀 ~ result ~ result:', result)
+  // console.log('🚀 ~ result ~ result:', result)
 
   if (result.data.result.code === 200) {
     const cookieStore = await cookies()
@@ -54,5 +54,5 @@ export async function POST(request: Request) {
     await session.save()
   }
 
-  return NextResponse.json({ code: 200, message: 'Login is Succecss!!' })
+  return NextResponse.json({ code: 200, message: 'Login is Succecss!!', result: result.data.data })
 }

src/components/Login.tsx

@@ -1,9 +1,11 @@
 'use client'
 
-import { useReducer, useState } from 'react'
+import type { SessionData } from '@/types/Auth'
+import { useEffect, useReducer, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { useQuery } from '@tanstack/react-query'
 import { axiosInstance } from '@/libs/axios'
+import { useSessionStore } from '@/store/session'
 
 interface AccountState {
   loginId: string
@@ -21,6 +23,8 @@ export default function Login() {
   //로그인 상태
   const [isLogin, setIsLogin] = useState(false)
 
+  const { session, setSession } = useSessionStore()
+
   const reducer = (state: AccountState, newState: Partial<AccountState>) => ({ ...state, ...newState })
   const [account, setAccount] = useReducer(reducer, {
     loginId: '',
@@ -30,6 +34,7 @@ export default function Login() {
   interface LoginData {
     code: number
     message: string | null
+    result: SessionData
   }
 
   const {
@@ -43,7 +48,7 @@ export default function Login() {
         loginId: account.loginId,
         pwd: account.pwd,
       })
-      router.push('/')
+      // router.push('/')
 
       return data
     },
@@ -52,6 +57,17 @@ export default function Login() {
     retry: false,
   })
 
+  useEffect(() => {
+    setIsLogin(false)
+    if (loginData?.code === 200) {
+      setSession({
+        ...session,
+        ...loginData?.result,
+      })
+      router.push('/')
+    }
+  }, [loginData])
+
   return (
     <>
       <div className="login-form-wrap">

src/components/ui/common/Header.tsx

@@ -12,6 +12,8 @@ import type { HeaderProps } from '@/types/Header'
 
 import 'swiper/css'
 import { axiosInstance } from '@/libs/axios'
+import { useSessionStore } from '@/store/session'
+import { useQueryClient } from '@tanstack/react-query'
 
 // type HeaderProps = {
 //   name: string //header 이름
@@ -24,13 +26,18 @@ export default function Header({ name }: HeaderProps) {
   const { sideNavIsOpen, setSideNavIsOpen } = useSideNavState()
   const { backBtn } = useHeaderStore()
 
+  const { session, reset } = useSessionStore()
+  const queryClient = useQueryClient()
+
   if (pathname === '/login') {
     return null
   }
 
   const handleLogout = async () => {
+    reset()
     const { data } = await axiosInstance(null).get('/api/auth/logout')
     if (data.code === 200) {
+      queryClient.clear()
       router.push('/login')
     }
   }
@@ -60,8 +67,8 @@ export default function Header({ name }: HeaderProps) {
                     <img src="/assets/images/layout/side_nav_profile.svg" alt="profile" />
                   </div>
                   <div className="profile-group">
-                    <div className="profile-name">HONG GILDONG</div>
-                    <div className="profile-company">Interplug corp.</div>
+                    <div className="profile-name">{session.userNm}</div>
+                    <div className="profile-company">{session.category}</div>
                   </div>
                 </div>
                 <div className="side-close-wrap">

src/store/session.ts

@@ -0,0 +1,51 @@
+import type { SessionData } from '@/types/Auth'
+import { create } from 'zustand'
+
+type SessionState = {
+  session: SessionData
+  setSession: (session: SessionData) => void
+  reset: () => void
+}
+
+type InitialState = {
+  session: SessionData
+}
+
+const initialState: InitialState = {
+  session: {
+    langCd: null,
+    currPage: 0,
+    rowCount: 0,
+    startRow: null,
+    endRow: null,
+    compCd: null,
+    agencyStoreId: null,
+    storeId: null,
+    userId: null,
+    category: null,
+    userNm: null,
+    userNmKana: null,
+    telNo: null,
+    fax: null,
+    email: null,
+    lastEditUser: null,
+    storeGubun: null,
+    pwCurr: null,
+    pwdInitYn: null,
+    apprStatCd: null,
+    loginFailCnt: 0,
+    loginFailMinYn: null,
+    priceViewStatCd: null,
+    groupId: null,
+    storeLvl: null,
+    custCd: null,
+    builderNo: null,
+    isLoggedIn: false,
+  },
+}
+
+export const useSessionStore = create<SessionState>((set) => ({
+  ...initialState,
+  setSession: (value: SessionData) => set((state) => ({ ...state, session: { ...state.session, ...value } })),
+  reset: () => set(initialState),
+}))