회원가입 폼 수정1

app/register/page.tsx

@@ -38,7 +38,7 @@ export default function RegisterPage() {
     passwordConfirm: '',
   });
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
     const { name, value } = e.target;
     setFormData((prev) => ({
       ...prev,
@@ -192,296 +192,326 @@ 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]"
+        autoComplete="off"
+        onSubmit={handleSubmit}
+      >
+        <div className="flex flex-col gap-[20px]">
           {/* 이름 */}
-        <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={`border border-solid box-border flex items-center p-[10px] rounded-[8px] flex-1 ${errors.name ? 'border-red-500' : 'border-[#b9b9b9]'}`}>
             <input
               type="text"
               name="name"
               value={formData.name}
               onChange={handleChange}
-              className="flex-1 outline-none font-medium text-[18px] text-[#1d1d1d] placeholder:text-[#b9b9b9]"
+              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>
-        </div>
+          {errors.name && (
+            <p className="text-[13px] text-[#E85D5D] ml-[193px]">{errors.name}</p>
+          )}
 
           {/* 휴대폰 */}
-        <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={`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}
+              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>
-        </div>
+          {errors.phone && (
+            <p className="text-[13px] text-[#E85D5D] ml-[193px]">{errors.phone}</p>
+          )}
 
-        {/* 이메일(아이디) */}
+          {/* 이메일(아이디) + 인증번호 발송 */}
-        <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={`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]"
+              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="이메일을 입력해 주세요."
             />
-          </div>
             <button
               type="button"
               onClick={handleSendVerificationCode}
-            className="bg-[#2b82e8] box-border flex items-center justify-center p-[10px] rounded-[10px] w-[158px] h-[43px]"
+              className="bg-[#2B82E8] rounded-[10px] px-[10px] text-[18px] font-medium text-white h-[43px] w-[158px] transition hover:bg-[#1669ca]"
             >
-            <p className="font-medium text-[18px] text-white text-center">
               인증번호 발송
-            </p>
             </button>
           </div>
+          {errors.email && (
+            <p className="text-[13px] text-[#E85D5D] ml-[193px]">{errors.email}</p>
+          )}
 
           {/* 비밀번호 */}
-        <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={`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]"
+              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>
-        </div>
+          {errors.password && (
+            <p className="text-[13px] text-[#E85D5D] ml-[193px]">{errors.password}</p>
+          )}
 
           {/* 비밀번호 확인 */}
-        <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={`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]"
+              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>
-        </div>
+          {errors.passwordConfirm && (
+            <p className="text-[13px] text-[#E85D5D] ml-[193px]">{errors.passwordConfirm}</p>
+          )}
 
           {/* 성별 */}
-        <div className="flex items-start gap-[14px]">
+          <div className="flex gap-[16px] items-center h-[24px]">
-          <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-[14px] items-center">
-            <div className="flex gap-[10px] items-center cursor-pointer" onClick={() => handleGenderChange('male')}>
+              <button
-              <div className="relative w-[24px] h-[24px] shrink-0">
+                type="button"
-                {formData.gender === 'male' ? (
+                className="flex items-center gap-[10px]"
-                  <img alt="" className="block max-w-none w-full h-full" src={imgFormkitRadio} />
+                onClick={() => handleGenderChange('male')}
-                ) : (
+              >
-                  <img alt="" className="block max-w-none w-full h-full" src={imgAkarIconsRadio} />
+                <img
-                )}
+                  src={formData.gender === 'male' ? imgFormkitRadio : imgAkarIconsRadio}
-              </div>
+                  alt=""
-              <p className="font-medium text-[14px] text-[#515151] leading-[1.6]">남성</p>
+                  className="w-[24px] h-[24px]"
-            </div>
+                />
-            <div className="flex gap-[10px] items-center cursor-pointer" onClick={() => handleGenderChange('female')}>
+                <span className="text-[#515151] text-[14px] font-medium leading-[1.6]">
-              <div className="relative w-[24px] h-[24px] shrink-0">
+                  남성
-                {formData.gender === 'female' ? (
+                </span>
-                  <img alt="" className="block max-w-none w-full h-full" src={imgFormkitRadio} />
+              </button>
-                ) : (
+              <button
-                  <img alt="" className="block max-w-none w-full h-full" src={imgAkarIconsRadio} />
+                type="button"
-                )}
+                className="flex items-center gap-[10px]"
-              </div>
+                onClick={() => handleGenderChange('female')}
-              <p className="font-medium text-[14px] text-[#515151] leading-[1.6]">여성</p>
+              >
-            </div>
+                <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 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 className="relative flex-1">
+                <select
+                  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]"
+                >
+                  <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 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.birthMonth || '월'}
+                  name="birthDay"
-              </p>
+                  value={formData.birthDay}
-              <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]"
-              </div>
+                >
-            </div>
+                  <option value="" className="text-[#b9b9b9]">일</option>
-            <div className="border border-[#b9b9b9] border-solid box-border flex items-center justify-between p-[10px] rounded-[8px] w-[180.667px] cursor-pointer">
+                  {[...Array(31)].map((_, idx) => (
-              <p className="font-medium text-[18px] text-[#b9b9b9]">
+                    <option key={idx + 1} value={idx + 1}>{idx + 1}</option>
-                {formData.birthDay || '일'}
+                  ))}
-              </p>
+                </select>
-              <div className="relative w-[16px] h-[16px] shrink-0">
+                <img
-                <img alt="" className="block max-w-none w-full h-full" src={imgLsiconDownFilled} />
+                  src={imgLsiconDownFilled}
-              </div>
+                  alt=""
+                  className="absolute right-[10px] top-1/2 -translate-y-1/2 w-[16px] h-[16px] pointer-events-none"
+                />
               </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">
               모든 항목에 동의합니다.
-              </p>
+            </span>
-            </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">
+              <button
-                <p className="font-medium text-[#1669ca] text-[12px] leading-normal">
+                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"
+              >
                 전체
-                </p>
+              </button>
             </div>
-            </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">
+              <button
-                <p className="font-medium text-[#1669ca] text-[12px] leading-normal">
+                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"
+              >
                 전체
-                </p>
+              </button>
             </div>
-            </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">
+              <button
-                <p className="font-medium text-[#1669ca] text-[12px] leading-normal">
+                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"
+              >
                 전체
-                </p>
+              </button>
-              </div>
             </div>
           </div>
         </div>
       </div>
 
       {/* 버튼 영역 */}
-      <div className="mt-[50px] flex gap-[21px] items-center">
+      <div className="mt-[52px] w-[829px] flex gap-[21px]">
         <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-[89.5px] 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>
   );
 }