motaju/xrlms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

로그인페이지

Browse Source
This commit is contained in:
koreacomp5
2025-11-17 22:51:23 +09:00
parent eca3e76c72
commit 78b7cc2d3c
5 changed files with 673 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/app/login/page.tsx
View File

@@ -12,21 +12,20 @@ export default function LoginPage() {
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
// TODO: 실제 인증 연동 시 이곳에서 처리
// 현재는 UI만 구현
/* todo */
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 bg-white p-8 ">
<div className="min-h-screen w-full flex flex-col items-center justify-between">
<div></div>
<div className="rounded-xl bg-white max-w-[560px] px-[40px] w-full">
{/* 로고 영역 */}
<div className="mb-10 flex flex-col items-center">
<div className="my-10 flex flex-col items-center">
<div className="mb-[7px]">
<MainLogo/>
</div>
<div className="text-[28.8px] font-[800] leading-[145%] text-neutral-700" >
<div className="text-[28.8px] font-extrabold leading-[145%] text-neutral-700" >
XR LMS
</div>
</div>
@@ -45,13 +44,12 @@ export default function LoginPage() {
value={userId}
onChange={(e) => setUserId(e.target.value)}
placeholder="아이디 (이메일)"
className="w-[480px] h-[56px] px-[12px] py-[7px] rounded-[8px] border border-neutral-40
className="
h-[56px] px-[12px] py-[7px] w-full rounded-[8px] border border-neutral-40
focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none
focus:appearance-none focus:border-neutral-700
text-[18px] text-neutral-700 font-[400] leading-[150%] placeholder:text-input-placeholder-text "
text-[18px] text-neutral-700 font-normal leading-[150%] placeholder:text-input-placeholder-text
"
/>
</div>
{/* 비밀번호 */}
@@ -66,38 +64,35 @@ export default function LoginPage() {
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"
className="
h-[56px] px-[12px] py-[7px] rounded-[8px] w-full border border-neutral-40
focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none
focus:appearance-none focus:border-neutral-700
text-[18px] text-neutral-700 font-normal leading-[150%] placeholder:text-input-placeholder-text
"
/>
</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)" }}>
<label className="flex cursor-pointer select-none items-center gap-2 text-[15px] font-normal text-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)",
}}
className="h-[18px] w-[18px] cursor-pointer rounded border
accent-input-border-select border-inactive-checkbox"
/>
아이디 기억하기
</label>
<label className="flex cursor-pointer select-none items-center gap-2 text-[15px]"
style={{ color: "var(--color-basic-text)" }}>
<label className="flex cursor-pointer select-none items-center gap-2 text-[15px] font-normal text-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)",
}}
className="h-[18px] w-[18px] cursor-pointer rounded border
accent-input-border-select border-inactive-checkbox"
/>
자동 로그인
</label>
@@ -106,8 +101,7 @@ export default function LoginPage() {
{/* 로그인 버튼 */}
<button
type="submit"
className="h-14 w-full rounded-lg text-[16px] font-semibold text-white transition-opacity cursor-pointer"
style={{ backgroundColor: "var(--color-active-button)" }}
className="h-14 w-full rounded-lg text-[16px] font-semibold text-white transition-opacity cursor-pointer bg-inactive-button"
>
로그인
</button>
@@ -115,33 +109,27 @@ export default function LoginPage() {
{/* 하단 링크들 */}
<div className="flex items-center justify-between text-[15px]">
<Link
href="#"
className="underline-offset-2 hover:underline"
style={{ color: "var(--color-basic-text)" }}
href="/register"
className="underline-offset-2 text-basic-text"
>
회원가입
</Link>
<div
className="flex items-center gap-3"
style={{ color: "var(--color-basic-text)" }}
className="flex items-center gap-3 text-basic-text"
>
<Link href="#" className="underline-offset-2 hover:underline">
<Link href="#" className="underline-offset-2">
아이디 찾기
</Link>
<span className="h-3 w-px bg-[var(--color-input-border)]" />
<Link href="#" className="underline-offset-2 hover:underline">
<span className="h-3 w-px bg-input-border" />
<Link href="#" className="underline-offset-2">
비밀번호 재설정
</Link>
</div>
</div>
</form>
</div>
{/* 카피라이트 */}
<p
className="mt-10 text-center text-[15px]"
style={{ color: "var(--color-basic-text)" }}
>
<div></div>
<p className="text-center py-[40px] text-[15px] text-basic-text">
Copyright ⓒ 2025 XL LMS. All rights reserved
</p>
</div>