인증번호 발송 및 확인

app/register/page.tsx

@@ -38,8 +38,14 @@ export default function RegisterPage() {
     passwordConfirm: '',
   });
 
+  const [verificationCode, setVerificationCode] = useState('');
+  const [isVerificationSent, setIsVerificationSent] = useState(false);
+  const [isVerificationComplete, setIsVerificationComplete] = useState(false);
+  const [verificationError, setVerificationError] = useState('');
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
     const { name, value } = e.target;
+    const prevValue = formData[name as keyof typeof formData];
     setFormData((prev) => ({
       ...prev,
       [name]: value,
@@ -50,6 +56,12 @@ export default function RegisterPage() {
         [name]: '',
       }));
     }
+    // 이메일이 실제로 변경되었을 때만 인증 상태 초기화
+    if (name === 'email' && prevValue !== value && isVerificationSent) {
+      setIsVerificationSent(false);
+      setVerificationCode('');
+      setIsVerificationComplete(false);
+    }
   };
 
   const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -119,7 +131,33 @@ export default function RegisterPage() {
       return;
     }
     // TODO: 인증번호 전송 API 호출
-    alert('인증번호가 전송되었습니다.');
+    setIsVerificationSent(true);
+    setVerificationCode('');
+    setIsVerificationComplete(false);
+    setVerificationError('');
+  };
+
+  const handleVerificationCodeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setVerificationCode(e.target.value);
+    // 인증번호 입력 시 에러 초기화
+    if (verificationError) {
+      setVerificationError('');
+    }
+  };
+
+  const handleVerifyCode = () => {
+    if (!verificationCode.trim()) {
+      return;
+    }
+    // TODO: 인증번호 확인 API 호출
+    // API 연동 전까지 맞는 인증번호는 123456
+    if (verificationCode.trim() === '123456') {
+      setIsVerificationComplete(true);
+      setVerificationError('');
+    } else {
+      // 인증번호가 틀렸을 때 에러 메시지 표시
+      setVerificationError('인증번호가 잘못되었습니다.');
+    }
   };
 
   const validateForm = () => {
@@ -206,6 +244,7 @@ export default function RegisterPage() {
       >
         <div className="flex flex-col gap-[20px]">
           {/* 이름 */}
+          <div className="flex flex-col">
             <div className="flex gap-[16px] items-center h-[41px]">
               <span className="text-[#515151] text-[18px] font-medium w-[177px]">
                 이름
@@ -220,10 +259,12 @@ export default function RegisterPage() {
               />
             </div>
             {errors.name && (
-            <p className="text-[13px] text-[#E85D5D] ml-[193px]">{errors.name}</p>
+              <p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{errors.name}</p>
             )}
+          </div>
 
           {/* 휴대폰 */}
+          <div className="flex flex-col">
             <div className="flex gap-[16px] items-center h-[41px]">
               <span className="text-[#515151] text-[18px] font-medium w-[177px]">
                 휴대폰
@@ -239,10 +280,12 @@ export default function RegisterPage() {
               />
             </div>
             {errors.phone && (
-            <p className="text-[13px] text-[#E85D5D] ml-[193px]">{errors.phone}</p>
+              <p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{errors.phone}</p>
             )}
+          </div>
 
           {/* 이메일(아이디) + 인증번호 발송 */}
+          <div className="flex flex-col">
             <div className="flex gap-[16px] items-center h-[41px]">
               <span className="text-[#515151] text-[18px] font-medium w-[177px]">
                 이메일(아이디)
@@ -260,14 +303,62 @@ export default function RegisterPage() {
                 onClick={handleSendVerificationCode}
                 className="bg-[#2B82E8] rounded-[10px] px-[10px] text-[18px] font-medium text-white h-[43px] w-[158px] transition hover:bg-[#1669ca]"
               >
-              인증번호 발송
+                {isVerificationSent ? '인증번호 재발송' : '인증번호 발송'}
               </button>
             </div>
             {errors.email && (
-            <p className="text-[13px] text-[#E85D5D] ml-[193px]">{errors.email}</p>
+              <p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{errors.email}</p>
+            )}
+          </div>
+
+          {/* 인증번호 입력 폼 */}
+          {isVerificationSent && (
+            <div className="flex flex-col">
+              <div className="flex gap-[16px] items-center h-[41px]">
+                <span className="text-[#515151] text-[18px] font-medium w-[177px]">
+                </span>
+                <input
+                  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]"
+                  placeholder="인증번호를 입력해 주세요."
+                />
+                <button
+                  type="button"
+                  onClick={handleVerifyCode}
+                  disabled={!verificationCode.trim() || isVerificationComplete}
+                  className={`rounded-[10px] h-[43px] w-[158px] text-[18px] font-medium transition flex items-center justify-center
+                    ${verificationCode.trim() && !isVerificationComplete
+                      ? 'bg-[#2B82E8] text-white hover:bg-[#1669ca]'
+                      : 'bg-[#b9b9b9] text-white cursor-not-allowed'
+                    }`}
+                >
+                  인증번호 확인
+                </button>
+              </div>
+              {verificationError && (
+                <p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{verificationError}</p>
+              )}
+              {!isVerificationComplete && !verificationError && (
+                <div className="flex items-center ml-[193px] mt-[16px]">
+                  <p className="text-[#1669ca] text-[12px] font-medium leading-[14px] max-w-[575px]">
+                    인증 확인을 위해 작성한 이메일로 인증번호를 발송했어요.<br />이메일을 확인해 주세요.
+                  </p>
+                </div>
+              )}
+              {isVerificationComplete && (
+                <div className="flex items-center ml-[193px] mt-[16px]">
+                  <p className="text-[#1669ca] text-[12px] font-medium">
+                    이메일 인증을 완료했어요.
+                  </p>
+                </div>
+              )}
+            </div>
           )}
 
           {/* 비밀번호 */}
+          <div className="flex flex-col">
             <div className="flex gap-[16px] items-center h-[41px]">
               <span className="text-[#515151] text-[18px] font-medium w-[177px]">
                 비밀번호
@@ -282,10 +373,12 @@ export default function RegisterPage() {
               />
             </div>
             {errors.password && (
-            <p className="text-[13px] text-[#E85D5D] ml-[193px]">{errors.password}</p>
+              <p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{errors.password}</p>
             )}
+          </div>
 
           {/* 비밀번호 확인 */}
+          <div className="flex flex-col">
             <div className="flex gap-[16px] items-center h-[41px]">
               <span className="text-[#515151] text-[18px] font-medium w-[177px]">
                 비밀번호 확인
@@ -300,8 +393,9 @@ export default function RegisterPage() {
               />
             </div>
             {errors.passwordConfirm && (
-            <p className="text-[13px] text-[#E85D5D] ml-[193px]">{errors.passwordConfirm}</p>
+              <p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{errors.passwordConfirm}</p>
             )}
+          </div>
 
           {/* 성별 */}
           <div className="flex gap-[16px] items-center h-[24px]">
@@ -485,12 +579,12 @@ export default function RegisterPage() {
       </div>
 
       {/* 버튼 영역 */}
-      <div className="mt-[52px] w-[829px] flex gap-[21px]">
+      <div className="mt-[52px] mb-[137px] w-[829px] flex gap-[21px] justify-center">
         <Link
           href="/registeragreement"
           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"
         >
-          돌아기기
+          돌아가기
         </Link>
         <button
           type="button"
@@ -507,7 +601,7 @@ export default function RegisterPage() {
       </div>
 
       {/* 카피라이트 */}
-      <footer className="absolute bottom-[89.5px] left-1/2 -translate-x-1/2 flex flex-col items-center">
+      <footer className="absolute bottom-[78px] 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>