[정상인] sprint 7

vite-project/src/App.jsx

@@ -4,6 +4,7 @@ import ItemsPage from "./pages/ItemsPage";
 import AddItemPage from "./pages/AddItemPage";
 import Layout from "./layout/Layout";
 import FreeBoard from "./pages/FreeBoardPage";
+import ItemDetailPage from "./pages/ItemDetailPage";
 
 function App() {
   return (
@@ -12,7 +13,10 @@ function App() {
       <Route path="/" element={<Navigate to="/items" />} />
 
       <Route element={<Layout />}>
-        <Route path="/items" element={<ItemsPage />} />
+        <Route path="/items">
+          <Route index element={<ItemsPage />} />
+          <Route path=":productId" element={<ItemDetailPage />} />
+        </Route>
         <Route path="/addItem" element={<AddItemPage />} />
         {/* freeBoard :  link active 테스트를 위해 미리 만듦 */}
         <Route path="/freeBoard" element={<FreeBoard />} />{" "}

vite-project/src/common/ProductCard/index.jsx

@@ -1,9 +1,17 @@
-import React from "react";
+import { useNavigate } from "react-router";
 import "./ProductCard.style.css";
 
 const ProductCard = ({ product, category }) => {
+  const navigate = useNavigate();
+
+  const handleClickProductCard = () => {
+    console.log(product.id);
+    // navigate("/Test");
+    navigate(`/items/${product.id}`);
+  };
+
   return (
-    <div className="product-card">
+    <div className="product-card" onClick={handleClickProductCard}>
       <img
         src={product.images[0] || "/images/none-img.jpeg"}
         alt="product-img"

vite-project/src/constants/PRODUCTS.js

@@ -2,4 +2,7 @@ export const ORDER_BYS = {
   최신순: "recent",
   좋아요순: "favorite",
 };
+
+export const DROPDOWN_MENUS = Object.keys(ORDER_BYS);
+
 export const GROUP_SIZE = 5;

vite-project/src/hooks/useGetProducts.js

@@ -1,8 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
 import instance from "../api/axiosInstance";
 
-const getProducts = async ({ page = 1, orderBy = "recent", pageSize = 10 }) => {
-  return await instance.get("/products", {
+const getProducts = ({ page = 1, orderBy = "recent", pageSize = 10 }) => {
+  return instance.get("/products", {
     params: { page, orderBy, pageSize },
   });
 };

vite-project/src/pages/ItemDetailPage/index.jsx

@@ -0,0 +1,5 @@
+const ItemDetailPage = () => {
+  return <div>index</div>;
+};
+
+export default ItemDetailPage;

vite-project/src/pages/ItemsPage/components/ProductAll/ProductAllMenuBar.jsx

@@ -2,6 +2,7 @@ import { useNavigate } from "react-router";
 import DropDown from "../../../../common/Dropdown";
 import { useMediaQuery } from "react-responsive";
 import { ORDER_BYS } from "../../../../constants/PRODUCTS";
+import { DROPDOWN_MENUS } from "../../../../constants/PRODUCTS";
 
 const ProductAllMenuBar = ({
   isOpenDropdown,
@@ -11,14 +12,13 @@ const ProductAllMenuBar = ({
 }) => {
   const navigate = useNavigate();
   const isMobile = useMediaQuery({ maxWidth: 767 });
-  const DROPDOWN_MENUS = Object.keys(ORDER_BYS);
   const selectedDropdownValue = DROPDOWN_MENUS.find(
     (key) => ORDER_BYS[key] === orderBy
   );
 
   return (
     <div className="product-all">
-      <h1 className="product-category-description">전체 상품</h1>
+      <h2 className="product-category-description">전체 상품</h2>
       <div className="product-all-topbar">
         <div className="product-all-menus">
           <form className="product-search-form">

vite-project/src/pages/ItemsPage/components/ProductBest/index.jsx

@@ -21,7 +21,7 @@ const ProductBest = () => {
   if (isError) return <ErrorMessage errorMessage={error.message} />;
   return (
     <div className="productBest-layout">
-      <h1 className="product-category-description">베스트 상품</h1>
+      <h2 className="product-category-description">베스트 상품</h2>
       <ProductList products={bestProducts.list} className="product-best-list" />
     </div>
   );