아이디 찾기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>
+  );
+}
+

app/login/page.tsx

@@ -206,9 +206,12 @@ export default function LoginPage() {
             height={12}
             className="h-3"
           />
-          <button className="text-sm text-gray-600 hover:text-gray-800">
+          <Link
+            href="/idfind"
+            className="text-sm text-gray-600 hover:text-gray-800"
+          >
             아이디찾기
-          </button>
+          </Link>
           <Image
             src="/Divider.svg"
             alt=""

app/register/page.tsx

@@ -258,7 +258,7 @@ export default function RegisterPage() {
                 name="name"
                 value={formData.name}
                 onChange={handleChange}
-                className={`flex-1 h-[41px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white ${errors.name ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
+                className={`flex-1 h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white ${errors.name ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
                 placeholder="이름을 입력해 주세요."
               />
             </div>
@@ -279,7 +279,7 @@ export default function RegisterPage() {
                 value={formData.phone}
                 onChange={handlePhoneChange}
                 maxLength={11}
-                className={`flex-1 h-[41px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white ${errors.phone ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
+                className={`flex-1 h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white ${errors.phone ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
                 placeholder="-없이 입력해 주세요."
               />
             </div>
@@ -290,7 +290,7 @@ export default function RegisterPage() {
 
           {/* 이메일(아이디) + 인증번호 발송 */}
           <div className="flex flex-col">
-            <div className="flex gap-[16px] items-center h-[41px]">
+            <div className="flex gap-[16px] items-center h-[42px]">
               <span className="text-[#515151] text-[18px] font-medium w-[177px]">
                 이메일(아이디)
               </span>
@@ -299,13 +299,13 @@ export default function RegisterPage() {
                 name="email"
                 value={formData.email}
                 onChange={handleChange}
-                className={`h-[41px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white w-[401px] ${errors.email ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
+                className={`h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white w-[401px] ${errors.email ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
                 placeholder="이메일을 입력해 주세요."
               />
               <button
                 type="button"
                 onClick={handleSendVerificationCode}
-                className="bg-[#2B82E8] rounded-[10px] px-[10px] text-[18px] font-medium text-white h-[43px] w-[158px] transition hover:bg-[#1669ca]"
+                className="bg-[#2B82E8] rounded-[10px] px-[10px] text-[18px] font-medium text-white h-[42px] w-[158px] transition hover:bg-[#1669ca]"
               >
                 {isVerificationSent ? '인증번호 재발송' : '인증번호 발송'}
               </button>
@@ -325,7 +325,7 @@ export default function RegisterPage() {
                   type="text"
                   value={verificationCode}
                   onChange={handleVerificationCodeChange}
-                  className="h-[41px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#1669ca] text-[#515151] bg-white w-[401px]"
+                  className="h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#1669ca] text-[#515151] bg-white w-[401px]"
                   placeholder="인증번호를 입력해 주세요."
                 />
                 <button
@@ -372,7 +372,7 @@ export default function RegisterPage() {
                 name="password"
                 value={formData.password}
                 onChange={handleChange}
-                className={`flex-1 h-[41px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white ${errors.password ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
+                className={`flex-1 h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white ${errors.password ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
                 placeholder="8~16자의 영문/숫자/특수문자를 조합해서 입력해 주세요."
               />
             </div>
@@ -392,7 +392,7 @@ export default function RegisterPage() {
                 name="passwordConfirm"
                 value={formData.passwordConfirm}
                 onChange={handleChange}
-                className={`flex-1 h-[41px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white ${errors.passwordConfirm ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
+                className={`flex-1 h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white ${errors.passwordConfirm ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
                 placeholder="비밀번호를 다시 입력해 주세요."
               />
             </div>
@@ -441,7 +441,7 @@ export default function RegisterPage() {
                   name="birthYear"
                   value={formData.birthYear}
                   onChange={handleChange}
-                  className="w-full h-[41px] px-[10px] text-[18px] font-medium border border-[#b9b9b9] rounded-[8px] bg-white text-[#515151] appearance-none pr-[30px]"
+                  className="w-full h-[42px] px-[10px] text-[18px] font-medium border border-[#b9b9b9] rounded-[8px] bg-white text-[#515151] appearance-none pr-[30px]"
                 >
                   <option value="" className="text-[#b9b9b9]">년도</option>
                   {[...Array(100)].map((_, idx) => {
@@ -460,7 +460,7 @@ export default function RegisterPage() {
                   name="birthMonth"
                   value={formData.birthMonth}
                   onChange={handleChange}
-                  className="w-full h-[41px] px-[10px] text-[18px] font-medium border border-[#b9b9b9] rounded-[8px] bg-white text-[#515151] appearance-none pr-[30px]"
+                  className="w-full h-[42px] px-[10px] text-[18px] font-medium border border-[#b9b9b9] rounded-[8px] bg-white text-[#515151] appearance-none pr-[30px]"
                 >
                   <option value="" className="text-[#b9b9b9]">월</option>
                   {[...Array(12)].map((_, idx) => (
@@ -478,7 +478,7 @@ export default function RegisterPage() {
                   name="birthDay"
                   value={formData.birthDay}
                   onChange={handleChange}
-                  className="w-full h-[41px] px-[10px] text-[18px] font-medium border border-[#b9b9b9] rounded-[8px] bg-white text-[#515151] appearance-none pr-[30px]"
+                  className="w-full h-[42px] px-[10px] text-[18px] font-medium border border-[#b9b9b9] rounded-[8px] bg-white text-[#515151] appearance-none pr-[30px]"
                 >
                   <option value="" className="text-[#b9b9b9]">일</option>
                   {[...Array(31)].map((_, idx) => (
@@ -561,7 +561,7 @@ export default function RegisterPage() {
       {/* 버튼 영역 */}
       <div className="mt-[52px] mb-[137px] w-[829px] flex gap-[21px] justify-center">
         <Link
-          href="/registeragreement"
+          href="/login"
           className="border border-[#1669ca] bg-white rounded-[10px] h-[55px] w-[334px] flex items-center justify-center font-medium text-[#515151] text-[18px] hover:bg-[#EDF4FC] transition"
         >
           돌아가기

public/svg/chevron_small.tsx

@@ -0,0 +1,7 @@
+export default function ChevronSmall() {
+    return (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M8 10.2075L11.854 6.35448L11.147 5.64648L8 8.79348L4.854 5.64648L4.146 6.35448L8 10.2075Z" fill="#2B82E8" />
+        </svg>
+    );
+}