132 lines
3.8 KiB
TypeScript
132 lines
3.8 KiB
TypeScript
'use client'
|
|
|
|
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'
|
|
|
|
interface AccountState {
|
|
loginId: string
|
|
pwd: string
|
|
}
|
|
|
|
export default function Login() {
|
|
const router = useRouter()
|
|
//비밀번호 보이기 숨기기
|
|
const [pwShow, setPwShow] = useState(false)
|
|
//ID 저장 체크박스
|
|
const [idSave, setIdSave] = useState(false)
|
|
//Q.PARTNERS 체크박스
|
|
const [isPartners, setIsPartners] = useState(false)
|
|
//로그인 상태
|
|
const [isLogin, setIsLogin] = useState(false)
|
|
|
|
const { session, setSession } = useSessionStore()
|
|
const [value, setValue, removeValue] = useLocalStorage<{ indivisualData: string }>('hanasysIndivisualState', { indivisualData: '' })
|
|
|
|
const reducer = (state: AccountState, newState: Partial<AccountState>) => ({ ...state, ...newState })
|
|
const [account, setAccount] = useReducer(reducer, {
|
|
loginId: '',
|
|
pwd: '',
|
|
})
|
|
|
|
interface LoginData {
|
|
code: number
|
|
message: string | null
|
|
result: SessionData
|
|
}
|
|
|
|
const {
|
|
data: loginData,
|
|
isPending,
|
|
error,
|
|
} = useQuery<LoginData, Error>({
|
|
queryKey: ['login', 'account'],
|
|
queryFn: async () => {
|
|
const { data } = await axiosInstance('').post<LoginData>(`/api/auth`, {
|
|
loginId: account.loginId,
|
|
pwd: account.pwd,
|
|
})
|
|
|
|
return data
|
|
},
|
|
enabled: isLogin,
|
|
staleTime: 0,
|
|
retry: false,
|
|
})
|
|
|
|
useEffect(() => {
|
|
setIsLogin(false)
|
|
if (loginData?.code === 200) {
|
|
// 유저 정보 저장
|
|
setValue({
|
|
indivisualData: account.pwd,
|
|
})
|
|
// 세션 정보 저장
|
|
setSession({
|
|
...session,
|
|
...loginData?.result,
|
|
})
|
|
router.push('/')
|
|
}
|
|
}, [loginData])
|
|
|
|
return (
|
|
<>
|
|
<div className="login-form-wrap">
|
|
<div className="login-form mb15">
|
|
<div className="login-input id">
|
|
<input
|
|
type="text"
|
|
className="login-frame"
|
|
placeholder="Input Frame ID"
|
|
value={account.loginId}
|
|
onChange={(e) => setAccount({ loginId: e.target.value })}
|
|
/>
|
|
<button className="login-icon">
|
|
<i className="del-icon"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="login-form">
|
|
<div className="login-input pw">
|
|
<input
|
|
type={`${pwShow ? 'text' : 'password'}`}
|
|
className="login-frame"
|
|
placeholder="Input Frame PW"
|
|
value={account.pwd}
|
|
onChange={(e) => setAccount({ pwd: e.target.value })}
|
|
/>
|
|
<button className={`login-icon ${pwShow ? 'act' : ''}`} onClick={() => setPwShow(!pwShow)}>
|
|
<i className="show-icon"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="login-check-warp">
|
|
<div className="check-form-box">
|
|
<input type="checkbox" id="ch01" checked={idSave} onChange={() => setIdSave(!idSave)} />
|
|
<label htmlFor="ch01">ID Save</label>
|
|
</div>
|
|
<div className="toggle-form">
|
|
<label className="toggle-btn">
|
|
<input type="checkbox" checked={isPartners} onChange={() => setIsPartners(!isPartners)} />
|
|
<span className="slider"></span>
|
|
</label>
|
|
<div className="toggle-name">Q.PARTNERS</div>
|
|
</div>
|
|
</div>
|
|
<div className="login-btn-wrap">
|
|
<button className="btn-frame icon login" onClick={() => setIsLogin(true)}>
|
|
お問い合わせ <i className="btn-arr"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|