0. [x] 로그인 페이지 생성

레이아웃 중앙 정렬 설정
    상단 로고 추가
    아이디 입력폼 추가
    한행에 아이디 기억하기 체크박스 추가
    한행에 자동로그인 체크박스 추가
    로그인 버튼 추가
    한행으로 회원가입 버튼, 아이디찾기 버튼, 비밀번호 재설정 버튼 추가
    최하단에 카피라이트 추가
This commit is contained in:
2025-10-29 21:38:55 +09:00
parent 1043717d46
commit 2cc57f8a3d
2 changed files with 88 additions and 9 deletions

80
app/login/page.tsx Normal file
View 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>
);
}