Eatsfine · dew102938 · Feb 2, 2026 · Feb 3, 2026 · Feb 3, 2026 · Feb 4, 2026
diff --git a/.env.example b/.env.example
@@ -1,3 +1,6 @@
 VITE_API_URL=https://api.example.com
 
-VITE_KAKAO_JS_KEY=
+VITE_KAKAO_JS_KEY=
+
+VITE_GOOGLE_CLIENT_ID=
+
diff --git a/index.html b/index.html
@@ -14,6 +14,7 @@
       content="자리 자체를 예약하는 새로운 식문화 플랫폼 웹 애플리케이션 서비스"
     />
     <meta property="og:image" content="/eatsfineLogo.svg" />
+    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -18,19 +18,22 @@
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
+    "@react-oauth/google": "^0.13.4",
     "@tanstack/react-query": "^5.90.16",
     "axios": "^1.13.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
+    "immer": "^11.1.3",
     "lucide-react": "^0.562.0",
     "react": "^19.2.0",
     "react-day-picker": "^9.13.0",
     "react-dom": "^19.2.0",
     "react-hook-form": "^7.69.0",
     "react-router-dom": "^7.11.0",
     "tailwind-merge": "^3.4.0",
-    "zod": "^4.3.4"
+    "zod": "^4.3.4",
+    "zustand": "^5.0.11"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.tsx b/src/App.tsx
@@ -19,11 +19,11 @@ import SubscriptionPage from "./pages/myPage/subscriptionPage";
 import ReservationPage from "./pages/myPage/reservationPage";
 import StorePage from "./pages/myPage/storePage";
 import OwnerPage from "./pages/ownerPage";
+import { useEffect } from "react";
 
 const routes: RouteObject[] = [
   {
-    //TODO: 로그아웃처리 필요
-    element: <PublicLayout onLogOut={() => {}} />,
+    element: <PublicLayout />,
     errorElement: <NotFound />,
     children: [
       { path: "/search", element: <SearchPage /> },
@@ -72,6 +72,13 @@ const routes: RouteObject[] = [
 const router = createBrowserRouter(routes);
 
 export default function App() {
+  // 카카오 sdk 초기화
+  useEffect(() => {
+    if (window.Kakao && !window.Kakao.isInitialized()) {
+      window.Kakao.init(import.meta.env.VITE_KAKAO_JS_KEY);
+    }
+  }, []);
+
   return (
     <>
       <RouterProvider router={router} />

diff --git a/src/api/auth.ts b/src/api/auth.ts
@@ -0,0 +1,69 @@
+import type { ApiResponse } from "@/types/api";
+import type {
+  RequestLoginDto,
+  RequestSignupDto,
+  RequestSocialLoginDto,
+  ResponseLoginDto,
+  ResponseLogoutDto,
+  ResponseRefreshDto,
+  ResponseSignupDto,
+} from "@/types/auth";
+import { api } from "./axios";
+
+export const postSignup = async (
+  body: RequestSignupDto,
+): Promise<ApiResponse<ResponseSignupDto>> => {
+  const { data } = await api.post<ApiResponse<ResponseSignupDto>>(
+    "/auth/signup",
+    body,
+  );
+  return data;
+};
+
+export const postLogin = async (
+  body: RequestLoginDto,
+): Promise<ApiResponse<ResponseLoginDto>> => {
+  const { data } = await api.post<ApiResponse<ResponseLoginDto>>(
+    "/auth/login",
+    body,
+  );
+  return data;
+};
+
+export const postSocialLogin = async (
+  provider: "kakao" | "google",
+  body: RequestSocialLoginDto,
+): Promise<ApiResponse<ResponseLoginDto>> => {
+  const { data } = await api.post<ApiResponse<ResponseLoginDto>>(
+    `/auth/social/${provider}`,
+    body,
+  );
+  return data;
+};
+
+export const postLogout = async () => {
+  const { data } =
+    await api.post<ApiResponse<ResponseLogoutDto>>("/auth/logout");
+  return data;
+};
+
+export const clearAuth = () => {
+  localStorage.removeItem("accessToken");
+  window.location.href = "/";
+};
+
+export const logout = async () => {
+  try {
+    await postLogout();
+  } catch (e) {
+    console.error(e);
+  } finally {
+    clearAuth();
+  }
+};
+
+export const postRefresh = async () => {
+  const { data } =
+    await api.post<ApiResponse<ResponseRefreshDto>>("/auth/refresh");
+  return data;
+};
diff --git a/src/api/axios.ts b/src/api/axios.ts
@@ -1,6 +1,7 @@
 import axios, { type AxiosError, type InternalAxiosRequestConfig } from "axios";
 import { isApiResponse, normalizeApiError } from "./api.error";
 import type { ApiError } from "@/types/api";
+import { clearAuth, postRefresh } from "./auth";
 
 export const api = axios.create({
   baseURL: import.meta.env.VITE_API_URL as string | undefined,
@@ -35,7 +36,10 @@ api.interceptors.response.use(
     return res;
   },
 
-  (err: AxiosError) => {
+  async (err: AxiosError) => {
+    const originalRequest = err.config as InternalAxiosRequestConfig & {
+      _retry?: boolean;
+    };
     const apiError: ApiError = normalizeApiError(err);
 
     if (import.meta.env.DEV) {
@@ -48,8 +52,40 @@ api.interceptors.response.use(
       });
     }
 
-    if (apiError.status === 401) {
-      // TODO: refresh or logout 정책 확정 후 구현
+    if (apiError.status === 401 && originalRequest) {
+      // 이미 재시도한 요청이거나, 재발급 요청 자체가 실패인 경우 -> 로그아웃
+      if (
+        originalRequest._retry ||
+        originalRequest.url?.includes("/auth/refresh")
+      ) {
+        clearAuth();
+        return Promise.reject(apiError);
+      }
+
+      originalRequest._retry = true; // 재시도 플래그 설정
+
+      try {
+        //토큰 재발급 요청
+        const response = await postRefresh();
+
+        if (response.success) {
+          const newAccessToken = response.data.accessToken;
+
+          // 새 토큰 저장
+          localStorage.setItem("accessToken", newAccessToken);
+
+          // 실패했던 요청의 헤더를 새 토큰으로 교체
+          originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
+
+          // 재시도
+          return api(originalRequest);
+        }
+      } catch (refreshError) {
+        // 재발급 실패 시 로그아웃 처리
+        console.error("토큰 재발급 실패:", refreshError);
+        clearAuth();
+        return Promise.reject(refreshError);
+      }
     }
 
     return Promise.reject(apiError);