From 1fdc791bd86bdad63784154a5719eda64015cec8 Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Mon, 4 Aug 2025 21:01:48 +0900
Subject: [PATCH 01/31] =?UTF-8?q?chore(Sprint6):=20=ED=99=98=EA=B2=BD=20?=
 =?UTF-8?q?=EB=B3=80=EC=88=98=20=ED=8C=8C=EC=9D=BC=20git=20=EC=B6=94?=
 =?UTF-8?q?=EC=A0=81=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite-project/.env.development | 1 -
 vite-project/.env.production  | 1 -
 vite-project/.gitignore       | 2 ++
 3 files changed, 2 insertions(+), 2 deletions(-)
 delete mode 100644 vite-project/.env.development
 delete mode 100644 vite-project/.env.production

diff --git a/vite-project/.env.development b/vite-project/.env.development
deleted file mode 100644
index 887a088a..00000000
--- a/vite-project/.env.development
+++ /dev/null
@@ -1 +0,0 @@
-VITE_API_BASE_URL=https://panda-market-api.vercel.app
\ No newline at end of file
diff --git a/vite-project/.env.production b/vite-project/.env.production
deleted file mode 100644
index 887a088a..00000000
--- a/vite-project/.env.production
+++ /dev/null
@@ -1 +0,0 @@
-VITE_API_BASE_URL=https://panda-market-api.vercel.app
\ No newline at end of file
diff --git a/vite-project/.gitignore b/vite-project/.gitignore
index a547bf36..a3ab6e36 100644
--- a/vite-project/.gitignore
+++ b/vite-project/.gitignore
@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env.*
\ No newline at end of file

From 01597ba0f42e71f83c1337d7ad9c5b85e81906e1 Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Mon, 4 Aug 2025 21:04:50 +0900
Subject: [PATCH 02/31] =?UTF-8?q?refactor(Sprint6):=20Button=20component?=
 =?UTF-8?q?=EC=9D=98=20disabled=20style=EC=9D=84=20CSS=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=EB=A7=8C=20=EC=82=AC=EC=9A=A9=ED=95=B4=EC=84=9C=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite-project/src/components/Button.jsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/vite-project/src/components/Button.jsx b/vite-project/src/components/Button.jsx
index 4019d336..fe78d60f 100644
--- a/vite-project/src/components/Button.jsx
+++ b/vite-project/src/components/Button.jsx
@@ -1,8 +1,7 @@
 import styled from "styled-components";
 
 const StyledButton = styled.button`
-  background-color: ${({ disabled }) =>
-    disabled ? "var(--color-cool-gray-400)" : "var(--color-primary-100)"};
+  background-color: var(--color-primary-100);
   padding: 8px 23px;
   color: var(--color-cool-gray-100);
   font-size: 16px;
@@ -10,7 +9,12 @@ const StyledButton = styled.button`
   line-height: 26px;
   border-radius: 8px;
   border: none;
-  cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
+  cursor: pointer;
+
+  &:disabled {
+    background-color: var(--color-cool-gray-400);
+    cursor: default;
+  }
 `;
 
 function Button({ children, ...props }) {

From c92aa1fc86a7be5cb42cca5e8386773d7227e17b Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Mon, 4 Aug 2025 22:18:31 +0900
Subject: [PATCH 03/31] =?UTF-8?q?refactor(Sprint6):=20<p>=20->=20<span>=20?=
 =?UTF-8?q?tag=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite-project/src/components/item/item.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vite-project/src/components/item/item.jsx b/vite-project/src/components/item/item.jsx
index cb0fed39..a4f383cf 100644
--- a/vite-project/src/components/item/item.jsx
+++ b/vite-project/src/components/item/item.jsx
@@ -58,7 +58,7 @@ function Item({ imageUrl, title, price, likeCount }) {
       </StyledItemImage>
       <StyledItemInfo>
         <h3>{title}</h3>
-        <p>{formatPrice(price, "원")}</p>
+        <span>{formatPrice(price, "원")}</span>
         <StyledItemFavorites>
           <img src={likeImg} alt="좋아요 갯수" />
           <span>{likeCount}</span>

From 1735fa35d4c52570472673907b08b36d50d42ceb Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Tue, 5 Aug 2025 08:26:26 +0900
Subject: [PATCH 04/31] =?UTF-8?q?feat(Sprint7)=20=EC=83=81=ED=92=88=20?=
 =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EC=83=81=EC=84=B8=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/item/items-grid.jsx         | 18 ++++++++++++------
 vite-project/src/main.jsx                      |  2 ++
 .../src/pages/items/item-detail-page.jsx       | 10 ++++++++++
 3 files changed, 24 insertions(+), 6 deletions(-)
 create mode 100644 vite-project/src/pages/items/item-detail-page.jsx

diff --git a/vite-project/src/components/item/items-grid.jsx b/vite-project/src/components/item/items-grid.jsx
index ceab0b45..50b48c21 100644
--- a/vite-project/src/components/item/items-grid.jsx
+++ b/vite-project/src/components/item/items-grid.jsx
@@ -1,3 +1,4 @@
+import { Link } from "react-router-dom";
 import styled from "styled-components";
 import Item from "./item";
 
@@ -15,13 +16,18 @@ function ItemsGrid({ items, numberOfColumns }) {
   return (
     <StyledItemsGrid $numberOfColumns={numberOfColumns}>
       {items.map((product) => (
-        <Item
+        <Link
+          to={`${product.id}`}
           key={product.id}
-          imageUrl={product.images[0]}
-          title={product.name}
-          price={product.price}
-          likeCount={product.favoriteCount}
-        />
+          style={{ textDecoration: "none" }}
+        >
+          <Item
+            imageUrl={product.images[0]}
+            title={product.name}
+            price={product.price}
+            likeCount={product.favoriteCount}
+          />
+        </Link>
       ))}
     </StyledItemsGrid>
   );
diff --git a/vite-project/src/main.jsx b/vite-project/src/main.jsx
index e88db0e8..e07e1629 100644
--- a/vite-project/src/main.jsx
+++ b/vite-project/src/main.jsx
@@ -1,6 +1,7 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import App from "./components/App";
 import AddItemPage from "./pages/add-item/add-item-page";
+import ItemDetailPage from "./pages/items/item-detail-page";
 import ItemsPage from "./pages/items/items-page";
 
 function Main() {
@@ -9,6 +10,7 @@ function Main() {
       <App>
         <Routes>
           <Route path="/items" element={<ItemsPage />} />
+          <Route path="/items/:id" element={<ItemDetailPage />} />
           <Route path="/additem" element={<AddItemPage />} />
           <Route path="*" element={<h1>NOT IMPLEMENTED</h1>} />
         </Routes>
diff --git a/vite-project/src/pages/items/item-detail-page.jsx b/vite-project/src/pages/items/item-detail-page.jsx
new file mode 100644
index 00000000..fb9835dc
--- /dev/null
+++ b/vite-project/src/pages/items/item-detail-page.jsx
@@ -0,0 +1,10 @@
+function ItemDetailPage() {
+  return (
+    <div>
+      <h1>Item Detail Page</h1>
+      {/* Add your item detail content here */}
+    </div>
+  );
+}
+
+export default ItemDetailPage;
\ No newline at end of file

From 4716e30d7eff15c2071a6388d53996aa12358653 Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Tue, 5 Aug 2025 13:31:18 +0900
Subject: [PATCH 05/31] =?UTF-8?q?fix(Sprint6):=20=EC=83=81=ED=92=88=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B6=94=EA=B0=80=ED=95=A0=20?=
 =?UTF-8?q?=EB=95=8C=20image=20input=EA=B3=BC=20image=20preview=20?=
 =?UTF-8?q?=ED=81=AC=EA=B8=B0=EA=B0=80=20=EB=A7=9E=EC=A7=80=20=EC=95=8A?=
 =?UTF-8?q?=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite-project/src/components/add-item/adding-item-image.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/vite-project/src/components/add-item/adding-item-image.jsx b/vite-project/src/components/add-item/adding-item-image.jsx
index 8c4f3b8c..20729d78 100644
--- a/vite-project/src/components/add-item/adding-item-image.jsx
+++ b/vite-project/src/components/add-item/adding-item-image.jsx
@@ -3,11 +3,12 @@ import removeImg from "../../assets/ic-xmark-fill.svg";
 
 const StyledAddingItemImage = styled.div`
   width: 282px;
+  height: 282px;
   position: relative;
 
   & > img {
     width: 100%;
-    aspect-ratio: 1;
+    height: 100%;
     object-fit: cover;
     border-radius: 12px;
   }
@@ -25,10 +26,12 @@ const StyledAddingItemImage = styled.div`
 
   @media (max-width: 1199px) {
     width: 168px;
+    height: 168px;
   }
 
   @media (max-width: 767px) {
     width: 50%;
+    height: auto;
   }
 `;
 

From 9fe818fb168546f27f327abdc60d55adb907838e Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Tue, 5 Aug 2025 13:57:00 +0900
Subject: [PATCH 06/31] =?UTF-8?q?feat(Sprint7):=20Product=20detail=20page?=
 =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99=ED=96=88=EC=9D=84=20=EB=95=8C=20?=
 =?UTF-8?q?=EC=84=9C=EB=B2=84=EC=97=90=EC=84=9C=20product=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=EC=A0=95=EB=B3=B4=20=EA=B0=80=EC=A0=B8=EC=98=A4?=
 =?UTF-8?q?=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite-project/src/api/products.js              | 48 ++++++++++++++++---
 .../src/pages/items/item-detail-page.jsx      | 12 ++++-
 2 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/vite-project/src/api/products.js b/vite-project/src/api/products.js
index fe32ac72..11283375 100644
--- a/vite-project/src/api/products.js
+++ b/vite-project/src/api/products.js
@@ -1,19 +1,44 @@
+function trimPath(str) {
+  let trimmed = str.trim();
+  while (trimmed.startsWith("/")) {
+    trimmed = trimmed.slice(1);
+  }
+  return trimmed;
+}
+
+function createUrl(path, params) {
+  const trimmed = trimPath(path);
+  const url = new URL(`${import.meta.env.VITE_API_BASE_URL}/${trimmed}`);
+
+  if (!params) {
+    return url;
+  }
+
+  Object.keys(params).forEach((key) =>
+    url.searchParams.append(key, params[key])
+  );
+
+  return url;
+}
+
 export async function fetchProducts({
   keyword = "",
   page = 1,
   pageSize = 10,
   orderBy = "recent",
 } = {}) {
-  const url = new URL(`${import.meta.env.VITE_API_BASE_URL}/products`);
-  url.searchParams.append("page", page);
-  url.searchParams.append("pageSize", pageSize);
-  url.searchParams.append("orderBy", orderBy);
+  const params = {
+    page,
+    pageSize,
+    orderBy,
+  };
+
   if (keyword) {
-    url.searchParams.append("keyword", keyword);
+    params.keyword = keyword;
   }
 
+  const url = createUrl("products", params);
   const response = await fetch(url);
-
   if (!response.ok) {
     throw new Error("Failed to fetch products");
   }
@@ -24,3 +49,14 @@ export async function fetchProducts({
     numberOfPages: Math.ceil(json.totalCount / pageSize),
   };
 }
+
+export async function fetchProduct(id) {
+  const url = createUrl(`products/${id}`);
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error("Failed to fetch product");
+  }
+
+  const json = await response.json();
+  return json;
+}
diff --git a/vite-project/src/pages/items/item-detail-page.jsx b/vite-project/src/pages/items/item-detail-page.jsx
index fb9835dc..5bd0688c 100644
--- a/vite-project/src/pages/items/item-detail-page.jsx
+++ b/vite-project/src/pages/items/item-detail-page.jsx
@@ -1,4 +1,14 @@
+import { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { fetchProduct } from "../../api/products";
+
 function ItemDetailPage() {
+  const { id } = useParams();
+
+  useEffect(() => {
+    fetchProduct(id).then((product) => console.log(product));
+  }, [id]);
+
   return (
     <div>
       <h1>Item Detail Page</h1>
@@ -7,4 +17,4 @@ function ItemDetailPage() {
   );
 }
 
-export default ItemDetailPage;
\ No newline at end of file
+export default ItemDetailPage;

From 94f5653d66516d98d8e56ae23f8d9cef2a6ec764 Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Tue, 5 Aug 2025 15:52:18 +0900
Subject: [PATCH 07/31] =?UTF-8?q?feat(Sprint7):=20=EC=83=81=ED=92=88=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20-=20image,=20title,=20price=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/ic-dots-3-vertical.svg         |  5 ++
 .../item-detail/item-detail-title.jsx         | 79 +++++++++++++++++++
 .../components/item-detail/item-detail.jsx    | 70 ++++++++++++++++
 .../src/pages/items/item-detail-page.jsx      | 13 +--
 4 files changed, 156 insertions(+), 11 deletions(-)
 create mode 100644 vite-project/src/assets/ic-dots-3-vertical.svg
 create mode 100644 vite-project/src/components/item-detail/item-detail-title.jsx
 create mode 100644 vite-project/src/components/item-detail/item-detail.jsx

diff --git a/vite-project/src/assets/ic-dots-3-vertical.svg b/vite-project/src/assets/ic-dots-3-vertical.svg
new file mode 100644
index 00000000..dd7ed7f5
--- /dev/null
+++ b/vite-project/src/assets/ic-dots-3-vertical.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.5" r="1.5" fill="#9CA3AF"/>
+<circle cx="12.5" cy="11.5" r="1.5" fill="#9CA3AF"/>
+<circle cx="12.5" cy="16.5" r="1.5" fill="#9CA3AF"/>
+</svg>
diff --git a/vite-project/src/components/item-detail/item-detail-title.jsx b/vite-project/src/components/item-detail/item-detail-title.jsx
new file mode 100644
index 00000000..2014f8a0
--- /dev/null
+++ b/vite-project/src/components/item-detail/item-detail-title.jsx
@@ -0,0 +1,79 @@
+import styled from "styled-components";
+import moreImg from "../../assets/ic-dots-3-vertical.svg";
+import { formatPrice } from "../../utils/formatter";
+
+const StyledItemDetailTitle = styled.div``;
+
+const StyledItemTitleHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const StyledItemName = styled.h2`
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 32px;
+  color: var(--color-secondary-800);
+
+  @media (max-width: 1199px) {
+    font-size: 20px;
+  }
+
+  @media (max-width: 767px) {
+    font-size: 16px;
+    line-height: 26px;
+  }
+`;
+
+const StyledItemMoreButton = styled.button`
+  background: none;
+  border: none;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+`;
+
+const StyledItemPrice = styled.span`
+  display: block;
+  font-size: 40px;
+  font-weight: 600;
+  line-height: 100%;
+  color: var(--color-secondary-800);
+  margin-top: 16px;
+  margin-bottom: 16px;
+
+  @media (max-width: 1199px) {
+    font-size: 32px;
+    line-height: 42px;
+    margin-top: 8px;
+  }
+
+  @media (max-width: 767px) {
+    font-size: 24px;
+    line-height: 32px;
+  }
+`;
+
+const StyledSeparator = styled.div`
+  border-bottom: 1px solid var(--color-cool-gray-200);
+`;
+
+function ItemDetailTitle({ title, price }) {
+  return (
+    <StyledItemDetailTitle>
+      <StyledItemTitleHeader>
+        <StyledItemName>{title}</StyledItemName>
+        <StyledItemMoreButton>
+          <img src={moreImg} />
+        </StyledItemMoreButton>
+      </StyledItemTitleHeader>
+      <StyledItemPrice>{formatPrice(price, "원")}</StyledItemPrice>
+      <StyledSeparator />
+    </StyledItemDetailTitle>
+  );
+}
+
+export default ItemDetailTitle;
diff --git a/vite-project/src/components/item-detail/item-detail.jsx b/vite-project/src/components/item-detail/item-detail.jsx
new file mode 100644
index 00000000..c2e2bac2
--- /dev/null
+++ b/vite-project/src/components/item-detail/item-detail.jsx
@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import styled from "styled-components";
+import { fetchProduct } from "../../api/products";
+import ItemDetailTitle from "./item-detail-title";
+
+const StyledItemDetail = styled.div`
+  display: flex;
+  gap: 24px;
+
+  @media (max-width: 1199px) {
+    gap: 16px;
+  }
+
+  @media (max-width: 767px) {
+    flex-direction: column;
+  }
+`;
+
+const StyledItemDetailImage = styled.div`
+  width: 486px;
+  height: 486px;
+  aspect-ratio: 1 / 1;
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 16px;
+    object-fit: cover;
+  }
+
+  @media (max-width: 1199px) {
+    width: 340px;
+    height: 340px;
+  }
+
+  @media (max-width: 767px) {
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+const StyledItemDetailInfo = styled.div`
+  width: 100%;
+`;
+
+function ItemDetail() {
+  const [product, setProduct] = useState(null);
+  const { id } = useParams();
+
+  useEffect(() => {
+    fetchProduct(id).then(setProduct);
+  }, [id]);
+
+  return product ? (
+    <StyledItemDetail>
+      <StyledItemDetailImage>
+        {product.images[0] && <img src={product.images[0]} />}
+      </StyledItemDetailImage>
+      <StyledItemDetailInfo>
+        <ItemDetailTitle title={product.name} price={product.price} />
+      </StyledItemDetailInfo>
+    </StyledItemDetail>
+  ) : (
+    // TODO: Product loading 중 보여줄 UI
+    <h2>Loading...</h2>
+  );
+}
+
+export default ItemDetail;
diff --git a/vite-project/src/pages/items/item-detail-page.jsx b/vite-project/src/pages/items/item-detail-page.jsx
index 5bd0688c..a26c98d0 100644
--- a/vite-project/src/pages/items/item-detail-page.jsx
+++ b/vite-project/src/pages/items/item-detail-page.jsx
@@ -1,18 +1,9 @@
-import { useEffect } from "react";
-import { useParams } from "react-router-dom";
-import { fetchProduct } from "../../api/products";
+import ItemDetail from "../../components/item-detail/item-detail";
 
 function ItemDetailPage() {
-  const { id } = useParams();
-
-  useEffect(() => {
-    fetchProduct(id).then((product) => console.log(product));
-  }, [id]);
-
   return (
     <div>
-      <h1>Item Detail Page</h1>
-      {/* Add your item detail content here */}
+      <ItemDetail />
     </div>
   );
 }

From 5696e741401cad7c46910a1a6ed65e2e57738bc7 Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Tue, 5 Aug 2025 15:54:51 +0900
Subject: [PATCH 08/31] =?UTF-8?q?refactor(Sprint7):=20TagList=20component?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20margin=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite-project/src/components/tag/tag-list.jsx      |  1 -
 vite-project/src/pages/add-item/add-item-page.jsx | 10 ++++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/vite-project/src/components/tag/tag-list.jsx b/vite-project/src/components/tag/tag-list.jsx
index a6e64e3e..046c91cf 100644
--- a/vite-project/src/components/tag/tag-list.jsx
+++ b/vite-project/src/components/tag/tag-list.jsx
@@ -4,7 +4,6 @@ import Tag from "./tag";
 const StyledTagList = styled.div`
   display: flex;
   gap: 12px;
-  margin-top: 14px;
   flex-wrap: wrap;
 `;
 
diff --git a/vite-project/src/pages/add-item/add-item-page.jsx b/vite-project/src/pages/add-item/add-item-page.jsx
index 10493852..a524193a 100644
--- a/vite-project/src/pages/add-item/add-item-page.jsx
+++ b/vite-project/src/pages/add-item/add-item-page.jsx
@@ -20,6 +20,12 @@ const StyledAddItemForm = styled.form`
   padding-bottom: 69px;
 `;
 
+const StyledTagSectionContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+`;
+
 function AddItemPage() {
   const [inputValues, setInputValues] = useState(INITIAL_INPUT_VALUES);
   const [tags, setTags] = useState([]);
@@ -114,7 +120,7 @@ function AddItemPage() {
           </Section>
           <Section>
             <SectionHeader title={"태그"} size={SectionHeaderSize.SMALL} />
-            <div>
+            <StyledTagSectionContent>
               <TextInput
                 name="tag"
                 value={inputValues["tag"]}
@@ -125,7 +131,7 @@ function AddItemPage() {
               {tags.length > 0 && (
                 <TagList tags={tags} onRemove={handleTagRemove} />
               )}
-            </div>
+            </StyledTagSectionContent>
           </Section>
         </Section>
       </Section>

From 5cb1e3ab6d44f84018a5aa7e8951539661116b06 Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Tue, 5 Aug 2025 16:00:36 +0900
Subject: [PATCH 09/31] =?UTF-8?q?feat(Sprint7):=20Tag=20=EB=B0=8F=20TagLis?=
 =?UTF-8?q?t=20component=EC=97=90=20=EC=82=AD=EC=A0=9C=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20on/off=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite-project/src/components/tag/tag-list.jsx |  2 +-
 vite-project/src/components/tag/tag.jsx      | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/vite-project/src/components/tag/tag-list.jsx b/vite-project/src/components/tag/tag-list.jsx
index 046c91cf..dfac0325 100644
--- a/vite-project/src/components/tag/tag-list.jsx
+++ b/vite-project/src/components/tag/tag-list.jsx
@@ -11,7 +11,7 @@ function TagList({ tags, onRemove }) {
   return (
     <StyledTagList>
       {tags.map((tag) => (
-        <Tag key={tag} onRemove={() => onRemove(tag)}>
+        <Tag key={tag} onRemove={onRemove ? () => onRemove(tag) : undefined}>
           {"#" + tag}
         </Tag>
       ))}
diff --git a/vite-project/src/components/tag/tag.jsx b/vite-project/src/components/tag/tag.jsx
index bcf7813e..b9e29a15 100644
--- a/vite-project/src/components/tag/tag.jsx
+++ b/vite-project/src/components/tag/tag.jsx
@@ -5,11 +5,10 @@ const StyledTag = styled.div`
   background-color: var(--color-cool-gray-100);
   color: var(--color-secondary-800);
   font-size: 16px;
-  fontweight: 400;
   line-height: 26px;
   padding: 5px 0;
   padding-left: 16px;
-  padding-right: 12px;
+  padding-right: ${({ onRemove }) => (onRemove ? 12 : 16)}px;
   border-radius: 26px;
   display: flex;
   gap: 8px;
@@ -29,9 +28,11 @@ function Tag({ children, onRemove }) {
   return (
     <StyledTag>
       <span>{children}</span>
-      <button type="button" onClick={onRemove}>
-        <img src={removeImg} alt="태그 삭제" />
-      </button>
+      {onRemove && (
+        <button type="button" onClick={onRemove}>
+          <img src={removeImg} alt="태그 삭제" />
+        </button>
+      )}
     </StyledTag>
   );
 }

From 3bcc6390cd04db31cadfb050b5ea0a39c93e3db5 Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Tue, 5 Aug 2025 16:00:53 +0900
Subject: [PATCH 10/31] =?UTF-8?q?feat(Sprint7):=20=EC=83=81=ED=92=88=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20-=20description,=20tags=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../item-detail/item-detail-section.jsx       | 43 +++++++++++++++++++
 .../components/item-detail/item-detail.jsx    | 22 ++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 vite-project/src/components/item-detail/item-detail-section.jsx

diff --git a/vite-project/src/components/item-detail/item-detail-section.jsx b/vite-project/src/components/item-detail/item-detail-section.jsx
new file mode 100644
index 00000000..e0b4ed80
--- /dev/null
+++ b/vite-project/src/components/item-detail/item-detail-section.jsx
@@ -0,0 +1,43 @@
+import styled from "styled-components";
+
+const StyledItemDetailSection = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  h3 {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 26px;
+    color: var(--color-secondary-800);
+    margin: 0;
+  }
+
+  p {
+    font-size: 16px;
+    line-height: 26px;
+    color: var(--color-secondary-600);
+    margin: 0;
+  }
+
+  @media (max-width: 1199px) {
+    gap: 8px;
+
+    h3 {
+      font-size: 14px;
+      line-height: 24px;
+    }
+  }
+`;
+
+function ItemDetailSection({ title, description, children }) {
+  return (
+    <StyledItemDetailSection>
+      <h3>{title}</h3>
+      {description && <p>{description}</p>}
+      {children}
+    </StyledItemDetailSection>
+  );
+}
+
+export default ItemDetailSection;
diff --git a/vite-project/src/components/item-detail/item-detail.jsx b/vite-project/src/components/item-detail/item-detail.jsx
index c2e2bac2..8e96e5ac 100644
--- a/vite-project/src/components/item-detail/item-detail.jsx
+++ b/vite-project/src/components/item-detail/item-detail.jsx
@@ -2,6 +2,8 @@ import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import styled from "styled-components";
 import { fetchProduct } from "../../api/products";
+import TagList from "../tag/tag-list";
+import ItemDetailSection from "./item-detail-section";
 import ItemDetailTitle from "./item-detail-title";
 
 const StyledItemDetail = styled.div`
@@ -44,6 +46,17 @@ const StyledItemDetailInfo = styled.div`
   width: 100%;
 `;
 
+const StyledItemDetailSections = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  margin-top: 24px;
+
+  @media (max-width: 1199px) {
+    margin-top: 16px;
+  }
+`;
+
 function ItemDetail() {
   const [product, setProduct] = useState(null);
   const { id } = useParams();
@@ -59,6 +72,15 @@ function ItemDetail() {
       </StyledItemDetailImage>
       <StyledItemDetailInfo>
         <ItemDetailTitle title={product.name} price={product.price} />
+        <StyledItemDetailSections>
+          <ItemDetailSection
+            title="상품 소개"
+            description={product.description}
+          />
+          <ItemDetailSection title="상품 태그">
+            <TagList tags={product.tags} />
+          </ItemDetailSection>
+        </StyledItemDetailSections>
       </StyledItemDetailInfo>
     </StyledItemDetail>
   ) : (

From 9cc803407b2251a7d934b7c38a42720635189781 Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Tue, 5 Aug 2025 16:07:50 +0900
Subject: [PATCH 11/31] =?UTF-8?q?feat(Sprint7):=20User=20profile=20?=
 =?UTF-8?q?=EC=82=AC=EC=A7=84=EC=9D=84=20Avatar=20component=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite-project/src/components/Nav.jsx    |  7 ++-----
 vite-project/src/components/avatar.jsx | 26 ++++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 vite-project/src/components/avatar.jsx

diff --git a/vite-project/src/components/Nav.jsx b/vite-project/src/components/Nav.jsx
index ed76fa9c..a95cbe47 100644
--- a/vite-project/src/components/Nav.jsx
+++ b/vite-project/src/components/Nav.jsx
@@ -1,9 +1,8 @@
 import { NavLink, useLocation } from "react-router-dom";
 import largeLogo from "../assets/logo-large.svg";
 import smallLogo from "../assets/logo-small.svg";
-import profileImg from "../assets/profile-default.svg";
-
 import "./Nav.css";
+import Avatar from "./avatar";
 
 function NavigationLink({ to, activePaths = [], children }) {
   const location = useLocation();
@@ -40,9 +39,7 @@ function Nav() {
             중고마켓
           </NavigationLink>
         </ul>
-        <div className="Nav__profile">
-          <img src={profileImg} />
-        </div>
+        <Avatar />
       </div>
     </nav>
   );
diff --git a/vite-project/src/components/avatar.jsx b/vite-project/src/components/avatar.jsx
new file mode 100644
index 00000000..87f7c1ac
--- /dev/null
+++ b/vite-project/src/components/avatar.jsx
@@ -0,0 +1,26 @@
+import styled from "styled-components";
+import defaultImg from "../assets/profile-default.svg";
+
+const StyledAvatar = styled.div`
+  width: ${({ $size }) => $size}px;
+  height: ${({ $size }) => $size}px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 20;
+  }
+`;
+
+const DEFAULT_SIZE = 40;
+
+function Avatar({ imageUrl, size = DEFAULT_SIZE }) {
+  return (
+    <StyledAvatar $size={size}>
+      <img src={imageUrl ?? defaultImg} alt="프로필 사진" />
+    </StyledAvatar>
+  );
+}
+
+export default Avatar;

From e9c28ada49aba13a51e249864d6743438df71d8d Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Tue, 5 Aug 2025 16:53:52 +0900
Subject: [PATCH 12/31] =?UTF-8?q?feat(Sprint7):=20=EC=83=81=ED=92=88=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20-=20profile,=20favorite=20button=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/favorite-button.jsx        | 42 +++++++++++++++++
 .../item-detail/item-detail-profile.jsx       | 46 +++++++++++++++++++
 .../components/item-detail/item-detail.jsx    | 31 +++++++++++++
 vite-project/src/palette.css                  |  1 +
 vite-project/src/utils/formatter.js           |  7 +++
 5 files changed, 127 insertions(+)
 create mode 100644 vite-project/src/components/favorite-button.jsx
 create mode 100644 vite-project/src/components/item-detail/item-detail-profile.jsx

diff --git a/vite-project/src/components/favorite-button.jsx b/vite-project/src/components/favorite-button.jsx
new file mode 100644
index 00000000..7c1f2290
--- /dev/null
+++ b/vite-project/src/components/favorite-button.jsx
@@ -0,0 +1,42 @@
+import styled from "styled-components";
+import favoriteImg from "../assets/ic-heart.svg";
+
+const StyledFavoriteButton = styled.div`
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  border: 1px solid var(--color-secondary-200);
+  border-radius: 40px;
+  background: none;
+  padding: 4px 12px;
+
+  img {
+    width: 32px;
+    height: 32px;
+  }
+
+  span {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 26px;
+    color: var(--color-cool-gray-500);
+  }
+
+  @media (max-width: 1199px) {
+    div {
+      width: 24px;
+      height: 24px;
+    }
+  }
+`;
+
+function FavoriteButton({ count, isFavorite }) {
+  return (
+    <StyledFavoriteButton>
+      <img src={isFavorite ? "" : favoriteImg} alt="좋아요" />
+      <span>{count}</span>
+    </StyledFavoriteButton>
+  );
+}
+
+export default FavoriteButton;
diff --git a/vite-project/src/components/item-detail/item-detail-profile.jsx b/vite-project/src/components/item-detail/item-detail-profile.jsx
new file mode 100644
index 00000000..e2feb19e
--- /dev/null
+++ b/vite-project/src/components/item-detail/item-detail-profile.jsx
@@ -0,0 +1,46 @@
+import styled from "styled-components";
+import { formatDateYYYYMMDD } from "../../utils/formatter";
+import Avatar from "../avatar";
+
+const ProfileInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+
+  span:first-child {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 24px;
+    color: var(--color-secondary-600);
+  }
+
+  span:last-child {
+    font-size: 14px;
+    line-height: 24px;
+    color: var(--color-cool-gray-400);
+  }
+`;
+
+const StyledItemDetailProfile = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+
+  ${ProfileInfo} {
+    flex-grow: 1;
+  }
+`;
+
+function ItemDetailProfile({ imageUrl, name, createdAt }) {
+  return (
+    <StyledItemDetailProfile>
+      <Avatar imageUrl={imageUrl} />
+      <ProfileInfo>
+        <span>{name}</span>
+        <span>{formatDateYYYYMMDD(createdAt)}</span>
+      </ProfileInfo>
+    </StyledItemDetailProfile>
+  );
+}
+
+export default ItemDetailProfile;
diff --git a/vite-project/src/components/item-detail/item-detail.jsx b/vite-project/src/components/item-detail/item-detail.jsx
index 8e96e5ac..780d60c6 100644
--- a/vite-project/src/components/item-detail/item-detail.jsx
+++ b/vite-project/src/components/item-detail/item-detail.jsx
@@ -2,7 +2,9 @@ import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import styled from "styled-components";
 import { fetchProduct } from "../../api/products";
+import FavoriteButton from "../favorite-button";
 import TagList from "../tag/tag-list";
+import ItemDetailProfile from "./item-detail-profile";
 import ItemDetailSection from "./item-detail-section";
 import ItemDetailTitle from "./item-detail-title";
 
@@ -57,6 +59,23 @@ const StyledItemDetailSections = styled.div`
   }
 `;
 
+const StyledItemDetailProfileContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 24px;
+  margin-top: 62px;
+
+  @media (max-width: 1199px) {
+    margin-top: 40px;
+  }
+`;
+
+const StyledItemDetailFavoriteContainer = styled.div`
+  border-left: 1px solid var(--color-cool-gray-200);
+  padding-left: 24px;
+`;
+
 function ItemDetail() {
   const [product, setProduct] = useState(null);
   const { id } = useParams();
@@ -81,6 +100,18 @@ function ItemDetail() {
             <TagList tags={product.tags} />
           </ItemDetailSection>
         </StyledItemDetailSections>
+        <StyledItemDetailProfileContainer>
+          <ItemDetailProfile
+            name={product.ownerNickname}
+            createdAt={product.createdAt}
+          />
+          <StyledItemDetailFavoriteContainer>
+            <FavoriteButton
+              isFavorite={product.isFavorite}
+              count={product.favoriteCount}
+            />
+          </StyledItemDetailFavoriteContainer>
+        </StyledItemDetailProfileContainer>
       </StyledItemDetailInfo>
     </StyledItemDetail>
   ) : (
diff --git a/vite-project/src/palette.css b/vite-project/src/palette.css
index bbbc00c5..78260bfa 100644
--- a/vite-project/src/palette.css
+++ b/vite-project/src/palette.css
@@ -4,6 +4,7 @@
 
   /* Secondary */
   --color-secondary-100: #f3f4f6;
+  --color-secondary-200: #e5e7eb;
   --color-secondary-400: #9ca3af;
   --color-secondary-600: #4b5563;
   --color-secondary-800: #1f2937;
diff --git a/vite-project/src/utils/formatter.js b/vite-project/src/utils/formatter.js
index a1ba1305..60ae0464 100644
--- a/vite-project/src/utils/formatter.js
+++ b/vite-project/src/utils/formatter.js
@@ -1,3 +1,10 @@
 export function formatPrice(price, suffix = "") {
   return Intl.NumberFormat().format(price) + suffix;
 }
+
+export function formatDateYYYYMMDD(dateString) {
+  const date = new Date(dateString);
+  const isoString = date.toISOString();
+  const index = isoString.indexOf("T");
+  return isoString.slice(0, index);
+}

From 104fe67036bd793198594fd7208a7197cedc6260 Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Tue, 5 Aug 2025 16:56:03 +0900
Subject: [PATCH 13/31] =?UTF-8?q?refactor(Sprint7):=20Component=20?=
 =?UTF-8?q?=EC=99=B8=EB=B6=80=EC=99=80=20=EC=A0=91=EC=A0=90=EC=9D=B4=20?=
 =?UTF-8?q?=EC=97=86=EB=8A=94=20styled-components=20=EC=9D=B4=EB=A6=84?=
 =?UTF-8?q?=EC=9D=84=20=EB=8B=A8=EC=88=9C=ED=95=98=EA=B2=8C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

외부와 간접적으로 접점이 없는 styled-components로 만든 component들은 `Styled~` 이름 규칙을 따르지 않습니다.
---
 .../components/item-detail/item-detail.jsx    | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/vite-project/src/components/item-detail/item-detail.jsx b/vite-project/src/components/item-detail/item-detail.jsx
index 780d60c6..86a1f7e5 100644
--- a/vite-project/src/components/item-detail/item-detail.jsx
+++ b/vite-project/src/components/item-detail/item-detail.jsx
@@ -21,7 +21,7 @@ const StyledItemDetail = styled.div`
   }
 `;
 
-const StyledItemDetailImage = styled.div`
+const ItemImage = styled.div`
   width: 486px;
   height: 486px;
   aspect-ratio: 1 / 1;
@@ -44,11 +44,11 @@ const StyledItemDetailImage = styled.div`
   }
 `;
 
-const StyledItemDetailInfo = styled.div`
+const ItemInfo = styled.div`
   width: 100%;
 `;
 
-const StyledItemDetailSections = styled.div`
+const InfoSectionContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -59,7 +59,7 @@ const StyledItemDetailSections = styled.div`
   }
 `;
 
-const StyledItemDetailProfileContainer = styled.div`
+const ProfileContainer = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -71,7 +71,7 @@ const StyledItemDetailProfileContainer = styled.div`
   }
 `;
 
-const StyledItemDetailFavoriteContainer = styled.div`
+const FavoriteContainer = styled.div`
   border-left: 1px solid var(--color-cool-gray-200);
   padding-left: 24px;
 `;
@@ -86,12 +86,12 @@ function ItemDetail() {
 
   return product ? (
     <StyledItemDetail>
-      <StyledItemDetailImage>
+      <ItemImage>
         {product.images[0] && <img src={product.images[0]} />}
-      </StyledItemDetailImage>
-      <StyledItemDetailInfo>
+      </ItemImage>
+      <ItemInfo>
         <ItemDetailTitle title={product.name} price={product.price} />
-        <StyledItemDetailSections>
+        <InfoSectionContainer>
           <ItemDetailSection
             title="상품 소개"
             description={product.description}
@@ -99,20 +99,20 @@ function ItemDetail() {
           <ItemDetailSection title="상품 태그">
             <TagList tags={product.tags} />
           </ItemDetailSection>
-        </StyledItemDetailSections>
-        <StyledItemDetailProfileContainer>
+        </InfoSectionContainer>
+        <ProfileContainer>
           <ItemDetailProfile
             name={product.ownerNickname}
             createdAt={product.createdAt}
           />
-          <StyledItemDetailFavoriteContainer>
+          <FavoriteContainer>
             <FavoriteButton
               isFavorite={product.isFavorite}
               count={product.favoriteCount}
             />
-          </StyledItemDetailFavoriteContainer>
-        </StyledItemDetailProfileContainer>
-      </StyledItemDetailInfo>
+          </FavoriteContainer>
+        </ProfileContainer>
+      </ItemInfo>
     </StyledItemDetail>
   ) : (
     // TODO: Product loading 중 보여줄 UI

From 9c59b120184ab3a53840d3ba406632cf43002e8a Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Tue, 5 Aug 2025 17:20:55 +0900
Subject: [PATCH 14/31] =?UTF-8?q?feat(Sprint7):=20=EC=83=81=ED=92=88=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20-=20=EC=83=81=ED=92=88=20=EC=A0=95?=
 =?UTF-8?q?=EB=B3=B4=EC=99=80=20comment=EB=A5=BC=20=EA=B5=AC=EB=B6=84?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20Separator=20component=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/item-comment/item-comment.jsx   |  5 +++++
 .../src/pages/items/item-detail-page.jsx       | 18 ++++++++++++++++++
 2 files changed, 23 insertions(+)
 create mode 100644 vite-project/src/components/item-comment/item-comment.jsx

diff --git a/vite-project/src/components/item-comment/item-comment.jsx b/vite-project/src/components/item-comment/item-comment.jsx
new file mode 100644
index 00000000..ca1b9e67
--- /dev/null
+++ b/vite-project/src/components/item-comment/item-comment.jsx
@@ -0,0 +1,5 @@
+function ItemComment() {
+  return <h2>Comments</h2>;
+}
+
+export default ItemComment;
diff --git a/vite-project/src/pages/items/item-detail-page.jsx b/vite-project/src/pages/items/item-detail-page.jsx
index a26c98d0..2f9f1f1c 100644
--- a/vite-project/src/pages/items/item-detail-page.jsx
+++ b/vite-project/src/pages/items/item-detail-page.jsx
@@ -1,9 +1,27 @@
+import styled from "styled-components";
+import ItemComment from "../../components/item-comment/item-comment";
 import ItemDetail from "../../components/item-detail/item-detail";
 
+const Separator = styled.div`
+  width: 100%;
+  border-bottom: 1px solid var(--color-cool-gray-200);
+  margin: 40px 0;
+
+  @media (max-width: 1199px) {
+    margin-top: 32px;
+  }
+
+  @media (max-width: 767px) {
+    margin: 24px 0;
+  }
+`;
+
 function ItemDetailPage() {
   return (
     <div>
       <ItemDetail />
+      <Separator />
+      <ItemComment />
     </div>
   );
 }

From cb8a160ce21935b92bc6a03e80fb5db627d24c9f Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Tue, 5 Aug 2025 17:34:13 +0900
Subject: [PATCH 15/31] =?UTF-8?q?feat(Sprint7):=20TextInput=20component?=
 =?UTF-8?q?=EC=9D=98=20multiline=20height=20=EC=84=A4=EC=A0=95=EC=9D=84=20?=
 =?UTF-8?q?`rows`=20=EA=B8=B0=EB=B0=98=EC=9C=BC=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite-project/src/components/text-input.jsx        | 3 +--
 vite-project/src/pages/add-item/add-item-page.jsx | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/vite-project/src/components/text-input.jsx b/vite-project/src/components/text-input.jsx
index 986e0316..8a3c79c2 100644
--- a/vite-project/src/components/text-input.jsx
+++ b/vite-project/src/components/text-input.jsx
@@ -24,7 +24,6 @@ const StyledTextInput = styled.div`
   background-color: var(--color-secondary-100);
   padding: 16px 24px;
   border-radius: 12px;
-  ${({ $multiline }) => ($multiline ? "height: 282px;" : "")}
 
   input {
     ${inputStyle}
@@ -51,7 +50,7 @@ const StyledTextInput = styled.div`
 
 function TextInput({ multiline = false, ...props }) {
   return (
-    <StyledTextInput $multiline={multiline}>
+    <StyledTextInput>
       {multiline ? <textarea {...props} /> : <input {...props} />}
     </StyledTextInput>
   );
diff --git a/vite-project/src/pages/add-item/add-item-page.jsx b/vite-project/src/pages/add-item/add-item-page.jsx
index a524193a..49a91f81 100644
--- a/vite-project/src/pages/add-item/add-item-page.jsx
+++ b/vite-project/src/pages/add-item/add-item-page.jsx
@@ -107,6 +107,7 @@ function AddItemPage() {
               placeholder={"상품 소개를 입력해주세요"}
               onChange={handleInputChange}
               multiline
+              rows="10"
             />
           </Section>
           <Section>

From ff0fc7b60aafecc58a3c54e6f92a82498ca5908e Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Tue, 5 Aug 2025 17:39:00 +0900
Subject: [PATCH 16/31] =?UTF-8?q?feat(Sprint7):=20=EC=83=81=ED=92=88=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20-=20comment=20form=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../item-comment/item-comment-form.jsx        | 60 +++++++++++++++++++
 .../components/item-comment/item-comment.jsx  |  8 ++-
 2 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 vite-project/src/components/item-comment/item-comment-form.jsx

diff --git a/vite-project/src/components/item-comment/item-comment-form.jsx b/vite-project/src/components/item-comment/item-comment-form.jsx
new file mode 100644
index 00000000..4b4c4571
--- /dev/null
+++ b/vite-project/src/components/item-comment/item-comment-form.jsx
@@ -0,0 +1,60 @@
+import { useState } from "react";
+import styled from "styled-components";
+import Button from "../Button";
+import TextInput from "../text-input";
+
+const StyledItemCommentForm = styled.form`
+  display: flex;
+  flex-direction: column;
+
+  label {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 26px;
+    color: var(--color-secondary-800);
+  }
+
+  div:nth-child(2) {
+    margin-top: 9px;
+    margin-bottom: 16px;
+  }
+
+  button {
+    align-self: flex-end;
+  }
+
+  @media (max-width: 767px) {
+    div:nth-child(2) {
+      margin-top: 16px;
+    }
+  }
+`;
+
+const INPUT_PLACEHOLDER =
+  "개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다.";
+
+function ItemCommentForm() {
+  const [comment, setComment] = useState("");
+  const canSubmit = comment.length > 0;
+
+  const handleInputChange = (event) => {
+    setComment(event.target.value);
+  };
+
+  return (
+    <StyledItemCommentForm>
+      <label htmlFor="comment-input">문의하기</label>
+      <TextInput
+        id="comment-input"
+        value={comment}
+        placeholder={INPUT_PLACEHOLDER}
+        onChange={handleInputChange}
+        multiline
+        rows="3"
+      />
+      <Button disabled={!canSubmit}>등록</Button>
+    </StyledItemCommentForm>
+  );
+}
+
+export default ItemCommentForm;
diff --git a/vite-project/src/components/item-comment/item-comment.jsx b/vite-project/src/components/item-comment/item-comment.jsx
index ca1b9e67..b86ce009 100644
--- a/vite-project/src/components/item-comment/item-comment.jsx
+++ b/vite-project/src/components/item-comment/item-comment.jsx
@@ -1,5 +1,11 @@
+import ItemCommentForm from "./item-comment-form";
+
 function ItemComment() {
-  return <h2>Comments</h2>;
+  return (
+    <div>
+      <ItemCommentForm />
+    </div>
+  );
 }
 
 export default ItemComment;

From 9bbfb3375054d1b40988a072b34f754ff579fc01 Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Tue, 5 Aug 2025 19:16:19 +0900
Subject: [PATCH 17/31] =?UTF-8?q?refactor(Sprint7):=20User=20profile=20com?=
 =?UTF-8?q?ponent=EB=A5=BC=20=EC=9E=AC=EC=82=AC=EC=9A=A9=20=EA=B0=80?=
 =?UTF-8?q?=EB=8A=A5=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=B6=94=EC=B6=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite-project/src/components/item-detail/item-detail.jsx  | 7 ++++---
 .../item-detail-profile.jsx => user-profile-card.jsx}    | 9 ++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)
 rename vite-project/src/components/{item-detail/item-detail-profile.jsx => user-profile-card.jsx} (74%)

diff --git a/vite-project/src/components/item-detail/item-detail.jsx b/vite-project/src/components/item-detail/item-detail.jsx
index 86a1f7e5..310f1dc2 100644
--- a/vite-project/src/components/item-detail/item-detail.jsx
+++ b/vite-project/src/components/item-detail/item-detail.jsx
@@ -2,9 +2,10 @@ import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import styled from "styled-components";
 import { fetchProduct } from "../../api/products";
+import { formatDateYYYYMMDD } from "../../utils/formatter";
 import FavoriteButton from "../favorite-button";
 import TagList from "../tag/tag-list";
-import ItemDetailProfile from "./item-detail-profile";
+import UserProfileCard from "../user-profile-card";
 import ItemDetailSection from "./item-detail-section";
 import ItemDetailTitle from "./item-detail-title";
 
@@ -101,9 +102,9 @@ function ItemDetail() {
           </ItemDetailSection>
         </InfoSectionContainer>
         <ProfileContainer>
-          <ItemDetailProfile
+          <UserProfileCard
             name={product.ownerNickname}
-            createdAt={product.createdAt}
+            status={formatDateYYYYMMDD(product.createdAt)}
           />
           <FavoriteContainer>
             <FavoriteButton
diff --git a/vite-project/src/components/item-detail/item-detail-profile.jsx b/vite-project/src/components/user-profile-card.jsx
similarity index 74%
rename from vite-project/src/components/item-detail/item-detail-profile.jsx
rename to vite-project/src/components/user-profile-card.jsx
index e2feb19e..bbfe69a4 100644
--- a/vite-project/src/components/item-detail/item-detail-profile.jsx
+++ b/vite-project/src/components/user-profile-card.jsx
@@ -1,6 +1,5 @@
 import styled from "styled-components";
-import { formatDateYYYYMMDD } from "../../utils/formatter";
-import Avatar from "../avatar";
+import Avatar from "./avatar";
 
 const ProfileInfo = styled.div`
   display: flex;
@@ -31,16 +30,16 @@ const StyledItemDetailProfile = styled.div`
   }
 `;
 
-function ItemDetailProfile({ imageUrl, name, createdAt }) {
+function UserProfileCard({ imageUrl, name, status }) {
   return (
     <StyledItemDetailProfile>
       <Avatar imageUrl={imageUrl} />
       <ProfileInfo>
         <span>{name}</span>
-        <span>{formatDateYYYYMMDD(createdAt)}</span>
+        <span>{status}</span>
       </ProfileInfo>
     </StyledItemDetailProfile>
   );
 }
 
-export default ItemDetailProfile;
+export default UserProfileCard;

From 45450448c093705764d671cfd132f151db0197e9 Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Tue, 5 Aug 2025 19:54:00 +0900
Subject: [PATCH 18/31] =?UTF-8?q?feat(Sprint7):=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=EC=BD=98=20=EB=B2=84=ED=8A=BC=EC=9D=84=20component=EB=A1=9C=20?=
 =?UTF-8?q?=EC=B6=94=EC=B6=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/button/icon-button.jsx     | 25 +++++++++++++++++++
 .../item-detail/item-detail-title.jsx         | 14 ++---------
 2 files changed, 27 insertions(+), 12 deletions(-)
 create mode 100644 vite-project/src/components/button/icon-button.jsx

diff --git a/vite-project/src/components/button/icon-button.jsx b/vite-project/src/components/button/icon-button.jsx
new file mode 100644
index 00000000..81bb19bd
--- /dev/null
+++ b/vite-project/src/components/button/icon-button.jsx
@@ -0,0 +1,25 @@
+import styled from "styled-components";
+
+const StyledIconButton = styled.button`
+  width: ${({ $size }) => $size}px;
+  height: ${({ $size }) => $size}px;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+function IconButton({ className, src, size = 24 }) {
+  return (
+    <StyledIconButton className={className} $size={size}>
+      <img src={src} />
+    </StyledIconButton>
+  );
+}
+
+export default IconButton;
diff --git a/vite-project/src/components/item-detail/item-detail-title.jsx b/vite-project/src/components/item-detail/item-detail-title.jsx
index 2014f8a0..b5dc2723 100644
--- a/vite-project/src/components/item-detail/item-detail-title.jsx
+++ b/vite-project/src/components/item-detail/item-detail-title.jsx
@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import moreImg from "../../assets/ic-dots-3-vertical.svg";
 import { formatPrice } from "../../utils/formatter";
+import IconButton from "../button/icon-button";
 
 const StyledItemDetailTitle = styled.div``;
 
@@ -27,15 +28,6 @@ const StyledItemName = styled.h2`
   }
 `;
 
-const StyledItemMoreButton = styled.button`
-  background: none;
-  border: none;
-  padding: 0;
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-`;
-
 const StyledItemPrice = styled.span`
   display: block;
   font-size: 40px;
@@ -66,9 +58,7 @@ function ItemDetailTitle({ title, price }) {
     <StyledItemDetailTitle>
       <StyledItemTitleHeader>
         <StyledItemName>{title}</StyledItemName>
-        <StyledItemMoreButton>
-          <img src={moreImg} />
-        </StyledItemMoreButton>
+        <IconButton src={moreImg} />
       </StyledItemTitleHeader>
       <StyledItemPrice>{formatPrice(price, "원")}</StyledItemPrice>
       <StyledSeparator />

From 754b92a3bc94b1ef723c17d9789ca32c03b93acc Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Tue, 5 Aug 2025 19:54:14 +0900
Subject: [PATCH 19/31] =?UTF-8?q?feat(Sprint7):=20=EC=83=81=ED=92=88=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20-=20comment=20=EB=AA=A9=EB=A1=9D=20UI=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../item-comment/Item-comment-list.jsx        | 66 +++++++++++++++++
 .../components/item-comment/item-comment.jsx  | 17 ++++-
 .../components/item-detail/item-detail.jsx    |  2 +-
 .../src/components/user-profile-card.jsx      | 45 ------------
 .../user-profile-card-size.js                 |  4 ++
 .../user-profile-card/user-profile-card.jsx   | 72 +++++++++++++++++++
 .../src/pages/items/item-detail-page.jsx      | 12 +++-
 vite-project/src/palette.css                  |  1 +
 8 files changed, 169 insertions(+), 50 deletions(-)
 create mode 100644 vite-project/src/components/item-comment/Item-comment-list.jsx
 delete mode 100644 vite-project/src/components/user-profile-card.jsx
 create mode 100644 vite-project/src/components/user-profile-card/user-profile-card-size.js
 create mode 100644 vite-project/src/components/user-profile-card/user-profile-card.jsx

diff --git a/vite-project/src/components/item-comment/Item-comment-list.jsx b/vite-project/src/components/item-comment/Item-comment-list.jsx
new file mode 100644
index 00000000..6ec27447
--- /dev/null
+++ b/vite-project/src/components/item-comment/Item-comment-list.jsx
@@ -0,0 +1,66 @@
+import styled from "styled-components";
+import moreImg from "../../assets/ic-dots-3-vertical.svg";
+import IconButton from "../button/icon-button";
+import UserProfileCard from "../user-profile-card/user-profile-card";
+import { USER_PROFILE_CARD_SIZE } from "../user-profile-card/user-profile-card-size";
+
+const StyledItemComment = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  position: relative;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--color-secondary-300);
+
+  p {
+    margin: 0;
+    font-size: 14px;
+    line-height: 24px;
+  }
+`;
+
+const MoreButton = styled(IconButton)`
+  position: absolute;
+  top: 0;
+  right: 0;
+`;
+
+function ItemComment({ content }) {
+  return (
+    <StyledItemComment>
+      <p>{content}</p>
+      <UserProfileCard
+        name="똑똑한판다"
+        status="1시간 전"
+        size={USER_PROFILE_CARD_SIZE.small}
+      />
+      <MoreButton src={moreImg} />
+    </StyledItemComment>
+  );
+}
+
+const StyledItemCommentList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  @media (max-width: 767px) {
+    gap: 16px;
+  }
+`;
+
+function ItemCommentList() {
+  return (
+    <StyledItemCommentList>
+      <ItemComment content="사용 기간이 어떻게되나요?" />
+      <ItemComment content="사용 기간이 어떻게되나요?" />
+      <ItemComment content="사용 기간이 어떻게되나요?" />
+      <ItemComment content="사용 기간이 어떻게되나요?" />
+      <ItemComment content="사용 기간이 어떻게되나요?" />
+      <ItemComment content="사용 기간이 어떻게되나요?" />
+      <ItemComment content="사용 기간이 어떻게되나요?" />
+    </StyledItemCommentList>
+  );
+}
+
+export default ItemCommentList;
diff --git a/vite-project/src/components/item-comment/item-comment.jsx b/vite-project/src/components/item-comment/item-comment.jsx
index b86ce009..fc1b63ba 100644
--- a/vite-project/src/components/item-comment/item-comment.jsx
+++ b/vite-project/src/components/item-comment/item-comment.jsx
@@ -1,10 +1,23 @@
+import styled from "styled-components";
 import ItemCommentForm from "./item-comment-form";
+import ItemCommentList from "./Item-comment-list";
+
+const StyledItemComment = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  @media (max-width: 1199px) {
+    gap: 40px;
+  }
+`;
 
 function ItemComment() {
   return (
-    <div>
+    <StyledItemComment>
       <ItemCommentForm />
-    </div>
+      <ItemCommentList />
+    </StyledItemComment>
   );
 }
 
diff --git a/vite-project/src/components/item-detail/item-detail.jsx b/vite-project/src/components/item-detail/item-detail.jsx
index 310f1dc2..8736fa8b 100644
--- a/vite-project/src/components/item-detail/item-detail.jsx
+++ b/vite-project/src/components/item-detail/item-detail.jsx
@@ -5,7 +5,7 @@ import { fetchProduct } from "../../api/products";
 import { formatDateYYYYMMDD } from "../../utils/formatter";
 import FavoriteButton from "../favorite-button";
 import TagList from "../tag/tag-list";
-import UserProfileCard from "../user-profile-card";
+import UserProfileCard from "../user-profile-card/user-profile-card";
 import ItemDetailSection from "./item-detail-section";
 import ItemDetailTitle from "./item-detail-title";
 
diff --git a/vite-project/src/components/user-profile-card.jsx b/vite-project/src/components/user-profile-card.jsx
deleted file mode 100644
index bbfe69a4..00000000
--- a/vite-project/src/components/user-profile-card.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import styled from "styled-components";
-import Avatar from "./avatar";
-
-const ProfileInfo = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-
-  span:first-child {
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 24px;
-    color: var(--color-secondary-600);
-  }
-
-  span:last-child {
-    font-size: 14px;
-    line-height: 24px;
-    color: var(--color-cool-gray-400);
-  }
-`;
-
-const StyledItemDetailProfile = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 16px;
-
-  ${ProfileInfo} {
-    flex-grow: 1;
-  }
-`;
-
-function UserProfileCard({ imageUrl, name, status }) {
-  return (
-    <StyledItemDetailProfile>
-      <Avatar imageUrl={imageUrl} />
-      <ProfileInfo>
-        <span>{name}</span>
-        <span>{status}</span>
-      </ProfileInfo>
-    </StyledItemDetailProfile>
-  );
-}
-
-export default UserProfileCard;
diff --git a/vite-project/src/components/user-profile-card/user-profile-card-size.js b/vite-project/src/components/user-profile-card/user-profile-card-size.js
new file mode 100644
index 00000000..4df3737c
--- /dev/null
+++ b/vite-project/src/components/user-profile-card/user-profile-card-size.js
@@ -0,0 +1,4 @@
+export const USER_PROFILE_CARD_SIZE = {
+  large: "large",
+  small: "small",
+};
diff --git a/vite-project/src/components/user-profile-card/user-profile-card.jsx b/vite-project/src/components/user-profile-card/user-profile-card.jsx
new file mode 100644
index 00000000..26fe9037
--- /dev/null
+++ b/vite-project/src/components/user-profile-card/user-profile-card.jsx
@@ -0,0 +1,72 @@
+import styled from "styled-components";
+import Avatar from "../avatar";
+import { USER_PROFILE_CARD_SIZE } from "./user-profile-card-size";
+
+function infoGap(cardSize) {
+  return cardSize === USER_PROFILE_CARD_SIZE.large ? 2 : 4;
+}
+
+function fontSize(cardSize) {
+  return cardSize === USER_PROFILE_CARD_SIZE.large ? 14 : 12;
+}
+
+function lineHeight(cardSize) {
+  return cardSize === USER_PROFILE_CARD_SIZE.large ? 24 : 18;
+}
+
+function cardGap(cardSize) {
+  return cardSize === USER_PROFILE_CARD_SIZE.large ? 16 : 8;
+}
+
+function avatarSize(cardSize) {
+  return cardSize === USER_PROFILE_CARD_SIZE.large ? 40 : 32;
+}
+
+const ProfileInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ $size }) => infoGap($size)}px;
+
+  span {
+    font-size: ${({ $size }) => fontSize($size)}px;
+    line-height: ${({ $size }) => lineHeight($size)}px;
+  }
+
+  span:first-child {
+    font-weight: 500;
+    color: var(--color-secondary-600);
+  }
+
+  span:last-child {
+    color: var(--color-cool-gray-400);
+  }
+`;
+
+const StyledUserProfileCard = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ $size }) => cardGap($size)}px;
+
+  ${ProfileInfo} {
+    flex-grow: 1;
+  }
+`;
+
+function UserProfileCard({
+  imageUrl,
+  name,
+  status,
+  size = USER_PROFILE_CARD_SIZE.large,
+}) {
+  return (
+    <StyledUserProfileCard $size={size}>
+      <Avatar imageUrl={imageUrl} size={avatarSize(size)} />
+      <ProfileInfo $size={size}>
+        <span>{name}</span>
+        <span>{status}</span>
+      </ProfileInfo>
+    </StyledUserProfileCard>
+  );
+}
+
+export default UserProfileCard;
diff --git a/vite-project/src/pages/items/item-detail-page.jsx b/vite-project/src/pages/items/item-detail-page.jsx
index 2f9f1f1c..528da85e 100644
--- a/vite-project/src/pages/items/item-detail-page.jsx
+++ b/vite-project/src/pages/items/item-detail-page.jsx
@@ -2,6 +2,14 @@ import styled from "styled-components";
 import ItemComment from "../../components/item-comment/item-comment";
 import ItemDetail from "../../components/item-detail/item-detail";
 
+const StyledItemDetailPage = styled.div`
+  margin-bottom: 200px;
+
+  @media (max-width: 767px) {
+    margin-bottom: 64px;
+  }
+`;
+
 const Separator = styled.div`
   width: 100%;
   border-bottom: 1px solid var(--color-cool-gray-200);
@@ -18,11 +26,11 @@ const Separator = styled.div`
 
 function ItemDetailPage() {
   return (
-    <div>
+    <StyledItemDetailPage>
       <ItemDetail />
       <Separator />
       <ItemComment />
-    </div>
+    </StyledItemDetailPage>
   );
 }
 
diff --git a/vite-project/src/palette.css b/vite-project/src/palette.css
index 78260bfa..95cdc27c 100644
--- a/vite-project/src/palette.css
+++ b/vite-project/src/palette.css
@@ -5,6 +5,7 @@
   /* Secondary */
   --color-secondary-100: #f3f4f6;
   --color-secondary-200: #e5e7eb;
+  --color-secondary-300: #e5e7eb;
   --color-secondary-400: #9ca3af;
   --color-secondary-600: #4b5563;
   --color-secondary-800: #1f2937;

From 5bb38157f282e7136597eaa15c16186171448cfe Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Tue, 5 Aug 2025 20:15:54 +0900
Subject: [PATCH 20/31] =?UTF-8?q?feat(Sprint7):=20Button=EC=97=90=20medium?=
 =?UTF-8?q?/small=20size=20=EB=B0=8F=20round/pill=20type=EC=97=90=20?=
 =?UTF-8?q?=EB=94=B0=EB=9D=BC=20=EB=8B=A4=EB=A5=B8=20style=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite-project/src/components/Button.jsx        | 24 ----------
 .../src/components/button/button-styles.js    |  9 ++++
 vite-project/src/components/button/button.jsx | 48 +++++++++++++++++++
 .../item-comment/item-comment-form.jsx        |  2 +-
 .../section/section-header-action.jsx         |  2 +-
 5 files changed, 59 insertions(+), 26 deletions(-)
 delete mode 100644 vite-project/src/components/Button.jsx
 create mode 100644 vite-project/src/components/button/button-styles.js
 create mode 100644 vite-project/src/components/button/button.jsx

diff --git a/vite-project/src/components/Button.jsx b/vite-project/src/components/Button.jsx
deleted file mode 100644
index fe78d60f..00000000
--- a/vite-project/src/components/Button.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import styled from "styled-components";
-
-const StyledButton = styled.button`
-  background-color: var(--color-primary-100);
-  padding: 8px 23px;
-  color: var(--color-cool-gray-100);
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 26px;
-  border-radius: 8px;
-  border: none;
-  cursor: pointer;
-
-  &:disabled {
-    background-color: var(--color-cool-gray-400);
-    cursor: default;
-  }
-`;
-
-function Button({ children, ...props }) {
-  return <StyledButton {...props}>{children}</StyledButton>;
-}
-
-export default Button;
diff --git a/vite-project/src/components/button/button-styles.js b/vite-project/src/components/button/button-styles.js
new file mode 100644
index 00000000..29da424a
--- /dev/null
+++ b/vite-project/src/components/button/button-styles.js
@@ -0,0 +1,9 @@
+export const BUTTON_SIZE = {
+  medium: "medium",
+  small: "small",
+};
+
+export const BUTTON_TYPE = {
+  round: "round",
+  pill: "pill",
+};
diff --git a/vite-project/src/components/button/button.jsx b/vite-project/src/components/button/button.jsx
new file mode 100644
index 00000000..5cf4c7b7
--- /dev/null
+++ b/vite-project/src/components/button/button.jsx
@@ -0,0 +1,48 @@
+import styled from "styled-components";
+import { BUTTON_SIZE, BUTTON_TYPE } from "./button-styles";
+
+function padding(buttonSize) {
+  return buttonSize === BUTTON_SIZE.medium ? "11px 40px" : "8px 23px";
+}
+
+function fontSize(buttonSize) {
+  return buttonSize === BUTTON_SIZE.medium ? 18 : 16;
+}
+
+function borderRadius(buttonType) {
+  return buttonType === BUTTON_TYPE.round ? 8 : 24;
+}
+
+const StyledButton = styled.button`
+  display: flex;
+  gap: 8px;
+  background-color: var(--color-primary-100);
+  padding: ${({ $size }) => padding($size)};
+  color: var(--color-cool-gray-100);
+  font-size: ${({ $size }) => fontSize($size)}px;
+  font-weight: 600;
+  line-height: 26px;
+  border-radius: ${({ $type }) => borderRadius($type)}px;
+  border: none;
+  cursor: pointer;
+
+  &:disabled {
+    background-color: var(--color-cool-gray-400);
+    cursor: default;
+  }
+`;
+
+function Button({
+  children,
+  size = BUTTON_SIZE.small,
+  type = BUTTON_TYPE.round,
+  ...props
+}) {
+  return (
+    <StyledButton $size={size} $type={type} {...props}>
+      {children}
+    </StyledButton>
+  );
+}
+
+export default Button;
diff --git a/vite-project/src/components/item-comment/item-comment-form.jsx b/vite-project/src/components/item-comment/item-comment-form.jsx
index 4b4c4571..340dc9c0 100644
--- a/vite-project/src/components/item-comment/item-comment-form.jsx
+++ b/vite-project/src/components/item-comment/item-comment-form.jsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import styled from "styled-components";
-import Button from "../Button";
+import Button from "../button/button";
 import TextInput from "../text-input";
 
 const StyledItemCommentForm = styled.form`
diff --git a/vite-project/src/components/section/section-header-action.jsx b/vite-project/src/components/section/section-header-action.jsx
index 26422767..f25bbdb8 100644
--- a/vite-project/src/components/section/section-header-action.jsx
+++ b/vite-project/src/components/section/section-header-action.jsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import Button from "../Button";
+import Button from "../button/button";
 
 const StyledSectionHeaderAction = styled(Button)`
   @media (max-width: 767px) {

From da3f3b57db1156eed09c87f6f2af22e6add8f824 Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Tue, 5 Aug 2025 20:16:11 +0900
Subject: [PATCH 21/31] =?UTF-8?q?feat(Sprint7):=20=EC=83=81=ED=92=88=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20-=20'=EB=AA=A9=EB=A1=9D=EC=9C=BC=EB=A1=9C?=
 =?UTF-8?q?=20=EB=8F=8C=EC=95=84=EA=B0=80=EA=B8=B0'=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite-project/src/assets/ic-arrow-back.svg     |  4 +++
 .../src/pages/items/item-detail-page.jsx      | 26 +++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 vite-project/src/assets/ic-arrow-back.svg

diff --git a/vite-project/src/assets/ic-arrow-back.svg b/vite-project/src/assets/ic-arrow-back.svg
new file mode 100644
index 00000000..9ba5ad94
--- /dev/null
+++ b/vite-project/src/assets/ic-arrow-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/pages/items/item-detail-page.jsx b/vite-project/src/pages/items/item-detail-page.jsx
index 528da85e..19f84f17 100644
--- a/vite-project/src/pages/items/item-detail-page.jsx
+++ b/vite-project/src/pages/items/item-detail-page.jsx
@@ -1,8 +1,17 @@
 import styled from "styled-components";
+import backImg from "../../assets/ic-arrow-back.svg";
+import Button from "../../components/button/button";
+import {
+  BUTTON_SIZE,
+  BUTTON_TYPE,
+} from "../../components/button/button-styles";
 import ItemComment from "../../components/item-comment/item-comment";
 import ItemDetail from "../../components/item-detail/item-detail";
 
 const StyledItemDetailPage = styled.div`
+  display: flex;
+  flex-direction: column;
+
   margin-bottom: 200px;
 
   @media (max-width: 767px) {
@@ -24,12 +33,29 @@ const Separator = styled.div`
   }
 `;
 
+const BackButton = styled(Button)`
+  align-self: center;
+  margin-top: 64px;
+
+  @media (max-width: 1199px) {
+    margin-top: 48px;
+  }
+
+  @media (max-width: 767px) {
+    margin-top: 40px;
+  }
+`;
+
 function ItemDetailPage() {
   return (
     <StyledItemDetailPage>
       <ItemDetail />
       <Separator />
       <ItemComment />
+      <BackButton size={BUTTON_SIZE.medium} type={BUTTON_TYPE.pill}>
+        목록으로 돌아가기
+        <img src={backImg} alt="되돌아가기" />
+      </BackButton>
     </StyledItemDetailPage>
   );
 }

From d9736177430df4c3d2cb1f99e0ac88afa4951604 Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Tue, 5 Aug 2025 21:19:26 +0900
Subject: [PATCH 22/31] =?UTF-8?q?feat(Sprint7):=20Comments=20API=20?=
 =?UTF-8?q?=EC=97=B0=EB=8F=99,=20comments=20=EC=97=86=EC=9D=84=20=EB=95=8C?=
 =?UTF-8?q?=20empty=20UI=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite-project/src/api/api.js                   |  22 +++++++++++
 vite-project/src/api/comments.js              |  12 ++++++
 vite-project/src/api/products.js              |  23 +-----------
 vite-project/src/assets/comments-empty.png    | Bin 0 -> 6265 bytes
 .../item-comment/Item-comment-list.jsx        |  19 ++++------
 .../components/item-comment/item-comment.jsx  |  19 +++++++++-
 .../item-comment/item-comments-empty.jsx      |  35 ++++++++++++++++++
 7 files changed, 96 insertions(+), 34 deletions(-)
 create mode 100644 vite-project/src/api/api.js
 create mode 100644 vite-project/src/api/comments.js
 create mode 100644 vite-project/src/assets/comments-empty.png
 create mode 100644 vite-project/src/components/item-comment/item-comments-empty.jsx

diff --git a/vite-project/src/api/api.js b/vite-project/src/api/api.js
new file mode 100644
index 00000000..1dc0828f
--- /dev/null
+++ b/vite-project/src/api/api.js
@@ -0,0 +1,22 @@
+function trimPath(str) {
+  let trimmed = str.trim();
+  while (trimmed.startsWith("/")) {
+    trimmed = trimmed.slice(1);
+  }
+  return trimmed;
+}
+
+export function createUrl(path, params) {
+  const trimmed = trimPath(path);
+  const url = new URL(`${import.meta.env.VITE_API_BASE_URL}/${trimmed}`);
+
+  if (!params) {
+    return url;
+  }
+
+  Object.keys(params).forEach((key) =>
+    url.searchParams.append(key, params[key])
+  );
+
+  return url;
+}
diff --git a/vite-project/src/api/comments.js b/vite-project/src/api/comments.js
new file mode 100644
index 00000000..13754f28
--- /dev/null
+++ b/vite-project/src/api/comments.js
@@ -0,0 +1,12 @@
+import { createUrl } from "./api";
+
+export async function fetchComments(productId, { limit = 10 } = {}) {
+  const url = createUrl(`products/${productId}/comments`, { limit });
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error("Failed to fetch products");
+  }
+
+  const json = await response.json();
+  return json.list;
+}
diff --git a/vite-project/src/api/products.js b/vite-project/src/api/products.js
index 11283375..b73847af 100644
--- a/vite-project/src/api/products.js
+++ b/vite-project/src/api/products.js
@@ -1,25 +1,4 @@
-function trimPath(str) {
-  let trimmed = str.trim();
-  while (trimmed.startsWith("/")) {
-    trimmed = trimmed.slice(1);
-  }
-  return trimmed;
-}
-
-function createUrl(path, params) {
-  const trimmed = trimPath(path);
-  const url = new URL(`${import.meta.env.VITE_API_BASE_URL}/${trimmed}`);
-
-  if (!params) {
-    return url;
-  }
-
-  Object.keys(params).forEach((key) =>
-    url.searchParams.append(key, params[key])
-  );
-
-  return url;
-}
+import { createUrl } from "./api";
 
 export async function fetchProducts({
   keyword = "",
diff --git a/vite-project/src/assets/comments-empty.png b/vite-project/src/assets/comments-empty.png
new file mode 100644
index 0000000000000000000000000000000000000000..25019b5afc96cfe296a580709c763565507e2260
GIT binary patch
literal 6265
zcmb_h^-~l8(>~-l4vshh={S(?MhWRI;Q;CGt~(l};Sf+Hq@|TSx}-}%N#W=a1SM5C
zK<ZxK`My8lo!Q-Ic4u~He|lyk`Kg{dDKR}U001D>)KD?}hr|C>FzBD{uT1m!2SmOa
zW&r>Igz~?N2goa+{TIXwFjQ9p)K4=0{O15&6m=B=fW~yljU531Kue~nqG%M1cT`A(
zq*QMo^Fd6E#>P2;l{I>W&L2l#h}t*6oC%^I4A;W!2;MvZ@BvH!X3>QYJ}Q9s6ek;B
zzfKpzw~baWKdukL2}pfZ%C0!xpScK1L%(uN#Wu(oudz`86`}tl(EzK)yabT5$QRD#
z^?sjV<gqd?H_<$e|4_WzSQ6GeH-{Jpuz^`k-1+#7!&W*EAa?TN^I3)$mJ_{_*Gp%-
z6-i*FB+{gTWq%LZZ&g><kk;yt-RD@EJ#V;Hrp8BcTBD&ayP12{?!JXi2Uj$ElLGKj
zy9r-oN?k0DCRFQn*U0famrVrnoWA0@X%fl3sQjq#?U2A%QIml^l&d5u*^7jIr`SDQ
zK)R?}-ROedqFEW5`(pg>6z&4V@dC`Id<ZIf7Iw9=W_DgXThVfRqUWB@qW{We$_!QS
z50HCcIi=J$inHO=);G((>%DD5Udrim-4>}p>1?Hb#X%$Aa+izOoGTyAybekEdQns<
z(`-`|aZMj2@QDr49A~~Ei~HW`TKwrbW2hqVr@|dV?cpWFnGdOXIkyE%cWI)9$F`2~
z!L#>PD{d{z@EZBeH70Om6Zq5+`@{<$gPOg*%fLK}ooV8jc;ESe5H%B{qYEEX#&+FG
zkcGW3&GppanP!53suZ*ACAPE;yCx_#KNaPN%=ni=G&uaiQ;D`Q*^Vat?C_9gX-Xyf
zI=#r>y=~&6<m}Jisi`l9F{Xh@!BXI|POd}qFWY|1H-DmNcz}_SPt-&JDYf0f%;Uno
z&sc8$1a6!tyYcxcvgAp}{iVwd*j?_Lu-Wf_(%tjj8Y6-#A#m|+V+58%GVd>cYvnnb
zVRXq4B{m7UBIEd6;+K0Ye}&+vrwe(hfW!ersrL)I3Up<d4qRrCd6?F!-RoP1jtZNo
z-#?wS-Y9R0uI&M&^)BLEy5bY>0vKO#)-+tx#aM~C6d8`TC*dbWn<48ejjFf%gR(5E
zBsC;?__acELXA@?+sN<`J})4aJawE*zvM6>{+*iNXH#3OeYPCHD*+Arz+u3n%8rra
zf!RnK=Lu<7tvA)JM;6IOvuL@E=GmH?TmhchzD8)aDR{z72w$iL_LN|Lx%16iCY2Go
z=B<iJ2KRK6N3Xx>7!dzjQHSMsz|0p)QfkJPepw<y&T9g+GewA*loyA-q-4HCfH(Qa
zM-s_zM?%8TEi(E%0}XDRsZ{*gegSejqQL3Mo~l(yvrVB@DReVJHu%PoIY(W;i1z()
zJKQrz^ZiN2#nWKGa$J9iriazq($ag${PoYv2Us85cL`c`=^u=mHrC}Y*G|Q4KFFoV
z<F-RFxSs}dejoj;a6x0g*Sm2~jI<fZKvNVPpFKT%hK}g<DY9ozwah}#o2N|N6mE3p
zv%|D~9@Aj!Kkc=rAC}C>QN>dO_qtp%{B!sxd(s%`Dra6jl>KqkiD9tdW5{2Dcj%g-
z(u~s$85Q_b)neDh^ICdN6Gp!M!WCYexWG$eTvtS|Q1HI?$JlPF?|&miULG5QCAt$!
z(PowOQLNeODO8k4_h?xdw#=T$1f*<t^lC`9BVDg`V{s?!UH)J71H!@}F@#Q=WTku6
zi|td2QoVOKhYwH+egwZy=U9U6d-XukVBT$qUVxe@IHY7?VOzJkQ8uI{+$}ILFw5RC
zsBTd!C!bB|>&ipoVUFbu)eb31R0p~dt=Q_s{U!lCY6@`Ci%@{$u3o0G<bTYf?f>-)
z3JD1x^}~)|jhY-`M@MhYkrRbtscV53`2#gjh^j3T*>x<TMI+lLxhF3#bp-hgm%3Qh
zTzOW;4n^fV&Cc-7K?iqK;_q%}+@vGE1s|(S$I_`T2qZZ;IGkp?*>z~0*r?N%e3Sqs
z*|&Yc{$UIo*y#R~_V$<prQEvQ%A%&0uwfpnNfswi(=ifGrnVPUH~Q`B>YVW(u@qk2
z@fxSuedF#@gcV|V>L%eD<p-mJ(80#!GSwzv?DJi_0R9&o=MxRayk*){cvJp@W`a|z
zS`icJ7JF=~OoD>~Pk}MV4=;Oqwm*6Ud}>Gie-K0;PXGQyB>$A!e9-pUew&vCW)QU5
zjYtR)jqB_7oBKOpP-h~0!6JvPS!0wp>P}YVizrqyv{dA7(OhL222*DF<vlXzX|bS6
zuzKbm84(axBKjn6`R?%T0SktCZ+#-s{v_<8q3)Q6D=@SjEfQDSGeNK%9d`CRkqg4|
zP(|$^o>Wjc4<!V0t_ks*&XzqavLb>Lk#pC=EGMk?KaiQ=9na*#xz70uq32^KAF9sS
zAVaRYRV?Vkp_8qa94Enkf!|Y;wxPKvVRq*S`aW<Vv7Fp`)L9%v#htish_^sCQYQ|I
z$IM^TRwp=Ywpt?>D(b+8C=^i6s=LvxHK>*g@3LLG>RupT3QD=>XCt5Ht5s9rWzK<5
zWe#mszfq*HDtu&qE)Z)Q*QFllRVwQo{y3!lizW5cl}#fUs?Xl|taKWYG&eThZUBdh
z&{mAc?n)D`j<ye886T%T04*DCY`GXRBogz1jcoa{l1G%ypCz%#Z?1o6ZL3V32Xq;C
zTK$PE1@e@`Bqb%C8OLf!7f^C?=r{&GLm446!k<gC)90l;2Cyft<fXTpA)efU#1bU&
zDXfxh3>$7$A+ecS;fba~!u>%=`m@R<b`192fIL1cBM_CS0fK2G9p9;_CnVkygqdkV
z-;lNa;~qqH9&sjN$<vr$Bb(CgJovWg1|QF>>-$LL`dN3g7YvqUM?H4=BdJg5p>8z$
zt7xs5K`<M{9;|}y?AcC%xj}{O`qWV0Op$qIG@M+<)rDfEPr-`i0w9vRoQ4JX{ej3A
zsj0ID)MKW9JX-t(P^*wZ8<YMlBdutD;u1<z)TiV!Bc5~vLtn)sWT$LVFoPE5jyY7L
zjx9ek5Ku_S8ko@`oT-Jdvo-bS11Ak2u=W}6jfcS=4c2ot7>3MeFAE3B`q}MCoN{(2
z%7&7Iex)gS6GR)o(L~`f@!y3sQfs$ylcHy7EF2vwt()dOi$wK1`9IhBcv|V}kXSN>
zHlCyIuJ%;zh5-xv4L>h%H$U5JlV4SDBjtGcns@Y|3>GpQr|BwJ5JeJY0&6CS$PIQ%
z8<m?Yo}HG+@k|h&q1ZBFk2WLGYJF0QyTi(28kMD<{=K^xtGZ3_cvsZz{bE6>24ZmG
z&ZSrnd}XxyJbG5(NBCWn-jvNw+ipu@NeM;7*_Nga37#M7Ue=*=K%nFSHhHx}$JDzZ
zj@EN!SqlGjps`xMjLhksmlN%%n)*#7{Ky^<eA330o|1G@Z?vp6I-jZ_$RBsY+Zh^f
z@B9)E?}BKdG&k1xJsz4EDj}(Z9h}Q6aOOYZJ2k7a1lvah90=-*(D0}YPNqRYf)*<>
znZ~yF({!0D{siMxI~P~ER4@MVXbyLoqc!x0GHM}(>f!YWN$m6v-GkESkC5x)hPpGL
z!cVLKqe?rvL1;d=D5I^5HMEg%w)_1&EZ-3&5H;da^FR(rk)t7enb@cvL-0I;!nG10
zvKdM_%#Pxq-X|D`<x;C0F0gWn91;R&Y_-1?16vNtq*lVQlfmV3!D9fQPDD0N#v2lu
z&M-`w#P=e@fbW%?;;<K!7NeMH+gaEX@E3d6Jn|+nHx5x5dRwM%RQS#&_m!jiV@7?I
zW-Z;B@WNiYDlzS){Z9As<>l;=`CBmwpH4qsobEX{c_?eyFp9KhtDa^{h*p@;w?u!#
zFbaw$YG<-i_~lMNA77ZPTaS>Q=jGYsOjAb5AfeBA7)3ht5LJ(*3oG^!hcOD>irO_J
zky9zVpRU)rSPF9+Jtb5{Y}rOa--r|<zTpK|Fe=mZqlcw+$#_A}W2cHS2XHFNZ@j8Q
zxEm7Z?~8cX*`g|*WkV-(nhRFMewVB+IUW72nw8NA4c-xRM=fV~Pk<j2fG)ulI3t}m
zZ#7)9Ohw^2FV4`Pj1Z1@TGV=!CZ$g|a0yn#w7#<ka9j77+i<~?5W*>5vs&C(QYYYc
z3>sN*Qifu+t?TvnOer%ZY^J@F-P4iOO^cZc`p)wCXyzW>&IyeN)q}%G$^%>G*QK=d
z%SBZrwnoslJ$iXDKu>zx!*h8p`<^K~m0U!=Qn7#+McLf$ZE<mZ{3l)};67+^>j7~a
z$&m7I>Yc_6gonqN%@S%P>@qn#LIHh4FW<;be#FtJ&Z-yl{fEzGD>hWulr9Amo7H5O
zoxB~=k{cg|)e7;<FdTgY`@i9I+vBl+IE75lsN2(Tyu)^ARyoV4p8M`*Qr4KpeS@pb
zj-|i&_*A6#2R%(=G#c}d-!dVN-fCb3TevelB?`~Ir32tqOg_;BZl<0{x-(j<`ry}^
zr6e6l7@N32f5r*9euM&NzsL1$y1cTF$4J;9K|@V(U1fhzJ_%9Gh{Tw@HylM9a8KeV
z9qJX@%~U)0G{C05r!s4!m~Ktb-T#`0d19FPMB(f<khW3Bq|PGc34G+E>-%{V+Y5&%
zv3!eI0t{y#KS^3&ao-Ck41=W*<(qX3srHQiLotWq<|ae(+AliA5B1o_y~XMAjT^F@
zc2i=U`ZtqO5=tJFgO7D%vvY!RJ;HCicoX8$`JY<LE<W5r5S&1~3%po1Jsq>c4tfS#
z(I42wN>1j=yz?&3hcTOnhWq2k38KHwWBM<I@kP#>C^)U)m{xe5>0Y({yjID14lO(q
zk;fK$rDUDdT(((*U61hkQU`P`m+s8FAE!6!M9+MTgGl|x!ZdUTrFTj)$S{o<@5gZe
zX>(lz6zvt~2Nj?J9m`wcs?WpZnlE$W6Xjx&4%YCll$+0srWGbU&YQfX{!j9VAl_Qg
z*Ym`>M!a`_l3fZmPDq~W3RH~Frs$<m%Sxp|MhAope$bg-vjm@UFpf8IajW`^NGOuH
zfNFQ0oe+Ghtc=JcVwuUHniuKF9(_yTRBH7pOmJ`W&EF5LlFbMhzgjPmAn9;+c_OV|
z;Ume*P<H%{^yFxFvn41ey4KaBD>Q;x)y&GraU7jhe?Utg{MJlp;cL0XJDtn(#m%_e
zt!)SOn+++4LyGk;So5&fV+#)1psx;buagi)F@$c&p(L0ky?GmVS05>#aMMalyCHKr
zJJ3ntZDqD=pJ@%eAwsXxveLV!@~M%yvFV|#trIzc$bIL6aZuf?u<E@5mYX&HXxM{T
ziQ|RyAB$cwj}D;fBuJ_$QML80!^6Nrw$c0e6-Jch(*5ht(QoKKDvNl>?Yl7%$BBFj
zFmXv%ilLi5<7C!#Hebvn)W9YTY^Y)!U_;WZxb%uOhJ1_2Mql}q2YZ6D!~Sw2Yl89|
zFLZeXe_q$tKOM7XbrvS;Wx@9r0MQBhG3CyCK?yw)LyvsGdSE5#)_|1ipZn6*+lmWg
znar1VCOoR2AIDo?3Qn4g;)}v%mb+#;`AAJRF<J6tmPX*3=xf^{iaY1NF)_uclRjGN
z!2(#ptf&+CwG~cSrj**AUe>!R-u1Xh_^Z&}dzI9n!S}St-@c{}@{P%oXCVQ0g65Cq
z*hYcT{drth9K_Kyi8!}Q5w05b)T!RJ8-H2y$-(2j;itF{ZoNVvFF=!Gr9BaNYlm=`
zE5;h#@N$3HU0h%*^z2~{*{-X?zcs=!?~w|12idQqGKxzaUJ@O;<sOF6PkUMmbe)g?
z@+z*?UBWV0s+gdGC_N;@$HwUyFEMloRu`ocv0hN1iLC`UCp)cls<XPHVLDQhpdv{d
z`RClrE<3`3UADAmiw(DjQ$1_4HzT1;5Rxr61an)`?K+fHutWadF@CcW;fE(lB^%=P
zpFXL3WL3utGk<w<`TeK;$?KS|*l0;<|2Q3rbK&#I{ueKzAGxX#;?sHSg;}%2hJSB&
z@nL~9%kl&BUi7TiiIzoCO7bZRE9!HRES}dhp#@orAOAh~o5^sVKBO&TuxBa<CpxiK
zqH^>C0!6=2#=pp6w$hb10Hb$D#g|irPNSn^qvbR#XLL!9FoeDGpvTVF3M9c~pD$?-
zHEKX|h0E8<TTfi{PQHM)?rujZdyO|S&y(GzQ7t?o+_MvIEDcVpN^dz*B@W~EpE4$9
zag#2og^3~Xy@}gQOA9|o=DWryM!aOWCvu4;jMOphD7y(lgYcqhZ3U)9$i2AnQ<_*h
za5c}?Jm~GZu&uEehiYY+DO)MNtUu(LY>iZa!7km0{0U+S0eA2GGVPC#mdQYW^3}Gz
zc&TE$!~lAbuYA9{V(>Rv6W%pU*!o~}7<ZXdVD99_lfU;qXt07;hFWPfO_PU`G!Odm
z{aP)V^D8rxoiaa1B9O^SyRT=4=HC#lj|6<Pstcu!HV~fQ=}^6F_2o?VT0Ya*D2LiE
zgq&mK)#lI|kUUu}6IaCT0%)#IH^1Hhlr)v@O0ov&W@n@xY~dEp4<Rsnl`DDY;)YEB
zIO{m>^$Xvg5}55Dj8ZZqdTzgVD$z{$2;-O1r1e+=2HajSsnIbdg!+^(aj(HDp7F42
zIJ7Od(ONv(ZI8Kc5H}RQs*qH9Qc-B;&Sj!_X`-ZlO4=xLmyWx0;-98Ah{IQMjqrAs
ze>7(Jj9Zz#>HgMTS(OB8ai39Uf3iT@&eMhIN^*%~LVs+K^j+WbVlxBj-;l55S4)iW
zKv;rl28FpzjnOF0zf`s)ZbY&kS~k?bREhIBU&8nM4dkvnDSNVhA3}fViD9kS+lc+x
zA2t~V{a|mbbGNI(tSP8o@BIFxvB37x5qp3l?Ybv^0?cJ+nzGL7f;TxgXZ&lqk!Q+y
z(n<8|7P;TZ3GVNl4V0F%jn;^yUw-;!vDkaiN4IE>Q@uG6YZq5_i;4*|DtrwcXmfEy
z+xU9t%o#nsubnOK*52#w08<;iwW9%0$v4mY1C~CGAuWxCsMUv)h+<>SXBM#!tT%EB
zf00H){x>zg8}Hyxtrwv=E$Z77yVdO^(P2aB<Q5B1><>K(8kM8p+dLBj^Ov~}a)hu)
zXgP3PY`kkFZ*9l}0?-pd>)EVp#w5J*SzN{Wzm=a~6~nW)qe$gLfc7A0(dz&V;k6hp
zWci1jNq&F+m7Z<nr!)sq?X-H8{-w;)x+H^1=B0l?6uL|*W8G_@%%TTENu$7^Q78GS
zTii_0rCQZM$dEGbMA|LvmEjZkXCQQBjHM{F!J;$j*Y*nTgUs;vBRj#{$SW_0E{TZ~
z>-QULnY;ZbsLC+Ckh4FI<5uDzj`{2mP6*OXOj1&-N}qjYi2F4<C9cIiTTHV@qxB4x
zs^YmO)|$=1Z(*_0!t`4qW3{X&pX^!jDKF^dm3iEf(A4_ou)cFPPR%aDA%%=bJFTvA
z1_tvHG~~)PEf~tSF9DY>E>BLeo+Oz5VZhHE6Lf6-Bg>uZ-u*>n<lY$7GoG=V>oWMA
z;;Z<02jCq|{Y>fyi&$^Rdh&>MRRdc^emDJ%Kt2a;RVpO~PIBju0bAbtHZGzFDj!!{
zqD=GMuDkU0%O6K<DR2KVLO@6@ykE3mX@{ogbMb|~EPqFWa8tOc%Cuf(RntNjS6H-5
z^$9oO+ofNh$T@k)H-GTflM4ncUvp{Kd>`U{uIF#J;*nnTxtYda;$Y$4L7ol^GaV7t
zr{I?ko3GXT+>QhS!rN9ES!}WfHVRiCb(^(Qw|TAI?39UJ1Wy~cRxGZ~8Q%rhj2lvR
zSb5|vU(<xk_x7CnT|z>F`quDzE|88P{5WamA2oMtvL{mH_#3B}p~fuqP1!+eYWt!;
z2)Tl0Y&hdfu!W~KMfqH;7dw(n8FY585wAyHx<i5n7(1uPdmkjIZm`okaQEzY?*H+2
za4CUN!R+qHqOi5Ir;VsGjyM@3!L>JqMbs=kwp3csBVT9t1XYo$%quk>AI=Pg>9o1+
zds!wI!)#RfgT$q;m&diTBn#+PX5j^E1K%kvr>LEHJIKi|jc;~zCVj%q5OQ}>oh|&?
k3jeFS`v2F7i@S^(udu>l4jI$`eF^}Ys(LE*O13fo0r^&@8UO$Q

literal 0
HcmV?d00001

diff --git a/vite-project/src/components/item-comment/Item-comment-list.jsx b/vite-project/src/components/item-comment/Item-comment-list.jsx
index 6ec27447..16db6b1a 100644
--- a/vite-project/src/components/item-comment/Item-comment-list.jsx
+++ b/vite-project/src/components/item-comment/Item-comment-list.jsx
@@ -25,13 +25,14 @@ const MoreButton = styled(IconButton)`
   right: 0;
 `;
 
-function ItemComment({ content }) {
+function ItemComment({ writer, updatedAt, content }) {
   return (
     <StyledItemComment>
       <p>{content}</p>
       <UserProfileCard
-        name="똑똑한판다"
-        status="1시간 전"
+        imageUrl={writer?.image}
+        name={writer?.nickname}
+        status={updatedAt}
         size={USER_PROFILE_CARD_SIZE.small}
       />
       <MoreButton src={moreImg} />
@@ -49,16 +50,12 @@ const StyledItemCommentList = styled.div`
   }
 `;
 
-function ItemCommentList() {
+function ItemCommentList({ comments }) {
   return (
     <StyledItemCommentList>
-      <ItemComment content="사용 기간이 어떻게되나요?" />
-      <ItemComment content="사용 기간이 어떻게되나요?" />
-      <ItemComment content="사용 기간이 어떻게되나요?" />
-      <ItemComment content="사용 기간이 어떻게되나요?" />
-      <ItemComment content="사용 기간이 어떻게되나요?" />
-      <ItemComment content="사용 기간이 어떻게되나요?" />
-      <ItemComment content="사용 기간이 어떻게되나요?" />
+      {comments.map((comment) => (
+        <ItemComment key={comment.id} content={comment.content} />
+      ))}
     </StyledItemCommentList>
   );
 }
diff --git a/vite-project/src/components/item-comment/item-comment.jsx b/vite-project/src/components/item-comment/item-comment.jsx
index fc1b63ba..a0460fde 100644
--- a/vite-project/src/components/item-comment/item-comment.jsx
+++ b/vite-project/src/components/item-comment/item-comment.jsx
@@ -1,6 +1,10 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
 import styled from "styled-components";
+import { fetchComments } from "../../api/comments";
 import ItemCommentForm from "./item-comment-form";
 import ItemCommentList from "./Item-comment-list";
+import ItemCommentsEmpty from "./item-comments-empty";
 
 const StyledItemComment = styled.div`
   display: flex;
@@ -13,10 +17,23 @@ const StyledItemComment = styled.div`
 `;
 
 function ItemComment() {
+  const [comments, setComments] = useState([]);
+  const { id } = useParams();
+
+  useEffect(() => {
+    fetchComments(id).then((comments) =>
+      setComments((prev) => [...prev, comments])
+    );
+  }, [id]);
+
   return (
     <StyledItemComment>
       <ItemCommentForm />
-      <ItemCommentList />
+      {comments.count > 0 ? (
+        <ItemCommentList comments={comments} />
+      ) : (
+        <ItemCommentsEmpty />
+      )}
     </StyledItemComment>
   );
 }
diff --git a/vite-project/src/components/item-comment/item-comments-empty.jsx b/vite-project/src/components/item-comment/item-comments-empty.jsx
new file mode 100644
index 00000000..ff0889fb
--- /dev/null
+++ b/vite-project/src/components/item-comment/item-comments-empty.jsx
@@ -0,0 +1,35 @@
+import styled from "styled-components";
+import emptyImg from "../../assets/comments-empty.png";
+
+const StyledItemCommentsEmpty = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: 16px;
+  line-height: 26px;
+  color: var(--color-cool-gray-400);
+  margin: 0 auto;
+
+  img {
+    width: 196px;
+    height: 196px;
+  }
+
+  @media (max-width: 1199px) {
+    img {
+      width: 140px;
+      height: 140px;
+    }
+  }
+`;
+
+function ItemCommentsEmpty() {
+  return (
+    <StyledItemCommentsEmpty>
+      <img src={emptyImg} alt="문의 없음" />
+      아직 문의가 없어요.
+    </StyledItemCommentsEmpty>
+  );
+}
+
+export default ItemCommentsEmpty;

From cfc9d17dcd92f10417a6a86c48899430a2b05d80 Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Tue, 5 Aug 2025 21:23:53 +0900
Subject: [PATCH 23/31] =?UTF-8?q?feat(Sprint7):=20'=EB=AA=A9=EB=A1=9D?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=8F=8C=EC=95=84=EA=B0=80=EA=B8=B0'=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20'/items'?=
 =?UTF-8?q?=20path=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/items/item-detail-page.jsx      | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/vite-project/src/pages/items/item-detail-page.jsx b/vite-project/src/pages/items/item-detail-page.jsx
index 19f84f17..288b9df1 100644
--- a/vite-project/src/pages/items/item-detail-page.jsx
+++ b/vite-project/src/pages/items/item-detail-page.jsx
@@ -1,3 +1,4 @@
+import { Link } from "react-router-dom";
 import styled from "styled-components";
 import backImg from "../../assets/ic-arrow-back.svg";
 import Button from "../../components/button/button";
@@ -33,9 +34,10 @@ const Separator = styled.div`
   }
 `;
 
-const BackButton = styled(Button)`
+const StyledLink = styled(Link)`
   align-self: center;
   margin-top: 64px;
+  text-decoration: none;
 
   @media (max-width: 1199px) {
     margin-top: 48px;
@@ -46,16 +48,24 @@ const BackButton = styled(Button)`
   }
 `;
 
+function BackButton({ children }) {
+  return (
+    <StyledLink to="/items">
+      <Button size={BUTTON_SIZE.medium} type={BUTTON_TYPE.pill}>
+        {children}
+        <img src={backImg} alt="되돌아가기" />
+      </Button>
+    </StyledLink>
+  );
+}
+
 function ItemDetailPage() {
   return (
     <StyledItemDetailPage>
       <ItemDetail />
       <Separator />
       <ItemComment />
-      <BackButton size={BUTTON_SIZE.medium} type={BUTTON_TYPE.pill}>
-        목록으로 돌아가기
-        <img src={backImg} alt="되돌아가기" />
-      </BackButton>
+      <BackButton>목록으로 돌아가기</BackButton>
     </StyledItemDetailPage>
   );
 }

From 3c447c9213d023a2a0fc59f3615b949250387636 Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Wed, 6 Aug 2025 10:10:40 +0900
Subject: [PATCH 24/31] =?UTF-8?q?feat(Sprint7):=20Comment=20more=20button?=
 =?UTF-8?q?=20=ED=81=B4=EB=A6=AD=ED=95=A0=20=EB=95=8C=20dropdown=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

테스트를 위해 comments API 연동 코드를 주석 처리하고 dummy `CommentListItem`을 작성
---
 .../src/components/button/icon-button.jsx     |  4 +-
 .../item-comment/Item-comment-list.jsx        | 76 +++++++++++++++++--
 .../components/item-comment/item-comment.jsx  | 23 +++---
 vite-project/src/palette.css                  |  2 +
 4 files changed, 84 insertions(+), 21 deletions(-)

diff --git a/vite-project/src/components/button/icon-button.jsx b/vite-project/src/components/button/icon-button.jsx
index 81bb19bd..71d1af15 100644
--- a/vite-project/src/components/button/icon-button.jsx
+++ b/vite-project/src/components/button/icon-button.jsx
@@ -14,9 +14,9 @@ const StyledIconButton = styled.button`
   }
 `;
 
-function IconButton({ className, src, size = 24 }) {
+function IconButton({ className, src, size = 24, onClick }) {
   return (
-    <StyledIconButton className={className} $size={size}>
+    <StyledIconButton className={className} $size={size} onClick={onClick}>
       <img src={src} />
     </StyledIconButton>
   );
diff --git a/vite-project/src/components/item-comment/Item-comment-list.jsx b/vite-project/src/components/item-comment/Item-comment-list.jsx
index 16db6b1a..e15cdb3e 100644
--- a/vite-project/src/components/item-comment/Item-comment-list.jsx
+++ b/vite-project/src/components/item-comment/Item-comment-list.jsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import styled from "styled-components";
 import moreImg from "../../assets/ic-dots-3-vertical.svg";
 import IconButton from "../button/icon-button";
@@ -25,7 +26,44 @@ const MoreButton = styled(IconButton)`
   right: 0;
 `;
 
-function ItemComment({ writer, updatedAt, content }) {
+const Dropdown = styled.div`
+  min-width: 139px;
+  border: 1px solid var(--color-cool-gray-300);
+  border-radius: 8px;
+  position: absolute;
+  top: 34px;
+  right: 0;
+  background-color: white;
+  z-index: 1;
+
+  button {
+    display: block;
+    font-size: 16px;
+    line-height: 26px;
+    text-align: center;
+    color: var(--color-secondary-500);
+    height: 45px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: none;
+    border: none;
+    width: 100%;
+    cursor: pointer;
+  }
+`;
+
+function CommentListItem({ writer, updatedAt, content }) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const handleMoreClick = () => {
+    setIsMenuOpen((prev) => !prev);
+  };
+
+  const handleOptionClick = () => {
+    // TODO: 수정하기 or 삭제하기 기능 구현
+  };
+
   return (
     <StyledItemComment>
       <p>{content}</p>
@@ -35,7 +73,13 @@ function ItemComment({ writer, updatedAt, content }) {
         status={updatedAt}
         size={USER_PROFILE_CARD_SIZE.small}
       />
-      <MoreButton src={moreImg} />
+      <MoreButton src={moreImg} onClick={handleMoreClick} />
+      {isMenuOpen && (
+        <Dropdown>
+          <button onClick={handleOptionClick}>수정하기</button>
+          <button onClick={handleOptionClick}>삭제하기</button>
+        </Dropdown>
+      )}
     </StyledItemComment>
   );
 }
@@ -50,12 +94,32 @@ const StyledItemCommentList = styled.div`
   }
 `;
 
-function ItemCommentList({ comments }) {
+function ItemCommentList() {
   return (
     <StyledItemCommentList>
-      {comments.map((comment) => (
-        <ItemComment key={comment.id} content={comment.content} />
-      ))}
+      <CommentListItem
+        writer={{ nickname: "똑똑한판다" }}
+        content="혹시 사용기간이 어떻게 되실까요?"
+      />
+      <CommentListItem
+        writer={{ nickname: "똑똑한판다" }}
+        content="혹시 사용기간이 어떻게 되실까요?"
+      />
+      <CommentListItem
+        writer={{ nickname: "똑똑한판다" }}
+        content="혹시 사용기간이 어떻게 되실까요?"
+      />
+      <CommentListItem
+        writer={{ nickname: "똑똑한판다" }}
+        content="혹시 사용기간이 어떻게 되실까요?"
+      />
+      <CommentListItem
+        writer={{ nickname: "똑똑한판다" }}
+        content="혹시 사용기간이 어떻게 되실까요?"
+      />
+      {/* {comments.map((comment) => (
+        <CommentListItem key={comment.id} content={comment.content} />
+      ))} */}
     </StyledItemCommentList>
   );
 }
diff --git a/vite-project/src/components/item-comment/item-comment.jsx b/vite-project/src/components/item-comment/item-comment.jsx
index a0460fde..f2d90645 100644
--- a/vite-project/src/components/item-comment/item-comment.jsx
+++ b/vite-project/src/components/item-comment/item-comment.jsx
@@ -1,10 +1,6 @@
-import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
 import styled from "styled-components";
-import { fetchComments } from "../../api/comments";
 import ItemCommentForm from "./item-comment-form";
 import ItemCommentList from "./Item-comment-list";
-import ItemCommentsEmpty from "./item-comments-empty";
 
 const StyledItemComment = styled.div`
   display: flex;
@@ -17,23 +13,24 @@ const StyledItemComment = styled.div`
 `;
 
 function ItemComment() {
-  const [comments, setComments] = useState([]);
-  const { id } = useParams();
+  // const [comments, setComments] = useState([]);
+  // const { id } = useParams();
 
-  useEffect(() => {
-    fetchComments(id).then((comments) =>
-      setComments((prev) => [...prev, comments])
-    );
-  }, [id]);
+  // useEffect(() => {
+  //   fetchComments(id).then((comments) =>
+  //     setComments((prev) => [...prev, comments])
+  //   );
+  // }, [id]);
 
   return (
     <StyledItemComment>
       <ItemCommentForm />
-      {comments.count > 0 ? (
+      <ItemCommentList />
+      {/* {comments.count > 0 ? (
         <ItemCommentList comments={comments} />
       ) : (
         <ItemCommentsEmpty />
-      )}
+      )} */}
     </StyledItemComment>
   );
 }
diff --git a/vite-project/src/palette.css b/vite-project/src/palette.css
index 95cdc27c..c6c9eec8 100644
--- a/vite-project/src/palette.css
+++ b/vite-project/src/palette.css
@@ -7,6 +7,7 @@
   --color-secondary-200: #e5e7eb;
   --color-secondary-300: #e5e7eb;
   --color-secondary-400: #9ca3af;
+  --color-secondary-500: #6b7280;
   --color-secondary-600: #4b5563;
   --color-secondary-800: #1f2937;
   --color-secondary-900: #111827;
@@ -14,6 +15,7 @@
   /* Cool Gray */
   --color-cool-gray-100: #f3f4f6;
   --color-cool-gray-200: #e5e7eb;
+  --color-cool-gray-300: #d1d5db;
   --color-cool-gray-400: #9ca3af;
   --color-cool-gray-500: #6b7280;
 

From e3d97ff750c05223a233db858675f32d9ff141ac Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Wed, 6 Aug 2025 14:23:50 +0900
Subject: [PATCH 25/31] =?UTF-8?q?feat(Sprint7):=20Comment=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20UI=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../item-comment/Item-comment-list.jsx        | 106 +++++++++++++++---
 vite-project/src/palette.css                  |   3 +
 2 files changed, 92 insertions(+), 17 deletions(-)

diff --git a/vite-project/src/components/item-comment/Item-comment-list.jsx b/vite-project/src/components/item-comment/Item-comment-list.jsx
index e15cdb3e..9443baa8 100644
--- a/vite-project/src/components/item-comment/Item-comment-list.jsx
+++ b/vite-project/src/components/item-comment/Item-comment-list.jsx
@@ -1,16 +1,18 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import styled from "styled-components";
 import moreImg from "../../assets/ic-dots-3-vertical.svg";
+import Button from "../button/button";
 import IconButton from "../button/icon-button";
+import TextInput from "../text-input";
 import UserProfileCard from "../user-profile-card/user-profile-card";
 import { USER_PROFILE_CARD_SIZE } from "../user-profile-card/user-profile-card-size";
 
 const StyledItemComment = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: ${({ $isEditing }) => ($isEditing ? 16 : 24)}px;
   position: relative;
-  padding-bottom: 12px;
+  padding-bottom: ${({ $isEditing }) => ($isEditing ? 24 : 12)}px;
   border-bottom: 1px solid var(--color-secondary-300);
 
   p {
@@ -20,6 +22,28 @@ const StyledItemComment = styled.div`
   }
 `;
 
+const BottomContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const EditingButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 24px;
+
+  button:first-child {
+    background: none;
+    border: none;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 26px;
+    color: var(--color-gray-500);
+    cursor: pointer;
+  }
+`;
+
 const MoreButton = styled(IconButton)`
   position: absolute;
   top: 0;
@@ -53,31 +77,60 @@ const Dropdown = styled.div`
   }
 `;
 
-function CommentListItem({ writer, updatedAt, content }) {
+function CommentListItem({ writer, updatedAt, content, onEdit, onDelete }) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const inputRef = useRef();
 
   const handleMoreClick = () => {
     setIsMenuOpen((prev) => !prev);
   };
 
-  const handleOptionClick = () => {
-    // TODO: 수정하기 or 삭제하기 기능 구현
+  const handleEditClick = () => {
+    setIsMenuOpen(false);
+    setIsEditing(true);
+  };
+
+  const handleDeleteClick = () => {
+    setIsMenuOpen(false);
+    onDelete();
+  };
+
+  const handleCancelClick = () => {
+    setIsEditing(false);
+  };
+
+  const handleEditDoneClick = () => {
+    setIsEditing(false);
+    onEdit(inputRef.current.value);
   };
 
   return (
-    <StyledItemComment>
-      <p>{content}</p>
-      <UserProfileCard
-        imageUrl={writer?.image}
-        name={writer?.nickname}
-        status={updatedAt}
-        size={USER_PROFILE_CARD_SIZE.small}
-      />
-      <MoreButton src={moreImg} onClick={handleMoreClick} />
+    <StyledItemComment $isEditing={isEditing}>
+      {isEditing ? (
+        <TextInput value={content} ref={inputRef} />
+      ) : (
+        <p>{content}</p>
+      )}
+      <BottomContainer>
+        <UserProfileCard
+          imageUrl={writer?.image}
+          name={writer?.nickname}
+          status={updatedAt}
+          size={USER_PROFILE_CARD_SIZE.small}
+        />
+        {isEditing && (
+          <EditingButtonContainer>
+            <button onClick={handleCancelClick}>취소</button>
+            <Button onClick={handleEditDoneClick}>수정 완료</Button>
+          </EditingButtonContainer>
+        )}
+      </BottomContainer>
+      {isEditing || <MoreButton src={moreImg} onClick={handleMoreClick} />}
       {isMenuOpen && (
         <Dropdown>
-          <button onClick={handleOptionClick}>수정하기</button>
-          <button onClick={handleOptionClick}>삭제하기</button>
+          <button onClick={handleEditClick}>수정하기</button>
+          <button onClick={handleDeleteClick}>삭제하기</button>
         </Dropdown>
       )}
     </StyledItemComment>
@@ -95,27 +148,46 @@ const StyledItemCommentList = styled.div`
 `;
 
 function ItemCommentList() {
+  const handleEdit = () => {};
+
+  const handleDelete = () => {};
+
   return (
     <StyledItemCommentList>
       <CommentListItem
         writer={{ nickname: "똑똑한판다" }}
         content="혹시 사용기간이 어떻게 되실까요?"
+        updatedAt="1시간"
+        onEdit={handleEdit}
+        onDelete={handleDelete}
       />
       <CommentListItem
         writer={{ nickname: "똑똑한판다" }}
         content="혹시 사용기간이 어떻게 되실까요?"
+        updatedAt="1시간"
+        onEdit={handleEdit}
+        onDelete={handleDelete}
       />
       <CommentListItem
         writer={{ nickname: "똑똑한판다" }}
         content="혹시 사용기간이 어떻게 되실까요?"
+        updatedAt="1시간"
+        onEdit={handleEdit}
+        onDelete={handleDelete}
       />
       <CommentListItem
         writer={{ nickname: "똑똑한판다" }}
         content="혹시 사용기간이 어떻게 되실까요?"
+        updatedAt="1시간"
+        onEdit={handleEdit}
+        onDelete={handleDelete}
       />
       <CommentListItem
         writer={{ nickname: "똑똑한판다" }}
         content="혹시 사용기간이 어떻게 되실까요?"
+        updatedAt="1시간"
+        onEdit={handleEdit}
+        onDelete={handleDelete}
       />
       {/* {comments.map((comment) => (
         <CommentListItem key={comment.id} content={comment.content} />
diff --git a/vite-project/src/palette.css b/vite-project/src/palette.css
index c6c9eec8..46335f0f 100644
--- a/vite-project/src/palette.css
+++ b/vite-project/src/palette.css
@@ -12,6 +12,9 @@
   --color-secondary-800: #1f2937;
   --color-secondary-900: #111827;
 
+  /* Gray */
+  --color-gray-500: #737373;
+
   /* Cool Gray */
   --color-cool-gray-100: #f3f4f6;
   --color-cool-gray-200: #e5e7eb;

From 5bd56898cb224aff6c7667e6fd740d4c616a4fac Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Wed, 6 Aug 2025 16:58:07 +0900
Subject: [PATCH 26/31] =?UTF-8?q?feat(Sprint7):=20=EC=83=81=ED=92=88=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20-=20comments=20list=EB=A5=BC=20mock=20data?=
 =?UTF-8?q?=EB=A5=BC=20=EC=82=AC=EC=9A=A9=ED=95=B4=EC=84=9C=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 판다마켓 API에 등록된 상품들에 comment 데이터가 없어서 mock data를 사용
- Comment 수정 및 삭제 기능은 실제 comments API 연동 후 추가 예정
---
 vite-project/src/api/comments-mock.json       | 60 +++++++++++++++
 vite-project/src/api/comments.js              | 21 +++---
 vite-project/src/components/avatar.jsx        |  2 +-
 .../item-comment/Item-comment-list.jsx        | 75 ++++++++-----------
 .../components/item-comment/item-comment.jsx  | 21 +++---
 vite-project/src/utils/formatter.js           | 34 +++++++++
 6 files changed, 148 insertions(+), 65 deletions(-)
 create mode 100644 vite-project/src/api/comments-mock.json

diff --git a/vite-project/src/api/comments-mock.json b/vite-project/src/api/comments-mock.json
new file mode 100644
index 00000000..c2c22343
--- /dev/null
+++ b/vite-project/src/api/comments-mock.json
@@ -0,0 +1,60 @@
+{
+  "nextCursor": 0,
+  "list": [
+    {
+      "writer": {
+        "image": "",
+        "nickname": "똑똑한 판다",
+        "id": 1
+      },
+      "updatedAt": "2024-08-06T02:57:22.000Z",
+      "createdAt": "2024-08-06T02:57:22.000Z",
+      "content": "혹시 사용 기간이 어떻게 되실까요?",
+      "id": 1
+    },
+    {
+      "writer": {
+        "image": "",
+        "nickname": "똑똑한 고양이",
+        "id": 2
+      },
+      "updatedAt": "2025-07-06T02:57:22.000Z",
+      "createdAt": "2025-07-06T02:57:22.000Z",
+      "content": "잘 작동하나요??",
+      "id": 2
+    },
+    {
+      "writer": {
+        "image": "",
+        "nickname": "똑똑한 강아지",
+        "id": 3
+      },
+      "updatedAt": "2025-08-03T02:57:22.000Z",
+      "createdAt": "2025-08-03T02:57:22.000Z",
+      "content": "저도 사고싶어요!",
+      "id": 3
+    },
+    {
+      "writer": {
+        "image": "",
+        "nickname": "똑똑한 고양이",
+        "id": 2
+      },
+      "updatedAt": "2025-08-06T02:57:22.000Z",
+      "createdAt": "2025-08-06T02:57:22.000Z",
+      "content": "제가 샀습니다.",
+      "id": 4
+    },
+    {
+      "writer": {
+        "image": "",
+        "nickname": "똑똑한 토끼",
+        "id": 4
+      },
+      "updatedAt": "2025-08-06T07:10:22.000Z",
+      "createdAt": "2025-08-06T07:10:22.000Z",
+      "content": "까비...",
+      "id": 5
+    }
+  ]
+}
diff --git a/vite-project/src/api/comments.js b/vite-project/src/api/comments.js
index 13754f28..c7114311 100644
--- a/vite-project/src/api/comments.js
+++ b/vite-project/src/api/comments.js
@@ -1,12 +1,15 @@
-import { createUrl } from "./api";
+import mock from "./comments-mock.json";
 
-export async function fetchComments(productId, { limit = 10 } = {}) {
-  const url = createUrl(`products/${productId}/comments`, { limit });
-  const response = await fetch(url);
-  if (!response.ok) {
-    throw new Error("Failed to fetch products");
-  }
+export async function fetchComments(productId) {
+  // const url = createUrl(`products/${productId}/comments`, { limit });
+  // const response = await fetch(url);
+  // if (!response.ok) {
+  //   throw new Error("Failed to fetch comments");
+  // }
 
-  const json = await response.json();
-  return json.list;
+  // const json = await response.json();
+  // return json.list;
+
+  if (!productId) return;
+  return mock.list;
 }
diff --git a/vite-project/src/components/avatar.jsx b/vite-project/src/components/avatar.jsx
index 87f7c1ac..c8773a6a 100644
--- a/vite-project/src/components/avatar.jsx
+++ b/vite-project/src/components/avatar.jsx
@@ -18,7 +18,7 @@ const DEFAULT_SIZE = 40;
 function Avatar({ imageUrl, size = DEFAULT_SIZE }) {
   return (
     <StyledAvatar $size={size}>
-      <img src={imageUrl ?? defaultImg} alt="프로필 사진" />
+      <img src={imageUrl || defaultImg} alt="프로필 사진" />
     </StyledAvatar>
   );
 }
diff --git a/vite-project/src/components/item-comment/Item-comment-list.jsx b/vite-project/src/components/item-comment/Item-comment-list.jsx
index 9443baa8..044c8ac8 100644
--- a/vite-project/src/components/item-comment/Item-comment-list.jsx
+++ b/vite-project/src/components/item-comment/Item-comment-list.jsx
@@ -1,6 +1,7 @@
-import { useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 import moreImg from "../../assets/ic-dots-3-vertical.svg";
+import { formatElapsedTime } from "../../utils/formatter";
 import Button from "../button/button";
 import IconButton from "../button/icon-button";
 import TextInput from "../text-input";
@@ -114,9 +115,9 @@ function CommentListItem({ writer, updatedAt, content, onEdit, onDelete }) {
       )}
       <BottomContainer>
         <UserProfileCard
-          imageUrl={writer?.image}
-          name={writer?.nickname}
-          status={updatedAt}
+          imageUrl={writer.image}
+          name={writer.nickname}
+          status={formatElapsedTime(updatedAt)}
           size={USER_PROFILE_CARD_SIZE.small}
         />
         {isEditing && (
@@ -147,51 +148,35 @@ const StyledItemCommentList = styled.div`
   }
 `;
 
-function ItemCommentList() {
-  const handleEdit = () => {};
+function ItemCommentList({ comments }) {
+  const handleEdit = (/* commentId, content */) => {
+    // TODO: Comment 수정 API 연동
+  };
 
-  const handleDelete = () => {};
+  const handleDelete = (/* commentId */) => {
+    // TODO: Comment 삭제 API 연동
+  };
+
+  const sortedComments = useMemo(
+    () =>
+      comments.sort(
+        (a, b) => Date.parse(b.updatedAt) - Date.parse(a.updatedAt)
+      ),
+    [comments]
+  );
 
   return (
     <StyledItemCommentList>
-      <CommentListItem
-        writer={{ nickname: "똑똑한판다" }}
-        content="혹시 사용기간이 어떻게 되실까요?"
-        updatedAt="1시간"
-        onEdit={handleEdit}
-        onDelete={handleDelete}
-      />
-      <CommentListItem
-        writer={{ nickname: "똑똑한판다" }}
-        content="혹시 사용기간이 어떻게 되실까요?"
-        updatedAt="1시간"
-        onEdit={handleEdit}
-        onDelete={handleDelete}
-      />
-      <CommentListItem
-        writer={{ nickname: "똑똑한판다" }}
-        content="혹시 사용기간이 어떻게 되실까요?"
-        updatedAt="1시간"
-        onEdit={handleEdit}
-        onDelete={handleDelete}
-      />
-      <CommentListItem
-        writer={{ nickname: "똑똑한판다" }}
-        content="혹시 사용기간이 어떻게 되실까요?"
-        updatedAt="1시간"
-        onEdit={handleEdit}
-        onDelete={handleDelete}
-      />
-      <CommentListItem
-        writer={{ nickname: "똑똑한판다" }}
-        content="혹시 사용기간이 어떻게 되실까요?"
-        updatedAt="1시간"
-        onEdit={handleEdit}
-        onDelete={handleDelete}
-      />
-      {/* {comments.map((comment) => (
-        <CommentListItem key={comment.id} content={comment.content} />
-      ))} */}
+      {sortedComments.map((comment) => (
+        <CommentListItem
+          key={comment.id}
+          writer={comment.writer}
+          updatedAt={comment.updatedAt}
+          content={comment.content}
+          onEdit={handleEdit}
+          onDelete={handleDelete}
+        />
+      ))}
     </StyledItemCommentList>
   );
 }
diff --git a/vite-project/src/components/item-comment/item-comment.jsx b/vite-project/src/components/item-comment/item-comment.jsx
index f2d90645..1aef73f5 100644
--- a/vite-project/src/components/item-comment/item-comment.jsx
+++ b/vite-project/src/components/item-comment/item-comment.jsx
@@ -1,6 +1,10 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
 import styled from "styled-components";
+import { fetchComments } from "../../api/comments";
 import ItemCommentForm from "./item-comment-form";
 import ItemCommentList from "./Item-comment-list";
+import ItemCommentsEmpty from "./item-comments-empty";
 
 const StyledItemComment = styled.div`
   display: flex;
@@ -13,24 +17,21 @@ const StyledItemComment = styled.div`
 `;
 
 function ItemComment() {
-  // const [comments, setComments] = useState([]);
-  // const { id } = useParams();
+  const [comments, setComments] = useState([]);
+  const { id } = useParams();
 
-  // useEffect(() => {
-  //   fetchComments(id).then((comments) =>
-  //     setComments((prev) => [...prev, comments])
-  //   );
-  // }, [id]);
+  useEffect(() => {
+    fetchComments(id).then((newComments) => setComments(newComments));
+  }, [id]);
 
   return (
     <StyledItemComment>
       <ItemCommentForm />
-      <ItemCommentList />
-      {/* {comments.count > 0 ? (
+      {comments.length > 0 ? (
         <ItemCommentList comments={comments} />
       ) : (
         <ItemCommentsEmpty />
-      )} */}
+      )}
     </StyledItemComment>
   );
 }
diff --git a/vite-project/src/utils/formatter.js b/vite-project/src/utils/formatter.js
index 60ae0464..c6995d1a 100644
--- a/vite-project/src/utils/formatter.js
+++ b/vite-project/src/utils/formatter.js
@@ -8,3 +8,37 @@ export function formatDateYYYYMMDD(dateString) {
   const index = isoString.indexOf("T");
   return isoString.slice(0, index);
 }
+
+export function formatElapsedTime(dateString) {
+  const now = new Date();
+  const target = new Date(dateString);
+  let diff = (now.getTime() - target.getTime()) / 1000;
+
+  const resultString = (diff, unit) => `${Math.ceil(diff)}${unit} 전`;
+
+  if (diff < 60) {
+    return resultString(diff, "초");
+  }
+
+  diff /= 60;
+  if (diff < 60) {
+    return resultString(diff, "분");
+  }
+
+  diff /= 60;
+  if (diff < 24) {
+    return resultString(diff, "시간");
+  }
+
+  diff /= 24;
+  if (diff < 30) {
+    return resultString(diff, "일");
+  }
+
+  diff /= 30;
+  if (diff < 12) {
+    return resultString(diff, "개월");
+  }
+
+  return `${now.getFullYear() - target.getFullYear()}년 전`;
+}

From ec223d8d04e44b1e38db267dfa870185c54bba8b Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Wed, 6 Aug 2025 17:01:47 +0900
Subject: [PATCH 27/31] =?UTF-8?q?feat(Sprint7):=20Button=20component?=
 =?UTF-8?q?=EC=97=90=20hover=20=ED=9A=A8=EA=B3=BC=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/components/button/button.jsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/vite-project/src/components/button/button.jsx b/vite-project/src/components/button/button.jsx
index 5cf4c7b7..18602a68 100644
--- a/vite-project/src/components/button/button.jsx
+++ b/vite-project/src/components/button/button.jsx
@@ -30,6 +30,10 @@ const StyledButton = styled.button`
     background-color: var(--color-cool-gray-400);
     cursor: default;
   }
+
+  &:hover:not(:disabled) {
+    opacity: 0.5;
+  }
 `;
 
 function Button({

From 481f0d933f219bd518c3a55abd42e49e5f7f9608 Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Wed, 6 Aug 2025 17:15:40 +0900
Subject: [PATCH 28/31] =?UTF-8?q?fix(Sprint7):=20SectionHeaderActions?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20child=20element=EC=9D=98=20=EC=84=B8?=
 =?UTF-8?q?=EB=A1=9C=20=EC=A0=95=EB=A0=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite-project/src/components/OrderBySelect.css          | 2 +-
 vite-project/src/components/section/section-header.jsx | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/vite-project/src/components/OrderBySelect.css b/vite-project/src/components/OrderBySelect.css
index 8c006ce8..42f4f3a2 100644
--- a/vite-project/src/components/OrderBySelect.css
+++ b/vite-project/src/components/OrderBySelect.css
@@ -16,7 +16,7 @@
 
 .OrderBySelect {
   background-color: white;
-  padding: 12px 20px;
+  padding: 8px 20px;
   display: flex;
   gap: 24px;
   outline: none;
diff --git a/vite-project/src/components/section/section-header.jsx b/vite-project/src/components/section/section-header.jsx
index 0a419dde..ee3f49b5 100644
--- a/vite-project/src/components/section/section-header.jsx
+++ b/vite-project/src/components/section/section-header.jsx
@@ -17,6 +17,7 @@ const StyledSectionHeader = styled.div`
 
 const StyledSectionHeaderActions = styled.div`
   display: flex;
+  align-items: center;
   gap: 12px;
 
   @media (max-width: 767px) {

From 177c0b7bc84375952418402ba9b050c8554deb25 Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Wed, 6 Aug 2025 17:24:04 +0900
Subject: [PATCH 29/31] =?UTF-8?q?fix(Sprint7):=20Input=20component?=
 =?UTF-8?q?=EC=97=90=20`value`=20prop=20=EC=A0=84=EB=8B=AC=20=EC=8B=9C=20`?=
 =?UTF-8?q?onChange`=20=EC=84=A4=EC=A0=95=20error=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/item-comment/Item-comment-list.jsx  | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/vite-project/src/components/item-comment/Item-comment-list.jsx b/vite-project/src/components/item-comment/Item-comment-list.jsx
index 044c8ac8..a344433c 100644
--- a/vite-project/src/components/item-comment/Item-comment-list.jsx
+++ b/vite-project/src/components/item-comment/Item-comment-list.jsx
@@ -83,6 +83,10 @@ function CommentListItem({ writer, updatedAt, content, onEdit, onDelete }) {
   const [isEditing, setIsEditing] = useState(false);
   const inputRef = useRef();
 
+  const handleInputChange = () => {
+    // TODO: Comment 등록 구현
+  };
+
   const handleMoreClick = () => {
     setIsMenuOpen((prev) => !prev);
   };
@@ -109,7 +113,11 @@ function CommentListItem({ writer, updatedAt, content, onEdit, onDelete }) {
   return (
     <StyledItemComment $isEditing={isEditing}>
       {isEditing ? (
-        <TextInput value={content} ref={inputRef} />
+        <TextInput
+          value={content}
+          onChange={handleInputChange}
+          ref={inputRef}
+        />
       ) : (
         <p>{content}</p>
       )}

From 46ac20a66900f4b64f8381f8ae2862b44e79432b Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Wed, 6 Aug 2025 17:45:36 +0900
Subject: [PATCH 30/31] =?UTF-8?q?fix(Sprint7):=20useEffect=20missing=20dep?=
 =?UTF-8?q?endencies=20warning=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite-project/src/hooks/useDevice.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/vite-project/src/hooks/useDevice.jsx b/vite-project/src/hooks/useDevice.jsx
index 4de29bee..05156a0e 100644
--- a/vite-project/src/hooks/useDevice.jsx
+++ b/vite-project/src/hooks/useDevice.jsx
@@ -32,7 +32,7 @@ function useDevice() {
       matchesDesktop.removeEventListener("change", handleDesktopMatchesChange);
       _matchesDesktop = null;
     };
-  }, []);
+  }, [matchesDesktop]);
 
   useEffect(() => {
     const handleTabletMatchesChange = (e) => {
@@ -48,7 +48,7 @@ function useDevice() {
       matchesTablet.removeEventListener("change", handleTabletMatchesChange);
       _matchesTablet = null;
     };
-  }, []);
+  }, [matchesTablet]);
 
   useEffect(() => {
     const handleMobileMatchesChange = (e) => {
@@ -64,7 +64,7 @@ function useDevice() {
       matchesMobile.removeEventListener("change", handleMobileMatchesChange);
       _matchesMobile = null;
     };
-  }, []);
+  }, [matchesMobile]);
 
   return deviceInfo;
 }

From 29eb44b08a8eb5f6e80bc986ad54f92b3cf01a16 Mon Sep 17 00:00:00 2001
From: Chamsol Kim <kcsol1005@gmail.com>
Date: Wed, 6 Aug 2025 17:59:37 +0900
Subject: [PATCH 31/31] =?UTF-8?q?refactor(Sprint7):=20SearchInput=EC=9D=84?=
 =?UTF-8?q?=20styled-components=EB=A1=9C=20=EA=B5=AC=ED=98=84,=20input=20?=
 =?UTF-8?q?=ED=8F=B4=EB=8D=94=EB=A1=9C=20=EB=AC=B6=EC=9D=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite-project/src/components/SearchInput.css   | 47 ----------------
 vite-project/src/components/SearchInput.jsx   | 13 -----
 .../src/components/input/search-input.jsx     | 53 +++++++++++++++++++
 .../src/components/{ => input}/text-input.jsx |  0
 .../item-comment/Item-comment-list.jsx        |  2 +-
 .../item-comment/item-comment-form.jsx        |  2 +-
 .../src/pages/add-item/add-item-page.jsx      |  2 +-
 vite-project/src/pages/items/items-page.jsx   |  2 +-
 8 files changed, 57 insertions(+), 64 deletions(-)
 delete mode 100644 vite-project/src/components/SearchInput.css
 delete mode 100644 vite-project/src/components/SearchInput.jsx
 create mode 100644 vite-project/src/components/input/search-input.jsx
 rename vite-project/src/components/{ => input}/text-input.jsx (100%)

diff --git a/vite-project/src/components/SearchInput.css b/vite-project/src/components/SearchInput.css
deleted file mode 100644
index bf0b8a14..00000000
--- a/vite-project/src/components/SearchInput.css
+++ /dev/null
@@ -1,47 +0,0 @@
-@import url("../palette.css");
-
-.SearchInput {
-  background-color: var(--color-secondary-100);
-  padding: 9px 16px;
-  display: flex;
-  gap: 4px;
-  border-radius: 12px;
-  width: 325px;
-}
-
-.SearchInput img {
-  width: 24px;
-}
-
-.SearchInput input {
-  border: none;
-  background: none;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 26px;
-  flex-grow: 1;
-}
-.SearchInput input:focus {
-  outline: none;
-}
-.SearchInput input::placeholder {
-  color: var(--color-secondary-400);
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 26px;
-}
-
-/* Tablet */
-@media (max-width: 1199px) {
-  .SearchInput {
-    width: 242px;
-  }
-}
-
-/* Mobile */
-@media (max-width: 767px) {
-  .SearchInput {
-    width: 100%;
-    flex-grow: 1;
-  }
-}
diff --git a/vite-project/src/components/SearchInput.jsx b/vite-project/src/components/SearchInput.jsx
deleted file mode 100644
index 8f0e0b6d..00000000
--- a/vite-project/src/components/SearchInput.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import searchImg from "../assets/ic-magnifier.svg";
-import "./SearchInput.css";
-
-function SearchInput({ placeholder }) {
-  return (
-    <div className="SearchInput">
-      <img src={searchImg} alt="상품 검색" />
-      <input placeholder={placeholder} />
-    </div>
-  );
-}
-
-export default SearchInput;
diff --git a/vite-project/src/components/input/search-input.jsx b/vite-project/src/components/input/search-input.jsx
new file mode 100644
index 00000000..58963e11
--- /dev/null
+++ b/vite-project/src/components/input/search-input.jsx
@@ -0,0 +1,53 @@
+import styled from "styled-components";
+import searchImg from "../../assets/ic-magnifier.svg";
+
+const StyledSearchInput = styled.div`
+  background-color: var(--color-secondary-100);
+  padding: 9px 16px;
+  display: flex;
+  gap: 4px;
+  border-radius: 12px;
+  width: 325px;
+
+  img {
+    width: 24px;
+  }
+
+  input {
+    border: none;
+    background: none;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 26px;
+    flex-grow: 1;
+  }
+  input:focus {
+    outline: none;
+  }
+  input::placeholder {
+    color: var(--color-secondary-400);
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 26px;
+  }
+
+  @media (max-width: 1199px) {
+    width: 242px;
+  }
+
+  @media (max-width: 767px) {
+    width: 100%;
+    flex-grow: 1;
+  }
+`;
+
+function SearchInput({ placeholder }) {
+  return (
+    <StyledSearchInput>
+      <img src={searchImg} alt="상품 검색" />
+      <input placeholder={placeholder} />
+    </StyledSearchInput>
+  );
+}
+
+export default SearchInput;
diff --git a/vite-project/src/components/text-input.jsx b/vite-project/src/components/input/text-input.jsx
similarity index 100%
rename from vite-project/src/components/text-input.jsx
rename to vite-project/src/components/input/text-input.jsx
diff --git a/vite-project/src/components/item-comment/Item-comment-list.jsx b/vite-project/src/components/item-comment/Item-comment-list.jsx
index a344433c..d8944c93 100644
--- a/vite-project/src/components/item-comment/Item-comment-list.jsx
+++ b/vite-project/src/components/item-comment/Item-comment-list.jsx
@@ -4,7 +4,7 @@ import moreImg from "../../assets/ic-dots-3-vertical.svg";
 import { formatElapsedTime } from "../../utils/formatter";
 import Button from "../button/button";
 import IconButton from "../button/icon-button";
-import TextInput from "../text-input";
+import TextInput from "../input/text-input";
 import UserProfileCard from "../user-profile-card/user-profile-card";
 import { USER_PROFILE_CARD_SIZE } from "../user-profile-card/user-profile-card-size";
 
diff --git a/vite-project/src/components/item-comment/item-comment-form.jsx b/vite-project/src/components/item-comment/item-comment-form.jsx
index 340dc9c0..7edcf99a 100644
--- a/vite-project/src/components/item-comment/item-comment-form.jsx
+++ b/vite-project/src/components/item-comment/item-comment-form.jsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import styled from "styled-components";
 import Button from "../button/button";
-import TextInput from "../text-input";
+import TextInput from "../input/text-input";
 
 const StyledItemCommentForm = styled.form`
   display: flex;
diff --git a/vite-project/src/pages/add-item/add-item-page.jsx b/vite-project/src/pages/add-item/add-item-page.jsx
index 49a91f81..a24fcdc7 100644
--- a/vite-project/src/pages/add-item/add-item-page.jsx
+++ b/vite-project/src/pages/add-item/add-item-page.jsx
@@ -1,12 +1,12 @@
 import { useState } from "react";
 import styled from "styled-components";
 import AddingItemImageContainer from "../../components/add-item/adding-item-image-container";
+import TextInput from "../../components/input/text-input";
 import Section from "../../components/section/section";
 import SectionHeader from "../../components/section/section-header";
 import SectionHeaderAction from "../../components/section/section-header-action";
 import SectionHeaderSize from "../../components/section/section-header-size";
 import TagList from "../../components/tag/tag-list";
-import TextInput from "../../components/text-input";
 import { formatPrice } from "../../utils/formatter";
 
 const INITIAL_INPUT_VALUES = {
diff --git a/vite-project/src/pages/items/items-page.jsx b/vite-project/src/pages/items/items-page.jsx
index 2a606b3f..2c9773fe 100644
--- a/vite-project/src/pages/items/items-page.jsx
+++ b/vite-project/src/pages/items/items-page.jsx
@@ -2,12 +2,12 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import { fetchProducts } from "../../api/products";
+import SearchInput from "../../components/input/search-input";
 import ItemsGrid from "../../components/item/items-grid";
 import OrderBySelect, {
   ORDER_BY_DEFAULT,
 } from "../../components/OrderBySelect";
 import PageControl from "../../components/PageControl";
-import SearchInput from "../../components/SearchInput";
 import Section from "../../components/section/section";
 import SectionHeader from "../../components/section/section-header";
 import SectionHeaderAction from "../../components/section/section-header-action";