Merge pull request #50 from Leets-Official/feat/49-login-api

[FEAT] 로그인 api 연동

Author: wlsldm

src/App.tsx

@@ -1,16 +1,18 @@
+import { QueryClientProvider } from "@tanstack/react-query";
 import { RouterProvider } from "react-router/dom";
 
+import { queryClient } from "@/api/queryClient";
 import { GlobalModal } from "@/components/modal/GlobalModal";
 import { GlobalToast } from "@/components/toast/GlobalToast";
 import { router } from "@/routes/router";
 
 function App() {
   return (
-    <>
+    <QueryClientProvider client={queryClient}>
       <RouterProvider router={router} />
       <GlobalModal />
       <GlobalToast />
-    </>
+    </QueryClientProvider>
   );
 }
 

src/api/auth/api.ts

@@ -0,0 +1,16 @@
+import { authInstance, publicInstance } from "@/api/instance";
+import type { ApiResponse } from "@/types/api";
+import type { AuthTokenResponse, LoginRequest } from "@/types/auth/auth";
+
+export const login = async (body: LoginRequest) => {
+  const { data } = await publicInstance.post<ApiResponse<AuthTokenResponse>>(
+    "/auth/login",
+    body
+  );
+
+  return data.data;
+};
+
+export const logout = async () => {
+  await authInstance.post<ApiResponse<string>>("/auth/logout");
+};

src/api/auth/query.ts

@@ -0,0 +1,32 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+
+import { login, logout } from "@/api/auth/api";
+import { PATH } from "@/routes/paths";
+import { useAuthStore } from "@/stores/useAuthStore";
+
+export const useLogin = () => {
+  const navigate = useNavigate();
+  const setTokens = useAuthStore((state) => state.setTokens);
+
+  return useMutation({
+    mutationFn: login,
+    onSuccess: (tokens) => {
+      setTokens(tokens);
+      navigate(PATH.HOME, { replace: true });
+    },
+  });
+};
+
+export const useLogout = () => {
+  const clearAuth = useAuthStore((state) => state.clearAuth);
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: logout,
+    onSettled: () => {
+      clearAuth();
+      queryClient.removeQueries();
+    },
+  });
+};

src/api/dormVerification.ts src/api/dormitory/dormVerification.tssrc/api/dormVerification.ts renamed to src/api/dormitory/dormVerification.ts

@@ -0,0 +1,25 @@
+import { isAxiosError } from "axios";
+
+import { API_ERROR_MESSAGE } from "@/constants/errorMessage";
+import type { ApiErrorResponse, ApiFieldErrors } from "@/types/api";
+
+// 서버가 내려준 에러 메시지, 비어 있으면 화면별 기본 문구
+export const getApiErrorMessage = (
+  error: unknown,
+  fallback: string = API_ERROR_MESSAGE.DEFAULT
+) => {
+  if (isAxiosError<ApiErrorResponse>(error)) {
+    return error.response?.data?.message?.trim() || fallback;
+  }
+
+  return fallback;
+};
+
+// 필드 단위 검증 에러 — 폼 입력에 매핑
+export const getApiFieldErrors = (error: unknown): ApiFieldErrors => {
+  if (isAxiosError<ApiErrorResponse>(error)) {
+    return error.response?.data?.data?.fieldErrors ?? {};
+  }
+
+  return {};
+};

src/api/error.ts

@@ -0,0 +1,76 @@
+import axios from "axios";
+
+import { PATH } from "@/routes/paths";
+import { useAuthStore } from "@/stores/useAuthStore";
+import type { ApiResponse } from "@/types/api";
+import type { AuthTokenResponse } from "@/types/auth/auth";
+
+const BASE_CONFIG = {
+  baseURL: `${import.meta.env.VITE_API_BASE_URL}/api/v1`,
+  headers: { "Content-Type": "application/json" },
+  timeout: 10000,
+};
+
+// 토큰이 필요 없는 요청 — 로그인, 회원가입, 토큰 재발급
+export const publicInstance = axios.create(BASE_CONFIG);
+
+// 토큰이 필요한 요청 — 헤더 자동 첨부, 401이면 재발급 후 재시도
+export const authInstance = axios.create(BASE_CONFIG);
+
+authInstance.interceptors.request.use((config) => {
+  const { accessToken } = useAuthStore.getState();
+  if (accessToken) {
+    config.headers.Authorization = `Bearer ${accessToken}`;
+  }
+
+  return config;
+});
+
+let reissuePromise: Promise<string> | null = null;
+
+const reissueAccessToken = async () => {
+  const { refreshToken } = useAuthStore.getState();
+  if (!refreshToken) return null;
+
+  reissuePromise ??= publicInstance
+    .post<ApiResponse<AuthTokenResponse>>("/auth/reissue", { refreshToken })
+    .then((response) => {
+      const tokens = response.data.data;
+      useAuthStore.getState().setTokens(tokens);
+
+      return tokens.accessToken;
+    })
+    .finally(() => {
+      reissuePromise = null;
+    });
+
+  return reissuePromise.catch(() => null);
+};
+
+authInstance.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const status = error.response?.status;
+    const originRequest = error.config;
+
+    if (status === 401 && originRequest) {
+      if (!originRequest.isRetried) {
+        originRequest.isRetried = true;
+
+        const accessToken = await reissueAccessToken();
+        if (accessToken) {
+          originRequest.headers.Authorization = `Bearer ${accessToken}`;
+          return authInstance(originRequest);
+        }
+      }
+
+      useAuthStore.getState().clearAuth();
+
+      if (window.location.pathname !== PATH.LOGIN) {
+        window.location.replace(PATH.LOGIN);
+      }
+    }
+
+    return Promise.reject(error);
+  }
+);

src/api/instance.ts

@@ -0,0 +1,24 @@
+import { QueryClient } from "@tanstack/react-query";
+import { isAxiosError, isCancel } from "axios";
+
+// 응답이 없는 네트워크 오류와 5xx만 재시도
+const shouldRetry = (failureCount: number, error: Error) => {
+  if (isCancel(error)) return false;
+  if (!isAxiosError(error)) return false;
+
+  const status = error.response?.status;
+  const isRetryable = status === undefined || status >= 500;
+
+  return isRetryable && failureCount < 1;
+};
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 20,
+      gcTime: 1000 * 60 * 5,
+      retry: shouldRetry,
+      refetchOnWindowFocus: false,
+    },
+  },
+});

src/api/queryClient.ts

@@ -0,0 +1,5 @@
+// 서버가 에러 메시지를 안 내려줄 때 노출할 기본 문구
+export const API_ERROR_MESSAGE = {
+  DEFAULT: "요청에 실패했어요. 잠시 후 다시 시도해주세요",
+  LOGIN: "로그인에 실패했어요. 잠시 후 다시 시도해주세요",
+} as const;

src/constants/errorMessage.ts

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import { submitDormVerification } from "@/api/dormVerification";
+import { submitDormVerification } from "@/api/dormitory/dormVerification";
 import type { DormVerification } from "@/types/dormVerification";
 
 interface SubmitDormVerificationOptions {

src/hooks/useSubmitDormVerification.ts

@@ -7,19 +7,42 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { loginSchema, type LoginFormValues } from "@/schemas/auth";
 import { PATH } from "@/routes/paths";
+import { useLogin } from "@/api/auth/query";
+import { getApiErrorMessage, getApiFieldErrors } from "@/api/error";
+import { API_ERROR_MESSAGE } from "@/constants/errorMessage";
 
 export default function LoginPage() {
   const navigate = useNavigate();
+  const { mutate: login, isPending } = useLogin();
   const {
     register,
     handleSubmit,
+    setError,
     formState: { errors },
   } = useForm<LoginFormValues>({
     resolver: zodResolver(loginSchema),
   });
 
-  const onSubmit = (_values: LoginFormValues) => {
-    // TODO: 로그인 API 연동
+  // TODO: 임시 alert — error 변형 토스트로 교체
+  const onSubmit = (values: LoginFormValues) => {
+    login(values, {
+      onError: (error) => {
+        const fieldErrors = getApiFieldErrors(error);
+        const invalidFields = (
+          Object.keys(values) as (keyof LoginFormValues)[]
+        ).filter((field) => fieldErrors[field]);
+
+        if (invalidFields.length > 0) {
+          invalidFields.forEach((field) =>
+            setError(field, { message: fieldErrors[field] })
+          );
+
+          return;
+        }
+
+        alert(getApiErrorMessage(error, API_ERROR_MESSAGE.LOGIN));
+      },
+    });
   };
 
   return (
@@ -59,12 +82,12 @@ export default function LoginPage() {
           <Button
             variant="text"
             size="small"
-            onClick={() => navigate("/signup")}
+            onClick={() => navigate(PATH.SIGNUP)}
           >
             학교 이메일로 회원가입
           </Button>
         </div>
-        <Button type="submit" className="mt-[58px] w-full">
+        <Button type="submit" disabled={isPending} className="mt-[58px] w-full">
           로그인
         </Button>
       </form>