Merge pull request #67 from SOPT-all/init/ky-instance/#66

[feat/#66] ky 인스턴스 래퍼 함수 구현 및 API 구조 개선

Author: jstar000

src/shared/apis/client.ts src/apis/api-client.tssrc/shared/apis/client.ts renamed to src/apis/api-client.ts

@@ -10,14 +10,13 @@ export const apiClient = ky.create({
   },
   hooks: {
     beforeRequest: [
-      (request) => {
-        // TODO: 나중에 공통으로 넣을 헤더가 생기면 여기에서 처리
-        void request;
+      () => {
+        // TODO: 공통으로 넣을 헤더가 생기면 여기에서 처리
       },
     ],
     afterResponse: [
       async (_request, _options, response) => {
-        // TODO: 공통 에러 처리가 필요해지면 여기에서 처리
+        // 성공/실패 응답은 request 함수에서 처리
         return response;
       },
     ],

src/apis/constants/api-endpoints.ts

@@ -0,0 +1,11 @@
+export const API_ENDPOINTS = {
+  AUTHORS: {
+    AUTHOR_INFO: (authorId: number) => `/authors/${authorId}`,
+    AUTHOR_LIKES: (authorId: number) => `/authors/${authorId}/likes`,
+  },
+  PRODUCTS: {
+    PRODUCT_INFO: (productId: number) => `/products/${productId}`,
+    PRODUCT_REVIEW: (productId: number) => `/products/${productId}/reviews`,
+    PRODUCT_LIKES: (productId: number) => `/products/${productId}/likes`,
+  },
+} as const;

src/shared/apis/query-client.tsx src/apis/query-client.tsxsrc/shared/apis/query-client.tsx renamed to src/apis/query-client.tsx

@@ -0,0 +1,76 @@
+// ky 인스턴스 래퍼함수
+
+import { HTTPError } from "ky";
+import { apiClient } from "@/apis/api-client";
+
+export const HTTPMethod = {
+  GET: "GET",
+  POST: "POST",
+  PUT: "PUT",
+  DELETE: "DELETE",
+  PATCH: "PATCH",
+} as const;
+
+export type HTTPMethodType = (typeof HTTPMethod)[keyof typeof HTTPMethod];
+type QueryValue = string | number | boolean;
+
+export interface RequestConfig {
+  method: HTTPMethodType;
+  url: string;
+  query?: Record<string, QueryValue>;
+  body?: unknown;
+}
+
+// Success response: { code, message, data }
+interface SuccessResponse<T> {
+  code: string;
+  message: string;
+  data: T;
+}
+
+// Error response: { code, message, messageDetail }
+interface ErrorResponse {
+  code: string;
+  message: string;
+  messageDetail: string | null;
+}
+
+// ky 인스턴스 래퍼 함수
+export const request = async <T>(config: RequestConfig): Promise<T> => {
+  // T: 응답 성공 시 받는 데이터의 타입
+  const { method, url, query, body } = config;
+
+  try {
+    const response = await apiClient(url, {
+      method,
+      searchParams: query as Record<string, string | number | boolean>,
+      json: method !== HTTPMethod.GET ? body : undefined, // 자동으로 헤더에 Content-Type: application/json 추가
+    }).json<SuccessResponse<T>>();
+
+    return response.data; // 성공 시 data 필드만 추출해서 반환
+  } catch (error: unknown) {
+    if (error instanceof HTTPError) {
+      const errorData = await error.response
+        .json<ErrorResponse>()
+        .catch(() => null);
+
+      const errorMessage = errorData?.message || "에러 메시지 정의 X";
+      const errorCode = errorData?.code || "UNKNOWN_ERROR";
+      const errorMessageDetail = errorData?.messageDetail || "UNKNOWN_ERROR";
+
+      if (import.meta.env.DEV) {
+        console.error(`[${errorCode}] ${url}`);
+        console.error("errorMessage: ", errorMessage);
+        console.error("errorMessageDetail", errorMessageDetail);
+      }
+
+      throw error;
+    }
+
+    if (import.meta.env.DEV) {
+      console.error("네트워크 에러");
+    }
+
+    throw error;
+  }
+};

src/apis/request.ts

@@ -0,0 +1 @@
+// 요청, 응답 타입을 정의합니다

src/apis/types/author.ts

@@ -0,0 +1 @@
+// 요청, 응답 타입을 정의합니다

src/apis/types/product.ts

@@ -1,7 +1,7 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "@/App.tsx";
-import QueryProvider from "./shared/apis/query-client.tsx";
+import QueryProvider from "./apis/query-client.tsx";
 import "./shared/styles/global.css.ts";
 
 createRoot(document.getElementById("root")!).render(

src/main.tsx

@@ -25,7 +25,8 @@
       "@routes/*": ["./src/routes/*"],
       "@img/*": ["./src/assets/img/*"],
       "@svg/*": ["./src/assets/svg/*"],
-      "@styles/*": ["./src/shared/styles/*"]
+      "@styles/*": ["./src/shared/styles/*"],
+      "@apis/*": ["./src/apis/*"]
     },
 
     /* Linting */

tsconfig.app.json

@@ -34,6 +34,7 @@ export default defineConfig({
       "@svg": path.resolve(dirname, "./src/assets/svg"),
       "@img": path.resolve(dirname, "./src/assets/img"),
       "@styles": path.resolve(dirname, "./src/shared/styles"),
+      "@apis": path.resolve(dirname, "./src/apis"),
     },
   },
   test: {