checkmo2025 · shinwokkang · Jan 23, 2026 · Jan 23, 2026
diff --git a/package.json b/package.json
@@ -9,13 +9,17 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "js-cookie": "^3.0.5",
     "next": "16.0.1",
     "react": "19.2.0",
-    "react-dom": "19.2.0"
+    "react-dom": "19.2.0",
+    "react-hot-toast": "^2.6.0",
+    "zustand": "^5.0.10"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.1.17",
     "@tailwindcss/postcss": "^4",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,19 +1,22 @@
-import type { Metadata } from 'next';
-import { Geist, Geist_Mono } from 'next/font/google';
-import './globals.css';
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { Toaster } from "react-hot-toast";
+import { AuthProvider } from "@/components/auth/AuthProvider";
+import "@/app/globals.css";
+
 const geistSans = Geist({
-  variable: '--font-geist-sans',
-  subsets: ['latin'],
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
 });
 
 const geistMono = Geist_Mono({
-  variable: '--font-geist-mono',
-  subsets: ['latin'],
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: "Create Next App",
+  description: "Generated by create next app",
 };
 
 export default function RootLayout({
@@ -26,7 +29,10 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <AuthProvider>
+          {children}
+          <Toaster position="top-center" />
+        </AuthProvider>
       </body>
     </html>
   );

diff --git a/src/components/auth/AuthProvider.tsx b/src/components/auth/AuthProvider.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { useEffect } from "react";
+import Cookies from "js-cookie";
+import { useAuthStore } from "@/store/useAuthStore";
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const login = useAuthStore((state) => state.login);
+
+  useEffect(() => {
+    // Hydration Logic: Check for token on app load
+    const token = Cookies.get("accessToken");
+    if (token) {
+      // If token exists, restore session state.
+      // Note: Since we don't store user details in the cookie,
+      // we pass a placeholder or partial data to set isLoggedIn to true.
+      // TODO: Call /api/auth/me here to fetch full user profile and validate token.
+      // If fetch fails (401), the interceptor in apiClient will handle logout.
+      login({ email: "" });
+    }
+  }, [login]);
+
+  return <>{children}</>;
+}
diff --git a/src/components/base-ui/Login/LoginModal.tsx b/src/components/base-ui/Login/LoginModal.tsx
@@ -2,22 +2,17 @@
 
 import Image from "next/image";
 import React, { useEffect } from "react";
-import LoginLogo from "./LoginLogo";
-import styles from "./LoginModal.module.css";
-import useLoginForm from "./useLoginForm";
+import LoginLogo from "@/components/base-ui/Login/LoginLogo";
+import styles from "@/components/base-ui/Login/LoginModal.module.css";
+import useLoginForm from "@/components/base-ui/Login/useLoginForm";
+import { SOCIAL_LOGINS } from "@/constants/auth";
 
 type Props = {
   onClose: () => void;
   onFindAccount?: () => void;
   onSignUp?: () => void;
 };
 
-const SOCIAL_LOGINS = [
-  { name: "google", icon: "/googleLogo.svg", alt: "구글 로그인" },
-  { name: "naver", icon: "/naverLogo.svg", alt: "네이버 로그인" },
-  { name: "kakao", icon: "/kakaoLogo.svg", alt: "카카오 로그인" },
-];
-
 export default function LoginModal({
   onClose,
   onFindAccount,
@@ -31,7 +26,7 @@ export default function LoginModal({
     handleLogin,
     handleSocialLogin,
     handleKeyDown,
-  } = useLoginForm();
+  } = useLoginForm(onClose);
 
   // Body scroll lock
   useEffect(() => {
@@ -61,19 +56,19 @@ export default function LoginModal({
               {/* 인풋 필드 */}
               <div className={styles.inputWrapper}>
                 <input
-                  name="id"
+                  name="email"
                   type="text"
-                  value={form.id}
+                  value={form.email}
                   onChange={handleChange}
-                  placeholder="아이디"
+                  placeholder="이메일"
                   className={`${styles.input} ${
-                    errors?.id ? styles.inputError : ""
+                    errors?.email ? styles.inputError : ""
                   }`}
                   onKeyDown={handleKeyDown}
                   disabled={isLoading}
                 />
-                {errors?.id && (
-                  <span className={styles.errorMessage}>{errors.id}</span>
+                {errors?.email && (
+                  <span className={styles.errorMessage}>{errors.email}</span>
                 )}
                 <input
                   name="password"

diff --git a/src/components/base-ui/Login/index.ts b/src/components/base-ui/Login/index.ts
@@ -0,0 +1 @@
+export { default as LoginModal } from "./LoginModal";
diff --git a/src/components/base-ui/Login/useLoginForm.tsx b/src/components/base-ui/Login/useLoginForm.tsx
@@ -1,12 +1,17 @@
 import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Cookies from "js-cookie";
+import toast from "react-hot-toast";
+import { useAuthStore } from "@/store/useAuthStore";
+import { LoginForm } from "@/types/auth";
+import { authService } from "@/services/authService";
+import { ApiError } from "@/lib/api/ApiError";
 
-export interface LoginForm {
-  id: string;
-  password: string;
-}
+export default function useLoginForm(onSuccess?: () => void) {
+  const router = useRouter();
+  const login = useAuthStore((state) => state.login);
+  const [form, setForm] = useState<LoginForm>({ email: "", password: "" });
 
-export default function useLoginForm() {
-  const [form, setForm] = useState<LoginForm>({ id: "", password: "" });
   const [errors, setErrors] = useState<Partial<LoginForm>>({});
   const [isLoading, setIsLoading] = useState(false);
 
@@ -23,7 +28,7 @@ export default function useLoginForm() {
   const handleLogin = async () => {
     // 1. Validation (Inline Error)
     const newErrors: Partial<LoginForm> = {};
-    if (!form.id) newErrors.id = "아이디를 입력해주세요.";
+    if (!form.email) newErrors.email = "이메일을 입력해주세요.";
     if (!form.password) newErrors.password = "비밀번호를 입력해주세요.";
 
     if (Object.keys(newErrors).length > 0) {
@@ -35,20 +40,36 @@ export default function useLoginForm() {
 
     // 2. Submission Logic
     setIsLoading(true);
+    setErrors({});
+
     try {
-      console.log("로그인 시도:", form);
-      // TODO: API Call here
-      // await api.login(form);
+      // Service Layer 호출
+      const data = await authService.login(form);
+
+      console.log("로그인 성공:", data);
+      // 1. Token Storage (Secure Cookie)
+      if (data.isSuccess && data.result?.accessToken) {
+        Cookies.set("accessToken", data.result.accessToken, {
+          secure: true,
+          sameSite: "strict",
+        });
+      }
 
-      // Simulate delay
-      await new Promise((resolve) => setTimeout(resolve, 1000));
+      // 2. Global State Update
+      login({ email: form.email });
 
-      // Success handling (e.g., close modal, redirect)
-      // onClose();
+      // 3. Navigation & UI Feedback
+      toast.success("로그인에 성공했습니다!");
+      if (onSuccess) onSuccess();
+      router.push("/");
     } catch (error) {
-      console.error("로그인 실패:", error);
-      // 로그인 실패 시 전체 에러 처리 등을 추가할 수 있습니다.
-      alert("로그인에 실패했습니다.");
+      if (error instanceof ApiError) {
+        // 비즈니스 에러 (예: 비밀번호 불일치)는 인라인 에러로 처리
+        setErrors({ email: error.message });
+      } else {
+        console.error("로그인 실패:", error);
+        toast.error("로그인 요청 중 오류가 발생했습니다.");
+      }
     } finally {
       setIsLoading(false);
     }

diff --git a/src/constants/auth.ts b/src/constants/auth.ts
@@ -0,0 +1,5 @@
+export const SOCIAL_LOGINS = [
+  { name: "google", icon: "/googleLogo.svg", alt: "구글 로그인" },
+  { name: "naver", icon: "/naverLogo.svg", alt: "네이버 로그인" },
+  { name: "kakao", icon: "/kakaoLogo.svg", alt: "카카오 로그인" },
+];
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as LoginModal } from "./LoginModal";