- {/* Hero Block */}
-
-
- {/* Action Buttons */}
-
-
- 로그인
-
-
- 회원가입
-
-
+
+
+
+
+
+
+
+
+ {/* Footer 상단 간격 160px */}
+
+
-
+
);
}
+
+/**
+ * 정적 생성 설정.
+ */
+export const getStaticProps: GetStaticProps = async () => {
+ return {
+ props: {},
+ revalidate: false, // 완전 정적 (재생성 안함)
+ };
+};
diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx
index 440d8d6..9fa2c9d 100644
--- a/src/pages/login/index.tsx
+++ b/src/pages/login/index.tsx
@@ -1,266 +1,194 @@
-import { useState, useEffect } from 'react';
-import { useRouter } from 'next/router';
+import type { GetServerSideProps } from 'next';
import Link from 'next/link';
-import Image from 'next/image';
+import { useRouter } from 'next/router';
+import { type JSX, useCallback, useMemo, useState } from 'react';
+import AuthButton from '@/components/auth/AuthButton';
+import AuthHero from '@/components/auth/AuthHero';
+import EmailInput from '@/components/auth/EmailInput';
+import PasswordInput from '@/components/auth/PasswordInput';
+import UnifiedModal from '@/components/auth/UnifiedModal';
+import { login } from '@/lib/auth/api';
+import type { LoginParams } from '@/lib/auth/interface';
+import { useLoginValidation } from '@/lib/validation/rules';
import styles from '@/styles/auth-variables.module.css';
-export default function LoginPage() {
+export default function LoginPage(): JSX.Element {
const router = useRouter();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
- const [emailError, setEmailError] = useState('');
- const [passwordError, setPasswordError] = useState('');
const [isLoading, setIsLoading] = useState(false);
+ const [showModal, setShowModal] = useState(false);
+ const [modalMessage, setModalMessage] = useState('');
+
+ const { errors, validateField } = useLoginValidation();
+
+ const handleEmailBlur = useCallback(() => {
+ validateField('email', email);
+ }, [validateField, email]);
+
+ const handlePasswordBlur = useCallback(() => {
+ validateField('password', password);
+ }, [validateField, password]);
+
+ const isFormValidNow = useMemo(() => {
+ // 로그인 폼 유효성 직접 계산
+ const isEmailValid =
+ email.trim() && /^[^\s@]+@[^\s@][^\s.@]*\.[^\s@]+$/.test(email);
+ const isPasswordValid = password.trim() && password.length >= 8;
+ const result = isEmailValid && isPasswordValid;
- const validateEmail = (email: string) => {
- const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
- return emailRegex.test(email);
- };
+ console.log('로그인 폼 유효성:', {
+ email,
+ password,
+ isEmailValid,
+ isPasswordValid,
+ result,
+ });
- const validatePassword = (password: string) => {
- return password.length >= 8;
- };
+ return result;
+ }, [email, password]);
- const handleEmailBlur = () => {
- if (email && !validateEmail(email)) {
- setEmailError('이메일 형식으로 작성해 주세요.');
- } else {
- setEmailError('');
- }
- };
+ const handleModalClose = useCallback(() => {
+ setShowModal(false);
+ setModalMessage('');
+ }, []);
- const handlePasswordBlur = () => {
- if (password && !validatePassword(password)) {
- setPasswordError('8자 이상 입력해주세요.');
- } else {
- setPasswordError('');
- }
- };
+ const handleSubmit = useCallback(
+ async (e: React.FormEvent) => {
+ e.preventDefault();
- const isFormValid =
- email && password && validateEmail(email) && validatePassword(password);
+ // 로그인 폼 유효성 직접 검증
+ const isEmailValid =
+ email.trim() && /^[^\s@]+@[^\s@][^\s.@]*\.[^\s@]+$/.test(email);
+ const isPasswordValid = password.trim() && password.length >= 8;
- const handleSubmit = async (e: React.FormEvent) => {
- e.preventDefault();
- if (!isFormValid) return;
+ if (!isEmailValid || !isPasswordValid) {
+ return;
+ }
- setIsLoading(true);
- try {
- // API 기능은 나중에 구현 예정
- // await login({ email, password });
- console.log('로그인 시도:', { email, password });
+ setIsLoading(true);
- // 임시로 로그인 성공 처리
- setTimeout(() => {
- router.push('/mydashboard');
- }, 1000);
- } catch (error: any) {
- console.error('Login failed:', error);
- // 로그인 실패 시 에러 처리
- } finally {
- setIsLoading(false);
- }
- };
+ try {
+ // 로그인 API 호출
+ const loginParams: LoginParams = {
+ email,
+ password,
+ };
+
+ const response = await login(loginParams);
+
+ // accessToken을 HttpOnly 쿠키로 설정
+ try {
+ const sessionResponse = await fetch('/api/session', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ accessToken: response.accessToken,
+ }),
+ });
+
+ if (!sessionResponse.ok) {
+ throw new Error('Session creation failed');
+ }
+
+ // 리다이렉트 경로 결정: 대시보드 경로로 향하던 경우에도 디폴트는 mydashboard
+ const nextParam = router.query.next as string | undefined;
+ const nextPath =
+ nextParam && !nextParam.startsWith('/dashboard')
+ ? nextParam
+ : '/mydashboard';
+
+ router.push(nextPath);
+ } catch {
+ setModalMessage(
+ '로그인 처리 중 오류가 발생했습니다. 다시 시도해주세요.'
+ );
+ setShowModal(true);
+ }
+ } catch (error: unknown) {
+ // 에러 메시지 처리
+ const errorMessage =
+ error instanceof Error ? error.message : '알 수 없는 오류';
+
+ if (errorMessage.includes('[400]')) {
+ setModalMessage('비밀번호가 일치하지 않습니다.');
+ setShowModal(true);
+ } else if (errorMessage.includes('[404]')) {
+ setModalMessage('존재하지 않는 유저입니다.');
+ setShowModal(true);
+ } else {
+ setModalMessage('로그인에 실패했습니다. 다시 시도해주세요.');
+ setShowModal(true);
+ }
+ } finally {
+ setIsLoading(false);
+ }
+ },
+ [email, password, router]
+ );
return (
-
+
{/* Hero Block */}
-
+
{/* Form Wrapper */}
-