211 lines
7.3 KiB
TypeScript
211 lines
7.3 KiB
TypeScript
"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";
|
|
import apiService from "@/app/lib/apiService";
|
|
|
|
export default function FindIdPage() {
|
|
const [isDoneOpen, setIsDoneOpen] = useState(false);
|
|
const [isFailedOpen, setIsFailedOpen] = useState(false);
|
|
const [foundUserId, setFoundUserId] = useState<string | undefined>(undefined);
|
|
const [joinedAt, setJoinedAt] = 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 formatPhoneNumber(value: string): string {
|
|
const numbers = value.replace(/[^0-9]/g, "");
|
|
if (numbers.length <= 3) return numbers;
|
|
if (numbers.length <= 7) return `${numbers.slice(0, 3)}-${numbers.slice(3)}`;
|
|
if (numbers.length <= 11) return `${numbers.slice(0, 3)}-${numbers.slice(3, 7)}-${numbers.slice(7)}`;
|
|
return `${numbers.slice(0, 3)}-${numbers.slice(3, 7)}-${numbers.slice(7, 11)}`;
|
|
}
|
|
|
|
// function formatJoinedAt(dateString: string | Date): string {
|
|
// const date = typeof dateString === 'string' ? new Date(dateString) : dateString;
|
|
// const year = date.getFullYear();
|
|
// const month = date.getMonth() + 1;
|
|
// const day = date.getDate();
|
|
// return `${year}년 ${month}월 ${day}일`;
|
|
// }
|
|
|
|
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;
|
|
}
|
|
|
|
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
|
e.preventDefault();
|
|
if (!validateAll()) return;
|
|
|
|
try {
|
|
const response = await apiService.findUserId(name, phone);
|
|
const data = response.data;
|
|
|
|
// body의 emails 배열에서 첫 번째 이메일 가져오기
|
|
if (data.emails && Array.isArray(data.emails) && data.emails.length > 0) {
|
|
setFoundUserId(data.emails[0]);
|
|
} else if (data.email) {
|
|
setFoundUserId(data.email);
|
|
}
|
|
|
|
setIsDoneOpen(true);
|
|
} catch (error) {
|
|
console.error('아이디 찾기 오류:', error);
|
|
setIsFailedOpen(true);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen w-full flex flex-col items-center justify-between">
|
|
<IdFindDone
|
|
on={isDoneOpen}
|
|
userId={foundUserId}
|
|
// joinedAtText={joinedAt ? `가입일: ${joinedAt}` : undefined}
|
|
onClose={() => setIsDoneOpen(false)}
|
|
/>
|
|
<IdFindFailed
|
|
on={isFailedOpen}
|
|
onClose={() => setIsFailedOpen(false)}
|
|
/>
|
|
|
|
<div className="flex-1 flex items-center justify-center w-full py-6">
|
|
<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}>
|
|
<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);
|
|
if (errors.name) {
|
|
setErrors((prev) => {
|
|
const next = { ...prev };
|
|
delete next.name;
|
|
return next;
|
|
});
|
|
}
|
|
}}
|
|
onFocus={() => setFocused((p) => ({ ...p, name: true }))}
|
|
onBlur={() => setFocused((p) => ({ ...p, name: false }))}
|
|
placeholder="이름을 입력해 주세요."
|
|
className={`h-[40px] px-[12px] py-[7px] w-full rounded-[8px] mt-3 border focus:outline-none text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px] ${errors.name
|
|
? "border-error focus:border-error"
|
|
: "border-neutral-40 focus:border-neutral-700"
|
|
}`}
|
|
/>
|
|
{name.trim().length > 0 && focused.name && (
|
|
<button
|
|
type="button"
|
|
onMouseDown={(e) => {
|
|
e.preventDefault();
|
|
setName("");
|
|
}}
|
|
aria-label="입력 지우기"
|
|
className="absolute right-3 top-[32px] -translate-y-1/2 cursor-pointer flex items-center justify-center">
|
|
<LoginInputSvg />
|
|
</button>
|
|
)}
|
|
</div>
|
|
{errors.name && <p className="text-error text-[13px] leading-tight">{errors.name}</p>}
|
|
</div>
|
|
|
|
<div className="space-y-2 mt-6">
|
|
<label htmlFor="phone" className="text-[15px] font-semibold text-[#6c7682]">
|
|
휴대폰 번호
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
id="phone"
|
|
name="phone"
|
|
type="tel"
|
|
inputMode="numeric"
|
|
value={formatPhoneNumber(phone)}
|
|
onChange={(e) => {
|
|
const numbersOnly = e.target.value.replace(/[^0-9]/g, "");
|
|
setPhone(numbersOnly);
|
|
if (errors.phone) {
|
|
setErrors((prev) => {
|
|
const next = { ...prev };
|
|
delete next.phone;
|
|
return next;
|
|
});
|
|
}
|
|
}}
|
|
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 mt-3 focus:outline-none text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px] ${errors.phone
|
|
? "border-error focus:border-error"
|
|
: "border-neutral-40 focus:border-neutral-700"
|
|
}`}
|
|
/>
|
|
{phone.length > 0 && focused.phone && (
|
|
<button
|
|
type="button"
|
|
onMouseDown={(e) => {
|
|
e.preventDefault();
|
|
setPhone("");
|
|
}}
|
|
aria-label="입력 지우기"
|
|
className="absolute right-3 top-[32px] -translate-y-1/2 cursor-pointer flex items-center justify-center">
|
|
<LoginInputSvg />
|
|
</button>
|
|
)}
|
|
</div>
|
|
{errors.phone && <p className="text-error text-[13px] leading-tight">{errors.phone}</p>}
|
|
</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] mt-[60px] ${canSubmit ? "bg-active-button" : "bg-inactive-button"}`}>
|
|
다음
|
|
</button>
|
|
|
|
|
|
</form>
|
|
</div>
|
|
</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>
|
|
);
|
|
}
|
|
|
|
|