feat: implement password change API and update Login and PwResetForm components to utilize local storage for password management

src/app/api/auth/chg-pwd/route.ts

@@ -0,0 +1,22 @@
+import { NextResponse } from 'next/server'
+
+import { axiosInstance } from '@/libs/axios'
+
+export async function POST(req: Request) {
+  const { loginId, email, pwd, chgPwd } = await req.json()
+  console.log('🚀 ~ POST ~ loginId:', loginId)
+  console.log('🚀 ~ POST ~ email:', email)
+  console.log('🚀 ~ POST ~ pwd:', pwd)
+  console.log('🚀 ~ POST ~ chgPwd:', chgPwd)
+
+  const result = await axiosInstance(`${process.env.NEXT_PUBLIC_QSP_API_URL}`).post(`/api/user/userPwdChg`, {
+    loginId,
+    chgType: 'C',
+    email,
+    pwd,
+    chgPwd,
+  })
+  console.log('🚀 ~ result ~ result:', result)
+
+  return NextResponse.json({ code: 200, data: result.data })
+}

src/components/Login.tsx

@@ -3,10 +3,12 @@
 import type { SessionData } from '@/types/Auth'
 import { useEffect, useReducer, useState } from 'react'
 import { useRouter } from 'next/navigation'
+
+import { useLocalStorage } from 'usehooks-ts'
 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
@@ -25,7 +27,7 @@ export default function Login() {
   const [isLogin, setIsLogin] = useState(false)
 
   const { session, setSession } = useSessionStore()
-  const { userInfo, setUserInfo } = useUserInfoState()
+  const [value, setValue, removeValue] = useLocalStorage<{ indivisualData: string }>('hanasysIndivisualState', { indivisualData: '' })
 
   const reducer = (state: AccountState, newState: Partial<AccountState>) => ({ ...state, ...newState })
   const [account, setAccount] = useReducer(reducer, {
@@ -50,7 +52,6 @@ export default function Login() {
         loginId: account.loginId,
         pwd: account.pwd,
       })
-      // router.push('/')
 
       return data
     },
@@ -63,12 +64,8 @@ export default function Login() {
     setIsLogin(false)
     if (loginData?.code === 200) {
       // 유저 정보 저장
-      setUserInfo({
+      setValue({
-        loginId: account.loginId,
+        indivisualData: account.pwd,
-        chgType: 'C',
-        emali: loginData?.result.email || '',
-        pwd: account.pwd,
-        chgPwd: '',
       })
       // 세션 정보 저장
       setSession({

src/components/pw-reset/PwResetForm.tsx

@@ -2,17 +2,49 @@
 
 import { useState } from 'react'
 import { useRouter } from 'next/navigation'
-import { useUserInfoState } from '@/store/userInfoState'
+
+import { useLocalStorage } from 'usehooks-ts'
+
+import { axiosInstance } from '@/libs/axios'
+import { useSessionStore } from '@/store/session'
 
 export default function PwResetForm() {
-  const [pwShow01, setPwShow01] = useState(false) //비밀번호 확인 보이기 숨기기
+  const [pwShow01, setPwShow01] = useState<boolean>(false) //비밀번호 확인 보이기 숨기기
-  const [pwShow02, setPwShow02] = useState(false) //비밀번호 재확인 보이기 숨기기
+  const [pwShow02, setPwShow02] = useState<boolean>(false) //비밀번호 재확인 보이기 숨기기
+
+  const [pwd01, setPwd01] = useState<string>('')
+  const [pwd02, setPwd02] = useState<string>('')
+
   const router = useRouter()
 
-  const { userInfo, setUserInfo } = useUserInfoState()
+  const { session } = useSessionStore()
+  const [value, setValue, removeValue] = useLocalStorage<{ indivisualData: string }>('hanasysIndivisualState', { indivisualData: '' })
 
-  const handleReset = () => {
+  const validatePwd = () => {
-    console.log('reset')
+    if (pwd01 !== pwd02) {
+      alert('비밀번호가 일치하지 않습니다.')
+      return false
+    }
+    return true
+  }
+
+  const handleReset = async () => {
+    if (validatePwd()) {
+      const { data } = await axiosInstance(null).post(`/api/auth/chg-pwd`, {
+        loginId: session.userId,
+        email: session.email,
+        pwd: value.indivisualData,
+        chgPwd: pwd01,
+      })
+
+      if (data.data.result.resultCode === 'S') {
+        setValue({ indivisualData: pwd01 })
+      }
+
+      window.neoAlert(data.data.result.resultMsg, () => {
+        router.back()
+      })
+    }
   }
 
   return (
@@ -25,7 +57,12 @@ export default function PwResetForm() {
             </div>
             <div className="data-input">
               <div className="login-input pw change">
-                <input type={`${pwShow01 ? 'text' : 'password'}`} className="login-frame" placeholder="●●●●" />
+                <input
+                  type={`${pwShow01 ? 'text' : 'password'}`}
+                  className="login-frame"
+                  placeholder="●●●●"
+                  onChange={(e) => setPwd01(e.target.value)}
+                />
                 <button className={`login-icon ${pwShow01 ? 'act' : ''}`} onClick={() => setPwShow01(!pwShow01)}>
                   <i className="show-icon"></i>
                 </button>
@@ -39,7 +76,12 @@ export default function PwResetForm() {
             </div>
             <div className="data-input">
               <div className="login-input pw change">
-                <input type={`${pwShow02 ? 'text' : 'password'}`} className="login-frame" placeholder="●●●●" />
+                <input
+                  type={`${pwShow02 ? 'text' : 'password'}`}
+                  className="login-frame"
+                  placeholder="●●●●"
+                  onChange={(e) => setPwd02(e.target.value)}
+                />
                 <button className={`login-icon ${pwShow02 ? 'act' : ''}`} onClick={() => setPwShow02(!pwShow02)}>
                   <i className="show-icon"></i>
                 </button>

src/components/ui/common/Header.tsx

@@ -3,24 +3,25 @@
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
 
-import { Swiper, SwiperSlide } from 'swiper/react'
+import { useLocalStorage } from 'usehooks-ts'
-import { useSessionStorage } from 'usehooks-ts'
 import { useQueryClient } from '@tanstack/react-query'
+import { Swiper, SwiperSlide } from 'swiper/react'
 
 import { useSideNavState } from '@/store/sideNavState'
 import { useHeaderStore } from '@/store/header'
 import { useSessionStore } from '@/store/session'
+import { usePopupController } from '@/store/popupController'
+
 import { useTitle } from '@/hooks/useTitle'
 
 import { axiosInstance } from '@/libs/axios'
 
 import 'swiper/css'
-import { usePopupController } from '@/store/popupController'
 
 export default function Header() {
   const router = useRouter()
   const pathname = usePathname()
-  const [value, setValue, removeValue] = useSessionStorage('userInfo', {})
+  const [value, setValue, removeValue] = useLocalStorage<{ indivisualData: string }>('hanasysIndivisualState', { indivisualData: '' })
   const { sideNavIsOpen, setSideNavIsOpen } = useSideNavState()
   const { backBtn } = useHeaderStore()
   const { getTitle } = useTitle()

src/providers/EdgeProvider.tsx

@@ -1,14 +1,16 @@
 'use client'
 
+import { useEffect } from 'react'
+import { usePathname } from 'next/navigation'
+
 import { useHeaderStore } from '@/store/header'
 import { usePopupController } from '@/store/popupController'
 import { useSideNavState } from '@/store/sideNavState'
-import { usePathname } from 'next/navigation'
-import { useEffect } from 'react'
 import { useSessionStore } from '@/store/session'
 
 declare global {
   interface Window {
+    neoAlert: (msg?: string, alertBtn?: Function) => void
     neoConfirm: (msg?: string, alertBtn2Yes?: Function, alertBtn2No?: Function) => boolean
   }
 }
@@ -55,6 +57,10 @@ export default function EdgeProvider({ children, sessionData }: EdgeProviderProp
     window.alert = function (msg, alertBtn = () => setAlert(false)) {
       alertFunc(msg, alertBtn)
     }
+    window.neoAlert = function (msg?: string, alertBtn = () => setAlert(false)) {
+      if (!msg) return
+      alertFunc(msg, alertBtn)
+    }
     // confirm 함수 변경해서 바인딩
     window.neoConfirm = function (msg: string | undefined, alertBtn2Yes?: Function, alertBtn2No?: Function) {
       if (!msg) return false

src/store/userInfoState.ts

@@ -1,37 +0,0 @@
-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 }),
-}))