login page 기본
This commit is contained in:
koreacomp5
176
src/app/login/page.tsx
Normal file
176
src/app/login/page.tsx
Normal file
@@ -0,0 +1,176 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function LoginPage() {
|
||||
const [userId, setUserId] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [rememberId, setRememberId] = useState(false);
|
||||
const [autoLogin, setAutoLogin] = useState(false);
|
||||
|
||||
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
// TODO: 실제 인증 연동 시 이곳에서 처리
|
||||
// 현재는 UI만 구현
|
||||
console.log({ userId, password, rememberId, autoLogin });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen w-full flex flex-col items-center justify-center">
|
||||
{/* 카드 컨테이너 */}
|
||||
<div className="w-[480px] rounded-xl border border-[var(--color-input-border)] bg-white p-8 shadow-sm">
|
||||
{/* 로고 영역 */}
|
||||
<div className="mb-10 flex flex-col items-center">
|
||||
<div className="mb-2 flex h-[54px] w-[72px] items-center justify-center rounded-md bg-[var(--color-inactive-button)]/20" />
|
||||
<div
|
||||
className="text-[28px] font-semibold leading-none"
|
||||
style={{ color: "var(--color-logo-text)" }}
|
||||
>
|
||||
XR LMS
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 폼 */}
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
{/* 아이디 */}
|
||||
<div>
|
||||
<label htmlFor="userId" className="sr-only">
|
||||
아이디
|
||||
</label>
|
||||
<input
|
||||
id="userId"
|
||||
name="userId"
|
||||
value={userId}
|
||||
onChange={(e) => setUserId(e.target.value)}
|
||||
placeholder="아이디"
|
||||
className="h-14 w-full rounded-lg border px-4 text-[15px] outline-none transition-shadow"
|
||||
style={{
|
||||
borderColor: "var(--color-input-border)",
|
||||
color: "var(--color-basic-text)",
|
||||
// placeholder 색상
|
||||
// Tailwind v4 arbitrary 적용이 번거로워 인라인 사용
|
||||
}}
|
||||
onFocus={(e) => {
|
||||
e.currentTarget.style.boxShadow =
|
||||
"0 0 0 2px rgba(51,60,71,0.15)";
|
||||
e.currentTarget.style.borderColor =
|
||||
"var(--color-input-border-select)";
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
e.currentTarget.style.boxShadow = "none";
|
||||
e.currentTarget.style.borderColor =
|
||||
"var(--color-input-border)";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{/* 비밀번호 */}
|
||||
<div>
|
||||
<label htmlFor="password" className="sr-only">
|
||||
비밀번호
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="비밀번호"
|
||||
className="h-14 w-full rounded-lg border px-4 text-[15px] outline-none transition-shadow"
|
||||
style={{
|
||||
borderColor: "var(--color-input-border)",
|
||||
color: "var(--color-basic-text)",
|
||||
}}
|
||||
onFocus={(e) => {
|
||||
e.currentTarget.style.boxShadow =
|
||||
"0 0 0 2px rgba(51,60,71,0.15)";
|
||||
e.currentTarget.style.borderColor =
|
||||
"var(--color-input-border-select)";
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
e.currentTarget.style.boxShadow = "none";
|
||||
e.currentTarget.style.borderColor =
|
||||
"var(--color-input-border)";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 체크박스들 */}
|
||||
<div className="flex items-center justify-start gap-6">
|
||||
<label className="flex cursor-pointer select-none items-center gap-2 text-[15px]"
|
||||
style={{ color: "var(--color-basic-text)" }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={rememberId}
|
||||
onChange={(e) => setRememberId(e.target.checked)}
|
||||
className="h-[18px] w-[18px] cursor-pointer rounded border"
|
||||
style={{
|
||||
accentColor: "var(--color-input-border-select)",
|
||||
borderColor: "var(--color-inactive-checkbox)",
|
||||
}}
|
||||
/>
|
||||
아이디 기억하기
|
||||
</label>
|
||||
<label className="flex cursor-pointer select-none items-center gap-2 text-[15px]"
|
||||
style={{ color: "var(--color-basic-text)" }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={autoLogin}
|
||||
onChange={(e) => setAutoLogin(e.target.checked)}
|
||||
className="h-[18px] w-[18px] cursor-pointer rounded border"
|
||||
style={{
|
||||
accentColor: "var(--color-input-border-select)",
|
||||
borderColor: "var(--color-inactive-checkbox)",
|
||||
}}
|
||||
/>
|
||||
자동 로그인
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* 로그인 버튼 */}
|
||||
<button
|
||||
type="submit"
|
||||
className="h-14 w-full rounded-lg text-[16px] font-semibold text-white transition-opacity"
|
||||
style={{ backgroundColor: "var(--color-active-button)" }}
|
||||
>
|
||||
로그인
|
||||
</button>
|
||||
|
||||
{/* 하단 링크들 */}
|
||||
<div className="flex items-center justify-between text-[15px]">
|
||||
<Link
|
||||
href="#"
|
||||
className="underline-offset-2 hover:underline"
|
||||
style={{ color: "var(--color-basic-text)" }}
|
||||
>
|
||||
회원가입
|
||||
</Link>
|
||||
<div
|
||||
className="flex items-center gap-3"
|
||||
style={{ color: "var(--color-basic-text)" }}
|
||||
>
|
||||
<Link href="#" className="underline-offset-2 hover:underline">
|
||||
아이디 찾기
|
||||
</Link>
|
||||
<span className="h-3 w-px bg-[var(--color-input-border)]" />
|
||||
<Link href="#" className="underline-offset-2 hover:underline">
|
||||
비밀번호 재설정
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* 카피라이트 */}
|
||||
<p
|
||||
className="mt-10 text-center text-[15px]"
|
||||
style={{ color: "var(--color-basic-text)" }}
|
||||
>
|
||||
Copyright ⓒ 2025 XL LMS. All rights reserved
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user