아이디 찾기11

app/idfind/page.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+export default function IdFindPage() {
+  const router = useRouter();
+  const [name, setName] = useState('');
+  const [phone, setPhone] = useState('');
+  const [nameError, setNameError] = useState('');
+  const [phoneError, setPhoneError] = useState('');
+
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let value = e.target.value;
+    setName(value);
+    if (nameError) {
+      setNameError('');
+    }
+  };
+
+  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let value = e.target.value.replace(/[^\d]/g, '');
+    if (value.length > 11) value = value.slice(0, 11);
+    setPhone(value);
+    if (phoneError) {
+      setPhoneError('');
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setNameError('');
+    setPhoneError('');
+
+    let isValid = true;
+
+    if (!name.trim()) {
+      setNameError('이름을 입력해주세요.');
+      isValid = false;
+    }
+
+    if (!phone.trim()) {
+      setPhoneError('휴대폰 번호를 입력해주세요.');
+      isValid = false;
+    } else if (phone.length !== 11) {
+      setPhoneError('올바른 휴대폰 번호를 입력해주세요.');
+      isValid = false;
+    }
+
+    if (isValid) {
+      // TODO: 아이디 찾기 API 호출
+      // 임시로 다음 단계로 이동
+      router.push('/idfind/result');
+    }
+  };
+
+  return (
+    <div className="relative flex flex-col items-center bg-white pb-[100px]">
+      {/* 제목 */}
+      <h1 className="font-bold text-[#1D1D1D] text-[32px] leading-tight mt-[292px]">
+        아이디 찾기
+      </h1>
+      {/* 입력 폼 */}
+      <form
+        className="w-[664px] border border-[#b9b9b9] rounded-[8px] mt-[40px] px-[88px] py-[48px]"
+        onSubmit={handleSubmit}
+      >
+        <p className="text-[#515151] text-[16px] font-medium leading-[1.6] text-center mb-[36px]">
+          가입 시 등록한 회원정보를 입력해 주세요.
+        </p>
+
+        <div className="flex flex-col gap-[20px]">
+          {/* 이름 */}
+          <div className="flex flex-col">
+            <div className="flex gap-[16px] items-center h-[42px]">
+              <span className="text-[#515151] text-[18px] font-medium w-[177px]">
+                이름
+              </span>
+              <input
+                type="text"
+                value={name}
+                onChange={handleNameChange}
+                className={`h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white w-[313px] ${nameError ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
+                placeholder="이름을 입력해 주세요."
+              />
+            </div>
+            {nameError && (
+              <p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{nameError}</p>
+            )}
+          </div>
+
+          {/* 휴대폰 */}
+          <div className="flex flex-col">
+            <div className="flex gap-[16px] items-center h-[42px]">
+              <span className="text-[#515151] text-[18px] font-medium w-[177px]">
+                휴대폰
+              </span>
+              <input
+                type="text"
+                value={phone}
+                onChange={handlePhoneChange}
+                maxLength={11}
+                className={`h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white w-[313px] ${phoneError ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
+                placeholder="숫자만 입력해 주세요."
+              />
+            </div>
+            {phoneError && (
+              <p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{phoneError}</p>
+            )}
+          </div>
+        </div>
+      </form>
+
+      {/* 다음 버튼 */}
+      <div className="mt-[54px] mb-[228px]">
+        <button
+          type="button"
+          onClick={handleSubmit}
+          className="bg-[#2B82E8] rounded-[10px] h-[55px] w-[334px] flex items-center justify-center font-medium text-white text-[18px] hover:bg-[#1669ca] transition"
+        >
+          다음
+        </button>
+      </div>
+
+      {/* 카피라이트 */}
+      <footer className="absolute bottom-[40px] left-1/2 -translate-x-1/2 flex flex-col items-center">
+        <p className="text-[16px] text-[rgba(0,0,0,0.55)] leading-[1.45] font-medium tracking-[-0.08px]">
+          Copyright ⓒ 2025 XL LMS. All rights reserved
+        </p>
+      </footer>
+    </div>
+  );
+}
+