[이준희] Sprint8

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env

package.json

@@ -6,11 +6,16 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.9.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "axios": "^1.7.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.26.2",
     "react-scripts": "5.0.1",
+    "typescript": "^5.6.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.tsx

@@ -0,0 +1,23 @@
+import Items from "./pages/Items";
+import AddItem from "./pages/AddItem";
+import ItemDetailForm from "./components/ItemDetailForm";
+import Layout from "./layout";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Items />} />
+          <Route path="items" element={<Items />} />
+          <Route path="items/:productId" element={<ItemDetailForm />} />
+          <Route path="additem" element={<AddItem />} />
+          <Route path="*" element={<div>페이지를 찾을 수 없습니다.</div>} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;

src/api.tsx

@@ -0,0 +1,81 @@
+import instance from "./axiosInstance";
+import {
+  GetProductCommentsParams,
+  GetProductsParams,
+  GetProductsResponse,
+  ProductDetail,
+  GetCommentsResponse,
+} from "./types";
+
+/**
+ * 상품 목록을 가져옵니다.
+ * @param {Object} params - 상품 목록을 필터링할 파라미터 객체
+ * @param {number} [params.page=1] - 요청할 페이지 번호
+ * @param {number} [params.pageSize=10] - 한 페이지에 표시할 상품 개수
+ * @param {string|null} [params.keyword=null] - 검색 키워드
+ * @returns {Promise<Object>} 상품 목록 데이터를 반환합니다.
+ * @throws {Error} 정보 불러오기 실패 시 에러를 발생시킵니다.
+ */
+export async function getProducts(
+  params: GetProductsParams = {}
+): Promise<GetProductsResponse> {
+  try {
+    const { data } = await instance.get<GetProductsResponse>("/products", {
+      params,
+    });
+    return data;
+  } catch (error) {
+    throw new Error("정보를 불러오는데 실패했습니다.");
+  }
+}
+
+/**
+ * 특정 상품의 상세 정보를 가져옵니다.
+ * @param {string} productId - 상품의 ID
+ * @returns {Promise<Object>} 상품 상세 정보를 반환합니다.
+ * @throws {Error} 상품 상세 정보 불러오기 실패 시 에러를 발생시킵니다.
+ */
+export async function getProductDetail(
+  productId: string
+): Promise<ProductDetail> {
+  try {
+    const { data } = await instance.get<ProductDetail>(
+      `/products/${productId}`
+    );
+    return data;
+  } catch (error) {
+    throw new Error("상품 상세 정보를 불러오는데 실패했습니다.");
+  }
+}
+
+/**
+ * 특정 상품의 댓글 목록을 가져옵니다.
+ * @param {string} productId - 상품의 ID
+ * @param {number} [limit=10] - 가져올 댓글의 개수 (기본값: 10)
+ * @param {string|null} [cursor=null] - 페이지네이션을 위한 커서 (기본값: null)
+ * @returns {Promise<Object>} 댓글 데이터를 반환합니다.
+ * @throws {Error} 댓글 정보 불러오기 실패 시 에러를 발생시킵니다.
+ */
+export async function getProductComments(
+  productId: string,
+  limit: number = 9999,
+  cursor: string | null = null
+): Promise<GetCommentsResponse> {
+  try {
+    const params: GetProductCommentsParams = { limit };
+
+    if (cursor) {
+      params.cursor = cursor;
+    }
+
+    const { data } = await instance.get<GetCommentsResponse>(
+      `/products/${productId}/comments`,
+      {
+        params,
+      }
+    );
+    return data;
+  } catch (error) {
+    throw new Error("댓글 정보를 불러오는데 실패했습니다.");
+  }
+}

src/axiosInstance.tsx

@@ -0,0 +1,12 @@
+import axios from "axios";
+
+const BASE_URL = process.env.REACT_APP_BASE_URL;
+
+const instance = axios.create({
+  baseURL: BASE_URL,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+export default instance;