xrlms/src/app/login/page.tsx

"use client";

import { useState } from "react";
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 [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("");

	function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
		e.preventDefault();
		// 실제 로그인 API 연동 전까지는 실패 모달을 노출합니다.
		// API 연동 시 결과에 따라 성공/실패 분기에서 setIsLoginErrorOpen(true) 호출로 교체하세요.
		// if (userId.trim().length > 0 && password.trim().length > 0) {
		// 	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-5">
					<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)}
								onFocus={() => setIsUserIdFocused(true)}
								onBlur={() => setIsUserIdFocused(false)}
								placeholder="아이디 (이메일)"
								className="
                h-[56px] px-[12px] py-[7px] w-full rounded-[8px] border border-neutral-40
                focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none
                focus:appearance-none focus:border-neutral-700
                text-[18px] text-neutral-700 font-normal leading-[150%] placeholder:text-input-placeholder-text
                pr-[40px]
                "
							/>
							{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>
						{/* 비밀번호 */}
						<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)}
								onFocus={() => setIsPasswordFocused(true)}
								onBlur={() => setIsPasswordFocused(false)}
								placeholder="비밀번호"
								className="
                h-[56px] px-[12px] py-[7px] rounded-[8px] w-full border border-neutral-40
                focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none
                focus:appearance-none focus:border-neutral-700
                text-[18px] text-neutral-700 font-normal leading-[150%] placeholder:text-input-placeholder-text
                pr-[40px]
                "
							/>
							{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>
					</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-14 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" : "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="#" className="underline-offset-2">
								아이디 찾기
							</Link>
							<span className="h-3 w-px bg-input-border" />
							<Link href="#" 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>
	);
}