xrlms/src/app/find-id/page.tsx

"use client";

import React, { useMemo, useState } from "react";
import IdFindDone from "./IdFindDone";
import IdFindFailed from "./IdFindFailed";
import FindIdOption from "./FindIdOption";
import LoginInputSvg from "@/app/svgs/inputformx";

export default function FindIdPage() {
	const [isDoneOpen, setIsDoneOpen] = useState(false);
	const [isFailedOpen, setIsFailedOpen] = useState(false);
	const [foundUserId, setFoundUserId] = useState<string | undefined>(undefined);
	const [name, setName] = useState("");
	const [phone, setPhone] = useState("");
	const [focused, setFocused] = useState<Record<string, boolean>>({});
	const [errors, setErrors] = useState<Record<string, string>>({});

	const isNameValid = useMemo(() => name.trim().length > 0, [name]);
	const isPhoneValid = useMemo(() => /^\d{9,11}$/.test(phone), [phone]);
	const canSubmit = useMemo(() => isNameValid && isPhoneValid, [isNameValid, isPhoneValid]);

	function validateAll() {
		const next: Record<string, string> = {};
		if (!isNameValid) next.name = "이름을 입력해 주세요.";
		if (!isPhoneValid) next.phone = "휴대폰 번호를 숫자만 9~11자리로 입력해 주세요.";
		setErrors(next);
		return Object.keys(next).length === 0;
	}

	function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
		e.preventDefault();
		if (!validateAll()) return;
		const mockUserId = `${name.trim()}@example.com`;
		setFoundUserId(mockUserId);
		setIsDoneOpen(true);
	}

	return (
		<div className="min-h-screen w-full flex flex-col items-center justify-between">
			<IdFindDone
				on={isDoneOpen}
				userId={foundUserId}
				onClose={() => setIsDoneOpen(false)}
			/>
			<IdFindFailed
				on={isFailedOpen}
				onClose={() => setIsFailedOpen(false)}
			/>

			<div className="rounded-xl bg-white max-w-[560px] px-[40px] w-full relative">
			
				<div className="my-15 flex flex-col items-center">
					<div className="text-[24px] font-extrabold leading-[150%] text-neutral-700">
						아이디 찾기
					</div>
					<p className="text-[18px] leading-[150%] text-[#6c7682] mt-[8px] text-center">
						가입 시 등록한 회원정보를 입력해 주세요.
					</p>
				</div>

				<form onSubmit={handleSubmit} className="space-y-6">
					<div className="space-y-2">
						<label htmlFor="name" className="text-[15px] font-semibold text-[#6c7682]">
							이름
						</label>
						<div className="relative">
							<input
								id="name"
								name="name"
								value={name}
								onChange={(e) => setName(e.target.value)}
								onFocus={() => setFocused((p) => ({ ...p, name: true }))}
								onBlur={() => setFocused((p) => ({ ...p, name: false }))}
								placeholder="이름을 입력해 주세요."
								className="h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border border-neutral-40 focus:outline-none focus:border-neutral-700 text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px]"
							/>
							{name.trim().length > 0 && focused.name && (
								<button
									type="button"
									onMouseDown={(e) => {
										e.preventDefault();
										setName("");
									}}
									aria-label="입력 지우기"
									className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer">
									<LoginInputSvg />
								</button>
							)}
						</div>
						{errors.name && <p className="text-error text-[13px] leading-tight">{errors.name}</p>}
					</div>

					<div className="space-y-2">
						<label htmlFor="phone" className="text-[15px] font-semibold text-[#6c7682]">
							휴대폰 번호
						</label>
						<div className="relative">
							<input
								id="phone"
								name="phone"
								type="tel"
								inputMode="numeric"
								value={phone}
								onChange={(e) => setPhone(e.target.value.replace(/[^0-9]/g, ""))}
								onFocus={() => setFocused((p) => ({ ...p, phone: true }))}
								onBlur={() => setFocused((p) => ({ ...p, phone: false }))}
								placeholder="-없이 입력해 주세요."
								className="h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border border-neutral-40 focus:outline-none focus:border-neutral-700 text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px]"
							/>
							{phone.trim().length > 0 && focused.phone && (
								<button
									type="button"
									onMouseDown={(e) => {
										e.preventDefault();
										setPhone("");
									}}
									aria-label="입력 지우기"
									className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer">
									<LoginInputSvg />
								</button>
							)}
						</div>
						{errors.phone && <p className="text-error text-[13px] leading-tight">{errors.phone}</p>}
					</div>

					<button
						type="submit"
						className={`h-[40px] w-full rounded-[12px] text-[18px] font-semibold text-white ${canSubmit ? "bg-active-button" : "bg-inactive-button"} cursor-pointer`}>
						다음
					</button>


				</form>
			</div>

			<FindIdOption
				doneEnabled={isDoneOpen}
				setDoneEnabled={setIsDoneOpen}
				failedEnabled={isFailedOpen}
				setFailedEnabled={setIsFailedOpen}
			/>

			<p className="text-center py-[40px] text-[15px] text-basic-text">
				Copyright ⓒ 2025 XL LMS. All rights reserved
			</p>
		</div>
	);
}