[박광민] Sprint7

src/App.jsx

@@ -2,6 +2,7 @@ import { Routes, Route, Navigate } from "react-router-dom";
 import Header from "./components/Header/Header.jsx";
 import Items from "./pages/Items/Items.jsx";
 import AddItem from "./pages/AddItem/AddItem.jsx";
+import ProductDetail from "./pages/ProductDetail/ProductDetail.jsx";
 import "./assets/styles/base.css";
 
 function App() {
@@ -12,6 +13,7 @@ function App() {
         <Route path="/" element={<Navigate to="/" replace />} />
         <Route path="/items" element={<Items />} />
         <Route path="/additem" element={<AddItem />} />
+        <Route path="/items/:productId" element={<ProductDetail />} />
       </Routes>
     </>
   );

src/api/getProductComments.js

@@ -0,0 +1,24 @@
+const getProductComments = async (productId, limit = 10, cursor = null) => {
+  try {
+    const params = new URLSearchParams();
+    params.append("limit", limit);
+    if (cursor !== null) {
+      params.append("cursor", cursor);
+    }
+
+    const res = await fetch(
+      `https://panda-market-api.vercel.app/products/${productId}/comments?${params.toString()}`
+    );
+
+    if (!res.ok) {
+      throw new Error("댓글 정보를 불러오지 못했습니다.");
+    }
+
+    return await res.json();
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};
+
+export default getProductComments;

src/api/getProductDetail.js

@@ -0,0 +1,18 @@
+const getProductDetail = async (productId) => {
+  try {
+    const res = await fetch(
+      `https://panda-market-api.vercel.app/products/${productId}`
+    );
+
+    if (!res.ok) {
+      throw new Error("상품 상세 정보를 불러오지 못했습니다.");
+    }
+
+    return await res.json();
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};
+
+export default getProductDetail;

src/components/AllProducts/AllProducts.jsx

@@ -123,6 +123,7 @@ const AllProducts = () => {
           {products.map(({ id, images, name, price, favoriteCount }) => (
             <ProductCard
               key={id}
+              id={id}
               imageUrl={images?.[0]}
               title={name}
               price={price}

src/components/BestProducts/BestProducts.jsx

@@ -34,6 +34,7 @@ const BestProducts = () => {
         {products.slice(0, visibleCount).map((item) => (
           <ProductCard
             key={item.id}
+            id={item.id}
             imageUrl={item.images?.[0]}
             title={item.name}
             price={item.price}

src/components/ProductCard/ProductCard.jsx

@@ -1,26 +1,29 @@
+import { Link } from "react-router-dom";
 import styles from "./ProductCard.module.css";
 import heartIcon from "../../assets/icon/heart-icon.svg";
 
-const ProductCard = ({ imageUrl, title, price, likes, variant }) => {
+const ProductCard = ({ id, imageUrl, title, price, likes, variant }) => {
   return (
-    <div className={styles.card}>
-      <img
-        src={imageUrl || "/no-img.svg"}
-        alt={title}
-        className={variant === "best" ? styles.bestImg : styles.allImg}
-        onError={(e) => {
-          e.currentTarget.src = "/no-img.svg";
-        }}
-      />
-      <div className={styles.info}>
-        <p className={styles.title}>{title}</p>
-        <p className={styles.price}>{price.toLocaleString()}원</p>
-        <p className={styles.likes}>
-          <img src={heartIcon} alt="좋아요" className={styles.icon} />
-          <span className={styles.count}>{likes}</span>
-        </p>
+    <Link to={`/items/${id}`} className={styles.cardLink}>
+      <div className={styles.card}>
+        <img
+          src={imageUrl || "/no-img.svg"}
+          alt={title}
+          className={variant === "best" ? styles.bestImg : styles.allImg}
+          onError={(e) => {
+            e.currentTarget.src = "/no-img.svg";
+          }}
+        />
+        <div className={styles.info}>
+          <p className={styles.title}>{title}</p>
+          <p className={styles.price}>{price.toLocaleString()}원</p>
+          <p className={styles.likes}>
+            <img src={heartIcon} alt="좋아요" className={styles.icon} />
+            <span className={styles.count}>{likes}</span>
+          </p>
+        </div>
       </div>
-    </div>
+    </Link>
   );
 };
 

src/components/ProductCard/ProductCard.module.css

@@ -1,3 +1,7 @@
+.cardLink {
+  text-decoration: none;
+}
+
 .card {
   display: flex;
   flex-direction: column;