error define

- 휴대폰 필드 추가 (하이픈 없이 입력)
- 성별 선택 라디오 버튼 추가 (남성/여성)
- 생년월일 필드 추가 (캘린더 아이콘 포함)
- 이메일 인증번호 전송 버튼 추가
- Figma 디자인 색상 및 스타일 반영
- 단계 표시 UI 개선 (약관 동의 → 회원정보입력 → 회원가입완료)

.cursor/work/loginpagework.md

@@ -1,4 +1,6 @@
-# 로그인 페이지 작업 리스트
-0. [x] 로그인 페이지 생성
-1. [ ] dffd
-2. [ ] df df
+1. 네비게이션바
+    -
+2. fo
+    - oter
+2. 메인을 플렉스로 vertical방향으로 3개로 구분
+    - 

app/register/page.tsx

@@ -10,6 +10,9 @@ export default function RegisterPage() {
     password: '',
     passwordConfirm: '',
     phone: '',
+    gender: 'male',
+    birthDate: '',
+    verificationCode: '',
   });
 
   const [errors, setErrors] = useState({
@@ -18,6 +21,8 @@ export default function RegisterPage() {
     password: '',
     passwordConfirm: '',
     phone: '',
+    birthDate: '',
+    verificationCode: '',
   });
 
   // 입력 필드 변경 핸들러
@@ -47,11 +52,11 @@ export default function RegisterPage() {
     return password.length >= 8 && /[a-zA-Z]/.test(password) && /[0-9]/.test(password);
   };
 
-  // 전화번호 유효성 검사
+  // 전화번호 유효성 검사 (하이픈 없이)
   const validatePhone = (phone: string) => {
     if (phone === '') return true; // 선택 항목
-    const phoneRegex = /^010-\d{4}-\d{4}$/;
-    return phoneRegex.test(phone);
+    const phoneRegex = /^010\d{8}$/;
+    return phoneRegex.test(phone.replace(/[^\d]/g, ''));
   };
 
   // 폼 제출 전 유효성 검사
@@ -101,31 +106,50 @@ export default function RegisterPage() {
 
     // 전화번호 검사 (선택 항목)
     if (formData.phone && !validatePhone(formData.phone)) {
-      newErrors.phone = '올바른 전화번호 형식이 아닙니다. (예: 010-1234-5678)';
+      newErrors.phone = '올바른 전화번호 형식이 아닙니다. (예: 01012345678)';
       isValid = false;
     }
 
-    setErrors(newErrors);
+    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);
     
-    if (value.length > 7) {
-      value = value.slice(0, 3) + '-' + value.slice(3, 7) + '-' + value.slice(7);
-    } else if (value.length > 3) {
-      value = value.slice(0, 3) + '-' + value.slice(3);
-    }
-    
     setFormData((prev) => ({
       ...prev,
       phone: value,
     }));
   };
 
+  // 인증번호 전송 핸들러
+  const handleSendVerificationCode = () => {
+    if (!formData.email || !validateEmail(formData.email)) {
+      setErrors((prev) => ({
+        ...prev,
+        email: '올바른 이메일을 입력해주세요.',
+      }));
+      return;
+    }
+    // TODO: 인증번호 전송 API 호출
+    alert('인증번호가 전송되었습니다.');
+  };
+
+  // 생년월일 핸들러
+  const handleBirthDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData((prev) => ({
+      ...prev,
+      birthDate: e.target.value,
+    }));
+  };
+
   // 폼 제출 핸들러
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -144,171 +168,241 @@ export default function RegisterPage() {
     formData.passwordConfirm !== '';
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-white">
-      <div className="w-full max-w-2xl px-4">
-        {/* 회원가입 카드 */}
-        <div className="bg-white rounded-lg shadow-lg p-8">
-          {/* 제목 */}
-          <h1 className="text-2xl font-bold text-center mb-8">회원가입</h1>
+    <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="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 items-center justify-center mb-8 text-sm">
-            <div className="flex items-center">
-              <span className="px-3 py-1 text-gray-500">01 약관 동의</span>
-              <span className="mx-2 text-gray-400">&gt;</span>
-              <span className="px-3 py-1 bg-blue-500 text-white rounded-md font-semibold">
-                02 회원정보입력
-              </span>
-              <span className="mx-2 text-gray-400">&gt;</span>
-              <span className="px-3 py-1 text-gray-500">03 회원가입완료</span>
+        {/* 단계 표시 */}
+        <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>
 
-          {/* 회원정보 입력 폼 */}
-          <form onSubmit={handleSubmit} className="space-y-4">
-            {/* 이름 */}
-            <div>
-              <label htmlFor="name" className="block text-sm font-medium mb-1">
-                이름 <span className="text-red-500">*</span>
-              </label>
-              <input
-                type="text"
-                id="name"
-                name="name"
-                value={formData.name}
-                onChange={handleChange}
-                className={`w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 ${
-                  errors.name
-                    ? 'border-red-500 focus:ring-red-500'
-                    : 'border-gray-300 focus:ring-blue-500'
-                }`}
-                placeholder="이름을 입력하세요"
-              />
-              {errors.name && (
-                <p className="mt-1 text-sm text-red-500">{errors.name}</p>
-              )}
-            </div>
+        {/* 회원정보 입력 폼 */}
+        <form onSubmit={handleSubmit} className="flex flex-col gap-6 items-start w-full">
+          {/* 이름 */}
+          <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]">
+              이름
+            </label>
+            <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]`}
+              placeholder="이름을 입력해 주세요."
+            />
+            {errors.name && (
+              <p className="text-sm text-red-500">{errors.name}</p>
+            )}
+          </div>
 
-            {/* 이메일 */}
-            <div>
-              <label htmlFor="email" className="block text-sm font-medium mb-1">
-                이메일 <span className="text-red-500">*</span>
-              </label>
+          {/* 휴대폰 */}
+          <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]">
+              휴대폰
+            </label>
+            <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]`}
+              placeholder="-없이 입력해 주세요."
+              maxLength={11}
+            />
+            {errors.phone && (
+              <p className="text-sm text-red-500">{errors.phone}</p>
+            )}
+          </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">
               <input
                 type="email"
                 id="email"
                 name="email"
                 value={formData.email}
                 onChange={handleChange}
-                className={`w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 ${
+                className={`flex-1 h-10 px-3 py-2 border rounded-lg bg-white ${
                   errors.email
-                    ? 'border-red-500 focus:ring-red-500'
-                    : 'border-gray-300 focus:ring-blue-500'
-                }`}
-                placeholder="이메일을 입력하세요"
+                    ? 'border-red-500'
+                    : 'border-[#dee1e6]'
+                } focus:outline-none focus:ring-2 focus:ring-[#1f2b91]`}
+                placeholder="이메일을 입력해 주세요."
               />
-              {errors.email && (
-                <p className="mt-1 text-sm text-red-500">{errors.email}</p>
-              )}
-            </div>
-
-            {/* 비밀번호 */}
-            <div>
-              <label htmlFor="password" className="block text-sm font-medium mb-1">
-                비밀번호 <span className="text-red-500">*</span>
-              </label>
-              <input
-                type="password"
-                id="password"
-                name="password"
-                value={formData.password}
-                onChange={handleChange}
-                className={`w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 ${
-                  errors.password
-                    ? 'border-red-500 focus:ring-red-500'
-                    : 'border-gray-300 focus:ring-blue-500'
-                }`}
-                placeholder="8자 이상, 영문과 숫자 조합"
-              />
-              {errors.password && (
-                <p className="mt-1 text-sm text-red-500">{errors.password}</p>
-              )}
-            </div>
-
-            {/* 비밀번호 확인 */}
-            <div>
-              <label htmlFor="passwordConfirm" className="block text-sm font-medium mb-1">
-                비밀번호 확인 <span className="text-red-500">*</span>
-              </label>
-              <input
-                type="password"
-                id="passwordConfirm"
-                name="passwordConfirm"
-                value={formData.passwordConfirm}
-                onChange={handleChange}
-                className={`w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 ${
-                  errors.passwordConfirm
-                    ? 'border-red-500 focus:ring-red-500'
-                    : 'border-gray-300 focus:ring-blue-500'
-                }`}
-                placeholder="비밀번호를 다시 입력하세요"
-              />
-              {errors.passwordConfirm && (
-                <p className="mt-1 text-sm text-red-500">{errors.passwordConfirm}</p>
-              )}
-            </div>
-
-            {/* 전화번호 */}
-            <div>
-              <label htmlFor="phone" className="block text-sm font-medium mb-1">
-                전화번호 <span className="text-gray-500 text-xs">(선택)</span>
-              </label>
-              <input
-                type="text"
-                id="phone"
-                name="phone"
-                value={formData.phone}
-                onChange={handlePhoneChange}
-                className={`w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 ${
-                  errors.phone
-                    ? 'border-red-500 focus:ring-red-500'
-                    : 'border-gray-300 focus:ring-blue-500'
-                }`}
-                placeholder="010-1234-5678"
-                maxLength={13}
-              />
-              {errors.phone && (
-                <p className="mt-1 text-sm text-red-500">{errors.phone}</p>
-              )}
-            </div>
-
-            {/* 버튼 영역 */}
-            <div className="mt-8 flex space-x-4">
-              <Link
-                href="/registeragreement"
-                className="flex-1 py-3 bg-gray-200 text-gray-700 rounded-md text-center hover:bg-gray-300 transition font-medium"
-              >
-                이전 단계
-              </Link>
               <button
-                type="submit"
-                disabled={!canProceed}
-                className={`flex-1 py-3 rounded-md font-medium transition ${
-                  canProceed
-                    ? 'bg-blue-500 text-white hover:bg-blue-600'
-                    : 'bg-gray-300 text-gray-500 cursor-not-allowed'
-                }`}
+                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]"
               >
-                가입하기
+                인증번호 전송
               </button>
             </div>
-          </form>
-        </div>
+            {errors.email && (
+              <p className="text-sm text-red-500">{errors.email}</p>
+            )}
+          </div>
 
-        {/* 카피라이트 */}
-        <div className="mt-8 text-center text-sm text-gray-500">
-          Copyright © 2025 XL LMS. All rights reserved
-        </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]">
+              비밀번호
+            </label>
+            <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]`}
+              placeholder="8~16자의 영문/숫자/특수문자를 조합해서 입력해 주세요."
+            />
+            {errors.password && (
+              <p className="text-sm text-red-500">{errors.password}</p>
+            )}
+          </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]">
+              비밀번호 확인
+            </label>
+            <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]`}
+              placeholder="비밀번호를 다시 입력해 주세요."
+            />
+            {errors.passwordConfirm && (
+              <p className="text-sm text-red-500">{errors.passwordConfirm}</p>
+            )}
+          </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]">
+              성별
+            </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>
+            </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]">
+              생년월일
+            </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>
+            </div>
+            {errors.birthDate && (
+              <p className="text-sm text-red-500">{errors.birthDate}</p>
+            )}
+          </div>
+
+          {/* 버튼 영역 */}
+          <div className="flex gap-3 items-start w-full mt-4">
+            <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"
+            >
+              이전
+            </Link>
+            <button
+              type="submit"
+              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'
+              }`}
+            >
+              다음
+            </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>
     </div>
   );