회원가입 화면 신설설

app/login/page.tsx

@@ -194,7 +194,7 @@ export default function LoginPage() {
         {/* 하단 링크 버튼들 */}
         <div className="mt-4 flex items-center justify-center gap-2.5">
           <Link
-            href="/registeragreement"
+            href="/register"
             className="text-sm text-gray-600 hover:text-gray-800"
           >
             회원가입

app/register/page.tsx

@@ -2,37 +2,48 @@
 
 import { useState } from 'react';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+
+const imgRiCheckboxCircleLine = "http://localhost:3845/assets/e4c498605e2559d2764a3112ae9a9019e6ad798e.svg";
+const imgFormkitRadio = "http://localhost:3845/assets/ea30a9a80d95ced4bfb1174d3a8475a4a1dbbabb.svg";
+const imgAkarIconsRadio = "http://localhost:3845/assets/d772bd292f6dfddfcbd42cc1f22aa796ed671b11.svg";
+const imgLsiconDownFilled = "http://localhost:3845/assets/1c65a7143b6e9a0eee4b0878c33198a22da091cf.svg";
 
 export default function RegisterPage() {
+  const router = useRouter();
   const [formData, setFormData] = useState({
     name: '',
+    phone: '',
     email: '',
     password: '',
     passwordConfirm: '',
-    phone: '',
     gender: 'male',
-    birthDate: '',
-    verificationCode: '',
+    birthYear: '',
+    birthMonth: '',
+    birthDay: '',
+  });
+
+  const [agreements, setAgreements] = useState({
+    all: false,
+    age14: false,
+    terms: false,
+    privacy: false,
   });
 
   const [errors, setErrors] = useState({
     name: '',
+    phone: '',
     email: '',
     password: '',
     passwordConfirm: '',
-    phone: '',
-    birthDate: '',
-    verificationCode: '',
   });
 
-  // 입력 필드 변경 핸들러
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     setFormData((prev) => ({
       ...prev,
       [name]: value,
     }));
-    // 에러 초기화
     if (errors[name as keyof typeof errors]) {
       setErrors((prev) => ({
         ...prev,
@@ -41,95 +52,64 @@ export default function RegisterPage() {
     }
   };
 
-  // 이메일 유효성 검사
+  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let value = e.target.value.replace(/[^\d]/g, '');
+    if (value.length > 11) value = value.slice(0, 11);
+    setFormData((prev) => ({
+      ...prev,
+      phone: value,
+    }));
+    if (errors.phone) {
+      setErrors((prev) => ({
+        ...prev,
+        phone: '',
+      }));
+    }
+  };
+
+  const handleAgreementChange = (key: keyof typeof agreements) => {
+    if (key === 'all') {
+      const newValue = !agreements.all;
+      setAgreements({
+        all: newValue,
+        age14: newValue,
+        terms: newValue,
+        privacy: newValue,
+      });
+    } else {
+      const newAgreements = {
+        ...agreements,
+        [key]: !agreements[key],
+      };
+      setAgreements({
+        ...newAgreements,
+        all: newAgreements.age14 && newAgreements.terms && newAgreements.privacy,
+      });
+    }
+  };
+
+  const handleGenderChange = (gender: 'male' | 'female') => {
+    setFormData((prev) => ({
+      ...prev,
+      gender,
+    }));
+  };
+
   const validateEmail = (email: string) => {
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     return emailRegex.test(email);
   };
 
-  // 비밀번호 유효성 검사 (최소 8자, 영문/숫자 조합)
   const validatePassword = (password: string) => {
-    return password.length >= 8 && /[a-zA-Z]/.test(password) && /[0-9]/.test(password);
+    return password.length >= 8 && password.length <= 16 && /[a-zA-Z]/.test(password) && /[0-9]/.test(password);
   };
 
-  // 전화번호 유효성 검사 (하이픈 없이)
   const validatePhone = (phone: string) => {
-    if (phone === '') return true; // 선택 항목
+    if (phone === '') return true;
     const phoneRegex = /^010\d{8}$/;
     return phoneRegex.test(phone.replace(/[^\d]/g, ''));
   };
 
-  // 폼 제출 전 유효성 검사
-  const validateForm = () => {
-    const newErrors = {
-      name: '',
-      email: '',
-      password: '',
-      passwordConfirm: '',
-      phone: '',
-    };
-
-    let isValid = true;
-
-    // 이름 검사
-    if (formData.name.trim() === '') {
-      newErrors.name = '이름을 입력해주세요.';
-      isValid = false;
-    }
-
-    // 이메일 검사
-    if (formData.email.trim() === '') {
-      newErrors.email = '이메일을 입력해주세요.';
-      isValid = false;
-    } else if (!validateEmail(formData.email)) {
-      newErrors.email = '올바른 이메일 형식이 아닙니다.';
-      isValid = false;
-    }
-
-    // 비밀번호 검사
-    if (formData.password === '') {
-      newErrors.password = '비밀번호를 입력해주세요.';
-      isValid = false;
-    } else if (!validatePassword(formData.password)) {
-      newErrors.password = '비밀번호는 8자 이상, 영문과 숫자를 포함해야 합니다.';
-      isValid = false;
-    }
-
-    // 비밀번호 확인 검사
-    if (formData.passwordConfirm === '') {
-      newErrors.passwordConfirm = '비밀번호 확인을 입력해주세요.';
-      isValid = false;
-    } else if (formData.password !== formData.passwordConfirm) {
-      newErrors.passwordConfirm = '비밀번호가 일치하지 않습니다.';
-      isValid = false;
-    }
-
-    // 전화번호 검사 (선택 항목)
-    if (formData.phone && !validatePhone(formData.phone)) {
-      newErrors.phone = '올바른 전화번호 형식이 아닙니다. (예: 01012345678)';
-      isValid = false;
-    }
-
-    setErrors({
-      ...newErrors,
-      birthDate: '',
-      verificationCode: '',
-    });
-    return isValid;
-  };
-
-  // 전화번호 자동 포맷팅 (하이픈 없이)
-  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    let value = e.target.value.replace(/[^\d]/g, '');
-    if (value.length > 11) value = value.slice(0, 11);
-    
-    setFormData((prev) => ({
-      ...prev,
-      phone: value,
-    }));
-  };
-
-  // 인증번호 전송 핸들러
   const handleSendVerificationCode = () => {
     if (!formData.email || !validateEmail(formData.email)) {
       setErrors((prev) => ({
@@ -142,269 +122,366 @@ export default function RegisterPage() {
     alert('인증번호가 전송되었습니다.');
   };
 
-  // 생년월일 핸들러
-  const handleBirthDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setFormData((prev) => ({
-      ...prev,
-      birthDate: e.target.value,
-    }));
+  const validateForm = () => {
+    const newErrors = {
+      name: '',
+      phone: '',
+      email: '',
+      password: '',
+      passwordConfirm: '',
+    };
+
+    let isValid = true;
+
+    if (formData.name.trim() === '') {
+      newErrors.name = '이름을 입력해주세요.';
+      isValid = false;
+    }
+
+    if (formData.phone && !validatePhone(formData.phone)) {
+      newErrors.phone = '올바른 전화번호 형식이 아닙니다.';
+      isValid = false;
+    }
+
+    if (formData.email.trim() === '') {
+      newErrors.email = '이메일을 입력해주세요.';
+      isValid = false;
+    } else if (!validateEmail(formData.email)) {
+      newErrors.email = '올바른 이메일 형식이 아닙니다.';
+      isValid = false;
+    }
+
+    if (formData.password === '') {
+      newErrors.password = '비밀번호를 입력해주세요.';
+      isValid = false;
+    } else if (!validatePassword(formData.password)) {
+      newErrors.password = '비밀번호는 8~16자의 영문/숫자를 포함해야 합니다.';
+      isValid = false;
+    }
+
+    if (formData.passwordConfirm === '') {
+      newErrors.passwordConfirm = '비밀번호 확인을 입력해주세요.';
+      isValid = false;
+    } else if (formData.password !== formData.passwordConfirm) {
+      newErrors.passwordConfirm = '비밀번호가 일치하지 않습니다.';
+      isValid = false;
+    }
+
+    setErrors(newErrors);
+    return isValid;
   };
 
-  // 폼 제출 핸들러
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
+    if (!agreements.age14 || !agreements.terms || !agreements.privacy) {
+      alert('필수 약관에 동의해주세요.');
+      return;
+    }
     if (validateForm()) {
-      // 회원가입 완료 페이지로 이동
-      // 실제로는 API 호출을 하여 회원가입 처리를 해야 합니다
-      window.location.href = '/registercomplete';
+      router.push('/registercomplete');
     }
   };
 
-  // 필수 항목 입력 여부 확인
   const canProceed =
     formData.name.trim() !== '' &&
     formData.email.trim() !== '' &&
     formData.password !== '' &&
-    formData.passwordConfirm !== '';
+    formData.passwordConfirm !== '' &&
+    agreements.age14 &&
+    agreements.terms &&
+    agreements.privacy;
 
   return (
-    <div className="min-h-screen bg-white flex flex-col items-center pb-10 pt-48 px-[720px]">
-      <div className="flex flex-col gap-[60px] items-start w-[480px]">
+    <div className="bg-white relative min-h-screen flex flex-col items-center">
       {/* 제목 */}
-        <div className="flex gap-2 items-center justify-center w-full">
-          <h1 className="text-[24px] font-extrabold text-[#333c47] leading-[1.45]">회원가입</h1>
-        </div>
-
-        {/* 단계 표시 */}
-        <div className="flex flex-col gap-5 items-center w-full">
-          <div className="flex gap-5 items-center">
-            <div className="flex flex-col items-center justify-center text-[#8c95a1] text-[15px] w-[88px]">
-              <p className="leading-[1.5]">01</p>
-              <p className="leading-[1.5]">약관 동의</p>
-            </div>
-            <span className="text-[#8c95a1] text-xl">&gt;</span>
-            <div className="flex flex-col items-center justify-center text-[#1f2b91] text-[15px] font-bold w-[88px]">
-              <p className="leading-[1.5]">02</p>
-              <p className="leading-[1.5]">회원정보입력</p>
-            </div>
-            <span className="text-[#8c95a1] text-xl">&gt;</span>
-            <div className="flex flex-col items-center justify-center text-[#8c95a1] text-[15px] w-[88px]">
-              <p className="leading-[1.5]">03</p>
-              <p className="leading-[1.5]">회원가입완료</p>
-            </div>
-          </div>
-        </div>
+      <p className="font-bold text-[#1d1d1d] text-[32px] leading-normal mt-[146px] mb-0">
+        회원가입
+      </p>
 
       {/* 회원정보 입력 폼 */}
-        <form onSubmit={handleSubmit} className="flex flex-col gap-6 items-start w-full">
+      <div className="mt-[160px] w-[767px] flex flex-col gap-[61px]">
         {/* 이름 */}
-          <div className="flex flex-col gap-2 items-start justify-center w-full">
-            <label htmlFor="name" className="text-[#6c7682] text-[15px] font-semibold leading-[1.5]">
+        <div className="flex items-center gap-[10px]">
+          <p className="font-medium text-[#515151] text-[18px] leading-normal w-[177px]">
             이름
-            </label>
+          </p>
+          <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"
-              id="name"
               name="name"
               value={formData.name}
               onChange={handleChange}
-              className={`w-full h-10 px-3 py-2 border rounded-lg bg-white ${
-                errors.name
-                  ? 'border-red-500'
-                  : 'border-[#dee1e6]'
-              } focus:outline-none focus:ring-2 focus:ring-[#1f2b91]`}
+              className="flex-1 outline-none font-medium text-[18px] text-[#1d1d1d] placeholder:text-[#b9b9b9]"
               placeholder="이름을 입력해 주세요."
             />
-            {errors.name && (
-              <p className="text-sm text-red-500">{errors.name}</p>
-            )}
+          </div>
         </div>
 
         {/* 휴대폰 */}
-          <div className="flex flex-col gap-2 items-start justify-center w-full">
-            <label htmlFor="phone" className="text-[#6c7682] text-[15px] font-semibold leading-[1.5]">
+        <div className="flex items-center gap-[10px]">
+          <p className="font-medium text-[#515151] text-[18px] leading-normal w-[177px]">
             휴대폰
-            </label>
+          </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"
-              id="phone"
               name="phone"
               value={formData.phone}
               onChange={handlePhoneChange}
-              className={`w-full h-10 px-3 py-2 border rounded-lg bg-white ${
-                errors.phone
-                  ? 'border-red-500'
-                  : 'border-[#dee1e6]'
-              } focus:outline-none focus:ring-2 focus:ring-[#1f2b91]`}
+              className="flex-1 outline-none font-medium text-[18px] text-[#1d1d1d] placeholder:text-[#b9b9b9]"
               placeholder="-없이 입력해 주세요."
               maxLength={11}
             />
-            {errors.phone && (
-              <p className="text-sm text-red-500">{errors.phone}</p>
-            )}
+          </div>
         </div>
 
-          {/* 아이디(이메일) */}
-          <div className="flex flex-col gap-2 items-start justify-center w-full">
-            <label htmlFor="email" className="text-[#6c7682] text-[15px] font-semibold leading-[1.5]">
-              아이디(이메일)
-            </label>
-            <div className="flex gap-2 items-center w-full">
+        {/* 이메일(아이디) */}
+        <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"
-                id="email"
               name="email"
               value={formData.email}
               onChange={handleChange}
-                className={`flex-1 h-10 px-3 py-2 border rounded-lg bg-white ${
-                  errors.email
-                    ? 'border-red-500'
-                    : 'border-[#dee1e6]'
-                } focus:outline-none focus:ring-2 focus:ring-[#1f2b91]`}
+              className="flex-1 outline-none font-medium text-[18px] text-[#1d1d1d] placeholder:text-[#b9b9b9]"
               placeholder="이메일을 입력해 주세요."
             />
+          </div>
           <button
             type="button"
             onClick={handleSendVerificationCode}
-                className="h-10 px-3 py-0 bg-[#f9fafb] rounded-lg shrink-0 w-[136px] flex items-center justify-center text-[#b1b8c0] text-[16px] font-semibold hover:bg-[#f1f3f5]"
+            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>
-            {errors.email && (
-              <p className="text-sm text-red-500">{errors.email}</p>
-            )}
-          </div>
 
         {/* 비밀번호 */}
-          <div className="flex flex-col gap-2 items-start justify-center w-full">
-            <label htmlFor="password" className="text-[#6c7682] text-[15px] font-semibold leading-[1.5]">
+        <div className="flex items-center gap-[10px]">
+          <p className="font-medium text-[#515151] text-[18px] leading-normal w-[177px]">
             비밀번호
-            </label>
+          </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"
-              id="password"
               name="password"
               value={formData.password}
               onChange={handleChange}
-              className={`w-full h-10 px-3 py-2 border rounded-lg bg-white ${
-                errors.password
-                  ? 'border-red-500'
-                  : 'border-[#dee1e6]'
-              } focus:outline-none focus:ring-2 focus:ring-[#1f2b91]`}
+              className="flex-1 outline-none font-medium text-[18px] text-[#1d1d1d] placeholder:text-[#b9b9b9]"
               placeholder="8~16자의 영문/숫자/특수문자를 조합해서 입력해 주세요."
             />
-            {errors.password && (
-              <p className="text-sm text-red-500">{errors.password}</p>
-            )}
+          </div>
         </div>
 
         {/* 비밀번호 확인 */}
-          <div className="flex flex-col gap-2 items-start justify-center w-full">
-            <label htmlFor="passwordConfirm" className="text-[#6c7682] text-[15px] font-semibold leading-[1.5]">
+        <div className="flex items-center gap-[10px]">
+          <p className="font-medium text-[#515151] text-[18px] leading-normal w-[177px]">
             비밀번호 확인
-            </label>
+          </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"
-              id="passwordConfirm"
               name="passwordConfirm"
               value={formData.passwordConfirm}
               onChange={handleChange}
-              className={`w-full h-10 px-3 py-2 border rounded-lg bg-white ${
-                errors.passwordConfirm
-                  ? 'border-red-500'
-                  : 'border-[#dee1e6]'
-              } focus:outline-none focus:ring-2 focus:ring-[#1f2b91]`}
+              className="flex-1 outline-none font-medium text-[18px] text-[#1d1d1d] placeholder:text-[#b9b9b9]"
               placeholder="비밀번호를 다시 입력해 주세요."
             />
-            {errors.passwordConfirm && (
-              <p className="text-sm text-red-500">{errors.passwordConfirm}</p>
-            )}
+          </div>
         </div>
 
         {/* 성별 */}
-          <div className="flex flex-col gap-2 items-start justify-center w-full">
-            <label className="text-[#6c7682] text-[15px] font-semibold leading-[1.5]">
+        <div className="flex items-start gap-[14px]">
+          <p className="font-medium text-[#515151] text-[18px] leading-normal w-[177px]">
             성별
-            </label>
-            <div className="flex gap-5 h-10 items-center w-[328px]">
-              <label className="flex gap-2 items-center cursor-pointer">
-                <input
-                  type="radio"
-                  name="gender"
-                  value="male"
-                  checked={formData.gender === 'male'}
-                  onChange={(e) => setFormData((prev) => ({ ...prev, gender: e.target.value }))}
-                  className="w-[18px] h-[18px] border-[1.5px] border-[#1f2b91] rounded-full appearance-none relative checked:before:content-[''] checked:before:absolute checked:before:w-[9px] checked:before:h-[9px] checked:before:bg-[#1f2b91] checked:before:rounded-full checked:before:top-[4.5px] checked:before:left-[4.5px]"
-                />
-                <span className="text-[#333c47] text-[15px] leading-[1.5]">남성</span>
-              </label>
-              <label className="flex gap-2 items-center cursor-pointer">
-                <input
-                  type="radio"
-                  name="gender"
-                  value="female"
-                  checked={formData.gender === 'female'}
-                  onChange={(e) => setFormData((prev) => ({ ...prev, gender: e.target.value }))}
-                  className="w-[18px] h-[18px] border-[1.5px] border-[#8c95a1] rounded-full appearance-none"
-                />
-                <span className="text-[#333c47] text-[15px] leading-[1.5]">여성</span>
-              </label>
+          </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')}>
+              <div className="relative w-[24px] h-[24px] shrink-0">
+                {formData.gender === 'female' ? (
+                  <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>
         </div>
 
         {/* 생년월일 */}
-          <div className="flex flex-col gap-2 items-start justify-center w-full">
-            <label htmlFor="birthDate" className="text-[#6c7682] text-[15px] font-semibold leading-[1.5]">
+        <div className="flex items-center gap-[10px]">
+          <p className="font-medium text-[#515151] text-[18px] leading-normal w-[177px]">
             생년월일
-            </label>
-            <div className="w-full h-10 px-3 py-2 border border-[#dee1e6] rounded-lg bg-white flex items-center gap-2">
-              <input
-                type="text"
-                id="birthDate"
-                name="birthDate"
-                value={formData.birthDate}
-                onChange={handleBirthDateChange}
-                className="flex-1 outline-none text-[#6c7682] text-[16px]"
-                placeholder="생년월일"
-              />
-              <svg className="w-6 h-6 shrink-0 text-[#333c47]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-              </svg>
+          </p>
+          <div className="flex gap-[10px]">
+            <div className="border border-[#b9b9b9] border-solid box-border flex items-center justify-between p-[10px] rounded-[8px] w-[180.667px] cursor-pointer">
+              <p className="font-medium text-[18px] text-[#b9b9b9]">
+                {formData.birthYear || '년도'}
+              </p>
+              <div className="relative w-[16px] h-[16px] shrink-0">
+                <img alt="" className="block max-w-none w-full h-full" src={imgLsiconDownFilled} />
               </div>
-            {errors.birthDate && (
-              <p className="text-sm text-red-500">{errors.birthDate}</p>
+            </div>
+            <div className="border border-[#b9b9b9] border-solid box-border flex items-center justify-between p-[10px] rounded-[8px] w-[180.667px] cursor-pointer">
+              <p className="font-medium text-[18px] text-[#b9b9b9]">
+                {formData.birthMonth || '월'}
+              </p>
+              <div className="relative w-[16px] h-[16px] shrink-0">
+                <img alt="" className="block max-w-none w-full h-full" src={imgLsiconDownFilled} />
+              </div>
+            </div>
+            <div className="border border-[#b9b9b9] border-solid box-border flex items-center justify-between p-[10px] rounded-[8px] w-[180.667px] cursor-pointer">
+              <p className="font-medium text-[18px] text-[#b9b9b9]">
+                {formData.birthDay || '일'}
+              </p>
+              <div className="relative w-[16px] h-[16px] shrink-0">
+                <img alt="" className="block max-w-none w-full h-full" src={imgLsiconDownFilled} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 약관 동의 */}
+      <div className="mt-[100px] border border-[#b9b9b9] border-solid rounded-[8px] w-[829px]">
+        <div className="p-[29px] flex flex-col gap-[17px]">
+          {/* 전체 동의 */}
+          <div className="flex items-center justify-between">
+            <div className="flex gap-[16px] items-end cursor-pointer" onClick={() => handleAgreementChange('all')}>
+              <div className="relative w-[24px] h-[24px] shrink-0">
+                {agreements.all ? (
+                  <div className="w-[24px] h-[24px] rounded-full border-2 border-[#1669ca] bg-[#1669ca] flex items-center justify-center">
+                    <div className="w-[8px] h-[8px] rounded-full bg-white" />
+                  </div>
+                ) : (
+                  <div className="w-[24px] h-[24px] rounded-full border-2 border-[#b9b9b9]" />
                 )}
               </div>
+              <p className="font-bold text-[#515151] text-[20px] leading-normal">
+                모든 항목에 동의합니다.
+              </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="relative w-[24px] h-[24px] shrink-0">
+                  {agreements.age14 ? (
+                    <div className="w-[24px] h-[24px] rounded-full border-2 border-[#1669ca] bg-[#1669ca] flex items-center justify-center">
+                      <div className="w-[8px] h-[8px] rounded-full bg-white" />
+                    </div>
+                  ) : (
+                    <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>
+              </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>
+            </div>
+
+            <div className="flex items-center justify-between">
+              <div className="flex gap-[16px] items-end cursor-pointer" onClick={() => handleAgreementChange('terms')}>
+                <div className="relative w-[24px] h-[24px] shrink-0">
+                  {agreements.terms ? (
+                    <div className="w-[24px] h-[24px] rounded-full border-2 border-[#1669ca] bg-[#1669ca] flex items-center justify-center">
+                      <div className="w-[8px] h-[8px] rounded-full bg-white" />
+                    </div>
+                  ) : (
+                    <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>
+              </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>
+            </div>
+
+            <div className="flex items-center justify-between">
+              <div className="flex gap-[16px] items-end cursor-pointer" onClick={() => handleAgreementChange('privacy')}>
+                <div className="relative w-[24px] h-[24px] shrink-0">
+                  {agreements.privacy ? (
+                    <div className="w-[24px] h-[24px] rounded-full border-2 border-[#1669ca] bg-[#1669ca] flex items-center justify-center">
+                      <div className="w-[8px] h-[8px] rounded-full bg-white" />
+                    </div>
+                  ) : (
+                    <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>
+              </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>
+            </div>
+          </div>
+        </div>
+      </div>
 
       {/* 버튼 영역 */}
-          <div className="flex gap-3 items-start w-full mt-4">
+      <div className="mt-[50px] flex gap-[21px] items-center">
         <Link
           href="/registeragreement"
-              className="h-14 px-2 py-0 bg-[#f1f3f5] rounded-xl shrink-0 w-[144px] flex items-center justify-center text-[#4c5561] text-[18px] font-semibold hover:bg-[#e5e7eb] transition"
+          className="border border-[#1669ca] border-solid box-border flex items-center justify-center p-[10px] rounded-[10px] w-[334px] h-[55px]"
         >
-              이전
+          <p className="font-medium text-[#515151] text-[18px] leading-normal">
+            돌아기기
+          </p>
         </Link>
         <button
-              type="submit"
+          type="button"
+          onClick={handleSubmit}
           disabled={!canProceed}
-              className={`flex-1 h-14 px-2 py-0 rounded-xl font-semibold text-[18px] transition ${
-                canProceed
-                  ? 'bg-[#8598e8] text-white hover:bg-[#7588d7]'
-                  : 'bg-gray-300 text-gray-500 cursor-not-allowed'
+          className={`box-border flex items-center justify-center p-[10px] rounded-[10px] w-[334px] h-[55px] ${canProceed
+            ? 'bg-[#2b82e8] hover:bg-[#1669ca]'
+            : 'bg-[#b9b9b9] cursor-not-allowed'
             }`}
         >
-              다음
+          <p className={`font-medium text-[18px] leading-normal ${canProceed ? 'text-white' : 'text-white'
+            }`}>
+            회원가입 완료
+          </p>
         </button>
       </div>
-        </form>
-      </div>
 
       {/* 카피라이트 */}
-      <div className="text-center text-[16px] text-[rgba(0,0,0,0.55)] leading-[1.45] tracking-[-0.08px] mt-10">
-        <p>Copyright ⓒ 2025 XL LMS. All rights reserved</p>
+      <div className="absolute bottom-[89.5px] flex flex-col justify-center left-1/2 -translate-x-1/2 translate-y-1/2">
+        <p className="font-medium text-[16px] text-[rgba(0,0,0,0.55)] leading-[1.45] tracking-[-0.08px]">
+          Copyright ⓒ 2025 XL LMS. All rights reserved
+        </p>
       </div>
     </div>
   );
 }
-