xrlms/src/app/login/page.tsx

"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";

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 [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) {
			// 토큰이 유효한지 확인
			fetch('https://hrdi.coconutmeet.net/auth/me', {
				method: 'GET',
				headers: {
					'Content-Type': 'application/json',
					Authorization: `Bearer ${savedToken}`,
				},
			})
				.then(response => {
					if (response.ok) {
						// 토큰이 유효하면 메인 페이지로 리다이렉트
						const searchParams = new URLSearchParams(window.location.search);
						const redirectPath = searchParams.get('redirect') || '/';
						router.push(redirectPath);
					} else {
						// 토큰이 유효하지 않으면 삭제
						localStorage.removeItem('token');
						document.cookie = 'token=; path=/; max-age=0';
					}
				})
				.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 fetch("https://hrdi.coconutmeet.net/auth/login", {
				method: "POST",
				headers: { "Content-Type": "application/json", },
				body: JSON.stringify({
					email: userId,
					password: password
				})
			});

			if (!response.ok) {
				let errorMessage = `로그인 실패 (${response.status})`;
				try {
					const errorData = await response.json();
					if (errorData.error) {
						errorMessage = errorData.error;
					} else if (errorData.message) {
						errorMessage = errorData.message;
					} else if (response.statusText) {
						errorMessage = `${response.statusText} (${response.status})`;
					}
				} catch (parseError) {
					if (response.statusText) {
						errorMessage = `${response.statusText} (${response.status})`;
					}
				}
				console.error("로그인 실패:", errorMessage);
				setIsLoginErrorOpen(true);
				return;
			}

			const data = await response.json();
			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);
				// 토큰이 없어도 로그인은 성공했으므로 진행
			}


			// 리다이렉트 경로 확인
			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);
			setIsLoginErrorOpen(true);
		}
	}

	return (
		<div className="min-h-screen w-full flex flex-col items-center justify-between">

			<LoginErrorModal
				open={isLoginErrorOpen}
				onClose={() => setIsLoginErrorOpen(false)}
			/>
			<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 hover:bg-[#1F2B91] ${userId.trim().length > 0 && password.trim().length > 0 ? "bg-active-button" : "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>
			<p className="text-center py-[40px] text-[15px] text-basic-text">
				Copyright ⓒ 2025 XL LMS. All rights reserved
			</p>
		</div>
	);
}