wallace
30353521a1
- 회원가입 약관 동의 페이지 추가 (registeragreement) - 회원가입 정보 입력 페이지 추가 (register) - 유효성 검사 기능 포함 - 비밀번호 강도 검증 - 전화번호 자동 포맷팅 - 회원가입 완료 페이지 추가 (registercomplete) - 테마 컬러 변수 5개 정의 (primary, secondary, success, error, neutral) - 로그인 페이지에서 회원가입 링크 연결 - 홈페이지 헤더에 회원가입 링크 추가 - 전체 회원가입 플로우 페이지 간 네비게이션 연결 완료
86 lines
2.8 KiB
TypeScript
86 lines
2.8 KiB
TypeScript
import Link from 'next/link';
|
|
|
|
export default function LoginPage() {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center">
|
|
<div className="w-full max-w-md">
|
|
{/* 상단 로고 */}
|
|
<div className="mb-8 text-center">
|
|
<h1 className="text-2xl font-bold">Logo</h1>
|
|
</div>
|
|
|
|
{/* 로그인 폼 */}
|
|
<form className="space-y-4">
|
|
{/* 아이디 입력폼 */}
|
|
<div>
|
|
<label htmlFor="username" className="block text-sm font-medium mb-1">
|
|
아이디
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
placeholder="아이디(이메일)"
|
|
/>
|
|
</div>
|
|
|
|
{/* 비밀번호 입력폼 */}
|
|
<div>
|
|
<label htmlFor="password" className="block text-sm font-medium mb-1">
|
|
비밀번호
|
|
</label>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
placeholder="비밀번호를 입력하세요"
|
|
/>
|
|
</div>
|
|
|
|
{/* 체크박스 */}
|
|
<div className="flex items-center space-x-4">
|
|
<label className="flex items-center">
|
|
<input type="checkbox" className="mr-2" />
|
|
<span className="text-sm">아이디 기억하기</span>
|
|
</label>
|
|
<label className="flex items-center">
|
|
<input type="checkbox" className="mr-2" />
|
|
<span className="text-sm">자동로그인</span>
|
|
</label>
|
|
</div>
|
|
|
|
{/* 로그인 버튼 */}
|
|
<button
|
|
type="submit"
|
|
className="w-full py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
로그인
|
|
</button>
|
|
</form>
|
|
|
|
{/* 하단 링크 버튼들 */}
|
|
<div className="mt-4 flex justify-center space-x-4">
|
|
<Link
|
|
href="/registeragreement"
|
|
className="text-sm text-gray-600 hover:text-gray-800"
|
|
>
|
|
회원가입
|
|
</Link>
|
|
<button className="text-sm text-gray-600 hover:text-gray-800">
|
|
아이디찾기
|
|
</button>
|
|
<button className="text-sm text-gray-600 hover:text-gray-800">
|
|
비밀번호 재설정
|
|
</button>
|
|
</div>
|
|
|
|
{/* 카피라이트 */}
|
|
<div className="mt-8 text-center text-sm text-gray-500">
|
|
© 2024 XR LMS. All rights reserved.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|