245 lines
7.9 KiB
TypeScript
245 lines
7.9 KiB
TypeScript
"use client";
|
|
|
|
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("");
|
|
|
|
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
|
e.preventDefault();
|
|
if (userId.trim().length === 0 || password.trim().length === 0) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch("https://hrdi.coconutmeet.net/auth/login", {
|
|
method: "POST",
|
|
headers: {"Content-Type": "application/json",},
|
|
body: JSON.stringify({
|
|
email: userId,
|
|
password: password
|
|
})
|
|
});
|
|
|
|
if (!response.ok) {
|
|
let errorMessage = `로그인 실패 (${response.status})`;
|
|
try {
|
|
const errorData = await response.json();
|
|
if (errorData.error) {
|
|
errorMessage = errorData.error;
|
|
} else if (errorData.message) {
|
|
errorMessage = errorData.message;
|
|
} else if (response.statusText) {
|
|
errorMessage = `${response.statusText} (${response.status})`;
|
|
}
|
|
} catch (parseError) {
|
|
if (response.statusText) {
|
|
errorMessage = `${response.statusText} (${response.status})`;
|
|
}
|
|
}
|
|
console.error("로그인 실패:", errorMessage);
|
|
setIsLoginErrorOpen(true);
|
|
return;
|
|
}
|
|
|
|
const data = await response.json();
|
|
console.log("로그인 성공:", data);
|
|
|
|
// 로그인 성공 시 처리 (예: 토큰 저장, 리다이렉트 등)
|
|
// TODO: 성공 시 처리 로직 추가 (예: localStorage에 토큰 저장, 메인 페이지로 이동 등)
|
|
// if (data.token) {
|
|
// localStorage.setItem('token', data.token);
|
|
// window.location.href = '/menu';
|
|
// }
|
|
} catch (error) {
|
|
const errorMessage = error instanceof Error ? error.message : "네트워크 오류가 발생했습니다.";
|
|
console.error("로그인 오류:", errorMessage);
|
|
setIsLoginErrorOpen(true);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen w-full flex flex-col items-center justify-between">
|
|
|
|
<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-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>
|
|
|
|
{/* 폼 */}
|
|
<form onSubmit={handleSubmit} className="space-y-5">
|
|
<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)}
|
|
onFocus={() => setIsUserIdFocused(true)}
|
|
onBlur={() => setIsUserIdFocused(false)}
|
|
placeholder="아이디 (이메일)"
|
|
className="
|
|
h-[40px] 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 className="relative">
|
|
<label htmlFor="password" className="sr-only">
|
|
비밀번호
|
|
</label>
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
onFocus={() => setIsPasswordFocused(true)}
|
|
onBlur={() => setIsPasswordFocused(false)}
|
|
placeholder="비밀번호"
|
|
className="
|
|
h-[40px] 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 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-[40px] 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] 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>
|
|
<p className="text-center py-[40px] text-[15px] text-basic-text">
|
|
Copyright ⓒ 2025 XL LMS. All rights reserved
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|