회원가입 폼 수정1
This commit is contained in:
@@ -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]">
|
||||
{/* 이름 */}
|
||||
<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.name ? 'border-red-500' : 'border-[#b9b9b9]'}`}>
|
||||
<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 gap-[16px] items-center h-[41px]">
|
||||
<span className="text-[#515151] text-[18px] font-medium w-[177px]">
|
||||
이름
|
||||
</span>
|
||||
<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]">
|
||||
<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]'}`}>
|
||||
{/* 휴대폰 */}
|
||||
<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}
|
||||
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]">
|
||||
<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]`}>
|
||||
{/* 이메일(아이디) + 인증번호 발송 */}
|
||||
<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="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]"
|
||||
>
|
||||
<p className="font-medium text-[18px] text-white text-center">
|
||||
<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]"
|
||||
>
|
||||
인증번호 발송
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{errors.email && (
|
||||
<p className="text-[13px] text-[#E85D5D] ml-[193px]">{errors.email}</p>
|
||||
)}
|
||||
|
||||
{/* 비밀번호 */}
|
||||
<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]'}`}>
|
||||
{/* 비밀번호 */}
|
||||
<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 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]">
|
||||
<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]'}`}>
|
||||
{/* 비밀번호 확인 */}
|
||||
<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 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]">
|
||||
<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')}>
|
||||
<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 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]">
|
||||
<p className="font-medium text-[#515151] text-[18px] leading-normal w-[177px]">
|
||||
생년월일
|
||||
</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 className="flex gap-[16px] items-center h-[41px]">
|
||||
<span className="text-[#515151] text-[18px] font-medium w-[177px]">
|
||||
생년월일
|
||||
</span>
|
||||
<div className="flex gap-[8px] flex-1">
|
||||
<div className="relative flex-1">
|
||||
<select
|
||||
name="birthYear"
|
||||
value={formData.birthYear}
|
||||
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(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="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 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>
|
||||
<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 className="relative flex-1">
|
||||
<select
|
||||
name="birthDay"
|
||||
value={formData.birthDay}
|
||||
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(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="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 className="mt-[46px] w-[829px] border border-[#b9b9b9] rounded-[8px] h-[221px] relative">
|
||||
<div className="px-[31px] py-[29px]">
|
||||
{/* 전체동의 */}
|
||||
<div
|
||||
className="flex items-center gap-[16px] cursor-pointer select-none mb-[17px]"
|
||||
onClick={() => handleAgreementChange('all')}
|
||||
>
|
||||
<img
|
||||
src={imgRiCheckboxCircleLine}
|
||||
alt=""
|
||||
className={`w-[24px] h-[24px] ${agreements.all ? 'opacity-100' : 'opacity-50'}`}
|
||||
/>
|
||||
<span className="font-bold text-[20px] text-[#515151]">
|
||||
모든 항목에 동의합니다.
|
||||
</span>
|
||||
</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]">
|
||||
<div className="flex items-center gap-[16px] cursor-pointer" onClick={() => handleAgreementChange('age14')}>
|
||||
<img
|
||||
src={imgRiCheckboxCircleLine}
|
||||
alt=""
|
||||
className={`w-[24px] h-[24px] ${agreements.age14 ? 'opacity-100' : 'opacity-50'}`}
|
||||
/>
|
||||
<span className="text-[#515151] text-[16px] font-medium 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>
|
||||
</span>
|
||||
</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="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]">
|
||||
<div className="flex items-center gap-[16px] cursor-pointer" onClick={() => handleAgreementChange('terms')}>
|
||||
<img
|
||||
src={imgRiCheckboxCircleLine}
|
||||
alt=""
|
||||
className={`w-[24px] h-[24px] ${agreements.terms ? 'opacity-100' : 'opacity-50'}`}
|
||||
/>
|
||||
<span className="text-[#515151] text-[16px] font-medium 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>
|
||||
</span>
|
||||
</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="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]">
|
||||
<div className="flex items-center gap-[16px] cursor-pointer" onClick={() => handleAgreementChange('privacy')}>
|
||||
<img
|
||||
src={imgRiCheckboxCircleLine}
|
||||
alt=""
|
||||
className={`w-[24px] h-[24px] ${agreements.privacy ? 'opacity-100' : 'opacity-50'}`}
|
||||
/>
|
||||
<span className="text-[#515151] text-[16px] font-medium 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>
|
||||
</span>
|
||||
</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] 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
|
||||
? 'bg-[#2b82e8] hover:bg-[#1669ca]'
|
||||
: 'bg-[#b9b9b9] cursor-not-allowed'
|
||||
className={`rounded-[10px] h-[55px] w-[334px] font-medium text-[18px] transition flex items-center justify-center
|
||||
${canProceed
|
||||
? '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">
|
||||
<p className="font-medium text-[16px] text-[rgba(0,0,0,0.55)] leading-[1.45] tracking-[-0.08px]">
|
||||
<footer className="absolute bottom-[89.5px] left-1/2 -translate-x-1/2 flex flex-col items-center">
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user