From 6bfa2f367d8ceb29449079ddc4d256321aece73e Mon Sep 17 00:00:00 2001 From: wallace Date: Tue, 25 Nov 2025 22:51:12 +0900 Subject: [PATCH] =?UTF-8?q?idfind=20api=20=EC=A0=81=EC=9A=A91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/find-id/IdFindDone.tsx | 6 +-- src/app/find-id/page.tsx | 87 +++++++++++++++++++++++++++++----- 2 files changed, 77 insertions(+), 16 deletions(-) diff --git a/src/app/find-id/IdFindDone.tsx b/src/app/find-id/IdFindDone.tsx index 7d24ad5..26156f7 100644 --- a/src/app/find-id/IdFindDone.tsx +++ b/src/app/find-id/IdFindDone.tsx @@ -49,17 +49,17 @@ export default function IdFindDone({

-
+
{userId && (

{userId}

)} - {joinedAtText && ( + {/* {joinedAtText && (

({joinedAtText})

- )} + )} */}
diff --git a/src/app/find-id/page.tsx b/src/app/find-id/page.tsx index 69247fb..a0b5e6f 100644 --- a/src/app/find-id/page.tsx +++ b/src/app/find-id/page.tsx @@ -10,6 +10,7 @@ export default function FindIdPage() { const [isDoneOpen, setIsDoneOpen] = useState(false); const [isFailedOpen, setIsFailedOpen] = useState(false); const [foundUserId, setFoundUserId] = useState(undefined); + const [joinedAt, setJoinedAt] = useState(undefined); const [name, setName] = useState(""); const [phone, setPhone] = useState(""); const [focused, setFocused] = useState>({}); @@ -19,6 +20,22 @@ export default function FindIdPage() { 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 = {}; if (!isNameValid) next.name = "이름을 입력해 주세요."; @@ -65,7 +82,21 @@ export default function FindIdPage() { } const data = await response.json(); - setFoundUserId(data.email); + + // body의 emails 배열에서 첫 번째 이메일 가져오기 + if (data.emails && Array.isArray(data.emails) && data.emails.length > 0) { + setFoundUserId(data.emails[0]); + } else if (data.email) { + setFoundUserId(data.email); + } + + // 가입일 정보는 API 응답에 없음 + // // header의 date 값 가져오기 + // const headerDate = response.headers.get('date'); + // if (headerDate) { + // setJoinedAt(formatJoinedAt(headerDate)); + // } + setIsDoneOpen(true); } catch (error) { const errorMessage = error instanceof Error ? error.message : '네트워크 오류가 발생했습니다.'; @@ -79,6 +110,7 @@ export default function FindIdPage() { setIsDoneOpen(false)} /> setIsFailedOpen(false)} /> -
+
+
@@ -97,7 +130,7 @@ export default function FindIdPage() {

-
+
-
+
@@ -139,14 +185,28 @@ export default function FindIdPage() { name="phone" type="tel" inputMode="numeric" - value={phone} - onChange={(e) => setPhone(e.target.value.replace(/[^0-9]/g, ""))} + 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 border-neutral-40 focus:outline-none focus:border-neutral-700 text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px]" + 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.trim().length > 0 && focused.phone && ( + {phone.length > 0 && focused.phone && ( )} @@ -164,12 +224,13 @@ export default function FindIdPage() { +