가입 동의 화면
This commit is contained in:
171
app/registeragreement/page.tsx
Normal file
171
app/registeragreement/page.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function RegisterAgreementPage() {
|
||||
const [allAgreed, setAllAgreed] = useState(false);
|
||||
const [ageAgreed, setAgeAgreed] = useState(false);
|
||||
const [termsAgreed, setTermsAgreed] = useState(false);
|
||||
const [privacyAgreed, setPrivacyAgreed] = useState(false);
|
||||
|
||||
// 전체 동의 핸들러
|
||||
const handleAllAgreed = (checked: boolean) => {
|
||||
setAllAgreed(checked);
|
||||
setAgeAgreed(checked);
|
||||
setTermsAgreed(checked);
|
||||
setPrivacyAgreed(checked);
|
||||
};
|
||||
|
||||
// 개별 체크박스 변경 시 전체 동의 상태 업데이트
|
||||
const updateAllAgreed = () => {
|
||||
if (ageAgreed && termsAgreed && privacyAgreed) {
|
||||
setAllAgreed(true);
|
||||
} else {
|
||||
setAllAgreed(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 개별 체크박스 핸들러
|
||||
const handleAgeAgreed = (checked: boolean) => {
|
||||
setAgeAgreed(checked);
|
||||
updateAllAgreed();
|
||||
};
|
||||
|
||||
const handleTermsAgreed = (checked: boolean) => {
|
||||
setTermsAgreed(checked);
|
||||
updateAllAgreed();
|
||||
};
|
||||
|
||||
const handlePrivacyAgreed = (checked: boolean) => {
|
||||
setPrivacyAgreed(checked);
|
||||
updateAllAgreed();
|
||||
};
|
||||
|
||||
// 다음 단계 진행 가능 여부
|
||||
const canProceed = ageAgreed && termsAgreed && privacyAgreed;
|
||||
|
||||
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="flex items-center justify-center mb-8 text-sm">
|
||||
<div className="flex items-center">
|
||||
<span className="px-3 py-1 bg-blue-500 text-white rounded-md font-semibold">
|
||||
01 약관 동의
|
||||
</span>
|
||||
<span className="mx-2 text-gray-400">></span>
|
||||
<span className="px-3 py-1 text-gray-500">02 회원정보입력</span>
|
||||
<span className="mx-2 text-gray-400">></span>
|
||||
<span className="px-3 py-1 text-gray-500">03 회원가입완료</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 약관 동의 섹션 */}
|
||||
<div className="space-y-4">
|
||||
{/* 전체 동의 */}
|
||||
<div className="pb-4 border-b border-gray-300">
|
||||
<label className="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={allAgreed}
|
||||
onChange={(e) => handleAllAgreed(e.target.checked)}
|
||||
className="w-5 h-5 mr-3 text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="text-base font-medium">모든 항목에 동의합니다.</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* 개별 약관 */}
|
||||
<div className="space-y-4">
|
||||
{/* 만 14세 이상 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="flex items-center cursor-pointer flex-1">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={ageAgreed}
|
||||
onChange={(e) => handleAgeAgreed(e.target.checked)}
|
||||
className="w-5 h-5 mr-3 text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="text-sm">
|
||||
만 14세 이상입니다. <span className="text-red-500">(필수)</span>
|
||||
</span>
|
||||
</label>
|
||||
<button className="text-sm text-gray-500 hover:text-gray-700">
|
||||
전체 >
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 이용 약관 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="flex items-center cursor-pointer flex-1">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={termsAgreed}
|
||||
onChange={(e) => handleTermsAgreed(e.target.checked)}
|
||||
className="w-5 h-5 mr-3 text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="text-sm">
|
||||
이용 약관 동의 <span className="text-red-500">(필수)</span>
|
||||
</span>
|
||||
</label>
|
||||
<button className="text-sm text-gray-500 hover:text-gray-700">
|
||||
전체 >
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 개인정보 수집 및 이용 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="flex items-center cursor-pointer flex-1">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={privacyAgreed}
|
||||
onChange={(e) => handlePrivacyAgreed(e.target.checked)}
|
||||
className="w-5 h-5 mr-3 text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="text-sm">
|
||||
개인정보 수집 및 이용 동의 <span className="text-red-500">(필수)</span>
|
||||
</span>
|
||||
</label>
|
||||
<button className="text-sm text-gray-500 hover:text-gray-700">
|
||||
전체 >
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 버튼 영역 */}
|
||||
<div className="mt-8 flex space-x-4">
|
||||
<Link
|
||||
href="/login"
|
||||
className="flex-1 py-3 bg-gray-200 text-gray-700 rounded-md text-center hover:bg-gray-300 transition font-medium"
|
||||
>
|
||||
돌아가기
|
||||
</Link>
|
||||
<button
|
||||
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'
|
||||
}`}
|
||||
>
|
||||
동의 후 가입하기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 카피라이트 */}
|
||||
<div className="mt-8 text-center text-sm text-gray-500">
|
||||
Copyright © 2025 XL LMS. All rights reserved
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user