diff --git a/vite-project/package-lock.json b/vite-project/package-lock.json
index 58b22412..2d7d880b 100644
--- a/vite-project/package-lock.json
+++ b/vite-project/package-lock.json
@@ -2884,9 +2884,9 @@
       }
     },
     "node_modules/react-router": {
-      "version": "7.7.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.7.0.tgz",
-      "integrity": "sha512-3FUYSwlvB/5wRJVTL/aavqHmfUKe0+Xm9MllkYgGo9eDwNdkvwlJGjpPxono1kCycLt6AnDTgjmXvK3/B4QGuw==",
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.8.2.tgz",
+      "integrity": "sha512-7M2fR1JbIZ/jFWqelpvSZx+7vd7UlBTfdZqf6OSdF9g6+sfdqJDAWcak6ervbHph200ePlu+7G8LdoiC3ReyAQ==",
       "license": "MIT",
       "dependencies": {
         "cookie": "^1.0.1",
diff --git a/vite-project/src/App.jsx b/vite-project/src/App.jsx
index 8ad11bfe..6fa5a9c8 100644
--- a/vite-project/src/App.jsx
+++ b/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 />} />{" "}
diff --git a/vite-project/src/common/ProductCard/index.jsx b/vite-project/src/common/ProductCard/index.jsx
index 35795ae4..1e37fcb3 100644
--- a/vite-project/src/common/ProductCard/index.jsx
+++ b/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"
diff --git a/vite-project/src/constants/PRODUCTS.js b/vite-project/src/constants/PRODUCTS.js
index c08eb7c1..199f9aa5 100644
--- a/vite-project/src/constants/PRODUCTS.js
+++ b/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;
diff --git a/vite-project/src/hooks/useGetProducts.js b/vite-project/src/hooks/useGetProducts.js
index 13c36521..6c675255 100644
--- a/vite-project/src/hooks/useGetProducts.js
+++ b/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 },
   });
 };
diff --git a/vite-project/src/pages/ItemDetailPage/index.jsx b/vite-project/src/pages/ItemDetailPage/index.jsx
new file mode 100644
index 00000000..b9af7be4
--- /dev/null
+++ b/vite-project/src/pages/ItemDetailPage/index.jsx
@@ -0,0 +1,5 @@
+const ItemDetailPage = () => {
+  return <div>index</div>;
+};
+
+export default ItemDetailPage;
diff --git a/vite-project/src/pages/ItemsPage/components/ProductAll/ProductAllMenuBar.jsx b/vite-project/src/pages/ItemsPage/components/ProductAll/ProductAllMenuBar.jsx
index 074edae1..c46af9b3 100644
--- a/vite-project/src/pages/ItemsPage/components/ProductAll/ProductAllMenuBar.jsx
+++ b/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">
diff --git a/vite-project/src/pages/ItemsPage/components/ProductBest/index.jsx b/vite-project/src/pages/ItemsPage/components/ProductBest/index.jsx
index d53f1f4e..cf3f606b 100644
--- a/vite-project/src/pages/ItemsPage/components/ProductBest/index.jsx
+++ b/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>
   );