From 946c505c0a300532d57cf3bb13bc57de4b731bd6 Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Sun, 11 May 2025 18:01:36 +0900
Subject: [PATCH 01/25] feat: add product detail route

---
 README.md                                     | 85 +++++++++++++++----
 .../Comment/CommentInput/CommentInput.jsx     | 57 +++++++++++++
 .../CommentInput/CommentInput.module.scss     |  6 ++
 src/components/Comment/CommentInput/index.js  |  1 +
 .../Comment/CommentList/CommentList.jsx       | 59 +++++++++++++
 .../CommentList/CommentList.module.scss       |  0
 src/components/Comment/CommentList/index.js   |  1 +
 src/components/Comment/index.js               |  2 +
 src/constants/messages/product.js             |  4 +-
 src/pages/ProductDetail/ProductDetail.jsx     | 66 ++++++++++++++
 .../ProductDetail/ProductDetail.module.scss   |  0
 src/pages/ProductDetail/index.js              |  1 +
 src/pages/index.js                            |  1 +
 src/routes/index.jsx                          | 24 ++++--
 14 files changed, 283 insertions(+), 24 deletions(-)
 create mode 100644 src/components/Comment/CommentInput/CommentInput.jsx
 create mode 100644 src/components/Comment/CommentInput/CommentInput.module.scss
 create mode 100644 src/components/Comment/CommentInput/index.js
 create mode 100644 src/components/Comment/CommentList/CommentList.jsx
 create mode 100644 src/components/Comment/CommentList/CommentList.module.scss
 create mode 100644 src/components/Comment/CommentList/index.js
 create mode 100644 src/components/Comment/index.js
 create mode 100644 src/pages/ProductDetail/ProductDetail.jsx
 create mode 100644 src/pages/ProductDetail/ProductDetail.module.scss
 create mode 100644 src/pages/ProductDetail/index.js

diff --git a/README.md b/README.md
index 1ea62873..2dc11e04 100644
--- a/README.md
+++ b/README.md
@@ -7,14 +7,60 @@
 
 ## 미션 목록
 
-| 미션 | 날짜       | PR                                                                             | 주요 내용                                                                                                    |
-| ---- | ---------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
-| 1    | 2025-02-24 | [#10](https://github.com/codeit-bootcamp-frontend/15-Sprint-Mission/pull/10)   | 랜딩 페이지의 HTML 및 CSS 구현                                                                               |
-| 2    | 2025-03-05 | [#44](https://github.com/codeit-bootcamp-frontend/15-Sprint-Mission/pull/44)   | 회원가입 및 로그인 페이지의 HTML, CSS 구현                                                                   |
-| 3    | 2025-03-07 | [#60](https://github.com/codeit-bootcamp-frontend/15-Sprint-Mission/pull/60)   | 반응형 디자인 구현(desktop-first, 1920px 이상 큰 모니터 기준), breakpoint: 1919px, 1199px, 767px             |
-| 4    | 2025-03-18 | [#101](https://github.com/codeit-bootcamp-frontend/15-Sprint-Mission/pull/101) | JS기능 추가(DOM 요소 조작 및 이벤트 리스너), 회원가입, 로그인 폼 유효성 검사                                 |
-| 5    | 2025-05-05 | [#](https://github.com/codeit-bootcamp-frontend/15-Sprint-Mission/pull/181)       | React, SCSS+CSS modules로 마이그레이션, items 페이지 구현(fetch data, 검색어, 정렬, pagination, 반응형 구현) |
-| 6    | 2025-05-11  | [#](https://github.com/codeit-bootcamp-frontend/15-Sprint-Mission/pull/)       | 상품 등록 페이지 구현                                                                                        |
+<table>
+  <thead>
+    <tr>
+      <th>미션</th>
+      <th>날짜</th>
+      <th>PR</th>
+      <th>주요 내용</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>2025-02-24</td>
+      <td><a href="https://github.com/codeit-bootcamp-frontend/15-Sprint-Mission/pull/10">#10</a></td>
+      <td>랜딩 페이지의 HTML 및 CSS 구현</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>2025-03-05</td>
+      <td><a href="https://github.com/codeit-bootcamp-frontend/15-Sprint-Mission/pull/44">#44</a></td>
+      <td>회원가입 및 로그인 페이지의 HTML, CSS 구현</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td>2025-03-07</td>
+      <td><a href="https://github.com/codeit-bootcamp-frontend/15-Sprint-Mission/pull/60">#60</a></td>
+      <td>반응형 디자인 구현(desktop-first, 1920px 이상 큰 모니터 기준), breakpoint: 1919px, 1199px, 767px</td>
+    </tr>
+    <tr>
+      <td>4</td>
+      <td>2025-03-18</td>
+      <td><a href="https://github.com/codeit-bootcamp-frontend/15-Sprint-Mission/pull/101">#101</a></td>
+      <td>JS기능 추가(DOM 요소 조작 및 이벤트 리스너), 회원가입, 로그인 폼 유효성 검사</td>
+    </tr>
+    <tr>
+      <td>5</td>
+      <td>2025-05-05</td>
+      <td><a href="https://github.com/codeit-bootcamp-frontend/15-Sprint-Mission/pull/181">#181</a></td>
+      <td>React, SCSS+CSS modules로 마이그레이션, items 페이지 구현(fetch data, 검색어, 정렬, pagination, 반응형 구현)</td>
+    </tr>
+    <tr>
+      <td>6</td>
+      <td>2025-05-11</td>
+      <td><a href="https://github.com/codeit-bootcamp-frontend/15-Sprint-Mission/pull/203">#203</a></td>
+      <td>상품 등록 페이지 구현, 토스트 생성, 에러 처리 로직을 safeFetch 함수로 분리, UI 에러 메시지 상수화</td>
+    </tr>
+    <tr>
+      <td>7</td>
+      <td>2025-05-11</td>
+      <td><a href="https://github.com/codeit-bootcamp-frontend/15-Sprint-Mission/pull/">#</a></td>
+      <td>상품 상세 페이지 구현</td>
+    </tr>
+  </tbody>
+</table>
 
 ---
 
@@ -85,21 +131,26 @@
 ```
 
 ## 에러 처리 전략
+
 > 모든 에러는 사용자에게 UX 혼란을 최소화하기 위한 피드백(UI/토스트 등)을 포함하여 처리됩니다.
 
 ### 1. 라우팅 오류
-- 잘못된 경로 접근 시 → `404 페이지` → 랜딩 페이지로 이동 버튼 
+
+- 잘못된 경로 접근 시 → `404 페이지` → 랜딩 페이지로 이동 버튼
 
 ### 2. 전역 에러 (App 깨짐)
-- 앱 전체 서버 에러 → `500 페이지` → 다시 시도 버튼 
+
+- 앱 전체 서버 에러 → `500 페이지` → 다시 시도 버튼
 
 ### 3. API 응답 에러 (safeFetch 내부 → 토스트 처리 )
-| 상태 코드 | 처리 방식 |
-|-----------|-----------|
-| `401`     | 인증 필요 안내 토스트 |
-| `403`     | 접근 권한 없음 안내 토스트  |
-| `404`     | 없는 리소스 조회 시 토스트  |
+
+| 상태 코드 | 처리 방식                  |
+| --------- | -------------------------- |
+| `401`     | 인증 필요 안내 토스트      |
+| `403`     | 접근 권한 없음 안내 토스트 |
+| `404`     | 없는 리소스 조회 시 토스트 |
 | `500~599` | 서버 응답 오류 토스트 노출 |
 
-### 4. 특정 컴포넌트 렌더 실패 (예: 이미지 리스트 하나가 깨짐) 
-- 해당 컴포넌트 수준에서 fallback UI 처리 예정 
+### 4. 특정 컴포넌트 렌더 실패 (예: 이미지 리스트 하나가 깨짐)
+
+- 해당 컴포넌트 수준에서 fallback UI 처리 예정
diff --git a/src/components/Comment/CommentInput/CommentInput.jsx b/src/components/Comment/CommentInput/CommentInput.jsx
new file mode 100644
index 00000000..066eafda
--- /dev/null
+++ b/src/components/Comment/CommentInput/CommentInput.jsx
@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { useToast } from '@/components/common';
+import { safeFetch } from '@/utils/api';
+import { baseUrl, ENDPOINTS } from '@/constants/urls';
+import { PRODUCT_ERROR_MESSAGES } from '@/constants/messages';
+import formStyles from '@/styles/helpers/formHelpers.module.scss';
+import buttonStyles from '@/styles/helpers/buttonHelpers.module.scss';
+import styles from './CommentInput.module.scss';
+
+const CommentInput = ({ productId, refreshAfterSubmit }) => {
+  const { showToast } = useToast();
+  const [content, setContent] = useState('');
+
+  const handleSubmit = async () => {
+    if (!content.trim()) return;
+
+    await safeFetch({
+      url: `${baseUrl}${ENDPOINTS.PRODUCTS}/${productId}/comments`,
+      options: {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content }),
+      },
+      showToast,
+      uiErrorMessage: PRODUCT_ERROR_MESSAGES.POST_COMMENT_FAILED,
+    });
+
+    setContent('');
+    refreshAfterSubmit?.(); // 등록 후 댓글 목록 새로고침
+  };
+
+  return (
+    <div className={styles.commentInput}>
+      <label htmlFor="content" className={formStyles.labelText}>
+        문의하기
+      </label>
+      <textarea
+        id="content"
+        name="content"
+        className={formStyles.textarea}
+        value={content}
+        onChange={(e) => setContent(e.target.value)}
+        placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
+      />
+      <button
+        type="button"
+        className={`${buttonStyles.primary} ${styles.submitButton}`}
+        onClick={handleSubmit}
+        disabled={!content.trim()}
+      >
+        등록
+      </button>
+    </div>
+  );
+};
+
+export default CommentInput;
diff --git a/src/components/Comment/CommentInput/CommentInput.module.scss b/src/components/Comment/CommentInput/CommentInput.module.scss
new file mode 100644
index 00000000..12b3d468
--- /dev/null
+++ b/src/components/Comment/CommentInput/CommentInput.module.scss
@@ -0,0 +1,6 @@
+.submitButton {
+  padding: 1.2rem 2.3rem;
+  border-radius: 8px;
+  font-size: 1.6rem;
+  font-weight: 400;
+}
diff --git a/src/components/Comment/CommentInput/index.js b/src/components/Comment/CommentInput/index.js
new file mode 100644
index 00000000..15707789
--- /dev/null
+++ b/src/components/Comment/CommentInput/index.js
@@ -0,0 +1 @@
+export { default } from './CommentInput';
diff --git a/src/components/Comment/CommentList/CommentList.jsx b/src/components/Comment/CommentList/CommentList.jsx
new file mode 100644
index 00000000..f99a1770
--- /dev/null
+++ b/src/components/Comment/CommentList/CommentList.jsx
@@ -0,0 +1,59 @@
+import { useEffect, useState } from 'react';
+import { useToast } from '@/components/common';
+import { safeFetch } from '@/utils/api';
+import { baseUrl, ENDPOINTS } from '@/constants/urls';
+import { PRODUCT_ERROR_MESSAGES } from '@/constants/messages';
+import styles from './CommentList.module.scss';
+
+const CommentList = ({ productId, refreshKey }) => {
+  const { showToast } = useToast();
+  const [comments, setComments] = useState([]);
+  const [nextCursor, setNextCursor] = useState(null);
+
+  useEffect(() => {
+    fetchComments();
+  }, [productId, refreshKey]);
+
+  const fetchComments = async (cursor) => {
+    const cursorQuery = cursor ? `&cursor=${cursor}` : '';
+    const data = await safeFetch({
+      url: `${baseUrl}${ENDPOINTS.PRODUCTS}/${productId}/comments?limit=10${cursorQuery}`,
+      options: { method: 'GET' },
+      showToast,
+      uiErrorMessage: PRODUCT_ERROR_MESSAGES.FETCH_COMMENTS_FAILED,
+    });
+
+    if (cursor) {
+      setComments((prev) => [...prev, ...data.list]);
+    } else {
+      setComments(data.list);
+    }
+
+    setNextCursor(data.nextCursor ?? null);
+  };
+
+  const handleLoadMore = () => {
+    if (nextCursor) fetchComments(nextCursor);
+  };
+
+  return (
+    <div className={styles.commentList}>
+      {comments.map((comment) => (
+        <div key={comment.id} className={styles.comment}>
+          <p>
+            <strong>{comment.nickname}</strong>
+          </p>
+          <p>{comment.content}</p>
+          <p className={styles.commentDate}>{comment.updatedAt}</p>
+        </div>
+      ))}
+      {nextCursor && (
+        <button className={styles.loadMoreButton} onClick={handleLoadMore}>
+          더보기
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default CommentList;
diff --git a/src/components/Comment/CommentList/CommentList.module.scss b/src/components/Comment/CommentList/CommentList.module.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/Comment/CommentList/index.js b/src/components/Comment/CommentList/index.js
new file mode 100644
index 00000000..03a5519c
--- /dev/null
+++ b/src/components/Comment/CommentList/index.js
@@ -0,0 +1 @@
+export { default } from './CommentList';
diff --git a/src/components/Comment/index.js b/src/components/Comment/index.js
new file mode 100644
index 00000000..f3dd2653
--- /dev/null
+++ b/src/components/Comment/index.js
@@ -0,0 +1,2 @@
+export { default as CommentInput } from './CommentInput';
+export { default as CommentList } from './CommentList';
diff --git a/src/constants/messages/product.js b/src/constants/messages/product.js
index 9c1cf9d2..cc6d0a77 100644
--- a/src/constants/messages/product.js
+++ b/src/constants/messages/product.js
@@ -4,9 +4,11 @@ export const PRODUCT_INFO_MESSAGES = {
 };
 
 export const PRODUCT_ERROR_MESSAGES = {
-  FETCH_ALL_FAILED: '상품을 불러오는 데 실패했습니다.',
+  FETCH_ALL_FAILED: '상품 목록을 불러오는 데 실패했습니다.',
   FETCH_BEST_FAILED: '베스트 상품을 불러오는 데 실패했습니다.',
   ADD_ITEM_FAILED: '상품 등록 중 문제가 발생했습니다.',
+  FETCH_DETAIL_FAILED: '상품 정보를 불러오지 못했습니다.',
+  FETCH_COMMENTS_FAILED: '댓글 정보를 불러오지 못했습니다.',
 };
 
 export const PRODUCT_SUCCESS_MESSAGES = {
diff --git a/src/pages/ProductDetail/ProductDetail.jsx b/src/pages/ProductDetail/ProductDetail.jsx
new file mode 100644
index 00000000..12455af9
--- /dev/null
+++ b/src/pages/ProductDetail/ProductDetail.jsx
@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { useToast } from '@/components/common';
+import { CommentInput, CommentList } from '@/components/Comment';
+import { safeFetch } from '@/utils/api';
+import { baseUrl, ENDPOINTS, ROUTES } from '@/constants/urls';
+import { PRODUCT_ERROR_MESSAGES } from '@/constants/messages';
+import styles from './ProductDetail.module.scss';
+
+const ProductDetail = () => {
+  const { showToast } = useToast();
+  console.log(useParams());
+  const { productId } = useParams();
+  const [product, setProduct] = useState(null);
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  useEffect(() => {
+    const fetchProduct = async () => {
+      const data = await safeFetch({
+        url: `${baseUrl}${ENDPOINTS.PRODUCTS}/${productId}`,
+        options: { method: 'GET' },
+        showToast,
+        uiErrorMessage: PRODUCT_ERROR_MESSAGES.FETCH_DETAIL_FAILED,
+      });
+      setProduct(data);
+    };
+
+    fetchProduct();
+  }, [productId, showToast]);
+
+  const refreshAfterSubmit = () => setRefreshKey((prev) => prev + 1);
+
+  if (!product) return <div>Loading...</div>; //TODO: 로딩처리
+
+  return (
+    <div className={styles.productDetail}>
+      <div className={styles.image}>
+        <img src={product.images?.[0]} alt={product.name} />
+      </div>
+      <div className={styles.info}>
+        <h1>{product.name}</h1>
+        <p className={styles.price}>{product.price.toLocaleString()}원</p>
+        <p className={styles.description}>{product.description}</p>
+        <div className={styles.tags}>
+          {product.tags.map((tag, index) => (
+            <span key={index} className={styles.tag}>
+              #{tag}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      <CommentInput
+        productId={productId}
+        refreshAfterSubmit={refreshAfterSubmit}
+      />
+      <CommentList productId={productId} refreshKey={refreshKey} />
+
+      <Link to={ROUTES.ITEMS} className={styles.backButton}>
+        목록으로 돌아가기
+      </Link>
+    </div>
+  );
+};
+
+export default ProductDetail;
diff --git a/src/pages/ProductDetail/ProductDetail.module.scss b/src/pages/ProductDetail/ProductDetail.module.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/pages/ProductDetail/index.js b/src/pages/ProductDetail/index.js
new file mode 100644
index 00000000..ff0e5da6
--- /dev/null
+++ b/src/pages/ProductDetail/index.js
@@ -0,0 +1 @@
+export { default } from './ProductDetail';
diff --git a/src/pages/index.js b/src/pages/index.js
index 216545e5..f930111b 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -3,3 +3,4 @@ export { default as SignUp } from './SignUp';
 export { default as SignIn } from './SignIn';
 export { default as Items } from './Items';
 export { default as AddItem } from './AddItem';
+export { default as ProductDetail } from './ProductDetail';
diff --git a/src/routes/index.jsx b/src/routes/index.jsx
index 37838232..02d3a2df 100644
--- a/src/routes/index.jsx
+++ b/src/routes/index.jsx
@@ -1,17 +1,29 @@
 import { Route, Routes } from 'react-router-dom';
-import { Landing, SignUp, SignIn, Items, AddItem } from '@/pages';
+import {
+  Landing,
+  SignUp,
+  SignIn,
+  Items,
+  AddItem,
+  ProductDetail,
+} from '@/pages';
 import App from '@/App';
+import ROUTES from '@/constants/urls/routes';
 
 const AppRoutes = () => (
   <Routes>
-    <Route path="/" element={<App />}>
+    <Route path={ROUTES.ROOT} element={<App />}>
       <Route index element={<Landing />} />
-      <Route path="signup" element={<SignUp />} />
-      <Route path="signin" element={<SignIn />} />
-      <Route path="items" element={<Items />} />
-      <Route path="additem" element={<AddItem />} />
+      <Route path={ROUTES.SIGNUP} element={<SignUp />} />
+      <Route path={ROUTES.SIGNIN} element={<SignIn />} />
+      <Route path={ROUTES.ITEMS} element={<Items />}>
+        <Route path=":productId" element={<ProductDetail />} />
+      </Route>
+      <Route path={ROUTES.ADD_ITEM} element={<AddItem />} />
     </Route>
   </Routes>
 );
 
 export default AppRoutes;
+
+// 노트: path=":productId"에서 ":productId"는 문자열이 아니라, "/items/무엇이든" 을 받되, 그 "무엇이든"을 productId라는 이름의 변수로 저장하는 역할

From b33945439da3b3f281761daec2c72f8f25863dc5 Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Sun, 11 May 2025 22:30:09 +0900
Subject: [PATCH 02/25] feat: create DropdownBtn component

---
 src/assets/icons/arrow_back.svg               |  4 +
 src/assets/icons/vertical_kebab.svg           |  5 ++
 .../AllProductSection/AllProductSection.jsx   | 14 ++--
 .../Product/ProductInfo/ProductInfo.jsx       | 45 +++++++++++
 .../ProductInfo/ProductInfo.module.scss       | 35 +++++++++
 src/components/Product/ProductInfo/index.js   |  1 +
 src/components/Product/index.js               |  1 +
 .../common/Buttons/Dropdown/DropdownBtn.jsx   | 65 ++++++++++++++++
 .../Dropdown/DropdownBtn.module.scss}         | 73 ++++++++++--------
 .../common/Buttons/Dropdown/index.js          |  1 +
 .../common/Buttons/SortDrop/SortDrop.jsx      | 32 ++++++++
 .../common/Buttons/SortDrop/index.js          |  1 +
 .../VerticalKebabDrop/VerticalKebabDrop.jsx   | 21 ++++++
 .../VerticalKebabDrop.module.scss             |  0
 .../common/Buttons/VerticalKebabDrop/index.js |  1 +
 src/components/common/Buttons/index.js        |  3 +
 .../common/SortSelect/SortSelect.jsx          | 75 -------------------
 src/components/common/SortSelect/index.js     |  1 -
 src/components/common/index.js                |  1 -
 src/constants/urls/routes.js                  |  1 +
 src/hooks/index.js                            |  1 +
 src/hooks/useDropdown.js                      | 31 ++++++++
 src/pages/ProductDetail/ProductDetail.jsx     | 21 ++----
 src/routes/index.jsx                          |  5 +-
 24 files changed, 306 insertions(+), 132 deletions(-)
 create mode 100644 src/assets/icons/arrow_back.svg
 create mode 100644 src/assets/icons/vertical_kebab.svg
 create mode 100644 src/components/Product/ProductInfo/ProductInfo.jsx
 create mode 100644 src/components/Product/ProductInfo/ProductInfo.module.scss
 create mode 100644 src/components/Product/ProductInfo/index.js
 create mode 100644 src/components/common/Buttons/Dropdown/DropdownBtn.jsx
 rename src/components/common/{SortSelect/SortSelect.module.scss => Buttons/Dropdown/DropdownBtn.module.scss} (70%)
 create mode 100644 src/components/common/Buttons/Dropdown/index.js
 create mode 100644 src/components/common/Buttons/SortDrop/SortDrop.jsx
 create mode 100644 src/components/common/Buttons/SortDrop/index.js
 create mode 100644 src/components/common/Buttons/VerticalKebabDrop/VerticalKebabDrop.jsx
 create mode 100644 src/components/common/Buttons/VerticalKebabDrop/VerticalKebabDrop.module.scss
 create mode 100644 src/components/common/Buttons/VerticalKebabDrop/index.js
 delete mode 100644 src/components/common/SortSelect/SortSelect.jsx
 delete mode 100644 src/components/common/SortSelect/index.js
 create mode 100644 src/hooks/useDropdown.js

diff --git a/src/assets/icons/arrow_back.svg b/src/assets/icons/arrow_back.svg
new file mode 100644
index 00000000..9ba5ad94
--- /dev/null
+++ b/src/assets/icons/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/src/assets/icons/vertical_kebab.svg b/src/assets/icons/vertical_kebab.svg
new file mode 100644
index 00000000..dd7ed7f5
--- /dev/null
+++ b/src/assets/icons/vertical_kebab.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12.5" cy="6.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/src/components/Product/AllProductSection/AllProductSection.jsx b/src/components/Product/AllProductSection/AllProductSection.jsx
index 2167f0c7..ba7900ce 100644
--- a/src/components/Product/AllProductSection/AllProductSection.jsx
+++ b/src/components/Product/AllProductSection/AllProductSection.jsx
@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useResponsivePageSize } from '@/hooks';
-import { SortSelect, Pagination, useToast } from '@/components/common';
+import { Pagination, useToast } from '@/components/common';
+import { SortDrop } from '@/components/common/Buttons';
 import { ProductCard } from '@/components/Product';
 import { safeFetch } from '@/utils/api';
 import { baseUrl, ENDPOINTS, ROUTES } from '@/constants/urls';
@@ -17,6 +18,10 @@ const AllProductSection = () => {
   const [searchQuery, setSearchQuery] = useState('');
   const [page, setPage] = useState(1);
   const pageSize = useResponsivePageSize();
+  const options = [
+    { value: 'recent', label: '최신순' },
+    { value: 'favorite', label: '좋아요순' },
+  ];
 
   useEffect(() => {
     const fetchProducts = async () => {
@@ -59,13 +64,10 @@ const AllProductSection = () => {
           상품 등록하기
         </Link>
         <div className={styles.sortWrapper}>
-          <SortSelect
+          <SortDrop
             value={sortOption}
             onChange={setSortOption}
-            options={[
-              { value: 'recent', label: '최신순' },
-              { value: 'favorite', label: '좋아요순' },
-            ]}
+            options={options}
           />
         </div>
       </div>
diff --git a/src/components/Product/ProductInfo/ProductInfo.jsx b/src/components/Product/ProductInfo/ProductInfo.jsx
new file mode 100644
index 00000000..ac91ba56
--- /dev/null
+++ b/src/components/Product/ProductInfo/ProductInfo.jsx
@@ -0,0 +1,45 @@
+import { VerticalKebabDrop } from '@/components/common/Buttons';
+import styles from './ProductInfo.module.scss';
+
+const ProductInfo = ({
+  images,
+  name,
+  description,
+  price,
+  tags,
+  favoriteCount,
+  onMenuSelect,
+}) => {
+  const handleMenuSelect = (value) => {
+    if (onMenuSelect) onMenuSelect(value);
+  };
+
+  return (
+    <div className={styles.productInfo}>
+      <div className={styles.image}>
+        <img src={images?.[0]} alt={name} />
+      </div>
+      <div className={styles.info}>
+        <div className={styles.infoHeader}>
+          <div className={styles.titleBar}>
+            <h1>{name}</h1>
+            <VerticalKebabDrop onSelect={handleMenuSelect} />
+          </div>
+          <p className={styles.price}>{price.toLocaleString()}원</p>
+        </div>
+        <div className={styles.horizontalLine} />
+
+        <p className={styles.description}>{description}</p>
+        <div className={styles.tags}>
+          {tags.map((tag, index) => (
+            <span key={index} className={styles.tag}>
+              #{tag}
+            </span>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductInfo;
diff --git a/src/components/Product/ProductInfo/ProductInfo.module.scss b/src/components/Product/ProductInfo/ProductInfo.module.scss
new file mode 100644
index 00000000..114ae13b
--- /dev/null
+++ b/src/components/Product/ProductInfo/ProductInfo.module.scss
@@ -0,0 +1,35 @@
+.productInfo {
+  display: flex;
+  gap: 2.4rem;
+}
+
+.horizontalLine {
+  width: 100%;
+  height: 1px;
+  background-color: var(--secondary-200);
+}
+
+.productInfo .image {
+  display: block;
+  width: 48.6rem;
+  aspect-ratio: 1 / 1;
+  border-radius: 28.59px;
+  img {
+    width: 100%;
+    object-fit: cover;
+  }
+}
+
+.productInfo .info {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 2.4rem;
+
+  .titleAndPrice {
+    display: flex;
+    flex-direction: column;
+    gap: 1.6rem;
+    justify-content: center;
+  }
+}
diff --git a/src/components/Product/ProductInfo/index.js b/src/components/Product/ProductInfo/index.js
new file mode 100644
index 00000000..8d4dff20
--- /dev/null
+++ b/src/components/Product/ProductInfo/index.js
@@ -0,0 +1 @@
+export { default } from './ProductInfo';
diff --git a/src/components/Product/index.js b/src/components/Product/index.js
index af7b8977..38e58740 100644
--- a/src/components/Product/index.js
+++ b/src/components/Product/index.js
@@ -1,3 +1,4 @@
 export { default as ProductCard } from './ProductCard';
 export { default as BestProductSection } from './BestProductSection';
 export { default as AllProductSection } from './AllProductSection';
+export { default as ProductInfo } from './ProductInfo';
diff --git a/src/components/common/Buttons/Dropdown/DropdownBtn.jsx b/src/components/common/Buttons/Dropdown/DropdownBtn.jsx
new file mode 100644
index 00000000..40e1eaa5
--- /dev/null
+++ b/src/components/common/Buttons/Dropdown/DropdownBtn.jsx
@@ -0,0 +1,65 @@
+import { useDropdown } from '@/hooks';
+import styles from './DropdownBtn.module.scss';
+
+const DropdownBtn = ({
+  mode,
+  label = '',
+  iconSrc,
+  iconAlt,
+  iconSize,
+  options = [],
+  onSelect,
+}) => {
+  const { isOpen, toggle, close, dropdownRef } = useDropdown();
+
+  const textDropdown = () => (
+    <button
+      type="button"
+      className={styles.textMode}
+      onClick={toggle}
+      aria-label={label}
+    >
+      {label && <span className={styles.label}>{label}</span>}
+      <span className={styles.arrow} />
+    </button>
+  );
+
+  const iconDropdown = () => (
+    <button
+      type="button"
+      className={`${styles.iconMode} ${styles[`iconMode--${iconSize}`]}`}
+      onClick={toggle}
+      aria-label="Open Dropdown"
+    >
+      <span className={styles.icon}>
+        <img src={iconSrc} alt={iconAlt} />
+      </span>
+    </button>
+  );
+
+  return (
+    <div className={styles.wrapper} ref={dropdownRef}>
+      {mode === 'textMode' ? textDropdown() : iconDropdown()}
+
+      {isOpen && (
+        <ul className={styles.optionList}>
+          {options.map(({ label, value }) => (
+            <li key={value} className={styles.option}>
+              <button
+                type="button"
+                onClick={() => {
+                  onSelect(value);
+                  close();
+                }}
+              >
+                {label}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default DropdownBtn;
diff --git a/src/components/common/SortSelect/SortSelect.module.scss b/src/components/common/Buttons/Dropdown/DropdownBtn.module.scss
similarity index 70%
rename from src/components/common/SortSelect/SortSelect.module.scss
rename to src/components/common/Buttons/Dropdown/DropdownBtn.module.scss
index 70982aba..3de6d240 100644
--- a/src/components/common/SortSelect/SortSelect.module.scss
+++ b/src/components/common/Buttons/Dropdown/DropdownBtn.module.scss
@@ -4,7 +4,7 @@
   min-width: 140px;
 }
 
-.selectButton {
+.textMode {
   width: 100%;
   padding: 1.2rem 2rem;
   border: 1px solid var(--secondary-200);
@@ -28,6 +28,44 @@
   }
 }
 
+.iconMode {
+  // width: 42px;
+  aspect-ratio: 1 / 1;
+  background-color: var(--white);
+  border: 1px solid var(--secondary-200);
+  border-radius: 12px;
+  padding: 0.9rem;
+
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: var(--white);
+    color: inherit;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  &--sm {
+    width: 24px;
+  }
+
+  &--md {
+    width: 42px;
+  }
+
+  &--lg {
+    width: 48px;
+  }
+}
+
 .optionList {
   position: absolute;
   top: calc(100% + 8px);
@@ -51,6 +89,10 @@
   &:hover {
     background-color: var(--secondary-100);
   }
+
+  button {
+    width: 100%;
+  }
 }
 
 @media (max-width: 767px) {
@@ -59,37 +101,8 @@
     width: fit-content;
   }
 
-  .sortIcon {
-    width: 42px;
-    aspect-ratio: 1 / 1;
-    background-color: var(--white);
-    border: 1px solid var(--secondary-200);
-    border-radius: 12px;
-    padding: 0.9rem;
-
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: var(--white);
-      color: inherit;
-    }
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-    }
-  }
-
   .optionList {
     width: 14rem;
-    top: calc(100% + 8px);
     right: 0;
-    border-radius: 12px;
-    overflow: hidden;
   }
 }
diff --git a/src/components/common/Buttons/Dropdown/index.js b/src/components/common/Buttons/Dropdown/index.js
new file mode 100644
index 00000000..9afba0d5
--- /dev/null
+++ b/src/components/common/Buttons/Dropdown/index.js
@@ -0,0 +1 @@
+export { default } from './DropdownBtn';
diff --git a/src/components/common/Buttons/SortDrop/SortDrop.jsx b/src/components/common/Buttons/SortDrop/SortDrop.jsx
new file mode 100644
index 00000000..6f54d63c
--- /dev/null
+++ b/src/components/common/Buttons/SortDrop/SortDrop.jsx
@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+import { DropdownBtn } from '@/components/common/Buttons';
+import sortIcon from '@/assets/icons/sort.svg';
+
+const SortDrop = ({ value, onChange, options = [] }) => {
+  const [isMobile, setIsMobile] = useState(false);
+
+  const selectedOption = options.find((opt) => opt.value === value);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 767);
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return (
+    <DropdownBtn
+      mode={isMobile ? 'iconMode' : 'textMode'}
+      label={selectedOption?.label}
+      iconSrc={sortIcon}
+      iconAlt="Sort Product List"
+      iconSize="md"
+      options={options}
+      onSelect={onChange}
+    />
+  );
+};
+
+export default SortDrop;
diff --git a/src/components/common/Buttons/SortDrop/index.js b/src/components/common/Buttons/SortDrop/index.js
new file mode 100644
index 00000000..36606651
--- /dev/null
+++ b/src/components/common/Buttons/SortDrop/index.js
@@ -0,0 +1 @@
+export { default } from './SortDrop';
diff --git a/src/components/common/Buttons/VerticalKebabDrop/VerticalKebabDrop.jsx b/src/components/common/Buttons/VerticalKebabDrop/VerticalKebabDrop.jsx
new file mode 100644
index 00000000..0d21d50e
--- /dev/null
+++ b/src/components/common/Buttons/VerticalKebabDrop/VerticalKebabDrop.jsx
@@ -0,0 +1,21 @@
+import { DropdownBtn } from '@components/common/Buttons';
+import kebabIcon from '@/assets/icons/vertical_kebab.svg';
+
+const VerticalKebabDrop = () => {
+  const options = [
+    { label: '수정하기', value: 'edit' },
+    { label: '삭제하기', value: 'delete' },
+  ];
+  return (
+    <DropdownBtn
+      mode="iconMode"
+      iconSrc={kebabIcon}
+      iconAlt="Edit or Delete"
+      iconSize="sm"
+      options={options}
+      onSelect={onChange}
+    />
+  );
+};
+
+export default VerticalKebabDrop;
diff --git a/src/components/common/Buttons/VerticalKebabDrop/VerticalKebabDrop.module.scss b/src/components/common/Buttons/VerticalKebabDrop/VerticalKebabDrop.module.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/common/Buttons/VerticalKebabDrop/index.js b/src/components/common/Buttons/VerticalKebabDrop/index.js
new file mode 100644
index 00000000..5ca7c827
--- /dev/null
+++ b/src/components/common/Buttons/VerticalKebabDrop/index.js
@@ -0,0 +1 @@
+export { default } from './VerticalKebabDrop';
diff --git a/src/components/common/Buttons/index.js b/src/components/common/Buttons/index.js
index a3fc3302..ce34e5e9 100644
--- a/src/components/common/Buttons/index.js
+++ b/src/components/common/Buttons/index.js
@@ -1 +1,4 @@
 export { default as RemoveIcon } from './RemoveIcon';
+export { default as VerticalKebabDrop } from './VerticalKebabDrop';
+export { default as SortDrop } from './SortDrop';
+export { default as DropdownBtn } from './Dropdown';
diff --git a/src/components/common/SortSelect/SortSelect.jsx b/src/components/common/SortSelect/SortSelect.jsx
deleted file mode 100644
index fa3b358b..00000000
--- a/src/components/common/SortSelect/SortSelect.jsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { useState, useRef, useEffect } from 'react';
-import sortIcon from '@/assets/icons/sort.svg';
-import styles from './SortSelect.module.scss';
-
-const SortSelect = ({ value, onChange, options = [] }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [isMobile, setIsMobile] = useState(false);
-  const ref = useRef();
-
-  const selectedOption = options.find((opt) => opt.value === value);
-
-  useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(window.innerWidth <= 767);
-    };
-    handleResize();
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  return (
-    <div className={styles.wrapper} ref={ref}>
-      {isMobile ? (
-        <button
-          type="button"
-          className={styles.sortIcon}
-          onClick={() => setIsOpen((prev) => !prev)}
-          aria-label="Open select options"
-        >
-          <img src={sortIcon} alt="Select button" />
-        </button>
-      ) : (
-        <button
-          type="button"
-          className={styles.selectButton}
-          onClick={() => setIsOpen((prev) => !prev)}
-          aria-label="Open select options"
-        >
-          {selectedOption?.label}
-          <span className={styles.arrow} />
-        </button>
-      )}
-      {isOpen && (
-        <ul className={styles.optionList}>
-          {options.map((opt) => (
-            <li key={opt.value} className={styles.option}>
-              <button
-                type="button"
-                value={opt.value}
-                onClick={() => {
-                  onChange(opt.value);
-                  setIsOpen(false);
-                }}
-              >
-                {opt.label}
-              </button>
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-};
-
-export default SortSelect;
diff --git a/src/components/common/SortSelect/index.js b/src/components/common/SortSelect/index.js
deleted file mode 100644
index 78d697f2..00000000
--- a/src/components/common/SortSelect/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SortSelect';
diff --git a/src/components/common/index.js b/src/components/common/index.js
index ee957fb4..5a77e4ac 100644
--- a/src/components/common/index.js
+++ b/src/components/common/index.js
@@ -2,5 +2,4 @@ export { default as Header } from './Header';
 export { default as Footer } from './Footer';
 export { default as Logo } from './Logo';
 export { default as Pagination } from './Pagination';
-export { default as SortSelect } from './SortSelect';
 export { useToast, ToastProvider, default as Toast } from './Toast';
diff --git a/src/constants/urls/routes.js b/src/constants/urls/routes.js
index c4644d54..88424d9a 100644
--- a/src/constants/urls/routes.js
+++ b/src/constants/urls/routes.js
@@ -6,6 +6,7 @@ const ROUTES = {
   PRIVACY: '/privacy',
   FAQ: '/faq',
   ADD_ITEM: '/additem',
+  ITEM_DETAIL: (id = ':productId') => `/items/${id}`,
   BOARD: '/board',
 };
 
diff --git a/src/hooks/index.js b/src/hooks/index.js
index b7bc8654..5524fb1a 100644
--- a/src/hooks/index.js
+++ b/src/hooks/index.js
@@ -1,3 +1,4 @@
 export { default as useResponsivePageSize } from './useResponsivePageSize';
 export { default as useAuthForm } from './useAuthForm';
 export { default as useAddItemForm } from './useAddItemForm';
+export { default as useDropdown } from './useDropdown';
diff --git a/src/hooks/useDropdown.js b/src/hooks/useDropdown.js
new file mode 100644
index 00000000..61224cca
--- /dev/null
+++ b/src/hooks/useDropdown.js
@@ -0,0 +1,31 @@
+import { useState, useRef, useEffect } from 'react';
+
+const useDropdown = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+  const toggle = () => setIsOpen((prev) => !prev);
+
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        close();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  return {
+    isOpen,
+    open,
+    close,
+    toggle,
+    dropdownRef,
+  };
+};
+
+export default useDropdown;
diff --git a/src/pages/ProductDetail/ProductDetail.jsx b/src/pages/ProductDetail/ProductDetail.jsx
index 12455af9..b913f3d5 100644
--- a/src/pages/ProductDetail/ProductDetail.jsx
+++ b/src/pages/ProductDetail/ProductDetail.jsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { useParams, Link } from 'react-router-dom';
 import { useToast } from '@/components/common';
 import { CommentInput, CommentList } from '@/components/Comment';
+import { ProductInfo } from '@/components/Product';
 import { safeFetch } from '@/utils/api';
 import { baseUrl, ENDPOINTS, ROUTES } from '@/constants/urls';
 import { PRODUCT_ERROR_MESSAGES } from '@/constants/messages';
@@ -9,7 +10,7 @@ import styles from './ProductDetail.module.scss';
 
 const ProductDetail = () => {
   const { showToast } = useToast();
-  console.log(useParams());
+  console.log('useParams에 어떻게 출력되나', useParams());
   const { productId } = useParams();
   const [product, setProduct] = useState(null);
   const [refreshKey, setRefreshKey] = useState(0);
@@ -34,21 +35,9 @@ const ProductDetail = () => {
 
   return (
     <div className={styles.productDetail}>
-      <div className={styles.image}>
-        <img src={product.images?.[0]} alt={product.name} />
-      </div>
-      <div className={styles.info}>
-        <h1>{product.name}</h1>
-        <p className={styles.price}>{product.price.toLocaleString()}원</p>
-        <p className={styles.description}>{product.description}</p>
-        <div className={styles.tags}>
-          {product.tags.map((tag, index) => (
-            <span key={index} className={styles.tag}>
-              #{tag}
-            </span>
-          ))}
-        </div>
-      </div>
+      <ProductInfo {...product} />
+
+      <div className={styles.horizontalLine} />
 
       <CommentInput
         productId={productId}
diff --git a/src/routes/index.jsx b/src/routes/index.jsx
index 02d3a2df..93c47086 100644
--- a/src/routes/index.jsx
+++ b/src/routes/index.jsx
@@ -16,9 +16,8 @@ const AppRoutes = () => (
       <Route index element={<Landing />} />
       <Route path={ROUTES.SIGNUP} element={<SignUp />} />
       <Route path={ROUTES.SIGNIN} element={<SignIn />} />
-      <Route path={ROUTES.ITEMS} element={<Items />}>
-        <Route path=":productId" element={<ProductDetail />} />
-      </Route>
+      <Route path={ROUTES.ITEMS} element={<Items />} />
+      <Route path={ROUTES.ITEM_DETAIL()} element={<ProductDetail />} />
       <Route path={ROUTES.ADD_ITEM} element={<AddItem />} />
     </Route>
   </Routes>

From 6b10a4a084fb8ac83eef8f010a536cb440a3c84b Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Sun, 11 May 2025 23:51:58 +0900
Subject: [PATCH 03/25] refactor: change SortDrop using DropdownBtn

---
 .../Product/ProductInfo/ProductInfo.jsx       |  6 ++---
 .../common/Buttons/Dropdown/DropdownBtn.jsx   |  7 +++---
 .../Buttons/Dropdown/DropdownBtn.module.scss  | 21 ----------------
 .../common/Buttons/SortDrop/SortDrop.jsx      |  4 ++-
 .../Buttons/SortDrop/SortDrop.module.scss     | 25 +++++++++++++++++++
 .../VerticalKebabDrop/VerticalKebabDrop.jsx   |  8 +++---
 .../VerticalKebabDrop.module.scss             | 17 +++++++++++++
 7 files changed, 57 insertions(+), 31 deletions(-)
 create mode 100644 src/components/common/Buttons/SortDrop/SortDrop.module.scss

diff --git a/src/components/Product/ProductInfo/ProductInfo.jsx b/src/components/Product/ProductInfo/ProductInfo.jsx
index ac91ba56..2b0917ef 100644
--- a/src/components/Product/ProductInfo/ProductInfo.jsx
+++ b/src/components/Product/ProductInfo/ProductInfo.jsx
@@ -8,7 +8,7 @@ const ProductInfo = ({
   price,
   tags,
   favoriteCount,
-  onMenuSelect,
+  onMenuSelect, //TODO: 구현 예정
 }) => {
   const handleMenuSelect = (value) => {
     if (onMenuSelect) onMenuSelect(value);
@@ -22,8 +22,8 @@ const ProductInfo = ({
       <div className={styles.info}>
         <div className={styles.infoHeader}>
           <div className={styles.titleBar}>
-            <h1>{name}</h1>
-            <VerticalKebabDrop onSelect={handleMenuSelect} />
+            <h2>{name}</h2>
+            <VerticalKebabDrop />
           </div>
           <p className={styles.price}>{price.toLocaleString()}원</p>
         </div>
diff --git a/src/components/common/Buttons/Dropdown/DropdownBtn.jsx b/src/components/common/Buttons/Dropdown/DropdownBtn.jsx
index 40e1eaa5..c3beae06 100644
--- a/src/components/common/Buttons/Dropdown/DropdownBtn.jsx
+++ b/src/components/common/Buttons/Dropdown/DropdownBtn.jsx
@@ -6,8 +6,9 @@ const DropdownBtn = ({
   label = '',
   iconSrc,
   iconAlt,
-  iconSize,
   options = [],
+  buttonClassName = '',
+  optionListClassName = '',
   onSelect,
 }) => {
   const { isOpen, toggle, close, dropdownRef } = useDropdown();
@@ -27,7 +28,7 @@ const DropdownBtn = ({
   const iconDropdown = () => (
     <button
       type="button"
-      className={`${styles.iconMode} ${styles[`iconMode--${iconSize}`]}`}
+      className={`${styles.iconMode} ${buttonClassName}`}
       onClick={toggle}
       aria-label="Open Dropdown"
     >
@@ -42,7 +43,7 @@ const DropdownBtn = ({
       {mode === 'textMode' ? textDropdown() : iconDropdown()}
 
       {isOpen && (
-        <ul className={styles.optionList}>
+        <ul className={`${styles.optionList} ${optionListClassName}`}>
           {options.map(({ label, value }) => (
             <li key={value} className={styles.option}>
               <button
diff --git a/src/components/common/Buttons/Dropdown/DropdownBtn.module.scss b/src/components/common/Buttons/Dropdown/DropdownBtn.module.scss
index 3de6d240..f137745a 100644
--- a/src/components/common/Buttons/Dropdown/DropdownBtn.module.scss
+++ b/src/components/common/Buttons/Dropdown/DropdownBtn.module.scss
@@ -29,12 +29,7 @@
 }
 
 .iconMode {
-  // width: 42px;
   aspect-ratio: 1 / 1;
-  background-color: var(--white);
-  border: 1px solid var(--secondary-200);
-  border-radius: 12px;
-  padding: 0.9rem;
 
   display: inline-flex;
   justify-content: center;
@@ -43,7 +38,6 @@
   &:hover,
   &:focus,
   &:active {
-    background-color: var(--white);
     color: inherit;
   }
 
@@ -52,28 +46,13 @@
     height: 100%;
     object-fit: contain;
   }
-
-  &--sm {
-    width: 24px;
-  }
-
-  &--md {
-    width: 42px;
-  }
-
-  &--lg {
-    width: 48px;
-  }
 }
 
 .optionList {
   position: absolute;
-  top: calc(100% + 8px);
-  width: 100%;
   font-size: 1.6rem;
   background: var(--white);
   border: 1px solid var(--secondary-200);
-  border-radius: 12px;
   overflow: hidden;
 }
 
diff --git a/src/components/common/Buttons/SortDrop/SortDrop.jsx b/src/components/common/Buttons/SortDrop/SortDrop.jsx
index 6f54d63c..974bc3f7 100644
--- a/src/components/common/Buttons/SortDrop/SortDrop.jsx
+++ b/src/components/common/Buttons/SortDrop/SortDrop.jsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { DropdownBtn } from '@/components/common/Buttons';
 import sortIcon from '@/assets/icons/sort.svg';
+import styles from './SortDrop.module.scss';
 
 const SortDrop = ({ value, onChange, options = [] }) => {
   const [isMobile, setIsMobile] = useState(false);
@@ -22,9 +23,10 @@ const SortDrop = ({ value, onChange, options = [] }) => {
       label={selectedOption?.label}
       iconSrc={sortIcon}
       iconAlt="Sort Product List"
-      iconSize="md"
       options={options}
       onSelect={onChange}
+      buttonClassName={styles.sortButton}
+      optionListClassName={styles.optionList}
     />
   );
 };
diff --git a/src/components/common/Buttons/SortDrop/SortDrop.module.scss b/src/components/common/Buttons/SortDrop/SortDrop.module.scss
new file mode 100644
index 00000000..26e192c8
--- /dev/null
+++ b/src/components/common/Buttons/SortDrop/SortDrop.module.scss
@@ -0,0 +1,25 @@
+.sortButton {
+  width: 42px;
+  background-color: var(--white);
+  border: 1px solid var(--secondary-200);
+  border-radius: 12px;
+  padding: 0.9rem;
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: var(--white);
+  }
+}
+
+.optionList {
+  width: 100%;
+  top: calc(100% + 8px);
+  border-radius: 12px;
+}
+
+@media (max-width: 767px) {
+  .optionList {
+    width: 14rem;
+    right: 0;
+  }
+}
diff --git a/src/components/common/Buttons/VerticalKebabDrop/VerticalKebabDrop.jsx b/src/components/common/Buttons/VerticalKebabDrop/VerticalKebabDrop.jsx
index 0d21d50e..8965d4eb 100644
--- a/src/components/common/Buttons/VerticalKebabDrop/VerticalKebabDrop.jsx
+++ b/src/components/common/Buttons/VerticalKebabDrop/VerticalKebabDrop.jsx
@@ -1,5 +1,6 @@
-import { DropdownBtn } from '@components/common/Buttons';
+import { DropdownBtn } from '@/components/common/Buttons';
 import kebabIcon from '@/assets/icons/vertical_kebab.svg';
+import styles from './VerticalKebabDrop.module.scss';
 
 const VerticalKebabDrop = () => {
   const options = [
@@ -11,9 +12,10 @@ const VerticalKebabDrop = () => {
       mode="iconMode"
       iconSrc={kebabIcon}
       iconAlt="Edit or Delete"
-      iconSize="sm"
       options={options}
-      onSelect={onChange}
+      buttonClassName={styles.kebabButton}
+      optionListClassName={styles.optionList}
+      // onSelect={onChange}
     />
   );
 };
diff --git a/src/components/common/Buttons/VerticalKebabDrop/VerticalKebabDrop.module.scss b/src/components/common/Buttons/VerticalKebabDrop/VerticalKebabDrop.module.scss
index e69de29b..25f9efbf 100644
--- a/src/components/common/Buttons/VerticalKebabDrop/VerticalKebabDrop.module.scss
+++ b/src/components/common/Buttons/VerticalKebabDrop/VerticalKebabDrop.module.scss
@@ -0,0 +1,17 @@
+.kebabButton {
+  width: 24px;
+}
+
+.optionList {
+  width: 14rem;
+  top: calc(100% + 10px);
+  right: 0;
+  border-radius: 8px;
+}
+
+@media (max-width: 767px) {
+  .optionList {
+    width: 10rem;
+    right: 0;
+  }
+}

From 59b36d00c98989c088256dd3d4c898aba13406bd Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Mon, 12 May 2025 00:25:32 +0900
Subject: [PATCH 04/25] feat: separate wrapper width into icon mode and text
 mode

---
 src/components/Product/ProductInfo/ProductInfo.jsx  |  9 ++++-----
 .../Product/ProductInfo/ProductInfo.module.scss     | 10 ++++------
 .../common/Buttons/Dropdown/DropdownBtn.jsx         |  3 ++-
 .../common/Buttons/Dropdown/DropdownBtn.module.scss | 13 +++++++------
 .../VerticalKebabDrop/VerticalKebabDrop.module.scss |  1 -
 5 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/components/Product/ProductInfo/ProductInfo.jsx b/src/components/Product/ProductInfo/ProductInfo.jsx
index 2b0917ef..1c5eff20 100644
--- a/src/components/Product/ProductInfo/ProductInfo.jsx
+++ b/src/components/Product/ProductInfo/ProductInfo.jsx
@@ -21,12 +21,11 @@ const ProductInfo = ({
       </div>
       <div className={styles.info}>
         <div className={styles.infoHeader}>
-          <div className={styles.titleBar}>
-            <h2>{name}</h2>
-            <VerticalKebabDrop />
-          </div>
-          <p className={styles.price}>{price.toLocaleString()}원</p>
+          <h2>{name}</h2>
+          <VerticalKebabDrop />
         </div>
+        <p className={styles.price}>{price.toLocaleString()}원</p>
+
         <div className={styles.horizontalLine} />
 
         <p className={styles.description}>{description}</p>
diff --git a/src/components/Product/ProductInfo/ProductInfo.module.scss b/src/components/Product/ProductInfo/ProductInfo.module.scss
index 114ae13b..37585dfe 100644
--- a/src/components/Product/ProductInfo/ProductInfo.module.scss
+++ b/src/components/Product/ProductInfo/ProductInfo.module.scss
@@ -25,11 +25,9 @@
   flex-direction: column;
   width: 100%;
   gap: 2.4rem;
+}
 
-  .titleAndPrice {
-    display: flex;
-    flex-direction: column;
-    gap: 1.6rem;
-    justify-content: center;
-  }
+.infoHeader {
+  display: flex;
+  justify-content: space-between;
 }
diff --git a/src/components/common/Buttons/Dropdown/DropdownBtn.jsx b/src/components/common/Buttons/Dropdown/DropdownBtn.jsx
index c3beae06..dee99dae 100644
--- a/src/components/common/Buttons/Dropdown/DropdownBtn.jsx
+++ b/src/components/common/Buttons/Dropdown/DropdownBtn.jsx
@@ -12,6 +12,7 @@ const DropdownBtn = ({
   onSelect,
 }) => {
   const { isOpen, toggle, close, dropdownRef } = useDropdown();
+  const wrapperClass = `${styles.wrapper}  ${styles[`wrapper--${mode}`]}`;
 
   const textDropdown = () => (
     <button
@@ -39,7 +40,7 @@ const DropdownBtn = ({
   );
 
   return (
-    <div className={styles.wrapper} ref={dropdownRef}>
+    <div className={wrapperClass} ref={dropdownRef}>
       {mode === 'textMode' ? textDropdown() : iconDropdown()}
 
       {isOpen && (
diff --git a/src/components/common/Buttons/Dropdown/DropdownBtn.module.scss b/src/components/common/Buttons/Dropdown/DropdownBtn.module.scss
index f137745a..97ef2298 100644
--- a/src/components/common/Buttons/Dropdown/DropdownBtn.module.scss
+++ b/src/components/common/Buttons/Dropdown/DropdownBtn.module.scss
@@ -1,7 +1,13 @@
 .wrapper {
   position: relative;
   font-size: 16px;
-  min-width: 140px;
+
+  &--textMode {
+    min-width: 140px;
+  }
+  &--iconMode {
+    width: fit-content;
+  }
 }
 
 .textMode {
@@ -79,9 +85,4 @@
     min-width: auto;
     width: fit-content;
   }
-
-  .optionList {
-    width: 14rem;
-    right: 0;
-  }
 }
diff --git a/src/components/common/Buttons/VerticalKebabDrop/VerticalKebabDrop.module.scss b/src/components/common/Buttons/VerticalKebabDrop/VerticalKebabDrop.module.scss
index 25f9efbf..9ff9dcb0 100644
--- a/src/components/common/Buttons/VerticalKebabDrop/VerticalKebabDrop.module.scss
+++ b/src/components/common/Buttons/VerticalKebabDrop/VerticalKebabDrop.module.scss
@@ -12,6 +12,5 @@
 @media (max-width: 767px) {
   .optionList {
     width: 10rem;
-    right: 0;
   }
 }

From 2748f3d80d252f352ab874c8fbf56f2fc83c240a Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Mon, 12 May 2025 01:23:30 +0900
Subject: [PATCH 05/25] feat: create tagHelpers.module.scss

---
 src/components/AddItem/TagInput/TagInput.jsx  |  3 +-
 .../AddItem/TagInput/TagInput.module.scss     | 25 +++++++-------
 .../Product/ProductInfo/ProductInfo.jsx       | 33 +++++++++++--------
 .../ProductInfo/ProductInfo.module.scss       | 33 ++++++++++++++++++-
 src/pages/ProductDetail/ProductDetail.jsx     |  1 +
 src/styles/common/base.css                    |  5 ---
 src/styles/common/reset.css                   |  1 +
 src/styles/helpers/tagHelpers.module.scss     | 17 ++++++++++
 8 files changed, 86 insertions(+), 32 deletions(-)
 create mode 100644 src/styles/helpers/tagHelpers.module.scss

diff --git a/src/components/AddItem/TagInput/TagInput.jsx b/src/components/AddItem/TagInput/TagInput.jsx
index 965494f3..9b0e939a 100644
--- a/src/components/AddItem/TagInput/TagInput.jsx
+++ b/src/components/AddItem/TagInput/TagInput.jsx
@@ -1,5 +1,6 @@
 import { RemoveIcon } from '@/components/common/Buttons';
 import formStyles from '@/styles/helpers/formHelpers.module.scss';
+import tagStyles from '@/styles/helpers/tagHelpers.module.scss';
 import styles from './TagInput.module.scss';
 
 const TagInput = ({ tagInput, setTagInput, tags, handleInputChange }) => {
@@ -39,7 +40,7 @@ const TagInput = ({ tagInput, setTagInput, tags, handleInputChange }) => {
       </div>
       <div className={styles.tagList}>
         {tags.map((tag) => (
-          <div key={tag} className={styles.tag}>
+          <div key={tag} className={tagStyles.tag}>
             #{tag}
             <RemoveIcon
               onClick={() => handleRemoveTag(tag)}
diff --git a/src/components/AddItem/TagInput/TagInput.module.scss b/src/components/AddItem/TagInput/TagInput.module.scss
index 5d315eae..20a50bc6 100644
--- a/src/components/AddItem/TagInput/TagInput.module.scss
+++ b/src/components/AddItem/TagInput/TagInput.module.scss
@@ -1,18 +1,19 @@
+// tagHelpers.module.scss로 공통으로 뺐는데 이게 맞는건지 판단 중
 .tagList {
   display: flex;
   flex-wrap: wrap;
   gap: 0.8rem;
-  margin-top: 0.8rem;
-}
-
-.tag {
   margin-top: 1.4rem;
-  padding: 0.5rem 1.2rem 0.5rem 1.6rem;
-  background-color: var(--primary-50);
-  border-radius: 26px;
-  font-size: 1.6rem;
-  color: var(--secondary-800);
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
 }
+
+// .tag {
+//   margin-top: 1.4rem;
+//   padding: 0.5rem 1.2rem 0.5rem 1.6rem;
+//   background-color: var(--primary-50);
+//   border-radius: 26px;
+//   font-size: 1.6rem;
+//   color: var(--secondary-800);
+//   display: flex;
+//   align-items: center;
+//   gap: 0.8rem;
+// }
diff --git a/src/components/Product/ProductInfo/ProductInfo.jsx b/src/components/Product/ProductInfo/ProductInfo.jsx
index 1c5eff20..861bda22 100644
--- a/src/components/Product/ProductInfo/ProductInfo.jsx
+++ b/src/components/Product/ProductInfo/ProductInfo.jsx
@@ -1,4 +1,5 @@
 import { VerticalKebabDrop } from '@/components/common/Buttons';
+import tagStyles from '@/styles/helpers/tagHelpers.module.scss';
 import styles from './ProductInfo.module.scss';
 
 const ProductInfo = ({
@@ -21,20 +22,26 @@ const ProductInfo = ({
       </div>
       <div className={styles.info}>
         <div className={styles.infoHeader}>
-          <h2>{name}</h2>
-          <VerticalKebabDrop />
+          <div className={styles.titleBar}>
+            <h2>{name}</h2>
+            <VerticalKebabDrop />
+          </div>
+          <p className={styles.price}>{price.toLocaleString()}원</p>
+          <div className={styles.horizontalLine} />
         </div>
-        <p className={styles.price}>{price.toLocaleString()}원</p>
-
-        <div className={styles.horizontalLine} />
-
-        <p className={styles.description}>{description}</p>
-        <div className={styles.tags}>
-          {tags.map((tag, index) => (
-            <span key={index} className={styles.tag}>
-              #{tag}
-            </span>
-          ))}
+        <div className={styles.infoLabel}>
+          <h3>상품 소개</h3>
+          <p>{description}</p>
+        </div>
+        <div className={styles.infoLabel}>
+          <h3>상품 태그</h3>
+          <div className={tagStyles.tagList}>
+            {tags.map((tag, index) => (
+              <span key={index} className={tagStyles.tag}>
+                #{tag}
+              </span>
+            ))}
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/Product/ProductInfo/ProductInfo.module.scss b/src/components/Product/ProductInfo/ProductInfo.module.scss
index 37585dfe..68348a70 100644
--- a/src/components/Product/ProductInfo/ProductInfo.module.scss
+++ b/src/components/Product/ProductInfo/ProductInfo.module.scss
@@ -29,5 +29,36 @@
 
 .infoHeader {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
+  gap: 1.6rem;
+
+  .titleBar {
+    display: flex;
+    justify-content: space-between;
+    font-weight: 600;
+    h2 {
+      font-size: 2.4rem;
+    }
+  }
+}
+
+.price {
+  font-size: 4rem;
+}
+
+.infoLabel {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+  font-size: 1.6rem;
+  color: var(--secondary-600);
+
+  h3 {
+    font-weight: 600;
+  }
+
+  p {
+    line-height: 2.6rem;
+    font-weight: 400;
+  }
 }
diff --git a/src/pages/ProductDetail/ProductDetail.jsx b/src/pages/ProductDetail/ProductDetail.jsx
index b913f3d5..ac22912b 100644
--- a/src/pages/ProductDetail/ProductDetail.jsx
+++ b/src/pages/ProductDetail/ProductDetail.jsx
@@ -13,6 +13,7 @@ const ProductDetail = () => {
   console.log('useParams에 어떻게 출력되나', useParams());
   const { productId } = useParams();
   const [product, setProduct] = useState(null);
+  console.log('product', product);
   const [refreshKey, setRefreshKey] = useState(0);
 
   useEffect(() => {
diff --git a/src/styles/common/base.css b/src/styles/common/base.css
index 5885e0e8..7aa1edb9 100644
--- a/src/styles/common/base.css
+++ b/src/styles/common/base.css
@@ -10,11 +10,6 @@ body {
   color: var(--secondary-800);
 }
 
-p {
-  font-size: 1rem;
-  line-height: 1.7;
-}
-
 ul,
 ol {
   font-size: 1rem;
diff --git a/src/styles/common/reset.css b/src/styles/common/reset.css
index aac599b6..bd4e3440 100644
--- a/src/styles/common/reset.css
+++ b/src/styles/common/reset.css
@@ -15,6 +15,7 @@ ul,
 ol,
 label {
   margin: 0;
+  font-size: inherit;
 }
 
 ul,
diff --git a/src/styles/helpers/tagHelpers.module.scss b/src/styles/helpers/tagHelpers.module.scss
new file mode 100644
index 00000000..6dd267d6
--- /dev/null
+++ b/src/styles/helpers/tagHelpers.module.scss
@@ -0,0 +1,17 @@
+.tagList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.8rem;
+}
+
+.tag {
+  width: fit-content;
+  padding: 0.5rem 1.2rem 0.5rem 1.6rem;
+  background-color: var(--primary-50);
+  border-radius: 26px;
+  font-size: 1.6rem;
+  color: var(--secondary-800);
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}

From 91cd7d9a92f8edf4379e1aa48e8d79686c37e729 Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Mon, 12 May 2025 04:06:16 +0900
Subject: [PATCH 06/25] feat: create ProductInfo component

---
 .../Product/ProductCard/ProductCard.jsx       | 12 ++-
 .../ProductCard/ProductCard.module.scss       | 24 ++---
 .../Product/ProductInfo/ProductInfo.jsx       | 67 +++++++++-----
 .../ProductInfo/ProductInfo.module.scss       | 90 ++++++++++++++++---
 .../Buttons/FavoriteBtn/FavoriteBtn.jsx       | 32 +++++++
 .../FavoriteBtn/FavoriteBtn.module.scss       | 19 ++++
 .../common/Buttons/FavoriteBtn/index.js       |  1 +
 src/components/common/Buttons/index.js        |  1 +
 src/utils/format/date.js                      |  7 ++
 src/utils/format/index.js                     |  1 +
 10 files changed, 199 insertions(+), 55 deletions(-)
 create mode 100644 src/components/common/Buttons/FavoriteBtn/FavoriteBtn.jsx
 create mode 100644 src/components/common/Buttons/FavoriteBtn/FavoriteBtn.module.scss
 create mode 100644 src/components/common/Buttons/FavoriteBtn/index.js
 create mode 100644 src/utils/format/date.js
 create mode 100644 src/utils/format/index.js

diff --git a/src/components/Product/ProductCard/ProductCard.jsx b/src/components/Product/ProductCard/ProductCard.jsx
index b1f212d8..279c12ea 100644
--- a/src/components/Product/ProductCard/ProductCard.jsx
+++ b/src/components/Product/ProductCard/ProductCard.jsx
@@ -1,4 +1,4 @@
-import heartIcon from '@/assets/icons/heart_empty.svg';
+import { FavoriteBtn } from '@/components/common/Buttons';
 import defaultProductImg from '@/assets/images/default_product.svg';
 import styles from './ProductCard.module.scss';
 
@@ -6,6 +6,7 @@ const ProductCard = ({ images, name, price, favoriteCount }) => {
   return (
     <div className={styles.productCard}>
       <img
+        className={styles.productImg}
         src={images || defaultProductImg}
         alt={name}
         onError={(e) => {
@@ -23,10 +24,15 @@ const ProductCard = ({ images, name, price, favoriteCount }) => {
               ? `${price.toLocaleString()}원`
               : '가격 미정'}
         </p>
-        <div className={styles.favoriteCount}>
+        <FavoriteBtn
+          favoriteCount={favoriteCount}
+          iconSizeClassName={styles.favoriteIconSize}
+          fontSizeClassName={styles.favoriteCountFontSize}
+        />
+        {/* <div className={styles.favoriteCount}>
           <img src={heartIcon} alt="Favorite" className={styles.heartIcon} />
           <span className={styles.count}>{favoriteCount}</span>
-        </div>
+        </div> */}
       </div>
     </div>
   );
diff --git a/src/components/Product/ProductCard/ProductCard.module.scss b/src/components/Product/ProductCard/ProductCard.module.scss
index 78f609c4..10082835 100644
--- a/src/components/Product/ProductCard/ProductCard.module.scss
+++ b/src/components/Product/ProductCard/ProductCard.module.scss
@@ -3,7 +3,7 @@
   border-radius: 16px;
   overflow: hidden;
 
-  img {
+  .productImg {
     display: block;
     width: 100%;
     aspect-ratio: 4 / 3;
@@ -27,21 +27,13 @@
       font-weight: 700;
       color: var(--secondary-800);
     }
+  }
+}
 
-    .favoriteCount {
-      display: flex;
-
-      .heartIcon {
-        width: 1.6rem;
-        height: 1.6rem;
-        object-fit: contain;
-        margin-right: 4px;
-      }
+.favoriteCountFontSize {
+  font-size: 1.2rem;
+}
 
-      .count {
-        font-size: 1.2rem;
-        color: var(--secondary-600);
-      }
-    }
-  }
+.favoriteIconSize {
+  width: 1.6rem;
 }
diff --git a/src/components/Product/ProductInfo/ProductInfo.jsx b/src/components/Product/ProductInfo/ProductInfo.jsx
index 861bda22..5decc44b 100644
--- a/src/components/Product/ProductInfo/ProductInfo.jsx
+++ b/src/components/Product/ProductInfo/ProductInfo.jsx
@@ -1,4 +1,6 @@
-import { VerticalKebabDrop } from '@/components/common/Buttons';
+import { FavoriteBtn, VerticalKebabDrop } from '@/components/common/Buttons';
+import { isoDate } from '@/utils/format';
+import defaultProfileImg from '@/assets/images/default_profile.svg';
 import tagStyles from '@/styles/helpers/tagHelpers.module.scss';
 import styles from './ProductInfo.module.scss';
 
@@ -9,6 +11,8 @@ const ProductInfo = ({
   price,
   tags,
   favoriteCount,
+  ownerNickname,
+  updatedAt,
   onMenuSelect, //TODO: 구현 예정
 }) => {
   const handleMenuSelect = (value) => {
@@ -16,31 +20,50 @@ const ProductInfo = ({
   };
 
   return (
-    <div className={styles.productInfo}>
-      <div className={styles.image}>
+    <div className={styles.productContainer}>
+      <div className={styles.productImage}>
         <img src={images?.[0]} alt={name} />
       </div>
-      <div className={styles.info}>
-        <div className={styles.infoHeader}>
-          <div className={styles.titleBar}>
-            <h2>{name}</h2>
-            <VerticalKebabDrop />
+      <div className={styles.productOverview}>
+        <div className={styles.productInfo}>
+          <div className={styles.infoHeader}>
+            <div className={styles.titleBar}>
+              <h2>{name}</h2>
+              <VerticalKebabDrop />
+            </div>
+            <p className={styles.price}>{price.toLocaleString()}원</p>
+            <div className={styles.horizontalLine} />
+          </div>
+          <div className={styles.infoLabel}>
+            <h3>상품 소개</h3>
+            <p>{description}</p>
+          </div>
+          <div className={styles.infoLabel}>
+            <h3>상품 태그</h3>
+            <div className={tagStyles.tagList}>
+              {tags.map((tag, index) => (
+                <span key={index} className={tagStyles.tag}>
+                  #{tag}
+                </span>
+              ))}
+            </div>
           </div>
-          <p className={styles.price}>{price.toLocaleString()}원</p>
-          <div className={styles.horizontalLine} />
-        </div>
-        <div className={styles.infoLabel}>
-          <h3>상품 소개</h3>
-          <p>{description}</p>
         </div>
-        <div className={styles.infoLabel}>
-          <h3>상품 태그</h3>
-          <div className={tagStyles.tagList}>
-            {tags.map((tag, index) => (
-              <span key={index} className={tagStyles.tag}>
-                #{tag}
-              </span>
-            ))}
+        <div className={styles.productPostInfo}>
+          <div className={styles.authorInfo}>
+            <img src={defaultProfileImg} alt="Author Profile Image" />
+            <div className={styles.nicknameAndDate}>
+              <div className={styles.ownerNickname}>{ownerNickname}</div>
+              <div className={styles.postDate}>{isoDate(updatedAt)}</div>
+            </div>
+          </div>
+          <div className={styles.favoriteContainer}>
+            <FavoriteBtn
+              favoriteCount={favoriteCount}
+              iconSizeClassName={styles.favoriteIconSize}
+              fontSizeClassName={styles.favoriteCountFontSize}
+              heartBoxClassName={styles.favoriteBox}
+            />
           </div>
         </div>
       </div>
diff --git a/src/components/Product/ProductInfo/ProductInfo.module.scss b/src/components/Product/ProductInfo/ProductInfo.module.scss
index 68348a70..c8247a49 100644
--- a/src/components/Product/ProductInfo/ProductInfo.module.scss
+++ b/src/components/Product/ProductInfo/ProductInfo.module.scss
@@ -1,6 +1,26 @@
-.productInfo {
+.productContainer {
   display: flex;
   gap: 2.4rem;
+
+  .productImage {
+    display: block;
+    width: 48.6rem;
+    aspect-ratio: 1 / 1;
+    border-radius: 28.59px;
+    overflow: hidden;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .productOverview {
+    display: flex;
+    flex-direction: column;
+    gap: 6.2rem;
+    width: 100%;
+  }
 }
 
 .horizontalLine {
@@ -8,19 +28,7 @@
   height: 1px;
   background-color: var(--secondary-200);
 }
-
-.productInfo .image {
-  display: block;
-  width: 48.6rem;
-  aspect-ratio: 1 / 1;
-  border-radius: 28.59px;
-  img {
-    width: 100%;
-    object-fit: cover;
-  }
-}
-
-.productInfo .info {
+.productInfo {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -62,3 +70,57 @@
     font-weight: 400;
   }
 }
+
+.productPostInfo {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.6rem;
+  font-size: 1.4rem;
+  padding: 0.5rem 0;
+
+  .authorInfo {
+    display: flex;
+    align-items: center;
+    gap: 1.6rem;
+
+    img {
+      width: 4rem;
+      aspect-ratio: 1 / 1;
+      border-radius: 50%;
+      object-fit: cover;
+    }
+
+    .nicknameAndDate {
+      display: flex;
+      flex-direction: column;
+      gap: 0.2rem;
+      .ownerNickname {
+        color: var(--secondary-600);
+      }
+      .postDate {
+        color: var(--secondary-400);
+      }
+    }
+  }
+
+  .favoriteContainer {
+    border-left: 1px solid var(--secondary-200);
+    border-radius: 2px;
+    padding-left: 2.4rem;
+  }
+}
+
+.favoriteBox {
+  border: 1px solid var(--secondary-200);
+  border-radius: 35px;
+  padding: 0.8rem 1.5rem;
+}
+
+.favoriteCountFontSize {
+  font-size: 1.6rem;
+}
+
+.favoriteIconSize {
+  width: 3.2rem;
+}
diff --git a/src/components/common/Buttons/FavoriteBtn/FavoriteBtn.jsx b/src/components/common/Buttons/FavoriteBtn/FavoriteBtn.jsx
new file mode 100644
index 00000000..29fe107d
--- /dev/null
+++ b/src/components/common/Buttons/FavoriteBtn/FavoriteBtn.jsx
@@ -0,0 +1,32 @@
+import heartIcon from '@/assets/icons/heart_empty.svg';
+import styles from './FavoriteBtn.module.scss';
+
+const FavoriteBtn = ({
+  favoriteCount,
+  onClick,
+  iconSizeClassName = '',
+  fontSizeClassName = '',
+  heartBoxClassName = '',
+}) => {
+  return (
+    <button
+      type="button"
+      className={styles.favoriteCount}
+      onClick={onClick} //TODO: 구현 예정
+      aria-label="Add to favorite"
+    >
+      <div className={`${styles.favoriteBox} ${heartBoxClassName}`}>
+        <img
+          src={heartIcon}
+          alt="Favorite"
+          className={`${styles.heartIcon} ${iconSizeClassName}`}
+        />
+        <span className={`${styles.count} ${fontSizeClassName}`}>
+          {favoriteCount}
+        </span>
+      </div>
+    </button>
+  );
+};
+
+export default FavoriteBtn;
diff --git a/src/components/common/Buttons/FavoriteBtn/FavoriteBtn.module.scss b/src/components/common/Buttons/FavoriteBtn/FavoriteBtn.module.scss
new file mode 100644
index 00000000..9a05654f
--- /dev/null
+++ b/src/components/common/Buttons/FavoriteBtn/FavoriteBtn.module.scss
@@ -0,0 +1,19 @@
+.favoriteCount {
+  display: flex;
+
+  .favoriteBox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.4rem;
+
+    .heartIcon {
+      aspect-ratio: 1 / 1;
+      object-fit: contain;
+    }
+
+    .count {
+      color: var(--secondary-600);
+    }
+  }
+}
diff --git a/src/components/common/Buttons/FavoriteBtn/index.js b/src/components/common/Buttons/FavoriteBtn/index.js
new file mode 100644
index 00000000..b493a5f9
--- /dev/null
+++ b/src/components/common/Buttons/FavoriteBtn/index.js
@@ -0,0 +1 @@
+export { default } from './FavoriteBtn';
diff --git a/src/components/common/Buttons/index.js b/src/components/common/Buttons/index.js
index ce34e5e9..bd65108f 100644
--- a/src/components/common/Buttons/index.js
+++ b/src/components/common/Buttons/index.js
@@ -2,3 +2,4 @@ export { default as RemoveIcon } from './RemoveIcon';
 export { default as VerticalKebabDrop } from './VerticalKebabDrop';
 export { default as SortDrop } from './SortDrop';
 export { default as DropdownBtn } from './Dropdown';
+export { default as FavoriteBtn } from './FavoriteBtn';
diff --git a/src/utils/format/date.js b/src/utils/format/date.js
new file mode 100644
index 00000000..2e6ced5b
--- /dev/null
+++ b/src/utils/format/date.js
@@ -0,0 +1,7 @@
+export const isoDate = (isoDate) => {
+  return new Date(isoDate).toLocaleDateString('ko-KR', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  });
+};
diff --git a/src/utils/format/index.js b/src/utils/format/index.js
new file mode 100644
index 00000000..c31488aa
--- /dev/null
+++ b/src/utils/format/index.js
@@ -0,0 +1 @@
+export { isoDate } from './date';

From bd6ae14046ef3405a1ccfd54199287d0d48aa186 Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Mon, 12 May 2025 04:26:33 +0900
Subject: [PATCH 07/25] style: make ProductInfo component responsive

---
 .../Product/ProductInfo/ProductInfo.jsx       |  3 ++-
 .../ProductInfo/ProductInfo.module.scss       | 19 ++++++++++++++-----
 src/styles/helpers/commonHelpers.module.scss  |  5 +++++
 3 files changed, 21 insertions(+), 6 deletions(-)
 create mode 100644 src/styles/helpers/commonHelpers.module.scss

diff --git a/src/components/Product/ProductInfo/ProductInfo.jsx b/src/components/Product/ProductInfo/ProductInfo.jsx
index 5decc44b..2998cb6b 100644
--- a/src/components/Product/ProductInfo/ProductInfo.jsx
+++ b/src/components/Product/ProductInfo/ProductInfo.jsx
@@ -2,6 +2,7 @@ import { FavoriteBtn, VerticalKebabDrop } from '@/components/common/Buttons';
 import { isoDate } from '@/utils/format';
 import defaultProfileImg from '@/assets/images/default_profile.svg';
 import tagStyles from '@/styles/helpers/tagHelpers.module.scss';
+import commonStyles from '@/styles/helpers/commonHelpers.module.scss';
 import styles from './ProductInfo.module.scss';
 
 const ProductInfo = ({
@@ -32,7 +33,7 @@ const ProductInfo = ({
               <VerticalKebabDrop />
             </div>
             <p className={styles.price}>{price.toLocaleString()}원</p>
-            <div className={styles.horizontalLine} />
+            <div className={commonStyles.horizontalLine} />
           </div>
           <div className={styles.infoLabel}>
             <h3>상품 소개</h3>
diff --git a/src/components/Product/ProductInfo/ProductInfo.module.scss b/src/components/Product/ProductInfo/ProductInfo.module.scss
index c8247a49..c90c0b86 100644
--- a/src/components/Product/ProductInfo/ProductInfo.module.scss
+++ b/src/components/Product/ProductInfo/ProductInfo.module.scss
@@ -23,11 +23,6 @@
   }
 }
 
-.horizontalLine {
-  width: 100%;
-  height: 1px;
-  background-color: var(--secondary-200);
-}
 .productInfo {
   display: flex;
   flex-direction: column;
@@ -124,3 +119,17 @@
 .favoriteIconSize {
   width: 3.2rem;
 }
+
+@media (max-width: 767px) {
+  .productContainer {
+    flex-direction: column;
+
+    .productImage {
+      width: 100%;
+    }
+
+    .productOverview {
+      gap: 4rem;
+    }
+  }
+}
diff --git a/src/styles/helpers/commonHelpers.module.scss b/src/styles/helpers/commonHelpers.module.scss
new file mode 100644
index 00000000..b1f172a3
--- /dev/null
+++ b/src/styles/helpers/commonHelpers.module.scss
@@ -0,0 +1,5 @@
+.horizontalLine {
+  width: 100%;
+  height: 1px;
+  background-color: var(--secondary-200);
+}

From f1b506b9d7ceac29ed1ce778f5ae48d4c61f80a1 Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Mon, 12 May 2025 04:56:59 +0900
Subject: [PATCH 08/25] feat: create CommentInput component

---
 .../Comment/CommentInput/CommentInput.jsx     | 29 ++++++++++---------
 .../CommentInput/CommentInput.module.scss     | 10 ++++++-
 src/pages/ProductDetail/ProductDetail.jsx     | 20 ++++++++-----
 .../ProductDetail/ProductDetail.module.scss   |  5 ++++
 4 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/src/components/Comment/CommentInput/CommentInput.jsx b/src/components/Comment/CommentInput/CommentInput.jsx
index 066eafda..06ecc558 100644
--- a/src/components/Comment/CommentInput/CommentInput.jsx
+++ b/src/components/Comment/CommentInput/CommentInput.jsx
@@ -26,22 +26,25 @@ const CommentInput = ({ productId, refreshAfterSubmit }) => {
     });
 
     setContent('');
-    refreshAfterSubmit?.(); // 등록 후 댓글 목록 새로고침
+    refreshAfterSubmit(); // 등록 후 댓글 목록 새로고침
   };
 
   return (
-    <div className={styles.commentInput}>
-      <label htmlFor="content" className={formStyles.labelText}>
-        문의하기
-      </label>
-      <textarea
-        id="content"
-        name="content"
-        className={formStyles.textarea}
-        value={content}
-        onChange={(e) => setContent(e.target.value)}
-        placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
-      />
+    <div className={formStyles.inputContainer}>
+      <div className={styles.inputContainer}>
+        <label htmlFor="content" className={formStyles.labelText}>
+          문의하기
+        </label>
+        <textarea
+          id="content"
+          name="content"
+          value={content}
+          className={formStyles.textarea}
+          rows={4}
+          onChange={(e) => setContent(e.target.value)}
+          placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
+        />
+      </div>
       <button
         type="button"
         className={`${buttonStyles.primary} ${styles.submitButton}`}
diff --git a/src/components/Comment/CommentInput/CommentInput.module.scss b/src/components/Comment/CommentInput/CommentInput.module.scss
index 12b3d468..2baca9b1 100644
--- a/src/components/Comment/CommentInput/CommentInput.module.scss
+++ b/src/components/Comment/CommentInput/CommentInput.module.scss
@@ -1,6 +1,14 @@
+.inputContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.9rem;
+}
+
 .submitButton {
-  padding: 1.2rem 2.3rem;
+  width: 7.4rem;
+  padding: 0.8rem 2.3rem;
   border-radius: 8px;
   font-size: 1.6rem;
   font-weight: 400;
+  align-self: end;
 }
diff --git a/src/pages/ProductDetail/ProductDetail.jsx b/src/pages/ProductDetail/ProductDetail.jsx
index ac22912b..441f67ed 100644
--- a/src/pages/ProductDetail/ProductDetail.jsx
+++ b/src/pages/ProductDetail/ProductDetail.jsx
@@ -6,6 +6,7 @@ import { ProductInfo } from '@/components/Product';
 import { safeFetch } from '@/utils/api';
 import { baseUrl, ENDPOINTS, ROUTES } from '@/constants/urls';
 import { PRODUCT_ERROR_MESSAGES } from '@/constants/messages';
+import commonStyles from '@/styles/helpers/commonHelpers.module.scss';
 import styles from './ProductDetail.module.scss';
 
 const ProductDetail = () => {
@@ -37,14 +38,17 @@ const ProductDetail = () => {
   return (
     <div className={styles.productDetail}>
       <ProductInfo {...product} />
-
-      <div className={styles.horizontalLine} />
-
-      <CommentInput
-        productId={productId}
-        refreshAfterSubmit={refreshAfterSubmit}
-      />
-      <CommentList productId={productId} refreshKey={refreshKey} />
+      <div className={commonStyles.horizontalLine} />
+      <div>
+        <CommentInput
+          productId={productId}
+          refreshAfterSubmit={refreshAfterSubmit}
+        />
+        <CommentList
+          productId={productId}
+          // refreshKey={refreshKey}
+        />
+      </div>
 
       <Link to={ROUTES.ITEMS} className={styles.backButton}>
         목록으로 돌아가기
diff --git a/src/pages/ProductDetail/ProductDetail.module.scss b/src/pages/ProductDetail/ProductDetail.module.scss
index e69de29b..5968091e 100644
--- a/src/pages/ProductDetail/ProductDetail.module.scss
+++ b/src/pages/ProductDetail/ProductDetail.module.scss
@@ -0,0 +1,5 @@
+.productDetail {
+  display: flex;
+  flex-direction: column;
+  gap: 4rem;
+}

From 2e20c73bf16bd72fb986c6dd928a63a29f769b72 Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Mon, 12 May 2025 06:36:51 +0900
Subject: [PATCH 09/25] feat: create CommentList component

---
 .../Comment/CommentList/CommentList.jsx       | 44 ++++++++++++++----
 .../CommentList/CommentList.module.scss       | 46 +++++++++++++++++++
 .../Product/ProductInfo/ProductInfo.jsx       |  8 ++--
 .../ProductInfo/ProductInfo.module.scss       |  7 +--
 .../common/Buttons/Dropdown/DropdownBtn.jsx   |  4 +-
 .../Buttons/Dropdown/DropdownBtn.module.scss  | 15 ++++--
 src/pages/ProductDetail/ProductDetail.jsx     |  2 +-
 .../ProductDetail/ProductDetail.module.scss   |  7 +++
 src/utils/format/index.js                     |  1 +
 src/utils/format/time.js                      | 17 +++++++
 10 files changed, 127 insertions(+), 24 deletions(-)
 create mode 100644 src/utils/format/time.js

diff --git a/src/components/Comment/CommentList/CommentList.jsx b/src/components/Comment/CommentList/CommentList.jsx
index f99a1770..85f8f7a6 100644
--- a/src/components/Comment/CommentList/CommentList.jsx
+++ b/src/components/Comment/CommentList/CommentList.jsx
@@ -1,8 +1,12 @@
 import { useEffect, useState } from 'react';
 import { useToast } from '@/components/common';
+import { VerticalKebabDrop } from '@/components/common/Buttons';
 import { safeFetch } from '@/utils/api';
+import { relativeTime } from '@/utils/format';
 import { baseUrl, ENDPOINTS } from '@/constants/urls';
 import { PRODUCT_ERROR_MESSAGES } from '@/constants/messages';
+import defaultProfile from '@/assets/images/default_profile.svg';
+import commonStyles from '@/styles/helpers/commonHelpers.module.scss';
 import styles from './CommentList.module.scss';
 
 const CommentList = ({ productId, refreshKey }) => {
@@ -23,6 +27,8 @@ const CommentList = ({ productId, refreshKey }) => {
       uiErrorMessage: PRODUCT_ERROR_MESSAGES.FETCH_COMMENTS_FAILED,
     });
 
+    console.log('댓글 목록', data);
+
     if (cursor) {
       setComments((prev) => [...prev, ...data.list]);
     } else {
@@ -37,21 +43,43 @@ const CommentList = ({ productId, refreshKey }) => {
   };
 
   return (
-    <div className={styles.commentList}>
+    <div className={styles.commentContainer}>
       {comments.map((comment) => (
-        <div key={comment.id} className={styles.comment}>
-          <p>
-            <strong>{comment.nickname}</strong>
-          </p>
-          <p>{comment.content}</p>
-          <p className={styles.commentDate}>{comment.updatedAt}</p>
+        <div key={comment.id} className={styles.commentList}>
+          <div className={styles.comment}>
+            <div className={styles.commentContent}>
+              <p>{comment.content}</p>
+              <div className={styles.writerInfo}>
+                <img
+                  src={comment.writer.image || defaultProfile}
+                  alt="Comment writer profile image"
+                />
+                <div className={styles.nicknameAndDate}>
+                  <div className={styles.nickname}>
+                    {comment.writer.nickname}
+                  </div>
+                  <div className={styles.date}>
+                    {relativeTime(comment.updatedAt)}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <VerticalKebabDrop />
+          </div>
+          <div
+            className={`${commonStyles.horizontalLine} ${styles.addMargin}`}
+          />
         </div>
       ))}
+      {/* 
+      //TODO: Pagination 으로 구현 예정
       {nextCursor && (
         <button className={styles.loadMoreButton} onClick={handleLoadMore}>
           더보기
         </button>
-      )}
+      )} 
+       */}
     </div>
   );
 };
diff --git a/src/components/Comment/CommentList/CommentList.module.scss b/src/components/Comment/CommentList/CommentList.module.scss
index e69de29b..1ec45764 100644
--- a/src/components/Comment/CommentList/CommentList.module.scss
+++ b/src/components/Comment/CommentList/CommentList.module.scss
@@ -0,0 +1,46 @@
+.commentList {
+  display: flex;
+  flex-direction: column;
+}
+
+.comment {
+  display: flex;
+  justify-content: space-between;
+  .commentContent {
+    display: flex;
+    flex-direction: column;
+    gap: 2.4rem;
+
+    p {
+      font-size: 1.4rem;
+      font-weight: 400;
+    }
+
+    .writerInfo {
+      display: flex;
+      align-items: center;
+      gap: 0.8rem;
+      img {
+        width: 3.2rem;
+        aspect-ratio: 1 / 1;
+        border-radius: 50%;
+      }
+
+      .nicknameAndDate {
+        display: flex;
+        flex-direction: column;
+        gap: 0.4rem;
+        .nickname {
+          color: var(--secondary-600);
+        }
+        .date {
+          color: var(--secondary-400);
+        }
+      }
+    }
+  }
+}
+
+.addMargin {
+  margin: 2.4rem 0;
+}
diff --git a/src/components/Product/ProductInfo/ProductInfo.jsx b/src/components/Product/ProductInfo/ProductInfo.jsx
index 2998cb6b..b28a0383 100644
--- a/src/components/Product/ProductInfo/ProductInfo.jsx
+++ b/src/components/Product/ProductInfo/ProductInfo.jsx
@@ -51,11 +51,11 @@ const ProductInfo = ({
           </div>
         </div>
         <div className={styles.productPostInfo}>
-          <div className={styles.authorInfo}>
-            <img src={defaultProfileImg} alt="Author Profile Image" />
+          <div className={styles.writerInfo}>
+            <img src={defaultProfileImg} alt="Writer Profile Image" />
             <div className={styles.nicknameAndDate}>
-              <div className={styles.ownerNickname}>{ownerNickname}</div>
-              <div className={styles.postDate}>{isoDate(updatedAt)}</div>
+              <div className={styles.nickname}>{ownerNickname}</div>
+              <div className={styles.date}>{isoDate(updatedAt)}</div>
             </div>
           </div>
           <div className={styles.favoriteContainer}>
diff --git a/src/components/Product/ProductInfo/ProductInfo.module.scss b/src/components/Product/ProductInfo/ProductInfo.module.scss
index c90c0b86..895b0651 100644
--- a/src/components/Product/ProductInfo/ProductInfo.module.scss
+++ b/src/components/Product/ProductInfo/ProductInfo.module.scss
@@ -38,6 +38,7 @@
   .titleBar {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     font-weight: 600;
     h2 {
       font-size: 2.4rem;
@@ -74,7 +75,7 @@
   font-size: 1.4rem;
   padding: 0.5rem 0;
 
-  .authorInfo {
+  .writerInfo {
     display: flex;
     align-items: center;
     gap: 1.6rem;
@@ -90,10 +91,10 @@
       display: flex;
       flex-direction: column;
       gap: 0.2rem;
-      .ownerNickname {
+      .nickname {
         color: var(--secondary-600);
       }
-      .postDate {
+      .date {
         color: var(--secondary-400);
       }
     }
diff --git a/src/components/common/Buttons/Dropdown/DropdownBtn.jsx b/src/components/common/Buttons/Dropdown/DropdownBtn.jsx
index dee99dae..3c0a9c7f 100644
--- a/src/components/common/Buttons/Dropdown/DropdownBtn.jsx
+++ b/src/components/common/Buttons/Dropdown/DropdownBtn.jsx
@@ -33,9 +33,7 @@ const DropdownBtn = ({
       onClick={toggle}
       aria-label="Open Dropdown"
     >
-      <span className={styles.icon}>
-        <img src={iconSrc} alt={iconAlt} />
-      </span>
+      <img src={iconSrc} alt={iconAlt} />
     </button>
   );
 
diff --git a/src/components/common/Buttons/Dropdown/DropdownBtn.module.scss b/src/components/common/Buttons/Dropdown/DropdownBtn.module.scss
index 97ef2298..772691ae 100644
--- a/src/components/common/Buttons/Dropdown/DropdownBtn.module.scss
+++ b/src/components/common/Buttons/Dropdown/DropdownBtn.module.scss
@@ -1,5 +1,8 @@
 .wrapper {
   position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   font-size: 16px;
 
   &--textMode {
@@ -7,6 +10,7 @@
   }
   &--iconMode {
     width: fit-content;
+    height: fit-content;
   }
 }
 
@@ -36,7 +40,6 @@
 
 .iconMode {
   aspect-ratio: 1 / 1;
-
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -47,10 +50,12 @@
     color: inherit;
   }
 
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
+  button {
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
   }
 }
 
diff --git a/src/pages/ProductDetail/ProductDetail.jsx b/src/pages/ProductDetail/ProductDetail.jsx
index 441f67ed..767fd957 100644
--- a/src/pages/ProductDetail/ProductDetail.jsx
+++ b/src/pages/ProductDetail/ProductDetail.jsx
@@ -39,7 +39,7 @@ const ProductDetail = () => {
     <div className={styles.productDetail}>
       <ProductInfo {...product} />
       <div className={commonStyles.horizontalLine} />
-      <div>
+      <div className={styles.commentSection}>
         <CommentInput
           productId={productId}
           refreshAfterSubmit={refreshAfterSubmit}
diff --git a/src/pages/ProductDetail/ProductDetail.module.scss b/src/pages/ProductDetail/ProductDetail.module.scss
index 5968091e..4c5d9a04 100644
--- a/src/pages/ProductDetail/ProductDetail.module.scss
+++ b/src/pages/ProductDetail/ProductDetail.module.scss
@@ -3,3 +3,10 @@
   flex-direction: column;
   gap: 4rem;
 }
+
+.commentSection {
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+  margin-bottom: 6.4rem;
+}
diff --git a/src/utils/format/index.js b/src/utils/format/index.js
index c31488aa..1a278442 100644
--- a/src/utils/format/index.js
+++ b/src/utils/format/index.js
@@ -1 +1,2 @@
 export { isoDate } from './date';
+export { relativeTime } from './time';
diff --git a/src/utils/format/time.js b/src/utils/format/time.js
new file mode 100644
index 00000000..1dff70fa
--- /dev/null
+++ b/src/utils/format/time.js
@@ -0,0 +1,17 @@
+export const relativeTime = (isoDate) => {
+  const now = new Date();
+  const date = new Date(isoDate);
+  const diff = (now - date) / 1000;
+
+  const rtf = new Intl.RelativeTimeFormat('ko', { numeric: 'auto' });
+
+  if (diff < 60) return rtf.format(-Math.floor(diff), 'second');
+  if (diff < 3600) return rtf.format(-Math.floor(diff / 60), 'minute');
+  if (diff < 86400) return rtf.format(-Math.floor(diff / 3600), 'hour');
+  if (diff < 604800) return rtf.format(-Math.floor(diff / 86400), 'day');
+  // return date.toLocaleDateString('ko-KR'); // 일주일 이상은 그냥 날짜로
+
+  if (diff < 2592000) return rtf.format(-Math.floor(diff / 604800), 'week');
+  if (diff < 31536000) return rtf.format(-Math.floor(diff / 2592000), 'month');
+  return rtf.format(-Math.floor(diff / 31536000), 'year');
+};

From f8d925a985eebc75263b3ecf641e6edc6be50185 Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Mon, 12 May 2025 06:57:38 +0900
Subject: [PATCH 10/25] feat: create ProductDetail page

---
 src/pages/ProductDetail/ProductDetail.jsx     | 19 ++++++++++++-------
 .../ProductDetail/ProductDetail.module.scss   | 18 +++++++++++++++++-
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/pages/ProductDetail/ProductDetail.jsx b/src/pages/ProductDetail/ProductDetail.jsx
index 767fd957..51e815b8 100644
--- a/src/pages/ProductDetail/ProductDetail.jsx
+++ b/src/pages/ProductDetail/ProductDetail.jsx
@@ -6,7 +6,9 @@ import { ProductInfo } from '@/components/Product';
 import { safeFetch } from '@/utils/api';
 import { baseUrl, ENDPOINTS, ROUTES } from '@/constants/urls';
 import { PRODUCT_ERROR_MESSAGES } from '@/constants/messages';
+import arrowBackIcon from '@/assets/icons/arrow_back.svg';
 import commonStyles from '@/styles/helpers/commonHelpers.module.scss';
+import buttonStyles from '@/styles/helpers/buttonHelpers.module.scss';
 import styles from './ProductDetail.module.scss';
 
 const ProductDetail = () => {
@@ -44,15 +46,18 @@ const ProductDetail = () => {
           productId={productId}
           refreshAfterSubmit={refreshAfterSubmit}
         />
-        <CommentList
-          productId={productId}
-          // refreshKey={refreshKey}
-        />
+        <CommentList productId={productId} refreshKey={refreshKey} />
       </div>
 
-      <Link to={ROUTES.ITEMS} className={styles.backButton}>
-        목록으로 돌아가기
-      </Link>
+      <div className={styles.backButtonWrapper}>
+        <Link
+          to={ROUTES.ITEMS}
+          className={`${styles.backButton} ${buttonStyles.primary}`}
+        >
+          목록으로 돌아가기
+          <img src={arrowBackIcon} alt="Go back to previous page" />
+        </Link>
+      </div>
     </div>
   );
 };
diff --git a/src/pages/ProductDetail/ProductDetail.module.scss b/src/pages/ProductDetail/ProductDetail.module.scss
index 4c5d9a04..d3fa8bcd 100644
--- a/src/pages/ProductDetail/ProductDetail.module.scss
+++ b/src/pages/ProductDetail/ProductDetail.module.scss
@@ -8,5 +8,21 @@
   display: flex;
   flex-direction: column;
   gap: 2.4rem;
-  margin-bottom: 6.4rem;
+}
+
+.backButtonWrapper {
+  margin-bottom: 2.4rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .backButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.8rem;
+    font-size: 1.8rem;
+    padding: 1.1rem 4rem;
+    border-radius: 40px;
+    width: fit-content;
+  }
 }

From 854d7918027b21e315bfef3f4686015552ae9777 Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Mon, 12 May 2025 07:31:51 +0900
Subject: [PATCH 11/25] chore: add _redirect

---
 public/_redirects | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 public/_redirects

diff --git a/public/_redirects b/public/_redirects
new file mode 100644
index 00000000..50a46335
--- /dev/null
+++ b/public/_redirects
@@ -0,0 +1 @@
+/*    /index.html   200
\ No newline at end of file

From d26cd457267804de9b8e7f5f2b651f0b4df20978 Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Mon, 12 May 2025 07:38:54 +0900
Subject: [PATCH 12/25] fix: add Netlify SPA redirect config via netlify.toml

---
 netlify.toml | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 netlify.toml

diff --git a/netlify.toml b/netlify.toml
new file mode 100644
index 00000000..ff1c0508
--- /dev/null
+++ b/netlify.toml
@@ -0,0 +1,4 @@
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
\ No newline at end of file

From 9c8144ce5f397e76aa1d1730e74e8443c2a1b228 Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Mon, 12 May 2025 07:42:22 +0900
Subject: [PATCH 13/25] fix: correct Vite base path for Netlify deployment

---
 vite.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vite.config.js b/vite.config.js
index c663f915..b6c836a0 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -8,7 +8,7 @@ const __dirname = path.dirname(__filename);
 
 export default defineConfig({
   plugins: [react()],
-  base: './',
+  base: '/',
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),

From 2b44253f1539cdb70f7f8242cc6814c456b0a826 Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Mon, 12 May 2025 18:37:48 +0900
Subject: [PATCH 14/25] feat: create no comment list UI

---
 .../{dphoto@3x.svg => no_inquiries.svg}       |  0
 .../Comment/CommentList/CommentList.jsx       | 55 +++++++++++--------
 .../CommentList/CommentList.module.scss       | 14 +++++
 3 files changed, 45 insertions(+), 24 deletions(-)
 rename src/assets/images/{dphoto@3x.svg => no_inquiries.svg} (100%)

diff --git a/src/assets/images/dphoto@3x.svg b/src/assets/images/no_inquiries.svg
similarity index 100%
rename from src/assets/images/dphoto@3x.svg
rename to src/assets/images/no_inquiries.svg
diff --git a/src/components/Comment/CommentList/CommentList.jsx b/src/components/Comment/CommentList/CommentList.jsx
index 85f8f7a6..ca981132 100644
--- a/src/components/Comment/CommentList/CommentList.jsx
+++ b/src/components/Comment/CommentList/CommentList.jsx
@@ -6,6 +6,7 @@ import { relativeTime } from '@/utils/format';
 import { baseUrl, ENDPOINTS } from '@/constants/urls';
 import { PRODUCT_ERROR_MESSAGES } from '@/constants/messages';
 import defaultProfile from '@/assets/images/default_profile.svg';
+import noCommentsImg from '@/assets/images/no_inquiries.svg';
 import commonStyles from '@/styles/helpers/commonHelpers.module.scss';
 import styles from './CommentList.module.scss';
 
@@ -44,34 +45,40 @@ const CommentList = ({ productId, refreshKey }) => {
 
   return (
     <div className={styles.commentContainer}>
-      {comments.map((comment) => (
-        <div key={comment.id} className={styles.commentList}>
-          <div className={styles.comment}>
-            <div className={styles.commentContent}>
-              <p>{comment.content}</p>
-              <div className={styles.writerInfo}>
-                <img
-                  src={comment.writer.image || defaultProfile}
-                  alt="Comment writer profile image"
-                />
-                <div className={styles.nicknameAndDate}>
-                  <div className={styles.nickname}>
-                    {comment.writer.nickname}
-                  </div>
-                  <div className={styles.date}>
-                    {relativeTime(comment.updatedAt)}
+      {comments.length === 0 ? (
+        <div className={styles.emptyCommentList}>
+          <img src={noCommentsImg} alt="No comments" />
+          <p className={styles.noCommentText}>아직 문의가 없어요</p>
+        </div>
+      ) : (
+        comments.map((comment) => (
+          <div key={comment.id} className={styles.commentList}>
+            <div className={styles.comment}>
+              <div className={styles.commentContent}>
+                <p>{comment.content}</p>
+                <div className={styles.writerInfo}>
+                  <img
+                    src={comment.writer.image || defaultProfile}
+                    alt="Comment writer profile image"
+                  />
+                  <div className={styles.nicknameAndDate}>
+                    <div className={styles.nickname}>
+                      {comment.writer.nickname}
+                    </div>
+                    <div className={styles.date}>
+                      {relativeTime(comment.updatedAt)}
+                    </div>
                   </div>
                 </div>
               </div>
+              <VerticalKebabDrop />
             </div>
-
-            <VerticalKebabDrop />
+            <div
+              className={`${commonStyles.horizontalLine} ${styles.addMargin}`}
+            />
           </div>
-          <div
-            className={`${commonStyles.horizontalLine} ${styles.addMargin}`}
-          />
-        </div>
-      ))}
+        ))
+      )}
       {/* 
       //TODO: Pagination 으로 구현 예정
       {nextCursor && (
@@ -79,7 +86,7 @@ const CommentList = ({ productId, refreshKey }) => {
           더보기
         </button>
       )} 
-       */}
+      */}
     </div>
   );
 };
diff --git a/src/components/Comment/CommentList/CommentList.module.scss b/src/components/Comment/CommentList/CommentList.module.scss
index 1ec45764..50a8d4ce 100644
--- a/src/components/Comment/CommentList/CommentList.module.scss
+++ b/src/components/Comment/CommentList/CommentList.module.scss
@@ -3,6 +3,20 @@
   flex-direction: column;
 }
 
+.emptyCommentList {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 0.8rem;
+  font-size: 1.6rem;
+  color: var(--secondary-400);
+  img {
+    width: 19.6rem;
+    aspect-ratio: 1 / 1;
+  }
+}
+
 .comment {
   display: flex;
   justify-content: space-between;

From bf1c573ebdf62961d5b0ba8d2d496e3a58dc6da2 Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Mon, 12 May 2025 21:38:40 +0900
Subject: [PATCH 15/25] feat: create CommentItem component and edit, delete
 comment logic

---
 .../Comment/CommentItem/CommentItem.jsx       | 119 ++++++++++++++++++
 .../CommentItem/CommentItem.module.scss       |  58 +++++++++
 src/components/Comment/CommentItem/index.js   |   1 +
 .../Comment/CommentList/CommentList.jsx       |  45 ++-----
 .../CommentList/CommentList.module.scss       |  38 ------
 src/components/Comment/index.js               |   1 +
 .../Product/ProductInfo/ProductInfo.jsx       |   6 +-
 .../VerticalKebabDrop/VerticalKebabDrop.jsx   |   4 +-
 src/constants/messages/comment.js             |   6 +
 src/constants/messages/index.js               |   1 +
 src/constants/urls/api.js                     |   1 +
 src/styles/helpers/buttonHelpers.module.scss  |   1 +
 12 files changed, 203 insertions(+), 78 deletions(-)
 create mode 100644 src/components/Comment/CommentItem/CommentItem.jsx
 create mode 100644 src/components/Comment/CommentItem/CommentItem.module.scss
 create mode 100644 src/components/Comment/CommentItem/index.js
 create mode 100644 src/constants/messages/comment.js

diff --git a/src/components/Comment/CommentItem/CommentItem.jsx b/src/components/Comment/CommentItem/CommentItem.jsx
new file mode 100644
index 00000000..f8170262
--- /dev/null
+++ b/src/components/Comment/CommentItem/CommentItem.jsx
@@ -0,0 +1,119 @@
+import { useState } from 'react';
+import { useToast } from '@/components/common';
+import { VerticalKebabDrop } from '@/components/common/Buttons';
+import { safeFetch } from '@/utils/api';
+import { relativeTime } from '@/utils/format';
+import { baseUrl, ENDPOINTS } from '@/constants/urls';
+import { COMMENT_ERROR_MESSAGES } from '@/constants/messages';
+import defaultProfile from '@/assets/images/default_profile.svg';
+import buttonStyles from '@/styles/helpers/buttonHelpers.module.scss';
+import formStyles from '@/styles/helpers/formHelpers.module.scss';
+import styles from './CommentItem.module.scss';
+
+const CommentItem = ({ comment, onUpdated }) => {
+  const { showToast } = useToast();
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedContent, setEditedContent] = useState(comment.content);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleSelect = (value) => {
+    if (value === 'edit') setIsEditing(true);
+    if (value === 'delete') handleDelete();
+  };
+
+  const handleUpdate = async () => {
+    const result = await safeFetch({
+      url: `${baseUrl}${ENDPOINTS.COMMENTS}/${comment.id}`,
+      options: {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content: editedContent }),
+      },
+      showToast,
+      uiErrorMessage: COMMENT_ERROR_MESSAGES.UPDATE_COMMENT_FAILED,
+    });
+
+    if (result) {
+      setIsEditing(false);
+      onUpdated(); // 부모에 갱신 요청
+    }
+  };
+
+  const handleDelete = async () => {
+    const confirmed = window.confirm('정말 이 댓글을 삭제하시겠습니까?');
+    if (!confirmed) return; //TODO: 모달로 변경
+
+    setIsDeleting(true);
+    const result = await safeFetch({
+      url: `${baseUrl}${ENDPOINTS.COMMENTS}/${comment.id}`,
+      options: {
+        method: 'DELETE',
+      },
+      showToast,
+      uiErrorMessage: COMMENT_ERROR_MESSAGES.DELETE_FAILED,
+    });
+    setIsDeleting(false);
+
+    if (result) {
+      onUpdated(); // 목록 갱신
+    }
+  };
+
+  return (
+    <div className={styles.commentItem}>
+      <div className={styles.commentContent}>
+        {isEditing ? (
+          <textarea
+            value={editedContent}
+            onChange={(e) => setEditedContent(e.target.value)}
+            className={formStyles.textarea}
+            rows={3}
+          />
+        ) : (
+          <p>{comment.content}</p>
+        )}
+
+        <div className={styles.commentInfo}>
+          <div className={styles.writerInfo}>
+            <img
+              src={comment.writer.image || defaultProfile}
+              alt="Comment writer profile"
+            />
+            <div className={styles.nicknameAndDate}>
+              <div className={styles.nickname}>{comment.writer.nickname}</div>
+              <div className={styles.date}>
+                {relativeTime(comment.updatedAt)}
+              </div>
+            </div>
+          </div>
+          {isEditing && (
+            <div className={styles.edit}>
+              <button
+                type="button"
+                className={buttonStyles.primary}
+                onClick={() => {
+                  setIsEditing(false);
+                  setEditedContent(comment.content);
+                }}
+              >
+                취소
+              </button>
+              <button
+                type="button"
+                className={buttonStyles.primary}
+                onClick={handleUpdate}
+                disabled={!editedContent.trim()}
+              >
+                수정 완료
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {!isEditing && <VerticalKebabDrop onSelect={handleSelect} />}
+    </div>
+  );
+};
+
+export default CommentItem;
diff --git a/src/components/Comment/CommentItem/CommentItem.module.scss b/src/components/Comment/CommentItem/CommentItem.module.scss
new file mode 100644
index 00000000..607e35c5
--- /dev/null
+++ b/src/components/Comment/CommentItem/CommentItem.module.scss
@@ -0,0 +1,58 @@
+.commentItem {
+  display: flex;
+  justify-content: space-between;
+  .commentContent {
+    display: flex;
+    flex-direction: column;
+    gap: 2.4rem;
+    width: 100%;
+
+    p {
+      font-size: 1.4rem;
+      font-weight: 400;
+    }
+
+    .commentInfo {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.2rem 0;
+      .writerInfo {
+        display: flex;
+        gap: 0.8rem;
+        width: 100%;
+        img {
+          width: 3.2rem;
+          aspect-ratio: 1 / 1;
+          border-radius: 50%;
+        }
+
+        .nicknameAndDate {
+          display: flex;
+          flex-direction: column;
+          gap: 0.4rem;
+          .nickname {
+            color: var(--secondary-600);
+          }
+          .date {
+            color: var(--secondary-400);
+          }
+        }
+      }
+    }
+  }
+}
+
+.edit {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 1.6rem;
+  width: 100%;
+
+  button {
+    padding: 0.8rem 2.3rem;
+    font-weight: 400;
+  }
+}
diff --git a/src/components/Comment/CommentItem/index.js b/src/components/Comment/CommentItem/index.js
new file mode 100644
index 00000000..454bae7e
--- /dev/null
+++ b/src/components/Comment/CommentItem/index.js
@@ -0,0 +1 @@
+export { default } from './CommentItem';
diff --git a/src/components/Comment/CommentList/CommentList.jsx b/src/components/Comment/CommentList/CommentList.jsx
index ca981132..95f6f8d9 100644
--- a/src/components/Comment/CommentList/CommentList.jsx
+++ b/src/components/Comment/CommentList/CommentList.jsx
@@ -1,11 +1,9 @@
 import { useEffect, useState } from 'react';
 import { useToast } from '@/components/common';
-import { VerticalKebabDrop } from '@/components/common/Buttons';
+import { CommentItem } from '@/components/Comment';
 import { safeFetch } from '@/utils/api';
-import { relativeTime } from '@/utils/format';
 import { baseUrl, ENDPOINTS } from '@/constants/urls';
 import { PRODUCT_ERROR_MESSAGES } from '@/constants/messages';
-import defaultProfile from '@/assets/images/default_profile.svg';
 import noCommentsImg from '@/assets/images/no_inquiries.svg';
 import commonStyles from '@/styles/helpers/commonHelpers.module.scss';
 import styles from './CommentList.module.scss';
@@ -28,8 +26,6 @@ const CommentList = ({ productId, refreshKey }) => {
       uiErrorMessage: PRODUCT_ERROR_MESSAGES.FETCH_COMMENTS_FAILED,
     });
 
-    console.log('댓글 목록', data);
-
     if (cursor) {
       setComments((prev) => [...prev, ...data.list]);
     } else {
@@ -39,9 +35,7 @@ const CommentList = ({ productId, refreshKey }) => {
     setNextCursor(data.nextCursor ?? null);
   };
 
-  const handleLoadMore = () => {
-    if (nextCursor) fetchComments(nextCursor);
-  };
+  console.log('comments', comments);
 
   return (
     <div className={styles.commentContainer}>
@@ -53,40 +47,23 @@ const CommentList = ({ productId, refreshKey }) => {
       ) : (
         comments.map((comment) => (
           <div key={comment.id} className={styles.commentList}>
-            <div className={styles.comment}>
-              <div className={styles.commentContent}>
-                <p>{comment.content}</p>
-                <div className={styles.writerInfo}>
-                  <img
-                    src={comment.writer.image || defaultProfile}
-                    alt="Comment writer profile image"
-                  />
-                  <div className={styles.nicknameAndDate}>
-                    <div className={styles.nickname}>
-                      {comment.writer.nickname}
-                    </div>
-                    <div className={styles.date}>
-                      {relativeTime(comment.updatedAt)}
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <VerticalKebabDrop />
-            </div>
+            <CommentItem comment={comment} onUpdated={fetchComments} />
             <div
               className={`${commonStyles.horizontalLine} ${styles.addMargin}`}
             />
           </div>
         ))
       )}
-      {/* 
-      //TODO: Pagination 으로 구현 예정
-      {nextCursor && (
-        <button className={styles.loadMoreButton} onClick={handleLoadMore}>
+
+      {/* 페이징 */}
+      {/* {nextCursor && (
+        <button
+          className={styles.loadMoreButton}
+          onClick={() => fetchComments(nextCursor)}
+        >
           더보기
         </button>
-      )} 
-      */}
+      )} */}
     </div>
   );
 };
diff --git a/src/components/Comment/CommentList/CommentList.module.scss b/src/components/Comment/CommentList/CommentList.module.scss
index 50a8d4ce..d9ccff3a 100644
--- a/src/components/Comment/CommentList/CommentList.module.scss
+++ b/src/components/Comment/CommentList/CommentList.module.scss
@@ -17,44 +17,6 @@
   }
 }
 
-.comment {
-  display: flex;
-  justify-content: space-between;
-  .commentContent {
-    display: flex;
-    flex-direction: column;
-    gap: 2.4rem;
-
-    p {
-      font-size: 1.4rem;
-      font-weight: 400;
-    }
-
-    .writerInfo {
-      display: flex;
-      align-items: center;
-      gap: 0.8rem;
-      img {
-        width: 3.2rem;
-        aspect-ratio: 1 / 1;
-        border-radius: 50%;
-      }
-
-      .nicknameAndDate {
-        display: flex;
-        flex-direction: column;
-        gap: 0.4rem;
-        .nickname {
-          color: var(--secondary-600);
-        }
-        .date {
-          color: var(--secondary-400);
-        }
-      }
-    }
-  }
-}
-
 .addMargin {
   margin: 2.4rem 0;
 }
diff --git a/src/components/Comment/index.js b/src/components/Comment/index.js
index f3dd2653..7bac7654 100644
--- a/src/components/Comment/index.js
+++ b/src/components/Comment/index.js
@@ -1,2 +1,3 @@
 export { default as CommentInput } from './CommentInput';
 export { default as CommentList } from './CommentList';
+export { default as CommentItem } from './CommentItem';
diff --git a/src/components/Product/ProductInfo/ProductInfo.jsx b/src/components/Product/ProductInfo/ProductInfo.jsx
index b28a0383..0f85d50b 100644
--- a/src/components/Product/ProductInfo/ProductInfo.jsx
+++ b/src/components/Product/ProductInfo/ProductInfo.jsx
@@ -14,11 +14,9 @@ const ProductInfo = ({
   favoriteCount,
   ownerNickname,
   updatedAt,
-  onMenuSelect, //TODO: 구현 예정
+  onSelect, //TODO: 구현 예정
 }) => {
-  const handleMenuSelect = (value) => {
-    if (onMenuSelect) onMenuSelect(value);
-  };
+  const handleSelect = (value) => {};
 
   return (
     <div className={styles.productContainer}>
diff --git a/src/components/common/Buttons/VerticalKebabDrop/VerticalKebabDrop.jsx b/src/components/common/Buttons/VerticalKebabDrop/VerticalKebabDrop.jsx
index 8965d4eb..7e3332d2 100644
--- a/src/components/common/Buttons/VerticalKebabDrop/VerticalKebabDrop.jsx
+++ b/src/components/common/Buttons/VerticalKebabDrop/VerticalKebabDrop.jsx
@@ -2,7 +2,7 @@ import { DropdownBtn } from '@/components/common/Buttons';
 import kebabIcon from '@/assets/icons/vertical_kebab.svg';
 import styles from './VerticalKebabDrop.module.scss';
 
-const VerticalKebabDrop = () => {
+const VerticalKebabDrop = ({ onSelect }) => {
   const options = [
     { label: '수정하기', value: 'edit' },
     { label: '삭제하기', value: 'delete' },
@@ -15,7 +15,7 @@ const VerticalKebabDrop = () => {
       options={options}
       buttonClassName={styles.kebabButton}
       optionListClassName={styles.optionList}
-      // onSelect={onChange}
+      onSelect={onSelect}
     />
   );
 };
diff --git a/src/constants/messages/comment.js b/src/constants/messages/comment.js
new file mode 100644
index 00000000..d6b0d6ec
--- /dev/null
+++ b/src/constants/messages/comment.js
@@ -0,0 +1,6 @@
+export const COMMENT_ERROR_MESSAGES = {
+  FETCH_COMMENTS_FAILED: '댓글 목록을 가져오는 데 실패했습니다.',
+  POST_COMMENT_FAILED: '댓글 등록에 실패했습니다.',
+  DELETE_COMMENT_FAILED: '댓글 삭제에 실패했습니다.',
+  UPDATE_COMMENT_FAILED: '댓글 수정에 실패했습니다.',
+};
diff --git a/src/constants/messages/index.js b/src/constants/messages/index.js
index d025c8ff..10cb628e 100644
--- a/src/constants/messages/index.js
+++ b/src/constants/messages/index.js
@@ -5,3 +5,4 @@ export {
   PRODUCT_SUCCESS_MESSAGES,
 } from './product';
 export { HTTP_ERROR_MESSAGES } from './common';
+export { COMMENT_ERROR_MESSAGES } from './comment';
diff --git a/src/constants/urls/api.js b/src/constants/urls/api.js
index 569b44f3..aa65c768 100644
--- a/src/constants/urls/api.js
+++ b/src/constants/urls/api.js
@@ -2,5 +2,6 @@ export const baseUrl = import.meta.env.VITE_BASE_URL;
 
 export const ENDPOINTS = {
   PRODUCTS: '/products',
+  COMMENTS: '/comments',
   UPLOAD_IMAGE: '/images/upload',
 };
diff --git a/src/styles/helpers/buttonHelpers.module.scss b/src/styles/helpers/buttonHelpers.module.scss
index 0ce341b4..a2e9756a 100644
--- a/src/styles/helpers/buttonHelpers.module.scss
+++ b/src/styles/helpers/buttonHelpers.module.scss
@@ -6,6 +6,7 @@
   border: none;
   font-weight: 600;
   transition: background-color 0.2s ease;
+  width: fit-content;
 
   &:hover {
     background-color: var(--primary-200);

From f2370c646e786ea5849c5d45ce65dc2416eda4ee Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Mon, 12 May 2025 22:38:51 +0900
Subject: [PATCH 16/25] feat: create UserContext

---
 .../Comment/CommentInput/CommentInput.jsx      |  2 +-
 .../Comment/CommentItem/CommentItem.jsx        |  2 +-
 .../Comment/CommentList/CommentList.jsx        |  2 +-
 .../AllProductSection/AllProductSection.jsx    |  3 ++-
 .../BestProductSection/BestProductSection.jsx  |  2 +-
 src/components/common/Toast/index.js           |  1 -
 src/components/common/index.js                 |  2 +-
 src/contexts/ModalContext.jsx                  |  0
 src/contexts/ThemeContext.jsx                  |  0
 .../ToastContext.jsx}                          |  4 ++--
 src/contexts/UserContext.jsx                   |  7 +++++++
 src/contexts/index.js                          |  2 ++
 src/main.jsx                                   | 18 ++++++++++++++----
 src/pages/AddItem/AddItem.jsx                  |  2 +-
 src/pages/ProductDetail/ProductDetail.jsx      |  2 +-
 15 files changed, 34 insertions(+), 15 deletions(-)
 create mode 100644 src/contexts/ModalContext.jsx
 create mode 100644 src/contexts/ThemeContext.jsx
 rename src/{components/common/Toast/ToastProvider.jsx => contexts/ToastContext.jsx} (87%)
 create mode 100644 src/contexts/UserContext.jsx
 create mode 100644 src/contexts/index.js

diff --git a/src/components/Comment/CommentInput/CommentInput.jsx b/src/components/Comment/CommentInput/CommentInput.jsx
index 06ecc558..7f6b70fb 100644
--- a/src/components/Comment/CommentInput/CommentInput.jsx
+++ b/src/components/Comment/CommentInput/CommentInput.jsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useToast } from '@/components/common';
+import { useToast } from '@/contexts';
 import { safeFetch } from '@/utils/api';
 import { baseUrl, ENDPOINTS } from '@/constants/urls';
 import { PRODUCT_ERROR_MESSAGES } from '@/constants/messages';
diff --git a/src/components/Comment/CommentItem/CommentItem.jsx b/src/components/Comment/CommentItem/CommentItem.jsx
index f8170262..201a61b9 100644
--- a/src/components/Comment/CommentItem/CommentItem.jsx
+++ b/src/components/Comment/CommentItem/CommentItem.jsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useToast } from '@/components/common';
+import { useToast } from '@/contexts';
 import { VerticalKebabDrop } from '@/components/common/Buttons';
 import { safeFetch } from '@/utils/api';
 import { relativeTime } from '@/utils/format';
diff --git a/src/components/Comment/CommentList/CommentList.jsx b/src/components/Comment/CommentList/CommentList.jsx
index 95f6f8d9..bad18994 100644
--- a/src/components/Comment/CommentList/CommentList.jsx
+++ b/src/components/Comment/CommentList/CommentList.jsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useToast } from '@/components/common';
+import { useToast } from '@/contexts';
 import { CommentItem } from '@/components/Comment';
 import { safeFetch } from '@/utils/api';
 import { baseUrl, ENDPOINTS } from '@/constants/urls';
diff --git a/src/components/Product/AllProductSection/AllProductSection.jsx b/src/components/Product/AllProductSection/AllProductSection.jsx
index ba7900ce..e891d21c 100644
--- a/src/components/Product/AllProductSection/AllProductSection.jsx
+++ b/src/components/Product/AllProductSection/AllProductSection.jsx
@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useResponsivePageSize } from '@/hooks';
-import { Pagination, useToast } from '@/components/common';
+import { useToast } from '@/contexts';
+import { Pagination } from '@/components/common';
 import { SortDrop } from '@/components/common/Buttons';
 import { ProductCard } from '@/components/Product';
 import { safeFetch } from '@/utils/api';
diff --git a/src/components/Product/BestProductSection/BestProductSection.jsx b/src/components/Product/BestProductSection/BestProductSection.jsx
index 15e01511..b3a9f4a4 100644
--- a/src/components/Product/BestProductSection/BestProductSection.jsx
+++ b/src/components/Product/BestProductSection/BestProductSection.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
+import { useToast } from '@/contexts';
 import { ProductCard } from '@/components/Product';
-import { useToast } from '@/components/common';
 import { safeFetch } from '@/utils/api';
 import { baseUrl, ENDPOINTS } from '@/constants/urls';
 import { PRODUCT_ERROR_MESSAGES } from '@/constants/messages';
diff --git a/src/components/common/Toast/index.js b/src/components/common/Toast/index.js
index 3fb257fe..55a859a0 100644
--- a/src/components/common/Toast/index.js
+++ b/src/components/common/Toast/index.js
@@ -1,2 +1 @@
-export { useToast, ToastProvider } from './ToastProvider';
 export { default } from './Toast';
diff --git a/src/components/common/index.js b/src/components/common/index.js
index 5a77e4ac..fbe8cf6b 100644
--- a/src/components/common/index.js
+++ b/src/components/common/index.js
@@ -2,4 +2,4 @@ export { default as Header } from './Header';
 export { default as Footer } from './Footer';
 export { default as Logo } from './Logo';
 export { default as Pagination } from './Pagination';
-export { useToast, ToastProvider, default as Toast } from './Toast';
+export { default as Toast } from './Toast';
diff --git a/src/contexts/ModalContext.jsx b/src/contexts/ModalContext.jsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/contexts/ThemeContext.jsx b/src/contexts/ThemeContext.jsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/common/Toast/ToastProvider.jsx b/src/contexts/ToastContext.jsx
similarity index 87%
rename from src/components/common/Toast/ToastProvider.jsx
rename to src/contexts/ToastContext.jsx
index 08727a5f..b525ff7b 100644
--- a/src/components/common/Toast/ToastProvider.jsx
+++ b/src/contexts/ToastContext.jsx
@@ -1,6 +1,6 @@
 import { createContext, useContext, useState } from 'react';
-import Toast from './Toast';
-import styles from './Toast.module.scss';
+import { Toast } from '@/components/common';
+import styles from '@/components/common/Toast/Toast.module.scss';
 
 const ToastContext = createContext();
 
diff --git a/src/contexts/UserContext.jsx b/src/contexts/UserContext.jsx
new file mode 100644
index 00000000..b7c672e1
--- /dev/null
+++ b/src/contexts/UserContext.jsx
@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+
+export const UserContext = createContext(null);
+export const useUser = () => useContext(UserContext);
+export const UserProvider = ({ children, user }) => {
+  return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
+};
diff --git a/src/contexts/index.js b/src/contexts/index.js
new file mode 100644
index 00000000..03383441
--- /dev/null
+++ b/src/contexts/index.js
@@ -0,0 +1,2 @@
+export { useToast, ToastProvider } from './ToastContext';
+export { useUser, UserProvider } from './UserContext';
diff --git a/src/main.jsx b/src/main.jsx
index c8e5bd0f..8075fb69 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -2,17 +2,27 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import AppRoutes from '@/routes';
-import { ToastProvider } from '@/components/common/Toast';
+import { ToastProvider, UserProvider } from '@/contexts';
 import '@/styles/common/index.css';
 
 const root = document.getElementById('root');
 
+const mockUser = {
+  id: 1,
+  nickname: 'sienna',
+  image: '/images/sienna-profile.png',
+  updatedAt: '2025-05-12T13:05:18.035Z',
+  createdAt: '2025-05-12T13:05:18.035Z',
+};
+
 createRoot(root).render(
   <StrictMode>
     <BrowserRouter>
-      <ToastProvider>
-        <AppRoutes />
-      </ToastProvider>
+      <UserProvider user={mockUser}>
+        <ToastProvider>
+          <AppRoutes />
+        </ToastProvider>
+      </UserProvider>
     </BrowserRouter>
   </StrictMode>,
 );
diff --git a/src/pages/AddItem/AddItem.jsx b/src/pages/AddItem/AddItem.jsx
index 249c4d05..ba37ff0a 100644
--- a/src/pages/AddItem/AddItem.jsx
+++ b/src/pages/AddItem/AddItem.jsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useAddItemForm } from '@/hooks';
+import { useToast } from '@/contexts';
 import { ImageUploader, TagInput, AddItemForm } from '@/components/AddItem';
-import { useToast } from '@/components/common/Toast';
 import { addItemValidation } from '@/utils/validators';
 import { safeFetch } from '@/utils/api';
 import { baseUrl, ENDPOINTS } from '@/constants/urls';
diff --git a/src/pages/ProductDetail/ProductDetail.jsx b/src/pages/ProductDetail/ProductDetail.jsx
index 51e815b8..f7bbe6ee 100644
--- a/src/pages/ProductDetail/ProductDetail.jsx
+++ b/src/pages/ProductDetail/ProductDetail.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useParams, Link } from 'react-router-dom';
-import { useToast } from '@/components/common';
+import { useToast } from '@/contexts';
 import { CommentInput, CommentList } from '@/components/Comment';
 import { ProductInfo } from '@/components/Product';
 import { safeFetch } from '@/utils/api';

From cb173de31ca2422e3e5fa5df6c304979104561e1 Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Mon, 12 May 2025 23:40:26 +0900
Subject: [PATCH 17/25] refactor: remove Toast on safe fetch function

---
 .../Product/ProductInfo/ProductInfo.jsx       | 12 ++++--
 src/contexts/ToastContext.jsx                 |  2 +
 src/pages/ProductDetail/ProductDetail.jsx     |  6 +--
 src/utils/api/safeFetch.js                    | 38 ++-----------------
 4 files changed, 16 insertions(+), 42 deletions(-)

diff --git a/src/components/Product/ProductInfo/ProductInfo.jsx b/src/components/Product/ProductInfo/ProductInfo.jsx
index 0f85d50b..96beafbd 100644
--- a/src/components/Product/ProductInfo/ProductInfo.jsx
+++ b/src/components/Product/ProductInfo/ProductInfo.jsx
@@ -1,3 +1,4 @@
+import { useUser } from '@/contexts';
 import { FavoriteBtn, VerticalKebabDrop } from '@/components/common/Buttons';
 import { isoDate } from '@/utils/format';
 import defaultProfileImg from '@/assets/images/default_profile.svg';
@@ -10,12 +11,13 @@ const ProductInfo = ({
   name,
   description,
   price,
-  tags,
+  tags = [],
   favoriteCount,
   ownerNickname,
   updatedAt,
   onSelect, //TODO: 구현 예정
 }) => {
+  const currentUser = useUser(); // 지금 로그인한 사용자
   const handleSelect = (value) => {};
 
   return (
@@ -30,7 +32,7 @@ const ProductInfo = ({
               <h2>{name}</h2>
               <VerticalKebabDrop />
             </div>
-            <p className={styles.price}>{price.toLocaleString()}원</p>
+            <p className={styles.price}>{price?.toLocaleString()}원</p>
             <div className={commonStyles.horizontalLine} />
           </div>
           <div className={styles.infoLabel}>
@@ -50,7 +52,11 @@ const ProductInfo = ({
         </div>
         <div className={styles.productPostInfo}>
           <div className={styles.writerInfo}>
-            <img src={defaultProfileImg} alt="Writer Profile Image" />
+            <img
+              src={defaultProfileImg}
+              // src={currentUser?.image || defaultProfileImg}  로그인 처리 후
+              alt="Writer Profile Image"
+            />
             <div className={styles.nicknameAndDate}>
               <div className={styles.nickname}>{ownerNickname}</div>
               <div className={styles.date}>{isoDate(updatedAt)}</div>
diff --git a/src/contexts/ToastContext.jsx b/src/contexts/ToastContext.jsx
index b525ff7b..7dbb195b 100644
--- a/src/contexts/ToastContext.jsx
+++ b/src/contexts/ToastContext.jsx
@@ -10,6 +10,8 @@ export const ToastProvider = ({ children }) => {
   const [toasts, setToasts] = useState([]);
 
   const showToast = (message, type = 'info') => {
+    if (toasts.some((toast) => toast.message === message)) return;
+
     const id = Date.now();
     setToasts((prev) => [...prev, { id, message, type }]);
 
diff --git a/src/pages/ProductDetail/ProductDetail.jsx b/src/pages/ProductDetail/ProductDetail.jsx
index f7bbe6ee..261b7a84 100644
--- a/src/pages/ProductDetail/ProductDetail.jsx
+++ b/src/pages/ProductDetail/ProductDetail.jsx
@@ -15,7 +15,7 @@ const ProductDetail = () => {
   const { showToast } = useToast();
   console.log('useParams에 어떻게 출력되나', useParams());
   const { productId } = useParams();
-  const [product, setProduct] = useState(null);
+  const [product, setProduct] = useState(undefined);
   console.log('product', product);
   const [refreshKey, setRefreshKey] = useState(0);
 
@@ -31,12 +31,10 @@ const ProductDetail = () => {
     };
 
     fetchProduct();
-  }, [productId, showToast]);
+  }, [productId]);
 
   const refreshAfterSubmit = () => setRefreshKey((prev) => prev + 1);
 
-  if (!product) return <div>Loading...</div>; //TODO: 로딩처리
-
   return (
     <div className={styles.productDetail}>
       <ProductInfo {...product} />
diff --git a/src/utils/api/safeFetch.js b/src/utils/api/safeFetch.js
index a86809aa..bec75a20 100644
--- a/src/utils/api/safeFetch.js
+++ b/src/utils/api/safeFetch.js
@@ -1,19 +1,13 @@
-import HTTP_STATUS from '@/constants/statusCodes';
 import { HTTP_ERROR_MESSAGES } from '@/constants/messages';
 
-const safeFetch = async ({
-  url,
-  options,
-  showToast,
-  showToastOnError = true,
-  uiErrorMessage = HTTP_ERROR_MESSAGES.UNKNOWN,
-}) => {
+const safeFetch = async ({ url, options }) => {
   try {
     const res = await fetch(url, options);
 
     if (!res.ok) {
       const errorData = await res.json().catch(() => ({}));
-      const message = errorData.message || uiErrorMessage;
+      const message = errorData.message || HTTP_ERROR_MESSAGES.UNKNOWN;
+
       const error = new Error(message);
       error.status = res.status;
       throw error;
@@ -21,37 +15,11 @@ const safeFetch = async ({
 
     return await res.json();
   } catch (error) {
-    // 콘솔 에러: 개발자용
     console.error(
       `🔴 요청 에러 [${error.status ?? 'unknown'}]:`,
       error.message,
     );
 
-    // 에러 메시지: 사용자용
-    if (showToast && showToastOnError) {
-      let toastMessage = '';
-
-      switch (error.status) {
-        case HTTP_STATUS.UNAUTHORIZED:
-          toastMessage = HTTP_ERROR_MESSAGES.UNAUTHORIZED;
-          break;
-        case HTTP_STATUS.FORBIDDEN:
-          toastMessage = HTTP_ERROR_MESSAGES.FORBIDDEN;
-          break;
-        case HTTP_STATUS.NOT_FOUND:
-          toastMessage = HTTP_ERROR_MESSAGES.NOT_FOUND;
-          break;
-        default:
-          if (error.status >= 500) {
-            toastMessage = HTTP_ERROR_MESSAGES.SERVER_ERROR;
-          } else {
-            toastMessage = error.message || uiErrorMessage;
-          }
-      }
-
-      showToast(toastMessage, 'error');
-    }
-
     throw error;
   }
 };

From 15e1ef400c7e15732ebba0607a313cabfcb0fd4d Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Tue, 13 May 2025 00:27:17 +0900
Subject: [PATCH 18/25] feat: split error message handlers by HTTP method and
 resource type

---
 src/pages/ProductDetail/ProductDetail.jsx     | 18 +++--
 src/utils/errorMessage/commentErrorMessage.js | 73 +++++++++++++++++++
 src/utils/errorMessage/index.js               | 12 +++
 src/utils/errorMessage/productErrorMessage.js | 71 ++++++++++++++++++
 4 files changed, 166 insertions(+), 8 deletions(-)
 create mode 100644 src/utils/errorMessage/commentErrorMessage.js
 create mode 100644 src/utils/errorMessage/index.js
 create mode 100644 src/utils/errorMessage/productErrorMessage.js

diff --git a/src/pages/ProductDetail/ProductDetail.jsx b/src/pages/ProductDetail/ProductDetail.jsx
index 261b7a84..acc4cb05 100644
--- a/src/pages/ProductDetail/ProductDetail.jsx
+++ b/src/pages/ProductDetail/ProductDetail.jsx
@@ -4,8 +4,8 @@ import { useToast } from '@/contexts';
 import { CommentInput, CommentList } from '@/components/Comment';
 import { ProductInfo } from '@/components/Product';
 import { safeFetch } from '@/utils/api';
+import { getProductErrorMessage } from '@/utils/errorMessage/productErrorMessage';
 import { baseUrl, ENDPOINTS, ROUTES } from '@/constants/urls';
-import { PRODUCT_ERROR_MESSAGES } from '@/constants/messages';
 import arrowBackIcon from '@/assets/icons/arrow_back.svg';
 import commonStyles from '@/styles/helpers/commonHelpers.module.scss';
 import buttonStyles from '@/styles/helpers/buttonHelpers.module.scss';
@@ -21,13 +21,15 @@ const ProductDetail = () => {
 
   useEffect(() => {
     const fetchProduct = async () => {
-      const data = await safeFetch({
-        url: `${baseUrl}${ENDPOINTS.PRODUCTS}/${productId}`,
-        options: { method: 'GET' },
-        showToast,
-        uiErrorMessage: PRODUCT_ERROR_MESSAGES.FETCH_DETAIL_FAILED,
-      });
-      setProduct(data);
+      try {
+        const data = await safeFetch({
+          url: `${baseUrl}${ENDPOINTS.PRODUCTS}/${productId}`,
+          options: { method: 'GET' },
+        });
+        setProduct(data);
+      } catch (error) {
+        showToast(getProductErrorMessage(error.status), 'error');
+      }
     };
 
     fetchProduct();
diff --git a/src/utils/errorMessage/commentErrorMessage.js b/src/utils/errorMessage/commentErrorMessage.js
new file mode 100644
index 00000000..5529e429
--- /dev/null
+++ b/src/utils/errorMessage/commentErrorMessage.js
@@ -0,0 +1,73 @@
+import HTTP_STATUS from '@/constants/statusCodes';
+
+export const getCommentErrorMessage = (status) => {
+  switch (status) {
+    case HTTP_STATUS.UNAUTHORIZED:
+      return '로그인이 필요합니다.';
+    case HTTP_STATUS.FORBIDDEN:
+      return '이 댓글을 볼 권한이 없어요.';
+    case HTTP_STATUS.NOT_FOUND:
+      return '등록된 문의가 없습니다.';
+    case HTTP_STATUS.INTERNAL_SERVER_ERROR:
+    case 502:
+    case HTTP_STATUS.SERVICE_UNAVAILABLE:
+    case 504:
+      return '서버에 문제가 발생했어요. 잠시 후 다시 시도해주세요.';
+    default:
+      return '댓글을 불러오는 데 실패했어요.';
+  }
+};
+
+export default getCommentErrorMessage;
+
+export const postCommentErrorMessage = (status) => {
+  switch (status) {
+    case HTTP_STATUS.UNAUTHORIZED:
+      return '로그인이 필요합니다.';
+    case HTTP_STATUS.FORBIDDEN:
+      return '댓글을 등록할 권한이 없어요.';
+    case HTTP_STATUS.INTERNAL_SERVER_ERROR:
+    case 502:
+    case HTTP_STATUS.SERVICE_UNAVAILABLE:
+    case 504:
+      return '서버에 문제가 발생했어요. 잠시 후 다시 시도해주세요.';
+    default:
+      return '댓글을 등록하는 데 실패했어요.';
+  }
+};
+
+export const patchCommentErrorMessage = (status) => {
+  switch (status) {
+    case HTTP_STATUS.UNAUTHORIZED:
+      return '로그인이 필요합니다.';
+    case HTTP_STATUS.FORBIDDEN:
+      return '이 댓글을 수정할 권한이 없어요.';
+    case HTTP_STATUS.NOT_FOUND:
+      return '수정할 댓글을 찾을 수 없어요.';
+    case HTTP_STATUS.INTERNAL_SERVER_ERROR:
+    case 502:
+    case HTTP_STATUS.SERVICE_UNAVAILABLE:
+    case 504:
+      return '서버에 문제가 발생했어요. 잠시 후 다시 시도해주세요.';
+    default:
+      return '댓글을 수정하는 데 실패했어요.';
+  }
+};
+
+export const deleteCommentErrorMessage = (status) => {
+  switch (status) {
+    case HTTP_STATUS.UNAUTHORIZED:
+      return '로그인이 필요합니다.';
+    case HTTP_STATUS.FORBIDDEN:
+      return '이 댓글을 삭제할 권한이 없어요.';
+    case HTTP_STATUS.NOT_FOUND:
+      return '삭제할 댓글을 찾을 수 없어요.';
+    case HTTP_STATUS.INTERNAL_SERVER_ERROR:
+    case 502:
+    case HTTP_STATUS.SERVICE_UNAVAILABLE:
+    case 504:
+      return '서버에 문제가 발생했어요. 잠시 후 다시 시도해주세요.';
+    default:
+      return '댓글을 삭제하는 데 실패했어요.';
+  }
+};
diff --git a/src/utils/errorMessage/index.js b/src/utils/errorMessage/index.js
new file mode 100644
index 00000000..3a9c46e1
--- /dev/null
+++ b/src/utils/errorMessage/index.js
@@ -0,0 +1,12 @@
+export {
+  getProductErrorMessage,
+  postProductErrorMessage,
+  patchProductErrorMessage,
+  deleteProductErrorMessage,
+} from './productErrorMessage';
+export {
+  getCommentErrorMessage,
+  postCommentErrorMessage,
+  patchCommentErrorMessage,
+  deleteCommentErrorMessage,
+} from './commentErrorMessage';
diff --git a/src/utils/errorMessage/productErrorMessage.js b/src/utils/errorMessage/productErrorMessage.js
new file mode 100644
index 00000000..840d180e
--- /dev/null
+++ b/src/utils/errorMessage/productErrorMessage.js
@@ -0,0 +1,71 @@
+import HTTP_STATUS from '@/constants/statusCodes';
+
+export const getProductErrorMessage = (status) => {
+  switch (status) {
+    case HTTP_STATUS.UNAUTHORIZED:
+      return '로그인이 필요합니다.';
+    case HTTP_STATUS.FORBIDDEN:
+      return '이 상품을 볼 권한이 없어요.';
+    case HTTP_STATUS.NOT_FOUND:
+      return '해당 상품은 삭제되었어요.';
+    case HTTP_STATUS.INTERNAL_SERVER_ERROR:
+    case 502:
+    case HTTP_STATUS.SERVICE_UNAVAILABLE:
+    case 504:
+      return '서버에 문제가 발생했어요. 잠시 후 다시 시도해주세요.';
+    default:
+      return '상품 정보를 불러오는 데 실패했어요.';
+  }
+};
+
+export const postProductErrorMessage = (status) => {
+  switch (status) {
+    case HTTP_STATUS.UNAUTHORIZED:
+      return '로그인이 필요합니다.';
+    case HTTP_STATUS.FORBIDDEN:
+      return '상품을 등록할 권한이 없어요.';
+    case HTTP_STATUS.INTERNAL_SERVER_ERROR:
+    case 502:
+    case HTTP_STATUS.SERVICE_UNAVAILABLE:
+    case 504:
+      return '서버에 문제가 발생했어요. 잠시 후 다시 시도해주세요.';
+    default:
+      return '상품을 등록하는 데 실패했어요.';
+  }
+};
+
+export const patchProductErrorMessage = (status) => {
+  switch (status) {
+    case HTTP_STATUS.UNAUTHORIZED:
+      return '로그인이 필요합니다.';
+    case HTTP_STATUS.FORBIDDEN:
+      return '상품을 수정할 권한이 없어요.';
+    case HTTP_STATUS.NOT_FOUND:
+      return '수정할 상품을 찾을 수 없어요.';
+    case HTTP_STATUS.INTERNAL_SERVER_ERROR:
+    case 502:
+    case HTTP_STATUS.SERVICE_UNAVAILABLE:
+    case 504:
+      return '서버에 문제가 발생했어요. 잠시 후 다시 시도해주세요.';
+    default:
+      return '상품을 수정하는 데 실패했어요.';
+  }
+};
+
+export const deleteProductErrorMessage = (status) => {
+  switch (status) {
+    case HTTP_STATUS.UNAUTHORIZED:
+      return '로그인이 필요합니다.';
+    case HTTP_STATUS.FORBIDDEN:
+      return '상품을 삭제할 권한이 없어요.';
+    case HTTP_STATUS.NOT_FOUND:
+      return '삭제할 상품을 찾을 수 없어요.';
+    case HTTP_STATUS.INTERNAL_SERVER_ERROR:
+    case 502:
+    case HTTP_STATUS.SERVICE_UNAVAILABLE:
+    case 504:
+      return '서버에 문제가 발생했어요. 잠시 후 다시 시도해주세요.';
+    default:
+      return '상품을 삭제하는 데 실패했어요.';
+  }
+};

From c200e81493bd7aa47fa873bcb03c3dc97d943774 Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Tue, 13 May 2025 00:38:25 +0900
Subject: [PATCH 19/25] refactor: apply status-based error messages to all
 product-related fetch requests

---
 .../Comment/CommentInput/CommentInput.jsx     | 28 +++++-----
 .../Comment/CommentItem/CommentItem.jsx       | 53 ++++++++++---------
 .../Comment/CommentList/CommentList.jsx       | 31 +++++------
 .../AllProductSection/AllProductSection.jsx   | 20 ++++---
 .../BestProductSection/BestProductSection.jsx | 20 +++----
 src/pages/AddItem/AddItem.jsx                 | 37 ++++++-------
 6 files changed, 101 insertions(+), 88 deletions(-)

diff --git a/src/components/Comment/CommentInput/CommentInput.jsx b/src/components/Comment/CommentInput/CommentInput.jsx
index 7f6b70fb..30e25f94 100644
--- a/src/components/Comment/CommentInput/CommentInput.jsx
+++ b/src/components/Comment/CommentInput/CommentInput.jsx
@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { useToast } from '@/contexts';
 import { safeFetch } from '@/utils/api';
+import { postCommentErrorMessage } from '@/utils/errorMessage';
 import { baseUrl, ENDPOINTS } from '@/constants/urls';
-import { PRODUCT_ERROR_MESSAGES } from '@/constants/messages';
 import formStyles from '@/styles/helpers/formHelpers.module.scss';
 import buttonStyles from '@/styles/helpers/buttonHelpers.module.scss';
 import styles from './CommentInput.module.scss';
@@ -14,19 +14,21 @@ const CommentInput = ({ productId, refreshAfterSubmit }) => {
   const handleSubmit = async () => {
     if (!content.trim()) return;
 
-    await safeFetch({
-      url: `${baseUrl}${ENDPOINTS.PRODUCTS}/${productId}/comments`,
-      options: {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ content }),
-      },
-      showToast,
-      uiErrorMessage: PRODUCT_ERROR_MESSAGES.POST_COMMENT_FAILED,
-    });
+    try {
+      await safeFetch({
+        url: `${baseUrl}${ENDPOINTS.PRODUCTS}/${productId}/comments`,
+        options: {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ content }),
+        },
+      });
 
-    setContent('');
-    refreshAfterSubmit(); // 등록 후 댓글 목록 새로고침
+      setContent('');
+      refreshAfterSubmit(); // 등록 후 댓글 목록 새로고침
+    } catch (error) {
+      showToast(postCommentErrorMessage(error.status), 'error');
+    }
   };
 
   return (
diff --git a/src/components/Comment/CommentItem/CommentItem.jsx b/src/components/Comment/CommentItem/CommentItem.jsx
index 201a61b9..63360719 100644
--- a/src/components/Comment/CommentItem/CommentItem.jsx
+++ b/src/components/Comment/CommentItem/CommentItem.jsx
@@ -3,8 +3,11 @@ import { useToast } from '@/contexts';
 import { VerticalKebabDrop } from '@/components/common/Buttons';
 import { safeFetch } from '@/utils/api';
 import { relativeTime } from '@/utils/format';
+import {
+  deleteCommentErrorMessage,
+  patchCommentErrorMessage,
+} from '@/utils/errorMessage';
 import { baseUrl, ENDPOINTS } from '@/constants/urls';
-import { COMMENT_ERROR_MESSAGES } from '@/constants/messages';
 import defaultProfile from '@/assets/images/default_profile.svg';
 import buttonStyles from '@/styles/helpers/buttonHelpers.module.scss';
 import formStyles from '@/styles/helpers/formHelpers.module.scss';
@@ -22,40 +25,40 @@ const CommentItem = ({ comment, onUpdated }) => {
   };
 
   const handleUpdate = async () => {
-    const result = await safeFetch({
-      url: `${baseUrl}${ENDPOINTS.COMMENTS}/${comment.id}`,
-      options: {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ content: editedContent }),
-      },
-      showToast,
-      uiErrorMessage: COMMENT_ERROR_MESSAGES.UPDATE_COMMENT_FAILED,
-    });
+    try {
+      await safeFetch({
+        url: `${baseUrl}${ENDPOINTS.COMMENTS}/${comment.id}`,
+        options: {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ content: editedContent }),
+        },
+      });
 
-    if (result) {
       setIsEditing(false);
       onUpdated(); // 부모에 갱신 요청
+    } catch (error) {
+      showToast(patchCommentErrorMessage(error.status), 'error');
     }
   };
-
   const handleDelete = async () => {
-    const confirmed = window.confirm('정말 이 댓글을 삭제하시겠습니까?');
-    if (!confirmed) return; //TODO: 모달로 변경
+    const confirmed = window.confirm('정말 이 댓글을 삭제하시겠습니까?'); //TODO: 모달로 변경
+    if (!confirmed) return;
 
     setIsDeleting(true);
-    const result = await safeFetch({
-      url: `${baseUrl}${ENDPOINTS.COMMENTS}/${comment.id}`,
-      options: {
-        method: 'DELETE',
-      },
-      showToast,
-      uiErrorMessage: COMMENT_ERROR_MESSAGES.DELETE_FAILED,
-    });
-    setIsDeleting(false);
+    try {
+      await safeFetch({
+        url: `${baseUrl}${ENDPOINTS.COMMENTS}/${comment.id}`,
+        options: {
+          method: 'DELETE',
+        },
+      });
 
-    if (result) {
       onUpdated(); // 목록 갱신
+    } catch (error) {
+      showToast(deleteCommentErrorMessage(error.status), 'error');
+    } finally {
+      setIsDeleting(false);
     }
   };
 
diff --git a/src/components/Comment/CommentList/CommentList.jsx b/src/components/Comment/CommentList/CommentList.jsx
index bad18994..6763d7d4 100644
--- a/src/components/Comment/CommentList/CommentList.jsx
+++ b/src/components/Comment/CommentList/CommentList.jsx
@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react';
 import { useToast } from '@/contexts';
 import { CommentItem } from '@/components/Comment';
 import { safeFetch } from '@/utils/api';
+import { getCommentErrorMessage } from '@/utils/errorMessage';
 import { baseUrl, ENDPOINTS } from '@/constants/urls';
-import { PRODUCT_ERROR_MESSAGES } from '@/constants/messages';
 import noCommentsImg from '@/assets/images/no_inquiries.svg';
 import commonStyles from '@/styles/helpers/commonHelpers.module.scss';
 import styles from './CommentList.module.scss';
@@ -19,23 +19,24 @@ const CommentList = ({ productId, refreshKey }) => {
 
   const fetchComments = async (cursor) => {
     const cursorQuery = cursor ? `&cursor=${cursor}` : '';
-    const data = await safeFetch({
-      url: `${baseUrl}${ENDPOINTS.PRODUCTS}/${productId}/comments?limit=10${cursorQuery}`,
-      options: { method: 'GET' },
-      showToast,
-      uiErrorMessage: PRODUCT_ERROR_MESSAGES.FETCH_COMMENTS_FAILED,
-    });
 
-    if (cursor) {
-      setComments((prev) => [...prev, ...data.list]);
-    } else {
-      setComments(data.list);
-    }
+    try {
+      const data = await safeFetch({
+        url: `${baseUrl}${ENDPOINTS.PRODUCTS}/${productId}/comments?limit=10${cursorQuery}`,
+        options: { method: 'GET' },
+      });
 
-    setNextCursor(data.nextCursor ?? null);
-  };
+      if (cursor) {
+        setComments((prev) => [...prev, ...data.list]);
+      } else {
+        setComments(data.list);
+      }
 
-  console.log('comments', comments);
+      setNextCursor(data.nextCursor ?? null);
+    } catch (error) {
+      showToast(getCommentErrorMessage(error.status), 'error');
+    }
+  };
 
   return (
     <div className={styles.commentContainer}>
diff --git a/src/components/Product/AllProductSection/AllProductSection.jsx b/src/components/Product/AllProductSection/AllProductSection.jsx
index e891d21c..91a16401 100644
--- a/src/components/Product/AllProductSection/AllProductSection.jsx
+++ b/src/components/Product/AllProductSection/AllProductSection.jsx
@@ -6,6 +6,7 @@ import { Pagination } from '@/components/common';
 import { SortDrop } from '@/components/common/Buttons';
 import { ProductCard } from '@/components/Product';
 import { safeFetch } from '@/utils/api';
+import { getProductErrorMessage } from '@/utils/errorMessage';
 import { baseUrl, ENDPOINTS, ROUTES } from '@/constants/urls';
 import { PRODUCT_ERROR_MESSAGES } from '@/constants/messages';
 import buttonStyles from '@/styles/helpers/buttonHelpers.module.scss';
@@ -26,15 +27,18 @@ const AllProductSection = () => {
 
   useEffect(() => {
     const fetchProducts = async () => {
-      const data = await safeFetch({
-        url: `${baseUrl}${ENDPOINTS.PRODUCTS}?page=${page}&pageSize=${pageSize}&orderBy=${sortOption}&keyword=${encodeURIComponent(searchQuery)}`,
-        options: { method: 'GET' },
-        showToast,
-        uiErrorMessage: PRODUCT_ERROR_MESSAGES.FETCH_ALL_FAILED,
-      });
-      setProducts(data.list);
-      setTotalCount(data.totalCount);
+      try {
+        const data = await safeFetch({
+          url: `${baseUrl}${ENDPOINTS.PRODUCTS}?page=${page}&pageSize=${pageSize}&orderBy=${sortOption}&keyword=${encodeURIComponent(searchQuery)}`,
+          options: { method: 'GET' },
+        });
+        setProducts(data.list);
+        setTotalCount(data.totalCount);
+      } catch (error) {
+        showToast(getProductErrorMessage(error.status), 'error');
+      }
     };
+
     fetchProducts();
   }, [page, sortOption, pageSize, searchQuery]);
 
diff --git a/src/components/Product/BestProductSection/BestProductSection.jsx b/src/components/Product/BestProductSection/BestProductSection.jsx
index b3a9f4a4..fb38aea9 100644
--- a/src/components/Product/BestProductSection/BestProductSection.jsx
+++ b/src/components/Product/BestProductSection/BestProductSection.jsx
@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react';
 import { useToast } from '@/contexts';
 import { ProductCard } from '@/components/Product';
 import { safeFetch } from '@/utils/api';
+import { getProductErrorMessage } from '@/utils/errorMessage';
 import { baseUrl, ENDPOINTS } from '@/constants/urls';
-import { PRODUCT_ERROR_MESSAGES } from '@/constants/messages';
 import styles from './BestProductSection.module.scss';
 
 const BestProductSection = () => {
@@ -12,15 +12,17 @@ const BestProductSection = () => {
 
   useEffect(() => {
     const fetchBestProducts = async () => {
-      const data = await safeFetch({
-        url: `${baseUrl}${ENDPOINTS.PRODUCTS}?page=1&pageSize=4&orderBy=favorite`,
-        options: { method: 'GET' },
-        showToast,
-        uiErrorMessage: PRODUCT_ERROR_MESSAGES.FETCH_BEST_FAILED,
-      });
-      const top4 = data.list;
-      setBestProducts(top4);
+      try {
+        const data = await safeFetch({
+          url: `${baseUrl}${ENDPOINTS.PRODUCTS}?page=1&pageSize=4&orderBy=favorite`,
+          options: { method: 'GET' },
+        });
+        setBestProducts(data.list);
+      } catch (error) {
+        showToast(getProductErrorMessage(error.status), 'error');
+      }
     };
+
     fetchBestProducts();
   }, []);
 
diff --git a/src/pages/AddItem/AddItem.jsx b/src/pages/AddItem/AddItem.jsx
index ba37ff0a..50cb81d4 100644
--- a/src/pages/AddItem/AddItem.jsx
+++ b/src/pages/AddItem/AddItem.jsx
@@ -4,11 +4,9 @@ import { useToast } from '@/contexts';
 import { ImageUploader, TagInput, AddItemForm } from '@/components/AddItem';
 import { addItemValidation } from '@/utils/validators';
 import { safeFetch } from '@/utils/api';
+import { postProductErrorMessage } from '@/utils/errorMessage';
 import { baseUrl, ENDPOINTS } from '@/constants/urls';
-import {
-  PRODUCT_ERROR_MESSAGES,
-  PRODUCT_SUCCESS_MESSAGES,
-} from '@/constants/messages';
+import { PRODUCT_SUCCESS_MESSAGES } from '@/constants/messages';
 import formStyles from '@/styles/helpers/formHelpers.module.scss';
 import buttonStyles from '@/styles/helpers/buttonHelpers.module.scss';
 import styles from './AddItem.module.scss';
@@ -42,21 +40,24 @@ const AddItem = () => {
     form.append('price', formData.price);
     form.append('tags', JSON.stringify(formData.tags));
 
-    const data = await safeFetch({
-      url: `${baseUrl}${ENDPOINTS.UPLOAD_IMAGE}`,
-      options: {
-        method: 'POST',
-        body: form,
-      },
-      showToast,
-      uiErrorMessage: PRODUCT_ERROR_MESSAGES.ADD_ITEM_FAILED,
-    });
+    try {
+      const data = await safeFetch({
+        url: `${baseUrl}${ENDPOINTS.UPLOAD_IMAGE}`,
+        options: {
+          method: 'POST',
+          body: form,
+        },
+      });
 
-    showToast(
-      `${data.message || PRODUCT_SUCCESS_MESSAGES.ADD_ITEM_SUCCESS}`,
-      'success',
-    );
-    // TODO: 등록 성공 후 상세 페이지로 이동 처리
+      showToast(
+        `${data.message || PRODUCT_SUCCESS_MESSAGES.ADD_ITEM_SUCCESS}`,
+        'success',
+      );
+
+      // TODO: 등록 성공 후 상세 페이지로 이동 처리
+    } catch (error) {
+      showToast(postProductErrorMessage(error.status), 'error');
+    }
   };
 
   return (

From 93b1449e524c35ec0dbea34bbdc36eb6d8bd5d60 Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Tue, 13 May 2025 00:42:48 +0900
Subject: [PATCH 20/25] feat: navigate to product detail page after successful
 add item

---
 src/pages/AddItem/AddItem.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/AddItem/AddItem.jsx b/src/pages/AddItem/AddItem.jsx
index 50cb81d4..1497c1c5 100644
--- a/src/pages/AddItem/AddItem.jsx
+++ b/src/pages/AddItem/AddItem.jsx
@@ -1,11 +1,12 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useAddItemForm } from '@/hooks';
 import { useToast } from '@/contexts';
 import { ImageUploader, TagInput, AddItemForm } from '@/components/AddItem';
 import { addItemValidation } from '@/utils/validators';
 import { safeFetch } from '@/utils/api';
 import { postProductErrorMessage } from '@/utils/errorMessage';
-import { baseUrl, ENDPOINTS } from '@/constants/urls';
+import { baseUrl, ENDPOINTS, ROUTES } from '@/constants/urls';
 import { PRODUCT_SUCCESS_MESSAGES } from '@/constants/messages';
 import formStyles from '@/styles/helpers/formHelpers.module.scss';
 import buttonStyles from '@/styles/helpers/buttonHelpers.module.scss';
@@ -20,6 +21,7 @@ const initialForm = {
 };
 
 const AddItem = () => {
+  const navigate = useNavigate();
   const { showToast } = useToast();
   const { formData, isFormValid, handleInputChange } = useAddItemForm(
     initialForm,
@@ -55,6 +57,7 @@ const AddItem = () => {
       );
 
       // TODO: 등록 성공 후 상세 페이지로 이동 처리
+      navigate(`${ROUTES.ITEMS}/${data.id}`);
     } catch (error) {
       showToast(postProductErrorMessage(error.status), 'error');
     }

From c0acf35c78a42ed144d543ee10b7cdc941b47692 Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Tue, 13 May 2025 00:54:10 +0900
Subject: [PATCH 21/25] refactor: apply constants to error messages

---
 src/constants/messages/comment.js             | 17 +++++--
 src/constants/messages/product.js             | 35 ++++++++++---
 src/pages/AddItem/AddItem.jsx                 |  2 +-
 src/utils/errorMessage/authErrorMessage.js    |  1 +
 src/utils/errorMessage/commentErrorMessage.js | 49 +++++++++----------
 5 files changed, 68 insertions(+), 36 deletions(-)
 create mode 100644 src/utils/errorMessage/authErrorMessage.js

diff --git a/src/constants/messages/comment.js b/src/constants/messages/comment.js
index d6b0d6ec..f5c67660 100644
--- a/src/constants/messages/comment.js
+++ b/src/constants/messages/comment.js
@@ -1,6 +1,15 @@
 export const COMMENT_ERROR_MESSAGES = {
-  FETCH_COMMENTS_FAILED: '댓글 목록을 가져오는 데 실패했습니다.',
-  POST_COMMENT_FAILED: '댓글 등록에 실패했습니다.',
-  DELETE_COMMENT_FAILED: '댓글 삭제에 실패했습니다.',
-  UPDATE_COMMENT_FAILED: '댓글 수정에 실패했습니다.',
+  UNAUTHORIZED: '로그인이 필요합니다.',
+  FORBIDDEN_FETCH: '이 댓글을 볼 권한이 없어요.',
+  FORBIDDEN_POST: '댓글을 등록할 권한이 없어요.',
+  FORBIDDEN_PATCH: '이 댓글을 수정할 권한이 없어요.',
+  FORBIDDEN_DELETE: '이 댓글을 삭제할 권한이 없어요.',
+  NOT_FOUND_FETCH: '등록된 문의가 없습니다.',
+  NOT_FOUND_PATCH: '수정할 댓글을 찾을 수 없어요.',
+  NOT_FOUND_DELETE: '삭제할 댓글을 찾을 수 없어요.',
+  SERVER_ERROR: '서버에 문제가 발생했어요. 잠시 후 다시 시도해주세요.',
+  FETCH_FAILED: '댓글을 불러오는 데 실패했어요.',
+  POST_FAILED: '댓글을 등록하는 데 실패했어요.',
+  PATCH_FAILED: '댓글을 수정하는 데 실패했어요.',
+  DELETE_FAILED: '댓글을 삭제하는 데 실패했어요.',
 };
diff --git a/src/constants/messages/product.js b/src/constants/messages/product.js
index cc6d0a77..a47fd846 100644
--- a/src/constants/messages/product.js
+++ b/src/constants/messages/product.js
@@ -1,16 +1,39 @@
+export const PRODUCT_SUCCESS_MESSAGES = {
+  ADD_ITEM_SUCCESS: '상품이 등록되었습니다!',
+};
+
 export const PRODUCT_INFO_MESSAGES = {
   emptyList: '등록된 상품이 없습니다.',
   maxImageCount: '* 이미지는 최대 1개까지만 등록할 수 있습니다.',
 };
 
 export const PRODUCT_ERROR_MESSAGES = {
+  // 공통
+  UNAUTHORIZED: '로그인이 필요합니다.',
+  SERVER_ERROR: '서버에 문제가 발생했어요. 잠시 후 다시 시도해주세요.',
+
+  // GET
+  FORBIDDEN_FETCH: '이 상품을 볼 권한이 없어요.',
+  NOT_FOUND_FETCH: '해당 상품은 삭제되었어요.',
+  FETCH_FAILED: '상품 정보를 불러오는 데 실패했어요.',
+
+  // POST
+  FORBIDDEN_POST: '상품을 등록할 권한이 없어요.',
+  POST_FAILED: '상품을 등록하는 데 실패했어요.',
+
+  // PATCH
+  FORBIDDEN_PATCH: '상품을 수정할 권한이 없어요.',
+  NOT_FOUND_PATCH: '수정할 상품을 찾을 수 없어요.',
+  PATCH_FAILED: '상품을 수정하는 데 실패했어요.',
+
+  // DELETE
+  FORBIDDEN_DELETE: '상품을 삭제할 권한이 없어요.',
+  NOT_FOUND_DELETE: '삭제할 상품을 찾을 수 없어요.',
+  DELETE_FAILED: '상품을 삭제하는 데 실패했어요.',
+
+  // 목록 관련
   FETCH_ALL_FAILED: '상품 목록을 불러오는 데 실패했습니다.',
   FETCH_BEST_FAILED: '베스트 상품을 불러오는 데 실패했습니다.',
-  ADD_ITEM_FAILED: '상품 등록 중 문제가 발생했습니다.',
-  FETCH_DETAIL_FAILED: '상품 정보를 불러오지 못했습니다.',
   FETCH_COMMENTS_FAILED: '댓글 정보를 불러오지 못했습니다.',
-};
-
-export const PRODUCT_SUCCESS_MESSAGES = {
-  ADD_ITEM_SUCCESS: '상품이 등록되었습니다!',
+  ADD_ITEM_FAILED: '상품 등록 중 문제가 발생했습니다.',
 };
diff --git a/src/pages/AddItem/AddItem.jsx b/src/pages/AddItem/AddItem.jsx
index 1497c1c5..59341723 100644
--- a/src/pages/AddItem/AddItem.jsx
+++ b/src/pages/AddItem/AddItem.jsx
@@ -56,7 +56,7 @@ const AddItem = () => {
         'success',
       );
 
-      // TODO: 등록 성공 후 상세 페이지로 이동 처리
+      // 등록 성공 후 상세 페이지로 이동 처리
       navigate(`${ROUTES.ITEMS}/${data.id}`);
     } catch (error) {
       showToast(postProductErrorMessage(error.status), 'error');
diff --git a/src/utils/errorMessage/authErrorMessage.js b/src/utils/errorMessage/authErrorMessage.js
new file mode 100644
index 00000000..efbea18e
--- /dev/null
+++ b/src/utils/errorMessage/authErrorMessage.js
@@ -0,0 +1 @@
+// 회원가입 로그인도 토큰 처리할때 에러메시지 하기
diff --git a/src/utils/errorMessage/commentErrorMessage.js b/src/utils/errorMessage/commentErrorMessage.js
index 5529e429..8f832074 100644
--- a/src/utils/errorMessage/commentErrorMessage.js
+++ b/src/utils/errorMessage/commentErrorMessage.js
@@ -1,73 +1,72 @@
 import HTTP_STATUS from '@/constants/statusCodes';
+import { PRODUCT_ERROR_MESSAGES as M } from '@/constants/messages';
 
-export const getCommentErrorMessage = (status) => {
+export const getProductErrorMessage = (status) => {
   switch (status) {
     case HTTP_STATUS.UNAUTHORIZED:
-      return '로그인이 필요합니다.';
+      return M.UNAUTHORIZED;
     case HTTP_STATUS.FORBIDDEN:
-      return '이 댓글을 볼 권한이 없어요.';
+      return M.FORBIDDEN_FETCH;
     case HTTP_STATUS.NOT_FOUND:
-      return '등록된 문의가 없습니다.';
+      return M.NOT_FOUND_FETCH;
     case HTTP_STATUS.INTERNAL_SERVER_ERROR:
     case 502:
     case HTTP_STATUS.SERVICE_UNAVAILABLE:
     case 504:
-      return '서버에 문제가 발생했어요. 잠시 후 다시 시도해주세요.';
+      return M.SERVER_ERROR;
     default:
-      return '댓글을 불러오는 데 실패했어요.';
+      return M.FETCH_FAILED;
   }
 };
 
-export default getCommentErrorMessage;
-
-export const postCommentErrorMessage = (status) => {
+export const postProductErrorMessage = (status) => {
   switch (status) {
     case HTTP_STATUS.UNAUTHORIZED:
-      return '로그인이 필요합니다.';
+      return M.UNAUTHORIZED;
     case HTTP_STATUS.FORBIDDEN:
-      return '댓글을 등록할 권한이 없어요.';
+      return M.FORBIDDEN_POST;
     case HTTP_STATUS.INTERNAL_SERVER_ERROR:
     case 502:
     case HTTP_STATUS.SERVICE_UNAVAILABLE:
     case 504:
-      return '서버에 문제가 발생했어요. 잠시 후 다시 시도해주세요.';
+      return M.SERVER_ERROR;
     default:
-      return '댓글을 등록하는 데 실패했어요.';
+      return M.POST_FAILED;
   }
 };
 
-export const patchCommentErrorMessage = (status) => {
+export const patchProductErrorMessage = (status) => {
   switch (status) {
     case HTTP_STATUS.UNAUTHORIZED:
-      return '로그인이 필요합니다.';
+      return M.UNAUTHORIZED;
     case HTTP_STATUS.FORBIDDEN:
-      return '이 댓글을 수정할 권한이 없어요.';
+      return M.FORBIDDEN_PATCH;
     case HTTP_STATUS.NOT_FOUND:
-      return '수정할 댓글을 찾을 수 없어요.';
+      return M.NOT_FOUND_PATCH;
     case HTTP_STATUS.INTERNAL_SERVER_ERROR:
     case 502:
     case HTTP_STATUS.SERVICE_UNAVAILABLE:
     case 504:
-      return '서버에 문제가 발생했어요. 잠시 후 다시 시도해주세요.';
+      return M.SERVER_ERROR;
     default:
-      return '댓글을 수정하는 데 실패했어요.';
+      return M.PATCH_FAILED;
   }
 };
 
-export const deleteCommentErrorMessage = (status) => {
+export const deleteProductErrorMessage = (status) => {
   switch (status) {
     case HTTP_STATUS.UNAUTHORIZED:
-      return '로그인이 필요합니다.';
+      return M.UNAUTHORIZED;
     case HTTP_STATUS.FORBIDDEN:
-      return '이 댓글을 삭제할 권한이 없어요.';
+      return M.FORBIDDEN_DELETE;
     case HTTP_STATUS.NOT_FOUND:
-      return '삭제할 댓글을 찾을 수 없어요.';
+      return M.NOT_FOUND_DELETE;
     case HTTP_STATUS.INTERNAL_SERVER_ERROR:
     case 502:
     case HTTP_STATUS.SERVICE_UNAVAILABLE:
     case 504:
-      return '서버에 문제가 발생했어요. 잠시 후 다시 시도해주세요.';
+      return M.SERVER_ERROR;
     default:
-      return '댓글을 삭제하는 데 실패했어요.';
+      return M.DELETE_FAILED;
   }
 };

From e52afed6dc17d30b72d3731295b13ca44729ba71 Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Tue, 13 May 2025 01:38:06 +0900
Subject: [PATCH 22/25] refactor: modularize fetch logic

---
 src/api/comment.js                            | 32 ++++++++++++
 src/api/product.js                            | 50 +++++++++++++++++++
 src/api/request.js                            | 47 +++++++++++++++++
 .../Comment/CommentInput/CommentInput.jsx     | 12 +----
 .../Comment/CommentItem/CommentItem.jsx       | 19 ++-----
 .../Comment/CommentList/CommentList.jsx       |  6 +--
 .../AllProductSection/AllProductSection.jsx   | 10 ++--
 .../BestProductSection/BestProductSection.jsx | 12 ++---
 src/constants/messages/comment.js             | 21 +++++---
 src/pages/AddItem/AddItem.jsx                 | 34 ++++++-------
 src/pages/ProductDetail/ProductDetail.jsx     |  6 +--
 src/utils/errorMessage/commentErrorMessage.js | 10 ++--
 src/utils/errorMessage/productErrorMessage.js | 39 ++++++++-------
 13 files changed, 205 insertions(+), 93 deletions(-)
 create mode 100644 src/api/comment.js
 create mode 100644 src/api/product.js
 create mode 100644 src/api/request.js

diff --git a/src/api/comment.js b/src/api/comment.js
new file mode 100644
index 00000000..f8065931
--- /dev/null
+++ b/src/api/comment.js
@@ -0,0 +1,32 @@
+import { baseUrl, ENDPOINTS } from '@/constants/urls';
+import {
+  requestPost,
+  requestGet,
+  requestDelete,
+  requestPatch,
+} from './request';
+
+// 댓글 등록
+export const postComment = (productId, content) => {
+  const url = `${baseUrl}${ENDPOINTS.PRODUCTS}/${productId}${ENDPOINTS.COMMENTS}`;
+  return requestPost(url, { content });
+};
+
+// 댓글 조회
+export const getComments = (productId, cursor) => {
+  const query = cursor ? `?limit=10&cursor=${cursor}` : '?limit=10';
+  const url = `${baseUrl}${ENDPOINTS.PRODUCTS}/${productId}${ENDPOINTS.COMMENTS}${query}`;
+  return requestGet(url);
+};
+
+// 댓글 수정
+export const patchComment = (commentId, content) => {
+  const url = `${baseUrl}${ENDPOINTS.COMMENTS}/${commentId}`;
+  return requestPatch(url, { content });
+};
+
+// 댓글 삭제
+export const deleteComment = (commentId) => {
+  const url = `${baseUrl}${ENDPOINTS.COMMENTS}/${commentId}`;
+  return requestDelete(url);
+};
diff --git a/src/api/product.js b/src/api/product.js
new file mode 100644
index 00000000..11e20148
--- /dev/null
+++ b/src/api/product.js
@@ -0,0 +1,50 @@
+import { baseUrl, ENDPOINTS } from '@/constants/urls';
+import {
+  requestPost,
+  requestGet,
+  requestPatch,
+  requestDelete,
+} from './request';
+
+// 상품 등록
+export const postProduct = (formData) => {
+  const url = `${baseUrl}${ENDPOINTS.PRODUCTS}`;
+  return requestPost(url, formData);
+};
+
+// 이미지 업로드 (FormData)
+export const uploadImage = (formData) => {
+  const url = `${baseUrl}${ENDPOINTS.UPLOAD_IMAGE}`;
+  return requestPost(url, formData);
+};
+
+// 상품 전체 조회
+export const fetchAllProducts = ({ page, pageSize, orderBy, keyword }) => {
+  const query = `?page=${page}&pageSize=${pageSize}&orderBy=${orderBy}&keyword=${encodeURIComponent(keyword || '')}`;
+  const url = `${baseUrl}${ENDPOINTS.PRODUCTS}${query}`;
+  return requestGet(url);
+};
+
+// 베스트 top4 상품 조회
+export const fetchBestProducts = () => {
+  const url = `${baseUrl}${ENDPOINTS.PRODUCTS}?page=1&pageSize=4&orderBy=favorite`;
+  return requestGet(url);
+};
+
+// 상품 상세 조회
+export const getProductDetail = (productId) => {
+  const url = `${baseUrl}${ENDPOINTS.PRODUCTS}/${productId}`;
+  return requestGet(url);
+};
+
+// 상품 수정
+export const patchProduct = (productId, data) => {
+  const url = `${baseUrl}${ENDPOINTS.PRODUCTS}/${productId}`;
+  return requestPatch(url, data);
+};
+
+// 상품 삭제
+export const deleteProduct = (productId) => {
+  const url = `${baseUrl}${ENDPOINTS.PRODUCTS}/${productId}`;
+  return requestDelete(url);
+};
diff --git a/src/api/request.js b/src/api/request.js
new file mode 100644
index 00000000..c7aa3984
--- /dev/null
+++ b/src/api/request.js
@@ -0,0 +1,47 @@
+import { safeFetch } from '@/utils/api';
+
+export const requestGet = async (url, options = {}) => {
+  return safeFetch({ url, options: { method: 'GET', ...options } });
+};
+
+export const requestPost = async (url, data, options = {}) => {
+  const isFormData = data instanceof FormData;
+
+  return safeFetch({
+    url,
+    options: {
+      method: 'POST',
+      headers: isFormData ? undefined : { 'Content-Type': 'application/json' },
+      body: isFormData ? data : JSON.stringify(data),
+      ...options,
+    },
+  });
+};
+
+export const requestPut = async (url, data, options = {}) => {
+  return safeFetch({
+    url,
+    options: {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+      ...options,
+    },
+  });
+};
+
+export const requestPatch = async (url, data, options = {}) => {
+  return safeFetch({
+    url,
+    options: {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+      ...options,
+    },
+  });
+};
+
+export const requestDelete = async (url, options = {}) => {
+  return safeFetch({ url, options: { method: 'DELETE', ...options } });
+};
diff --git a/src/components/Comment/CommentInput/CommentInput.jsx b/src/components/Comment/CommentInput/CommentInput.jsx
index 30e25f94..5a9af341 100644
--- a/src/components/Comment/CommentInput/CommentInput.jsx
+++ b/src/components/Comment/CommentInput/CommentInput.jsx
@@ -1,8 +1,7 @@
 import { useState } from 'react';
 import { useToast } from '@/contexts';
-import { safeFetch } from '@/utils/api';
+import { postComment } from '@/api/comment';
 import { postCommentErrorMessage } from '@/utils/errorMessage';
-import { baseUrl, ENDPOINTS } from '@/constants/urls';
 import formStyles from '@/styles/helpers/formHelpers.module.scss';
 import buttonStyles from '@/styles/helpers/buttonHelpers.module.scss';
 import styles from './CommentInput.module.scss';
@@ -15,14 +14,7 @@ const CommentInput = ({ productId, refreshAfterSubmit }) => {
     if (!content.trim()) return;
 
     try {
-      await safeFetch({
-        url: `${baseUrl}${ENDPOINTS.PRODUCTS}/${productId}/comments`,
-        options: {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ content }),
-        },
-      });
+      await postComment(productId, content);
 
       setContent('');
       refreshAfterSubmit(); // 등록 후 댓글 목록 새로고침
diff --git a/src/components/Comment/CommentItem/CommentItem.jsx b/src/components/Comment/CommentItem/CommentItem.jsx
index 63360719..4c1a072a 100644
--- a/src/components/Comment/CommentItem/CommentItem.jsx
+++ b/src/components/Comment/CommentItem/CommentItem.jsx
@@ -1,13 +1,12 @@
 import { useState } from 'react';
 import { useToast } from '@/contexts';
+import { deleteComment, patchComment } from '@/api/comment';
 import { VerticalKebabDrop } from '@/components/common/Buttons';
-import { safeFetch } from '@/utils/api';
 import { relativeTime } from '@/utils/format';
 import {
   deleteCommentErrorMessage,
   patchCommentErrorMessage,
 } from '@/utils/errorMessage';
-import { baseUrl, ENDPOINTS } from '@/constants/urls';
 import defaultProfile from '@/assets/images/default_profile.svg';
 import buttonStyles from '@/styles/helpers/buttonHelpers.module.scss';
 import formStyles from '@/styles/helpers/formHelpers.module.scss';
@@ -26,14 +25,7 @@ const CommentItem = ({ comment, onUpdated }) => {
 
   const handleUpdate = async () => {
     try {
-      await safeFetch({
-        url: `${baseUrl}${ENDPOINTS.COMMENTS}/${comment.id}`,
-        options: {
-          method: 'PATCH',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ content: editedContent }),
-        },
-      });
+      await patchComment(comment.id, editedContent);
 
       setIsEditing(false);
       onUpdated(); // 부모에 갱신 요청
@@ -47,12 +39,7 @@ const CommentItem = ({ comment, onUpdated }) => {
 
     setIsDeleting(true);
     try {
-      await safeFetch({
-        url: `${baseUrl}${ENDPOINTS.COMMENTS}/${comment.id}`,
-        options: {
-          method: 'DELETE',
-        },
-      });
+      await deleteComment(comment.id);
 
       onUpdated(); // 목록 갱신
     } catch (error) {
diff --git a/src/components/Comment/CommentList/CommentList.jsx b/src/components/Comment/CommentList/CommentList.jsx
index 6763d7d4..3275cb8d 100644
--- a/src/components/Comment/CommentList/CommentList.jsx
+++ b/src/components/Comment/CommentList/CommentList.jsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useToast } from '@/contexts';
+import { getComments } from '@/api/comment';
 import { CommentItem } from '@/components/Comment';
 import { safeFetch } from '@/utils/api';
 import { getCommentErrorMessage } from '@/utils/errorMessage';
@@ -21,10 +22,7 @@ const CommentList = ({ productId, refreshKey }) => {
     const cursorQuery = cursor ? `&cursor=${cursor}` : '';
 
     try {
-      const data = await safeFetch({
-        url: `${baseUrl}${ENDPOINTS.PRODUCTS}/${productId}/comments?limit=10${cursorQuery}`,
-        options: { method: 'GET' },
-      });
+      const data = await getComments(productId, cursor);
 
       if (cursor) {
         setComments((prev) => [...prev, ...data.list]);
diff --git a/src/components/Product/AllProductSection/AllProductSection.jsx b/src/components/Product/AllProductSection/AllProductSection.jsx
index 91a16401..2e73b410 100644
--- a/src/components/Product/AllProductSection/AllProductSection.jsx
+++ b/src/components/Product/AllProductSection/AllProductSection.jsx
@@ -2,13 +2,13 @@ import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useResponsivePageSize } from '@/hooks';
 import { useToast } from '@/contexts';
+import { fetchAllProducts } from '@/api/product';
 import { Pagination } from '@/components/common';
 import { SortDrop } from '@/components/common/Buttons';
 import { ProductCard } from '@/components/Product';
 import { safeFetch } from '@/utils/api';
 import { getProductErrorMessage } from '@/utils/errorMessage';
 import { baseUrl, ENDPOINTS, ROUTES } from '@/constants/urls';
-import { PRODUCT_ERROR_MESSAGES } from '@/constants/messages';
 import buttonStyles from '@/styles/helpers/buttonHelpers.module.scss';
 import styles from './AllProductSection.module.scss';
 
@@ -28,9 +28,11 @@ const AllProductSection = () => {
   useEffect(() => {
     const fetchProducts = async () => {
       try {
-        const data = await safeFetch({
-          url: `${baseUrl}${ENDPOINTS.PRODUCTS}?page=${page}&pageSize=${pageSize}&orderBy=${sortOption}&keyword=${encodeURIComponent(searchQuery)}`,
-          options: { method: 'GET' },
+        const data = await fetchAllProducts({
+          page,
+          pageSize,
+          orderBy: sortOption,
+          keyword: searchQuery,
         });
         setProducts(data.list);
         setTotalCount(data.totalCount);
diff --git a/src/components/Product/BestProductSection/BestProductSection.jsx b/src/components/Product/BestProductSection/BestProductSection.jsx
index fb38aea9..3cc12ae6 100644
--- a/src/components/Product/BestProductSection/BestProductSection.jsx
+++ b/src/components/Product/BestProductSection/BestProductSection.jsx
@@ -1,9 +1,8 @@
 import { useEffect, useState } from 'react';
 import { useToast } from '@/contexts';
+import { fetchBestProducts } from '@/api/product';
 import { ProductCard } from '@/components/Product';
-import { safeFetch } from '@/utils/api';
 import { getProductErrorMessage } from '@/utils/errorMessage';
-import { baseUrl, ENDPOINTS } from '@/constants/urls';
 import styles from './BestProductSection.module.scss';
 
 const BestProductSection = () => {
@@ -11,19 +10,16 @@ const BestProductSection = () => {
   const [bestProducts, setBestProducts] = useState([]);
 
   useEffect(() => {
-    const fetchBestProducts = async () => {
+    const fetchData = async () => {
       try {
-        const data = await safeFetch({
-          url: `${baseUrl}${ENDPOINTS.PRODUCTS}?page=1&pageSize=4&orderBy=favorite`,
-          options: { method: 'GET' },
-        });
+        const data = await fetchBestProducts();
         setBestProducts(data.list);
       } catch (error) {
         showToast(getProductErrorMessage(error.status), 'error');
       }
     };
 
-    fetchBestProducts();
+    fetchData();
   }, []);
 
   return (
diff --git a/src/constants/messages/comment.js b/src/constants/messages/comment.js
index f5c67660..e719a85c 100644
--- a/src/constants/messages/comment.js
+++ b/src/constants/messages/comment.js
@@ -1,15 +1,24 @@
 export const COMMENT_ERROR_MESSAGES = {
+  // 공통
   UNAUTHORIZED: '로그인이 필요합니다.',
+  SERVER_ERROR: '서버에 문제가 발생했어요. 잠시 후 다시 시도해주세요.',
+
+  // GET
   FORBIDDEN_FETCH: '이 댓글을 볼 권한이 없어요.',
-  FORBIDDEN_POST: '댓글을 등록할 권한이 없어요.',
-  FORBIDDEN_PATCH: '이 댓글을 수정할 권한이 없어요.',
-  FORBIDDEN_DELETE: '이 댓글을 삭제할 권한이 없어요.',
   NOT_FOUND_FETCH: '등록된 문의가 없습니다.',
-  NOT_FOUND_PATCH: '수정할 댓글을 찾을 수 없어요.',
-  NOT_FOUND_DELETE: '삭제할 댓글을 찾을 수 없어요.',
-  SERVER_ERROR: '서버에 문제가 발생했어요. 잠시 후 다시 시도해주세요.',
   FETCH_FAILED: '댓글을 불러오는 데 실패했어요.',
+
+  // POST
+  FORBIDDEN_POST: '댓글을 등록할 권한이 없어요.',
   POST_FAILED: '댓글을 등록하는 데 실패했어요.',
+
+  // PATCH
+  FORBIDDEN_PATCH: '이 댓글을 수정할 권한이 없어요.',
+  NOT_FOUND_PATCH: '수정할 댓글을 찾을 수 없어요.',
   PATCH_FAILED: '댓글을 수정하는 데 실패했어요.',
+
+  // DELETE
+  FORBIDDEN_DELETE: '이 댓글을 삭제할 권한이 없어요.',
+  NOT_FOUND_DELETE: '삭제할 댓글을 찾을 수 없어요.',
   DELETE_FAILED: '댓글을 삭제하는 데 실패했어요.',
 };
diff --git a/src/pages/AddItem/AddItem.jsx b/src/pages/AddItem/AddItem.jsx
index 59341723..82130ac7 100644
--- a/src/pages/AddItem/AddItem.jsx
+++ b/src/pages/AddItem/AddItem.jsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAddItemForm } from '@/hooks';
 import { useToast } from '@/contexts';
+import { postProduct, uploadImage } from '@/api/product';
 import { ImageUploader, TagInput, AddItemForm } from '@/components/AddItem';
 import { addItemValidation } from '@/utils/validators';
 import { safeFetch } from '@/utils/api';
@@ -35,28 +36,27 @@ const AddItem = () => {
   const handleSubmit = async (e) => {
     e.preventDefault();
 
-    const form = new FormData();
-    form.append('image', formData.imageFile);
-    form.append('productName', formData.productName);
-    form.append('description', formData.description);
-    form.append('price', formData.price);
-    form.append('tags', JSON.stringify(formData.tags));
-
     try {
-      const data = await safeFetch({
-        url: `${baseUrl}${ENDPOINTS.UPLOAD_IMAGE}`,
-        options: {
-          method: 'POST',
-          body: form,
-        },
-      });
+      // 1단계: 이미지 업로드
+      const imageForm = new FormData();
+      imageForm.append('image', formData.imageFile);
+
+      const { imageUrl } = await uploadImage(imageForm);
+
+      // 2단계: 상품 등록
+      const productForm = new FormData();
+      productForm.append('imageUrl', imageUrl);
+      productForm.append('productName', formData.productName);
+      productForm.append('description', formData.description);
+      productForm.append('price', formData.price);
+      productForm.append('tags', JSON.stringify(formData.tags));
+
+      const data = await postProduct(productForm);
 
       showToast(
-        `${data.message || PRODUCT_SUCCESS_MESSAGES.ADD_ITEM_SUCCESS}`,
+        data.message || PRODUCT_SUCCESS_MESSAGES.ADD_ITEM_SUCCESS,
         'success',
       );
-
-      // 등록 성공 후 상세 페이지로 이동 처리
       navigate(`${ROUTES.ITEMS}/${data.id}`);
     } catch (error) {
       showToast(postProductErrorMessage(error.status), 'error');
diff --git a/src/pages/ProductDetail/ProductDetail.jsx b/src/pages/ProductDetail/ProductDetail.jsx
index acc4cb05..d78d5f81 100644
--- a/src/pages/ProductDetail/ProductDetail.jsx
+++ b/src/pages/ProductDetail/ProductDetail.jsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useParams, Link } from 'react-router-dom';
 import { useToast } from '@/contexts';
+import { getProductDetail } from '@/api/product';
 import { CommentInput, CommentList } from '@/components/Comment';
 import { ProductInfo } from '@/components/Product';
 import { safeFetch } from '@/utils/api';
@@ -22,10 +23,7 @@ const ProductDetail = () => {
   useEffect(() => {
     const fetchProduct = async () => {
       try {
-        const data = await safeFetch({
-          url: `${baseUrl}${ENDPOINTS.PRODUCTS}/${productId}`,
-          options: { method: 'GET' },
-        });
+        const data = await getProductDetail(productId);
         setProduct(data);
       } catch (error) {
         showToast(getProductErrorMessage(error.status), 'error');
diff --git a/src/utils/errorMessage/commentErrorMessage.js b/src/utils/errorMessage/commentErrorMessage.js
index 8f832074..512427d9 100644
--- a/src/utils/errorMessage/commentErrorMessage.js
+++ b/src/utils/errorMessage/commentErrorMessage.js
@@ -1,7 +1,7 @@
 import HTTP_STATUS from '@/constants/statusCodes';
-import { PRODUCT_ERROR_MESSAGES as M } from '@/constants/messages';
+import { COMMENT_ERROR_MESSAGES as M } from '@/constants/messages';
 
-export const getProductErrorMessage = (status) => {
+export const getCommentErrorMessage = (status) => {
   switch (status) {
     case HTTP_STATUS.UNAUTHORIZED:
       return M.UNAUTHORIZED;
@@ -19,7 +19,7 @@ export const getProductErrorMessage = (status) => {
   }
 };
 
-export const postProductErrorMessage = (status) => {
+export const postCommentErrorMessage = (status) => {
   switch (status) {
     case HTTP_STATUS.UNAUTHORIZED:
       return M.UNAUTHORIZED;
@@ -35,7 +35,7 @@ export const postProductErrorMessage = (status) => {
   }
 };
 
-export const patchProductErrorMessage = (status) => {
+export const patchCommentErrorMessage = (status) => {
   switch (status) {
     case HTTP_STATUS.UNAUTHORIZED:
       return M.UNAUTHORIZED;
@@ -53,7 +53,7 @@ export const patchProductErrorMessage = (status) => {
   }
 };
 
-export const deleteProductErrorMessage = (status) => {
+export const deleteCommentErrorMessage = (status) => {
   switch (status) {
     case HTTP_STATUS.UNAUTHORIZED:
       return M.UNAUTHORIZED;
diff --git a/src/utils/errorMessage/productErrorMessage.js b/src/utils/errorMessage/productErrorMessage.js
index 840d180e..8f832074 100644
--- a/src/utils/errorMessage/productErrorMessage.js
+++ b/src/utils/errorMessage/productErrorMessage.js
@@ -1,71 +1,72 @@
 import HTTP_STATUS from '@/constants/statusCodes';
+import { PRODUCT_ERROR_MESSAGES as M } from '@/constants/messages';
 
 export const getProductErrorMessage = (status) => {
   switch (status) {
     case HTTP_STATUS.UNAUTHORIZED:
-      return '로그인이 필요합니다.';
+      return M.UNAUTHORIZED;
     case HTTP_STATUS.FORBIDDEN:
-      return '이 상품을 볼 권한이 없어요.';
+      return M.FORBIDDEN_FETCH;
     case HTTP_STATUS.NOT_FOUND:
-      return '해당 상품은 삭제되었어요.';
+      return M.NOT_FOUND_FETCH;
     case HTTP_STATUS.INTERNAL_SERVER_ERROR:
     case 502:
     case HTTP_STATUS.SERVICE_UNAVAILABLE:
     case 504:
-      return '서버에 문제가 발생했어요. 잠시 후 다시 시도해주세요.';
+      return M.SERVER_ERROR;
     default:
-      return '상품 정보를 불러오는 데 실패했어요.';
+      return M.FETCH_FAILED;
   }
 };
 
 export const postProductErrorMessage = (status) => {
   switch (status) {
     case HTTP_STATUS.UNAUTHORIZED:
-      return '로그인이 필요합니다.';
+      return M.UNAUTHORIZED;
     case HTTP_STATUS.FORBIDDEN:
-      return '상품을 등록할 권한이 없어요.';
+      return M.FORBIDDEN_POST;
     case HTTP_STATUS.INTERNAL_SERVER_ERROR:
     case 502:
     case HTTP_STATUS.SERVICE_UNAVAILABLE:
     case 504:
-      return '서버에 문제가 발생했어요. 잠시 후 다시 시도해주세요.';
+      return M.SERVER_ERROR;
     default:
-      return '상품을 등록하는 데 실패했어요.';
+      return M.POST_FAILED;
   }
 };
 
 export const patchProductErrorMessage = (status) => {
   switch (status) {
     case HTTP_STATUS.UNAUTHORIZED:
-      return '로그인이 필요합니다.';
+      return M.UNAUTHORIZED;
     case HTTP_STATUS.FORBIDDEN:
-      return '상품을 수정할 권한이 없어요.';
+      return M.FORBIDDEN_PATCH;
     case HTTP_STATUS.NOT_FOUND:
-      return '수정할 상품을 찾을 수 없어요.';
+      return M.NOT_FOUND_PATCH;
     case HTTP_STATUS.INTERNAL_SERVER_ERROR:
     case 502:
     case HTTP_STATUS.SERVICE_UNAVAILABLE:
     case 504:
-      return '서버에 문제가 발생했어요. 잠시 후 다시 시도해주세요.';
+      return M.SERVER_ERROR;
     default:
-      return '상품을 수정하는 데 실패했어요.';
+      return M.PATCH_FAILED;
   }
 };
 
 export const deleteProductErrorMessage = (status) => {
   switch (status) {
     case HTTP_STATUS.UNAUTHORIZED:
-      return '로그인이 필요합니다.';
+      return M.UNAUTHORIZED;
     case HTTP_STATUS.FORBIDDEN:
-      return '상품을 삭제할 권한이 없어요.';
+      return M.FORBIDDEN_DELETE;
     case HTTP_STATUS.NOT_FOUND:
-      return '삭제할 상품을 찾을 수 없어요.';
+      return M.NOT_FOUND_DELETE;
     case HTTP_STATUS.INTERNAL_SERVER_ERROR:
     case 502:
     case HTTP_STATUS.SERVICE_UNAVAILABLE:
     case 504:
-      return '서버에 문제가 발생했어요. 잠시 후 다시 시도해주세요.';
+      return M.SERVER_ERROR;
     default:
-      return '상품을 삭제하는 데 실패했어요.';
+      return M.DELETE_FAILED;
   }
 };

From 3789f878453ce914800209f000193a5ea13fd722 Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Tue, 13 May 2025 01:42:00 +0900
Subject: [PATCH 23/25] fix: reset file input when removing image to allow
 re-upload of same file

---
 src/components/AddItem/ImageUploader/ImageUploader.jsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/AddItem/ImageUploader/ImageUploader.jsx b/src/components/AddItem/ImageUploader/ImageUploader.jsx
index 0bcd84e0..0a751db3 100644
--- a/src/components/AddItem/ImageUploader/ImageUploader.jsx
+++ b/src/components/AddItem/ImageUploader/ImageUploader.jsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { RemoveIcon } from '@/components/common/Buttons';
 import { PRODUCT_INFO_MESSAGES } from '@/constants/messages';
 import plusIcon from '@/assets/icons/plus.svg';
@@ -12,6 +12,8 @@ const ImageUploader = ({
   showImageWarning,
   setShowImageWarning,
 }) => {
+  const fileInputRef = useRef(null);
+
   useEffect(() => {
     return () => {
       if (imagePreview && imagePreview.startsWith('blob:')) {
@@ -47,6 +49,11 @@ const ImageUploader = ({
 
     // formData에서 imageFile도 제거
     handleInputChange({ field: 'imageFile', value: null });
+
+    // 파일 input의 value도 초기화
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
   };
 
   return (
@@ -65,6 +72,7 @@ const ImageUploader = ({
             onChange={handleImageChange}
             hidden
             disabled={!!imagePreview}
+            ref={fileInputRef}
           />
         </label>
 

From aa4e70a709bc21d1675e406caaef34f473c4c709 Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Tue, 13 May 2025 02:23:28 +0900
Subject: [PATCH 24/25] feat: Added delete and update logic to product info

---
 .../Product/ProductInfo/ProductInfo.jsx       | 36 ++++++++++++++++---
 src/constants/urls/routes.js                  |  1 +
 src/pages/EditItem/EditItem.jsx               | 15 ++++++++
 src/pages/EditItem/EditItem.module.scss       |  0
 src/pages/EditItem/index.js                   |  1 +
 src/pages/index.js                            |  1 +
 src/routes/index.jsx                          |  1 +
 7 files changed, 50 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/EditItem/EditItem.jsx
 create mode 100644 src/pages/EditItem/EditItem.module.scss
 create mode 100644 src/pages/EditItem/index.js

diff --git a/src/components/Product/ProductInfo/ProductInfo.jsx b/src/components/Product/ProductInfo/ProductInfo.jsx
index 96beafbd..273ed743 100644
--- a/src/components/Product/ProductInfo/ProductInfo.jsx
+++ b/src/components/Product/ProductInfo/ProductInfo.jsx
@@ -1,12 +1,17 @@
-import { useUser } from '@/contexts';
+import { useNavigate } from 'react-router-dom';
+import { useUser, useToast } from '@/contexts';
+import { deleteProduct } from '@/api/product';
 import { FavoriteBtn, VerticalKebabDrop } from '@/components/common/Buttons';
 import { isoDate } from '@/utils/format';
+import { safeFetch } from '@/utils/api';
+import { baseUrl, ENDPOINTS, ROUTES } from '@/constants/urls';
 import defaultProfileImg from '@/assets/images/default_profile.svg';
 import tagStyles from '@/styles/helpers/tagHelpers.module.scss';
 import commonStyles from '@/styles/helpers/commonHelpers.module.scss';
 import styles from './ProductInfo.module.scss';
 
 const ProductInfo = ({
+  productId,
   images,
   name,
   description,
@@ -15,10 +20,31 @@ const ProductInfo = ({
   favoriteCount,
   ownerNickname,
   updatedAt,
-  onSelect, //TODO: 구현 예정
 }) => {
   const currentUser = useUser(); // 지금 로그인한 사용자
-  const handleSelect = (value) => {};
+  const { showToast } = useToast();
+  const navigate = useNavigate();
+
+  const handleEdit = () => {
+    navigate(ROUTES.EDIT_ITEM(productId));
+  };
+
+  const handleDelete = async () => {
+    const confirmed = window.confirm('정말 삭제하시겠어요?');
+    if (!confirmed) return;
+
+    const result = await deleteProduct({ productId, showToast });
+
+    if (result) {
+      showToast('상품이 삭제되었어요.', 'success');
+      navigate(ROUTES.LIST);
+    }
+  };
+
+  const handleSelect = (value) => {
+    if (value === 'edit') handleEdit();
+    if (value === 'delete') handleDelete();
+  };
 
   return (
     <div className={styles.productContainer}>
@@ -30,7 +56,7 @@ const ProductInfo = ({
           <div className={styles.infoHeader}>
             <div className={styles.titleBar}>
               <h2>{name}</h2>
-              <VerticalKebabDrop />
+              <VerticalKebabDrop onSelect={handleSelect} />
             </div>
             <p className={styles.price}>{price?.toLocaleString()}원</p>
             <div className={commonStyles.horizontalLine} />
@@ -54,7 +80,7 @@ const ProductInfo = ({
           <div className={styles.writerInfo}>
             <img
               src={defaultProfileImg}
-              // src={currentUser?.image || defaultProfileImg}  로그인 처리 후
+              // src={currentUser?.image || defaultProfileImg}
               alt="Writer Profile Image"
             />
             <div className={styles.nicknameAndDate}>
diff --git a/src/constants/urls/routes.js b/src/constants/urls/routes.js
index 88424d9a..2009f339 100644
--- a/src/constants/urls/routes.js
+++ b/src/constants/urls/routes.js
@@ -8,6 +8,7 @@ const ROUTES = {
   ADD_ITEM: '/additem',
   ITEM_DETAIL: (id = ':productId') => `/items/${id}`,
   BOARD: '/board',
+  EDIT_ITEM: (id = ':productId') => `/items/${id}/edit`,
 };
 
 export default ROUTES;
diff --git a/src/pages/EditItem/EditItem.jsx b/src/pages/EditItem/EditItem.jsx
new file mode 100644
index 00000000..c4ba234c
--- /dev/null
+++ b/src/pages/EditItem/EditItem.jsx
@@ -0,0 +1,15 @@
+import { useParams } from 'react-router-dom';
+
+const EditItem = () => {
+  const { productId } = useParams();
+
+  return (
+    <div>
+      <h2>상품 수정 페이지</h2>
+      <p>상품 ID: {productId}</p>
+      <p>⛏️ 만들어질 예정입니다!</p>
+    </div>
+  );
+};
+
+export default EditItem;
diff --git a/src/pages/EditItem/EditItem.module.scss b/src/pages/EditItem/EditItem.module.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/pages/EditItem/index.js b/src/pages/EditItem/index.js
new file mode 100644
index 00000000..64678a82
--- /dev/null
+++ b/src/pages/EditItem/index.js
@@ -0,0 +1 @@
+export { default } from './EditItem';
diff --git a/src/pages/index.js b/src/pages/index.js
index f930111b..bfbae9e3 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -4,3 +4,4 @@ export { default as SignIn } from './SignIn';
 export { default as Items } from './Items';
 export { default as AddItem } from './AddItem';
 export { default as ProductDetail } from './ProductDetail';
+export { default as EditItem} from './EditItem';
diff --git a/src/routes/index.jsx b/src/routes/index.jsx
index 93c47086..f8dfda99 100644
--- a/src/routes/index.jsx
+++ b/src/routes/index.jsx
@@ -19,6 +19,7 @@ const AppRoutes = () => (
       <Route path={ROUTES.ITEMS} element={<Items />} />
       <Route path={ROUTES.ITEM_DETAIL()} element={<ProductDetail />} />
       <Route path={ROUTES.ADD_ITEM} element={<AddItem />} />
+      <Route path={ROUTES.EDIT_ITEM()} element={<EditItem />} />
     </Route>
   </Routes>
 );

From 4585d11eb896a0f6dfba4e20a1879e7b9bccfbb0 Mon Sep 17 00:00:00 2001
From: Sienna <sgoldenbird@gmail.com>
Date: Tue, 13 May 2025 02:42:40 +0900
Subject: [PATCH 25/25] fix: receive id prop correctly

---
 .../Product/ProductInfo/ProductInfo.jsx       | 22 ++++++++++++-------
 src/constants/messages/product.js             |  4 ++++
 src/pages/EditItem/EditItem.jsx               |  2 ++
 src/routes/index.jsx                          |  1 +
 4 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/Product/ProductInfo/ProductInfo.jsx b/src/components/Product/ProductInfo/ProductInfo.jsx
index 273ed743..a52542d1 100644
--- a/src/components/Product/ProductInfo/ProductInfo.jsx
+++ b/src/components/Product/ProductInfo/ProductInfo.jsx
@@ -3,15 +3,16 @@ import { useUser, useToast } from '@/contexts';
 import { deleteProduct } from '@/api/product';
 import { FavoriteBtn, VerticalKebabDrop } from '@/components/common/Buttons';
 import { isoDate } from '@/utils/format';
-import { safeFetch } from '@/utils/api';
-import { baseUrl, ENDPOINTS, ROUTES } from '@/constants/urls';
+import { deleteProductErrorMessage } from '@/utils/errorMessage';
+import { ROUTES } from '@/constants/urls';
+import { PRODUCT_SUCCESS_MESSAGES } from '@/constants/messages';
 import defaultProfileImg from '@/assets/images/default_profile.svg';
 import tagStyles from '@/styles/helpers/tagHelpers.module.scss';
 import commonStyles from '@/styles/helpers/commonHelpers.module.scss';
 import styles from './ProductInfo.module.scss';
 
 const ProductInfo = ({
-  productId,
+  id: productId,
   images,
   name,
   description,
@@ -24,6 +25,7 @@ const ProductInfo = ({
   const currentUser = useUser(); // 지금 로그인한 사용자
   const { showToast } = useToast();
   const navigate = useNavigate();
+  console.log('🧪 navigate에서 넘기는 productId:', productId);
 
   const handleEdit = () => {
     navigate(ROUTES.EDIT_ITEM(productId));
@@ -33,14 +35,18 @@ const ProductInfo = ({
     const confirmed = window.confirm('정말 삭제하시겠어요?');
     if (!confirmed) return;
 
-    const result = await deleteProduct({ productId, showToast });
+    try {
+      const result = await deleteProduct({ productId });
 
-    if (result) {
-      showToast('상품이 삭제되었어요.', 'success');
-      navigate(ROUTES.LIST);
+      if (result) {
+        showToast(PRODUCT_SUCCESS_MESSAGES.DELETE_ITEM_SUCCESS, 'success');
+        navigate(ROUTES.ITEMS);
+      }
+    } catch (error) {
+      const status = error?.status || error?.response?.status;
+      showToast(deleteProductErrorMessage(status), 'error');
     }
   };
-
   const handleSelect = (value) => {
     if (value === 'edit') handleEdit();
     if (value === 'delete') handleDelete();
diff --git a/src/constants/messages/product.js b/src/constants/messages/product.js
index a47fd846..9b72e7b9 100644
--- a/src/constants/messages/product.js
+++ b/src/constants/messages/product.js
@@ -1,5 +1,9 @@
 export const PRODUCT_SUCCESS_MESSAGES = {
+  // POST
   ADD_ITEM_SUCCESS: '상품이 등록되었습니다!',
+
+  // DELETE
+  DELETE_ITEM_SUCCESS: '상품이 삭제되었어요.',
 };
 
 export const PRODUCT_INFO_MESSAGES = {
diff --git a/src/pages/EditItem/EditItem.jsx b/src/pages/EditItem/EditItem.jsx
index c4ba234c..0ab5ef75 100644
--- a/src/pages/EditItem/EditItem.jsx
+++ b/src/pages/EditItem/EditItem.jsx
@@ -2,6 +2,8 @@ import { useParams } from 'react-router-dom';
 
 const EditItem = () => {
   const { productId } = useParams();
+  console.log('productId:', productId);
+  console.log('📦 useParams:', productId);
 
   return (
     <div>
diff --git a/src/routes/index.jsx b/src/routes/index.jsx
index f8dfda99..2cd40761 100644
--- a/src/routes/index.jsx
+++ b/src/routes/index.jsx
@@ -6,6 +6,7 @@ import {
   Items,
   AddItem,
   ProductDetail,
+  EditItem,
 } from '@/pages';
 import App from '@/App';
 import ROUTES from '@/constants/urls/routes';