wallace/XRLMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: wallace:30353521a1d316416290f0dcbe9dee3c4d04d183
Branches Tags
wallace:main
...
compare: wallace:33d5d900fcbb4a59b8444f995943b03f7eee0c5e
Branches Tags
wallace:main

2 Commits
30353521a1 ... 33d5d900fc

Author SHA1 Message Date
wallace
33d5d900fc error define 2025-11-05 15:04:22 +09:00
wallace
6720653d3f feat: Figma 디자인 기반 회원가입 페이지 업데이트 
- 휴대폰 필드 추가 (하이픈 없이 입력)
- 성별 선택 라디오 버튼 추가 (남성/여성)
- 생년월일 필드 추가 (캘린더 아이콘 포함)
- 이메일 인증번호 전송 버튼 추가
- Figma 디자인 색상 및 스타일 반영
- 단계 표시 UI 개선 (약관 동의 → 회원정보입력 → 회원가입완료)
 2025-11-02 16:35:07 +09:00
2 changed files with 259 additions and 163 deletions
Expand all files Collapse all files

10
.cursor/work/loginpagework.md
View File

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

344
app/register/page.tsx
View File

@@ -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,32 +168,39 @@ 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">
<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]">
{/* 제목 */}
<h1 className="text-2xl font-bold text-center mb-8">회원가입</h1>
<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">
<form onSubmit={handleSubmit} className="flex flex-col gap-6 items-start w-full">
{/* 이름 */}
<div>
<label htmlFor="name" className="block text-sm font-medium mb-1">
이름 <span className="text-red-500">*</span>
<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"
@@ -177,91 +208,22 @@ export default function RegisterPage() {
name="name"
value={formData.name}
onChange={handleChange}
className={`w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 ${
className={`w-full h-10 px-3 py-2 border rounded-lg bg-white ${
errors.name
? '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.name && (
<p className="mt-1 text-sm text-red-500">{errors.name}</p>
<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>
<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 ${
errors.email
? 'border-red-500 focus:ring-red-500'
: 'border-gray-300 focus:ring-blue-500'
}`}
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>
{/* 휴대폰 */}
<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"
@@ -269,46 +231,178 @@ export default function RegisterPage() {
name="phone"
value={formData.phone}
onChange={handlePhoneChange}
className={`w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 ${
className={`w-full h-10 px-3 py-2 border rounded-lg bg-white ${
errors.phone
? 'border-red-500 focus:ring-red-500'
: 'border-gray-300 focus:ring-blue-500'
}`}
placeholder="010-1234-5678"
maxLength={13}
? 'border-red-500'
: 'border-[#dee1e6]'
} focus:outline-none focus:ring-2 focus:ring-[#1f2b91]`}
placeholder="-없이 입력해 주세요."
maxLength={11}
/>
{errors.phone && (
<p className="mt-1 text-sm text-red-500">{errors.phone}</p>
<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={`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]`}
placeholder="이메일을 입력해 주세요."
/>
<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]"
>
인증번호 전송
</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]">
비밀번호
</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="mt-8 flex space-x-4">
<div className="flex gap-3 items-start w-full mt-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"
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 py-3 rounded-md font-medium transition ${
className={`flex-1 h-14 px-2 py-0 rounded-xl font-semibold text-[18px] transition ${
canProceed
? 'bg-blue-500 text-white hover:bg-blue-600'
? 'bg-[#8598e8] text-white hover:bg-[#7588d7]'
: 'bg-gray-300 text-gray-500 cursor-not-allowed'
}`}
>
가입하기
다음
</button>
</div>
</form>
</div>
{/* 카피라이트 */}
<div className="mt-8 text-center text-sm text-gray-500">
Copyright © 2025 XL LMS. All rights reserved
</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>
);