From f6f6c43bd5be8d9faf317fd0ccd09377972d5fe4 Mon Sep 17 00:00:00 2001
From: BaeZzi813 <woehd8252@gmail.com>
Date: Wed, 3 Sep 2025 17:11:41 +0900
Subject: [PATCH 1/5] =?UTF-8?q?refact:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EB=AF=B8=EB=A6=AC=EB=B3=B4=EA=B8=B0=20URL.createObjectURL()=20?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9=20/=20=EB=93=B1=EB=A1=9D=20Button=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=83=81=ED=83=9C=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=EC=9E=90=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite-project/src/App.jsx                      |  2 ++
 vite-project/src/api.jsx                      |  9 ++++++
 vite-project/src/axiosInstance.jsx            | 17 ++++++-----
 .../src/components/SelectDropdown.jsx         | 10 +++----
 .../src/pages/AddItemPage/ProductAddImg.jsx   | 20 ++++++-------
 .../pages/AddItemPage/ProducutAddHeader.jsx   | 11 ++++++--
 .../pages/ItemDetailPage/ItemDetailPage.jsx   | 28 +++++++++++++++++++
 .../src/pages/ItemDetailPage/ItemInfo.jsx     |  3 ++
 .../src/pages/ItemsPage/BestProducts.jsx      |  9 ++++--
 .../src/pages/ItemsPage/ItemsPage.css         |  2 ++
 .../src/pages/ItemsPage/TotalProducts.jsx     |  8 ++++--
 11 files changed, 90 insertions(+), 29 deletions(-)
 create mode 100644 vite-project/src/pages/ItemDetailPage/ItemDetailPage.jsx
 create mode 100644 vite-project/src/pages/ItemDetailPage/ItemInfo.jsx

diff --git a/vite-project/src/App.jsx b/vite-project/src/App.jsx
index 929e1dc6..abbfaa61 100644
--- a/vite-project/src/App.jsx
+++ b/vite-project/src/App.jsx
@@ -2,6 +2,7 @@ import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import Nav from "./components/Nav";
 import ItemsPage from "./pages/ItemsPage/ItemsPage";
 import AddItemPage from "./pages/AddItemPage/AddItemPage";
+import ItemDetailPage from "./pages/ItemDetailPage/ItemDetailPage";
 
 function App() {
   return (
@@ -11,6 +12,7 @@ function App() {
         <Route path="/" element={<Navigate to="/items" />} />
         <Route path="/items" element={<ItemsPage />} />
         <Route path="/additem" element={<AddItemPage />} />
+        <Route path="/items/:productId" element={<ItemDetailPage />} />
       </Routes>
     </BrowserRouter>
   );
diff --git a/vite-project/src/api.jsx b/vite-project/src/api.jsx
index 7a383b6d..aee11710 100644
--- a/vite-project/src/api.jsx
+++ b/vite-project/src/api.jsx
@@ -14,3 +14,12 @@ export async function getProducts({
     throw new Error(`상품을 불러오는데 실패했습니다 : ${error.message}`);
   }
 }
+
+export async function getProductDetail(productId) {
+  try {
+    const response = await instance.get(`/products/${productId}`);
+    return response.data;
+  } catch (error) {
+    throw new Error(`상품을 불러오는데 실패했습니다 : ${error.message}`);
+  }
+}
diff --git a/vite-project/src/axiosInstance.jsx b/vite-project/src/axiosInstance.jsx
index 7ad33f1e..e7242413 100644
--- a/vite-project/src/axiosInstance.jsx
+++ b/vite-project/src/axiosInstance.jsx
@@ -9,6 +9,13 @@ const instance = axios.create({
   },
 });
 
+export const ERROR_STATUSCODE_MESSAGES = {
+  401: "인증이 필요합니다. 로그인 해주세요.",
+  403: "접근 권한이 없습니다.",
+  404: "요청하신 리소스를 찾을 수 없습니다.",
+  500: "서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.",
+};
+
 instance.interceptors.response.use(
   (response) => {
     return response;
@@ -16,16 +23,12 @@ instance.interceptors.response.use(
   (error) => {
     if (error.response) {
       const status = error.response.status;
-
-      if (status === 401) {
-        alert("인증이 필요합니다. 로그인 해주세요.");
-      } else if (status === 500) {
-        alert("서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.");
-      }
+      alert(
+        ERROR_STATUSCODE_MESSAGES[status] || "알 수 없는 오류가 발생했습니다."
+      );
     } else {
       alert("네트워크 오류가 발생했습니다.");
     }
-
     return Promise.reject(error);
   }
 );
diff --git a/vite-project/src/components/SelectDropdown.jsx b/vite-project/src/components/SelectDropdown.jsx
index 203b3093..49636d00 100644
--- a/vite-project/src/components/SelectDropdown.jsx
+++ b/vite-project/src/components/SelectDropdown.jsx
@@ -1,15 +1,15 @@
 import { useEffect, useRef, useState } from "react";
 import selectIcon from "../assets/ic-sort.svg";
 
+const options = [
+  { label: "최신순", value: "recent" },
+  { label: "좋아요순", value: "favorite" },
+];
+
 export default function SelectDropdown({ onChange, value }) {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
 
-  const options = [
-    { label: "최신순", value: "recent" },
-    { label: "좋아요순", value: "favorite" },
-  ];
-
   const selected = options.find((opt) => opt.value === value);
 
   const handleSelect = (option) => {
diff --git a/vite-project/src/pages/AddItemPage/ProductAddImg.jsx b/vite-project/src/pages/AddItemPage/ProductAddImg.jsx
index 5d6340ce..533017ca 100644
--- a/vite-project/src/pages/AddItemPage/ProductAddImg.jsx
+++ b/vite-project/src/pages/AddItemPage/ProductAddImg.jsx
@@ -71,20 +71,20 @@ export default function ProductAddImg() {
   const inputRef = useRef();
 
   const handleFileChange = (e) => {
-    const file = e.target.files[0];
+    const file = e.target.files?.[0];
     if (!file) return;
 
-    if (previewImg) {
-      SetShowError(true);
-      inputRef.current.value = "";
+    if (!file.type.startsWith("image/")) {
+      SetShowError("이미지 파일만 업로드할 수 있습니다.");
+      e.target.value = "";
       return;
     }
-
-    const reader = new FileReader();
-    reader.onloadend = () => {
-      setPreviewImg(reader.result);
-    };
-    reader.readAsDataURL(file);
+    SetShowError(null);
+    inputRef.current = file;
+    if (previewImg) URL.revokeObjectURL(previewImg);
+    const url = URL.createObjectURL(file);
+    setPreviewImg(url);
+    e.target.value = "";
   };
 
   const handleClearClick = () => {
diff --git a/vite-project/src/pages/AddItemPage/ProducutAddHeader.jsx b/vite-project/src/pages/AddItemPage/ProducutAddHeader.jsx
index a07b9068..df245de1 100644
--- a/vite-project/src/pages/AddItemPage/ProducutAddHeader.jsx
+++ b/vite-project/src/pages/AddItemPage/ProducutAddHeader.jsx
@@ -16,13 +16,18 @@ const ProductAddHeaderButton = styled.button`
   font-weight: 600;
   font-size: 1.6rem;
   color: var(--gray-100);
-  background-color: ${({ disabled }) =>
-    disabled ? "var(--gray-400)" : "var(--blue)"};
   border-radius: 0.8rem;
   width: 7.4rem;
   height: 4.2rem;
   border: 0.1rem solid var(--gray-400);
-  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
+  &:enabled {
+    background-color: var(--blue);
+    cursor: pointer;
+  }
+  &:disabled {
+    background-color: var(--gray-400);
+    cursor: not-allowed;
+  }
 `;
 
 export default function ProductAddHeader({ isFormValid }) {
diff --git a/vite-project/src/pages/ItemDetailPage/ItemDetailPage.jsx b/vite-project/src/pages/ItemDetailPage/ItemDetailPage.jsx
new file mode 100644
index 00000000..d96125b0
--- /dev/null
+++ b/vite-project/src/pages/ItemDetailPage/ItemDetailPage.jsx
@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+import { getProductDetail } from "../../api";
+import { useParams } from "react-router-dom";
+import ItemInfo from "./ItemInfo";
+
+export default function ItemDetailPage() {
+  const [itemInfo, setItemInfo] = useState({});
+  const { productId } = useParams();
+  useEffect(() => {
+    async function fetchData() {
+      if (productId) {
+        try {
+          const ItemRes = await getProductDetail(productId);
+          setItemInfo(ItemRes);
+        } catch (error) {
+          throw new Error(`상품을 불러오는데 실패했습니다 : ${error.message}`);
+        }
+      }
+    }
+    fetchData();
+  }, [productId]);
+  console.log(itemInfo);
+  return (
+    <>
+      <ItemInfo ItemImg={itemInfo.images} />
+    </>
+  );
+}
diff --git a/vite-project/src/pages/ItemDetailPage/ItemInfo.jsx b/vite-project/src/pages/ItemDetailPage/ItemInfo.jsx
new file mode 100644
index 00000000..2a79196d
--- /dev/null
+++ b/vite-project/src/pages/ItemDetailPage/ItemInfo.jsx
@@ -0,0 +1,3 @@
+export default function ItemInfo({ ItemImg }) {
+  return <img src={ItemImg} alt="상품 이미지" />;
+}
diff --git a/vite-project/src/pages/ItemsPage/BestProducts.jsx b/vite-project/src/pages/ItemsPage/BestProducts.jsx
index 19733703..ce83af08 100644
--- a/vite-project/src/pages/ItemsPage/BestProducts.jsx
+++ b/vite-project/src/pages/ItemsPage/BestProducts.jsx
@@ -1,3 +1,4 @@
+import { Link } from "react-router-dom";
 import likeIcon from "../../assets/ic-heart.svg";
 
 function BestProducts({ bestProducts }) {
@@ -8,7 +9,11 @@ function BestProducts({ bestProducts }) {
       </div>
       <div className="best-products-card">
         {bestProducts.map((product) => (
-          <div className="best-product-card" key={product.id}>
+          <Link
+            to={`/items/${product.id}`}
+            className="best-product-card"
+            key={product.id}
+          >
             <img
               className="best-product-card-img"
               src={product.images[0]}
@@ -24,7 +29,7 @@ function BestProducts({ bestProducts }) {
               </button>
               {product.favoriteCount}
             </span>
-          </div>
+          </Link>
         ))}
       </div>
     </>
diff --git a/vite-project/src/pages/ItemsPage/ItemsPage.css b/vite-project/src/pages/ItemsPage/ItemsPage.css
index 419ebe7f..cd80f133 100644
--- a/vite-project/src/pages/ItemsPage/ItemsPage.css
+++ b/vite-project/src/pages/ItemsPage/ItemsPage.css
@@ -17,6 +17,7 @@
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
+  text-decoration: none;
 }
 
 .total-product-card-img {
@@ -106,6 +107,7 @@
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
+  text-decoration: none;
 }
 
 .best-product-card-img {
diff --git a/vite-project/src/pages/ItemsPage/TotalProducts.jsx b/vite-project/src/pages/ItemsPage/TotalProducts.jsx
index f9c85447..fec5e38d 100644
--- a/vite-project/src/pages/ItemsPage/TotalProducts.jsx
+++ b/vite-project/src/pages/ItemsPage/TotalProducts.jsx
@@ -63,7 +63,11 @@ function TotalProducts({
 
       <div className="total-products-card">
         {totalProducts.map((product) => (
-          <div className="total-product-card" key={product.id}>
+          <Link
+            to="/items/{productId}"
+            className="total-product-card"
+            key={product.id}
+          >
             <img
               className="total-product-card-img"
               src={product.images[0]}
@@ -79,7 +83,7 @@ function TotalProducts({
               </button>
               {product.favoriteCount}
             </span>
-          </div>
+          </Link>
         ))}
       </div>
     </>

From c4ddadcdb48f093ee55ab6e22e0fc7d937596e95 Mon Sep 17 00:00:00 2001
From: BaeZzi813 <woehd8252@gmail.com>
Date: Tue, 9 Sep 2025 14:55:50 +0900
Subject: [PATCH 2/5] =?UTF-8?q?fix:=20tailwind=20CSS=20border=EB=AC=B8?=
 =?UTF-8?q?=EC=A0=9C=20=ED=95=B4=EA=B2=B0=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite-project/package-lock.json                | 1255 ++++++++++++++++-
 vite-project/package.json                     |    3 +
 vite-project/postcss.config.js                |    6 +
 vite-project/src/api.jsx                      |   15 +-
 .../src/components/SelectDropdown.jsx         |    1 +
 vite-project/src/index.css                    |    3 +
 vite-project/src/main.jsx                     |    1 +
 .../pages/ItemDetailPage/ItemDetailPage.jsx   |   22 +-
 .../src/pages/ItemDetailPage/ItemInfo.jsx     |   47 +-
 .../src/pages/ItemsPage/TotalProducts.jsx     |    2 +-
 vite-project/tailwind.config.js               |    8 +
 11 files changed, 1352 insertions(+), 11 deletions(-)
 create mode 100644 vite-project/postcss.config.js
 create mode 100644 vite-project/src/index.css
 create mode 100644 vite-project/tailwind.config.js

diff --git a/vite-project/package-lock.json b/vite-project/package-lock.json
index 3e3374fd..6287cb04 100644
--- a/vite-project/package-lock.json
+++ b/vite-project/package-lock.json
@@ -20,13 +20,29 @@
         "@types/react": "^19.1.2",
         "@types/react-dom": "^19.1.2",
         "@vitejs/plugin-react": "^4.4.1",
+        "autoprefixer": "^10.4.21",
         "eslint": "^9.25.0",
         "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-react-refresh": "^0.4.19",
         "globals": "^16.0.0",
+        "postcss": "^8.5.6",
+        "tailwindcss": "^3.4.17",
         "vite": "^6.3.5"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -1006,6 +1022,24 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.12",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.12.tgz",
@@ -1045,6 +1079,55 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.23.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
@@ -1487,6 +1570,19 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.0.tgz",
+      "integrity": "sha512-TKY5pyBkHyADOPYlRT9Lx6F544mPl0vS5Ew7BJ45hA08Q+t3GjbueLliBWN3sMICk6+y7HdyxSzC4bWS8baBdg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -1503,6 +1599,47 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/anymatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -1516,6 +1653,44 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "license": "MIT"
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.21",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
+      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.24.4",
+        "caniuse-lite": "^1.0.30001702",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/axios": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.11.0.tgz",
@@ -1534,6 +1709,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -1545,6 +1733,19 @@
         "concat-map": "0.0.1"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.25.1",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.1.tgz",
@@ -1601,6 +1802,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/camelize": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
@@ -1648,6 +1859,44 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1680,6 +1929,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1735,6 +1994,19 @@
         "postcss-value-parser": "^4.0.2"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -1775,6 +2047,20 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -1789,6 +2075,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.194",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.194.tgz",
@@ -1796,6 +2089,13 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -2091,6 +2391,36 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -2105,6 +2435,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
     "node_modules/fdir": {
       "version": "6.4.6",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
@@ -2133,6 +2473,19 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -2191,6 +2544,23 @@
         }
       }
     },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/form-data": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
@@ -2207,6 +2577,20 @@
         "node": ">= 6"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2278,6 +2662,27 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -2291,6 +2696,32 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/glob/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/globals": {
       "version": "16.3.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-16.3.0.tgz",
@@ -2408,9 +2839,38 @@
         "node": ">=0.8.19"
       }
     },
-    "node_modules/is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
       "dev": true,
       "license": "MIT",
@@ -2418,6 +2878,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -2431,6 +2901,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -2438,6 +2918,32 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2528,6 +3034,26 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -2591,6 +3117,43 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -2625,6 +3188,16 @@
         "node": "*"
       }
     },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -2632,6 +3205,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -2664,6 +3249,26 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -2673,6 +3278,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -2723,6 +3338,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -2756,6 +3378,37 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -2775,6 +3428,26 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -2804,6 +3477,120 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -2847,6 +3634,27 @@
         "node": ">=6"
       }
     },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/react": {
       "version": "19.1.1",
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
@@ -2934,6 +3742,63 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/readdirp/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -2944,6 +3809,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.46.2",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.46.2.tgz",
@@ -2984,6 +3860,30 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.26.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
@@ -3035,6 +3935,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -3044,6 +3957,110 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/string-width-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -3119,6 +4136,29 @@
       "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==",
       "license": "MIT"
     },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -3132,6 +4172,80 @@
         "node": ">=8"
       }
     },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.14",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
@@ -3149,6 +4263,26 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
@@ -3209,6 +4343,13 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vite": {
       "version": "6.3.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
@@ -3310,6 +4451,101 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -3317,6 +4553,19 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/yaml": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
+      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.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/vite-project/package.json b/vite-project/package.json
index 6b0d534a..08eab046 100644
--- a/vite-project/package.json
+++ b/vite-project/package.json
@@ -22,10 +22,13 @@
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",
+    "autoprefixer": "^10.4.21",
     "eslint": "^9.25.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
     "vite": "^6.3.5"
   }
 }
diff --git a/vite-project/postcss.config.js b/vite-project/postcss.config.js
new file mode 100644
index 00000000..2e7af2b7
--- /dev/null
+++ b/vite-project/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/vite-project/src/api.jsx b/vite-project/src/api.jsx
index aee11710..d906be68 100644
--- a/vite-project/src/api.jsx
+++ b/vite-project/src/api.jsx
@@ -15,7 +15,7 @@ export async function getProducts({
   }
 }
 
-export async function getProductDetail(productId) {
+export async function getProductDetails(productId) {
   try {
     const response = await instance.get(`/products/${productId}`);
     return response.data;
@@ -23,3 +23,16 @@ export async function getProductDetail(productId) {
     throw new Error(`상품을 불러오는데 실패했습니다 : ${error.message}`);
   }
 }
+
+export async function getProductComments(productId, limit = 5, cursor) {
+  try {
+    const params = { limit };
+    if (cursor) params.cursor = cursor;
+    const response = await instance.get(`/products/${productId}/comments`, {
+      params,
+    });
+    return response.data;
+  } catch (error) {
+    throw new Error(`상품을 불러오는데 실패했습니다 : ${error.message}`);
+  }
+}
diff --git a/vite-project/src/components/SelectDropdown.jsx b/vite-project/src/components/SelectDropdown.jsx
index 49636d00..62c88b52 100644
--- a/vite-project/src/components/SelectDropdown.jsx
+++ b/vite-project/src/components/SelectDropdown.jsx
@@ -32,6 +32,7 @@ export default function SelectDropdown({ onChange, value }) {
       <div ref={dropdownRef} className="select-dropdown">
         <div className="selected-option" onClick={() => setIsOpen(!isOpen)}>
           <img src={selectIcon} alt="드롭다운 아이콘" />
+          <span>{selected ? selected.label : "선택"}</span>
         </div>
 
         {isOpen && (
diff --git a/vite-project/src/index.css b/vite-project/src/index.css
new file mode 100644
index 00000000..b5c61c95
--- /dev/null
+++ b/vite-project/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/vite-project/src/main.jsx b/vite-project/src/main.jsx
index 9bd2e19b..ffa375f6 100644
--- a/vite-project/src/main.jsx
+++ b/vite-project/src/main.jsx
@@ -1,5 +1,6 @@
 import App from "./App";
 import ReactDOM from "react-dom/client";
+import "./index.css";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);
diff --git a/vite-project/src/pages/ItemDetailPage/ItemDetailPage.jsx b/vite-project/src/pages/ItemDetailPage/ItemDetailPage.jsx
index d96125b0..c0fc536a 100644
--- a/vite-project/src/pages/ItemDetailPage/ItemDetailPage.jsx
+++ b/vite-project/src/pages/ItemDetailPage/ItemDetailPage.jsx
@@ -1,17 +1,22 @@
 import { useEffect, useState } from "react";
-import { getProductDetail } from "../../api";
+import { getProductComments, getProductDetails } from "../../api";
 import { useParams } from "react-router-dom";
 import ItemInfo from "./ItemInfo";
 
 export default function ItemDetailPage() {
   const [itemInfo, setItemInfo] = useState({});
+  const [commentInfo, setCommentInfo] = useState({});
   const { productId } = useParams();
   useEffect(() => {
     async function fetchData() {
       if (productId) {
         try {
-          const ItemRes = await getProductDetail(productId);
-          setItemInfo(ItemRes);
+          const [itemRes, commentRes] = await Promise.all([
+            getProductDetails(productId),
+            getProductComments(productId),
+          ]);
+          setItemInfo(itemRes);
+          setCommentInfo(commentRes);
         } catch (error) {
           throw new Error(`상품을 불러오는데 실패했습니다 : ${error.message}`);
         }
@@ -20,9 +25,18 @@ export default function ItemDetailPage() {
     fetchData();
   }, [productId]);
   console.log(itemInfo);
+  console.log(commentInfo);
   return (
     <>
-      <ItemInfo ItemImg={itemInfo.images} />
+      <ItemInfo
+        images={itemInfo.images}
+        name={itemInfo.name}
+        price={itemInfo.price}
+        description={itemInfo.description}
+        favoriteCount={itemInfo.favoriteCount}
+        tags={itemInfo.tags}
+        nickname={itemInfo.ownerNickname}
+      />
     </>
   );
 }
diff --git a/vite-project/src/pages/ItemDetailPage/ItemInfo.jsx b/vite-project/src/pages/ItemDetailPage/ItemInfo.jsx
index 2a79196d..e71ebdc4 100644
--- a/vite-project/src/pages/ItemDetailPage/ItemInfo.jsx
+++ b/vite-project/src/pages/ItemDetailPage/ItemInfo.jsx
@@ -1,3 +1,46 @@
-export default function ItemInfo({ ItemImg }) {
-  return <img src={ItemImg} alt="상품 이미지" />;
+export default function ItemInfo({
+  images,
+  name,
+  price,
+  description,
+  favoriteCount,
+  tags,
+}) {
+  return (
+    <>
+      <section className="flex w-[1200px] mt-9 mx-auto space-x-7">
+        <img
+          className="w-[486px] h-[486px] rounded-2xl"
+          src={images}
+          alt="상품 이미지"
+        />
+        <div className="h-[496px]">
+          <div className="pb-2 mb-10 border-b-2 border-black">
+            <h2 className="text-2xl font-semibold text-[#1f2937]">{name}</h2>
+            <h1 className="text-[40px] font-semibold text-[#1f2937]">
+              {price}원
+            </h1>
+          </div>
+          <div>
+            <div className="h-[146px]">
+              <span className="mb-7 block text-base font-semibold text-[#4b5563]">
+                상품 소개
+              </span>
+              <p className="text-base font-normal text-[#4b5563]">
+                {description}
+              </p>
+            </div>
+            <div className="h-[78px]">
+              <span className="mb-7 block text-base font-semibold text-[#4b5563]">
+                상품 태그
+              </span>
+              <ul>
+                <li>{tags}</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
 }
diff --git a/vite-project/src/pages/ItemsPage/TotalProducts.jsx b/vite-project/src/pages/ItemsPage/TotalProducts.jsx
index fec5e38d..0c95f866 100644
--- a/vite-project/src/pages/ItemsPage/TotalProducts.jsx
+++ b/vite-project/src/pages/ItemsPage/TotalProducts.jsx
@@ -64,7 +64,7 @@ function TotalProducts({
       <div className="total-products-card">
         {totalProducts.map((product) => (
           <Link
-            to="/items/{productId}"
+            to={`/items/${product.id}`}
             className="total-product-card"
             key={product.id}
           >
diff --git a/vite-project/tailwind.config.js b/vite-project/tailwind.config.js
new file mode 100644
index 00000000..e8012551
--- /dev/null
+++ b/vite-project/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

From 8f44776d45ecfecce40eac17555e4a29a4ecc61d Mon Sep 17 00:00:00 2001
From: BaeZzi813 <woehd8252@gmail.com>
Date: Thu, 11 Sep 2025 20:55:44 +0900
Subject: [PATCH 3/5] =?UTF-8?q?feat:=20ItemDetailPage.jsx=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite-project/package-lock.json                |   7 +
 vite-project/package.json                     |   1 +
 vite-project/src/api.jsx                      |   9 ++
 vite-project/src/assets/Img-inquiry_empty.svg |  17 ++
 vite-project/src/assets/ic-back.svg           |   4 +
 vite-project/src/assets/ic-kebab.svg          |   5 +
 vite-project/src/assets/ic-profile.svg        |  24 +++
 vite-project/src/index.css                    |   7 +
 .../src/pages/AddItemPage/AddItemPage.jsx     |  15 +-
 .../src/pages/ItemDetailPage/ItemComments.jsx | 145 ++++++++++++++++++
 .../pages/ItemDetailPage/ItemDetailPage.jsx   |  23 +--
 .../src/pages/ItemDetailPage/ItemInfo.jsx     |  65 ++++++--
 vite-project/tailwind.config.js               |  11 +-
 13 files changed, 308 insertions(+), 25 deletions(-)
 create mode 100644 vite-project/src/assets/Img-inquiry_empty.svg
 create mode 100644 vite-project/src/assets/ic-back.svg
 create mode 100644 vite-project/src/assets/ic-kebab.svg
 create mode 100644 vite-project/src/assets/ic-profile.svg
 create mode 100644 vite-project/src/pages/ItemDetailPage/ItemComments.jsx

diff --git a/vite-project/package-lock.json b/vite-project/package-lock.json
index 6287cb04..39481eed 100644
--- a/vite-project/package-lock.json
+++ b/vite-project/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.11.0",
+        "dayjs": "^1.11.18",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-responsive": "^10.0.1",
@@ -2013,6 +2014,12 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/dayjs": {
+      "version": "1.11.18",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.18.tgz",
+      "integrity": "sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
diff --git a/vite-project/package.json b/vite-project/package.json
index 08eab046..a5bb01c5 100644
--- a/vite-project/package.json
+++ b/vite-project/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^1.11.0",
+    "dayjs": "^1.11.18",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-responsive": "^10.0.1",
diff --git a/vite-project/src/api.jsx b/vite-project/src/api.jsx
index d906be68..6af34f33 100644
--- a/vite-project/src/api.jsx
+++ b/vite-project/src/api.jsx
@@ -36,3 +36,12 @@ export async function getProductComments(productId, limit = 5, cursor) {
     throw new Error(`상품을 불러오는데 실패했습니다 : ${error.message}`);
   }
 }
+
+export async function postProducts(body) {
+  try {
+    const response = await instance.post("/products/", body);
+    return response.data;
+  } catch (error) {
+    throw new Error(`상품을 등록하는데 실패했습니다 : ${error.message}`);
+  }
+}
diff --git a/vite-project/src/assets/Img-inquiry_empty.svg b/vite-project/src/assets/Img-inquiry_empty.svg
new file mode 100644
index 00000000..5444cbbb
--- /dev/null
+++ b/vite-project/src/assets/Img-inquiry_empty.svg
@@ -0,0 +1,17 @@
+<svg width="196" height="196" viewBox="0 0 196 196" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M86.0466 52.3371C89.2265 60.5521 83.564 70.4014 76.3348 73.1997C69.1055 75.998 58.5849 72.413 55.405 64.198C52.2251 55.983 56.3465 43.859 63.5757 41.0607C73.2154 37.3293 82.8667 44.1221 86.0466 52.3371Z" fill="#D1D5DB"/>
+<path d="M90.1228 51.9829C88.4086 60.6236 95.6864 69.3476 103.29 70.856C110.894 72.3644 120.638 67.0171 122.352 58.3765C124.066 49.7359 117.914 38.5053 110.31 36.9969C100.171 34.9855 91.8369 43.3423 90.1228 51.9829Z" fill="#D1D5DB"/>
+<path d="M164.866 114.979C164.866 144.048 136.664 154.854 98.1945 154.854C59.7251 154.854 32.1611 144.048 32.1611 114.979C32.1611 81.1646 59.7251 51.1785 98.1945 51.1785C136.664 51.1785 164.866 78.6126 164.866 114.979Z" fill="#F3F4F6"/>
+<path d="M146.762 114.644C146.762 135.955 127.003 143.876 100.051 143.876C73.0996 143.876 53.7881 135.955 53.7881 114.644C53.7881 89.8557 73.0996 67.8735 100.051 67.8735C127.003 67.8735 146.762 87.9849 146.762 114.644Z" fill="#F9FAFB"/>
+<path d="M97.5082 111.671C97.5082 118.718 93.211 126.449 87.2058 126.449C81.2007 126.449 71.5 120.707 71.5 110.18C71.5 100.291 81.9796 96.774 92.8086 98.5799C99.4457 99.6867 97.5082 104.624 97.5082 111.671Z" fill="#D1D5DB"/>
+<path d="M92.4857 110.959C92.4857 112.016 92.1837 112.873 90.6735 112.873C89.1634 112.873 88.8613 112.016 88.8613 110.959C88.8613 109.902 89.4654 109.045 90.6735 109.045C91.8817 109.045 92.4857 109.902 92.4857 110.959Z" fill="#F3F4F6"/>
+<path d="M115.279 111.671C115.279 118.718 119.262 126.449 124.828 126.449C130.394 126.449 139.386 120.707 139.386 110.18C139.386 100.291 129.672 96.7742 119.635 98.5801C113.484 99.6869 115.279 104.624 115.279 111.671Z" fill="#D1D5DB"/>
+<path d="M119.935 110.959C119.935 112.016 120.215 112.873 121.614 112.873C123.014 112.873 123.294 112.016 123.294 110.959C123.294 109.902 122.734 109.045 121.614 109.045C120.494 109.045 119.935 109.902 119.935 110.959Z" fill="#F3F4F6"/>
+<path d="M99.7138 121.936C99.3675 121.432 98.6784 121.304 98.1747 121.651C97.671 121.997 97.5434 122.686 97.8897 123.19L99.7138 121.936ZM106.919 120.349L107.965 119.989C107.812 119.542 107.391 119.242 106.919 119.242C106.446 119.242 106.025 119.542 105.872 119.989L106.919 120.349ZM115.947 123.19C116.294 122.686 116.166 121.997 115.662 121.651C115.159 121.304 114.47 121.432 114.123 121.936L115.947 123.19ZM97.8897 123.19C98.2225 123.674 98.8315 124.329 99.6498 124.87C100.475 125.415 101.572 125.883 102.86 125.883V123.67C102.119 123.67 101.441 123.4 100.871 123.023C100.294 122.642 99.8883 122.19 99.7138 121.936L97.8897 123.19ZM102.86 125.883C104.42 125.883 105.595 124.772 106.343 123.784C107.128 122.746 107.684 121.528 107.965 120.709L105.872 119.989C105.646 120.646 105.188 121.642 104.577 122.449C103.93 123.305 103.329 123.67 102.86 123.67V125.883ZM105.872 120.709C106.153 121.528 106.709 122.746 107.494 123.784C108.242 124.772 109.417 125.883 110.977 125.883V123.67C110.508 123.67 109.907 123.305 109.26 122.449C108.65 121.642 108.191 120.646 107.965 119.989L105.872 120.709ZM110.977 125.883C112.265 125.883 113.362 125.415 114.187 124.87C115.005 124.329 115.615 123.674 115.947 123.19L114.123 121.936C113.949 122.19 113.543 122.642 112.966 123.023C112.396 123.4 111.718 123.67 110.977 123.67V125.883Z" fill="#D1D5DB"/>
+<path d="M113.675 119.212C113.675 120.249 108.934 121.573 107.429 121.967C107.131 122.045 106.821 122.045 106.524 121.967C105.019 121.573 100.277 120.249 100.277 119.212C100.277 117.978 103.981 116.66 106.976 116.66C109.971 116.66 113.675 117.978 113.675 119.212Z" fill="#D1D5DB"/>
+<path d="M107.959 85.3511C79.4856 87.1413 72.5407 78.0521 71.499 74.2171L87.4721 65.3098L105.529 61.9696L130.53 74.9594C129.025 78.0521 125.469 84.2503 107.959 85.3511Z" fill="#D1D5DB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M101.648 154.946C138.126 154.946 164.869 144.14 164.869 115.071C164.869 78.7046 138.126 51.2704 101.648 51.2704C65.1704 51.2704 39.0332 81.2566 39.0332 115.071C39.0332 144.14 65.1704 154.946 101.648 154.946ZM100.215 143.781C127.047 143.781 146.718 135.868 146.718 114.58C146.718 87.9492 127.047 67.859 100.215 67.859C73.3822 67.859 54.1563 89.8181 54.1563 114.58C54.1563 135.868 73.3822 143.781 100.215 143.781Z" fill="#F3F4F6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.1065 91.173C28.1518 86.6434 35.4429 87.3948 38.4795 92.6542L42.9266 100.357C45.9631 105.616 42.9683 112.306 37.0229 113.545L35.0892 113.948C34.9785 113.971 34.8678 113.992 34.757 114.01C34.7153 114.125 34.6623 114.237 34.6001 114.344C32.8394 117.371 32.0011 124.344 40.6765 132.414C49.1296 140.277 56.4369 140.849 59.8006 140.009C60.0392 139.95 60.2871 139.933 60.5262 139.963L60.9665 139.09C63.7016 133.668 70.9387 132.507 75.233 136.801L81.5222 143.09C85.8165 147.384 84.6552 154.622 79.2329 157.357L78.8262 157.562C78.7148 157.739 78.5559 157.892 78.3494 158.004C67.6399 163.816 43.5652 161.007 30.3966 142.694C13.9143 119.773 15.5748 100.285 22.0736 93.3313C22.1843 93.2127 22.3105 93.1217 22.4454 93.057C22.5559 92.9174 22.671 92.7803 22.7908 92.6462L24.1065 91.173Z" fill="#D1D5DB"/>
+<path d="M151.65 49.4415C152.22 48.1462 152.785 47.1463 153.346 46.4417C153.923 45.731 154.521 45.2276 155.14 44.9318C155.759 44.6359 156.515 44.4199 157.407 44.2839C158.498 44.1163 159.369 43.8784 160.02 43.5702C160.682 43.2668 161.161 42.7774 161.458 42.1021C161.775 41.3825 161.779 40.6973 161.471 40.0464C161.167 39.3844 160.65 38.8928 159.92 38.5714C159.444 38.362 158.952 38.2779 158.445 38.3192C157.943 38.3493 157.475 38.5132 157.04 38.8109C156.61 39.0974 156.272 39.5039 156.028 40.0305L150.747 37.7078C151.46 36.1455 152.403 34.9943 153.574 34.2542C154.761 33.5079 156.07 33.1455 157.501 33.167C158.936 33.1775 160.401 33.5114 161.896 34.1688C163.512 34.8797 164.834 35.7649 165.861 36.8244C166.899 37.8888 167.55 39.067 167.814 40.3591C168.089 41.656 167.925 42.9909 167.321 44.3636C166.742 45.681 165.926 46.6635 164.875 47.311C163.824 47.9585 162.542 48.3791 161.03 48.5728C160.234 48.6717 159.559 48.8241 159.006 49.0301C158.469 49.2299 157.999 49.5319 157.596 49.9362C157.194 50.3406 156.839 50.8915 156.533 51.5889L156.328 52.0539L151.446 49.9065L151.65 49.4415ZM150.596 58.6887C150.053 58.4501 149.608 58.0957 149.26 57.6255C148.912 57.1553 148.707 56.6293 148.646 56.0474C148.585 55.4656 148.681 54.9003 148.936 54.3517C149.158 53.8154 149.502 53.3788 149.968 53.0417C150.433 52.7047 150.957 52.5056 151.539 52.4444C152.12 52.3832 152.683 52.4719 153.225 52.7105C153.745 52.9394 154.174 53.2865 154.511 53.7518C154.859 54.222 155.072 54.745 155.149 55.3206C155.237 55.9011 155.17 56.4595 154.947 56.9958C154.693 57.5444 154.325 57.9904 153.843 58.3336C153.367 58.6658 152.835 58.868 152.249 58.9402C151.667 59.0014 151.116 58.9176 150.596 58.6887Z" fill="#D1D5DB"/>
+<path d="M167.617 61.1128C168.37 60.3361 169.041 59.7699 169.63 59.4141C170.233 59.0582 170.795 58.8565 171.317 58.809C171.839 58.7616 172.438 58.8077 173.114 58.9474C173.94 59.1174 174.627 59.1785 175.176 59.1306C175.731 59.0892 176.204 58.866 176.597 58.4611C177.015 58.0296 177.2 57.5396 177.152 56.9913C177.111 56.4363 176.871 55.9465 176.433 55.522C176.147 55.2454 175.817 55.0544 175.443 54.9492C175.075 54.8373 174.696 54.8302 174.305 54.9279C173.921 55.019 173.571 55.2206 173.256 55.5328L170.089 52.4645C171.016 51.5347 171.997 50.9603 173.033 50.7413C174.082 50.5222 175.117 50.6105 176.136 51.0062C177.162 51.3954 178.123 52.0241 179.019 52.8925C179.988 53.8316 180.7 54.8173 181.154 55.8496C181.615 56.8882 181.769 57.9056 181.614 58.9017C181.467 59.9042 180.994 60.817 180.197 61.6402C179.431 62.4302 178.586 62.9174 177.66 63.102C176.735 63.2865 175.705 63.2472 174.57 62.984C173.973 62.843 173.448 62.7729 172.997 62.7734C172.559 62.7738 172.143 62.8653 171.747 63.0481C171.351 63.2308 170.95 63.5313 170.545 63.9495L170.275 64.2283L167.347 61.3916L167.617 61.1128ZM164.403 67.4587C164.078 67.1435 163.853 66.7712 163.729 66.3417C163.604 65.9122 163.597 65.4808 163.708 65.0476C163.819 64.6145 164.039 64.2351 164.367 63.9096C164.669 63.5845 165.031 63.3631 165.455 63.2453C165.878 63.1275 166.306 63.124 166.739 63.2349C167.172 63.3457 167.551 63.5587 167.877 63.8739C168.189 64.1762 168.404 64.5389 168.521 64.962C168.646 65.3915 168.659 65.8227 168.561 66.2557C168.47 66.6951 168.274 67.0774 167.971 67.4025C167.643 67.7279 167.261 67.9497 166.825 68.0677C166.395 68.1791 165.961 68.1826 165.521 68.0784C165.088 67.9676 164.715 67.761 164.403 67.4587Z" fill="#D1D5DB"/>
+</svg>
diff --git a/vite-project/src/assets/ic-back.svg b/vite-project/src/assets/ic-back.svg
new file mode 100644
index 00000000..9ba5ad94
--- /dev/null
+++ b/vite-project/src/assets/ic-back.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.53333 3.60012C6.03627 3.60012 5.63333 4.00307 5.63333 4.50012C5.63333 4.99718 6.03627 5.40012 6.53333 5.40012V3.60012ZM6.53333 5.40012H16.6667V3.60012H6.53333V5.40012ZM21.1 9.83345V10.9001H22.9V9.83345H21.1ZM16.6667 15.3335H6.53333V17.1335H16.6667V15.3335ZM21.1 10.9001C21.1 13.3486 19.1151 15.3335 16.6667 15.3335V17.1335C20.1092 17.1335 22.9 14.3427 22.9 10.9001H21.1ZM16.6667 5.40012C19.1151 5.40012 21.1 7.38499 21.1 9.83345H22.9C22.9 6.39088 20.1092 3.60012 16.6667 3.60012V5.40012Z" fill="white"/>
+<path d="M3 16.2335L10.2 12.5384L10.2 19.9285L3 16.2335Z" fill="white"/>
+</svg>
diff --git a/vite-project/src/assets/ic-kebab.svg b/vite-project/src/assets/ic-kebab.svg
new file mode 100644
index 00000000..63a0344c
--- /dev/null
+++ b/vite-project/src/assets/ic-kebab.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12.5" cy="6.50012" r="1.5" fill="#9CA3AF"/>
+<circle cx="12.5" cy="11.5001" r="1.5" fill="#9CA3AF"/>
+<circle cx="12.5" cy="16.5001" r="1.5" fill="#9CA3AF"/>
+</svg>
diff --git a/vite-project/src/assets/ic-profile.svg b/vite-project/src/assets/ic-profile.svg
new file mode 100644
index 00000000..834caf76
--- /dev/null
+++ b/vite-project/src/assets/ic-profile.svg
@@ -0,0 +1,24 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_28793_15850)">
+<circle cx="20" cy="20" r="20" fill="#D1D5DB"/>
+<path d="M19.3739 8.72952C19.8843 10.4932 18.5348 12.4367 16.988 12.8873C15.4412 13.338 13.3279 12.4033 12.8175 10.6396C12.3071 8.87589 13.3785 6.43214 14.9254 5.9815C16.988 5.3806 18.8636 6.9658 19.3739 8.72952Z" fill="white"/>
+<path d="M20.2247 8.72952C19.7143 10.4932 21.0638 12.4367 22.6106 12.8873C24.1575 13.338 26.2708 12.4033 26.7811 10.6396C27.2915 8.87589 26.2201 6.43214 24.6732 5.9815C22.6106 5.3806 20.7351 6.9658 20.2247 8.72952Z" fill="white"/>
+<path d="M29.8016 21.6147C29.8016 26.1007 25.4029 27.7683 19.4027 27.7683C13.4025 27.7683 9.10327 26.1007 9.10327 21.6147C9.10327 16.3964 13.4025 11.7689 19.4027 11.7689C25.4029 11.7689 29.8016 16.0026 29.8016 21.6147Z" fill="white"/>
+<path d="M17.4166 20.7285C17.4166 22.1978 16.4736 23.8096 15.1557 23.8096C13.8379 23.8096 11.709 22.6125 11.709 20.4177C11.709 18.356 14.0088 17.6227 16.3853 17.9992C17.8418 18.23 17.4166 19.2593 17.4166 20.7285Z" fill="#D1D5DB"/>
+<path d="M16.3158 20.5796C16.3158 20.8 16.2495 20.9787 15.9181 20.9787C15.5867 20.9787 15.5204 20.8 15.5204 20.5796C15.5204 20.3592 15.653 20.1806 15.9181 20.1806C16.1832 20.1806 16.3158 20.3592 16.3158 20.5796Z" fill="white"/>
+<path d="M21.4258 20.7285C21.4258 22.1977 22.3688 23.8095 23.6867 23.8095C25.0046 23.8095 27.1334 22.6124 27.1334 20.4176C27.1334 18.3559 24.8336 17.6226 22.4571 17.9991C21.0006 18.2299 21.4258 19.2592 21.4258 20.7285Z" fill="#D1D5DB"/>
+<path d="M22.5283 20.5796C22.5283 20.8 22.5946 20.9787 22.926 20.9787C23.2574 20.9787 23.3237 20.8 23.3237 20.5796C23.3237 20.3592 23.1912 20.1806 22.926 20.1806C22.6609 20.1806 22.5283 20.3592 22.5283 20.5796Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.7575 30.0001C27.7508 30.0001 33.6107 27.7473 33.6107 21.6867C33.6107 14.1048 27.7508 8.38513 19.7575 8.38513C11.7642 8.38513 6.03687 14.6369 6.03687 21.6867C6.03687 27.7473 11.7642 30.0001 19.7575 30.0001ZM19.4429 27.6725C25.3226 27.6725 29.633 26.0228 29.633 21.5845C29.633 16.0322 25.3226 11.8437 19.4429 11.8437C13.5632 11.8437 9.35034 16.4219 9.35034 21.5845C9.35034 26.0228 13.5632 27.6725 19.4429 27.6725Z" fill="white"/>
+<mask id="mask0_28793_15850" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="40">
+<circle cx="20" cy="20" r="20" fill="#9CA3AF"/>
+</mask>
+<g mask="url(#mask0_28793_15850)">
+<ellipse cx="19.5834" cy="37.5" rx="11.25" ry="12.5" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_28793_15850">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/vite-project/src/index.css b/vite-project/src/index.css
index b5c61c95..a92a5f66 100644
--- a/vite-project/src/index.css
+++ b/vite-project/src/index.css
@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  body {
+    /* Apply Pretendard font */
+    @apply font-pretendard;
+  }
+}
diff --git a/vite-project/src/pages/AddItemPage/AddItemPage.jsx b/vite-project/src/pages/AddItemPage/AddItemPage.jsx
index c7c8c6f3..c86a5f3f 100644
--- a/vite-project/src/pages/AddItemPage/AddItemPage.jsx
+++ b/vite-project/src/pages/AddItemPage/AddItemPage.jsx
@@ -7,6 +7,8 @@ import ProductAddInt from "./ProductAddInt.jsx";
 import ProductAddPrice from "./ProductAddPrice.jsx";
 import ProductAddTag from "./ProductAddTag.jsx";
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { postProducts } from "../../api.jsx";
 
 const FormContainer = Styled.form`
     display: flex;
@@ -22,8 +24,11 @@ function AddItemPage() {
     description: "",
     price: "",
     tags: [],
+    images: null,
   });
 
+  const navigate = useNavigate();
+
   const handleChange = (field, value) => {
     setFormValues((prev) => ({ ...prev, [field]: value }));
   };
@@ -34,11 +39,17 @@ function AddItemPage() {
     formValues.price.trim() !== "" &&
     formValues.tags.length > 0;
 
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
     if (!isFormValid) return;
 
-    console.log("등록 데이터:", formValues); //submit 확인용
+    try {
+      const newItem = { ...formValues, price: Number(formValues.price) };
+      const response = await postProducts(newItem);
+      navigate("/items");
+    } catch (error) {
+      console.error("상품 등록 실패", error.message);
+    }
   };
 
   return (
diff --git a/vite-project/src/pages/ItemDetailPage/ItemComments.jsx b/vite-project/src/pages/ItemDetailPage/ItemComments.jsx
new file mode 100644
index 00000000..36ff361b
--- /dev/null
+++ b/vite-project/src/pages/ItemDetailPage/ItemComments.jsx
@@ -0,0 +1,145 @@
+import defaultProfileImage from "../../assets/ic-profile.svg";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import "dayjs/locale/ko";
+import kebabIcon from "../../assets/ic-kebab.svg";
+import backIcon from "../../assets/ic-back.svg";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import emptyImg from "../../assets/img-inquiry_empty.svg";
+
+dayjs.extend(relativeTime);
+dayjs.locale("ko");
+
+export default function ItemComments({ commentInfo }) {
+  const [dropdown, setDropdown] = useState(null);
+  const [editId, setEditId] = useState(null);
+  const [editContent, setEditContent] = useState("");
+
+  const handleEdit = (comment) => {
+    setEditId(comment.id);
+    setEditContent(comment.content);
+    setDropdown(null);
+  };
+
+  const handleCancel = () => {
+    setEditId(null);
+    setEditContent("");
+  };
+
+  return (
+    <>
+      <div className="mt-12">
+        <div className="flex flex-col">
+          <span className="pb-2 font-semibold text-[16px] text-[#111827]">
+            문의하기
+          </span>
+          <textarea
+            className="resize-none rounded-[12px] bg-[#f3f4f6] px-[24px] py-[16px] mt-3"
+            name="inquiry"
+            id="inquiry"
+            placeholder="개인정보를 공유 및 요청하거나, 명예 회손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
+          ></textarea>
+          <button className="flex justify-center items-center mt-4 ml-auto rounded-lg bg-[#9ca3af] w-[74px] h-[42px] font-semibold text-[16px] text-[#f3f4f6]">
+            등록
+          </button>
+          {commentInfo.list?.length > 0 ? (
+            commentInfo.list.map((comment, id) => (
+              <div className="mt-10 border-solid border-b-[1px] pb-4 border-[#e5e7eb]">
+                <div
+                  className="relative mb-7 text-[14px] flex justify-between text-[#1f2937]"
+                  key={id}
+                >
+                  {editId === comment.id ? (
+                    <textarea
+                      className="resize-none rounded-[12px] w-full bg-[#f3f4f6] px-[24px] py-[16px]"
+                      value={editContent}
+                      onChange={(e) => setEditContent(e.target.value)}
+                    ></textarea>
+                  ) : (
+                    comment.content
+                  )}
+                  {editId !== comment.id && (
+                    <button
+                      onClick={() => setDropdown(dropdown === id ? null : id)}
+                    >
+                      <img src={kebabIcon} alt="케밥 버튼" />
+                    </button>
+                  )}
+
+                  {dropdown === id && (
+                    <div className="bg-white w-[139px] h-[92px] absolute right-0 flex flex-col top-10">
+                      <button
+                        onClick={() => handleEdit(comment)}
+                        className="h-[46px] border-solid border-[1px] corder-[#d1d5db] rounded-t-[8px]"
+                      >
+                        수정하기
+                      </button>
+                      <button className="h-[46px] border-solid border-[1px] corder-[#d1d5db] rounded-b-[8px]">
+                        삭제하기
+                      </button>
+                    </div>
+                  )}
+                </div>
+                <div className="flex items-center justify-between">
+                  <div className="flex gap-4">
+                    <img
+                      className="w-[32px] h-[32px]"
+                      src={comment.writer.image || defaultProfileImage}
+                      alt="코멘트 이미지"
+                    />
+                    <div className="flex flex-col justify-center">
+                      <span className="text-[#4b5563] font-normal text-[12px]">
+                        {comment.writer.nickname}
+                      </span>
+                      <span className="text-[#9ca3af] font-normal text-[12px]">
+                        {dayjs(comment.createdAt).fromNow()}
+                      </span>
+                    </div>
+                  </div>
+                  {editId === comment.id && (
+                    <div>
+                      <button
+                        onClick={handleCancel}
+                        className="w-[68px] h-[47px] font-semibold text-[16px] text-[#737373]"
+                      >
+                        취소
+                      </button>
+                      <button className="w-[106px] h-[42px] bg-[#3692ff] font-semibold text-[16px] text-[#f3f4f6] rounded-[8px]">
+                        수정 완료
+                      </button>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))
+          ) : (
+            <div className="flex flex-col items-center justify-center mt-36">
+              <img
+                className="w-[196px] h-[230px]"
+                src={emptyImg}
+                alt="문이 없는 이미지"
+              />
+              <span className="font-normal text-[16px] text-[#9ca3af]">
+                아직 문의가 없어요
+              </span>
+            </div>
+          )}
+          <div className="flex justify-center mt-24">
+            <Link
+              to="/items"
+              className="flex justify-center items-center w-[240px] h-[48px] rounded-[40px] bg-[#3692ff] font-semibold text-[18px] text-[#f3f4f6]"
+            >
+              목록으로 돌아가기
+              <img
+                className="ml-2 w-[24px] h-[24px]"
+                src={backIcon}
+                alt="뒤로가기 아이콘"
+              />
+            </Link>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/vite-project/src/pages/ItemDetailPage/ItemDetailPage.jsx b/vite-project/src/pages/ItemDetailPage/ItemDetailPage.jsx
index c0fc536a..8407a652 100644
--- a/vite-project/src/pages/ItemDetailPage/ItemDetailPage.jsx
+++ b/vite-project/src/pages/ItemDetailPage/ItemDetailPage.jsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { getProductComments, getProductDetails } from "../../api";
 import { useParams } from "react-router-dom";
 import ItemInfo from "./ItemInfo";
+import ItemComments from "./ItemComments";
 
 export default function ItemDetailPage() {
   const [itemInfo, setItemInfo] = useState({});
@@ -28,15 +29,19 @@ export default function ItemDetailPage() {
   console.log(commentInfo);
   return (
     <>
-      <ItemInfo
-        images={itemInfo.images}
-        name={itemInfo.name}
-        price={itemInfo.price}
-        description={itemInfo.description}
-        favoriteCount={itemInfo.favoriteCount}
-        tags={itemInfo.tags}
-        nickname={itemInfo.ownerNickname}
-      />
+      <div className="w-[1200px] h-[1257px] mx-auto">
+        <ItemInfo
+          images={itemInfo.images}
+          name={itemInfo.name}
+          price={itemInfo.price}
+          description={itemInfo.description}
+          favoriteCount={itemInfo.favoriteCount}
+          tags={itemInfo.tags}
+          nickname={itemInfo.ownerNickname}
+          createdAt={itemInfo.createdAt}
+        />
+        <ItemComments commentInfo={commentInfo} />
+      </div>
     </>
   );
 }
diff --git a/vite-project/src/pages/ItemDetailPage/ItemInfo.jsx b/vite-project/src/pages/ItemDetailPage/ItemInfo.jsx
index e71ebdc4..68a5c111 100644
--- a/vite-project/src/pages/ItemDetailPage/ItemInfo.jsx
+++ b/vite-project/src/pages/ItemDetailPage/ItemInfo.jsx
@@ -1,44 +1,83 @@
+import likeIcon from "../../assets/ic-heart.svg";
+import ProfileImg from "../../assets/ic-profile.svg";
+
 export default function ItemInfo({
   images,
   name,
   price,
   description,
   favoriteCount,
-  tags,
+  tags = [],
+  nickname,
+  createdAt,
 }) {
+  const dateObject = new Date(createdAt);
+  const formattedDate = dateObject.toLocaleDateString("ko-KR", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  });
+
   return (
     <>
-      <section className="flex w-[1200px] mt-9 mx-auto space-x-7">
+      <section className="flex  mt-9  space-x-9 pb-10 border-solid border-b-[1px] border-[#e5e7eb]">
         <img
           className="w-[486px] h-[486px] rounded-2xl"
           src={images}
           alt="상품 이미지"
         />
-        <div className="h-[496px]">
-          <div className="pb-2 mb-10 border-b-2 border-black">
-            <h2 className="text-2xl font-semibold text-[#1f2937]">{name}</h2>
+        <div className="w-[690px] h-[496px]">
+          <div className="pb-4 mb-10 border-b-[1px] border-[#e5e7eb] border-solid">
+            <h2 className="text-[24px] font-semibold text-[#1f2937]">{name}</h2>
             <h1 className="text-[40px] font-semibold text-[#1f2937]">
-              {price}원
+              {Number(price).toLocaleString()}원
             </h1>
           </div>
           <div>
-            <div className="h-[146px]">
-              <span className="mb-7 block text-base font-semibold text-[#4b5563]">
+            <div className="h-[146px] mb-9">
+              <span className="mb-7 block text-[16px] font-semibold text-[#4b5563]">
                 상품 소개
               </span>
-              <p className="text-base font-normal text-[#4b5563]">
+              <p className="text-[16px] font-normal text-[#4b5563]">
                 {description}
               </p>
             </div>
-            <div className="h-[78px]">
-              <span className="mb-7 block text-base font-semibold text-[#4b5563]">
+            <div className="h-[78px] mb-28">
+              <span className="mb-7 block text-[16px] font-semibold text-[#4b5563]">
                 상품 태그
               </span>
-              <ul>
-                <li>{tags}</li>
+              <ul className="flex gap-[8px]">
+                {tags.map((tag, index) => (
+                  <li
+                    key={index}
+                    className="h-[36px] rounded-[26px] px-[16px] py-[6px] bg-[#f3f4f6] text-[16px] text-[#1f2937] text-center"
+                  >
+                    #{tag}
+                  </li>
+                ))}
               </ul>
             </div>
           </div>
+          <div className="w-[690px] flex items-center">
+            <img className="mr-6" src={ProfileImg} alt="" />
+            {/* src={profileImage || defaultProfileImage} 예정 */}
+            <div className="flex w-[530px] flex-col border-r-[1px] border-[#e5e7eb] border-solid">
+              <span className="font-medium text-[14px] text-[#4b5563]">
+                {nickname}
+              </span>
+              <span className="font-normal text-[14px] text-[#9ca3af]">
+                {formattedDate}
+              </span>
+            </div>
+            <div className="gap-[10px] font-medium text-[16px] text-[#6b7280] w-[87px] h-[40px] px-[12px] py-[4px] rounded-[35px] border-[1px] border-[#e5e7eb] border-solid flex items-center ml-auto">
+              <img
+                className="w-[32px] h-[32px]"
+                src={likeIcon}
+                alt="좋아요 아이콘"
+              />
+              {favoriteCount}
+            </div>
+          </div>
         </div>
       </section>
     </>
diff --git a/vite-project/tailwind.config.js b/vite-project/tailwind.config.js
index e8012551..3c3ab80e 100644
--- a/vite-project/tailwind.config.js
+++ b/vite-project/tailwind.config.js
@@ -2,7 +2,16 @@
 export default {
   content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        pretendard: ["Pretendard", "sans-serif"],
+      },
+    },
+    screens: {
+      mobile: { max: "767px" },
+      tablet: { min: "768px", max: "1199px" },
+      pc: { min: "1200px" },
+    },
   },
   plugins: [],
 };

From f5fd8ebb52742f858c4255ea115fbe26a4e674ba Mon Sep 17 00:00:00 2001
From: BaeZzi813 <woehd8252@gmail.com>
Date: Sat, 13 Sep 2025 01:44:33 +0900
Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/ItemDetailPage/ItemDetailPage.jsx   |  2 +-
 .../src/pages/ItemDetailPage/ItemInfo.jsx     | 24 ++++++++++---------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/vite-project/src/pages/ItemDetailPage/ItemDetailPage.jsx b/vite-project/src/pages/ItemDetailPage/ItemDetailPage.jsx
index 8407a652..88df6507 100644
--- a/vite-project/src/pages/ItemDetailPage/ItemDetailPage.jsx
+++ b/vite-project/src/pages/ItemDetailPage/ItemDetailPage.jsx
@@ -29,7 +29,7 @@ export default function ItemDetailPage() {
   console.log(commentInfo);
   return (
     <>
-      <div className="w-[1200px] h-[1257px] mx-auto">
+      <div className="tablet:w-[696px] mobile:w-[344px] w-[1200px] h-[1257px] mx-auto">
         <ItemInfo
           images={itemInfo.images}
           name={itemInfo.name}
diff --git a/vite-project/src/pages/ItemDetailPage/ItemInfo.jsx b/vite-project/src/pages/ItemDetailPage/ItemInfo.jsx
index 68a5c111..eb49a082 100644
--- a/vite-project/src/pages/ItemDetailPage/ItemInfo.jsx
+++ b/vite-project/src/pages/ItemDetailPage/ItemInfo.jsx
@@ -20,16 +20,18 @@ export default function ItemInfo({
 
   return (
     <>
-      <section className="flex  mt-9  space-x-9 pb-10 border-solid border-b-[1px] border-[#e5e7eb]">
+      <section className="mobile:flex-col mobile:space-x-0 flex mt-9  space-x-9 pb-10 border-solid border-b-[1px] border-[#e5e7eb]">
         <img
-          className="w-[486px] h-[486px] rounded-2xl"
+          className="tablet:w-[340px] tablet:h-[340px] mobile:w-[343px] mobile:h-[343px] w-[486px] h-[486px] rounded-2xl"
           src={images}
           alt="상품 이미지"
         />
-        <div className="w-[690px] h-[496px]">
+        <div className="tablet:w-[340px] mobile:w-[344px] w-[690px] h-[496px]">
           <div className="pb-4 mb-10 border-b-[1px] border-[#e5e7eb] border-solid">
-            <h2 className="text-[24px] font-semibold text-[#1f2937]">{name}</h2>
-            <h1 className="text-[40px] font-semibold text-[#1f2937]">
+            <h2 className="tablet:text-[20px] text-[24px] font-semibold text-[#1f2937]">
+              {name}
+            </h2>
+            <h1 className="tablet:text-[32px] text-[40px] font-semibold text-[#1f2937]">
               {Number(price).toLocaleString()}원
             </h1>
           </div>
@@ -46,11 +48,11 @@ export default function ItemInfo({
               <span className="mb-7 block text-[16px] font-semibold text-[#4b5563]">
                 상품 태그
               </span>
-              <ul className="flex gap-[8px]">
+              <ul className="tablet:flex tablet:flex-wrap mobile:flex mobile:flex-wrap flex gap-[8px]">
                 {tags.map((tag, index) => (
                   <li
                     key={index}
-                    className="h-[36px] rounded-[26px] px-[16px] py-[6px] bg-[#f3f4f6] text-[16px] text-[#1f2937] text-center"
+                    className="tablet:inline-block mobile:inline-block h-[36px] rounded-[26px] px-[16px] py-[6px] bg-[#f3f4f6] text-[16px] text-[#1f2937] text-center"
                   >
                     #{tag}
                   </li>
@@ -58,10 +60,10 @@ export default function ItemInfo({
               </ul>
             </div>
           </div>
-          <div className="w-[690px] flex items-center">
+          <div className="tablet:w-[340px] mobile:w-[344px] w-[690px] flex items-center">
             <img className="mr-6" src={ProfileImg} alt="" />
             {/* src={profileImage || defaultProfileImage} 예정 */}
-            <div className="flex w-[530px] flex-col border-r-[1px] border-[#e5e7eb] border-solid">
+            <div className="tablet:w-[180px] mobile:w-[190px] flex w-[530px] flex-col border-r-[1px] border-[#e5e7eb] border-solid">
               <span className="font-medium text-[14px] text-[#4b5563]">
                 {nickname}
               </span>
@@ -69,9 +71,9 @@ export default function ItemInfo({
                 {formattedDate}
               </span>
             </div>
-            <div className="gap-[10px] font-medium text-[16px] text-[#6b7280] w-[87px] h-[40px] px-[12px] py-[4px] rounded-[35px] border-[1px] border-[#e5e7eb] border-solid flex items-center ml-auto">
+            <div className="tablet:w-[79px] mobile:w-[79px] mobile:h-[32px] gap-[10px] font-medium text-[16px] text-[#6b7280] w-[87px] h-[40px] justify-center rounded-[35px] border-[1px] border-[#e5e7eb] border-solid flex items-center ml-auto">
               <img
-                className="w-[32px] h-[32px]"
+                className="mobile:w-[24px] mobile:h-[24px] w-[32px] h-[32px]"
                 src={likeIcon}
                 alt="좋아요 아이콘"
               />

From 6dcd364ffa8291481c6c1202e82e02fd53319067 Mon Sep 17 00:00:00 2001
From: BaeZzi813 <woehd8252@gmail.com>
Date: Sat, 13 Sep 2025 14:01:36 +0900
Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=EB=AC=B8=EC=9D=98=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0=20=EB=93=B1=EB=A1=9D=EB=B2=84=ED=8A=BC=20=EB=B9=84?=
 =?UTF-8?q?=ED=99=9C=EC=84=B1=ED=99=94=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite-project/src/pages/ItemDetailPage/ItemComments.jsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/vite-project/src/pages/ItemDetailPage/ItemComments.jsx b/vite-project/src/pages/ItemDetailPage/ItemComments.jsx
index 36ff361b..11417458 100644
--- a/vite-project/src/pages/ItemDetailPage/ItemComments.jsx
+++ b/vite-project/src/pages/ItemDetailPage/ItemComments.jsx
@@ -15,6 +15,7 @@ export default function ItemComments({ commentInfo }) {
   const [dropdown, setDropdown] = useState(null);
   const [editId, setEditId] = useState(null);
   const [editContent, setEditContent] = useState("");
+  const [inquiry, setInquiry] = useState("");
 
   const handleEdit = (comment) => {
     setEditId(comment.id);
@@ -38,9 +39,16 @@ export default function ItemComments({ commentInfo }) {
             className="resize-none rounded-[12px] bg-[#f3f4f6] px-[24px] py-[16px] mt-3"
             name="inquiry"
             id="inquiry"
+            value={inquiry}
+            onChange={(e) => setInquiry(e.target.value)}
             placeholder="개인정보를 공유 및 요청하거나, 명예 회손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
           ></textarea>
-          <button className="flex justify-center items-center mt-4 ml-auto rounded-lg bg-[#9ca3af] w-[74px] h-[42px] font-semibold text-[16px] text-[#f3f4f6]">
+          <button
+            disabled={inquiry.trim() === ""}
+            className={`flex justify-center items-center mt-4 ml-auto rounded-lg w-[74px] h-[42px] font-semibold text-[16px] text-[#f3f4f6] ${
+              inquiry.trim() === "" ? "bg-[#9ca3af]" : "bg-[#3692ff]"
+            }`}
+          >
             등록
           </button>
           {commentInfo.list?.length > 0 ? (