[이승현] Sprint7

package.json

@@ -11,6 +11,8 @@
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.11",
+    "uuid": "^10.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -3,16 +3,18 @@ import MarketPage from "./pages/MarketPage/MarketPage";
 import HomePage from "./pages/HomePage/HomePage";
 import Header from "./components/HeaderComponent/Header";
 import AddProductPage from "./pages/AddProductPage/AddProductPage";
+import ProductPage from "./pages/ProductPage/ProductPage";
 
 function App() {
   return (
     <BrowserRouter>
       <Header />
       <Routes>
         <Route path="/" element={<HomePage />} />
-        <Route path="items">
+        <Route path="products">
           <Route index element={<MarketPage />} />
-          <Route path="addItem" element={<AddProductPage />} />
+          <Route path="addProduct" element={<AddProductPage />} />
+          <Route path=":productId" element={<ProductPage />} />
         </Route>
       </Routes>
     </BrowserRouter>

src/api/api.js

@@ -1,17 +1,51 @@
+const PRODUCTS_URL = "https://panda-market-api.vercel.app/products";
+
 export async function getProducts(
   pageSize = 0,
   orderBy = "favorite",
   page = 1,
   keyword = ""
 ) {
-  const query = `pageSize=${pageSize}&orderBy=${orderBy}`;
+  const query = `pageSize=${pageSize}&orderBy=${orderBy}&page=${page}&keyword=${keyword}`;
+  try {
+    const response = await fetch(`${PRODUCTS_URL}?${query}`);
+    if (!response.ok) {
+      throw new Error(`HTTP error: ${response.status}`);
+    }
+    const body = await response.json();
+    return body;
+  } catch (error) {
+    console.error("Failed to fetch products:", error);
+    throw error;
+  }
+}
+
+export async function getDetailProduct({ productId }) {
+  try {
+    const response = await fetch(`${PRODUCTS_URL}/${productId}`);
+    if (!response.ok) {
+      throw new Error(`HTTP error: ${response.status}`);
+    }
+    const body = await response.json();
+    return body;
+  } catch (error) {
+    console.error("fetch error:", error);
+    throw error;
+  }
+}
+
+export async function getComments({ productId }) {
   try {
     const response = await fetch(
-      `https://panda-market-api.vercel.app/products?${query}`
+      `${PRODUCTS_URL}/${productId}/comments?limit=5`
     );
-    const result = await response.json();
-    return result;
+    if (!response.ok) {
+      throw new Error(`HTTP error: ${response.status}`);
+    }
+    const body = await response.json();
+    return body;
   } catch (error) {
-    console.error(error);
+    console.error("fetch error:", error);
+    throw error;
   }
 }

src/components/HeaderComponent/Header.css

@@ -7,6 +7,7 @@ header {
   background-color: #ffffff;
   border-bottom: 1px solid #dfdfdf;
   position: sticky;
+  width: 100%;
   top: 0;
   margin-bottom: 1rem;
   z-index: 1;

src/components/HeaderComponent/Header.jsx

@@ -18,7 +18,7 @@ function Header() {
             <NavLink to="#">자유게시판</NavLink>
           </li>
           <li>
-            <NavLink to="/items" style={connectLink}>
+            <NavLink to="/products" style={connectLink}>
               중고마켓
             </NavLink>
           </li>

src/components/Pagination/Pagination.css

@@ -0,0 +1,29 @@
+.paginationBar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+.paginationButton {
+  border: 1px solid #e5e7eb;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  color: #6b7280;
+  font-weight: 600;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.paginationButton:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.paginationButton.active {
+  background-color: var(--blue);
+  color: #fff;
+}

src/components/Pagination/Pagination.jsx

@@ -2,15 +2,49 @@ import React from "react";
 import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
 import "./Pagination.css";
 
-function Pagination(props) {
+function Pagination({ totalPageNum, activePageNum, onPageChange }) {
+  const maxVisiblePages = 5;
+  let startPage;
+
+  if (totalPageNum <= maxVisiblePages) {
+    startPage = 1;
+  } else {
+    startPage = Math.max(activePageNum - Math.floor(maxVisiblePages / 2), 1);
+    startPage = Math.min(startPage, totalPageNum - maxVisiblePages + 1);
+  }
+
+  const pages = Array.from(
+    { length: Math.min(maxVisiblePages, totalPageNum - startPage + 1) },
+    (_, i) => startPage + i
+  );
+
   return (
-    <div className="pagination">
-      <div className="pagination-btn">
+    <div className="paginationBar">
+      <button
+        className="paginationButton"
+        disabled={activePageNum === 1}
+        onClick={() => onPageChange(activePageNum - 1)}
+      >
         <IoIosArrowBack />
-      </div>
-      <div className="pagination-btn">
+      </button>
+      {pages.map((page) => (
+        <button
+          key={page}
+          className={`paginationButton ${
+            activePageNum === page ? "active" : ""
+          }`}
+          onClick={() => onPageChange(page)}
+        >
+          {page}
+        </button>
+      ))}
+      <button
+        className="paginationButton"
+        disabled={activePageNum === totalPageNum}
+        onClick={() => onPageChange(activePageNum + 1)}
+      >
         <IoIosArrowForward />
-      </div>
+      </button>
     </div>
   );
 }