fix: 더나은 오류 핸들

Author: SaidBySolo

src/services/authService.ts

@@ -3,6 +3,7 @@ import type {
   RefreshTokenResponse,
   LoginRequest,
   User,
+  ApiResponse,
 } from "../types/auth";
 
 const API_BASE_URL =
@@ -19,8 +20,22 @@ export class AuthService {
       body: JSON.stringify(credentials),
     });
 
-    if (!res.ok) throw new Error("로그인 실패");
-    return res.json();
+    const data: ApiResponse<LoginResponse> = await res.json();
+
+    if (!data.success || !data.data) {
+      const errorMsg = data.error?.message || "로그인 실패";
+      const fields = data.error?.fields;
+
+      // 필드별 에러가 있으면 첫 번째 필드 에러 메시지 사용
+      if (fields) {
+        const firstFieldError = Object.values(fields)[0];
+        throw new Error(firstFieldError || errorMsg);
+      }
+
+      throw new Error(errorMsg);
+    }
+
+    return data.data;
   }
 
   static async refreshToken(): Promise<RefreshTokenResponse> {
@@ -30,30 +45,47 @@ export class AuthService {
       credentials: "include", // 🍪 리프레시 토큰은 쿠키에 있음
     });
 
-    if (!res.ok) throw new Error("토큰 갱신 실패");
-    return res.json(); // { accessToken: string, user: User }
+    const data: ApiResponse<RefreshTokenResponse> = await res.json();
+
+    if (!data.success || !data.data) {
+      throw new Error(data.error?.message || "토큰 갱신 실패");
+    }
+
+    return data.data;
   }
 
   static async logout(accessToken: string): Promise<void> {
-    await fetch(`${API_BASE_URL}/api/auth/logout`, {
+    const res = await fetch(`${API_BASE_URL}/api/auth/logout`, {
       method: "POST",
       headers: {
         Authorization: `Bearer ${accessToken}`,
         "Content-Type": "application/json",
       },
       credentials: "include",
     });
+
+    const data: ApiResponse = await res.json();
+
+    if (!data.success && data.error) {
+      throw new Error(data.error.message || "로그아웃 실패");
+    }
   }
 
   static async signOut(accessToken: string): Promise<void> {
-    await fetch(`${API_BASE_URL}/api/auth/sign-out`, {
+    const res = await fetch(`${API_BASE_URL}/api/auth/sign-out`, {
       method: "DELETE",
       headers: {
         Authorization: `Bearer ${accessToken}`,
         "Content-Type": "application/json",
       },
       credentials: "include",
     });
+
+    const data: ApiResponse = await res.json();
+
+    if (!data.success && data.error) {
+      throw new Error(data.error.message || "계정 삭제 실패");
+    }
   }
 }
 

src/services/projectService.ts

@@ -1,30 +1,39 @@
 // src/services/projectService.ts
 import { useProjectStore } from "../stores/projectStore";
+import { TokenStorage } from "./authService";
+import type { ApiResponse } from "../types/auth";
 
 const API_BASE_URL =
   import.meta.env.VITE_API_BASE_URL || "http://localhost:8080";
 
 export async function createProject(name: string, description: string) {
-  const accessToken = localStorage.getItem("accessToken"); // ✅ 토큰 가져오기
+  const accessToken = TokenStorage.getAccessToken();
 
   const response = await fetch(`${API_BASE_URL}/api/projects`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
-      ...(accessToken && { Authorization: `Bearer ${accessToken}` }), // ✅ 토큰 헤더 추가
+      ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
     },
     body: JSON.stringify({ name, description }),
-    credentials: "include", // refreshToken 쿠키도 함께 보냄
+    credentials: "include",
   });
 
-  if (!response.ok) {
-    throw new Error("프로젝트 생성 실패");
-  }
+  const data: ApiResponse = await response.json();
+
+  if (!data.success || !data.data) {
+    const errorMsg = data.error?.message || "프로젝트 생성 실패";
+    const fields = data.error?.fields;
 
-  const data = await response.json();
-  if (data.success && data.data) {
-    useProjectStore.getState().loadProject(data.data); // store에 저장
-    return data.data;
+    // 필드별 에러가 있으면 사용자에게 친절하게 표시
+    if (fields) {
+      const fieldErrors = Object.values(fields).join(", ");
+      throw new Error(fieldErrors || errorMsg);
+    }
+
+    throw new Error(errorMsg);
   }
-  throw new Error(data.error?.message || "프로젝트 생성 실패");
+
+  useProjectStore.getState().loadProject(data.data);
+  return data.data;
 }

src/types/auth.ts

@@ -46,9 +46,16 @@ export interface AuthState {
 
 // API 에러 타입
 export interface ApiError {
+  code: number;
   message: string;
-  status: number;
-  code?: string;
+  fields?: Record<string, string>;
+}
+
+// API 공통 응답 타입
+export interface ApiResponse<T = any> {
+  success: boolean;
+  data: T | null;
+  error: ApiError | null;
 }
 
 // 로그인 요청 타입 (테스트용)

src/utils/apiClients.ts

@@ -1,4 +1,5 @@
 import { TokenStorage } from "../services/authService";
+import type { ApiResponse } from "../types/auth";
 
 const API_BASE_URL =
   import.meta.env.VITE_API_BASE_URL || "http://localhost:8080";
@@ -47,7 +48,15 @@ export const apiFetch = async (
       throw new Error("로그인이 만료되었습니다.");
     }
 
-    const { accessToken: newAccessToken } = await refreshRes.json();
+    const refreshData: ApiResponse = await refreshRes.json();
+
+    if (!refreshData.success || !refreshData.data) {
+      console.error("❌ refresh token 갱신 실패");
+      TokenStorage.clearAll();
+      throw new Error(refreshData.error?.message || "로그인이 만료되었습니다.");
+    }
+
+    const newAccessToken = refreshData.data.accessToken;
     TokenStorage.saveTokens(newAccessToken, TokenStorage.getRefreshToken() || "");
     accessToken = newAccessToken;
 
@@ -64,12 +73,6 @@ export const apiFetch = async (
   }
 
   // 3. 최종 응답 처리 (빈 응답도 대응)
-  if (!res.ok) {
-    const text = await res.text();
-    throw new Error(text || "API 요청 실패");
-  }
-
-  // 🔁 Content-Length가 0일 수도 있음
   const contentType = res.headers.get("Content-Type");
   if (
     res.status === 204 ||
@@ -79,7 +82,22 @@ export const apiFetch = async (
     return null;
   }
 
-  return res.json();
+  const data: ApiResponse = await res.json();
+
+  // 4. success: false인 경우 에러 처리
+  if (!data.success && data.error) {
+    const errorMsg = data.error.message || "API 요청 실패";
+    const fields = data.error.fields;
+
+    if (fields) {
+      const fieldErrors = Object.values(fields).join(", ");
+      throw new Error(fieldErrors || errorMsg);
+    }
+
+    throw new Error(errorMsg);
+  }
+
+  return data.data || data;
 };
 
 export const logout = async () => {
@@ -88,7 +106,9 @@ export const logout = async () => {
     credentials: "include",
   });
 
-  if (!res.ok) {
-    throw new Error("로그아웃 실패");
+  const data: ApiResponse = await res.json();
+
+  if (!data.success && data.error) {
+    throw new Error(data.error.message || "로그아웃 실패");
   }
 };