[김은경] Sprint 7,8

package.json

@@ -6,10 +6,15 @@
     "@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.10.5",
+    "@types/react": "^19.0.3",
+    "@types/react-dom": "^19.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.28.0",
     "react-scripts": "5.0.1",
+    "typescript": "^5.7.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js → src/App.tsx

@@ -1,16 +1,20 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Header from "./component/Navigation/Header";
 import MainPage from "./pages/MainPage";
-import UsedMarketPage from "./pages/UsedMarketPage";
 import PostProductPage from "./pages/PostProductPage";
+import ProductDetail from "./pages/ProductDetail";
+import "./styles/global.css";
 
 function App() {
   return (
     <BrowserRouter>
       <Header />
       <Routes>
         <Route path="/" element={<MainPage />} />
-        <Route path="/items" element={<UsedMarketPage />} />
+        <Route path="/items">
+          <Route index element={<MainPage />} />
+          <Route path=":productSlug" element={<ProductDetail />} />
+        </Route>
         <Route path="/additem" element={<PostProductPage />} />
       </Routes>
     </BrowserRouter>

src/api.tsx

@@ -0,0 +1,50 @@
+interface Product {
+  page?: number;
+  pageSize: number;
+  orderBy: string;
+  keyword?: string;
+}
+
+interface Comment {
+  productSlug: string;
+  limit: number;
+}
+
+export async function getProduct({
+  page = 1,
+  pageSize = 4,
+  orderBy = "favorite",
+  keyword = "",
+}: Product) {
+  //기본 URL
+  const baseURL = "https://panda-market-api.vercel.app/products";
+  //URL 객체
+  const url = new URL(baseURL);
+  url.searchParams.set("page", page.toString());
+  url.searchParams.set("pageSize", pageSize.toString());
+  url.searchParams.set("orderBy", orderBy);
+  url.searchParams.set("keyword", keyword);
+  //API 호출
+  console.log(url.toString());
+  const response = await fetch(url.toString());
+  const data = await response.json();
+  return data;
+}
+
+//제품 상세페이지
+export async function getProductDetail(productSlug: string) {
+  const response = await fetch(
+    `https://panda-market-api.vercel.app/products/${productSlug}`
+  );
+  const data = await response.json();
+  return data;
+}
+
+//제품 코멘트
+export async function getProductComment({ productSlug, limit }: Comment) {
+  const response = await fetch(
+    `https://panda-market-api.vercel.app/products/${productSlug}/comments?limit=${limit}`
+  );
+  const data = await response.json();
+  return data;
+}

src/component/AllProduct/AllProductItem.css → src/component/AllProduct/AllProductItem.module.css

@@ -3,19 +3,26 @@
   margin: 0;
 }
 
-.allproduct-img {
+.allproduct_img {
   width: 221px;
   height: 221px;
   border-radius: 16px;
   object-fit: cover;
 }
 
-.allproduct-popularity {
+.allproduct_popularity {
   width: 16px;
   height: 16px;
+  color: black;
 }
 
-.allproduct-title {
+.allproduct_title {
   font-size: 14px;
   font-weight: 500;
+  color: black;
+}
+
+.link {
+  text-decoration: none;
+  color: black;
 }