0. [x] 로그인 페이지 생성
레이아웃 중앙 정렬 설정
상단 로고 추가
아이디 입력폼 추가
한행에 아이디 기억하기 체크박스 추가
한행에 자동로그인 체크박스 추가
로그인 버튼 추가
한행으로 회원가입 버튼, 아이디찾기 버튼, 비밀번호 재설정 버튼 추가
최하단에 카피라이트 추가
This commit is contained in:
@@ -1,12 +1,11 @@
|
|||||||
# 로그인 페이지 작업 리스트
|
# 로그인 페이지 작업 리스트
|
||||||
0. [x] 로그인 페이지 생성
|
0. [x] 로그인 페이지 생성
|
||||||
1. [ ] 레이아웃 중앙 정렬 설정
|
레이아웃 중앙 정렬 설정
|
||||||
2. [ ] 상단 로고 추가
|
상단 로고 추가
|
||||||
3. [ ] 아이디 입력폼 추가
|
아이디 입력폼 추가
|
||||||
4. [ ] 비밀번호 입력폼 추가
|
한행에 아이디 기억하기 체크박스 추가
|
||||||
5. [ ] 한행에 아이디 기억하기 체크박스 추가
|
한행에 자동로그인 체크박스 추가
|
||||||
6. [ ] 한행에 자동로그인 체크박스 추가
|
로그인 버튼 추가
|
||||||
7. [ ] 로그인 버튼 추가
|
한행으로 회원가입 버튼, 아이디찾기 버튼, 비밀번호 재설정 버튼 추가
|
||||||
8. [ ] 한행으로 회원가입 버튼, 아이디찾기 버튼, 비밀번호 재설정 버튼 추가
|
최하단에 카피라이트 추가
|
||||||
9. [ ] 최하단에 카피라이트 추가
|
|
||||||
|
|
||||||
|
|||||||
80
app/login/page.tsx
Normal file
80
app/login/page.tsx
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
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">
|
||||||
|
<button className="text-sm text-gray-600 hover:text-gray-800">
|
||||||
|
회원가입
|
||||||
|
</button>
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
Reference in New Issue
Block a user