feat: integrate user info state management in Login and PwResetForm components for enhanced user experience

src/components/Login.tsx

@@ -6,6 +6,7 @@ import { useRouter } from 'next/navigation'
 import { useQuery } from '@tanstack/react-query'
 import { axiosInstance } from '@/libs/axios'
 import { useSessionStore } from '@/store/session'
+import { useUserInfoState } from '@/store/userInfoState'
 
 interface AccountState {
   loginId: string
@@ -24,6 +25,7 @@ export default function Login() {
   const [isLogin, setIsLogin] = useState(false)
 
   const { session, setSession } = useSessionStore()
+  const { userInfo, setUserInfo } = useUserInfoState()
 
   const reducer = (state: AccountState, newState: Partial<AccountState>) => ({ ...state, ...newState })
   const [account, setAccount] = useReducer(reducer, {
@@ -60,6 +62,15 @@ export default function Login() {
   useEffect(() => {
     setIsLogin(false)
     if (loginData?.code === 200) {
+      // 유저 정보 저장
+      setUserInfo({
+        loginId: account.loginId,
+        chgType: 'C',
+        emali: loginData?.result.email || '',
+        pwd: account.pwd,
+        chgPwd: '',
+      })
+      // 세션 정보 저장
       setSession({
         ...session,
         ...loginData?.result,

src/components/pw-reset/PwResetForm.tsx

@@ -2,12 +2,19 @@
 
 import { useState } from 'react'
 import { useRouter } from 'next/navigation'
+import { useUserInfoState } from '@/store/userInfoState'
 
 export default function PwResetForm() {
   const [pwShow01, setPwShow01] = useState(false) //비밀번호 확인 보이기 숨기기
   const [pwShow02, setPwShow02] = useState(false) //비밀번호 재확인 보이기 숨기기
   const router = useRouter()
 
+  const { userInfo, setUserInfo } = useUserInfoState()
+
+  const handleReset = () => {
+    console.log('reset')
+  }
+
   return (
     <>
       <div className="border-frame">
@@ -48,7 +55,7 @@ export default function PwResetForm() {
             </button>
           </div>
           <div className="btn-bx">
-            <button className="btn-frame red icon">
+            <button className="btn-frame red icon" onClick={handleReset}>
               リセットする<i className="btn-arr"></i>
             </button>
           </div>

src/store/userInfoState.ts

@@ -0,0 +1,37 @@
+import { create } from 'zustand'
+
+type UserInfo = {
+  loginId: string
+  chgType: string
+  emali: string
+  pwd: string
+  chgPwd: string
+}
+
+type UserInfoState = {
+  userInfo: UserInfo
+  setUserInfo: (value: UserInfo) => void
+  reset: () => void
+}
+
+type InitialState = {
+  loginId: string
+  chgType: string
+  emali: string
+  pwd: string
+  chgPwd: string
+}
+
+const initialState: InitialState = {
+  loginId: '',
+  chgType: '',
+  emali: '',
+  pwd: '',
+  chgPwd: '',
+}
+
+export const useUserInfoState = create<UserInfoState>((set) => ({
+  userInfo: initialState,
+  setUserInfo: (value: UserInfo) => set((state) => ({ ...state, userInfo: { ...state.userInfo, ...value } })),
+  reset: () => set({ userInfo: initialState }),
+}))