loginpage 반응형형
This commit is contained in:
wallace
@@ -3,7 +3,7 @@
|
|||||||
import { usePathname } from "next/navigation";
|
import { usePathname } from "next/navigation";
|
||||||
import Footer from "./Footer";
|
import Footer from "./Footer";
|
||||||
|
|
||||||
const HIDE_FOOTER_PREFIXES = ["/pages"];
|
const HIDE_FOOTER_PREFIXES = ["/pages", "/login"];
|
||||||
|
|
||||||
export default function FooterVisibility() {
|
export default function FooterVisibility() {
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
|
|||||||
@@ -160,8 +160,6 @@ export default function LoginPage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="min-h-screen w-full flex flex-col items-center pt-[180px]">
|
|
||||||
|
|
||||||
<LoginErrorModal
|
<LoginErrorModal
|
||||||
open={isLoginErrorOpen}
|
open={isLoginErrorOpen}
|
||||||
onClose={() => {
|
onClose={() => {
|
||||||
@@ -175,157 +173,160 @@ export default function LoginPage() {
|
|||||||
loginErrorModalEnabled={isLoginErrorOpen}
|
loginErrorModalEnabled={isLoginErrorOpen}
|
||||||
setLoginErrorModalEnabled={setIsLoginErrorOpen}
|
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">
|
{/* 폼 */}
|
||||||
{/* 로고 영역 */}
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
<div className="my-15 flex flex-col items-center">
|
<div className="space-y-4">
|
||||||
<div className="mb-[7px]">
|
{/* 아이디 */}
|
||||||
<MainLogo />
|
<div className="relative">
|
||||||
</div>
|
<label htmlFor="userId" className="sr-only">
|
||||||
<div className="text-[28.8px] font-extrabold leading-[145%] text-neutral-700" >
|
아이디
|
||||||
XR LMS
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
{/* Copyright 영역 - 하단 고정 */}
|
||||||
{/* 폼 */}
|
<p className="text-center py-[40px] text-[15px] text-basic-text flex-shrink-0">
|
||||||
<form onSubmit={handleSubmit} className="space-y-4">
|
Copyright ⓒ 2025 XL LMS. All rights reserved
|
||||||
<div className="space-y-4">
|
</p>
|
||||||
{/* 아이디 */}
|
|
||||||
<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>
|
||||||
<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