diff --git a/.gitignore b/.gitignore
index 4d29575d..8692cf66 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
diff --git a/config-overrides.js b/config-overrides.js
new file mode 100644
index 00000000..8211df69
--- /dev/null
+++ b/config-overrides.js
@@ -0,0 +1,8 @@
+const { override, addWebpackAlias } = require("customize-cra");
+const path = require("path");
+
+module.exports = override(
+  addWebpackAlias({
+    "@": path.resolve(__dirname, "src"),
+  })
+);
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 00000000..5879100c
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "paths": {
+      "@/*": ["*"]
+    }
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index d0c73eca..edfa2c2a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "1-weekly-mission",
+  "name": "sprint-mission-panda-market",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "1-weekly-mission",
+      "name": "sprint-mission-panda-market",
       "version": "0.1.0",
       "dependencies": {
         "@emotion/react": "^11.14.0",
@@ -18,6 +18,10 @@
         "react-router-dom": "^6.30.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "customize-cra": "^1.0.0",
+        "react-app-rewired": "^2.2.1"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -2003,6 +2007,30 @@
       "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
     },
+    "node_modules/@cspotcode/source-map-support": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
+      "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/trace-mapping": "0.3.9"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+      "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
     "node_modules/@csstools/normalize.css": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz",
@@ -4040,6 +4068,34 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@tsconfig/node10": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
+      "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/@tsconfig/node12": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/@tsconfig/node14": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/@tsconfig/node16": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
+      "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/@types/aria-query": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.1.tgz",
@@ -4986,9 +5042,9 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
-      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -6386,6 +6442,13 @@
         "node": ">=10"
       }
     },
+    "node_modules/create-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -6802,6 +6865,15 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
+    "node_modules/customize-cra": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/customize-cra/-/customize-cra-1.0.0.tgz",
+      "integrity": "sha512-DbtaLuy59224U+xCiukkxSq8clq++MOtJ1Et7LED1fLszWe88EoblEYFBJ895sB1mC6B4uu3xPT/IjClELhMbA==",
+      "dev": true,
+      "dependencies": {
+        "lodash.flow": "^3.5.0"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -7001,6 +7073,16 @@
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
     },
+    "node_modules/diff": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
     "node_modules/diff-sequences": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz",
@@ -12274,6 +12356,12 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
+    "node_modules/lodash.flow": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz",
+      "integrity": "sha512-ff3BX/tSioo+XojX4MOsOMhJw0nZoUEF011LX8g8d3gvjVbxd89cCio4BCXronjxcTUIJUoqKEUA+n4CqvvRPw==",
+      "dev": true
+    },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -12359,6 +12447,13 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/makeerror": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
@@ -14705,6 +14800,30 @@
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
       "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
+    "node_modules/react-app-rewired": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-app-rewired/-/react-app-rewired-2.2.1.tgz",
+      "integrity": "sha512-uFQWTErXeLDrMzOJHKp0h8P1z0LV9HzPGsJ6adOtGlA/B9WfT6Shh4j2tLTTGlXOfiVx6w6iWpp7SOC5pvk+gA==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^5.6.0"
+      },
+      "bin": {
+        "react-app-rewired": "bin/index.js"
+      },
+      "peerDependencies": {
+        "react-scripts": ">=2.1.3"
+      }
+    },
+    "node_modules/react-app-rewired/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -16674,6 +16793,70 @@
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
     },
+    "node_modules/ts-node": {
+      "version": "10.9.2",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
+      "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@cspotcode/source-map-support": "^0.8.0",
+        "@tsconfig/node10": "^1.0.7",
+        "@tsconfig/node12": "^1.0.7",
+        "@tsconfig/node14": "^1.0.0",
+        "@tsconfig/node16": "^1.0.2",
+        "acorn": "^8.4.1",
+        "acorn-walk": "^8.1.1",
+        "arg": "^4.1.0",
+        "create-require": "^1.1.0",
+        "diff": "^4.0.1",
+        "make-error": "^1.1.1",
+        "v8-compile-cache-lib": "^3.0.1",
+        "yn": "3.1.1"
+      },
+      "bin": {
+        "ts-node": "dist/bin.js",
+        "ts-node-cwd": "dist/bin-cwd.js",
+        "ts-node-esm": "dist/bin-esm.js",
+        "ts-node-script": "dist/bin-script.js",
+        "ts-node-transpile-only": "dist/bin-transpile.js",
+        "ts-script": "dist/bin-script-deprecated.js"
+      },
+      "peerDependencies": {
+        "@swc/core": ">=1.2.50",
+        "@swc/wasm": ">=1.2.50",
+        "@types/node": "*",
+        "typescript": ">=2.7"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "@swc/wasm": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ts-node/node_modules/acorn-walk": {
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
+      "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "acorn": "^8.11.0"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/ts-node/node_modules/arg": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.14.2",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz",
@@ -17034,6 +17217,13 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/v8-compile-cache-lib": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
+      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/v8-to-istanbul": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz",
@@ -18013,6 +18203,16 @@
         "node": ">=10"
       }
     },
+    "node_modules/yn": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+      "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index 18e6f004..be3bdb10 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "1-weekly-mission",
+  "name": "sprint-mission-panda-market",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -15,9 +15,9 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -37,5 +37,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "customize-cra": "^1.0.0",
+    "react-app-rewired": "^2.2.1"
   }
 }
diff --git a/src/Main.jsx b/src/Main.jsx
index 152a9a35..f794abfa 100644
--- a/src/Main.jsx
+++ b/src/Main.jsx
@@ -4,6 +4,7 @@ import ProductsPage from "./pages/products/ProductsPage";
 import BoardPage from "./pages/board/BoardPage";
 import AddProductPage from "./pages/products/AddProductPage";
 import ProductsLayout from "./pages/products/ProductsLayout";
+import ProductDetailPage from "./pages/products/ProductDetailPage";
 
 const Main = () => {
   return (
@@ -15,6 +16,7 @@ const Main = () => {
           <Route path="/products" element={<ProductsLayout />}>
             <Route index element={<ProductsPage />} />
             <Route path="addProduct" element={<AddProductPage />} />
+            <Route path=":id" element={<ProductDetailPage />} />
           </Route>
 
           <Route path="/board" element={<BoardPage />} />
diff --git a/src/assets/images/ic-like.svg b/src/assets/images/ic-like.svg
index 576d3a17..c207a0e3 100644
--- a/src/assets/images/ic-like.svg
+++ b/src/assets/images/ic-like.svg
@@ -1,3 +1,3 @@
-<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.59998 0.599609C11.4717 0.599609 12.9797 2.03751 13.1244 3.90234L13.1332 4.08398V4.2002C13.1331 5.24212 12.7296 6.14487 12.0609 6.75781L11.8666 6.93652V6.98047C11.7656 7.06604 11.6353 7.17783 11.4838 7.30957C11.1466 7.60273 10.695 8.00038 10.2035 8.43359C9.22168 9.29892 8.07966 10.3083 7.349 10.9395C7.17258 11.0862 6.89856 11.0865 6.72107 10.9414C5.98886 10.309 4.82568 9.2963 3.8363 8.43164C3.34071 7.99852 2.88886 7.6028 2.55701 7.31152C2.40687 7.17974 2.28741 7.07349 2.19958 6.99609V6.95117L2.02478 6.77539C1.33102 6.08163 0.933037 5.16559 0.932983 4.2002V4.08496C0.989767 2.21111 2.58945 0.666992 4.46716 0.666992C4.74534 0.667098 5.11403 0.763919 5.48181 0.961914C5.83372 1.1514 6.14175 1.41108 6.34412 1.7002C6.64091 2.30642 7.51663 2.29878 7.79919 1.67773C7.96446 1.37509 8.26407 1.10098 8.62537 0.899414C8.99296 0.694412 9.35963 0.599626 9.59998 0.599609Z" stroke="#4B5563" stroke-width="1.2"/>
+<svg width="14" height="12" viewBox="0 0 14 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.59998 0.599609C11.4717 0.599609 12.9797 2.03751 13.1244 3.90234L13.1332 4.08398V4.2002C13.1331 5.24212 12.7296 6.14487 12.0609 6.75781L11.8666 6.93652V6.98047C11.7656 7.06604 11.6353 7.17783 11.4838 7.30957C11.1466 7.60273 10.695 8.00038 10.2035 8.43359C9.22168 9.29892 8.07966 10.3083 7.349 10.9395C7.17258 11.0862 6.89856 11.0865 6.72107 10.9414C5.98886 10.309 4.82568 9.2963 3.8363 8.43164C3.34071 7.99852 2.88886 7.6028 2.55701 7.31152C2.40687 7.17974 2.28741 7.07349 2.19958 6.99609V6.95117L2.02478 6.77539C1.33102 6.08163 0.933037 5.16559 0.932983 4.2002V4.08496C0.989767 2.21111 2.58945 0.666992 4.46716 0.666992C4.74534 0.667098 5.11403 0.763919 5.48181 0.961914C5.83372 1.1514 6.14175 1.41108 6.34412 1.7002C6.64091 2.30642 7.51663 2.29878 7.79919 1.67773C7.96446 1.37509 8.26407 1.10098 8.62537 0.899414C8.99296 0.694412 9.35963 0.599626 9.59998 0.599609Z" stroke="currentColor" stroke-width="1.2"/>
 </svg>
diff --git a/src/assets/images/ic_arrow_left.svg b/src/assets/images/ic_arrow_left.svg
new file mode 100644
index 00000000..8694af91
--- /dev/null
+++ b/src/assets/images/ic_arrow_left.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5332 0.600122C3.03615 0.600122 2.6332 1.00307 2.6332 1.50012C2.6332 1.99718 3.03615 2.40012 3.5332 2.40012V0.600122ZM3.5332 2.40012H13.6665V0.600122H3.5332V2.40012ZM18.0999 6.83345V7.90012H19.8999V6.83345H18.0999ZM13.6665 12.3335H3.5332V14.1335H13.6665V12.3335ZM18.0999 7.90012C18.0999 10.3486 16.115 12.3335 13.6665 12.3335V14.1335C17.1091 14.1335 19.8999 11.3427 19.8999 7.90012H18.0999ZM13.6665 2.40012C16.115 2.40012 18.0999 4.38499 18.0999 6.83345H19.8999C19.8999 3.39088 17.1091 0.600122 13.6665 0.600122V2.40012Z" fill="white"/>
+<path d="M-1.86502e-07 13.2335L7.2 9.53841L7.2 16.9285L-1.86502e-07 13.2335Z" fill="white"/>
+</svg>
diff --git a/src/assets/images/ic_kebab.svg b/src/assets/images/ic_kebab.svg
new file mode 100644
index 00000000..85b6a28f
--- /dev/null
+++ b/src/assets/images/ic_kebab.svg
@@ -0,0 +1,5 @@
+<svg width="3" height="13" viewBox="0 0 3 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="1.5" cy="1.50012" r="1.5" fill="#9CA3AF"/>
+<circle cx="1.5" cy="6.50012" r="1.5" fill="#9CA3AF"/>
+<circle cx="1.5" cy="11.5001" r="1.5" fill="#9CA3AF"/>
+</svg>
diff --git a/src/assets/images/img_inquiry_empty.png b/src/assets/images/img_inquiry_empty.png
new file mode 100644
index 00000000..db88528b
Binary files /dev/null and b/src/assets/images/img_inquiry_empty.png differ
diff --git a/src/components/CommentList/CommentList.jsx b/src/components/CommentList/CommentList.jsx
new file mode 100644
index 00000000..2af8859c
--- /dev/null
+++ b/src/components/CommentList/CommentList.jsx
@@ -0,0 +1,214 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import inquiryEmptyImg from "@/assets/images/img_inquiry_empty.png";
+import Button from "@/components/ui/Button";
+import ProfileSummary from "@/components/ProfileSummary";
+import Dropdown from "@/components/ui/Dropdown/Dropdown";
+import CursorPagination from "@/components/Pagination/CursorPagination";
+import KebabButton from "@/components/ui/Button/KebabButton";
+import Textarea from "@/components/ui/Textarea";
+import useWindowDimensions from "@/hooks/useWindowDimensions";
+import { BREAKPOINTS } from "@/constants/responsive";
+import useComment from "@/hooks/useComment";
+
+const dropdownItems = ["수정하기", "삭제하기"];
+
+const CommentList = ({ productId }) => {
+  const {
+    // 상태
+    comments,
+    nextCursor,
+    isEditCommentId,
+    dropdownCommentId,
+    isCommentPageReady,
+
+    // 로딩/에러
+    isLoading,
+    isLoadError,
+    updatingComment,
+    updateCommentError,
+    showFallback,
+
+    // 핸들러
+    handleCommentLoad,
+    handleUpdateComment,
+    handleUpdateCommentCancel,
+    toggleDropdown,
+    handleDropdownSelect,
+  } = useComment(productId);
+
+  const isLoadingDelayed = isLoading && showFallback;
+  const isCommentEmpty = !isLoading && comments.length === 0;
+  const isCommentReady = isCommentPageReady && comments.length !== 0;
+
+  return (
+    <div css={CommentListStyle}>
+      {isLoadingDelayed && <p>댓글 로딩중...</p>}
+      {isLoadError && <p>댓글을 불러오는 데 문제가 발생했습니다.</p>}
+      {isCommentEmpty && <CommentEmpty />}
+
+      <ol className="comments">
+        {comments?.map((cmt) => (
+          <li className="comment" key={cmt.id}>
+            {isEditCommentId === cmt.id ? (
+              <CommentUpdate
+                content={cmt.content}
+                commentId={cmt.id}
+                onUpdate={handleUpdateComment}
+                onUpdateCancel={handleUpdateCommentCancel}
+                isUpdating={updatingComment}
+                isError={updateCommentError}
+              />
+            ) : (
+              <p className="comment-content">{cmt.content}</p>
+            )}
+
+            {isEditCommentId !== cmt.id && (
+              <KebabButton
+                onClick={() => toggleDropdown(cmt.id)}
+                alt="댓글 수정/삭제"
+              />
+            )}
+
+            {dropdownCommentId === cmt.id && isEditCommentId !== cmt.id && (
+              <Dropdown
+                items={dropdownItems}
+                onClick={(e) => handleDropdownSelect(e, cmt.id)}
+                isDropdownOpen={dropdownCommentId === cmt.id}
+                isCommentDropdown={true}
+              />
+            )}
+
+            <div className="comment-container">
+              <ProfileSummary
+                name={cmt.writer.nickname}
+                imgSrc={cmt.image}
+                createdAt={cmt.updatedAt}
+                size="sm"
+              />
+            </div>
+          </li>
+        ))}
+      </ol>
+
+      {isCommentReady && (
+        <CursorPagination
+          firstCursor={nextCursor}
+          handleLoad={handleCommentLoad}
+        />
+      )}
+    </div>
+  );
+};
+
+export default CommentList;
+
+const CommentListStyle = css`
+  .comments > li {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 24px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--gray300);
+  }
+
+  .kebab-btn {
+    position: absolute;
+    right: -12px;
+    top: -4px;
+    padding: 10px 12px;
+  }
+
+  .comment-content {
+    margin-bottom: 24px;
+    font-size: 14px;
+  }
+`;
+
+const CommentUpdate = ({
+  content,
+  commentId,
+  onUpdate,
+  onUpdateCancel,
+  isUpdating,
+  isError,
+}) => {
+  return (
+    <div css={CommentUpdateStyle}>
+      <Textarea
+        id={commentId}
+        name="comment-content"
+        defaultValue={content}
+        data-comment-id={commentId}
+      />
+      <div className="comment-actions">
+        {isError && <p className="error-msg">댓글 수정에 실패했습니다.</p>}
+        <Button size="sm" onClick={onUpdateCancel}>
+          취소
+        </Button>
+        <Button variant="primary" size="sm" onClick={() => onUpdate(commentId)}>
+          {isUpdating ? "수정중" : "수정 완료"}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const CommentUpdateStyle = css`
+  textarea {
+    width: 100%;
+    max-height: 80px;
+    margin-bottom: 16px;
+  }
+
+  button {
+    padding: 14px 20px;
+  }
+
+  .comment-actions {
+    position: absolute;
+    right: 0;
+    bottom: 16px;
+    z-index: 1;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+
+    .error-msg {
+      margin-right: 20px;
+      font-size: 14px;
+      color: var(--error-color);
+    }
+  }
+`;
+
+const CommentEmpty = () => {
+  const { width: innerWidth } = useWindowDimensions();
+
+  return (
+    <div css={CommentEmptyStyle}>
+      <img
+        src={inquiryEmptyImg}
+        alt="전화기 들고 물음표 띄우는 판다 이미지"
+        width={innerWidth > BREAKPOINTS.desktop ? 174 : 124}
+        height={innerWidth > BREAKPOINTS.desktop ? 138 : 98}
+      />
+      <p className="txt">아직 문의가 없어요</p>
+    </div>
+  );
+};
+
+const CommentEmptyStyle = css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 40px;
+  padding: 30px 0 0;
+
+  .txt {
+    color: var(--gray400);
+    font-size: 16px;
+  }
+`;
diff --git a/src/components/CommentList/index.js b/src/components/CommentList/index.js
new file mode 100644
index 00000000..c8dd76c0
--- /dev/null
+++ b/src/components/CommentList/index.js
@@ -0,0 +1 @@
+export { default } from "./CommentList";
diff --git a/src/components/Form/AddProductForm.jsx b/src/components/Form/AddProductForm.jsx
index ff27f014..f700462a 100644
--- a/src/components/Form/AddProductForm.jsx
+++ b/src/components/Form/AddProductForm.jsx
@@ -1,4 +1,5 @@
 /** @jsxImportSource @emotion/react */
+import { useRef } from "react";
 import * as styles from "./AddProductFormStyle";
 import SectionTitle from "../ui/SectionTitle";
 import Button from "../ui/Button";
@@ -11,6 +12,14 @@ import TagsInput from "../ui/Tag/TagsInput";
 import useForm from "../../hooks/useForm";
 
 const AddProductForm = ({ title }) => {
+  const formRef = useRef(null);
+
+  const formOptions = {
+    customFieldValidators: {
+      tags: (tags) => tags.length > 0,
+    },
+  };
+
   const {
     tags,
     handleTagsChange,
@@ -18,10 +27,15 @@ const AddProductForm = ({ title }) => {
     handleBlur,
     validateForm,
     isFormValid,
-  } = useForm();
+  } = useForm(formRef, formOptions);
 
   return (
-    <form css={styles.ProductFormContainer} onSubmit={validateForm}>
+    <form
+      css={styles.ProductFormContainer}
+      onSubmit={validateForm}
+      ref={formRef}
+      data-include-tags="true"
+    >
       <header css={styles.FormHeader}>
         <SectionTitle title={title} />
         <Button
@@ -77,6 +91,7 @@ const AddProductForm = ({ title }) => {
           id="tags"
           placeholder="태그를 입력해주세요"
           tags={tags}
+          isFormTag={true}
           onTagsChange={handleTagsChange}
           onBlur={handleBlur}
         />
diff --git a/src/components/ImageFileUploader/ImageFileUploader.jsx b/src/components/ImageFileUploader/ImageFileUploader.jsx
index a8c64229..63b26bd7 100644
--- a/src/components/ImageFileUploader/ImageFileUploader.jsx
+++ b/src/components/ImageFileUploader/ImageFileUploader.jsx
@@ -80,7 +80,9 @@ const ImageFileUploader = () => {
           </div>
         )}
       </div>
-      <p className="hint">*이미지 등록은 최대 1개까지 가능합니다.</p>
+      {!previewUrl && (
+        <p className="hint">*이미지 등록은 최대 1개까지 가능합니다.</p>
+      )}
     </div>
   );
 };
diff --git a/src/components/ImageFileUploader/ImageFileUploaderStyle.js b/src/components/ImageFileUploader/ImageFileUploaderStyle.js
index cae79bf0..b2e246d0 100644
--- a/src/components/ImageFileUploader/ImageFileUploaderStyle.js
+++ b/src/components/ImageFileUploader/ImageFileUploaderStyle.js
@@ -29,8 +29,8 @@ const styles = {
     align-items: center;
     justify-content: center;
     gap: 12px;
-    width: calc(48% - 12px);
-    max-width: 168px;
+    width: 50%;
+    max-width: 50%;
     aspect-ratio: 1/1;
     flex-grow: 1;
     background-color: var(--gray200);
@@ -38,10 +38,6 @@ const styles = {
     border-radius: var(--border-radius-sm);
     font-size: 1rem;
 
-    @media (min-width: 600px) {
-      max-width: var(--form-input-max-height);
-    }
-
     @media (min-width: 768px) {
       width: auto;
       height: var(--form-input-max-height);
@@ -51,7 +47,7 @@ const styles = {
 
   ImagePreviewStyle: css`
     position: relative;
-    width: calc(48% - 12px);
+    width: 50%;
     aspect-ratio: 1/1;
     flex-grow: 1;
     border-radius: var(--border-radius-sm);
diff --git a/src/components/Pagination/CursorPagination.jsx b/src/components/Pagination/CursorPagination.jsx
new file mode 100644
index 00000000..55c38f25
--- /dev/null
+++ b/src/components/Pagination/CursorPagination.jsx
@@ -0,0 +1,15 @@
+import usePaginationCursor from "@/hooks/usePaginationCursor";
+import Pagination from "./Pagination";
+
+const CursorPagination = ({ firstCursor = null, handleLoad }) => {
+  const { pageData, pageActions } = usePaginationCursor({
+    firstCursor,
+    onCursorChange: (nextCursor) => {
+      handleLoad(nextCursor, pageActions.setNextCursor);
+    },
+  });
+
+  return <Pagination pageData={pageData} pageActions={pageActions} />;
+};
+
+export default CursorPagination;
diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx
index ccfcefb3..fb605ed4 100644
--- a/src/components/Pagination/Pagination.jsx
+++ b/src/components/Pagination/Pagination.jsx
@@ -1,72 +1,51 @@
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
-import { useCallback, useEffect } from "react";
 import arrowLeft from "../../assets/images/ic_arrow_sm_left.svg";
 import arrowRight from "../../assets/images/ic_arrow_sm_right.svg";
-import usePagination from "../../hooks/usePagination";
-import { DEFAULT_ITEM_PAGE_SIZE } from "../../constants/pagesize.js";
+import Button from "../ui/Button";
 
-const PAGINATION_SIZE = 5;
-
-const Pagination = ({
-  pageSize = DEFAULT_ITEM_PAGE_SIZE,
-  totalCount,
-  paginationSize = PAGINATION_SIZE,
-  handleLoad,
-  orderStatus,
-  searchKeyword,
-}) => {
-  const { pageData, pageActions } = usePagination({
-    totalCount,
-    pageSize,
-    paginationSize,
-    onPageChange: useCallback(
-      (page) => {
-        handleLoad({
-          page,
-          pageSize,
-          orderBy: orderStatus,
-          keyword: searchKeyword,
-        });
-      },
-      [handleLoad, pageSize, orderStatus, searchKeyword]
-    ),
-  });
-
-  const { currentPage, currentPages, hasPrev, hasNext } = pageData;
-  const { goToPage, goPrevPages, goNextPages, updatePageWithResize } =
+const Pagination = ({ pageData, pageActions }) => {
+  const { currentPage, currentPages, currentCursor, hasPrev, hasNext } =
+    pageData;
+  const { goToPage, goPrevPages, goNextPages, goToPrev, goToNext } =
     pageActions;
 
-  // 정렬 바뀌면 첫번째 페이지로 이동
-  useEffect(() => {
-    goToPage(1);
-  }, [orderStatus, goToPage]);
-
-  // resize시 보고 있던 페이지 유지
-  useEffect(() => {
-    updatePageWithResize(pageSize);
-  }, [pageSize, updatePageWithResize]);
+  // 커서 기반 분기
+  const isCursor = !!currentCursor || (!currentPage && !currentPages);
 
   return (
     <div css={PaginationStyle}>
       <button
-        onClick={goPrevPages}
+        onClick={isCursor ? goToPrev : goPrevPages}
         css={PaginationBtnStyle(false)}
         disabled={!hasPrev}
       >
         <img src={arrowLeft} alt="이전 페이지" />
       </button>
-      {currentPages.map((page) => (
-        <button
-          key={page}
-          onClick={() => goToPage(page)}
-          css={PaginationBtnStyle(page === currentPage)}
-        >
-          {page}
-        </button>
-      ))}
+
+      {isCursor ? (
+        <>
+          <Button size="sm" onClick={goToPrev} disabled={!hasPrev}>
+            이전 페이지
+          </Button>
+          <Button size="sm" onClick={goToNext} disabled={!hasNext}>
+            다음 페이지
+          </Button>
+        </>
+      ) : (
+        currentPages.map((page) => (
+          <button
+            key={page}
+            onClick={() => goToPage(page)}
+            css={PaginationBtnStyle(page === currentPage)}
+          >
+            {page}
+          </button>
+        ))
+      )}
+
       <button
-        onClick={goNextPages}
+        onClick={isCursor ? goToNext : goNextPages}
         css={PaginationBtnStyle(false)}
         disabled={!hasNext}
       >
diff --git a/src/components/Pagination/TotalCountPagination.jsx b/src/components/Pagination/TotalCountPagination.jsx
new file mode 100644
index 00000000..e91af688
--- /dev/null
+++ b/src/components/Pagination/TotalCountPagination.jsx
@@ -0,0 +1,44 @@
+import { useEffect, useRef } from "react";
+import usePaginationTotalCount from "@/hooks/usePaginationTotalCount";
+import Pagination from "./Pagination";
+
+const TotalCountPagination = ({
+  totalCount,
+  pageSize,
+  handleLoad,
+  orderStatus,
+  searchKeyword,
+}) => {
+  const { pageData, pageActions } = usePaginationTotalCount({
+    pageSize,
+    totalCount,
+    onPageChange: (page) => {
+      handleLoad({
+        page,
+        pageSize,
+        orderBy: orderStatus,
+        keyword: searchKeyword,
+      });
+    },
+  });
+  const { goToPage, updatePageWithResize } = pageActions;
+
+  // 정렬 바뀌면 첫번째 페이지로 이동
+  const prevOrderStatusRef = useRef(orderStatus);
+  useEffect(() => {
+    // goToPage 무한 루프 방지
+    if (prevOrderStatusRef.current !== orderStatus) {
+      prevOrderStatusRef.current = orderStatus;
+      goToPage(1);
+    }
+  }, [orderStatus, goToPage]);
+
+  // resize시 보고 있던 페이지 유지
+  useEffect(() => {
+    updatePageWithResize(pageSize);
+  }, [pageSize, updatePageWithResize]);
+
+  return <Pagination pageData={pageData} pageActions={pageActions} />;
+};
+
+export default TotalCountPagination;
diff --git a/src/components/ProductCard/ProductCard.jsx b/src/components/ProductCard/ProductCard.jsx
index 65d4616a..b48b65c1 100644
--- a/src/components/ProductCard/ProductCard.jsx
+++ b/src/components/ProductCard/ProductCard.jsx
@@ -1,15 +1,25 @@
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
 import { Link } from "react-router-dom";
-import likeImg from "../../assets/images/ic-like.svg";
+import { ReactComponent as HeartIcon } from "@/assets/images/ic-like.svg";
 import pandaLogoImg from "../../assets/images/logo-panda.svg";
+import { getProduct } from "@/services/get/getProduct";
+import { useEffect } from "react";
+import useAsync from "@/hooks/useAsync";
 
-const ProductCard = ({ data, loading = "lazy" }) => {
+const ProductCard = ({ productId, data, loading = "lazy" }) => {
   const { images, name, description, price, favoriteCount } = data;
+  const { data: productData, runAsync: getProductAsync } = useAsync(() =>
+    getProduct(productId)
+  );
+
+  useEffect(() => {
+    getProductAsync();
+  }, [getProductAsync]);
 
   return (
     <div css={ProductCardStyle}>
-      <Link to="/products">
+      <Link to={`/products/${productId}`} state={productData}>
         <span className="img-wrap">
           <img
             src={images}
@@ -26,7 +36,12 @@ const ProductCard = ({ data, loading = "lazy" }) => {
         <h4 className="item-price">{price.toLocaleString("ko-KR")}원</h4>
         <button className="btn-like">
           <span className="btn-like-ico">
-            <img className="ico-img" src={likeImg} alt="좋아요" />
+            <HeartIcon
+              aria-label="좋아요 갯수"
+              className="heart-icon"
+              width="100%"
+              height="100%"
+            />
           </span>
           <span className="btn-like-count">{favoriteCount}</span>
         </button>
@@ -72,8 +87,10 @@ export const ProductCardStyle = css`
     height: 16px;
   }
 
-  .btn-like-ico .ico-img {
+  .btn-like-ico .heart-icon {
     height: 100%;
     object-fit: contain;
+    stroke: 1px solid var(--gray600);
+    fill: #fff;
   }
 `;
diff --git a/src/components/ProductComments/ProductComments.jsx b/src/components/ProductComments/ProductComments.jsx
new file mode 100644
index 00000000..5ef42cfc
--- /dev/null
+++ b/src/components/ProductComments/ProductComments.jsx
@@ -0,0 +1,68 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import { useRef } from "react";
+import Textarea from "@/components/ui/Textarea";
+import FormControl from "@/components/ui/Form/FormControl";
+import FormLabel from "@/components/ui/Form/FormLabel";
+import useForm from "@/hooks/useForm";
+import Button from "@/components/ui/Button";
+import CommentList from "@/components/CommentList";
+import { BREAKPOINTS } from "@/constants/responsive";
+
+const ProductComments = ({ productId }) => {
+  const formRef = useRef(null);
+  const { handleBlur, isFormValid } = useForm(formRef);
+
+  return (
+    <section css={ProductCommentsStyle}>
+      <form className="comment-form" ref={formRef}>
+        <FormControl>
+          <FormLabel size="xs" inputId="productCmt">
+            문의하기
+          </FormLabel>
+          <Textarea
+            id="productCmt"
+            name="description"
+            placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
+            onBlur={handleBlur}
+            maxheight={104}
+          />
+        </FormControl>
+        <Button
+          size="sm"
+          variant="primary"
+          disabled={!isFormValid}
+          type="submit"
+          className="btn-submit"
+        >
+          등록
+        </Button>
+      </form>
+
+      <CommentList productId={productId} />
+    </section>
+  );
+};
+
+export default ProductComments;
+
+const ProductCommentsStyle = css`
+  .comment-container {
+    position: relative;
+  }
+
+  .comment-form {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin-bottom: 40px;
+
+    @media (min-width: ${BREAKPOINTS.desktop}px) {
+      margin-bottom: 24px;
+    }
+
+    .btn-submit {
+      margin-left: auto;
+    }
+  }
+`;
diff --git a/src/components/ProductInfo/ProductInfo.jsx b/src/components/ProductInfo/ProductInfo.jsx
new file mode 100644
index 00000000..64f1b814
--- /dev/null
+++ b/src/components/ProductInfo/ProductInfo.jsx
@@ -0,0 +1,94 @@
+/** @jsxImportSource @emotion/react */
+import ProfileSummary from "@/components/ProfileSummary/ProfileSummary";
+import TagList from "@/components/ui/Tag/TagList";
+import { ReactComponent as HeartIcon } from "@/assets/images/ic-like.svg";
+import Button from "@/components/ui/Button";
+import Divider from "@/components/ui/Divider";
+import { BREAKPOINTS } from "@/constants/responsive";
+import { useState } from "react";
+import ImageSkeleton from "@/components/ui/Skeletons/ImageSkeleton";
+import useWindowDimensions from "@/hooks/useWindowDimensions";
+import ProductInfoStyle from "./ProductInfoStyle";
+
+const ProductInfo = ({ product, thumbSize }) => {
+  const {
+    name,
+    images,
+    price,
+    description,
+    tags,
+    ownerNickname,
+    createdAt,
+    favoriteCount,
+  } = product;
+
+  const [addFavorite, setAddFavorite] = useState(false);
+  const toggleFavoriteCount = () => {
+    setAddFavorite((prev) => !prev);
+  };
+
+  const { width } = useWindowDimensions();
+
+  return (
+    <section css={ProductInfoStyle({ thumbSize, addFavorite })}>
+      <div className="product-img">
+        <ImageSkeleton
+          src={images}
+          alt={name}
+          width={thumbSize}
+          height={thumbSize}
+        />
+      </div>
+      <div className="product-info">
+        <h5 className="product-name">{name}</h5>
+        <h3 className="product-price">{price.toLocaleString("ko-KR")}원</h3>
+        <Divider />
+        <div className="product-description">
+          <div className="description-item">
+            <span className="description-title">상품 소개</span>
+            <p className="description">{description}</p>
+          </div>
+          <div className="description-item">
+            <span className="description-title">상품 태그</span>
+            <TagList tags={tags} isFormTag={false} />
+          </div>
+        </div>
+
+        <div className="product-info-footer">
+          <ProfileSummary
+            name={ownerNickname}
+            createdAt={createdAt}
+            favoriteCount={favoriteCount}
+            size="md"
+          />
+          <div className="actions">
+            <Button
+              variant="outlined"
+              round={true}
+              size="sm"
+              className="btn-favorite"
+              style={{
+                padding: "8px 14px",
+                minWidth: "88px",
+                height: "auto",
+              }}
+              onClick={toggleFavoriteCount}
+            >
+              <HeartIcon
+                aria-label="좋아요 갯수"
+                className="heart-icon"
+                width={width >= BREAKPOINTS.desktop ? 24 : 20}
+                height={width >= BREAKPOINTS.desktop ? 24 : 20}
+              />
+              <span className="favorite-count">
+                {addFavorite ? favoriteCount + 1 : favoriteCount}
+              </span>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ProductInfo;
diff --git a/src/components/ProductInfo/ProductInfoStyle.js b/src/components/ProductInfo/ProductInfoStyle.js
new file mode 100644
index 00000000..f770b65f
--- /dev/null
+++ b/src/components/ProductInfo/ProductInfoStyle.js
@@ -0,0 +1,123 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import { BREAKPOINTS } from "@/constants/responsive";
+
+const ProductInfoStyle = ({ thumbSize, addFavorite }) => css`
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin-bottom: 40px;
+
+  @media (min-width: ${BREAKPOINTS.tablet + 120}px) {
+    flex-wrap: nowrap;
+  }
+
+  @media (min-width: ${BREAKPOINTS.desktop}px) {
+    gap: 24px;
+  }
+
+  .product-img {
+    width: ${typeof thumbSize === "number" ? `${thumbSize}px` : thumbSize};
+    height: ${typeof thumbSize === "number" ? `${thumbSize}px` : thumbSize};
+    aspect-ratio: 1/1;
+    border-radius: var(--thumb-border-radius);
+    overflow: hidden;
+    flex-shrink: 0;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .product-info {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .product-name {
+    font-size: 16px;
+    margin-bottom: 8px;
+    color: var(--secondary-color);
+
+    @media (min-width: ${BREAKPOINTS.tablet}px) {
+      font-size: 20px;
+    }
+
+    @media (min-width: ${BREAKPOINTS.desktop}px) {
+      font-size: 24px;
+      margin-bottom: 16px;
+    }
+  }
+
+  .product-price {
+    font-size: 24px;
+    margin-bottom: 16px;
+    color: var(--secondary-color);
+
+    @media (min-width: ${BREAKPOINTS.tablet}px) {
+      font-size: 32px;
+    }
+
+    @media (min-width: ${BREAKPOINTS.desktop}px) {
+      font-size: 40px;
+    }
+  }
+
+  .product-description {
+    margin-bottom: 16px;
+  }
+
+  .description-item {
+    margin-bottom: 24px;
+
+    .description-title {
+      display: block;
+      margin-bottom: 8px;
+      font-size: 14px;
+      color: var(--text-primary);
+      font-weight: 600;
+
+      @media (min-width: ${BREAKPOINTS.desktop}px) {
+        margin-bottom: 16px;
+        font-size: 16px;
+      }
+    }
+
+    .description {
+      color: var(--secondary-color);
+    }
+  }
+
+  .product-info-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: auto;
+
+    .actions {
+      margin-left: 24px;
+      padding-left: 24px;
+      border-left: 1px solid var(--gray300);
+    }
+  }
+
+  .btn-favorite {
+    border-color: ${addFavorite ? "var(--primary-color)" : "var(--gray300)"};
+    color: ${addFavorite ? "var(--primary-color)" : "var(--gray500)"};
+
+    &:hover {
+      border-color: var(--primary-color);
+    }
+  }
+  .heart-icon {
+    fill: ${addFavorite ? "var(--primary-color)" : "#fff"};
+    stroke: ${addFavorite
+      ? "1px solid transparent"
+      : "1px solid var(--gray500)"};
+  }
+`;
+
+export default ProductInfoStyle;
diff --git a/src/components/ProductInfo/index.js b/src/components/ProductInfo/index.js
new file mode 100644
index 00000000..0cd6c37e
--- /dev/null
+++ b/src/components/ProductInfo/index.js
@@ -0,0 +1 @@
+export { default } from "./ProductInfo";
diff --git a/src/components/ProductList/BestProductList.jsx b/src/components/ProductList/BestProductList.jsx
index d77b263d..dcd6d8a4 100644
--- a/src/components/ProductList/BestProductList.jsx
+++ b/src/components/ProductList/BestProductList.jsx
@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import ProductListStyle from "./ProductListContainerStyle";
 import { useEffect, useState, useCallback } from "react";
-import { getProducts } from "../../services/api";
+import { getProducts } from "@/services/get/getProducts";
 import SectionTitle from "../ui/SectionTitle";
 import ProductListResults from "./ProductListResults";
 import useAsync from "../../hooks/useAsync";
@@ -41,11 +41,13 @@ const BestProductList = ({ title, pageSize }) => {
         <ProductListSkeleton pageSize={pageSize} listType={LIST_TYPE} />
       )}
       {loadingError && <ProductListError />}
-      <ProductListResults
-        products={products}
-        pageSize={pageSize}
-        listType={LIST_TYPE}
-      />
+      {!isLoading && (
+        <ProductListResults
+          products={products}
+          pageSize={pageSize}
+          listType={LIST_TYPE}
+        />
+      )}
     </div>
   );
 };
diff --git a/src/components/ProductList/ProductListContainer.jsx b/src/components/ProductList/ProductListContainer.jsx
index f9b945a4..4a229ccc 100644
--- a/src/components/ProductList/ProductListContainer.jsx
+++ b/src/components/ProductList/ProductListContainer.jsx
@@ -2,16 +2,16 @@
 import ProductListContainerStyle from "./ProductListContainerStyle";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { useEffect, useState, useCallback } from "react";
-import { getProducts } from "../../services/api";
-import { DEFAULT_ITEM_PAGE_SIZE } from "../../constants/pagesize";
-import { ITEMS_ORDER_MAP } from "../../constants/sortOptions";
-import useAsync from "../../hooks/useAsync";
-import SectionTitle from "../ui/SectionTitle/SectionTitle";
-import Button from "../ui/Button";
-import Dropdown from "../ui/Dropdown";
-import InputSearch from "../ui/Input/InputSearch";
-import Pagination from "../Pagination";
+import { getProducts } from "@/services/get/getProducts";
+import { DEFAULT_ITEM_PAGE_SIZE } from "@/constants/pagesize";
+import { ITEMS_ORDER_MAP } from "@/constants/sortOptions";
+import useAsync from "@/hooks/useAsync";
+import SectionTitle from "@/components/ui/SectionTitle/SectionTitle";
+import Button from "@/components/ui/Button";
+import DropdownWithBtn from "@/components/ui/Dropdown/DropdownWithBtn";
+import InputSearch from "@/components/ui/Input/InputSearch";
 import ProductListResults from "./ProductListResults";
+import TotalCountPagination from "@/components/Pagination/TotalCountPagination";
 
 const DEFAULT_ORDER = Object.keys(ITEMS_ORDER_MAP)[0];
 const dropdownMenuItems = Object.keys(ITEMS_ORDER_MAP);
@@ -68,7 +68,7 @@ const ProductListContainer = ({ title, pageSize = DEFAULT_ITEM_PAGE_SIZE }) => {
           className="product-list-header-search"
           placeholder="검색할 상품을 입력해주세요"
         />
-        <Dropdown
+        <DropdownWithBtn
           menu={dropdownMenuItems}
           onClickMenu={handleDropdownSelect}
           defaultSelected={order}
@@ -80,9 +80,9 @@ const ProductListContainer = ({ title, pageSize = DEFAULT_ITEM_PAGE_SIZE }) => {
         pageSize={pageSize}
         isEmpty={() => setSearchParams("")}
       />
-      <Pagination
-        pageSize={pageSize}
+      <TotalCountPagination
         totalCount={totalCount}
+        pageSize={pageSize}
         handleLoad={handleLoad}
         orderStatus={ITEMS_ORDER_MAP[order]}
         searchKeyword={keyword}
diff --git a/src/components/ProductList/ProductListResults.jsx b/src/components/ProductList/ProductListResults.jsx
index 49eb5126..265c13db 100644
--- a/src/components/ProductList/ProductListResults.jsx
+++ b/src/components/ProductList/ProductListResults.jsx
@@ -33,7 +33,12 @@ ProductList.Content = ({ products, pageSize, listType }) => {
       {products.slice(0, pageSize).map(({ id, ...itemData }) => {
         return (
           <li key={id} className="product-list">
-            <ProductCard key={id} data={itemData} loading="eager" />
+            <ProductCard
+              key={id}
+              data={itemData}
+              loading="eager"
+              productId={id}
+            />
           </li>
         );
       })}
diff --git a/src/components/ProfileSummary/ProfileSummary.jsx b/src/components/ProfileSummary/ProfileSummary.jsx
new file mode 100644
index 00000000..212851d9
--- /dev/null
+++ b/src/components/ProfileSummary/ProfileSummary.jsx
@@ -0,0 +1,52 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import avatarImg from "@/assets/images/img-avatar.png";
+import formatDate from "@/utils/formatDate";
+import ImageSkeleton from "@/components/ui/Skeletons/ImageSkeleton";
+import styles from "./ProfileSummaryStylesMap";
+
+const ProfileSummary = ({ name, imgSrc, createdAt, size = "md" }) => {
+  return (
+    <div className="profile-area" css={ProfileSummaryStyle(size)}>
+      <div className="profile">
+        <ImageSkeleton
+          src={imgSrc || avatarImg}
+          alt="기본 프로필 이미지"
+          width={styles.imgSize[size]}
+          height={styles.imgSize[size]}
+        />
+        <div className="info">
+          <span className="name">{name}</span>
+          <span className="createdAt">{formatDate(createdAt)}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileSummary;
+
+const getProfileSize = (size) => styles.size[size];
+
+const ProfileSummaryStyle = (size) => css`
+  display: flex;
+
+  .profile {
+    ${getProfileSize(size)};
+
+    display: flex;
+
+    img {
+      flex-shrink: 0;
+    }
+
+    .info .name {
+      display: block;
+      color: var(--text-primary);
+    }
+
+    .info .createdAt {
+      color: var(--gray400);
+    }
+  }
+`;
diff --git a/src/components/ProfileSummary/ProfileSummaryStylesMap.js b/src/components/ProfileSummary/ProfileSummaryStylesMap.js
new file mode 100644
index 00000000..eb622bf9
--- /dev/null
+++ b/src/components/ProfileSummary/ProfileSummaryStylesMap.js
@@ -0,0 +1,21 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+
+const styles = {
+  size: {
+    sm: css`
+      font-size: 12px;
+      gap: 8px;
+    `,
+    md: css`
+      font-size: 14px;
+      gap: 16px;
+    `,
+  },
+  imgSize: {
+    sm: 32,
+    md: 40,
+  },
+};
+
+export default styles;
diff --git a/src/components/ProfileSummary/index.js b/src/components/ProfileSummary/index.js
new file mode 100644
index 00000000..d6935312
--- /dev/null
+++ b/src/components/ProfileSummary/index.js
@@ -0,0 +1 @@
+export { default } from "./ProfileSummary";
diff --git a/src/components/layout/PageContent.jsx b/src/components/layout/PageContent.jsx
index 0e018308..512c52d0 100644
--- a/src/components/layout/PageContent.jsx
+++ b/src/components/layout/PageContent.jsx
@@ -22,6 +22,11 @@ const PageContentStyle = css`
   @media (min-width: 1280px) {
     width: var(--page-content-width);
     margin: 24px auto;
-    padding: 0;
+    padding: 6px 0 60px;
+  }
+
+  .page-footer {
+    margin-top: 64px;
+    text-align: center;
   }
 `;
diff --git a/src/components/ui/Button/Button.jsx b/src/components/ui/Button/Button.jsx
index ec3a70f8..4e174660 100644
--- a/src/components/ui/Button/Button.jsx
+++ b/src/components/ui/Button/Button.jsx
@@ -1,20 +1,24 @@
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
+import { styles } from "./ButtonStylesMap";
 
 const Button = ({
   type = "button",
   variant,
   size,
+  round,
   children,
   className = "",
   disabled,
   onClick,
+  ...props
 }) => {
   return (
     <button
       type={type}
-      css={[styles.size[size], styles.variant[variant]]}
+      css={ButtonStyle({ size, variant, round })}
       className={className}
+      style={props.style}
       disabled={disabled}
       onClick={onClick}
     >
@@ -25,33 +29,24 @@ const Button = ({
 
 export default Button;
 
-const styles = {
-  size: {
-    sm: css`
-      padding: 12px 24px;
-      font-size: 16px;
-      border-radius: var(--border-radius-xs);
-    `,
-    lg: css`
-      padding: 12px;
-      border-radius: var(--border-radius-lg);
-      font-size: 20px;
-      font-weight: 600;
-      line-height: 32px;
-    `,
-  },
-  variant: {
-    primary: css`
-      background: var(--primary-color);
-      color: #fff;
+const ButtonStyle = (props) => css`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  transition: background-color 0.3s, border 0.3s;
 
-      &:hover {
-        background: var(--primary-hover-color);
-      }
+  ${!props.variant &&
+  css`
+    &:hover {
+      background-color: var(--gray300);
+    }
+  `}
 
-      &:active {
-        background: var(--primary-click-color);
-      }
-    `,
-  },
-};
+  ${styles.size[props.size]}
+  ${styles.variant[props.variant]}
+  ${props.round &&
+  css`
+    border-radius: var(--border-radius-lg);
+  `}
+`;
diff --git a/src/components/ui/Button/ButtonStylesMap.js b/src/components/ui/Button/ButtonStylesMap.js
new file mode 100644
index 00000000..783da193
--- /dev/null
+++ b/src/components/ui/Button/ButtonStylesMap.js
@@ -0,0 +1,55 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+
+const primaryBase = css`
+  background: var(--primary-color);
+  color: #fff;
+
+  &:hover {
+    background: var(--primary-hover-color);
+  }
+
+  &:active {
+    background: var(--primary-click-color);
+  }
+`;
+
+export const styles = {
+  size: {
+    sm: css`
+      padding: 12px 24px;
+      font-size: 16px;
+      border-radius: var(--border-radius-xs);
+    `,
+    lg: css`
+      padding: 12px;
+      border-radius: var(--border-radius-lg);
+      font-size: 20px;
+      font-weight: 600;
+      line-height: 32px;
+    `,
+  },
+  variant: {
+    primary: css`
+      ${primaryBase}
+    `,
+    outlined: css`
+      background: #fff;
+      border: 1px solid var(--gray300);
+      color: var(--gray500);
+
+      &:hover {
+        border: 1px solid var(--primary-color);
+      }
+    `,
+    bottom: css`
+      ${primaryBase};
+      padding: 14px 40px;
+      font-size: 18px;
+      gap: 8px;
+    `,
+  },
+  round: css`
+    border-radius: var(--border-radius-lg);
+  `,
+};
diff --git a/src/components/ui/Button/KebabButton.jsx b/src/components/ui/Button/KebabButton.jsx
new file mode 100644
index 00000000..1ba489da
--- /dev/null
+++ b/src/components/ui/Button/KebabButton.jsx
@@ -0,0 +1,11 @@
+import kebabIcon from "@/assets/images/ic_kebab.svg";
+
+const KebabButton = ({ onClick, alt }) => {
+  return (
+    <button type="button" className="kebab-btn" onClick={onClick}>
+      <img src={kebabIcon} alt={alt} />
+    </button>
+  );
+};
+
+export default KebabButton;
diff --git a/src/components/ui/Divider/Divider.jsx b/src/components/ui/Divider/Divider.jsx
new file mode 100644
index 00000000..f783fc61
--- /dev/null
+++ b/src/components/ui/Divider/Divider.jsx
@@ -0,0 +1,20 @@
+/** @jsxImportSource @emotion/react */
+import { BREAKPOINTS } from "@/constants/responsive";
+import { css } from "@emotion/react";
+
+const Divider = (props) => {
+  return <hr css={DividerStyle} style={props.style}></hr>;
+};
+
+export default Divider;
+
+const DividerStyle = css`
+  border: none;
+  background-color: var(--gray300);
+  height: 1px;
+  margin-bottom: 16px;
+
+  @media (min-width: ${BREAKPOINTS.desktop}px) {
+    margin-bottom: 24px;
+  }
+`;
diff --git a/src/components/ui/Divider/index.js b/src/components/ui/Divider/index.js
new file mode 100644
index 00000000..98020412
--- /dev/null
+++ b/src/components/ui/Divider/index.js
@@ -0,0 +1 @@
+export { default } from "./Divider";
diff --git a/src/components/ui/Dropdown/Dropdown.jsx b/src/components/ui/Dropdown/Dropdown.jsx
index 39cac19c..5cf04b72 100644
--- a/src/components/ui/Dropdown/Dropdown.jsx
+++ b/src/components/ui/Dropdown/Dropdown.jsx
@@ -1,46 +1,61 @@
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
-import { useState } from "react";
-import DropdownBtn from "./DropdownBtn";
-import DropdownMenu from "./DropdownMenu";
-
-const Dropdown = ({ menu, onClickMenu, defaultSelected, iconType }) => {
-  const [selected, setSelected] = useState(defaultSelected);
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [isDropdownBtnActive, setIsDropdownBtnActive] = useState(false);
-
-  const handleMenuClick = (e) => {
-    const selectedValue = e.target.textContent;
-    setSelected(selectedValue);
-    onClickMenu(selectedValue);
-    setIsDropdownOpen((prev) => !prev);
-    setIsDropdownBtnActive((prev) => !prev);
-  };
-
-  const handleDropdown = () => {
-    setIsDropdownOpen((prev) => !prev);
-    setIsDropdownBtnActive((prev) => !prev);
-  };
 
+const Dropdown = ({
+  items = [],
+  onClick,
+  isDropdownOpen,
+  isCommentDropdown,
+}) => {
   return (
-    <div css={DropdownStyle}>
-      <DropdownBtn
-        selected={selected}
-        onClickDropdownBtn={handleDropdown}
-        isActive={isDropdownBtnActive}
-        iconType={iconType}
-      />
-      <DropdownMenu
-        items={menu}
-        onClick={handleMenuClick}
-        isDropdownOpen={isDropdownOpen}
-      />
-    </div>
+    <ul css={DropdownMenuStyle({ isDropdownOpen, isCommentDropdown })}>
+      {items.map((item) => (
+        <li key={item}>
+          <button onClick={onClick} className="dropdown-menu-btn">
+            {item}
+          </button>
+        </li>
+      ))}
+    </ul>
   );
 };
 
 export default Dropdown;
 
-const DropdownStyle = css`
-  position: relative;
-`;
+const DropdownMenuStyle = ({ isDropdownOpen, isCommentDropdown }) =>
+  css`
+    position: absolute;
+    right: 0;
+    top: ${isCommentDropdown ? "30px" : "110%"};
+    width: ${isCommentDropdown ? "auto" : "100%"};
+    min-width: 130px;
+    border: ${isCommentDropdown
+      ? "1px solid #d1d5db"
+      : "1px solid var(--border-color)"};
+    border-radius: var(--border-radius-sm);
+    overflow: hidden;
+    display: ${isDropdownOpen ? "block" : "none"};
+    z-index: 9;
+
+    li {
+      width: 100%;
+      background: #fff;
+      color: ${isCommentDropdown ? "var(--gray500)" : "inherit"};
+
+      &:hover {
+        color: var(--primary-color);
+      }
+    }
+
+    li + li {
+      border-top: ${isCommentDropdown
+        ? "none"
+        : "1px solid var(--border-color)"};
+    }
+
+    .dropdown-menu-btn {
+      width: 100%;
+      padding: 12px 8px;
+      font-size: 1rem;
+    }
+  `;
diff --git a/src/components/ui/Dropdown/DropdownMenu.jsx b/src/components/ui/Dropdown/DropdownMenu.jsx
deleted file mode 100644
index c3a8c9b5..00000000
--- a/src/components/ui/Dropdown/DropdownMenu.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css } from "@emotion/react";
-
-const DropdownMenu = ({ items, onClick, isDropdownOpen }) => {
-  return (
-    <ul css={DropdownMenuStyle(isDropdownOpen)}>
-      {items.map((item) => (
-        <li key={item}>
-          <button onClick={onClick} className="dropdown-menu-btn">
-            {item}
-          </button>
-        </li>
-      ))}
-    </ul>
-  );
-};
-
-export default DropdownMenu;
-
-const DropdownMenuStyle = (isActive) => css`
-  position: absolute;
-  right: 0;
-  top: 110%;
-  width: 100%;
-  min-width: 130px;
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius-sm);
-  overflow: hidden;
-  display: ${isActive ? "block" : "none"};
-
-  li {
-    width: 100%;
-    background: #fff;
-
-    &:hover {
-      color: var(--primary-color);
-    }
-  }
-
-  li + li {
-    border-top: 1px solid var(--border-color);
-  }
-
-  .dropdown-menu-btn {
-    width: 100%;
-    padding: 12px 8px;
-    font-size: 1rem;
-  }
-`;
diff --git a/src/components/ui/Dropdown/DropdownWithBtn.jsx b/src/components/ui/Dropdown/DropdownWithBtn.jsx
new file mode 100644
index 00000000..6eb2a220
--- /dev/null
+++ b/src/components/ui/Dropdown/DropdownWithBtn.jsx
@@ -0,0 +1,46 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import { useState } from "react";
+import DropdownBtn from "./DropdownBtn";
+import Dropdown from "./Dropdown";
+
+const DropdownWithBtn = ({ menu, onClickMenu, defaultSelected, iconType }) => {
+  const [selected, setSelected] = useState(defaultSelected);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isDropdownBtnActive, setIsDropdownBtnActive] = useState(false);
+
+  const handleMenuClick = (e) => {
+    const selectedValue = e.target.textContent;
+    setSelected(selectedValue);
+    onClickMenu(selectedValue);
+    setIsDropdownOpen((prev) => !prev);
+    setIsDropdownBtnActive((prev) => !prev);
+  };
+
+  const handleDropdown = () => {
+    setIsDropdownOpen((prev) => !prev);
+    setIsDropdownBtnActive((prev) => !prev);
+  };
+
+  return (
+    <div css={DropdownStyle}>
+      <DropdownBtn
+        selected={selected}
+        onClickDropdownBtn={handleDropdown}
+        isActive={isDropdownBtnActive}
+        iconType={iconType}
+      />
+      <Dropdown
+        items={menu}
+        onClick={handleMenuClick}
+        isDropdownOpen={isDropdownOpen}
+      />
+    </div>
+  );
+};
+
+export default DropdownWithBtn;
+
+const DropdownStyle = css`
+  position: relative;
+`;
diff --git a/src/components/ui/Form/FormLabel.jsx b/src/components/ui/Form/FormLabel.jsx
index 6cd42106..06e2dff1 100644
--- a/src/components/ui/Form/FormLabel.jsx
+++ b/src/components/ui/Form/FormLabel.jsx
@@ -1,9 +1,9 @@
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
 
-const FormLabel = ({ inputId, children }) => {
+const FormLabel = ({ inputId, children, size }) => {
   return (
-    <label htmlFor={inputId} css={FormLabelStyle}>
+    <label htmlFor={inputId} css={FormLabelStyle({ size })}>
       {children}
     </label>
   );
@@ -11,7 +11,7 @@ const FormLabel = ({ inputId, children }) => {
 
 export default FormLabel;
 
-const FormLabelStyle = css`
-  font-size: 18px;
+const FormLabelStyle = ({ size }) => css`
+  font-size: ${size === "xs" ? 16 : 18}px;
   font-weight: 700;
 `;
diff --git a/src/components/ui/Skeletons/ImageSkeleton.jsx b/src/components/ui/Skeletons/ImageSkeleton.jsx
new file mode 100644
index 00000000..03b03463
--- /dev/null
+++ b/src/components/ui/Skeletons/ImageSkeleton.jsx
@@ -0,0 +1,51 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import { useState } from "react";
+import Skeleton from "./Skeleton";
+import pandaLogoImg from "@/assets/images/logo-panda.svg";
+
+const ImageSkeleton = ({ width, height, src, alt }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [loadError, setLoadError] = useState(null);
+
+  return (
+    <div css={ImageSkeletonStyle(width, height)}>
+      {!isLoaded && !loadError && <Skeleton />}
+      <img
+        src={src}
+        alt={alt}
+        css={ImageStyle(isLoaded)}
+        width={width}
+        height={height}
+        onLoad={() => {
+          setIsLoaded(true);
+        }}
+        onError={(e) => {
+          setLoadError(true);
+          setIsLoaded(false);
+          e.target.onerror = null;
+          e.currentTarget.src = pandaLogoImg;
+        }}
+      />
+    </div>
+  );
+};
+
+export default ImageSkeleton;
+
+const ImageSkeletonStyle = (width, height) => css`
+  position: relative;
+  width: ${typeof width === "number" ? `${width}px` : width};
+  height: ${typeof height === "number" ? `${height}px` : height};
+`;
+
+const ImageStyle = (isLoaded) => css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: ${isLoaded ? 1 : 0};
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  transition: opacity 0.3s;
+`;
diff --git a/src/components/ui/Skeletons/Skeleton.jsx b/src/components/ui/Skeletons/Skeleton.jsx
new file mode 100644
index 00000000..75647853
--- /dev/null
+++ b/src/components/ui/Skeletons/Skeleton.jsx
@@ -0,0 +1,27 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+
+const Skeleton = () => {
+  return <div css={SkeletonStyle}></div>;
+};
+
+export default Skeleton;
+
+const SkeletonStyle = css`
+  background-color: var(--gray-300, #e0e0e0);
+  width: 100%;
+  height: 100%;
+  animation: pulse 1.5s ease-in-out infinite;
+
+  @keyframes pulse {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`;
diff --git a/src/components/ui/Tag/Tag.jsx b/src/components/ui/Tag/Tag.jsx
index 118b20bd..42694e79 100644
--- a/src/components/ui/Tag/Tag.jsx
+++ b/src/components/ui/Tag/Tag.jsx
@@ -3,16 +3,18 @@ import { css } from "@emotion/react";
 import IconButton from "../Button/IconButton";
 import closeIcon from "../../../assets/images/ic_close_white.svg";
 
-const Tag = ({ children, onClick }) => {
+const Tag = ({ children, isFormTag, onClick }) => {
   return (
     <span css={tagStyle}>
       #{children}
-      <IconButton
-        imgSrc={closeIcon}
-        imgAlt="첨부 이미지 제거"
-        radius="round"
-        onClick={onClick}
-      />
+      {isFormTag && (
+        <IconButton
+          imgSrc={closeIcon}
+          imgAlt="첨부 이미지 제거"
+          radius="round"
+          onClick={onClick}
+        />
+      )}
     </span>
   );
 };
diff --git a/src/components/ui/Tag/TagList.jsx b/src/components/ui/Tag/TagList.jsx
new file mode 100644
index 00000000..10493d28
--- /dev/null
+++ b/src/components/ui/Tag/TagList.jsx
@@ -0,0 +1,27 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import Tag from "./Tag";
+
+const TagList = ({ tags, removeTag, isFormTag }) => {
+  return (
+    <div className="tag-list" css={TagListStyle}>
+      {tags.map((tag, i) => (
+        <Tag
+          key={`tag ${i}`}
+          onClick={() => removeTag(tag)}
+          isFormTag={isFormTag}
+        >
+          {tag}
+        </Tag>
+      ))}
+    </div>
+  );
+};
+
+export default TagList;
+
+const TagListStyle = css`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+`;
diff --git a/src/components/ui/Tag/TagsInput.jsx b/src/components/ui/Tag/TagsInput.jsx
index 510ec566..ca994c84 100644
--- a/src/components/ui/Tag/TagsInput.jsx
+++ b/src/components/ui/Tag/TagsInput.jsx
@@ -4,11 +4,11 @@ import { useEffect, useState } from "react";
 import { InputStyle } from "../Input/Input";
 import { validateTag } from "../../../utils/validators";
 import debounce from "../../../utils/debounce";
-import Tag from ".";
+import TagList from "./TagList";
 
 const ADD_TAG_DEBOUNCE_MS = 100;
 
-const TagsInput = ({ id, placeholder, tags, onTagsChange }) => {
+const TagsInput = ({ id, placeholder, tags, isFormTag, onTagsChange }) => {
   const [inputValue, setInputValue] = useState("");
   const [errorMessage, setErrorMessage] = useState(false);
 
@@ -53,13 +53,7 @@ const TagsInput = ({ id, placeholder, tags, onTagsChange }) => {
         placeholder={placeholder}
       />
       {errorMessage && <div css={errorMessageStyle}>{errorMessage}</div>}
-      <div className="tag-list" css={TagListStyle}>
-        {tags.map((tag, i) => (
-          <Tag key={`tag ${i}`} onClick={() => removeTag(tag)}>
-            {tag}
-          </Tag>
-        ))}
-      </div>
+      <TagList tags={tags} removeTag={removeTag} isFormTag={isFormTag} />
     </div>
   );
 };
@@ -76,12 +70,6 @@ const TagsInputStyle = css`
   }
 `;
 
-const TagListStyle = css`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-`;
-
 const errorMessageStyle = css`
   display: block;
   color: var(--error-color);
diff --git a/src/components/ui/Textarea/Textarea.jsx b/src/components/ui/Textarea/Textarea.jsx
index ba772981..a810dfa0 100644
--- a/src/components/ui/Textarea/Textarea.jsx
+++ b/src/components/ui/Textarea/Textarea.jsx
@@ -1,30 +1,32 @@
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
 
-const Textarea = ({ ...props }) => {
-  const { id, name, placeholder, onChange, onBlur } = props;
+const Textarea = ({ id, name, placeholder, onChange, onBlur, ...props }) => {
   return (
     <textarea
       id={id}
       name={name}
       placeholder={placeholder}
-      css={TextareaStyle}
+      css={TextareaStyle(props.maxheight)}
       onChange={onChange}
       onBlur={onBlur}
+      {...props}
     />
   );
 };
 
 export default Textarea;
 
-const TextareaStyle = css`
+const TextareaStyle = (maxheight = "var(--form-input-max-height)") => css`
   font-size: 1rem;
   padding: 16px 20px;
   background: var(--gray200);
   border-radius: var(--border-radius-sm);
   border: none;
-  height: var(--form-input-max-height);
   resize: none;
+  height: var(--form-input-max-height);
+  max-height: ${maxheight !== "auto" ? `${maxheight}px` : maxheight};
+  line-height: 1.5;
 
   &::placeholder {
     color: var(--gray400);
diff --git a/src/constants/responsive.js b/src/constants/responsive.js
index f27f2b27..e99e1dfb 100644
--- a/src/constants/responsive.js
+++ b/src/constants/responsive.js
@@ -14,3 +14,8 @@ export const ALL_PRODUCTS_PAGESIZE = {
   tablet: 6,
   mobile: 4,
 };
+
+export const PRODUCT_DETAIL_THUMB = {
+  desktop: 486,
+  tablet: 340,
+};
diff --git a/src/hooks/useAsync.js b/src/hooks/useAsync.js
index 8727e883..3b3f33d7 100644
--- a/src/hooks/useAsync.js
+++ b/src/hooks/useAsync.js
@@ -1,7 +1,8 @@
 import { useState, useCallback } from "react";
 
 const useAsync = (asyncFunc) => {
-  const [isLoading, setIsLoading] = useState(true);
+  const [data, setData] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
   const [loadingError, setLoadingError] = useState(null);
 
   const runAsync = useCallback(
@@ -9,6 +10,8 @@ const useAsync = (asyncFunc) => {
       try {
         setIsLoading(true);
         setLoadingError(null);
+        const result = await asyncFunc(...args);
+        setData(result);
         return await asyncFunc(...args);
       } catch (err) {
         setLoadingError(err);
@@ -20,7 +23,11 @@ const useAsync = (asyncFunc) => {
     [asyncFunc]
   );
 
-  return { isLoading, loadingError, runAsync };
+  const resetError = useCallback(() => {
+    setLoadingError(null);
+  }, []);
+
+  return { isLoading, loadingError, runAsync, resetError, data };
 };
 
 export default useAsync;
diff --git a/src/hooks/useComment.js b/src/hooks/useComment.js
new file mode 100644
index 00000000..1eddf623
--- /dev/null
+++ b/src/hooks/useComment.js
@@ -0,0 +1,132 @@
+import { useState, useCallback, useEffect } from "react";
+import useAsync from "./useAsync";
+import { getComments } from "@/services/get/getComments";
+import { updateComment } from "@/services/patch/updateComment";
+import { deleteComment } from "@/services/delete/deleteComment";
+
+const DELAY_LOADING_MS = 2000;
+
+const useComment = (productId) => {
+  const {
+    isLoading: updatingComment,
+    loadingError: updateCommentError,
+    runAsync: updateCommentAsync,
+    resetError: resetUpdateError,
+  } = useAsync(updateComment);
+  const {
+    isLoading: deletingComment,
+    loadingError: deleteCommentError,
+    runAsync: deleteCommentAsync,
+  } = useAsync(deleteComment);
+  const [showFallback, setShowFallback] = useState(false);
+
+  // 댓글 페이지네이션 (커서 기반)
+  const [comments, setComments] = useState([]);
+  const [nextCursor, setNextCursor] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadError, setIsLoadError] = useState(null);
+
+  // 댓글 수정
+  const [isEditCommentId, setIsEditCommentId] = useState(null);
+
+  const handleUpdateComment = (commentId) => {
+    const textarea = document.querySelector(`[data-comment-id="${commentId}"]`);
+    const updated = textarea?.value;
+    if (!updated) return;
+
+    updateCommentAsync(commentId, updated);
+  };
+
+  const handleUpdateCommentCancel = () => {
+    setIsEditCommentId(null);
+    setDropdownCommentId(null);
+    resetUpdateError(null);
+  };
+
+  // 댓글 드롭다운
+  const [dropdownCommentId, setDropdownCommentId] = useState(null);
+
+  const toggleDropdown = (commentId) => {
+    setDropdownCommentId((prevId) => (prevId === commentId ? null : commentId));
+  };
+
+  const handleDropdownSelect = ({ target }, commentId) => {
+    const value = target.textContent;
+    if (value === "수정하기") {
+      setIsEditCommentId((prevId) => (prevId === commentId ? null : commentId));
+    }
+    if (value === "삭제하기") {
+      deleteCommentAsync(commentId);
+      if (deleteCommentError) alert("댓글 삭제에 실패했습니다.");
+    }
+  };
+
+  const handleCommentLoad = useCallback(
+    async (currentCursor = null, setNextCursorFromPagination) => {
+      try {
+        setIsLoading(true);
+        setIsLoadError(null);
+        const result = await getComments(productId, currentCursor);
+        if (!result) return;
+        setComments(result.list);
+
+        setNextCursor(result.nextCursor);
+        setNextCursorFromPagination?.(result.nextCursor);
+      } catch (err) {
+        setIsLoadError(err);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [productId]
+  );
+
+  // 초기 댓글 목록 로드
+  const [isCommentPageReady, setIsCommentPageReady] = useState(false);
+
+  useEffect(() => {
+    handleCommentLoad(null); // 초기에는 커서 없이 호출
+    setIsCommentPageReady(true); // 페이지네이션 준비 완료 표시
+  }, [productId, handleCommentLoad]);
+
+  // 댓글 로딩 오래 걸릴 때만 fallback UI 표시
+  useEffect(() => {
+    if (!isLoading) {
+      setShowFallback(false);
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      if (isLoading) setShowFallback(true);
+    }, DELAY_LOADING_MS);
+
+    return () => clearTimeout(timer);
+  }, [isLoading]);
+
+  return {
+    // 상태
+    comments,
+    nextCursor,
+    isEditCommentId,
+    dropdownCommentId,
+    isCommentPageReady,
+
+    // 로딩/에러
+    isLoading,
+    isLoadError,
+    updatingComment,
+    updateCommentError,
+    deletingComment,
+    deleteCommentError,
+    showFallback,
+
+    // 핸들러
+    handleCommentLoad,
+    handleUpdateComment,
+    handleUpdateCommentCancel,
+    toggleDropdown,
+    handleDropdownSelect,
+  };
+};
+
+export default useComment;
diff --git a/src/hooks/useForm.js b/src/hooks/useForm.js
index 39e9804e..63c2ac29 100644
--- a/src/hooks/useForm.js
+++ b/src/hooks/useForm.js
@@ -1,17 +1,24 @@
 import { useState, useEffect } from "react";
-import debounce from "../utils/debounce";
+import debounce from "@/utils/debounce";
 import {
   validateProductName,
   validateProductDescription,
   validateProductPrice,
-} from "../utils/validators";
-import { formatPrice, unformatPrice } from "../utils/formatPrice";
+} from "@/utils/validators";
+import { formatPrice, unformatPrice } from "@/utils/formatPrice";
 
 const CHECK_FORM_DEBOUNCE_MS = 300;
 
-const useForm = () => {
+const validatorMap = {
+  name: validateProductName,
+  description: validateProductDescription,
+  price: validateProductPrice,
+};
+
+const useForm = (formRef, formOptions) => {
   const [isFormValid, setIsFormValid] = useState(false);
   const [tags, setTags] = useState([]);
+  const shouldCheckTags = formRef.current?.dataset.includeTags === "true";
 
   const handlePriceInput = (e) => {
     const { value } = e.target;
@@ -25,19 +32,35 @@ const useForm = () => {
   };
 
   const validateForm = () => {
-    const name = document.querySelector("#productName")?.value ?? "";
-    const description = document.querySelector("#productDesc")?.value ?? "";
-    const priceString = document.querySelector("#productPrice")?.value ?? 0;
-    const price = priceString.replace(",", "");
-
-    const isNameValid = validateProductName(name).isValid;
-    const isDescriptionValid = validateProductDescription(description).isValid;
-    const isPriceValid = validateProductPrice(price).isValid;
-    const isTagsValid = tags.length > 0;
-
-    setIsFormValid(
-      isNameValid && isDescriptionValid && isPriceValid && isTagsValid
-    );
+    const elements = formRef.current?.elements;
+    if (!elements) return;
+
+    const values = {};
+    const results = [];
+
+    for (const el of elements) {
+      if (el.type === "text" || el.tagName === "TEXTAREA") {
+        // text input, textarea 폼 요소 values에 추가
+        values[el.name] = el.value;
+      }
+    }
+
+    if (values.productPrice) {
+      values.productPrice = values.productPrice?.replace(",", "");
+    }
+
+    if (shouldCheckTags) {
+      results.push(formOptions.customFieldValidators.tags(tags));
+    }
+
+    for (const key in values) {
+      const validator = validatorMap[key];
+      if (validator) {
+        results.push(validator(values[key]).isValid);
+      }
+    }
+
+    setIsFormValid(results.every(Boolean));
   };
 
   const debouncedValidateForm = debounce(validateForm, CHECK_FORM_DEBOUNCE_MS);
diff --git a/src/hooks/usePaginationCursor.js b/src/hooks/usePaginationCursor.js
new file mode 100644
index 00000000..f03d56df
--- /dev/null
+++ b/src/hooks/usePaginationCursor.js
@@ -0,0 +1,42 @@
+import { useState, useCallback } from "react";
+
+const usePaginationCursor = ({ firstCursor, onCursorChange }) => {
+  const [cursorStack, setCursorStack] = useState([]); // 이전 커서 저장
+  const [currentCursor, setCurrentCursor] = useState(null); // 첫번째 커서 = null (첫번째 페이지)
+  const [nextCursor, setNextCursor] = useState(firstCursor);
+
+  const goToNext = useCallback(() => {
+    if (nextCursor && nextCursor !== currentCursor) {
+      setCursorStack((prev) => [...prev, currentCursor]);
+      setCurrentCursor(nextCursor);
+      onCursorChange(nextCursor);
+    }
+  }, [currentCursor, nextCursor, onCursorChange]);
+
+  const goToPrev = useCallback(() => {
+    if (cursorStack.length > 0) {
+      const prevStack = [...cursorStack];
+      const prevCursor = prevStack.pop();
+      setCursorStack(prevStack);
+      setCurrentCursor(prevCursor);
+      onCursorChange(prevCursor, "prev");
+    }
+  }, [cursorStack, onCursorChange]);
+
+  const resetCursor = useCallback(() => {
+    setCursorStack([]);
+    setCurrentCursor(null);
+    onCursorChange(null, "reset");
+  }, [onCursorChange]);
+
+  return {
+    pageData: {
+      currentCursor,
+      hasNext: !!nextCursor,
+      hasPrev: cursorStack.length > 0,
+    },
+    pageActions: { goToNext, goToPrev, resetCursor, setNextCursor },
+  };
+};
+
+export default usePaginationCursor;
diff --git a/src/hooks/usePagination.js b/src/hooks/usePaginationTotalCount.js
similarity index 95%
rename from src/hooks/usePagination.js
rename to src/hooks/usePaginationTotalCount.js
index 1f51aa94..e5544b36 100644
--- a/src/hooks/usePagination.js
+++ b/src/hooks/usePaginationTotalCount.js
@@ -1,6 +1,6 @@
 import { useState, useMemo, useCallback, useRef } from "react";
 
-const usePagination = ({
+const usePaginationTotalCount = ({
   pageSize = 10,
   totalCount,
   paginationSize = 5,
@@ -73,4 +73,4 @@ const usePagination = ({
   };
 };
 
-export default usePagination;
+export default usePaginationTotalCount;
diff --git a/src/pages/products/ProductDetailPage.jsx b/src/pages/products/ProductDetailPage.jsx
new file mode 100644
index 00000000..90f66898
--- /dev/null
+++ b/src/pages/products/ProductDetailPage.jsx
@@ -0,0 +1,50 @@
+import { useLocation, useNavigate } from "react-router-dom";
+import PageContent from "@/components/layout/PageContent";
+import Button from "@/components/ui/Button";
+import arrowLeftIcon from "@/assets/images/ic_arrow_left.svg";
+import Divider from "@/components/ui/Divider/Divider";
+import ProductInfo from "@/components/ProductInfo";
+import ProductComments from "@/components/ProductComments/ProductComments";
+import { BREAKPOINTS } from "@/constants/responsive";
+import useWindowDimensions from "@/hooks/useWindowDimensions";
+import { PRODUCT_DETAIL_THUMB } from "@/constants/responsive";
+
+const ProductDetailPage = () => {
+  const location = useLocation();
+  const { id: productId } = location.state;
+  const navigate = useNavigate();
+
+  // 반응형
+  const { width } = useWindowDimensions();
+  const isDesktop = width >= BREAKPOINTS.desktop - 300;
+  const isTablet = width >= BREAKPOINTS.tablet + 120;
+
+  return (
+    <PageContent>
+      <ProductInfo
+        product={location.state}
+        thumbSize={
+          isDesktop
+            ? PRODUCT_DETAIL_THUMB.desktop
+            : isTablet
+            ? PRODUCT_DETAIL_THUMB.tablet
+            : "100%"
+        }
+      />
+      <Divider style={{ marginBottom: 40 }} />
+      <ProductComments productId={productId} />
+      <div className="page-footer">
+        <Button
+          variant="bottom"
+          size="xl"
+          round={true}
+          onClick={() => navigate("/products")}
+        >
+          목록으로 돌아가기 <img src={arrowLeftIcon} alt="왼쪽 화살표" />
+        </Button>
+      </div>
+    </PageContent>
+  );
+};
+
+export default ProductDetailPage;
diff --git a/src/services/delete/deleteComment.js b/src/services/delete/deleteComment.js
new file mode 100644
index 00000000..44922c5b
--- /dev/null
+++ b/src/services/delete/deleteComment.js
@@ -0,0 +1,16 @@
+const BASE_URL = process.env.REACT_APP_API_URL;
+
+export const deleteComment = async (id) => {
+  const response = await fetch(`${BASE_URL}/comments/${id}`, {
+    method: "DELETE",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error("문제가 발생해 댓글을 삭제하지 못했습니다.");
+  }
+  const data = await response.json();
+  return data;
+};
diff --git a/src/services/get/getComments.js b/src/services/get/getComments.js
new file mode 100644
index 00000000..3533995b
--- /dev/null
+++ b/src/services/get/getComments.js
@@ -0,0 +1,17 @@
+const BASE_URL = process.env.REACT_APP_API_URL;
+const limit = 5;
+
+export const getComments = async (productId, cursor) => {
+  const queryCursor = `&cursor=${cursor}`;
+  const query = `limit=${limit}${cursor ? queryCursor : ""}`;
+  const response = await fetch(
+    `${BASE_URL}/products/${productId}/comments?${query}`
+  );
+
+  if (!response.ok) {
+    throw new Error("댓글을 불러오지 못했어요!");
+  }
+
+  const data = await response.json();
+  return data;
+};
diff --git a/src/services/get/getProduct.js b/src/services/get/getProduct.js
new file mode 100644
index 00000000..982d53fd
--- /dev/null
+++ b/src/services/get/getProduct.js
@@ -0,0 +1,12 @@
+const BASE_URL = process.env.REACT_APP_API_URL;
+
+export async function getProduct(id) {
+  const response = await fetch(`${BASE_URL}/products/${id}`);
+
+  if (!response.ok) {
+    throw new Error("상품을 불러오지 못했어요!");
+  }
+
+  const body = await response.json();
+  return body;
+}
diff --git a/src/services/api.js b/src/services/get/getProducts.js
similarity index 88%
rename from src/services/api.js
rename to src/services/get/getProducts.js
index 0043ddea..e853cf6e 100644
--- a/src/services/api.js
+++ b/src/services/get/getProducts.js
@@ -1,4 +1,4 @@
-const BASE_URL = "https://panda-market-api.vercel.app";
+const BASE_URL = process.env.REACT_APP_API_URL;
 
 export async function getProducts({
   page = 1,
diff --git a/src/services/patch/updateComment.js b/src/services/patch/updateComment.js
new file mode 100644
index 00000000..b55a6e7a
--- /dev/null
+++ b/src/services/patch/updateComment.js
@@ -0,0 +1,16 @@
+const BASE_URL = process.env.REACT_APP_API_URL;
+
+export const updateComment = async (id, updatedComment) => {
+  const response = await fetch(`${BASE_URL}/comments/${id}`, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ content: updatedComment }),
+  });
+
+  if (!response.ok) {
+    throw new Error("문제가 발생해 댓글을 수정하지 못했습니다.");
+  }
+
+  const data = await response.json();
+  return data;
+};
diff --git a/src/styles/reset.css b/src/styles/reset.css
index 1938fbae..fed9b69d 100644
--- a/src/styles/reset.css
+++ b/src/styles/reset.css
@@ -50,10 +50,11 @@ button {
 }
 button:disabled {
   cursor: default;
-  background-color: var(--gray400);
+  background-color: var(--gray200);
+  color: var(--gray400);
 }
 button:disabled:hover {
-  background-color: var(--gray400);
+  background-color: var(--gray200);
 }
 a {
   text-decoration: none;
diff --git a/src/utils/formatDate.js b/src/utils/formatDate.js
new file mode 100644
index 00000000..6ba19890
--- /dev/null
+++ b/src/utils/formatDate.js
@@ -0,0 +1,8 @@
+export default function formatDate(dateString) {
+  const date = new Date(dateString); // 문자열 date 데이터를 Date 객체로 변환
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+
+  return `${year}. ${month}. ${day}`;
+}