인증번호 발송 및 확인

app/register/page.tsx

@@ -38,8 +38,14 @@ export default function RegisterPage() {
     passwordConfirm: '',
   });
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  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 = () => {
@@ -192,296 +230,382 @@ export default function RegisterPage() {
     agreements.privacy;
 
   return (
-    <div className="bg-white relative min-h-screen flex flex-col items-center">
+    <div className="relative min-h-screen flex flex-col items-center bg-white pb-[100px]">
       {/* 제목 */}
-      <p className="font-bold text-[#1d1d1d] text-[32px] leading-normal mt-[146px] mb-0">
+      <h1 className="font-bold text-[#1D1D1D] text-[32px] leading-tight mt-[100px]">
         회원가입
-      </p>
+      </h1>
 
       {/* 회원정보 입력 폼 */}
-      <div className="mt-[160px] w-[767px] flex flex-col gap-[61px]">
+      <form
-        {/* 이름 */}
+        className="w-[829px] border border-[#b9b9b9] rounded-[8px] mt-[56px] px-[31px] py-[29px]"
-        <div className="flex items-center gap-[10px]">
+        autoComplete="off"
-          <p className="font-medium text-[#515151] text-[18px] leading-normal w-[177px]">
+        onSubmit={handleSubmit}
-            이름
+      >
-          </p>
+        <div className="flex flex-col gap-[20px]">
-          <div className={`border border-solid box-border flex items-center p-[10px] rounded-[8px] flex-1 ${errors.name ? 'border-red-500' : 'border-[#b9b9b9]'}`}>
+          {/* 이름 */}
-            <input
+          <div className="flex flex-col">
-              type="text"
+            <div className="flex gap-[16px] items-center h-[41px]">
-              name="name"
+              <span className="text-[#515151] text-[18px] font-medium w-[177px]">
-              value={formData.name}
+                이름
-              onChange={handleChange}
+              </span>
-              className="flex-1 outline-none font-medium text-[18px] text-[#1d1d1d] placeholder:text-[#b9b9b9]"
+              <input
-              placeholder="이름을 입력해 주세요."
+                type="text"
-            />
+                name="name"
-          </div>
+                value={formData.name}
-        </div>
+                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]'}`}
-        {/* 휴대폰 */}
+                placeholder="이름을 입력해 주세요."
-        <div className="flex items-center gap-[10px]">
+              />
-          <p className="font-medium text-[#515151] text-[18px] leading-normal w-[177px]">
-            휴대폰
-          </p>
-          <div className={`border border-solid box-border flex items-center p-[10px] rounded-[8px] flex-1 ${errors.phone ? 'border-red-500' : 'border-[#b9b9b9]'}`}>
-            <input
-              type="text"
-              name="phone"
-              value={formData.phone}
-              onChange={handlePhoneChange}
-              className="flex-1 outline-none font-medium text-[18px] text-[#1d1d1d] placeholder:text-[#b9b9b9]"
-              placeholder="-없이 입력해 주세요."
-              maxLength={11}
-            />
-          </div>
-        </div>
-
-        {/* 이메일(아이디) */}
-        <div className="flex items-center gap-[10px]">
-          <p className="font-medium text-[#515151] text-[18px] leading-normal w-[177px]">
-            이메일(아이디)
-          </p>
-          <div className={`border border-solid box-border flex items-center p-[10px] rounded-[8px] ${errors.email ? 'border-red-500' : 'border-[#b9b9b9]'} w-[401px]`}>
-            <input
-              type="email"
-              name="email"
-              value={formData.email}
-              onChange={handleChange}
-              className="flex-1 outline-none font-medium text-[18px] text-[#1d1d1d] placeholder:text-[#b9b9b9]"
-              placeholder="이메일을 입력해 주세요."
-            />
-          </div>
-          <button
-            type="button"
-            onClick={handleSendVerificationCode}
-            className="bg-[#2b82e8] box-border flex items-center justify-center p-[10px] rounded-[10px] w-[158px] h-[43px]"
-          >
-            <p className="font-medium text-[18px] text-white text-center">
-              인증번호 발송
-            </p>
-          </button>
-        </div>
-
-        {/* 비밀번호 */}
-        <div className="flex items-center gap-[10px]">
-          <p className="font-medium text-[#515151] text-[18px] leading-normal w-[177px]">
-            비밀번호
-          </p>
-          <div className={`border border-solid box-border flex items-center p-[10px] rounded-[8px] flex-1 ${errors.password ? 'border-red-500' : 'border-[#b9b9b9]'}`}>
-            <input
-              type="password"
-              name="password"
-              value={formData.password}
-              onChange={handleChange}
-              className="flex-1 outline-none font-medium text-[18px] text-[#1d1d1d] placeholder:text-[#b9b9b9]"
-              placeholder="8~16자의 영문/숫자/특수문자를 조합해서 입력해 주세요."
-            />
-          </div>
-        </div>
-
-        {/* 비밀번호 확인 */}
-        <div className="flex items-center gap-[10px]">
-          <p className="font-medium text-[#515151] text-[18px] leading-normal w-[177px]">
-            비밀번호 확인
-          </p>
-          <div className={`border border-solid box-border flex items-center p-[10px] rounded-[8px] flex-1 ${errors.passwordConfirm ? 'border-red-500' : 'border-[#b9b9b9]'}`}>
-            <input
-              type="password"
-              name="passwordConfirm"
-              value={formData.passwordConfirm}
-              onChange={handleChange}
-              className="flex-1 outline-none font-medium text-[18px] text-[#1d1d1d] placeholder:text-[#b9b9b9]"
-              placeholder="비밀번호를 다시 입력해 주세요."
-            />
-          </div>
-        </div>
-
-        {/* 성별 */}
-        <div className="flex items-start gap-[14px]">
-          <p className="font-medium text-[#515151] text-[18px] leading-normal w-[177px]">
-            성별
-          </p>
-          <div className="flex gap-[14px] items-center">
-            <div className="flex gap-[10px] items-center cursor-pointer" onClick={() => handleGenderChange('male')}>
-              <div className="relative w-[24px] h-[24px] shrink-0">
-                {formData.gender === 'male' ? (
-                  <img alt="" className="block max-w-none w-full h-full" src={imgFormkitRadio} />
-                ) : (
-                  <img alt="" className="block max-w-none w-full h-full" src={imgAkarIconsRadio} />
-                )}
-              </div>
-              <p className="font-medium text-[14px] text-[#515151] leading-[1.6]">남성</p>
             </div>
-            <div className="flex gap-[10px] items-center cursor-pointer" onClick={() => handleGenderChange('female')}>
+            {errors.name && (
-              <div className="relative w-[24px] h-[24px] shrink-0">
+              <p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{errors.name}</p>
-                {formData.gender === 'female' ? (
+            )}
-                  <img alt="" className="block max-w-none w-full h-full" src={imgFormkitRadio} />
+          </div>
-                ) : (
+
-                  <img alt="" className="block max-w-none w-full h-full" src={imgAkarIconsRadio} />
+          {/* 휴대폰 */}
-                )}
+          <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"
+                name="phone"
+                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]'}`}
+                placeholder="-없이 입력해 주세요."
+              />
+            </div>
+            {errors.phone && (
+              <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]">
+                이메일(아이디)
+              </span>
+              <input
+                type="email"
+                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]'}`}
+                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]"
+              >
+                {isVerificationSent ? '인증번호 재발송' : '인증번호 발송'}
+              </button>
+            </div>
+            {errors.email && (
+              <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>
-              <p className="font-medium text-[14px] text-[#515151] leading-[1.6]">여성</p>
+              {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]">
+                비밀번호
+              </span>
+              <input
+                type="password"
+                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]'}`}
+                placeholder="8~16자의 영문/숫자/특수문자를 조합해서 입력해 주세요."
+              />
+            </div>
+            {errors.password && (
+              <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]">
+                비밀번호 확인
+              </span>
+              <input
+                type="password"
+                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]'}`}
+                placeholder="비밀번호를 다시 입력해 주세요."
+              />
+            </div>
+            {errors.passwordConfirm && (
+              <p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{errors.passwordConfirm}</p>
+            )}
+          </div>
+
+          {/* 성별 */}
+          <div className="flex gap-[16px] items-center h-[24px]">
+            <span className="text-[#515151] text-[18px] font-medium w-[177px]">
+              성별
+            </span>
+            <div className="flex gap-[14px] items-center">
+              <button
+                type="button"
+                className="flex items-center gap-[10px]"
+                onClick={() => handleGenderChange('male')}
+              >
+                <img
+                  src={formData.gender === 'male' ? imgFormkitRadio : imgAkarIconsRadio}
+                  alt=""
+                  className="w-[24px] h-[24px]"
+                />
+                <span className="text-[#515151] text-[14px] font-medium leading-[1.6]">
+                  남성
+                </span>
+              </button>
+              <button
+                type="button"
+                className="flex items-center gap-[10px]"
+                onClick={() => handleGenderChange('female')}
+              >
+                <img
+                  src={formData.gender === 'female' ? imgFormkitRadio : imgAkarIconsRadio}
+                  alt=""
+                  className="w-[24px] h-[24px]"
+                />
+                <span className="text-[#515151] text-[14px] font-medium leading-[1.6]">
+                  여성
+                </span>
+              </button>
             </div>
           </div>
-        </div>
 
-        {/* 생년월일 */}
+          {/* 생년월일 */}
-        <div className="flex items-center gap-[10px]">
+          <div className="flex gap-[16px] items-center h-[41px]">
-          <p className="font-medium text-[#515151] text-[18px] leading-normal w-[177px]">
+            <span className="text-[#515151] text-[18px] font-medium w-[177px]">
-            생년월일
+              생년월일
-          </p>
+            </span>
-          <div className="flex gap-[10px]">
+            <div className="flex gap-[8px] flex-1">
-            <div className="border border-[#b9b9b9] border-solid box-border flex items-center justify-between p-[10px] rounded-[8px] w-[180.667px] cursor-pointer">
+              <div className="relative flex-1">
-              <p className="font-medium text-[18px] text-[#b9b9b9]">
+                <select
-                {formData.birthYear || '년도'}
+                  name="birthYear"
-              </p>
+                  value={formData.birthYear}
-              <div className="relative w-[16px] h-[16px] shrink-0">
+                  onChange={handleChange}
-                <img alt="" className="block max-w-none w-full h-full" src={imgLsiconDownFilled} />
+                  className="w-full h-[41px] 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) => {
+                    const year = new Date().getFullYear() - idx;
+                    return <option key={year} value={year}>{year}</option>
+                  })}
+                </select>
+                <img
+                  src={imgLsiconDownFilled}
+                  alt=""
+                  className="absolute right-[10px] top-1/2 -translate-y-1/2 w-[16px] h-[16px] pointer-events-none"
+                />
               </div>
-            </div>
+              <div className="relative flex-1">
-            <div className="border border-[#b9b9b9] border-solid box-border flex items-center justify-between p-[10px] rounded-[8px] w-[180.667px] cursor-pointer">
+                <select
-              <p className="font-medium text-[18px] text-[#b9b9b9]">
+                  name="birthMonth"
-                {formData.birthMonth || '월'}
+                  value={formData.birthMonth}
-              </p>
+                  onChange={handleChange}
-              <div className="relative w-[16px] h-[16px] shrink-0">
+                  className="w-full h-[41px] px-[10px] text-[18px] font-medium border border-[#b9b9b9] rounded-[8px] bg-white text-[#515151] appearance-none pr-[30px]"
-                <img alt="" className="block max-w-none w-full h-full" src={imgLsiconDownFilled} />
+                >
+                  <option value="" className="text-[#b9b9b9]">월</option>
+                  {[...Array(12)].map((_, idx) => (
+                    <option key={idx + 1} value={idx + 1}>{idx + 1}</option>
+                  ))}
+                </select>
+                <img
+                  src={imgLsiconDownFilled}
+                  alt=""
+                  className="absolute right-[10px] top-1/2 -translate-y-1/2 w-[16px] h-[16px] pointer-events-none"
+                />
               </div>
-            </div>
+              <div className="relative flex-1">
-            <div className="border border-[#b9b9b9] border-solid box-border flex items-center justify-between p-[10px] rounded-[8px] w-[180.667px] cursor-pointer">
+                <select
-              <p className="font-medium text-[18px] text-[#b9b9b9]">
+                  name="birthDay"
-                {formData.birthDay || '일'}
+                  value={formData.birthDay}
-              </p>
+                  onChange={handleChange}
-              <div className="relative w-[16px] h-[16px] shrink-0">
+                  className="w-full h-[41px] px-[10px] text-[18px] font-medium border border-[#b9b9b9] rounded-[8px] bg-white text-[#515151] appearance-none pr-[30px]"
-                <img alt="" className="block max-w-none w-full h-full" src={imgLsiconDownFilled} />
+                >
+                  <option value="" className="text-[#b9b9b9]">일</option>
+                  {[...Array(31)].map((_, idx) => (
+                    <option key={idx + 1} value={idx + 1}>{idx + 1}</option>
+                  ))}
+                </select>
+                <img
+                  src={imgLsiconDownFilled}
+                  alt=""
+                  className="absolute right-[10px] top-1/2 -translate-y-1/2 w-[16px] h-[16px] pointer-events-none"
+                />
               </div>
             </div>
           </div>
         </div>
-      </div>
+      </form>
 
       {/* 약관 동의 */}
-      <div className="mt-[100px] border border-[#b9b9b9] border-solid rounded-[8px] w-[829px]">
+      <div className="mt-[46px] w-[829px] border border-[#b9b9b9] rounded-[8px] h-[221px] relative">
-        <div className="p-[29px] flex flex-col gap-[17px]">
+        <div className="px-[31px] py-[29px]">
-          {/* 전체 동의 */}
+          {/* 전체동의 */}
-          <div className="flex items-center justify-between">
+          <div
-            <div className="flex gap-[16px] items-end cursor-pointer" onClick={() => handleAgreementChange('all')}>
+            className="flex items-center gap-[16px] cursor-pointer select-none mb-[17px]"
-              <div className="relative w-[24px] h-[24px] shrink-0">
+            onClick={() => handleAgreementChange('all')}
-                {agreements.all ? (
+          >
-                  <div className="w-[24px] h-[24px] rounded-full border-2 border-[#1669ca] bg-[#1669ca] flex items-center justify-center">
+            <img
-                    <div className="w-[8px] h-[8px] rounded-full bg-white" />
+              src={imgRiCheckboxCircleLine}
-                  </div>
+              alt=""
-                ) : (
+              className={`w-[24px] h-[24px] ${agreements.all ? 'opacity-100' : 'opacity-50'}`}
-                  <div className="w-[24px] h-[24px] rounded-full border-2 border-[#b9b9b9]" />
+            />
-                )}
+            <span className="font-bold text-[20px] text-[#515151]">
-              </div>
+              모든 항목에 동의합니다.
-              <p className="font-bold text-[#515151] text-[20px] leading-normal">
+            </span>
-                모든 항목에 동의합니다.
-              </p>
-            </div>
           </div>
 
-          {/* 개별 약관 */}
+          {/* 개별 동의들 */}
           <div className="flex flex-col gap-[17px]">
             <div className="flex items-center justify-between">
-              <div className="flex gap-[16px] items-end cursor-pointer" onClick={() => handleAgreementChange('age14')}>
+              <div className="flex items-center gap-[16px] cursor-pointer" onClick={() => handleAgreementChange('age14')}>
-                <div className="relative w-[24px] h-[24px] shrink-0">
+                <img
-                  {agreements.age14 ? (
+                  src={imgRiCheckboxCircleLine}
-                    <div className="w-[24px] h-[24px] rounded-full border-2 border-[#1669ca] bg-[#1669ca] flex items-center justify-center">
+                  alt=""
-                      <div className="w-[8px] h-[8px] rounded-full bg-white" />
+                  className={`w-[24px] h-[24px] ${agreements.age14 ? 'opacity-100' : 'opacity-50'}`}
-                    </div>
+                />
-                  ) : (
+                <span className="text-[#515151] text-[16px] font-medium leading-[1.6]">
-                    <div className="w-[24px] h-[24px] rounded-full border-2 border-[#b9b9b9]" />
-                  )}
-                </div>
-                <p className="font-medium text-[#515151] text-[16px] leading-[1.6]">
                   만 14세 이상입니다. (필수)
-                </p>
+                </span>
-              </div>
-              <div className="border border-[#eeeeee] border-solid box-border flex items-center justify-center p-[10px] rounded-[10px] w-[90px] h-[27px] cursor-pointer hover:bg-gray-50">
-                <p className="font-medium text-[#1669ca] text-[12px] leading-normal">
-                  전체
-                </p>
               </div>
+              <button
+                type="button"
+                className="border border-[#eeeeee] rounded-[10px] px-[10px] py-[10px] h-[27px] flex items-center justify-center text-[#1669ca] text-[12px] font-medium"
+              >
+                전체
+              </button>
             </div>
-
             <div className="flex items-center justify-between">
-              <div className="flex gap-[16px] items-end cursor-pointer" onClick={() => handleAgreementChange('terms')}>
+              <div className="flex items-center gap-[16px] cursor-pointer" onClick={() => handleAgreementChange('terms')}>
-                <div className="relative w-[24px] h-[24px] shrink-0">
+                <img
-                  {agreements.terms ? (
+                  src={imgRiCheckboxCircleLine}
-                    <div className="w-[24px] h-[24px] rounded-full border-2 border-[#1669ca] bg-[#1669ca] flex items-center justify-center">
+                  alt=""
-                      <div className="w-[8px] h-[8px] rounded-full bg-white" />
+                  className={`w-[24px] h-[24px] ${agreements.terms ? 'opacity-100' : 'opacity-50'}`}
-                    </div>
+                />
-                  ) : (
+                <span className="text-[#515151] text-[16px] font-medium leading-[1.6]">
-                    <div className="w-[24px] h-[24px] rounded-full border-2 border-[#b9b9b9]" />
-                  )}
-                </div>
-                <p className="font-medium text-[#515151] text-[16px] leading-[1.6]">
                   이용 약관 동의 (필수)
-                </p>
+                </span>
-              </div>
-              <div className="border border-[#eeeeee] border-solid box-border flex items-center justify-center p-[10px] rounded-[10px] w-[90px] h-[27px] cursor-pointer hover:bg-gray-50">
-                <p className="font-medium text-[#1669ca] text-[12px] leading-normal">
-                  전체
-                </p>
               </div>
+              <button
+                type="button"
+                className="border border-[#eeeeee] rounded-[10px] px-[10px] py-[10px] h-[27px] flex items-center justify-center text-[#1669ca] text-[12px] font-medium"
+              >
+                전체
+              </button>
             </div>
-
             <div className="flex items-center justify-between">
-              <div className="flex gap-[16px] items-end cursor-pointer" onClick={() => handleAgreementChange('privacy')}>
+              <div className="flex items-center gap-[16px] cursor-pointer" onClick={() => handleAgreementChange('privacy')}>
-                <div className="relative w-[24px] h-[24px] shrink-0">
+                <img
-                  {agreements.privacy ? (
+                  src={imgRiCheckboxCircleLine}
-                    <div className="w-[24px] h-[24px] rounded-full border-2 border-[#1669ca] bg-[#1669ca] flex items-center justify-center">
+                  alt=""
-                      <div className="w-[8px] h-[8px] rounded-full bg-white" />
+                  className={`w-[24px] h-[24px] ${agreements.privacy ? 'opacity-100' : 'opacity-50'}`}
-                    </div>
+                />
-                  ) : (
+                <span className="text-[#515151] text-[16px] font-medium leading-[1.6]">
-                    <div className="w-[24px] h-[24px] rounded-full border-2 border-[#b9b9b9]" />
-                  )}
-                </div>
-                <p className="font-medium text-[#515151] text-[16px] leading-[1.6]">
                   개인정보 수집 및 이용 동의 (필수)
-                </p>
+                </span>
-              </div>
-              <div className="border border-[#eeeeee] border-solid box-border flex items-center justify-center p-[10px] rounded-[10px] w-[90px] h-[27px] cursor-pointer hover:bg-gray-50">
-                <p className="font-medium text-[#1669ca] text-[12px] leading-normal">
-                  전체
-                </p>
               </div>
+              <button
+                type="button"
+                className="border border-[#eeeeee] rounded-[10px] px-[10px] py-[10px] h-[27px] flex items-center justify-center text-[#1669ca] text-[12px] font-medium"
+              >
+                전체
+              </button>
             </div>
           </div>
         </div>
       </div>
 
       {/* 버튼 영역 */}
-      <div className="mt-[50px] flex gap-[21px] items-center">
+      <div className="mt-[52px] mb-[137px] w-[829px] flex gap-[21px] justify-center">
         <Link
           href="/registeragreement"
-          className="border border-[#1669ca] border-solid box-border flex items-center justify-center p-[10px] rounded-[10px] w-[334px] h-[55px]"
+          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"
         >
-          <p className="font-medium text-[#515151] text-[18px] leading-normal">
+          돌아가기
-            돌아기기
-          </p>
         </Link>
         <button
           type="button"
           onClick={handleSubmit}
           disabled={!canProceed}
-          className={`box-border flex items-center justify-center p-[10px] rounded-[10px] w-[334px] h-[55px] ${canProceed
+          className={`rounded-[10px] h-[55px] w-[334px] font-medium text-[18px] transition flex items-center justify-center
-            ? 'bg-[#2b82e8] hover:bg-[#1669ca]'
+            ${canProceed
-            : 'bg-[#b9b9b9] cursor-not-allowed'
+              ? 'bg-[#2B82E8] text-white hover:bg-[#1669ca]'
+              : 'bg-[#b9b9b9] text-white cursor-not-allowed'
             }`}
         >
-          <p className={`font-medium text-[18px] leading-normal ${canProceed ? 'text-white' : 'text-white'
+          회원가입 완료
-            }`}>
-            회원가입 완료
-          </p>
         </button>
       </div>
 
       {/* 카피라이트 */}
-      <div className="absolute bottom-[89.5px] flex flex-col justify-center left-1/2 -translate-x-1/2 translate-y-1/2">
+      <footer className="absolute bottom-[78px] left-1/2 -translate-x-1/2 flex flex-col items-center">
-        <p className="font-medium text-[16px] text-[rgba(0,0,0,0.55)] leading-[1.45] tracking-[-0.08px]">
+        <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>
-      </div>
+      </footer>
     </div>
   );
 }