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-18 01:37:56 +09:00
parent 78b7cc2d3c
commit 851fec4096
5 changed files with 188 additions and 628 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,25 +3,48 @@
import { useState } from "react";
import Link from "next/link";
import MainLogo from "@/app/svgs/mainlogosvg"
import LoginCheckboxActiveSvg from "@/app/svgs/logincheckboxactivesvg";
import LoginCheckboxInactiveSvg from "@/app/svgs/logincheckboxinactivesvg";
import LoginInputSvg from "@/app/svgs/inputformx";
import LoginErrorModal from "./LoginErrorModal";
import LoginOption from "@/app/login/loginoption";
export default function LoginPage() {
const [userId, setUserId] = useState("");
const [password, setPassword] = useState("");
const [rememberId, setRememberId] = useState(false);
const [autoLogin, setAutoLogin] = useState(false);
const [isUserIdFocused, setIsUserIdFocused] = useState(false);
const [isPasswordFocused, setIsPasswordFocused] = useState(false);
const [isLoginErrorOpen, setIsLoginErrorOpen] = useState(false);
const [idError, setIdError] = useState("");
const [passwordError, setPasswordError] = useState("");
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
/* todo */
console.log({ userId, password, rememberId, autoLogin });
// 실제 로그인 API 연동 전까지는 실패 모달을 노출합니다.
// API 연동 시 결과에 따라 성공/실패 분기에서 setIsLoginErrorOpen(true) 호출로 교체하세요.
// if (userId.trim().length > 0 && password.trim().length > 0) {
// setIsLoginErrorOpen(true);
// }
}
return (
<div className="min-h-screen w-full flex flex-col items-center justify-between">
<div></div>
<LoginErrorModal
open={isLoginErrorOpen}
onClose={() => setIsLoginErrorOpen(false)}
/>
<LoginOption
onClick={() => setIsLoginErrorOpen(true)}
loginErrorModalEnabled={isLoginErrorOpen}
setLoginErrorModalEnabled={setIsLoginErrorOpen}
/>
<div className="rounded-xl bg-white max-w-[560px] px-[40px] w-full">
{/* 로고 영역 */}
<div className="my-10 flex flex-col items-center">
<div className="my-15 flex flex-col items-center">
<div className="mb-[7px]">
<MainLogo/>
</div>
@@ -31,10 +54,10 @@ export default function LoginPage() {
</div>
{/* 폼 */}
<form onSubmit={handleSubmit} className="space-y-6">
<form onSubmit={handleSubmit} className="space-y-5">
<div className="space-y-4">
{/* 아이디 */}
<div>
<div className="relative">
<label htmlFor="userId" className="sr-only">
아이디
</label>
@@ -43,17 +66,33 @@ export default function LoginPage() {
name="userId"
value={userId}
onChange={(e) => setUserId(e.target.value)}
onFocus={() => setIsUserIdFocused(true)}
onBlur={() => setIsUserIdFocused(false)}
placeholder="아이디 (이메일)"
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-normal leading-[150%] placeholder:text-input-placeholder-text
pr-[40px]
"
/>
{userId.trim().length > 0 && isUserIdFocused && (
<button
type="button"
onMouseDown={(e) => {
e.preventDefault();
setUserId("");
}}
aria-label="입력 지우기"
className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer"
>
<LoginInputSvg />
</button>
)}
</div>
{/* 비밀번호 */}
<div>
<div className="relative">
<label htmlFor="password" className="sr-only">
비밀번호
</label>
@@ -63,27 +102,47 @@ export default function LoginPage() {
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
onFocus={() => setIsPasswordFocused(true)}
onBlur={() => setIsPasswordFocused(false)}
placeholder="비밀번호"
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
pr-[40px]
"
/>
{password.trim().length > 0 && isPasswordFocused && (
<button
type="button"
onMouseDown={(e) => {
e.preventDefault();
setPassword("");
}}
aria-label="입력 지우기"
className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer"
>
<LoginInputSvg />
</button>
)}
</div>
</div>
{/* 체크박스들 */}
<div className="flex items-center justify-start gap-6">
<div className="flex items-center justify-start gap-6 mb-15">
<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
accent-input-border-select border-inactive-checkbox"
className="sr-only"
/>
{rememberId ? (
<LoginCheckboxActiveSvg />
) : (
<LoginCheckboxInactiveSvg />
)}
아이디 기억하기
</label>
<label className="flex cursor-pointer select-none items-center gap-2 text-[15px] font-normal text-basic-text">
@@ -91,9 +150,13 @@ export default function LoginPage() {
type="checkbox"
checked={autoLogin}
onChange={(e) => setAutoLogin(e.target.checked)}
className="h-[18px] w-[18px] cursor-pointer rounded border
accent-input-border-select border-inactive-checkbox"
className="sr-only"
/>
{autoLogin ? (
<LoginCheckboxActiveSvg />
) : (
<LoginCheckboxInactiveSvg />
)}
자동 로그인
</label>
</div>
@@ -101,16 +164,16 @@ export default function LoginPage() {
{/* 로그인 버튼 */}
<button
type="submit"
className="h-14 w-full rounded-lg text-[16px] font-semibold text-white transition-opacity cursor-pointer bg-inactive-button"
className={`h-14 w-full rounded-lg text-[16px] font-semibold text-white transition-opacity cursor-pointer mb-3 ${userId.trim().length > 0 && password.trim().length > 0 ? "bg-active-button" : "bg-inactive-button"}`}
>
로그인
</button>
{/* 하단 링크들 */}
<div className="flex items-center justify-between text-[15px]">
<div className="flex items-center justify-between text-[15px] leading-[150%] h-[36px]">
<Link
href="/register"
className="underline-offset-2 text-basic-text"
className="underline-offset-2 text-basic-text font-bold"
>
회원가입
</Link>