332 lines
11 KiB
TypeScript
332 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import Link from "next/link";
|
|
import MainLogo from "@/app/svgs/mainlogosvg"
|
|
import LoginCheckboxActiveSvg from "@/app/svgs/logincheckboxactivesvg";
|
|
import LoginCheckboxInactiveSvg from "@/app/svgs/logincheckboxinactivesvg";
|
|
import LoginInputSvg from "@/app/svgs/inputformx";
|
|
import LoginErrorModal from "./LoginErrorModal";
|
|
import LoginOption from "@/app/login/loginoption";
|
|
import apiService from "@/app/lib/apiService";
|
|
|
|
export default function LoginPage() {
|
|
const router = useRouter();
|
|
const [userId, setUserId] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [rememberId, setRememberId] = useState(false);
|
|
const [autoLogin, setAutoLogin] = useState(false);
|
|
const [isUserIdFocused, setIsUserIdFocused] = useState(false);
|
|
const [isPasswordFocused, setIsPasswordFocused] = useState(false);
|
|
const [isLoginErrorOpen, setIsLoginErrorOpen] = useState(false);
|
|
const [loginErrorMessage, setLoginErrorMessage] = useState("");
|
|
const [idError, setIdError] = useState("");
|
|
const [passwordError, setPasswordError] = useState("");
|
|
|
|
// 컴포넌트 마운트 시 저장된 아이디 불러오기 및 자동 로그인 확인
|
|
useEffect(() => {
|
|
const savedId = localStorage.getItem('savedUserId');
|
|
if (savedId) {
|
|
setUserId(savedId);
|
|
setRememberId(true);
|
|
}
|
|
|
|
// 자동 로그인 확인: localStorage에 토큰이 있고 쿠키에도 토큰이 있으면 자동 로그인
|
|
const savedToken = localStorage.getItem('token');
|
|
const cookieToken = document.cookie
|
|
.split('; ')
|
|
.find(row => row.startsWith('token='))
|
|
?.split('=')[1];
|
|
|
|
if (savedToken && cookieToken && savedToken === cookieToken) {
|
|
// 토큰이 유효한지 확인
|
|
apiService.getCurrentUser()
|
|
.then(response => {
|
|
const userData = response.data;
|
|
// 계정 상태 확인
|
|
const userStatus = userData.status || userData.userStatus;
|
|
if (userStatus === 'INACTIVE' || userStatus === 'inactive') {
|
|
// 비활성화된 계정인 경우 로그아웃 처리
|
|
localStorage.removeItem('token');
|
|
document.cookie = 'token=; path=/; max-age=0';
|
|
return;
|
|
}
|
|
|
|
// 사용자 권한 확인
|
|
const userRole = userData.role || userData.userRole;
|
|
if (userRole === 'ADMIN' || userRole === 'admin') {
|
|
// admin 권한이면 /admin/id로 리다이렉트
|
|
router.push('/admin/id');
|
|
} else {
|
|
// 그 외의 경우 기존 로직대로 리다이렉트
|
|
const searchParams = new URLSearchParams(window.location.search);
|
|
const redirectPath = searchParams.get('redirect') || '/';
|
|
router.push(redirectPath);
|
|
}
|
|
})
|
|
.catch(() => {
|
|
// 에러 발생 시 토큰 삭제
|
|
localStorage.removeItem('token');
|
|
document.cookie = 'token=; path=/; max-age=0';
|
|
});
|
|
}
|
|
}, [router]);
|
|
|
|
// 아이디 기억하기 상태나 아이디가 변경될 때마다 저장 처리
|
|
useEffect(() => {
|
|
if (rememberId && userId.trim()) {
|
|
localStorage.setItem('savedUserId', userId);
|
|
} else if (!rememberId) {
|
|
localStorage.removeItem('savedUserId');
|
|
}
|
|
}, [rememberId, userId]);
|
|
|
|
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
|
e.preventDefault();
|
|
|
|
// 에러 초기화
|
|
setIdError("");
|
|
setPasswordError("");
|
|
|
|
// 입력 검증
|
|
let hasError = false;
|
|
if (userId.trim().length === 0) {
|
|
setIdError("아이디를 입력해 주세요.");
|
|
hasError = true;
|
|
}
|
|
if (password.trim().length === 0) {
|
|
setPasswordError("비밀번호를 입력해 주세요.");
|
|
hasError = true;
|
|
}
|
|
|
|
if (hasError) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await apiService.login(userId, password);
|
|
const data = response.data;
|
|
console.log("로그인 성공:", data);
|
|
|
|
// 로그인 성공 시 토큰 저장 (다양한 필드명 지원)
|
|
const token = data.token || data.accessToken || data.access_token;
|
|
if (token) {
|
|
if (autoLogin) {
|
|
// 자동 로그인이 체크되어 있으면 localStorage와 쿠키에 장기 저장 (30일)
|
|
localStorage.setItem('token', token);
|
|
document.cookie = `token=${token}; path=/; max-age=${30 * 24 * 60 * 60}; SameSite=Lax`;
|
|
console.log("자동 로그인 토큰 저장 완료 (30일 유지)");
|
|
} else {
|
|
// 자동 로그인이 체크되어 있지 않으면 쿠키에만 세션 쿠키로 저장 (브라우저 종료 시 삭제)
|
|
// localStorage에는 저장하지 않음
|
|
document.cookie = `token=${token}; path=/; SameSite=Lax`;
|
|
console.log("세션 토큰 저장 완료 (브라우저 종료 시 삭제)");
|
|
}
|
|
} else {
|
|
console.warn("토큰이 응답에 없습니다. 응답 데이터:", data);
|
|
// 토큰이 없어도 로그인은 성공했으므로 진행
|
|
}
|
|
|
|
// 사용자 정보 가져오기 (권한 확인을 위해)
|
|
try {
|
|
const userResponse = await apiService.getCurrentUser();
|
|
const userData = userResponse.data;
|
|
const userRole = userData.role || userData.userRole;
|
|
|
|
// admin 권한이면 /admin/id로 리다이렉트
|
|
if (userRole === 'ADMIN' || userRole === 'admin') {
|
|
router.push('/admin/id');
|
|
return;
|
|
}
|
|
} catch (error) {
|
|
console.error("사용자 정보 조회 오류:", error);
|
|
// 사용자 정보 조회 실패 시에도 기존 로직대로 진행
|
|
}
|
|
|
|
// 리다이렉트 경로 확인
|
|
const searchParams = new URLSearchParams(window.location.search);
|
|
const redirectPath = searchParams.get('redirect') || '/';
|
|
|
|
// 메인 페이지로 이동
|
|
router.push(redirectPath);
|
|
} catch (error) {
|
|
const errorMessage = error instanceof Error ? error.message : "네트워크 오류가 발생했습니다.";
|
|
console.error("로그인 오류:", errorMessage);
|
|
setLoginErrorMessage(errorMessage);
|
|
setIsLoginErrorOpen(true);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="min-h-screen w-full flex flex-col items-center pt-[180px]">
|
|
|
|
<LoginErrorModal
|
|
open={isLoginErrorOpen}
|
|
onClose={() => {
|
|
setIsLoginErrorOpen(false);
|
|
setLoginErrorMessage("");
|
|
}}
|
|
errorMessage={loginErrorMessage}
|
|
/>
|
|
<LoginOption
|
|
onClick={() => setIsLoginErrorOpen(true)}
|
|
loginErrorModalEnabled={isLoginErrorOpen}
|
|
setLoginErrorModalEnabled={setIsLoginErrorOpen}
|
|
/>
|
|
|
|
<div className="rounded-xl bg-white max-w-[560px] px-[40px] w-full">
|
|
{/* 로고 영역 */}
|
|
<div className="my-15 flex flex-col items-center">
|
|
<div className="mb-[7px]">
|
|
<MainLogo />
|
|
</div>
|
|
<div className="text-[28.8px] font-extrabold leading-[145%] text-neutral-700" >
|
|
XR LMS
|
|
</div>
|
|
</div>
|
|
|
|
{/* 폼 */}
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="space-y-4">
|
|
{/* 아이디 */}
|
|
<div className="relative">
|
|
<label htmlFor="userId" className="sr-only">
|
|
아이디
|
|
</label>
|
|
<input
|
|
id="userId"
|
|
name="userId"
|
|
value={userId}
|
|
onChange={(e) => {
|
|
setUserId(e.target.value);
|
|
if (idError) setIdError("");
|
|
}}
|
|
onFocus={() => setIsUserIdFocused(true)}
|
|
onBlur={() => setIsUserIdFocused(false)}
|
|
placeholder="아이디(이메일)"
|
|
className={`h-[56px] px-[12px] py-[7px] w-full rounded-[8px] border focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none focus:appearance-none text-[18px] text-neutral-700 font-normal leading-[150%] placeholder:text-input-placeholder-text pr-[40px] ${idError ? 'border-error' : 'border-neutral-40 focus:border-neutral-700'}`}
|
|
/>
|
|
{userId.trim().length > 0 && isUserIdFocused && (
|
|
<button
|
|
type="button"
|
|
onMouseDown={(e) => {
|
|
e.preventDefault();
|
|
setUserId("");
|
|
}}
|
|
aria-label="입력 지우기"
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer"
|
|
>
|
|
<LoginInputSvg />
|
|
</button>
|
|
)}
|
|
</div>
|
|
{idError && <p className="text-error text-[13px] leading-tight mt-[10px]">{idError}</p>}
|
|
{/* 비밀번호 */}
|
|
<div className="relative">
|
|
<label htmlFor="password" className="sr-only">
|
|
비밀번호
|
|
</label>
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => {
|
|
setPassword(e.target.value);
|
|
if (passwordError) setPasswordError("");
|
|
}}
|
|
onFocus={() => setIsPasswordFocused(true)}
|
|
onBlur={() => setIsPasswordFocused(false)}
|
|
placeholder="비밀번호 입력"
|
|
className={`h-[56px] px-[12px] py-[7px] rounded-[8px] w-full border focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none focus:appearance-none text-[18px] text-neutral-700 font-normal leading-[150%] placeholder:text-input-placeholder-text pr-[40px] ${passwordError ? 'border-error' : 'border-neutral-40 focus:border-neutral-700'}`}
|
|
/>
|
|
{password.trim().length > 0 && isPasswordFocused && (
|
|
<button
|
|
type="button"
|
|
onMouseDown={(e) => {
|
|
e.preventDefault();
|
|
setPassword("");
|
|
}}
|
|
aria-label="입력 지우기"
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer"
|
|
>
|
|
<LoginInputSvg />
|
|
</button>
|
|
)}
|
|
</div>
|
|
{passwordError && <p className="text-error text-[13px] leading-tight mt-[4px]">{passwordError}</p>}
|
|
</div>
|
|
|
|
{/* 체크박스들 */}
|
|
<div className="flex items-center justify-start gap-6 mb-15">
|
|
<label className="flex cursor-pointer select-none items-center gap-2 text-[15px] font-normal text-basic-text">
|
|
<input
|
|
type="checkbox"
|
|
checked={rememberId}
|
|
onChange={(e) => setRememberId(e.target.checked)}
|
|
className="sr-only"
|
|
/>
|
|
{rememberId ? (
|
|
<LoginCheckboxActiveSvg />
|
|
) : (
|
|
<LoginCheckboxInactiveSvg />
|
|
)}
|
|
아이디 기억하기
|
|
</label>
|
|
<label className="flex cursor-pointer select-none items-center gap-2 text-[15px] font-normal text-basic-text">
|
|
<input
|
|
type="checkbox"
|
|
checked={autoLogin}
|
|
onChange={(e) => setAutoLogin(e.target.checked)}
|
|
className="sr-only"
|
|
/>
|
|
{autoLogin ? (
|
|
<LoginCheckboxActiveSvg />
|
|
) : (
|
|
<LoginCheckboxInactiveSvg />
|
|
)}
|
|
자동 로그인
|
|
</label>
|
|
</div>
|
|
|
|
{/* 로그인 버튼 */}
|
|
<button
|
|
type="submit"
|
|
className={`h-[56px] w-full rounded-lg text-[16px] font-semibold text-white transition-opacity cursor-pointer mb-3 ${userId.trim().length > 0 && password.trim().length > 0 ? "bg-active-button hover:bg-[#1F2B91]" : "bg-inactive-button"}`}
|
|
>
|
|
로그인
|
|
</button>
|
|
|
|
{/* 하단 링크들 */}
|
|
<div className="flex items-center justify-between text-[15px] leading-[150%] h-[36px]">
|
|
<Link
|
|
href="/register"
|
|
className="underline-offset-2 text-basic-text font-bold"
|
|
>
|
|
회원가입
|
|
</Link>
|
|
<div
|
|
className="flex items-center gap-3 text-basic-text"
|
|
>
|
|
<Link href="/find-id" className="underline-offset-2">
|
|
아이디 찾기
|
|
</Link>
|
|
<span className="h-3 w-px bg-input-border" />
|
|
<Link href="/reset-password" className="underline-offset-2">
|
|
비밀번호 재설정
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div></div>
|
|
</div>
|
|
<p className="text-center py-[40px] text-[15px] text-basic-text">
|
|
Copyright ⓒ 2025 XL LMS. All rights reserved
|
|
</p>
|
|
</>
|
|
);
|
|
}
|