loginpage 반응형형
This commit is contained in:
wallace
@@ -3,7 +3,7 @@
|
||||
import { usePathname } from "next/navigation";
|
||||
import Footer from "./Footer";
|
||||
|
||||
const HIDE_FOOTER_PREFIXES = ["/pages"];
|
||||
const HIDE_FOOTER_PREFIXES = ["/pages", "/login"];
|
||||
|
||||
export default function FooterVisibility() {
|
||||
const pathname = usePathname();
|
||||
|
||||
@@ -160,8 +160,6 @@ export default function LoginPage() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="min-h-screen w-full flex flex-col items-center pt-[180px]">
|
||||
|
||||
<LoginErrorModal
|
||||
open={isLoginErrorOpen}
|
||||
onClose={() => {
|
||||
@@ -175,157 +173,160 @@ export default function LoginPage() {
|
||||
loginErrorModalEnabled={isLoginErrorOpen}
|
||||
setLoginErrorModalEnabled={setIsLoginErrorOpen}
|
||||
/>
|
||||
<div className="h-screen w-full flex flex-col overflow-hidden">
|
||||
{/* 메인 컨텐츠 영역 - flex-1로 남은 공간 차지 */}
|
||||
<div className="flex-1 flex items-center justify-center min-h-0">
|
||||
<div className="rounded-xl bg-white max-w-[560px] px-[40px] w-full my-auto">
|
||||
{/* 로고 영역 */}
|
||||
<div className="my-15 flex flex-col items-center">
|
||||
<div className="mb-[7px]">
|
||||
<MainLogo />
|
||||
</div>
|
||||
<div className="text-[28.8px] font-extrabold leading-[145%] text-neutral-700" >
|
||||
XR LMS
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl bg-white max-w-[560px] px-[40px] w-full">
|
||||
{/* 로고 영역 */}
|
||||
<div className="my-15 flex flex-col items-center">
|
||||
<div className="mb-[7px]">
|
||||
<MainLogo />
|
||||
</div>
|
||||
<div className="text-[28.8px] font-extrabold leading-[145%] text-neutral-700" >
|
||||
XR LMS
|
||||
{/* 폼 */}
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-4">
|
||||
{/* 아이디 */}
|
||||
<div className="relative">
|
||||
<label htmlFor="userId" className="sr-only">
|
||||
아이디
|
||||
</label>
|
||||
<input
|
||||
id="userId"
|
||||
name="userId"
|
||||
value={userId}
|
||||
onChange={(e) => {
|
||||
setUserId(e.target.value);
|
||||
if (idError) setIdError("");
|
||||
}}
|
||||
onFocus={() => setIsUserIdFocused(true)}
|
||||
onBlur={() => setIsUserIdFocused(false)}
|
||||
placeholder="아이디(이메일)"
|
||||
className={`h-[56px] px-[12px] py-[7px] w-full rounded-[8px] border focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none focus:appearance-none text-[18px] text-neutral-700 font-normal leading-[150%] placeholder:text-input-placeholder-text pr-[40px] ${idError ? 'border-error' : 'border-neutral-40 focus:border-neutral-700'}`}
|
||||
/>
|
||||
{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>
|
||||
{idError && <p className="text-error text-[13px] leading-tight mt-[10px]">{idError}</p>}
|
||||
{/* 비밀번호 */}
|
||||
<div className="relative">
|
||||
<label htmlFor="password" className="sr-only">
|
||||
비밀번호
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => {
|
||||
setPassword(e.target.value);
|
||||
if (passwordError) setPasswordError("");
|
||||
}}
|
||||
onFocus={() => setIsPasswordFocused(true)}
|
||||
onBlur={() => setIsPasswordFocused(false)}
|
||||
placeholder="비밀번호 입력"
|
||||
className={`h-[56px] px-[12px] py-[7px] rounded-[8px] w-full border focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none focus:appearance-none text-[18px] text-neutral-700 font-normal leading-[150%] placeholder:text-input-placeholder-text pr-[40px] ${passwordError ? 'border-error' : 'border-neutral-40 focus:border-neutral-700'}`}
|
||||
/>
|
||||
{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>
|
||||
{passwordError && <p className="text-error text-[13px] leading-tight mt-[4px]">{passwordError}</p>}
|
||||
</div>
|
||||
|
||||
{/* 체크박스들 */}
|
||||
<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="sr-only"
|
||||
/>
|
||||
{rememberId ? (
|
||||
<LoginCheckboxActiveSvg />
|
||||
) : (
|
||||
<LoginCheckboxInactiveSvg />
|
||||
)}
|
||||
아이디 기억하기
|
||||
</label>
|
||||
<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="sr-only"
|
||||
/>
|
||||
{autoLogin ? (
|
||||
<LoginCheckboxActiveSvg />
|
||||
) : (
|
||||
<LoginCheckboxInactiveSvg />
|
||||
)}
|
||||
자동 로그인
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* 로그인 버튼 */}
|
||||
<button
|
||||
type="submit"
|
||||
className={`h-[56px] 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 hover:bg-[#1F2B91]" : "bg-inactive-button"}`}
|
||||
>
|
||||
로그인
|
||||
</button>
|
||||
|
||||
{/* 하단 링크들 */}
|
||||
<div className="flex items-center justify-between text-[15px] leading-[150%] h-[36px]">
|
||||
<Link
|
||||
href="/register"
|
||||
className="underline-offset-2 text-basic-text font-bold"
|
||||
>
|
||||
회원가입
|
||||
</Link>
|
||||
<div
|
||||
className="flex items-center gap-3 text-basic-text"
|
||||
>
|
||||
<Link href="/find-id" className="underline-offset-2">
|
||||
아이디 찾기
|
||||
</Link>
|
||||
<span className="h-3 w-px bg-input-border" />
|
||||
<Link href="/reset-password" className="underline-offset-2">
|
||||
비밀번호 재설정
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 폼 */}
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-4">
|
||||
{/* 아이디 */}
|
||||
<div className="relative">
|
||||
<label htmlFor="userId" className="sr-only">
|
||||
아이디
|
||||
</label>
|
||||
<input
|
||||
id="userId"
|
||||
name="userId"
|
||||
value={userId}
|
||||
onChange={(e) => {
|
||||
setUserId(e.target.value);
|
||||
if (idError) setIdError("");
|
||||
}}
|
||||
onFocus={() => setIsUserIdFocused(true)}
|
||||
onBlur={() => setIsUserIdFocused(false)}
|
||||
placeholder="아이디(이메일)"
|
||||
className={`h-[56px] px-[12px] py-[7px] w-full rounded-[8px] border focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none focus:appearance-none text-[18px] text-neutral-700 font-normal leading-[150%] placeholder:text-input-placeholder-text pr-[40px] ${idError ? 'border-error' : 'border-neutral-40 focus:border-neutral-700'}`}
|
||||
/>
|
||||
{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>
|
||||
{idError && <p className="text-error text-[13px] leading-tight mt-[10px]">{idError}</p>}
|
||||
{/* 비밀번호 */}
|
||||
<div className="relative">
|
||||
<label htmlFor="password" className="sr-only">
|
||||
비밀번호
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => {
|
||||
setPassword(e.target.value);
|
||||
if (passwordError) setPasswordError("");
|
||||
}}
|
||||
onFocus={() => setIsPasswordFocused(true)}
|
||||
onBlur={() => setIsPasswordFocused(false)}
|
||||
placeholder="비밀번호 입력"
|
||||
className={`h-[56px] px-[12px] py-[7px] rounded-[8px] w-full border focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none focus:appearance-none text-[18px] text-neutral-700 font-normal leading-[150%] placeholder:text-input-placeholder-text pr-[40px] ${passwordError ? 'border-error' : 'border-neutral-40 focus:border-neutral-700'}`}
|
||||
/>
|
||||
{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>
|
||||
{passwordError && <p className="text-error text-[13px] leading-tight mt-[4px]">{passwordError}</p>}
|
||||
</div>
|
||||
|
||||
{/* 체크박스들 */}
|
||||
<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="sr-only"
|
||||
/>
|
||||
{rememberId ? (
|
||||
<LoginCheckboxActiveSvg />
|
||||
) : (
|
||||
<LoginCheckboxInactiveSvg />
|
||||
)}
|
||||
아이디 기억하기
|
||||
</label>
|
||||
<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="sr-only"
|
||||
/>
|
||||
{autoLogin ? (
|
||||
<LoginCheckboxActiveSvg />
|
||||
) : (
|
||||
<LoginCheckboxInactiveSvg />
|
||||
)}
|
||||
자동 로그인
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* 로그인 버튼 */}
|
||||
<button
|
||||
type="submit"
|
||||
className={`h-[56px] 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 hover:bg-[#1F2B91]" : "bg-inactive-button"}`}
|
||||
>
|
||||
로그인
|
||||
</button>
|
||||
|
||||
{/* 하단 링크들 */}
|
||||
<div className="flex items-center justify-between text-[15px] leading-[150%] h-[36px]">
|
||||
<Link
|
||||
href="/register"
|
||||
className="underline-offset-2 text-basic-text font-bold"
|
||||
>
|
||||
회원가입
|
||||
</Link>
|
||||
<div
|
||||
className="flex items-center gap-3 text-basic-text"
|
||||
>
|
||||
<Link href="/find-id" className="underline-offset-2">
|
||||
아이디 찾기
|
||||
</Link>
|
||||
<span className="h-3 w-px bg-input-border" />
|
||||
<Link href="/reset-password" className="underline-offset-2">
|
||||
비밀번호 재설정
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{/* Copyright 영역 - 하단 고정 */}
|
||||
<p className="text-center py-[40px] text-[15px] text-basic-text flex-shrink-0">
|
||||
Copyright ⓒ 2025 XL LMS. All rights reserved
|
||||
</p>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<p className="text-center py-[40px] text-[15px] text-basic-text">
|
||||
Copyright ⓒ 2025 XL LMS. All rights reserved
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user