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