From 18851b2a7a49016176f936307ef6551de1999cbe Mon Sep 17 00:00:00 2001
From: kyunghoon <insightdany@naver.com>
Date: Tue, 20 May 2025 23:01:36 +0900
Subject: [PATCH 01/10] =?UTF-8?q?refactor:=20sprint6=20=EB=A6=AC=EB=B7=B0?=
 =?UTF-8?q?=EC=82=AC=ED=95=AD=20=EB=B0=98=EC=98=81=20(react=20router=20out?=
 =?UTF-8?q?let=20=ED=99=9C=EC=9A=A9,=20itemimgage=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B0=9C=EC=84=A0=20=EB=93=B1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 react/my-react-app/src/App.jsx                |  45 ++---
 .../my-react-app/src/components/ItemImage.jsx | 100 +++--------
 react/my-react-app/src/components/Layout.jsx  |  30 ++++
 .../src/components/ui/FormField.jsx           |  37 ++--
 .../src/components/ui/NumberInput.jsx         |  47 +++++
 .../src/components/ui/TextArea.jsx            |  47 +++--
 .../src/components/ui/TextInput.jsx           |  32 ++++
 react/my-react-app/src/pages/AddItemPage.jsx  | 161 ++++++++----------
 8 files changed, 257 insertions(+), 242 deletions(-)
 create mode 100644 react/my-react-app/src/components/Layout.jsx
 create mode 100644 react/my-react-app/src/components/ui/NumberInput.jsx
 create mode 100644 react/my-react-app/src/components/ui/TextInput.jsx

diff --git a/react/my-react-app/src/App.jsx b/react/my-react-app/src/App.jsx
index 24dd3369..5fd3e1eb 100644
--- a/react/my-react-app/src/App.jsx
+++ b/react/my-react-app/src/App.jsx
@@ -1,7 +1,6 @@
 import React from "react";
-import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
-import Header from "./components/Header";
-import Footer from "./components/Footer";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Layout from "./components/Layout";
 import HomePage from "./pages/HomePage";
 import SigninPage from "./pages/SigninPage";
 import SignupPage from "./pages/SignupPage";
@@ -11,38 +10,24 @@ import PrivacyPage from "./pages/PrivacyPage";
 import FaqPage from "./pages/FaqPage";
 import MyProfilePage from "./pages/MyProfilePage";
 
-function AppContent() {
-  const location = useLocation();
-  const hideFooterRoutes = ["/additem", "/signin", "/signup"];
-  const hideHeaderRoutes = ["/signin", "/signup"];
-
-  // 현재 라우트에 따라 헤더 표시 여부 결정
-  const shouldShowHeader = !hideHeaderRoutes.includes(location.pathname);
-  // 현재 라우트에 따라 푸터 표시 여부 결정
-  const shouldShowFooter = !hideFooterRoutes.includes(location.pathname);
-
+function App() {
   return (
-    <>
-      {shouldShowHeader && <Header />}
+    <BrowserRouter>
       <Routes>
-        <Route path="/" element={<HomePage />} />
+        {/* Auth routes without layout */}
         <Route path="/signin" element={<SigninPage />} />
         <Route path="/signup" element={<SignupPage />} />
-        <Route path="/items" element={<ItemsPage />} />
-        <Route path="/additem" element={<AddItemPage />} />
-        <Route path="/privacy" element={<PrivacyPage />} />
-        <Route path="/faq" element={<FaqPage />} />
-        <Route path="/myprofile" element={<MyProfilePage />} />
-      </Routes>
-      {shouldShowFooter && <Footer />}
-    </>
-  );
-}
 
-function App() {
-  return (
-    <BrowserRouter>
-      <AppContent />
+        {/* Main routes with layout */}
+        <Route element={<Layout />}>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/items" element={<ItemsPage />} />
+          <Route path="/additem" element={<AddItemPage />} />
+          <Route path="/privacy" element={<PrivacyPage />} />
+          <Route path="/faq" element={<FaqPage />} />
+          <Route path="/myprofile" element={<MyProfilePage />} />
+        </Route>
+      </Routes>
     </BrowserRouter>
   );
 }
diff --git a/react/my-react-app/src/components/ItemImage.jsx b/react/my-react-app/src/components/ItemImage.jsx
index f8c3badd..7e9d1a75 100644
--- a/react/my-react-app/src/components/ItemImage.jsx
+++ b/react/my-react-app/src/components/ItemImage.jsx
@@ -1,94 +1,38 @@
 import React from "react";
 import styled from "styled-components";
 
-// 정확한 크기를 지정하기 위해 box-sizing: content-box 설정
 const ImageContainer = styled.div`
-  box-sizing: content-box !important;
-  display: block;
   position: relative;
-  overflow: hidden;
+  width: 100%;
+  aspect-ratio: 1;
   border-radius: 8px;
-  border: 1px solid #e5e8ec;
-  margin: 0;
-  padding: 0;
-
-  /* 모바일 기본 설정 - 정확히 168px */
-  width: 168px !important;
-  height: 168px !important;
-  min-width: 168px !important;
-  min-height: 168px !important;
-  max-width: 168px !important;
-  max-height: 168px !important;
-
-  /* 태블릿 설정 - 정확히 221px */
-  @media (min-width: 768px) and (max-width: 1279px) {
-    width: 221px !important;
-    height: 221px !important;
-    min-width: 221px !important;
-    min-height: 221px !important;
-    max-width: 221px !important;
-    max-height: 221px !important;
-  }
-
-  /* 데스크톱 설정 - 정확히 221px */
-  @media (min-width: 1280px) {
-    width: 221px !important;
-    height: 221px !important;
-    min-width: 221px !important;
-    min-height: 221px !important;
-    max-width: 221px !important;
-    max-height: 221px !important;
-  }
-
-  /* 베스트 이미지 설정 */
-  &.best-image {
-    width: 343px !important;
-    height: 343px !important;
-    min-width: 343px !important;
-    min-height: 343px !important;
-    max-width: 343px !important;
-    max-height: 343px !important;
-
-    @media (min-width: 768px) and (max-width: 1279px) {
-      width: 343px !important;
-      height: 343px !important;
-      min-width: 343px !important;
-      min-height: 343px !important;
-      max-width: 343px !important;
-      max-height: 343px !important;
-    }
-
-    @media (min-width: 1280px) {
-      width: 282px !important;
-      height: 282px !important;
-      min-width: 282px !important;
-      min-height: 282px !important;
-      max-width: 282px !important;
-      max-height: 282px !important;
-    }
-  }
-
-  &:hover {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  }
+  overflow: hidden;
 `;
 
-// 이미지가 컨테이너를 완전히 채우도록 설정
 const Image = styled.img`
-  display: block;
-  width: 100% !important;
-  height: 100% !important;
+  width: 100%;
+  height: 100%;
   object-fit: cover;
-  object-position: center;
-  margin: 0;
-  padding: 0;
 `;
 
-function ItemImage({ src, alt, type = "all" }) {
-  // type: 'best' 또는 'all'
+const Placeholder = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: #f4f6fa;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+`;
+
+function ItemImage({ src, alt = "상품 이미지", className }) {
   return (
-    <ImageContainer className={`${type}-image`}>
-      <Image src={src} alt={alt} />
+    <ImageContainer className={className}>
+      {src ? (
+        <Image src={src} alt={alt} />
+      ) : (
+        <Placeholder>이미지 없음</Placeholder>
+      )}
     </ImageContainer>
   );
 }
diff --git a/react/my-react-app/src/components/Layout.jsx b/react/my-react-app/src/components/Layout.jsx
new file mode 100644
index 00000000..627122af
--- /dev/null
+++ b/react/my-react-app/src/components/Layout.jsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+import styled from "styled-components";
+import Header from "./Header";
+import Footer from "./Footer";
+
+const LayoutContainer = styled.div`
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+`;
+
+const MainContent = styled.main`
+  flex: 1;
+  padding-top: 60px; // Header 높이만큼 여백
+`;
+
+function Layout() {
+  return (
+    <LayoutContainer>
+      <Header />
+      <MainContent>
+        <Outlet />
+      </MainContent>
+      <Footer />
+    </LayoutContainer>
+  );
+}
+
+export default Layout;
diff --git a/react/my-react-app/src/components/ui/FormField.jsx b/react/my-react-app/src/components/ui/FormField.jsx
index fc4cbe44..2c18dff2 100644
--- a/react/my-react-app/src/components/ui/FormField.jsx
+++ b/react/my-react-app/src/components/ui/FormField.jsx
@@ -4,6 +4,23 @@ import Input from "./Input";
 import TextArea from "./TextArea";
 import TagInput from "../TagInput";
 
+const FormFieldWrapper = styled.div`
+  margin-bottom: 16px;
+  width: 100%;
+`;
+
+const Label = styled.label`
+  display: block;
+  font-weight: 600;
+  margin-bottom: 8px;
+`;
+
+const ErrorText = styled.div`
+  color: #f74747;
+  font-size: 14px;
+  margin-top: 8px;
+`;
+
 // styled-components 정의
 const FormFieldContainer = styled.div`
   width: 100%;
@@ -22,12 +39,6 @@ const FormFieldContainer = styled.div`
   }
 `;
 
-const FormFieldLabel = styled.label`
-  font-weight: 600;
-  margin-bottom: 8px;
-  display: block;
-`;
-
 const StyledInput = styled(Input)`
   width: 100%;
   height: 56px !important; /* 고정 높이 */
@@ -62,12 +73,6 @@ const TagInputContainer = styled.div`
   }
 `;
 
-const ErrorMessage = styled.div`
-  color: #f74747;
-  font-size: 14px;
-  margin-top: 8px;
-`;
-
 /**
  * 공통 폼 필드 컴포넌트
  * @param {string} type - 필드 타입 ('text', 'textarea', 'number', 'tag', 'custom')
@@ -131,11 +136,11 @@ function FormField({
   };
 
   return (
-    <FormFieldContainer>
-      {label && <FormFieldLabel>{label}</FormFieldLabel>}
+    <FormFieldWrapper>
+      {label && <Label>{label}</Label>}
       {renderFieldContent()}
-      {error && <ErrorMessage>{error}</ErrorMessage>}
-    </FormFieldContainer>
+      {error && <ErrorText>{error}</ErrorText>}
+    </FormFieldWrapper>
   );
 }
 
diff --git a/react/my-react-app/src/components/ui/NumberInput.jsx b/react/my-react-app/src/components/ui/NumberInput.jsx
new file mode 100644
index 00000000..e0fd9599
--- /dev/null
+++ b/react/my-react-app/src/components/ui/NumberInput.jsx
@@ -0,0 +1,47 @@
+import React from "react";
+import styled from "styled-components";
+import FormField from "./FormField";
+
+const Input = styled.input`
+  width: 100%;
+  height: 56px;
+  border-radius: 8px;
+  border: 1px solid #e5e8ec;
+  background-color: #f4f6fa;
+  padding: 0 16px;
+  font-size: 16px;
+  box-sizing: border-box;
+
+  &:focus {
+    border-color: #007aff;
+  }
+
+  &::placeholder {
+    color: #999;
+  }
+
+  /* Remove spinner buttons */
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  &[type="number"] {
+    -moz-appearance: textfield;
+  }
+`;
+
+function NumberInput({ label, error, onChange, ...props }) {
+  const handleChange = (e) => {
+    const value = e.target.value.replace(/[^0-9]/g, "");
+    onChange?.({ ...e, target: { ...e.target, value } });
+  };
+
+  return (
+    <FormField label={label} error={error}>
+      <Input type="number" onChange={handleChange} {...props} />
+    </FormField>
+  );
+}
+
+export default NumberInput;
diff --git a/react/my-react-app/src/components/ui/TextArea.jsx b/react/my-react-app/src/components/ui/TextArea.jsx
index 42413557..79fe7fea 100644
--- a/react/my-react-app/src/components/ui/TextArea.jsx
+++ b/react/my-react-app/src/components/ui/TextArea.jsx
@@ -1,41 +1,32 @@
 import React from "react";
 import styled from "styled-components";
+import FormField from "./FormField";
 
 const StyledTextArea = styled.textarea`
   width: 100%;
-  min-height: 120px;
+  height: 282px;
   border-radius: 8px;
-  border: none;
-  background: #f4f6fa;
-  padding: 12px 16px;
+  border: 1px solid #e5e8ec;
+  background-color: #f4f6fa;
+  padding: 16px;
   font-size: 16px;
-  resize: vertical;
-  ${(props) =>
-    props.style &&
-    Object.entries(props.style)
-      .map(([key, value]) => `${key}: ${value};`)
-      .join(" ")}
+  resize: none;
+  box-sizing: border-box;
+
+  &:focus {
+    border-color: #007aff;
+  }
+
+  &::placeholder {
+    color: #999;
+  }
 `;
 
-function TextArea({
-  placeholder,
-  value,
-  onChange,
-  maxLength,
-  style,
-  rows = 4,
-  className,
-}) {
+function TextArea({ label, error, ...props }) {
   return (
-    <StyledTextArea
-      placeholder={placeholder}
-      value={value}
-      onChange={onChange}
-      maxLength={maxLength}
-      rows={rows}
-      className={className}
-      style={style}
-    />
+    <FormField label={label} error={error}>
+      <StyledTextArea {...props} />
+    </FormField>
   );
 }
 
diff --git a/react/my-react-app/src/components/ui/TextInput.jsx b/react/my-react-app/src/components/ui/TextInput.jsx
new file mode 100644
index 00000000..d4284975
--- /dev/null
+++ b/react/my-react-app/src/components/ui/TextInput.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+import styled from "styled-components";
+import FormField from "./FormField";
+
+const Input = styled.input`
+  width: 100%;
+  height: 56px;
+  border-radius: 8px;
+  border: 1px solid #e5e8ec;
+  background-color: #f4f6fa;
+  padding: 0 16px;
+  font-size: 16px;
+  box-sizing: border-box;
+
+  &:focus {
+    border-color: #007aff;
+  }
+
+  &::placeholder {
+    color: #999;
+  }
+`;
+
+function TextInput({ label, error, ...props }) {
+  return (
+    <FormField label={label} error={error}>
+      <Input type="text" {...props} />
+    </FormField>
+  );
+}
+
+export default TextInput;
diff --git a/react/my-react-app/src/pages/AddItemPage.jsx b/react/my-react-app/src/pages/AddItemPage.jsx
index 05ab6dff..9309cd11 100644
--- a/react/my-react-app/src/pages/AddItemPage.jsx
+++ b/react/my-react-app/src/pages/AddItemPage.jsx
@@ -1,9 +1,11 @@
-import React, { useState, useMemo } from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
-import Header from "../components/Header";
 import ImageUpload from "../components/ImageUpload";
 import Button from "../components/ui/Button";
-import FormField from "../components/ui/FormField";
+import TextInput from "../components/ui/TextInput";
+import TextArea from "../components/ui/TextArea";
+import NumberInput from "../components/ui/NumberInput";
+import TagInput from "../components/TagInput";
 
 const PageContainer = styled.div`
   margin: 0 auto;
@@ -11,7 +13,6 @@ const PageContainer = styled.div`
   margin-bottom: 10px;
 `;
 
-// FormFieldContainer 스타일과 동일한 스타일 적용
 const CommonContainer = styled.div`
   width: 100%;
   max-width: 344px; /* 모바일 기본 너비 */
@@ -47,6 +48,10 @@ const SubmitButton = styled(Button)`
   margin-left: 16px;
 `;
 
+const FormSection = styled(CommonContainer)`
+  margin-bottom: 24px;
+`;
+
 const ImageSection = styled(CommonContainer)`
   margin-bottom: 30px;
 `;
@@ -63,24 +68,17 @@ const ErrorMessage = styled.div`
   margin-top: 8px;
 `;
 
-const FormSection = styled.div`
-  margin-bottom: 24px;
-`;
-
 function AddItemPage() {
-  const [images, setImages] = useState([]); // 여러 이미지
+  const [images, setImages] = useState([]);
   const [title, setTitle] = useState("");
   const [desc, setDesc] = useState("");
   const [price, setPrice] = useState("");
   const [tags, setTags] = useState([]);
   const [error, setError] = useState("");
 
-  // 모든 필수 입력값이 채워졌는지
-  const isFormValid = useMemo(() => {
-    return title.trim() && desc.trim() && price.trim() && tags.length > 0;
-  }, [title, desc, price, tags]);
+  const isFormValid =
+    title.trim() && desc.trim() && price.trim() && tags.length > 0;
 
-  // 이미지 업로드
   const handleImagesChange = (imgs) => {
     if (imgs.length > 1) {
       setError("이미지 등록은 최대 1개까지 가능합니다.");
@@ -90,88 +88,71 @@ function AddItemPage() {
     setError("");
   };
 
-  // 태그 추가/삭제
-  const handleAddTag = (tag) => {
-    setTags([...tags, tag]);
-  };
-  const handleRemoveTag = (tag) => {
-    setTags(tags.filter((t) => t !== tag));
-  };
-
-  // 등록 버튼 클릭
   const handleSubmit = (e) => {
     e.preventDefault();
-    // API 연동 없이 동작만 구현
     alert("상품이 등록되었습니다! (API 연동 전)");
   };
 
   return (
-    <>
-      <Header highlightItemsNav={true} />
-      <PageContainer>
-        <form onSubmit={handleSubmit} autoComplete="off">
-          <FormHeader>
-            <Title>상품 등록하기</Title>
-            <SubmitButton type="submit" disabled={!isFormValid}>
-              등록
-            </SubmitButton>
-          </FormHeader>
-
-          <ImageSection>
-            <ImageLabel>상품 이미지</ImageLabel>
-            <ImageUpload
-              images={images}
-              onImagesChange={handleImagesChange}
-              max={1}
-            />
-            {error && <ErrorMessage>{error}</ErrorMessage>}
-          </ImageSection>
-
-          <FormSection>
-            <FormField
-              type="text"
-              label="상품명"
-              placeholder="상품명을 입력해주세요"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              maxLength={40}
-            />
-          </FormSection>
-
-          <FormSection>
-            <FormField
-              type="textarea"
-              label="상품 소개"
-              placeholder="상품 소개를 입력해주세요"
-              value={desc}
-              onChange={(e) => setDesc(e.target.value)}
-              maxLength={500}
-            />
-          </FormSection>
-
-          <FormSection>
-            <FormField
-              type="number"
-              label="판매가격"
-              placeholder="판매 가격을 입력해주세요"
-              value={price}
-              onChange={(e) => setPrice(e.target.value.replace(/[^0-9]/g, ""))}
-              min={0}
-            />
-          </FormSection>
-
-          <FormSection>
-            <FormField
-              type="tag"
-              label="태그"
-              value={tags}
-              onAddTag={handleAddTag}
-              onRemoveTag={handleRemoveTag}
-            />
-          </FormSection>
-        </form>
-      </PageContainer>
-    </>
+    <PageContainer>
+      <form onSubmit={handleSubmit} autoComplete="off">
+        <FormHeader>
+          <Title>상품 등록하기</Title>
+          <SubmitButton type="submit" disabled={!isFormValid}>
+            등록
+          </SubmitButton>
+        </FormHeader>
+
+        <ImageSection>
+          <ImageLabel>상품 이미지</ImageLabel>
+          <ImageUpload
+            images={images}
+            onImagesChange={handleImagesChange}
+            max={1}
+          />
+          {error && <ErrorMessage>{error}</ErrorMessage>}
+        </ImageSection>
+
+        <FormSection>
+          <TextInput
+            label="상품명"
+            placeholder="상품명을 입력해주세요"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            maxLength={40}
+          />
+        </FormSection>
+
+        <FormSection>
+          <TextArea
+            label="상품 소개"
+            placeholder="상품 소개를 입력해주세요"
+            value={desc}
+            onChange={(e) => setDesc(e.target.value)}
+            maxLength={500}
+          />
+        </FormSection>
+
+        <FormSection>
+          <NumberInput
+            label="판매가격"
+            placeholder="판매 가격을 입력해주세요"
+            value={price}
+            onChange={(e) => setPrice(e.target.value)}
+            min={0}
+          />
+        </FormSection>
+
+        <FormSection>
+          <TagInput
+            label="태그"
+            tags={tags}
+            onAddTag={(tag) => setTags([...tags, tag])}
+            onRemoveTag={(tag) => setTags(tags.filter((t) => t !== tag))}
+          />
+        </FormSection>
+      </form>
+    </PageContainer>
   );
 }
 

From c17cf09f52d72a47d8d73e7d66ae3fec65add85e Mon Sep 17 00:00:00 2001
From: kyunghoon <insightdany@naver.com>
Date: Wed, 21 May 2025 07:06:53 +0900
Subject: [PATCH 02/10] =?UTF-8?q?feat:=20=EC=83=81=ED=92=88=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=9D=BC=EC=9A=B0?=
 =?UTF-8?q?=ED=8C=85=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 react/my-react-app/src/App.jsx                |  2 +
 .../my-react-app/src/components/ItemCard.jsx  |  9 ++-
 .../src/pages/ProductDetailPage.jsx           | 63 +++++++++++++++++++
 3 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 react/my-react-app/src/pages/ProductDetailPage.jsx

diff --git a/react/my-react-app/src/App.jsx b/react/my-react-app/src/App.jsx
index 5fd3e1eb..4022a9e1 100644
--- a/react/my-react-app/src/App.jsx
+++ b/react/my-react-app/src/App.jsx
@@ -9,6 +9,7 @@ import AddItemPage from "./pages/AddItemPage";
 import PrivacyPage from "./pages/PrivacyPage";
 import FaqPage from "./pages/FaqPage";
 import MyProfilePage from "./pages/MyProfilePage";
+import ProductDetailPage from "./pages/ProductDetailPage";
 
 function App() {
   return (
@@ -22,6 +23,7 @@ function App() {
         <Route element={<Layout />}>
           <Route path="/" element={<HomePage />} />
           <Route path="/items" element={<ItemsPage />} />
+          <Route path="/items/:productId" element={<ProductDetailPage />} />
           <Route path="/additem" element={<AddItemPage />} />
           <Route path="/privacy" element={<PrivacyPage />} />
           <Route path="/faq" element={<FaqPage />} />
diff --git a/react/my-react-app/src/components/ItemCard.jsx b/react/my-react-app/src/components/ItemCard.jsx
index b36415e5..b7059f9a 100644
--- a/react/my-react-app/src/components/ItemCard.jsx
+++ b/react/my-react-app/src/components/ItemCard.jsx
@@ -1,11 +1,18 @@
 import React from "react";
+import { useNavigate } from "react-router-dom";
 import ItemImage from "./ItemImage";
 import ItemCardContent from "./ItemCardContent";
 import { ItemCard as StyledItemCard } from "../pages/ItemsPage.styled";
 
 function ItemCard({ item, imageType = "all" }) {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate(`/items/${item.id}`);
+  };
+
   return (
-    <StyledItemCard>
+    <StyledItemCard onClick={handleClick} style={{ cursor: "pointer" }}>
       <ItemImage
         src={item.images?.[0] || ""}
         alt={item.name}
diff --git a/react/my-react-app/src/pages/ProductDetailPage.jsx b/react/my-react-app/src/pages/ProductDetailPage.jsx
new file mode 100644
index 00000000..59966e82
--- /dev/null
+++ b/react/my-react-app/src/pages/ProductDetailPage.jsx
@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from "react";
+import { useParams, Link } from "react-router-dom";
+import styled from "styled-components";
+
+const ProductDetailContainer = styled.div`
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  padding-top: 100px;
+`;
+
+const LoadingSpinner = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+`;
+
+const ErrorMessage = styled.div`
+  text-align: center;
+  color: #e53935;
+  padding: 20px;
+  margin-top: 100px;
+`;
+
+const BackButton = styled(Link)`
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 16px;
+  margin-bottom: 20px;
+  color: #4e5968;
+  text-decoration: none;
+  font-weight: 600;
+
+  &:hover {
+    color: #3692ff;
+  }
+`;
+
+function ProductDetailPage() {
+  const { productId } = useParams();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [product, setProduct] = useState(null);
+
+  useEffect(() => {
+    // TODO: API 연동 후 구현
+    setLoading(false);
+  }, [productId]);
+
+  if (loading) return <LoadingSpinner>Loading...</LoadingSpinner>;
+  if (error) return <ErrorMessage>{error}</ErrorMessage>;
+
+  return (
+    <ProductDetailContainer>
+      <BackButton to="/items">← 목록으로 돌아가기</BackButton>
+      {/* TODO: 상품 상세 정보 컴포넌트들 추가 예정 */}
+      <div>Product ID: {productId}</div>
+    </ProductDetailContainer>
+  );
+}
+
+export default ProductDetailPage;

From 6c84fc8567c6182c2c8b925a8a8165c8b28c5385 Mon Sep 17 00:00:00 2001
From: kyunghoon <insightdany@naver.com>
Date: Wed, 21 May 2025 08:12:08 +0900
Subject: [PATCH 03/10] =?UTF-8?q?refactor:=20=ED=8C=8C=EC=9D=BC=EB=AA=85?=
 =?UTF-8?q?=20=EB=B0=8F=20=EA=B2=BD=EB=A1=9C=EB=B3=80=EA=B2=BD=20items...?=
 =?UTF-8?q?=20->=20products...=20=EB=A1=9C=20=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 react/my-react-app/src/App.jsx                         |  6 +++---
 react/my-react-app/src/components/AllItemsSection.jsx  |  6 +++++-
 react/my-react-app/src/components/BestItemsSection.jsx |  2 +-
 react/my-react-app/src/components/ItemCard.jsx         |  4 ++--
 react/my-react-app/src/pages/HomePage.jsx              |  2 +-
 react/my-react-app/src/pages/ProductDetailPage.jsx     |  2 +-
 .../src/pages/{ItemsPage.jsx => ProductsPage.jsx}      | 10 +++++-----
 .../{ItemsPage.styled.js => ProductsPage.styled.js}    |  2 +-
 8 files changed, 19 insertions(+), 15 deletions(-)
 rename react/my-react-app/src/pages/{ItemsPage.jsx => ProductsPage.jsx} (97%)
 rename react/my-react-app/src/pages/{ItemsPage.styled.js => ProductsPage.styled.js} (99%)

diff --git a/react/my-react-app/src/App.jsx b/react/my-react-app/src/App.jsx
index 4022a9e1..5784905a 100644
--- a/react/my-react-app/src/App.jsx
+++ b/react/my-react-app/src/App.jsx
@@ -4,7 +4,7 @@ import Layout from "./components/Layout";
 import HomePage from "./pages/HomePage";
 import SigninPage from "./pages/SigninPage";
 import SignupPage from "./pages/SignupPage";
-import ItemsPage from "./pages/ItemsPage";
+import ProductsPage from "./pages/ProductsPage";
 import AddItemPage from "./pages/AddItemPage";
 import PrivacyPage from "./pages/PrivacyPage";
 import FaqPage from "./pages/FaqPage";
@@ -22,8 +22,8 @@ function App() {
         {/* Main routes with layout */}
         <Route element={<Layout />}>
           <Route path="/" element={<HomePage />} />
-          <Route path="/items" element={<ItemsPage />} />
-          <Route path="/items/:productId" element={<ProductDetailPage />} />
+          <Route path="/products" element={<ProductsPage />} />
+          <Route path="/products/:productId" element={<ProductDetailPage />} />
           <Route path="/additem" element={<AddItemPage />} />
           <Route path="/privacy" element={<PrivacyPage />} />
           <Route path="/faq" element={<FaqPage />} />
diff --git a/react/my-react-app/src/components/AllItemsSection.jsx b/react/my-react-app/src/components/AllItemsSection.jsx
index 5f83c535..0e82cc9f 100644
--- a/react/my-react-app/src/components/AllItemsSection.jsx
+++ b/react/my-react-app/src/components/AllItemsSection.jsx
@@ -14,7 +14,11 @@ import {
   DesktopAddButton,
   AllItemsGrid,
   MessageParagraph,
-} from "../pages/ItemsPage.styled";
+  MobileSortContainer,
+  MobileSortButton,
+  MobileSortMenu,
+  MobileSortMenuItem,
+} from "../pages/ProductsPage.styled";
 
 function AllItemsSection({
   items,
diff --git a/react/my-react-app/src/components/BestItemsSection.jsx b/react/my-react-app/src/components/BestItemsSection.jsx
index c19c5383..cddee29f 100644
--- a/react/my-react-app/src/components/BestItemsSection.jsx
+++ b/react/my-react-app/src/components/BestItemsSection.jsx
@@ -5,7 +5,7 @@ import {
   SectionTitle,
   BestItemsGrid,
   MessageParagraph,
-} from "../pages/ItemsPage.styled";
+} from "../pages/ProductsPage.styled";
 
 function BestItemsSection({ items, loading }) {
   return (
diff --git a/react/my-react-app/src/components/ItemCard.jsx b/react/my-react-app/src/components/ItemCard.jsx
index b7059f9a..f6552ec3 100644
--- a/react/my-react-app/src/components/ItemCard.jsx
+++ b/react/my-react-app/src/components/ItemCard.jsx
@@ -2,13 +2,13 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 import ItemImage from "./ItemImage";
 import ItemCardContent from "./ItemCardContent";
-import { ItemCard as StyledItemCard } from "../pages/ItemsPage.styled";
+import { ItemCard as StyledItemCard } from "../pages/ProductsPage.styled";
 
 function ItemCard({ item, imageType = "all" }) {
   const navigate = useNavigate();
 
   const handleClick = () => {
-    navigate(`/items/${item.id}`);
+    navigate(`/products/${item.id}`);
   };
 
   return (
diff --git a/react/my-react-app/src/pages/HomePage.jsx b/react/my-react-app/src/pages/HomePage.jsx
index 756e28e4..78f4d4cb 100644
--- a/react/my-react-app/src/pages/HomePage.jsx
+++ b/react/my-react-app/src/pages/HomePage.jsx
@@ -11,7 +11,7 @@ function HomePage() {
             <br />
             거래해 보세요
           </h1>
-          <Link to="/items" className="button pill-button">
+          <Link to="/products" className="button pill-button">
             구경하러 가기
           </Link>
         </div>
diff --git a/react/my-react-app/src/pages/ProductDetailPage.jsx b/react/my-react-app/src/pages/ProductDetailPage.jsx
index 59966e82..6f77f560 100644
--- a/react/my-react-app/src/pages/ProductDetailPage.jsx
+++ b/react/my-react-app/src/pages/ProductDetailPage.jsx
@@ -53,7 +53,7 @@ function ProductDetailPage() {
 
   return (
     <ProductDetailContainer>
-      <BackButton to="/items">← 목록으로 돌아가기</BackButton>
+      <BackButton to="/products">← 목록으로 돌아가기</BackButton>
       {/* TODO: 상품 상세 정보 컴포넌트들 추가 예정 */}
       <div>Product ID: {productId}</div>
     </ProductDetailContainer>
diff --git a/react/my-react-app/src/pages/ItemsPage.jsx b/react/my-react-app/src/pages/ProductsPage.jsx
similarity index 97%
rename from react/my-react-app/src/pages/ItemsPage.jsx
rename to react/my-react-app/src/pages/ProductsPage.jsx
index df013575..a7102fe7 100644
--- a/react/my-react-app/src/pages/ItemsPage.jsx
+++ b/react/my-react-app/src/pages/ProductsPage.jsx
@@ -3,11 +3,11 @@ import { useNavigate, useLocation } from "react-router-dom";
 import useWindowSize from "../hooks/useWindowSize";
 import BestItemsSection from "../components/BestItemsSection";
 import AllItemsSection from "../components/AllItemsSection";
-import { ErrorMessage, ItemsPageContainer } from "./ItemsPage.styled";
+import { ErrorMessage, ProductsPageContainer } from "./ProductsPage.styled";
 
 const API_BASE_URL = "https://panda-market-api.vercel.app/";
 
-function ItemsPage() {
+function ProductsPage() {
   const navigate = useNavigate();
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
@@ -191,7 +191,7 @@ function ItemsPage() {
   }
 
   return (
-    <ItemsPageContainer>
+    <ProductsPageContainer>
       <BestItemsSection items={visibleBestItems} loading={loadingBest} />
 
       <AllItemsSection
@@ -209,8 +209,8 @@ function ItemsPage() {
         mobileSortOpen={mobileSortOpen}
         setMobileSortOpen={setMobileSortOpen}
       />
-    </ItemsPageContainer>
+    </ProductsPageContainer>
   );
 }
 
-export default ItemsPage;
+export default ProductsPage;
diff --git a/react/my-react-app/src/pages/ItemsPage.styled.js b/react/my-react-app/src/pages/ProductsPage.styled.js
similarity index 99%
rename from react/my-react-app/src/pages/ItemsPage.styled.js
rename to react/my-react-app/src/pages/ProductsPage.styled.js
index 2d094950..fff26be9 100644
--- a/react/my-react-app/src/pages/ItemsPage.styled.js
+++ b/react/my-react-app/src/pages/ProductsPage.styled.js
@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { Link } from "react-router-dom";
 
 // Main container
-export const ItemsPageContainer = styled.div`
+export const ProductsPageContainer = styled.div`
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px;

From 5cb4134f11dd253c22603e0b5fc36e124a7cdb79 Mon Sep 17 00:00:00 2001
From: kyunghoon <insightdany@naver.com>
Date: Wed, 21 May 2025 19:15:26 +0900
Subject: [PATCH 04/10] =?UTF-8?q?feat:=20=EC=83=81=ED=92=88=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=EC=BD=98=ED=85=90=EC=B8=A0=20=EB=B0=8F=20=EC=BD=94?=
 =?UTF-8?q?=EB=A9=98=ED=8A=B8=EC=84=B9=EC=85=98=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 react/my-react-app/package-lock.json          | 143 ++++-
 react/my-react-app/package.json               |   1 +
 react/my-react-app/src/App.jsx                |   4 +-
 react/my-react-app/src/api/client.js          |  46 ++
 react/my-react-app/src/api/products.js        |  30 +
 .../src/components/AllItemsSection.jsx        |  70 ++-
 react/my-react-app/src/components/Header.jsx  |   4 +-
 .../my-react-app/src/components/ItemCard.jsx  |   2 +-
 react/my-react-app/src/components/Layout.jsx  |   2 +-
 .../src/components/SearchForm.jsx             |   9 +-
 .../src/components/product/ProductImages.jsx  |  76 +++
 .../src/components/product/ProductInfo.jsx    | 170 ++++++
 .../src/components/product/ProductTags.jsx    |  50 ++
 .../src/components/product/SellerInfo.jsx     | 117 ++++
 .../src/components/ui/TextArea.jsx            |   3 +-
 react/my-react-app/src/pages/HomePage.jsx     |   2 +-
 .../src/pages/ProductDetailPage.jsx           | 539 +++++++++++++++++-
 react/my-react-app/src/pages/ProductsPage.jsx |  78 ++-
 .../src/pages/ProductsPage.styled.js          |  13 +-
 react/my-react-app/src/utils/dateUtils.js     |   7 +
 react/my-react-app/src/utils/format.js        |  11 +
 21 files changed, 1295 insertions(+), 82 deletions(-)
 create mode 100644 react/my-react-app/src/api/client.js
 create mode 100644 react/my-react-app/src/api/products.js
 create mode 100644 react/my-react-app/src/components/product/ProductImages.jsx
 create mode 100644 react/my-react-app/src/components/product/ProductInfo.jsx
 create mode 100644 react/my-react-app/src/components/product/ProductTags.jsx
 create mode 100644 react/my-react-app/src/components/product/SellerInfo.jsx
 create mode 100644 react/my-react-app/src/utils/dateUtils.js
 create mode 100644 react/my-react-app/src/utils/format.js

diff --git a/react/my-react-app/package-lock.json b/react/my-react-app/package-lock.json
index 6553635a..0931a452 100644
--- a/react/my-react-app/package-lock.json
+++ b/react/my-react-app/package-lock.json
@@ -8,6 +8,7 @@
       "name": "my-react-app",
       "version": "0.0.0",
       "dependencies": {
+        "axios": "^1.9.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "styled-components": "^6.1.18"
@@ -1520,6 +1521,23 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
+      "integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1606,7 +1624,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
       "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -1710,6 +1727,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1847,6 +1876,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -1861,7 +1899,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
@@ -1900,7 +1937,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
       "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -1910,7 +1946,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -1920,7 +1955,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
       "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0"
@@ -1929,6 +1963,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.25.4",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.4.tgz",
@@ -2377,6 +2426,62 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
+      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/form-data/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/form-data/node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -2416,7 +2521,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -2436,7 +2540,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
       "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
@@ -2461,7 +2564,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
       "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "dunder-proto": "^1.0.1",
@@ -2501,7 +2603,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -2524,7 +2625,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
       "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -2533,11 +2633,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -2795,7 +2909,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
       "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -3146,6 +3259,12 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
diff --git a/react/my-react-app/package.json b/react/my-react-app/package.json
index 8f615223..9238a295 100644
--- a/react/my-react-app/package.json
+++ b/react/my-react-app/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.9.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "styled-components": "^6.1.18"
diff --git a/react/my-react-app/src/App.jsx b/react/my-react-app/src/App.jsx
index 5784905a..a0b81100 100644
--- a/react/my-react-app/src/App.jsx
+++ b/react/my-react-app/src/App.jsx
@@ -22,8 +22,8 @@ function App() {
         {/* Main routes with layout */}
         <Route element={<Layout />}>
           <Route path="/" element={<HomePage />} />
-          <Route path="/products" element={<ProductsPage />} />
-          <Route path="/products/:productId" element={<ProductDetailPage />} />
+          <Route path="/items" element={<ProductsPage />} />
+          <Route path="/items/:productId" element={<ProductDetailPage />} />
           <Route path="/additem" element={<AddItemPage />} />
           <Route path="/privacy" element={<PrivacyPage />} />
           <Route path="/faq" element={<FaqPage />} />
diff --git a/react/my-react-app/src/api/client.js b/react/my-react-app/src/api/client.js
new file mode 100644
index 00000000..f2e0896d
--- /dev/null
+++ b/react/my-react-app/src/api/client.js
@@ -0,0 +1,46 @@
+import axios from "axios";
+
+const client = axios.create({
+  baseURL: "https://panda-market-api.vercel.app",
+});
+
+// 요청 인터셉터 - 모든 요청에 인증 헤더 추가
+client.interceptors.request.use((config) => {
+  const token = localStorage.getItem("accessToken");
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+// 응답 인터셉터 - 토큰 만료 처리
+client.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true;
+
+      try {
+        const refreshToken = localStorage.getItem("refreshToken");
+        const { data } = await client.post("/auth/refresh-token", {
+          refreshToken,
+        });
+
+        localStorage.setItem("accessToken", data.accessToken);
+        originalRequest.headers.Authorization = `Bearer ${data.accessToken}`;
+
+        return client(originalRequest);
+      } catch (refreshError) {
+        localStorage.removeItem("accessToken");
+        localStorage.removeItem("refreshToken");
+        window.location.href = "/signin";
+      }
+    }
+
+    return Promise.reject(error);
+  }
+);
+
+export default client;
diff --git a/react/my-react-app/src/api/products.js b/react/my-react-app/src/api/products.js
new file mode 100644
index 00000000..6926f02f
--- /dev/null
+++ b/react/my-react-app/src/api/products.js
@@ -0,0 +1,30 @@
+import client from "./client";
+
+export const productAPI = {
+  // 상품 상세 정보 조회
+  getDetail: (productId) => client.get(`/products/${productId}`),
+
+  // 상품 좋아요
+  addFavorite: (productId) => client.post(`/products/${productId}/favorite`),
+
+  // 상품 좋아요 취소
+  removeFavorite: (productId) =>
+    client.delete(`/products/${productId}/favorite`),
+
+  // 상품 문의글 목록 조회
+  getComments: (productId, cursor, limit = 10) =>
+    client.get(`/products/${productId}/comments`, {
+      params: { cursor, limit },
+    }),
+
+  // 상품 문의글 작성
+  addComment: (productId, content) =>
+    client.post(`/products/${productId}/comments`, { content }),
+
+  // 문의글 수정
+  updateComment: (commentId, content) =>
+    client.patch(`/comments/${commentId}`, { content }),
+
+  // 문의글 삭제
+  deleteComment: (commentId) => client.delete(`/comments/${commentId}`),
+};
diff --git a/react/my-react-app/src/components/AllItemsSection.jsx b/react/my-react-app/src/components/AllItemsSection.jsx
index 0e82cc9f..861a128a 100644
--- a/react/my-react-app/src/components/AllItemsSection.jsx
+++ b/react/my-react-app/src/components/AllItemsSection.jsx
@@ -43,28 +43,56 @@ function AllItemsSection({
 
   return (
     <SectionContainer>
-      <AllItemsHeader>
-        <TitleRow>
+      {/* 데스크톱 & 태블릿 모드 (768px 이상) */}
+      {windowWidth > 767 ? (
+        <AllItemsHeader style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
           <AllItemsTitle>전체 상품</AllItemsTitle>
-          <MobileAddButton to="/additem">상품 등록하기</MobileAddButton>
-        </TitleRow>
-        <HeaderControls>
-          <SearchForm
-            value={inputValue}
-            onChange={handleSearchInputChange}
-            onSubmit={handleSearchSubmit}
-          />
-          <DesktopAddButton to="/additem">상품 등록하기</DesktopAddButton>
-          <Dropdown
-            options={sortOptions}
-            selectedValue={orderBy}
-            onChange={handleSortChange}
-            isMobile={windowWidth <= 767}
-            isOpen={mobileSortOpen}
-            setIsOpen={setMobileSortOpen}
-          />
-        </HeaderControls>
-      </AllItemsHeader>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+            <SearchForm
+              value={inputValue}
+              onChange={handleSearchInputChange}
+              onSubmit={handleSearchSubmit}
+            />
+            <DesktopAddButton to="/additem">상품 등록하기</DesktopAddButton>
+            <Dropdown
+              options={sortOptions}
+              selectedValue={orderBy}
+              onChange={handleSortChange}
+              isMobile={false}
+              isOpen={mobileSortOpen}
+              setIsOpen={setMobileSortOpen}
+            />
+          </div>
+        </AllItemsHeader>
+      ) : (
+        /* 모바일 모드 (767px 이하) */
+        <AllItemsHeader>
+          {/* 첫 번째 줄: 전체 상품 텍스트와 상품 등록하기 버튼 */}
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
+            <AllItemsTitle>전체 상품</AllItemsTitle>
+            <MobileAddButton to="/additem">상품 등록하기</MobileAddButton>
+          </div>
+          
+          {/* 두 번째 줄: 정렬 드롭다운과 검색창 */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+            <Dropdown
+              options={sortOptions}
+              selectedValue={orderBy}
+              onChange={handleSortChange}
+              isMobile={true}
+              isOpen={mobileSortOpen}
+              setIsOpen={setMobileSortOpen}
+            />
+            <SearchForm
+              value={inputValue}
+              onChange={handleSearchInputChange}
+              onSubmit={handleSearchSubmit}
+              style={{ flex: 1 }}
+            />
+          </div>
+        </AllItemsHeader>
+      )}
+      
 
       {loading ? (
         <MessageParagraph>상품 로딩 중...</MessageParagraph>
diff --git a/react/my-react-app/src/components/Header.jsx b/react/my-react-app/src/components/Header.jsx
index 6ca79ad6..efdaea07 100644
--- a/react/my-react-app/src/components/Header.jsx
+++ b/react/my-react-app/src/components/Header.jsx
@@ -9,7 +9,9 @@ function Header() {
   };
   const location = useLocation();
   const isItemsOrAddItemPage =
-    location.pathname === "/items" || location.pathname === "/additem";
+    location.pathname === "/items" || 
+    location.pathname.startsWith("/items/") || 
+    location.pathname === "/additem";
 
   return (
     <header>
diff --git a/react/my-react-app/src/components/ItemCard.jsx b/react/my-react-app/src/components/ItemCard.jsx
index f6552ec3..383545e0 100644
--- a/react/my-react-app/src/components/ItemCard.jsx
+++ b/react/my-react-app/src/components/ItemCard.jsx
@@ -8,7 +8,7 @@ function ItemCard({ item, imageType = "all" }) {
   const navigate = useNavigate();
 
   const handleClick = () => {
-    navigate(`/products/${item.id}`);
+    navigate(`/items/${item.id}`);
   };
 
   return (
diff --git a/react/my-react-app/src/components/Layout.jsx b/react/my-react-app/src/components/Layout.jsx
index 627122af..3104f19f 100644
--- a/react/my-react-app/src/components/Layout.jsx
+++ b/react/my-react-app/src/components/Layout.jsx
@@ -12,7 +12,7 @@ const LayoutContainer = styled.div`
 
 const MainContent = styled.main`
   flex: 1;
-  padding-top: 60px; // Header 높이만큼 여백
+  padding-top: 30px; // 줄인 패딩
 `;
 
 function Layout() {
diff --git a/react/my-react-app/src/components/SearchForm.jsx b/react/my-react-app/src/components/SearchForm.jsx
index 9dae9d47..df846730 100644
--- a/react/my-react-app/src/components/SearchForm.jsx
+++ b/react/my-react-app/src/components/SearchForm.jsx
@@ -3,20 +3,23 @@ import styled from "styled-components";
 
 const SearchFormContainer = styled.form`
   width: 100%; /* Use full width on mobile */
-  max-width: 400px; /* Allow it to grow larger on mobile */
+  max-width: 300px; /* Reduced max-width */
+  flex-shrink: 1;
 
   @media (min-width: 768px) {
     width: 242px;
   }
 
   @media (min-width: 1280px) {
-    width: 470px;
+    width: 300px;
   }
 
   @media (max-width: 767px) {
     flex-grow: 1; /* Take up available space */
     flex-shrink: 1;
-    width: calc(100% - 54px); /* Leave room for the dropdown */
+    width: 100%; /* Full width on mobile */
+    margin-top: 10px;
+    order: 3; /* Move to bottom on mobile */
   }
 `;
 
diff --git a/react/my-react-app/src/components/product/ProductImages.jsx b/react/my-react-app/src/components/product/ProductImages.jsx
new file mode 100644
index 00000000..32aec2b8
--- /dev/null
+++ b/react/my-react-app/src/components/product/ProductImages.jsx
@@ -0,0 +1,76 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+const ImageContainer = styled.div`
+  width: 100%;
+
+  @media (min-width: 1024px) {
+    width: 486px;
+    height: 486px;
+  }
+`;
+
+const MainImage = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 8px;
+`;
+
+const ThumbnailContainer = styled.div`
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+  overflow-x: auto;
+`;
+
+const Thumbnail = styled.img`
+  width: 60px;
+  height: 60px;
+  object-fit: cover;
+  border-radius: 4px;
+  cursor: pointer;
+  opacity: ${(props) => (props.$active ? 1 : 0.6)};
+  border: ${(props) => (props.$active ? "2px solid #4a80f0" : "none")};
+  transition: all 0.2s;
+  
+  &:hover {
+    opacity: 1;
+  }
+`;
+
+function ProductImages({ images }) {
+  const [activeIndex, setActiveIndex] = useState(0);
+  
+  // 이미지가 없을 경우 기본 이미지 사용
+  const imageList = images && images.length > 0 
+    ? images 
+    : ['/placeholder-image.jpg'];
+  
+  return (
+    <div>
+      <ImageContainer>
+        <MainImage 
+          src={imageList[activeIndex]} 
+          alt="Product image" 
+        />
+      </ImageContainer>
+      
+      {imageList.length > 1 && (
+        <ThumbnailContainer>
+          {imageList.map((image, index) => (
+            <Thumbnail
+              key={index}
+              src={image}
+              alt={`Thumbnail ${index + 1}`}
+              $active={index === activeIndex}
+              onClick={() => setActiveIndex(index)}
+            />
+          ))}
+        </ThumbnailContainer>
+      )}
+    </div>
+  );
+}
+
+export default ProductImages;
diff --git a/react/my-react-app/src/components/product/ProductInfo.jsx b/react/my-react-app/src/components/product/ProductInfo.jsx
new file mode 100644
index 00000000..dbf8655e
--- /dev/null
+++ b/react/my-react-app/src/components/product/ProductInfo.jsx
@@ -0,0 +1,170 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import { formatPrice, formatDate } from "../../utils/format";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const Divider = styled.hr`
+  border: none;
+  border-top: 1px solid #DFDFDF;
+  width: 100%;
+  margin: 16px 0;
+`;
+
+const SectionTitle = styled.h3`
+  font-size: 16px;
+  font-weight: 600;
+  color: #222;
+  margin: 0;
+  margin-bottom: 8px;
+`;
+
+const TitleContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`;
+
+const Title = styled.h2`
+  font-size: 24px;
+  font-weight: 600;
+  color: #222;
+  margin: 0;
+`;
+
+const Price = styled.div`
+  font-size: 32px;
+  font-weight: 700;
+  color: #222;
+`;
+
+const Description = styled.p`
+  font-size: 16px;
+  line-height: 1.6;
+  color: #4e5968;
+  margin: 0;
+  white-space: pre-wrap;
+`;
+
+const MetaInfo = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+`;
+
+const CreatedAt = styled.span`
+  color: #8b95a1;
+  font-size: 14px;
+  margin-left: auto; /* 오른쪽 정렬 */
+`;
+
+const FavoriteButton = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 16px;
+  border: none;
+  background: ${(props) => (props.$isFavorite ? "#FFE8EC" : "#F4F6FA")};
+  color: ${(props) => (props.$isFavorite ? "#FF597B" : "#4e5968")};
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: all 0.2s;
+
+  &:hover {
+    background: ${(props) => (props.$isFavorite ? "#FFD5DE" : "#E8EBF2")};
+  }
+`;
+
+function ProductInfo({
+  name,
+  price,
+  description,
+  favoriteCount,
+  isFavorite,
+  createdAt,
+  onFavoriteClick,
+}) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  // 케밥 메뉴 아이콘 컴포넌트
+  const KebabMenuIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" fill="currentColor" />
+      <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" fill="currentColor" />
+      <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" fill="currentColor" />
+    </svg>
+  );
+  
+  const KebabMenuButton = styled.button`
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #4e5968;
+    padding: 8px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    
+    &:hover {
+      background: #f4f6fa;
+    }
+  `;
+  
+  const MenuDropdown = styled.div`
+    position: absolute;
+    top: 100%;
+    right: 0;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    width: 120px;
+    z-index: 10;
+    overflow: hidden;
+  `;
+  
+  const MenuItem = styled.button`
+    width: 100%;
+    text-align: left;
+    padding: 12px 16px;
+    background: none;
+    border: none;
+    font-size: 14px;
+    color: #333;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    
+    &:hover {
+      background-color: #f5f5f5;
+    }
+  `;
+
+  return (
+    <Container>
+      <TitleContainer>
+        <Title>{name}</Title>
+        <KebabMenuButton onClick={() => setMenuOpen(!menuOpen)}>
+          <KebabMenuIcon />
+          {menuOpen && (
+            <MenuDropdown>
+              <MenuItem>수정하기</MenuItem>
+              <MenuItem>삭제하기</MenuItem>
+            </MenuDropdown>
+          )}
+        </KebabMenuButton>
+      </TitleContainer>
+      <Price>{formatPrice(price)}원</Price>
+      <Divider />
+      <SectionTitle>상품 소개</SectionTitle>
+      <Description>{description}</Description>
+    </Container>
+  );
+}
+
+export default ProductInfo;
diff --git a/react/my-react-app/src/components/product/ProductTags.jsx b/react/my-react-app/src/components/product/ProductTags.jsx
new file mode 100644
index 00000000..a79840c2
--- /dev/null
+++ b/react/my-react-app/src/components/product/ProductTags.jsx
@@ -0,0 +1,50 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const SectionTitle = styled.h3`
+  font-size: 16px;
+  font-weight: 600;
+  color: #222;
+  margin: 0;
+  margin-bottom: 8px;
+`;
+
+const TagsContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 8px 0;
+`;
+
+const Tag = styled.span`
+  display: inline-block;
+  padding: 6px 12px;
+  background: #f4f6fa;
+  color: #4e5968;
+  border-radius: 16px;
+  font-size: 14px;
+  font-weight: 500;
+`;
+
+function ProductTags({ tags }) {
+  if (!tags || tags.length === 0) return null;
+
+  return (
+    <Container>
+      <SectionTitle>상품 태그</SectionTitle>
+      <TagsContainer>
+        {tags.map((tag, index) => (
+          <Tag key={index}>#{tag}</Tag>
+        ))}
+      </TagsContainer>
+    </Container>
+  );
+}
+
+export default ProductTags;
diff --git a/react/my-react-app/src/components/product/SellerInfo.jsx b/react/my-react-app/src/components/product/SellerInfo.jsx
new file mode 100644
index 00000000..9d9ae5bd
--- /dev/null
+++ b/react/my-react-app/src/components/product/SellerInfo.jsx
@@ -0,0 +1,117 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const SectionTitle = styled.h3`
+  font-size: 16px;
+  font-weight: 600;
+  color: #222;
+  margin: 0;
+  margin-bottom: 8px;
+`;
+
+
+
+const SellerProfile = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  justify-content: space-between;
+`;
+
+const ProfileImage = styled.div`
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: ${(props) =>
+    props.$image ? `url(${props.$image}) center/cover` : "#F4F6FA"};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #8b95a1;
+  font-size: 20px;
+  border: 1px solid #e8ebf2;
+`;
+
+const SellerInfoContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+`;
+
+const SellerName = styled.div`
+  font-size: 16px;
+  font-weight: 500;
+  color: #222;
+`;
+
+const SellerDate = styled.div`
+  font-size: 14px;
+  color: #8b95a1;
+`;
+
+const FavoriteButton = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 16px;
+  border: 1px solid #e5e8ec;
+  background: transparent;
+  color: ${(props) => (props.$isFavorite ? "#FF597B" : "#4e5968")};
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: all 0.2s;
+
+  &:hover {
+    background: #f9f9f9;
+  }
+`;
+
+const FavoriteIcon = styled.img`
+  width: 15px;
+  height: 15px;
+  margin-right: 4px;
+  object-fit: contain;
+  vertical-align: middle;
+`;
+
+
+
+function SellerInfo({ nickname, image, createdAt, favoriteCount, isFavorite, onFavoriteClick }) {
+  // 프로필 이미지가 없을 경우 이니셜을 표시
+  const initial = nickname ? nickname[0].toUpperCase() : "?";
+  
+  // 날짜 포맷팅 함수
+  const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, '0')}.${String(date.getDate()).padStart(2, '0')}`;
+  };
+
+  return (
+    <Container>
+      <SectionTitle>판매자 정보</SectionTitle>
+      <SellerProfile>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+          <ProfileImage $image={image}>{!image && initial}</ProfileImage>
+          <SellerInfoContainer>
+            <SellerName>{nickname}</SellerName>
+            <SellerDate>{createdAt ? formatDate(createdAt) : '2024.01.02'}</SellerDate>
+          </SellerInfoContainer>
+        </div>
+        <FavoriteButton onClick={onFavoriteClick} $isFavorite={isFavorite}>
+          <FavoriteIcon src="/images/icons/Icon.png" alt="Favorite" />
+          {favoriteCount || 123}
+        </FavoriteButton>
+      </SellerProfile>
+    </Container>
+  );
+}
+
+export default SellerInfo;
diff --git a/react/my-react-app/src/components/ui/TextArea.jsx b/react/my-react-app/src/components/ui/TextArea.jsx
index 79fe7fea..fb182606 100644
--- a/react/my-react-app/src/components/ui/TextArea.jsx
+++ b/react/my-react-app/src/components/ui/TextArea.jsx
@@ -18,7 +18,8 @@ const StyledTextArea = styled.textarea`
   }
 
   &::placeholder {
-    color: #999;
+    color: #666;
+    opacity: 1;
   }
 `;
 
diff --git a/react/my-react-app/src/pages/HomePage.jsx b/react/my-react-app/src/pages/HomePage.jsx
index 78f4d4cb..756e28e4 100644
--- a/react/my-react-app/src/pages/HomePage.jsx
+++ b/react/my-react-app/src/pages/HomePage.jsx
@@ -11,7 +11,7 @@ function HomePage() {
             <br />
             거래해 보세요
           </h1>
-          <Link to="/products" className="button pill-button">
+          <Link to="/items" className="button pill-button">
             구경하러 가기
           </Link>
         </div>
diff --git a/react/my-react-app/src/pages/ProductDetailPage.jsx b/react/my-react-app/src/pages/ProductDetailPage.jsx
index 6f77f560..30bd6caf 100644
--- a/react/my-react-app/src/pages/ProductDetailPage.jsx
+++ b/react/my-react-app/src/pages/ProductDetailPage.jsx
@@ -1,12 +1,54 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef, useCallback } from "react";
 import { useParams, Link } from "react-router-dom";
 import styled from "styled-components";
+import { productAPI } from "../api/products";
+import ProductImages from "../components/product/ProductImages";
+import ProductInfo from "../components/product/ProductInfo";
+import ProductTags from "../components/product/ProductTags";
+import SellerInfo from "../components/product/SellerInfo";
+import FormField from "../components/ui/FormField";
+import Button from "../components/ui/Button";
+
+const PageContainer = styled.div`
+  margin: 0 auto;
+  padding-top: 120px;
+  margin-bottom: 10px;
+`;
+
+const CommonContainer = styled.div`
+  width: 100%;
+  max-width: 344px; /* 모바일 기본 너비 */
+  margin: 0 auto;
+  box-sizing: border-box;
+
+  /* 태블릿 화면 */
+  @media (min-width: 768px) {
+    max-width: 696px;
+  }
+
+  /* 데스크톱 화면 */
+  @media (min-width: 1280px) {
+    max-width: 1200px;
+  }
+`;
+
+const FormHeader = styled(CommonContainer)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+`;
+
+const Title = styled.h2`
+  font-size: 20px;
+  font-weight: 700;
+  margin: 0;
+`;
 
 const ProductDetailContainer = styled.div`
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px;
-  padding-top: 100px;
 `;
 
 const LoadingSpinner = styled.div`
@@ -23,40 +65,507 @@ const ErrorMessage = styled.div`
   margin-top: 100px;
 `;
 
-const BackButton = styled(Link)`
-  display: inline-flex;
-  align-items: center;
+const Divider = styled.hr`
+  border: none;
+  border-top: 1px solid #dfdfdf;
+  width: 100%;
+  max-width: 1200px;
+  margin: 40px auto;
+`;
+
+const ContentLayout = styled.div`
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+  margin-top: 24px;
+
+  @media (min-width: 1024px) {
+    grid-template-columns: 486px 1fr;
+    gap: 48px;
+  }
+`;
+
+const ProductDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+`;
+
+const CommentsSection = styled.div`
+  margin-top: 40px;
+  width: 100%;
+`;
+
+const SectionTitle = styled.h3`
+  font-size: 18px;
+  font-weight: 600;
+  color: #222;
+  margin-bottom: 16px;
+`;
+
+const CommentForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 24px;
+  padding: 0;
+  border-radius: 8px;
+`;
+
+const CommentInput = styled.textarea`
+  width: 100%;
+  height: 104px;
+  border-radius: 8px;
+  border: 1px solid #e5e8ec;
+  background-color: #ffffff;
+  padding: 16px;
+  font-size: 14px;
+  resize: none;
+  box-sizing: border-box;
+  color: #333333;
+  font-family: inherit;
+
+  &:focus {
+    border-color: #007aff;
+    outline: none;
+  }
+
+  &::placeholder {
+    color: #666;
+    opacity: 1;
+  }
+`;
+
+const NoticeText = styled.p`
+  font-size: 12px;
+  color: #777;
+  margin-top: 8px;
+  margin-bottom: 16px;
+  line-height: 1.4;
+`;
+
+const SubmitButton = styled.button`
+  align-self: flex-end;
   padding: 8px 16px;
+  background-color: #6c757d;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #5a6268;
+  }
+`;
+
+const CommentList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const MessageParagraph = styled.p`
+  text-align: center;
+  color: #8b95a1;
+  padding: 20px;
+  font-size: 14px;
+`;
+
+const CommentItem = styled.div`
   margin-bottom: 20px;
-  color: #4e5968;
-  text-decoration: none;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #f0f0f0;
+`;
+
+const CommentAvatar = styled.div`
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666;
   font-weight: 600;
+  flex-shrink: 0;
+  margin-right: 8px;
+`;
+
+const CommentKebabMenu = styled.div`
+  position: relative;
+  cursor: pointer;
+`;
+
+const KebabIcon = styled.div`
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666;
+
+  &:hover {
+    color: #333;
+  }
+`;
+
+const KebabMenuDropdown = styled.div`
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background-color: white;
+  border: 1px solid #e5e8ec;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+  min-width: 100px;
+`;
+
+const KebabMenuItem = styled.button`
+  width: 100%;
+  text-align: left;
+  padding: 8px 12px;
+  background: none;
+  border: none;
+  font-size: 14px;
+  color: #333;
+  cursor: pointer;
 
   &:hover {
-    color: #3692ff;
+    background-color: #f5f5f5;
   }
 `;
 
+const CommentHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 8px;
+`;
+
+const CommentAuthor = styled.span`
+  font-weight: 500;
+  color: #666;
+  margin-right: 8px;
+`;
+
+const CommentDate = styled.span`
+  color: #999;
+`;
+
+const CommentText = styled.p`
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #333;
+  flex-grow: 1;
+`;
+
+const CommentFooter = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+  font-size: 12px;
+  color: #999;
+`;
+
+const Header = styled.h1`
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 32px;
+`;
+
+// 디폴트 문구 정의
+const DEFAULT_COMMENT =
+  "개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다.";
+
+// 시간 포맷 함수
+const formatTimeAgo = (dateString) => {
+  const now = new Date();
+  const date = new Date(dateString);
+  const diffInSeconds = Math.floor((now - date) / 1000);
+
+  if (diffInSeconds < 60) {
+    return "방금 전";
+  }
+
+  const diffInMinutes = Math.floor(diffInSeconds / 60);
+  if (diffInMinutes < 60) {
+    return `${diffInMinutes}분 전`;
+  }
+
+  const diffInHours = Math.floor(diffInMinutes / 60);
+  if (diffInHours < 24) {
+    return `${diffInHours}시간 전`;
+  }
+
+  const diffInDays = Math.floor(diffInHours / 24);
+  if (diffInDays < 30) {
+    return `${diffInDays}일 전`;
+  }
+
+  const diffInMonths = Math.floor(diffInDays / 30);
+  if (diffInMonths < 12) {
+    return `${diffInMonths}개월 전`;
+  }
+
+  const diffInYears = Math.floor(diffInMonths / 12);
+  return `${diffInYears}년 전`;
+};
+
 function ProductDetailPage() {
   const { productId } = useParams();
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [product, setProduct] = useState(null);
+  const [comments, setComments] = useState([]);
+  const [loadingComments, setLoadingComments] = useState(false);
+  const [commentError, setCommentError] = useState(null);
+  const [newComment, setNewComment] = useState(DEFAULT_COMMENT);
+  const [submittingComment, setSubmittingComment] = useState(false);
+  const commentInputRef = useRef(null);
+
+  // 포커스 핸들러: 입력창 클릭 시 디폴트 문구 제거
+  const handleCommentFocus = () => {
+    if (newComment === DEFAULT_COMMENT) {
+      setNewComment("");
+    }
+  };
+
+  // 블러 핸들러: 입력이 없으면 디폴트 문구 복원
+  const handleCommentBlur = () => {
+    if (!newComment.trim()) {
+      setNewComment(DEFAULT_COMMENT);
+    }
+  };
+
+  const handleFavoriteClick = async () => {
+    try {
+      if (!product) return;
+
+      const api = product.isFavorite
+        ? productAPI.removeFavorite
+        : productAPI.addFavorite;
+      const { data } = await api(productId);
+      setProduct(data);
+    } catch (err) {
+      console.error("Failed to toggle favorite:", err);
+      // TODO: 에러 처리
+    }
+  };
+
+  // 댓글 목록 가져오기
+  const fetchComments = useCallback(async () => {
+    if (!productId) return;
+
+    setLoadingComments(true);
+    setCommentError(null);
+
+    try {
+      const { data } = await productAPI.getComments(productId, null, 10);
+      const formattedComments = data.list.map((comment) => ({
+        id: comment.id,
+        author: comment.writer.nickname,
+        content: comment.content,
+        createdAt: comment.createdAt,
+        timeAgo: formatTimeAgo(comment.createdAt),
+        date: new Date(comment.createdAt)
+          .toLocaleDateString("ko-KR", {
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+          })
+          .replace(/\. /g, ".")
+          .replace(/\.$/, ""),
+        avatar:
+          comment.writer.image || comment.writer.nickname[0].toUpperCase(),
+        writerId: comment.writer.id,
+        showMenu: false,
+      }));
+
+      setComments(formattedComments);
+    } catch (err) {
+      console.error("Failed to fetch comments:", err);
+      setCommentError("댓글을 불러오는데 실패했습니다.");
+    } finally {
+      setLoadingComments(false);
+    }
+  }, [productId]);
+
+  // 댓글 작성 제출
+  const handleCommentSubmit = async (e) => {
+    e.preventDefault();
+    if (
+      !newComment.trim() ||
+      newComment === DEFAULT_COMMENT ||
+      submittingComment
+    )
+      return;
+
+    setSubmittingComment(true);
+
+    try {
+      const { data } = await productAPI.addComment(productId, newComment);
+
+      const formattedComment = {
+        id: data.id,
+        author: data.writer.nickname,
+        content: data.content,
+        createdAt: data.createdAt,
+        timeAgo: formatTimeAgo(data.createdAt),
+        date: new Date(data.createdAt)
+          .toLocaleDateString("ko-KR", {
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+          })
+          .replace(/\. /g, ".")
+          .replace(/\.$/, ""),
+        avatar: data.writer.image || data.writer.nickname[0].toUpperCase(),
+        writerId: data.writer.id,
+        showMenu: false,
+      };
+
+      setComments([formattedComment, ...comments]);
+      setNewComment(DEFAULT_COMMENT);
+    } catch (err) {
+      console.error("Failed to submit comment:", err);
+      alert("댓글 작성에 실패했습니다. 다시 시도해주세요.");
+    } finally {
+      setSubmittingComment(false);
+    }
+  };
+
+  const handleCommentChange = (e) => {
+    setNewComment(e.target.value);
+  };
 
   useEffect(() => {
-    // TODO: API 연동 후 구현
-    setLoading(false);
+    const fetchProduct = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        const { data } = await productAPI.getDetail(productId);
+        setProduct(data);
+      } catch (err) {
+        setError(
+          err.response?.data?.message || "상품 정보를 불러오는데 실패했습니다."
+        );
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProduct();
   }, [productId]);
 
+  useEffect(() => {
+    if (!loading && product) {
+      fetchComments();
+    }
+  }, [loading, product, fetchComments]);
+
   if (loading) return <LoadingSpinner>Loading...</LoadingSpinner>;
   if (error) return <ErrorMessage>{error}</ErrorMessage>;
+  if (!product) return null;
 
   return (
-    <ProductDetailContainer>
-      <BackButton to="/products">← 목록으로 돌아가기</BackButton>
-      {/* TODO: 상품 상세 정보 컴포넌트들 추가 예정 */}
-      <div>Product ID: {productId}</div>
-    </ProductDetailContainer>
+    <PageContainer>
+      <FormHeader>
+        <Title>상품 상세</Title>
+      </FormHeader>
+      <ProductDetailContainer>
+        <ContentLayout>
+          <div>
+            <ProductImages images={product.images} />
+          </div>
+          <ProductDetails>
+            <ProductInfo
+              name={product.name}
+              price={product.price}
+              description={product.description}
+            />
+            <ProductTags tags={product.tags} />
+            <SellerInfo
+              nickname={product.ownerNickname}
+              image={product.ownerImage}
+              createdAt={product.createdAt}
+              favoriteCount={product.favoriteCount}
+              isFavorite={product.isFavorite}
+              onFavoriteClick={handleFavoriteClick}
+            />
+          </ProductDetails>
+        </ContentLayout>
+
+        <Divider />
+
+        <CommentsSection>
+          <SectionTitle>문의하기</SectionTitle>
+          <CommentForm onSubmit={handleCommentSubmit}>
+            <FormField
+              type="textarea"
+              label=""
+              placeholder={DEFAULT_COMMENT}
+              value={newComment}
+              onChange={handleCommentChange}
+              onFocus={handleCommentFocus}
+              onBlur={handleCommentBlur}
+            />
+            <SubmitButton type="submit">등록</SubmitButton>
+          </CommentForm>
+
+          <CommentList>
+            {loadingComments ? (
+              <MessageParagraph>댓글을 불러오는 중...</MessageParagraph>
+            ) : commentError ? (
+              <MessageParagraph>
+                댓글을 불러오는데 오류가 발생했습니다.
+              </MessageParagraph>
+            ) : comments.length === 0 ? (
+              <MessageParagraph>
+                아직 댓글이 없습니다. 처음으로 댓글을 남겨보세요!
+              </MessageParagraph>
+            ) : (
+              comments.map((comment) => (
+                <CommentItem key={comment.id}>
+                  <CommentHeader>
+                    <CommentText>{comment.content}</CommentText>
+                    <CommentKebabMenu>
+                      <KebabIcon
+                        onClick={() => {
+                          // 케밥 메뉴 토글 로직 추가
+                          const updatedComments = comments.map((c) =>
+                            c.id === comment.id
+                              ? { ...c, showMenu: !c.showMenu }
+                              : { ...c, showMenu: false }
+                          );
+                          setComments(updatedComments);
+                        }}
+                      >
+                        ⋮
+                      </KebabIcon>
+                      {comment.showMenu && (
+                        <KebabMenuDropdown>
+                          <KebabMenuItem>수정하기</KebabMenuItem>
+                          <KebabMenuItem>삭제하기</KebabMenuItem>
+                        </KebabMenuDropdown>
+                      )}
+                    </CommentKebabMenu>
+                  </CommentHeader>
+                  <CommentFooter>
+                    <CommentAvatar>{comment.avatar}</CommentAvatar>
+                    <CommentAuthor>{comment.author}</CommentAuthor>
+                    <CommentDate>{comment.timeAgo}</CommentDate>
+                  </CommentFooter>
+                </CommentItem>
+              ))
+            )}
+          </CommentList>
+        </CommentsSection>
+      </ProductDetailContainer>
+    </PageContainer>
   );
 }
 
diff --git a/react/my-react-app/src/pages/ProductsPage.jsx b/react/my-react-app/src/pages/ProductsPage.jsx
index a7102fe7..a9c4aa3e 100644
--- a/react/my-react-app/src/pages/ProductsPage.jsx
+++ b/react/my-react-app/src/pages/ProductsPage.jsx
@@ -1,9 +1,47 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
+import styled from "styled-components";
 import useWindowSize from "../hooks/useWindowSize";
 import BestItemsSection from "../components/BestItemsSection";
 import AllItemsSection from "../components/AllItemsSection";
 import { ErrorMessage, ProductsPageContainer } from "./ProductsPage.styled";
+import Button from "../components/ui/Button";
+
+const PageContainer = styled.div`
+  margin: 0 auto;
+  padding-top: 10px;
+  margin-bottom: 10px;
+`;
+
+const CommonContainer = styled.div`
+  width: 100%;
+  max-width: 344px; /* 모바일 기본 너비 */
+  margin: 0 auto;
+  box-sizing: border-box;
+
+  /* 태블릿 화면 */
+  @media (min-width: 768px) {
+    max-width: 696px;
+  }
+
+  /* 데스크톱 화면 */
+  @media (min-width: 1280px) {
+    max-width: 1200px;
+  }
+`;
+
+const FormHeader = styled(CommonContainer)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+`;
+
+const Title = styled.h2`
+  font-size: 20px;
+  font-weight: 700;
+  margin: 0;
+`;
 
 const API_BASE_URL = "https://panda-market-api.vercel.app/";
 
@@ -191,25 +229,27 @@ function ProductsPage() {
   }
 
   return (
-    <ProductsPageContainer>
-      <BestItemsSection items={visibleBestItems} loading={loadingBest} />
-
-      <AllItemsSection
-        items={visibleAllItems}
-        loading={loadingAll}
-        inputValue={inputValue}
-        handleSearchInputChange={handleSearchInputChange}
-        handleSearchSubmit={handleSearchSubmit}
-        orderBy={sort}
-        handleSortChange={handleSortChange}
-        windowWidth={windowWidth}
-        currentPage={page}
-        totalPages={totalPages}
-        handlePageChange={handlePageChange}
-        mobileSortOpen={mobileSortOpen}
-        setMobileSortOpen={setMobileSortOpen}
-      />
-    </ProductsPageContainer>
+    <PageContainer>
+      <ProductsPageContainer>
+        <BestItemsSection items={visibleBestItems} loading={loadingBest} />
+
+        <AllItemsSection
+          items={visibleAllItems}
+          loading={loadingAll}
+          inputValue={inputValue}
+          handleSearchInputChange={handleSearchInputChange}
+          handleSearchSubmit={handleSearchSubmit}
+          orderBy={sort}
+          handleSortChange={handleSortChange}
+          windowWidth={windowWidth}
+          currentPage={page}
+          totalPages={totalPages}
+          handlePageChange={handlePageChange}
+          mobileSortOpen={mobileSortOpen}
+          setMobileSortOpen={setMobileSortOpen}
+        />
+      </ProductsPageContainer>
+    </PageContainer>
   );
 }
 
diff --git a/react/my-react-app/src/pages/ProductsPage.styled.js b/react/my-react-app/src/pages/ProductsPage.styled.js
index fff26be9..e998dc7d 100644
--- a/react/my-react-app/src/pages/ProductsPage.styled.js
+++ b/react/my-react-app/src/pages/ProductsPage.styled.js
@@ -5,8 +5,7 @@ import { Link } from "react-router-dom";
 export const ProductsPageContainer = styled.div`
   max-width: 1200px;
   margin: 0 auto;
-  padding: 20px;
-  padding-top: 100px;
+  padding: 0 20px 20px 20px;
 `;
 
 // Section containers
@@ -17,7 +16,7 @@ export const SectionContainer = styled.section`
 export const SectionTitle = styled.h2`
   font-size: 24px;
   font-weight: bold;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 `;
 
 // All items header
@@ -50,13 +49,15 @@ export const TitleRow = styled.div`
 
 export const AllItemsTitle = styled.h2`
   margin-bottom: 0;
-  margin-right: 12px;
+  margin-right: 20px;
   font-size: 24px;
   font-weight: bold;
   white-space: nowrap;
+  flex-shrink: 0;
 
   @media (max-width: 767px) {
     font-size: 20px;
+    margin-right: 10px;
   }
 `;
 
@@ -66,12 +67,14 @@ export const HeaderControls = styled.div`
   align-items: center;
   gap: 12px;
   flex: 1;
-  justify-content: flex-end;
+  justify-content: space-between;
+  width: 100%;
 
   @media (max-width: 767px) {
     width: 100%;
     justify-content: space-between;
     flex-wrap: nowrap;
+    margin-top: 12px;
   }
 `;
 
diff --git a/react/my-react-app/src/utils/dateUtils.js b/react/my-react-app/src/utils/dateUtils.js
new file mode 100644
index 00000000..58942237
--- /dev/null
+++ b/react/my-react-app/src/utils/dateUtils.js
@@ -0,0 +1,7 @@
+export const formatDate = (dateString) => {
+  const date = new Date(dateString);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}.${month}.${day}`;
+};
diff --git a/react/my-react-app/src/utils/format.js b/react/my-react-app/src/utils/format.js
new file mode 100644
index 00000000..9aab874a
--- /dev/null
+++ b/react/my-react-app/src/utils/format.js
@@ -0,0 +1,11 @@
+export const formatPrice = (price) => {
+  return price.toLocaleString();
+};
+
+export const formatDate = (date) => {
+  const d = new Date(date);
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${year}. ${month}. ${day}`;
+};

From 1683b0cb12318e97201407e5500d8c5517f1ee82 Mon Sep 17 00:00:00 2001
From: kyunghoon <insightdany@naver.com>
Date: Wed, 21 May 2025 19:49:49 +0900
Subject: [PATCH 05/10] =?UTF-8?q?items=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=9D=BC=EB=B6=80=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/AllItemsSection.jsx        | 44 +++++++++++++------
 .../src/components/Pagination.jsx             |  2 +-
 .../src/components/SearchForm.jsx             |  1 -
 .../src/pages/ProductsPage.styled.js          | 10 ++---
 4 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/react/my-react-app/src/components/AllItemsSection.jsx b/react/my-react-app/src/components/AllItemsSection.jsx
index 861a128a..c281b4a3 100644
--- a/react/my-react-app/src/components/AllItemsSection.jsx
+++ b/react/my-react-app/src/components/AllItemsSection.jsx
@@ -45,9 +45,15 @@ function AllItemsSection({
     <SectionContainer>
       {/* 데스크톱 & 태블릿 모드 (768px 이상) */}
       {windowWidth > 767 ? (
-        <AllItemsHeader style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <AllItemsHeader
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+          }}
+        >
           <AllItemsTitle>전체 상품</AllItemsTitle>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+          <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
             <SearchForm
               value={inputValue}
               onChange={handleSearchInputChange}
@@ -68,13 +74,32 @@ function AllItemsSection({
         /* 모바일 모드 (767px 이하) */
         <AllItemsHeader>
           {/* 첫 번째 줄: 전체 상품 텍스트와 상품 등록하기 버튼 */}
-          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
             <AllItemsTitle>전체 상품</AllItemsTitle>
             <MobileAddButton to="/additem">상품 등록하기</MobileAddButton>
           </div>
-          
-          {/* 두 번째 줄: 정렬 드롭다운과 검색창 */}
-          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+
+          {/* 두 번째 줄: 검색창과 정렬 드롭다운 */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "12px",
+              justifyContent: windowWidth <= 767 ? "flex-end" : undefined,
+            }}
+          >
+            <SearchForm
+              value={inputValue}
+              onChange={handleSearchInputChange}
+              onSubmit={handleSearchSubmit}
+              style={{ flex: 1 }}
+            />
             <Dropdown
               options={sortOptions}
               selectedValue={orderBy}
@@ -83,16 +108,9 @@ function AllItemsSection({
               isOpen={mobileSortOpen}
               setIsOpen={setMobileSortOpen}
             />
-            <SearchForm
-              value={inputValue}
-              onChange={handleSearchInputChange}
-              onSubmit={handleSearchSubmit}
-              style={{ flex: 1 }}
-            />
           </div>
         </AllItemsHeader>
       )}
-      
 
       {loading ? (
         <MessageParagraph>상품 로딩 중...</MessageParagraph>
diff --git a/react/my-react-app/src/components/Pagination.jsx b/react/my-react-app/src/components/Pagination.jsx
index fdec80a4..e2dff370 100644
--- a/react/my-react-app/src/components/Pagination.jsx
+++ b/react/my-react-app/src/components/Pagination.jsx
@@ -16,7 +16,7 @@ const PageButton = styled.button`
   justify-content: center;
   width: 36px;
   height: 36px;
-  border-radius: 8px;
+  border-radius: 50%;
   border: 1px solid #e5e8ec;
   background-color: #ffffff;
   color: #4e5968;
diff --git a/react/my-react-app/src/components/SearchForm.jsx b/react/my-react-app/src/components/SearchForm.jsx
index df846730..53dcc639 100644
--- a/react/my-react-app/src/components/SearchForm.jsx
+++ b/react/my-react-app/src/components/SearchForm.jsx
@@ -19,7 +19,6 @@ const SearchFormContainer = styled.form`
     flex-shrink: 1;
     width: 100%; /* Full width on mobile */
     margin-top: 10px;
-    order: 3; /* Move to bottom on mobile */
   }
 `;
 
diff --git a/react/my-react-app/src/pages/ProductsPage.styled.js b/react/my-react-app/src/pages/ProductsPage.styled.js
index e998dc7d..e2a7fd7a 100644
--- a/react/my-react-app/src/pages/ProductsPage.styled.js
+++ b/react/my-react-app/src/pages/ProductsPage.styled.js
@@ -5,7 +5,7 @@ import { Link } from "react-router-dom";
 export const ProductsPageContainer = styled.div`
   max-width: 1200px;
   margin: 0 auto;
-  padding: 0 20px 20px 20px;
+  padding: 0 30px 20px 20px;
 `;
 
 // Section containers
@@ -17,6 +17,7 @@ export const SectionTitle = styled.h2`
   font-size: 24px;
   font-weight: bold;
   margin-bottom: 10px;
+  margin-left: 10px;
 `;
 
 // All items header
@@ -54,11 +55,7 @@ export const AllItemsTitle = styled.h2`
   font-weight: bold;
   white-space: nowrap;
   flex-shrink: 0;
-
-  @media (max-width: 767px) {
-    font-size: 20px;
-    margin-right: 10px;
-  }
+  margin-left: 10px;
 `;
 
 export const HeaderControls = styled.div`
@@ -252,6 +249,7 @@ export const AllItemsGrid = styled(ItemsGrid)`
   margin-left: auto;
   margin-right: auto;
   justify-content: center;
+  padding-left: 10px;
 
   @media (max-width: 767px) {
     grid-template-columns: repeat(2, 1fr);

From 85e42c303b9a205502860a0852f79e7704e12f98 Mon Sep 17 00:00:00 2001
From: kyunghoon <insightdany@naver.com>
Date: Thu, 22 May 2025 00:01:32 +0900
Subject: [PATCH 06/10] =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=B3=84=20fo?=
 =?UTF-8?q?oter=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20nav=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=B3=84=EB=A1=9C=20?=
 =?UTF-8?q?=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 react/my-react-app/src/components/Header.jsx     | 14 ++++++--------
 react/my-react-app/src/components/Layout.jsx     | 10 ++++++++--
 .../src/components/product/ProductImages.jsx     | 11 ++++++++++-
 react/my-react-app/src/global.css                | 14 ++++++++++++++
 react/my-react-app/src/pages/AddItemPage.jsx     |  2 +-
 .../my-react-app/src/pages/ProductDetailPage.jsx | 12 ++++++++----
 .../src/pages/ProductsPage.styled.js             | 16 ++++++++--------
 7 files changed, 55 insertions(+), 24 deletions(-)

diff --git a/react/my-react-app/src/components/Header.jsx b/react/my-react-app/src/components/Header.jsx
index efdaea07..65bead18 100644
--- a/react/my-react-app/src/components/Header.jsx
+++ b/react/my-react-app/src/components/Header.jsx
@@ -9,8 +9,8 @@ function Header() {
   };
   const location = useLocation();
   const isItemsOrAddItemPage =
-    location.pathname === "/items" || 
-    location.pathname.startsWith("/items/") || 
+    location.pathname === "/items" ||
+    location.pathname.startsWith("/items/") ||
     location.pathname === "/additem";
 
   return (
@@ -27,17 +27,15 @@ function Header() {
           <nav className="header-nav">
             <NavLink
               to="/community"
-              style={({ isActive }) => (isActive ? activeStyle : undefined)}
+              style={{}} // Remove the active style
+              className="community-link"
             >
               자유게시판
             </NavLink>
             <NavLink
               to="/items"
-              style={({ isActive }) =>
-                isActive || location.pathname === "/additem"
-                  ? activeStyle
-                  : undefined
-              }
+              style={{}} // Remove the active style
+              className="market-link"
             >
               중고마켓
             </NavLink>
diff --git a/react/my-react-app/src/components/Layout.jsx b/react/my-react-app/src/components/Layout.jsx
index 3104f19f..3f1c211a 100644
--- a/react/my-react-app/src/components/Layout.jsx
+++ b/react/my-react-app/src/components/Layout.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Outlet } from "react-router-dom";
+import { Outlet, useLocation } from "react-router-dom";
 import styled from "styled-components";
 import Header from "./Header";
 import Footer from "./Footer";
@@ -16,13 +16,19 @@ const MainContent = styled.main`
 `;
 
 function Layout() {
+  const location = useLocation();
+  // Hide footer on /additem, /items, and product detail pages (/items/:productId)
+  const hideFooter = location.pathname === "/additem" || 
+                    location.pathname === "/items" || 
+                    location.pathname.startsWith("/items/");
+
   return (
     <LayoutContainer>
       <Header />
       <MainContent>
         <Outlet />
       </MainContent>
-      <Footer />
+      {!hideFooter && <Footer />}
     </LayoutContainer>
   );
 }
diff --git a/react/my-react-app/src/components/product/ProductImages.jsx b/react/my-react-app/src/components/product/ProductImages.jsx
index 32aec2b8..6418e166 100644
--- a/react/my-react-app/src/components/product/ProductImages.jsx
+++ b/react/my-react-app/src/components/product/ProductImages.jsx
@@ -2,8 +2,17 @@ import React, { useState } from "react";
 import styled from "styled-components";
 
 const ImageContainer = styled.div`
-  width: 100%;
+  width: 343px;
+  height: 343px;
+  margin: 0 auto;
+
+  /* 태블릿 화면 */
+  @media (min-width: 768px) and (max-width: 1023px) {
+    width: 340px;
+    height: 340px;
+  }
 
+  /* 데스크톱 화면 */
   @media (min-width: 1024px) {
     width: 486px;
     height: 486px;
diff --git a/react/my-react-app/src/global.css b/react/my-react-app/src/global.css
index 9d387c30..a9b01d9a 100644
--- a/react/my-react-app/src/global.css
+++ b/react/my-react-app/src/global.css
@@ -212,10 +212,24 @@ button {
   font-weight: 500;
 }
 
+.header-nav a.community-link,
+.header-nav a.market-link {
+  font-weight: bold;
+}
+
 .header-nav a:hover {
   color: var(--blue);
 }
 
+.header-nav a.active-link {
+  color: var(--gray-600);
+  font-weight: bold;
+}
+
+.header-nav a.active-link:hover {
+  color: var(--blue);
+}
+
 .header-right {
   display: flex;
   align-items: center;
diff --git a/react/my-react-app/src/pages/AddItemPage.jsx b/react/my-react-app/src/pages/AddItemPage.jsx
index 9309cd11..ebcdb73d 100644
--- a/react/my-react-app/src/pages/AddItemPage.jsx
+++ b/react/my-react-app/src/pages/AddItemPage.jsx
@@ -9,7 +9,7 @@ import TagInput from "../components/TagInput";
 
 const PageContainer = styled.div`
   margin: 0 auto;
-  padding-top: 120px;
+  padding-top: 10px;
   margin-bottom: 10px;
 `;
 
diff --git a/react/my-react-app/src/pages/ProductDetailPage.jsx b/react/my-react-app/src/pages/ProductDetailPage.jsx
index 30bd6caf..3e15c5eb 100644
--- a/react/my-react-app/src/pages/ProductDetailPage.jsx
+++ b/react/my-react-app/src/pages/ProductDetailPage.jsx
@@ -11,7 +11,7 @@ import Button from "../components/ui/Button";
 
 const PageContainer = styled.div`
   margin: 0 auto;
-  padding-top: 120px;
+  padding-top: 10px;
   margin-bottom: 10px;
 `;
 
@@ -79,6 +79,13 @@ const ContentLayout = styled.div`
   gap: 24px;
   margin-top: 24px;
 
+  /* 태블릿 화면 */
+  @media (min-width: 768px) and (max-width: 1023px) {
+    grid-template-columns: 340px 1fr;
+    gap: 32px;
+  }
+
+  /* 데스크톱 화면 */
   @media (min-width: 1024px) {
     grid-template-columns: 486px 1fr;
     gap: 48px;
@@ -473,9 +480,6 @@ function ProductDetailPage() {
 
   return (
     <PageContainer>
-      <FormHeader>
-        <Title>상품 상세</Title>
-      </FormHeader>
       <ProductDetailContainer>
         <ContentLayout>
           <div>
diff --git a/react/my-react-app/src/pages/ProductsPage.styled.js b/react/my-react-app/src/pages/ProductsPage.styled.js
index e2a7fd7a..d13ae118 100644
--- a/react/my-react-app/src/pages/ProductsPage.styled.js
+++ b/react/my-react-app/src/pages/ProductsPage.styled.js
@@ -83,7 +83,7 @@ export const Group2 = styled.div`
   justify-content: flex-end;
   min-width: 0;
 
-  @media (max-width: 1279px) {
+  @media (max-width: 1199px) {
     justify-content: flex-start;
   }
 `;
@@ -229,14 +229,14 @@ export const ItemsGrid = styled.div`
 `;
 
 export const BestItemsGrid = styled(ItemsGrid)`
-  grid-template-columns: 343px;
+  grid-template-columns: 344px;
   justify-content: center;
 
-  @media (min-width: 768px) {
-    grid-template-columns: repeat(2, 343px);
+  @media (min-width: 768px) and (max-width: 1199px) {
+    grid-template-columns: repeat(2, 344px);
   }
 
-  @media (min-width: 1280px) {
+  @media (min-width: 1200px) {
     grid-template-columns: repeat(4, 282px);
   }
 `;
@@ -255,12 +255,12 @@ export const AllItemsGrid = styled(ItemsGrid)`
     grid-template-columns: repeat(2, 1fr);
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 768px) and (max-width: 1199px) {
     grid-template-columns: repeat(3, 221px);
-    max-width: 1200px;
+    max-width: 1199px;
   }
 
-  @media (min-width: 1280px) {
+  @media (min-width: 1200px) {
     grid-template-columns: repeat(5, 224px);
     max-width: 1200px;
   }

From ab33125be9d6ba6d60e7c63f09e979786ac46024 Mon Sep 17 00:00:00 2001
From: kyunghoon <insightdany@naver.com>
Date: Thu, 22 May 2025 00:07:22 +0900
Subject: [PATCH 07/10] =?UTF-8?q?=EC=83=81=ED=92=88=EC=83=81=EC=84=B8?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EC=9E=85=EB=A0=A5=EC=B0=BD=20=EA=B8=B0?=
 =?UTF-8?q?=EB=B3=B8=EB=AC=B8=EA=B5=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/ProductDetailPage.jsx           | 20 +++++++------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/react/my-react-app/src/pages/ProductDetailPage.jsx b/react/my-react-app/src/pages/ProductDetailPage.jsx
index 3e15c5eb..e28940d2 100644
--- a/react/my-react-app/src/pages/ProductDetailPage.jsx
+++ b/react/my-react-app/src/pages/ProductDetailPage.jsx
@@ -124,7 +124,7 @@ const CommentInput = styled.textarea`
   height: 104px;
   border-radius: 8px;
   border: 1px solid #e5e8ec;
-  background-color: #ffffff;
+  background-color: #f4f6fa;
   padding: 16px;
   font-size: 14px;
   resize: none;
@@ -330,22 +330,18 @@ function ProductDetailPage() {
   const [comments, setComments] = useState([]);
   const [loadingComments, setLoadingComments] = useState(false);
   const [commentError, setCommentError] = useState(null);
-  const [newComment, setNewComment] = useState(DEFAULT_COMMENT);
+  const [newComment, setNewComment] = useState("");
   const [submittingComment, setSubmittingComment] = useState(false);
   const commentInputRef = useRef(null);
 
-  // 포커스 핸들러: 입력창 클릭 시 디폴트 문구 제거
+  // 포커스 핸들러: 더 이상 필요하지 않음 (placeholder 사용)
   const handleCommentFocus = () => {
-    if (newComment === DEFAULT_COMMENT) {
-      setNewComment("");
-    }
+    // 플레이스홀더를 사용하므로 아무 작업도 하지 않음
   };
 
-  // 블러 핸들러: 입력이 없으면 디폴트 문구 복원
+  // 블러 핸들러: 더 이상 필요하지 않음 (placeholder 사용)
   const handleCommentBlur = () => {
-    if (!newComment.trim()) {
-      setNewComment(DEFAULT_COMMENT);
-    }
+    // 플레이스홀더를 사용하므로 아무 작업도 하지 않음
   };
 
   const handleFavoriteClick = async () => {
@@ -508,9 +504,7 @@ function ProductDetailPage() {
         <CommentsSection>
           <SectionTitle>문의하기</SectionTitle>
           <CommentForm onSubmit={handleCommentSubmit}>
-            <FormField
-              type="textarea"
-              label=""
+            <CommentInput
               placeholder={DEFAULT_COMMENT}
               value={newComment}
               onChange={handleCommentChange}

From 838922de32a08e185743269ab7a59148c66f0b40 Mon Sep 17 00:00:00 2001
From: kyunghoon <insightdany@naver.com>
Date: Thu, 22 May 2025 00:41:24 +0900
Subject: [PATCH 08/10] =?UTF-8?q?refactor:=20=EC=83=81=ED=92=88=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=ED=99=94=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/comment/CommentItem.jsx    | 125 ++++++
 .../src/components/comment/CommentSection.jsx | 133 ++++++
 .../src/components/product/ProductDetails.jsx |  34 ++
 .../src/components/ui/LoadingErrorHandler.jsx |  24 +
 .../src/pages/ProductDetailPage.jsx           | 421 +++---------------
 react/my-react-app/src/utils/timeFormat.js    |  37 ++
 6 files changed, 416 insertions(+), 358 deletions(-)
 create mode 100644 react/my-react-app/src/components/comment/CommentItem.jsx
 create mode 100644 react/my-react-app/src/components/comment/CommentSection.jsx
 create mode 100644 react/my-react-app/src/components/product/ProductDetails.jsx
 create mode 100644 react/my-react-app/src/components/ui/LoadingErrorHandler.jsx
 create mode 100644 react/my-react-app/src/utils/timeFormat.js

diff --git a/react/my-react-app/src/components/comment/CommentItem.jsx b/react/my-react-app/src/components/comment/CommentItem.jsx
new file mode 100644
index 00000000..cdf27197
--- /dev/null
+++ b/react/my-react-app/src/components/comment/CommentItem.jsx
@@ -0,0 +1,125 @@
+import React from "react";
+import styled from "styled-components";
+
+const CommentItemContainer = styled.div`
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #f0f0f0;
+`;
+
+const CommentHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 8px;
+`;
+
+const CommentText = styled.p`
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #333;
+  flex-grow: 1;
+`;
+
+const CommentFooter = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+  font-size: 12px;
+  color: #999;
+`;
+
+const CommentAvatar = styled.div`
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666;
+  font-weight: 600;
+  flex-shrink: 0;
+  margin-right: 8px;
+`;
+
+const CommentAuthor = styled.span`
+  font-weight: 500;
+  margin-right: 8px;
+`;
+
+const CommentDate = styled.span`
+  color: #999;
+`;
+
+const CommentKebabMenu = styled.div`
+  position: relative;
+  cursor: pointer;
+`;
+
+const KebabIcon = styled.div`
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666;
+
+  &:hover {
+    color: #333;
+  }
+`;
+
+const KebabMenuDropdown = styled.div`
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background-color: white;
+  border: 1px solid #e5e8ec;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+  min-width: 100px;
+`;
+
+const KebabMenuItem = styled.button`
+  width: 100%;
+  text-align: left;
+  padding: 8px 12px;
+  background: none;
+  border: none;
+  font-size: 14px;
+  color: #333;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
+`;
+
+function CommentItem({ comment, onToggleMenu }) {
+  return (
+    <CommentItemContainer>
+      <CommentHeader>
+        <CommentText>{comment.content}</CommentText>
+        <CommentKebabMenu>
+          <KebabIcon onClick={() => onToggleMenu(comment.id)}>⋮</KebabIcon>
+          {comment.showMenu && (
+            <KebabMenuDropdown>
+              <KebabMenuItem>수정하기</KebabMenuItem>
+              <KebabMenuItem>삭제하기</KebabMenuItem>
+            </KebabMenuDropdown>
+          )}
+        </CommentKebabMenu>
+      </CommentHeader>
+      <CommentFooter>
+        <CommentAvatar>{comment.avatar}</CommentAvatar>
+        <CommentAuthor>{comment.author}</CommentAuthor>
+        <CommentDate>{comment.timeAgo}</CommentDate>
+      </CommentFooter>
+    </CommentItemContainer>
+  );
+}
+
+export default CommentItem;
diff --git a/react/my-react-app/src/components/comment/CommentSection.jsx b/react/my-react-app/src/components/comment/CommentSection.jsx
new file mode 100644
index 00000000..d35011da
--- /dev/null
+++ b/react/my-react-app/src/components/comment/CommentSection.jsx
@@ -0,0 +1,133 @@
+import React from "react";
+import styled from "styled-components";
+import CommentItem from "./CommentItem";
+
+const CommentsContainer = styled.div`
+  margin-top: 40px;
+  width: 100%;
+`;
+
+const SectionTitle = styled.h3`
+  font-size: 18px;
+  font-weight: 600;
+  color: #222;
+  margin-bottom: 16px;
+`;
+
+const CommentForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 24px;
+  padding: 0;
+  border-radius: 8px;
+`;
+
+const CommentInput = styled.textarea`
+  width: 100%;
+  height: 104px;
+  border-radius: 8px;
+  border: 1px solid #e5e8ec;
+  background-color: #f4f6fa;
+  padding: 16px;
+  font-size: 14px;
+  resize: none;
+  box-sizing: border-box;
+  color: #333333;
+  font-family: inherit;
+
+  &:focus {
+    border-color: #007aff;
+    outline: none;
+  }
+
+  &::placeholder {
+    color: #666;
+    opacity: 1;
+  }
+`;
+
+const SubmitButton = styled.button`
+  align-self: flex-end;
+  padding: 8px 16px;
+  background-color: #6c757d;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #5a6268;
+  }
+`;
+
+const CommentList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const MessageParagraph = styled.p`
+  text-align: center;
+  color: #8b95a1;
+  padding: 20px;
+  font-size: 14px;
+`;
+
+// 디폴트 문구 정의
+const DEFAULT_COMMENT =
+  "개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다.";
+
+function CommentSection({
+  comments,
+  newComment,
+  loadingComments,
+  commentError,
+  onCommentChange,
+  onCommentSubmit,
+  onCommentFocus,
+  onCommentBlur,
+  onToggleMenu
+}) {
+  return (
+    <CommentsContainer>
+      <SectionTitle>문의하기</SectionTitle>
+      <CommentForm onSubmit={onCommentSubmit}>
+        <CommentInput
+          placeholder={DEFAULT_COMMENT}
+          value={newComment}
+          onChange={onCommentChange}
+          onFocus={onCommentFocus}
+          onBlur={onCommentBlur}
+        />
+        <SubmitButton type="submit">등록</SubmitButton>
+      </CommentForm>
+
+      <CommentList>
+        {loadingComments ? (
+          <MessageParagraph>댓글을 불러오는 중...</MessageParagraph>
+        ) : commentError ? (
+          <MessageParagraph>
+            댓글을 불러오는데 오류가 발생했습니다.
+          </MessageParagraph>
+        ) : comments.length === 0 ? (
+          <MessageParagraph>
+            아직 댓글이 없습니다. 처음으로 댓글을 남겨보세요!
+          </MessageParagraph>
+        ) : (
+          comments.map((comment) => (
+            <CommentItem 
+              key={comment.id} 
+              comment={comment} 
+              onToggleMenu={onToggleMenu}
+            />
+          ))
+        )}
+      </CommentList>
+    </CommentsContainer>
+  );
+}
+
+export default CommentSection;
diff --git a/react/my-react-app/src/components/product/ProductDetails.jsx b/react/my-react-app/src/components/product/ProductDetails.jsx
new file mode 100644
index 00000000..fffc036f
--- /dev/null
+++ b/react/my-react-app/src/components/product/ProductDetails.jsx
@@ -0,0 +1,34 @@
+import React from "react";
+import styled from "styled-components";
+import ProductInfo from "./ProductInfo";
+import ProductTags from "./ProductTags";
+import SellerInfo from "./SellerInfo";
+
+const ProductDetailsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+`;
+
+function ProductDetails({ product, onFavoriteClick }) {
+  return (
+    <ProductDetailsContainer>
+      <ProductInfo
+        name={product.name}
+        price={product.price}
+        description={product.description}
+      />
+      <ProductTags tags={product.tags} />
+      <SellerInfo
+        nickname={product.ownerNickname}
+        image={product.ownerImage}
+        createdAt={product.createdAt}
+        favoriteCount={product.favoriteCount}
+        isFavorite={product.isFavorite}
+        onFavoriteClick={onFavoriteClick}
+      />
+    </ProductDetailsContainer>
+  );
+}
+
+export default ProductDetails;
diff --git a/react/my-react-app/src/components/ui/LoadingErrorHandler.jsx b/react/my-react-app/src/components/ui/LoadingErrorHandler.jsx
new file mode 100644
index 00000000..a7666723
--- /dev/null
+++ b/react/my-react-app/src/components/ui/LoadingErrorHandler.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+import styled from "styled-components";
+
+const LoadingSpinner = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+`;
+
+const ErrorMessage = styled.div`
+  text-align: center;
+  color: #e53935;
+  padding: 20px;
+  margin-top: 100px;
+`;
+
+function LoadingErrorHandler({ loading, error, children }) {
+  if (loading) return <LoadingSpinner>Loading...</LoadingSpinner>;
+  if (error) return <ErrorMessage>{error}</ErrorMessage>;
+  return children;
+}
+
+export default LoadingErrorHandler;
diff --git a/react/my-react-app/src/pages/ProductDetailPage.jsx b/react/my-react-app/src/pages/ProductDetailPage.jsx
index e28940d2..adbee814 100644
--- a/react/my-react-app/src/pages/ProductDetailPage.jsx
+++ b/react/my-react-app/src/pages/ProductDetailPage.jsx
@@ -1,13 +1,12 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
-import { useParams, Link } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import styled from "styled-components";
 import { productAPI } from "../api/products";
 import ProductImages from "../components/product/ProductImages";
-import ProductInfo from "../components/product/ProductInfo";
-import ProductTags from "../components/product/ProductTags";
-import SellerInfo from "../components/product/SellerInfo";
-import FormField from "../components/ui/FormField";
-import Button from "../components/ui/Button";
+import ProductDetails from "../components/product/ProductDetails";
+import CommentSection from "../components/comment/CommentSection";
+import LoadingErrorHandler from "../components/ui/LoadingErrorHandler";
+import { formatTimeAgo } from "../utils/timeFormat";
 
 const PageContainer = styled.div`
   margin: 0 auto;
@@ -92,236 +91,6 @@ const ContentLayout = styled.div`
   }
 `;
 
-const ProductDetails = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-`;
-
-const CommentsSection = styled.div`
-  margin-top: 40px;
-  width: 100%;
-`;
-
-const SectionTitle = styled.h3`
-  font-size: 18px;
-  font-weight: 600;
-  color: #222;
-  margin-bottom: 16px;
-`;
-
-const CommentForm = styled.form`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin-bottom: 24px;
-  padding: 0;
-  border-radius: 8px;
-`;
-
-const CommentInput = styled.textarea`
-  width: 100%;
-  height: 104px;
-  border-radius: 8px;
-  border: 1px solid #e5e8ec;
-  background-color: #f4f6fa;
-  padding: 16px;
-  font-size: 14px;
-  resize: none;
-  box-sizing: border-box;
-  color: #333333;
-  font-family: inherit;
-
-  &:focus {
-    border-color: #007aff;
-    outline: none;
-  }
-
-  &::placeholder {
-    color: #666;
-    opacity: 1;
-  }
-`;
-
-const NoticeText = styled.p`
-  font-size: 12px;
-  color: #777;
-  margin-top: 8px;
-  margin-bottom: 16px;
-  line-height: 1.4;
-`;
-
-const SubmitButton = styled.button`
-  align-self: flex-end;
-  padding: 8px 16px;
-  background-color: #6c757d;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 0.2s;
-
-  &:hover {
-    background-color: #5a6268;
-  }
-`;
-
-const CommentList = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-`;
-
-const MessageParagraph = styled.p`
-  text-align: center;
-  color: #8b95a1;
-  padding: 20px;
-  font-size: 14px;
-`;
-
-const CommentItem = styled.div`
-  margin-bottom: 20px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid #f0f0f0;
-`;
-
-const CommentAvatar = styled.div`
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background-color: #f0f0f0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #666;
-  font-weight: 600;
-  flex-shrink: 0;
-  margin-right: 8px;
-`;
-
-const CommentKebabMenu = styled.div`
-  position: relative;
-  cursor: pointer;
-`;
-
-const KebabIcon = styled.div`
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #666;
-
-  &:hover {
-    color: #333;
-  }
-`;
-
-const KebabMenuDropdown = styled.div`
-  position: absolute;
-  top: 100%;
-  right: 0;
-  background-color: white;
-  border: 1px solid #e5e8ec;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  z-index: 10;
-  min-width: 100px;
-`;
-
-const KebabMenuItem = styled.button`
-  width: 100%;
-  text-align: left;
-  padding: 8px 12px;
-  background: none;
-  border: none;
-  font-size: 14px;
-  color: #333;
-  cursor: pointer;
-
-  &:hover {
-    background-color: #f5f5f5;
-  }
-`;
-
-const CommentHeader = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 8px;
-`;
-
-const CommentAuthor = styled.span`
-  font-weight: 500;
-  color: #666;
-  margin-right: 8px;
-`;
-
-const CommentDate = styled.span`
-  color: #999;
-`;
-
-const CommentText = styled.p`
-  margin: 0;
-  font-size: 14px;
-  line-height: 1.5;
-  color: #333;
-  flex-grow: 1;
-`;
-
-const CommentFooter = styled.div`
-  display: flex;
-  align-items: center;
-  margin-top: 8px;
-  font-size: 12px;
-  color: #999;
-`;
-
-const Header = styled.h1`
-  font-size: 24px;
-  font-weight: 600;
-  margin-bottom: 32px;
-`;
-
-// 디폴트 문구 정의
-const DEFAULT_COMMENT =
-  "개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다.";
-
-// 시간 포맷 함수
-const formatTimeAgo = (dateString) => {
-  const now = new Date();
-  const date = new Date(dateString);
-  const diffInSeconds = Math.floor((now - date) / 1000);
-
-  if (diffInSeconds < 60) {
-    return "방금 전";
-  }
-
-  const diffInMinutes = Math.floor(diffInSeconds / 60);
-  if (diffInMinutes < 60) {
-    return `${diffInMinutes}분 전`;
-  }
-
-  const diffInHours = Math.floor(diffInMinutes / 60);
-  if (diffInHours < 24) {
-    return `${diffInHours}시간 전`;
-  }
-
-  const diffInDays = Math.floor(diffInHours / 24);
-  if (diffInDays < 30) {
-    return `${diffInDays}일 전`;
-  }
-
-  const diffInMonths = Math.floor(diffInDays / 30);
-  if (diffInMonths < 12) {
-    return `${diffInMonths}개월 전`;
-  }
-
-  const diffInYears = Math.floor(diffInMonths / 12);
-  return `${diffInYears}년 전`;
-};
-
 function ProductDetailPage() {
   const { productId } = useParams();
   const [loading, setLoading] = useState(true);
@@ -332,16 +101,15 @@ function ProductDetailPage() {
   const [commentError, setCommentError] = useState(null);
   const [newComment, setNewComment] = useState("");
   const [submittingComment, setSubmittingComment] = useState(false);
-  const commentInputRef = useRef(null);
 
-  // 포커스 핸들러: 더 이상 필요하지 않음 (placeholder 사용)
-  const handleCommentFocus = () => {
-    // 플레이스홀더를 사용하므로 아무 작업도 하지 않음
-  };
-
-  // 블러 핸들러: 더 이상 필요하지 않음 (placeholder 사용)
-  const handleCommentBlur = () => {
-    // 플레이스홀더를 사용하므로 아무 작업도 하지 않음
+  // 댓글 메뉴 토글 핸들러
+  const handleToggleCommentMenu = (commentId) => {
+    const updatedComments = comments.map((comment) =>
+      comment.id === commentId
+        ? { ...comment, showMenu: !comment.showMenu }
+        : { ...comment, showMenu: false }
+    );
+    setComments(updatedComments);
   };
 
   const handleFavoriteClick = async () => {
@@ -355,7 +123,6 @@ function ProductDetailPage() {
       setProduct(data);
     } catch (err) {
       console.error("Failed to toggle favorite:", err);
-      // TODO: 에러 처리
     }
   };
 
@@ -380,18 +147,18 @@ function ProductDetailPage() {
             month: "2-digit",
             day: "2-digit",
           })
-          .replace(/\. /g, ".")
+          .replace(/\. /g, "-")
           .replace(/\.$/, ""),
-        avatar:
-          comment.writer.image || comment.writer.nickname[0].toUpperCase(),
-        writerId: comment.writer.id,
+        avatar: comment.writer.nickname.charAt(0),
         showMenu: false,
       }));
 
       setComments(formattedComments);
     } catch (err) {
       console.error("Failed to fetch comments:", err);
-      setCommentError("댓글을 불러오는데 실패했습니다.");
+      setCommentError(
+        err.response?.data?.message || "댓글을 불러오는데 실패했습니다."
+      );
     } finally {
       setLoadingComments(false);
     }
@@ -400,19 +167,17 @@ function ProductDetailPage() {
   // 댓글 작성 제출
   const handleCommentSubmit = async (e) => {
     e.preventDefault();
-    if (
-      !newComment.trim() ||
-      newComment === DEFAULT_COMMENT ||
-      submittingComment
-    )
-      return;
+    if (!newComment.trim() || submittingComment) return;
 
     setSubmittingComment(true);
 
     try {
-      const { data } = await productAPI.addComment(productId, newComment);
+      const { data } = await productAPI.addComment(productId, {
+        content: newComment,
+      });
 
-      const formattedComment = {
+      // 새 댓글 추가
+      const newCommentObj = {
         id: data.id,
         author: data.writer.nickname,
         content: data.content,
@@ -424,18 +189,19 @@ function ProductDetailPage() {
             month: "2-digit",
             day: "2-digit",
           })
-          .replace(/\. /g, ".")
+          .replace(/\. /g, "-")
           .replace(/\.$/, ""),
-        avatar: data.writer.image || data.writer.nickname[0].toUpperCase(),
-        writerId: data.writer.id,
+        avatar: data.writer.nickname.charAt(0),
         showMenu: false,
       };
 
-      setComments([formattedComment, ...comments]);
-      setNewComment(DEFAULT_COMMENT);
+      setComments([newCommentObj, ...comments]);
+      setNewComment("");
     } catch (err) {
-      console.error("Failed to submit comment:", err);
-      alert("댓글 작성에 실패했습니다. 다시 시도해주세요.");
+      console.error("Failed to add comment:", err);
+      alert(
+        err.response?.data?.message || "댓글 작성에 실패했습니다. 다시 시도해주세요."
+      );
     } finally {
       setSubmittingComment(false);
     }
@@ -445,6 +211,7 @@ function ProductDetailPage() {
     setNewComment(e.target.value);
   };
 
+  // 상품 정보 가져오기
   useEffect(() => {
     const fetchProduct = async () => {
       try {
@@ -470,100 +237,38 @@ function ProductDetailPage() {
     }
   }, [loading, product, fetchComments]);
 
-  if (loading) return <LoadingSpinner>Loading...</LoadingSpinner>;
-  if (error) return <ErrorMessage>{error}</ErrorMessage>;
-  if (!product) return null;
-
   return (
-    <PageContainer>
-      <ProductDetailContainer>
-        <ContentLayout>
-          <div>
-            <ProductImages images={product.images} />
-          </div>
-          <ProductDetails>
-            <ProductInfo
-              name={product.name}
-              price={product.price}
-              description={product.description}
-            />
-            <ProductTags tags={product.tags} />
-            <SellerInfo
-              nickname={product.ownerNickname}
-              image={product.ownerImage}
-              createdAt={product.createdAt}
-              favoriteCount={product.favoriteCount}
-              isFavorite={product.isFavorite}
-              onFavoriteClick={handleFavoriteClick}
-            />
-          </ProductDetails>
-        </ContentLayout>
-
-        <Divider />
-
-        <CommentsSection>
-          <SectionTitle>문의하기</SectionTitle>
-          <CommentForm onSubmit={handleCommentSubmit}>
-            <CommentInput
-              placeholder={DEFAULT_COMMENT}
-              value={newComment}
-              onChange={handleCommentChange}
-              onFocus={handleCommentFocus}
-              onBlur={handleCommentBlur}
+    <LoadingErrorHandler loading={loading} error={error}>
+      {product && (
+        <PageContainer>
+          <ProductDetailContainer>
+            <ContentLayout>
+              <div>
+                <ProductImages images={product.images} />
+              </div>
+              <ProductDetails
+                product={product}
+                onFavoriteClick={handleFavoriteClick}
+              />
+            </ContentLayout>
+
+            <Divider />
+
+            <CommentSection
+              comments={comments}
+              newComment={newComment}
+              loadingComments={loadingComments}
+              commentError={commentError}
+              onCommentChange={handleCommentChange}
+              onCommentSubmit={handleCommentSubmit}
+              onCommentFocus={() => {}}
+              onCommentBlur={() => {}}
+              onToggleMenu={handleToggleCommentMenu}
             />
-            <SubmitButton type="submit">등록</SubmitButton>
-          </CommentForm>
-
-          <CommentList>
-            {loadingComments ? (
-              <MessageParagraph>댓글을 불러오는 중...</MessageParagraph>
-            ) : commentError ? (
-              <MessageParagraph>
-                댓글을 불러오는데 오류가 발생했습니다.
-              </MessageParagraph>
-            ) : comments.length === 0 ? (
-              <MessageParagraph>
-                아직 댓글이 없습니다. 처음으로 댓글을 남겨보세요!
-              </MessageParagraph>
-            ) : (
-              comments.map((comment) => (
-                <CommentItem key={comment.id}>
-                  <CommentHeader>
-                    <CommentText>{comment.content}</CommentText>
-                    <CommentKebabMenu>
-                      <KebabIcon
-                        onClick={() => {
-                          // 케밥 메뉴 토글 로직 추가
-                          const updatedComments = comments.map((c) =>
-                            c.id === comment.id
-                              ? { ...c, showMenu: !c.showMenu }
-                              : { ...c, showMenu: false }
-                          );
-                          setComments(updatedComments);
-                        }}
-                      >
-                        ⋮
-                      </KebabIcon>
-                      {comment.showMenu && (
-                        <KebabMenuDropdown>
-                          <KebabMenuItem>수정하기</KebabMenuItem>
-                          <KebabMenuItem>삭제하기</KebabMenuItem>
-                        </KebabMenuDropdown>
-                      )}
-                    </CommentKebabMenu>
-                  </CommentHeader>
-                  <CommentFooter>
-                    <CommentAvatar>{comment.avatar}</CommentAvatar>
-                    <CommentAuthor>{comment.author}</CommentAuthor>
-                    <CommentDate>{comment.timeAgo}</CommentDate>
-                  </CommentFooter>
-                </CommentItem>
-              ))
-            )}
-          </CommentList>
-        </CommentsSection>
-      </ProductDetailContainer>
-    </PageContainer>
+          </ProductDetailContainer>
+        </PageContainer>
+      )}
+    </LoadingErrorHandler>
   );
 }
 
diff --git a/react/my-react-app/src/utils/timeFormat.js b/react/my-react-app/src/utils/timeFormat.js
new file mode 100644
index 00000000..8476dfa5
--- /dev/null
+++ b/react/my-react-app/src/utils/timeFormat.js
@@ -0,0 +1,37 @@
+/**
+ * 시간을 '~전' 형식으로 포맷팅하는 함수
+ * @param {string} dateString - 날짜 문자열
+ * @returns {string} 포맷팅된 시간 문자열
+ */
+export const formatTimeAgo = (dateString) => {
+  const now = new Date();
+  const date = new Date(dateString);
+  const diffInSeconds = Math.floor((now - date) / 1000);
+
+  if (diffInSeconds < 60) {
+    return "방금 전";
+  }
+
+  const diffInMinutes = Math.floor(diffInSeconds / 60);
+  if (diffInMinutes < 60) {
+    return `${diffInMinutes}분 전`;
+  }
+
+  const diffInHours = Math.floor(diffInMinutes / 60);
+  if (diffInHours < 24) {
+    return `${diffInHours}시간 전`;
+  }
+
+  const diffInDays = Math.floor(diffInHours / 24);
+  if (diffInDays < 30) {
+    return `${diffInDays}일 전`;
+  }
+
+  const diffInMonths = Math.floor(diffInDays / 30);
+  if (diffInMonths < 12) {
+    return `${diffInMonths}개월 전`;
+  }
+
+  const diffInYears = Math.floor(diffInMonths / 12);
+  return `${diffInYears}년 전`;
+};

From 047e62dc29e1db1a3dadeb4ac3509937c7c21bed Mon Sep 17 00:00:00 2001
From: kyunghoon <insightdany@naver.com>
Date: Thu, 22 May 2025 01:19:47 +0900
Subject: [PATCH 09/10] =?UTF-8?q?/additem=20ui=20=EC=9D=BC=EB=B6=80?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ui/NumberInput.jsx         |   9 +-
 react/my-react-app/src/pages/AddItemPage.jsx  | 197 +++++++++++-------
 .../src/pages/ProductDetailPage.jsx           |  90 +-------
 react/my-react-app/src/pages/ProductsPage.jsx |  36 +---
 react/my-react-app/src/pages/SigninPage.jsx   |  25 +--
 react/my-react-app/src/pages/SignupPage.jsx   |  25 +--
 .../src/styles/common/CommonStyles.js         |  57 +++++
 .../src/styles/pages/AddItemPage.styled.js    |  41 ++++
 .../styles/pages/ProductDetailPage.styled.js  |  45 ++++
 .../src/styles/pages/ProductsPage.styled.js   |   4 +
 .../src/styles/pages/SigninPage.styled.js     |  24 +++
 11 files changed, 304 insertions(+), 249 deletions(-)
 create mode 100644 react/my-react-app/src/styles/common/CommonStyles.js
 create mode 100644 react/my-react-app/src/styles/pages/AddItemPage.styled.js
 create mode 100644 react/my-react-app/src/styles/pages/ProductDetailPage.styled.js
 create mode 100644 react/my-react-app/src/styles/pages/ProductsPage.styled.js
 create mode 100644 react/my-react-app/src/styles/pages/SigninPage.styled.js

diff --git a/react/my-react-app/src/components/ui/NumberInput.jsx b/react/my-react-app/src/components/ui/NumberInput.jsx
index e0fd9599..1d9f6bbe 100644
--- a/react/my-react-app/src/components/ui/NumberInput.jsx
+++ b/react/my-react-app/src/components/ui/NumberInput.jsx
@@ -31,7 +31,7 @@ const Input = styled.input`
   }
 `;
 
-function NumberInput({ label, error, onChange, ...props }) {
+function NumberInput({ label, error, onChange, onKeyDown, ...props }) {
   const handleChange = (e) => {
     const value = e.target.value.replace(/[^0-9]/g, "");
     onChange?.({ ...e, target: { ...e.target, value } });
@@ -39,7 +39,12 @@ function NumberInput({ label, error, onChange, ...props }) {
 
   return (
     <FormField label={label} error={error}>
-      <Input type="number" onChange={handleChange} {...props} />
+      <Input 
+        type="number" 
+        onChange={handleChange} 
+        onKeyDown={onKeyDown}
+        {...props} 
+      />
     </FormField>
   );
 }
diff --git a/react/my-react-app/src/pages/AddItemPage.jsx b/react/my-react-app/src/pages/AddItemPage.jsx
index ebcdb73d..9ecff43d 100644
--- a/react/my-react-app/src/pages/AddItemPage.jsx
+++ b/react/my-react-app/src/pages/AddItemPage.jsx
@@ -1,112 +1,144 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import ImageUpload from "../components/ImageUpload";
-import Button from "../components/ui/Button";
 import TextInput from "../components/ui/TextInput";
 import TextArea from "../components/ui/TextArea";
 import NumberInput from "../components/ui/NumberInput";
 import TagInput from "../components/TagInput";
-
-const PageContainer = styled.div`
-  margin: 0 auto;
-  padding-top: 10px;
-  margin-bottom: 10px;
-`;
-
-const CommonContainer = styled.div`
-  width: 100%;
-  max-width: 344px; /* 모바일 기본 너비 */
-  margin: 0 auto;
-  box-sizing: border-box;
-
-  /* 태블릿 화면 */
-  @media (min-width: 768px) {
-    max-width: 696px;
-  }
-
-  /* 데스크톱 화면 */
-  @media (min-width: 1280px) {
-    max-width: 1200px;
-  }
-`;
-
-const FormHeader = styled(CommonContainer)`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 24px;
-`;
-
-const Title = styled.h2`
-  font-size: 20px;
-  font-weight: 700;
-  margin: 0;
-`;
-
-const SubmitButton = styled(Button)`
+import {
+  PageContainer,
+  FormHeader,
+  Title,
+  FormSection,
+  ImageSection,
+  ImageLabel,
+  ErrorMessage,
+} from "../styles/pages/AddItemPage.styled";
+
+// 직접 버튼 컴포넌트 생성
+const RegisterButton = styled.button`
   width: 100px;
   margin-left: 16px;
-`;
-
-const FormSection = styled(CommonContainer)`
-  margin-bottom: 24px;
-`;
-
-const ImageSection = styled(CommonContainer)`
-  margin-bottom: 30px;
-`;
-
-const ImageLabel = styled.div`
+  padding: 8px 16px;
+  font-size: 16px;
   font-weight: 600;
-  margin-bottom: 8px;
-  display: block;
-`;
-
-const ErrorMessage = styled.div`
-  color: #f74747;
-  font-size: 14px;
-  margin-top: 8px;
+  height: 40px;
+  border-radius: 8px;
+  border: none;
+  color: white;
+  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+  background-color: ${(props) => (props.disabled ? "#B0B8C1" : "#3692FF")};
+  opacity: ${(props) => (props.disabled ? 0.7 : 1)};
 `;
 
 function AddItemPage() {
-  const [images, setImages] = useState([]);
-  const [title, setTitle] = useState("");
-  const [desc, setDesc] = useState("");
-  const [price, setPrice] = useState("");
-  const [tags, setTags] = useState([]);
+  const [formData, setFormData] = useState({
+    images: [],
+    title: "",
+    desc: "",
+    price: "",
+    tags: [],
+  });
   const [error, setError] = useState("");
+  const [priceError, setPriceError] = useState("");
+
+  // 폼 유효성 검사 함수
+  const validateForm = () => {
+    return (
+      formData.images.length > 0 &&
+      formData.title.trim() !== "" &&
+      formData.desc.trim() !== "" &&
+      formData.price.trim() !== "" &&
+      formData.tags.length > 0
+    );
+  };
 
-  const isFormValid =
-    title.trim() && desc.trim() && price.trim() && tags.length > 0;
-
+  // 이미지 업로드 핸들러
   const handleImagesChange = (imgs) => {
     if (imgs.length > 1) {
       setError("이미지 등록은 최대 1개까지 가능합니다.");
       return;
     }
-    setImages(imgs);
+    setFormData({ ...formData, images: imgs });
     setError("");
   };
 
+  // 텍스트 입력 핸들러
+  const handleTextChange = (e, field) => {
+    let value = e.target.value;
+    
+    if (field === "price") {
+      // 숫자가 아닌 문자가 입력되었는지 확인
+      if (/[^0-9]/.test(value)) {
+        setPriceError("숫자만 입력해주세요.");
+        // 숫자가 아닌 문자 제거
+        value = value.replace(/[^0-9]/g, "");
+      } else {
+        setPriceError("");
+      }
+    }
+    
+    setFormData({ ...formData, [field]: value });
+  };
+  
+  // 판매가격 입력창 키 입력 이벤트 핸들러
+  const handlePriceKeyDown = (e) => {
+    // 숫자 키, 백스페이스, 딜리트, 탭, 방향키만 허용
+    const allowedKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
+    
+    if (!allowedKeys.includes(e.key)) {
+      e.preventDefault();
+      setPriceError("숫자만 입력해주세요.");
+    } else {
+      // 숫자나 허용된 키를 입력하면 에러 메시지 삭제
+      setPriceError("");
+    }
+  };
+
+  // 태그 추가 핸들러
+  const handleAddTag = (tag) => {
+    setFormData({
+      ...formData,
+      tags: [...formData.tags, tag],
+    });
+  };
+
+  // 태그 제거 핸들러
+  const handleRemoveTag = (tag) => {
+    setFormData({
+      ...formData,
+      tags: formData.tags.filter((t) => t !== tag),
+    });
+  };
+
+  // 폼 제출 핸들러
   const handleSubmit = (e) => {
     e.preventDefault();
-    alert("상품이 등록되었습니다! (API 연동 전)");
+    if (validateForm()) {
+      alert("상품이 등록되었습니다! (API 연동 전)");
+      console.log("Form submitted with data:", formData);
+    } else {
+      alert("모든 필드를 입력해주세요.");
+    }
   };
 
+  // 폼 유효성 상태
+  const isFormValid = validateForm();
+
   return (
     <PageContainer>
       <form onSubmit={handleSubmit} autoComplete="off">
         <FormHeader>
           <Title>상품 등록하기</Title>
-          <SubmitButton type="submit" disabled={!isFormValid}>
+          <RegisterButton type="submit" disabled={!isFormValid}>
             등록
-          </SubmitButton>
+          </RegisterButton>
         </FormHeader>
 
         <ImageSection>
           <ImageLabel>상품 이미지</ImageLabel>
           <ImageUpload
-            images={images}
+            images={formData.images}
             onImagesChange={handleImagesChange}
             max={1}
           />
@@ -117,8 +149,8 @@ function AddItemPage() {
           <TextInput
             label="상품명"
             placeholder="상품명을 입력해주세요"
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
+            value={formData.title}
+            onChange={(e) => handleTextChange(e, "title")}
             maxLength={40}
           />
         </FormSection>
@@ -127,8 +159,8 @@ function AddItemPage() {
           <TextArea
             label="상품 소개"
             placeholder="상품 소개를 입력해주세요"
-            value={desc}
-            onChange={(e) => setDesc(e.target.value)}
+            value={formData.desc}
+            onChange={(e) => handleTextChange(e, "desc")}
             maxLength={500}
           />
         </FormSection>
@@ -137,18 +169,21 @@ function AddItemPage() {
           <NumberInput
             label="판매가격"
             placeholder="판매 가격을 입력해주세요"
-            value={price}
-            onChange={(e) => setPrice(e.target.value)}
+            value={formData.price}
+            onChange={(e) => handleTextChange(e, "price")}
+            onKeyDown={handlePriceKeyDown}
             min={0}
+            error={priceError}
           />
+          {priceError && <ErrorMessage>{priceError}</ErrorMessage>}
         </FormSection>
 
         <FormSection>
+          <div style={{ marginBottom: "8px", fontWeight: "600" }}>태그</div>
           <TagInput
-            label="태그"
-            tags={tags}
-            onAddTag={(tag) => setTags([...tags, tag])}
-            onRemoveTag={(tag) => setTags(tags.filter((t) => t !== tag))}
+            tags={formData.tags}
+            onAddTag={handleAddTag}
+            onRemoveTag={handleRemoveTag}
           />
         </FormSection>
       </form>
diff --git a/react/my-react-app/src/pages/ProductDetailPage.jsx b/react/my-react-app/src/pages/ProductDetailPage.jsx
index adbee814..26cbb39a 100644
--- a/react/my-react-app/src/pages/ProductDetailPage.jsx
+++ b/react/my-react-app/src/pages/ProductDetailPage.jsx
@@ -1,95 +1,19 @@
-import React, { useState, useEffect, useRef, useCallback } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { useParams } from "react-router-dom";
-import styled from "styled-components";
 import { productAPI } from "../api/products";
 import ProductImages from "../components/product/ProductImages";
 import ProductDetails from "../components/product/ProductDetails";
 import CommentSection from "../components/comment/CommentSection";
 import LoadingErrorHandler from "../components/ui/LoadingErrorHandler";
 import { formatTimeAgo } from "../utils/timeFormat";
+import {
+  PageContainer,
+  ProductDetailContainer,
+  ContentLayout,
+  Divider
+} from "../styles/pages/ProductDetailPage.styled.js";
 
-const PageContainer = styled.div`
-  margin: 0 auto;
-  padding-top: 10px;
-  margin-bottom: 10px;
-`;
 
-const CommonContainer = styled.div`
-  width: 100%;
-  max-width: 344px; /* 모바일 기본 너비 */
-  margin: 0 auto;
-  box-sizing: border-box;
-
-  /* 태블릿 화면 */
-  @media (min-width: 768px) {
-    max-width: 696px;
-  }
-
-  /* 데스크톱 화면 */
-  @media (min-width: 1280px) {
-    max-width: 1200px;
-  }
-`;
-
-const FormHeader = styled(CommonContainer)`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 24px;
-`;
-
-const Title = styled.h2`
-  font-size: 20px;
-  font-weight: 700;
-  margin: 0;
-`;
-
-const ProductDetailContainer = styled.div`
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 20px;
-`;
-
-const LoadingSpinner = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-`;
-
-const ErrorMessage = styled.div`
-  text-align: center;
-  color: #e53935;
-  padding: 20px;
-  margin-top: 100px;
-`;
-
-const Divider = styled.hr`
-  border: none;
-  border-top: 1px solid #dfdfdf;
-  width: 100%;
-  max-width: 1200px;
-  margin: 40px auto;
-`;
-
-const ContentLayout = styled.div`
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 24px;
-  margin-top: 24px;
-
-  /* 태블릿 화면 */
-  @media (min-width: 768px) and (max-width: 1023px) {
-    grid-template-columns: 340px 1fr;
-    gap: 32px;
-  }
-
-  /* 데스크톱 화면 */
-  @media (min-width: 1024px) {
-    grid-template-columns: 486px 1fr;
-    gap: 48px;
-  }
-`;
 
 function ProductDetailPage() {
   const { productId } = useParams();
diff --git a/react/my-react-app/src/pages/ProductsPage.jsx b/react/my-react-app/src/pages/ProductsPage.jsx
index a9c4aa3e..fb7152f8 100644
--- a/react/my-react-app/src/pages/ProductsPage.jsx
+++ b/react/my-react-app/src/pages/ProductsPage.jsx
@@ -1,47 +1,13 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
-import styled from "styled-components";
 import useWindowSize from "../hooks/useWindowSize";
 import BestItemsSection from "../components/BestItemsSection";
 import AllItemsSection from "../components/AllItemsSection";
 import { ErrorMessage, ProductsPageContainer } from "./ProductsPage.styled";
+import { PageContainer } from "../styles/pages/ProductsPage.styled";
 import Button from "../components/ui/Button";
 
-const PageContainer = styled.div`
-  margin: 0 auto;
-  padding-top: 10px;
-  margin-bottom: 10px;
-`;
 
-const CommonContainer = styled.div`
-  width: 100%;
-  max-width: 344px; /* 모바일 기본 너비 */
-  margin: 0 auto;
-  box-sizing: border-box;
-
-  /* 태블릿 화면 */
-  @media (min-width: 768px) {
-    max-width: 696px;
-  }
-
-  /* 데스크톱 화면 */
-  @media (min-width: 1280px) {
-    max-width: 1200px;
-  }
-`;
-
-const FormHeader = styled(CommonContainer)`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 24px;
-`;
-
-const Title = styled.h2`
-  font-size: 20px;
-  font-weight: 700;
-  margin: 0;
-`;
 
 const API_BASE_URL = "https://panda-market-api.vercel.app/";
 
diff --git a/react/my-react-app/src/pages/SigninPage.jsx b/react/my-react-app/src/pages/SigninPage.jsx
index 5af06adb..f078ba8c 100644
--- a/react/my-react-app/src/pages/SigninPage.jsx
+++ b/react/my-react-app/src/pages/SigninPage.jsx
@@ -1,30 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import "../auth.css"; // 경로 수정
-import styled from "styled-components";
-
-const AuthContainer = styled.div`
-  width: 100%;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-  background-color: #fff;
-
-  form {
-    width: 100%;
-    max-width: 640px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .input-item {
-    width: 100%;
-  }
-`;
+import { AuthContainer } from "../styles/pages/SigninPage.styled";
 
 function SigninPage() {
   const [email, setEmail] = useState("");
diff --git a/react/my-react-app/src/pages/SignupPage.jsx b/react/my-react-app/src/pages/SignupPage.jsx
index 3dbbf44d..047d84f5 100644
--- a/react/my-react-app/src/pages/SignupPage.jsx
+++ b/react/my-react-app/src/pages/SignupPage.jsx
@@ -1,30 +1,7 @@
 import React, { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import "../auth.css";
-import styled from "styled-components";
-
-const AuthContainer = styled.div`
-  width: 100%;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-  background-color: #fff;
-
-  form {
-    width: 100%;
-    max-width: 640px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .input-item {
-    width: 100%;
-  }
-`;
+import { AuthContainer } from "../styles/pages/SigninPage.styled";
 
 function SignupPage() {
   const [email, setEmail] = useState("");
diff --git a/react/my-react-app/src/styles/common/CommonStyles.js b/react/my-react-app/src/styles/common/CommonStyles.js
new file mode 100644
index 00000000..423723d8
--- /dev/null
+++ b/react/my-react-app/src/styles/common/CommonStyles.js
@@ -0,0 +1,57 @@
+import styled from "styled-components";
+
+// Common container used across multiple pages
+export const PageContainer = styled.div`
+  margin: 0 auto;
+  padding-top: 10px;
+  margin-bottom: 10px;
+`;
+
+// Responsive container with breakpoints for different screen sizes
+export const CommonContainer = styled.div`
+  width: 100%;
+  max-width: 344px; /* 모바일 기본 너비 */
+  margin: 0 auto;
+  box-sizing: border-box;
+
+  /* 태블릿 화면 */
+  @media (min-width: 768px) {
+    max-width: 696px;
+  }
+
+  /* 데스크톱 화면 */
+  @media (min-width: 1280px) {
+    max-width: 1200px;
+  }
+`;
+
+// Common form header used in multiple forms
+export const FormHeader = styled(CommonContainer)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+`;
+
+// Common title style used in multiple components
+export const Title = styled.h2`
+  font-size: 20px;
+  font-weight: 700;
+  margin: 0;
+`;
+
+// Common divider used in multiple pages
+export const Divider = styled.hr`
+  border: none;
+  border-top: 1px solid #dfdfdf;
+  width: 100%;
+  max-width: 1200px;
+  margin: 40px auto;
+`;
+
+// Common error message styling
+export const ErrorMessage = styled.div`
+  color: #f74747;
+  font-size: 14px;
+  margin-top: 8px;
+`;
diff --git a/react/my-react-app/src/styles/pages/AddItemPage.styled.js b/react/my-react-app/src/styles/pages/AddItemPage.styled.js
new file mode 100644
index 00000000..d68dba25
--- /dev/null
+++ b/react/my-react-app/src/styles/pages/AddItemPage.styled.js
@@ -0,0 +1,41 @@
+import styled from "styled-components";
+import Button from "../../components/ui/Button";
+import { PageContainer, CommonContainer, FormHeader, Title, ErrorMessage as CommonErrorMessage } from "../common/CommonStyles";
+
+export { PageContainer, FormHeader, Title };
+
+export const SubmitButton = styled.button`
+  width: 100px;
+  margin-left: 16px;
+  padding: 8px 16px;
+  font-size: 16px;
+  font-weight: 600;
+  height: 40px;
+  border-radius: 8px;
+  border: none;
+  color: white;
+  cursor: pointer;
+  background-color: #3692FF;
+  
+  &:disabled {
+    background-color: #B0B8C1;
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+`;
+
+export const FormSection = styled(CommonContainer)`
+  margin-bottom: 24px;
+`;
+
+export const ImageSection = styled(CommonContainer)`
+  margin-bottom: 30px;
+`;
+
+export const ImageLabel = styled.div`
+  font-weight: 600;
+  margin-bottom: 8px;
+  display: block;
+`;
+
+export const ErrorMessage = CommonErrorMessage;
diff --git a/react/my-react-app/src/styles/pages/ProductDetailPage.styled.js b/react/my-react-app/src/styles/pages/ProductDetailPage.styled.js
new file mode 100644
index 00000000..d4805231
--- /dev/null
+++ b/react/my-react-app/src/styles/pages/ProductDetailPage.styled.js
@@ -0,0 +1,45 @@
+import styled from "styled-components";
+import { PageContainer, CommonContainer, FormHeader, Title, Divider as CommonDivider } from "../common/CommonStyles";
+
+export { PageContainer, FormHeader, Title };
+
+export const ProductDetailContainer = styled.div`
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+`;
+
+export const LoadingSpinner = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+`;
+
+export const ErrorMessage = styled.div`
+  text-align: center;
+  color: #e53935;
+  padding: 20px;
+  margin-top: 100px;
+`;
+
+export const Divider = CommonDivider;
+
+export const ContentLayout = styled.div`
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+  margin-top: 24px;
+
+  /* 태블릿 화면 */
+  @media (min-width: 768px) and (max-width: 1023px) {
+    grid-template-columns: 340px 1fr;
+    gap: 32px;
+  }
+
+  /* 데스크톱 화면 */
+  @media (min-width: 1024px) {
+    grid-template-columns: 486px 1fr;
+    gap: 48px;
+  }
+`;
diff --git a/react/my-react-app/src/styles/pages/ProductsPage.styled.js b/react/my-react-app/src/styles/pages/ProductsPage.styled.js
new file mode 100644
index 00000000..b462a838
--- /dev/null
+++ b/react/my-react-app/src/styles/pages/ProductsPage.styled.js
@@ -0,0 +1,4 @@
+import styled from "styled-components";
+import { PageContainer, CommonContainer, FormHeader, Title } from "../common/CommonStyles";
+
+export { PageContainer, FormHeader, Title };
diff --git a/react/my-react-app/src/styles/pages/SigninPage.styled.js b/react/my-react-app/src/styles/pages/SigninPage.styled.js
new file mode 100644
index 00000000..a058b9bd
--- /dev/null
+++ b/react/my-react-app/src/styles/pages/SigninPage.styled.js
@@ -0,0 +1,24 @@
+import styled from "styled-components";
+
+export const AuthContainer = styled.div`
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background-color: #fff;
+
+  form {
+    width: 100%;
+    max-width: 640px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .input-item {
+    width: 100%;
+  }
+`;

From cdc297bb22afbf1340747aa77c9c129e97d8cc94 Mon Sep 17 00:00:00 2001
From: kyunghoon <insightdany@naver.com>
Date: Thu, 22 May 2025 01:28:17 +0900
Subject: [PATCH 10/10] =?UTF-8?q?refactor:=20styled=20component=20?=
 =?UTF-8?q?=EC=A4=91=EB=B3=B5=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/AllItemsSection.jsx        |   2 +-
 .../src/components/BestItemsSection.jsx       |   2 +-
 .../my-react-app/src/components/ItemCard.jsx  |   2 +-
 react/my-react-app/src/pages/ProductsPage.jsx |   3 +-
 .../src/pages/ProductsPage.styled.js          | 350 ------------------
 .../src/styles/pages/ProductsPage.styled.js   | 350 ++++++++++++++++++
 6 files changed, 354 insertions(+), 355 deletions(-)
 delete mode 100644 react/my-react-app/src/pages/ProductsPage.styled.js

diff --git a/react/my-react-app/src/components/AllItemsSection.jsx b/react/my-react-app/src/components/AllItemsSection.jsx
index c281b4a3..61ce4577 100644
--- a/react/my-react-app/src/components/AllItemsSection.jsx
+++ b/react/my-react-app/src/components/AllItemsSection.jsx
@@ -18,7 +18,7 @@ import {
   MobileSortButton,
   MobileSortMenu,
   MobileSortMenuItem,
-} from "../pages/ProductsPage.styled";
+} from "../styles/pages/ProductsPage.styled";
 
 function AllItemsSection({
   items,
diff --git a/react/my-react-app/src/components/BestItemsSection.jsx b/react/my-react-app/src/components/BestItemsSection.jsx
index cddee29f..11e5c2f4 100644
--- a/react/my-react-app/src/components/BestItemsSection.jsx
+++ b/react/my-react-app/src/components/BestItemsSection.jsx
@@ -5,7 +5,7 @@ import {
   SectionTitle,
   BestItemsGrid,
   MessageParagraph,
-} from "../pages/ProductsPage.styled";
+} from "../styles/pages/ProductsPage.styled";
 
 function BestItemsSection({ items, loading }) {
   return (
diff --git a/react/my-react-app/src/components/ItemCard.jsx b/react/my-react-app/src/components/ItemCard.jsx
index 383545e0..ff3b1b34 100644
--- a/react/my-react-app/src/components/ItemCard.jsx
+++ b/react/my-react-app/src/components/ItemCard.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 import ItemImage from "./ItemImage";
 import ItemCardContent from "./ItemCardContent";
-import { ItemCard as StyledItemCard } from "../pages/ProductsPage.styled";
+import { ItemCard as StyledItemCard } from "../styles/pages/ProductsPage.styled";
 
 function ItemCard({ item, imageType = "all" }) {
   const navigate = useNavigate();
diff --git a/react/my-react-app/src/pages/ProductsPage.jsx b/react/my-react-app/src/pages/ProductsPage.jsx
index fb7152f8..b81b6091 100644
--- a/react/my-react-app/src/pages/ProductsPage.jsx
+++ b/react/my-react-app/src/pages/ProductsPage.jsx
@@ -3,8 +3,7 @@ import { useNavigate, useLocation } from "react-router-dom";
 import useWindowSize from "../hooks/useWindowSize";
 import BestItemsSection from "../components/BestItemsSection";
 import AllItemsSection from "../components/AllItemsSection";
-import { ErrorMessage, ProductsPageContainer } from "./ProductsPage.styled";
-import { PageContainer } from "../styles/pages/ProductsPage.styled";
+import { ErrorMessage, ProductsPageContainer, PageContainer } from "../styles/pages/ProductsPage.styled";
 import Button from "../components/ui/Button";
 
 
diff --git a/react/my-react-app/src/pages/ProductsPage.styled.js b/react/my-react-app/src/pages/ProductsPage.styled.js
deleted file mode 100644
index d13ae118..00000000
--- a/react/my-react-app/src/pages/ProductsPage.styled.js
+++ /dev/null
@@ -1,350 +0,0 @@
-import styled from "styled-components";
-import { Link } from "react-router-dom";
-
-// Main container
-export const ProductsPageContainer = styled.div`
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 30px 20px 20px;
-`;
-
-// Section containers
-export const SectionContainer = styled.section`
-  margin-bottom: 40px;
-`;
-
-export const SectionTitle = styled.h2`
-  font-size: 24px;
-  font-weight: bold;
-  margin-bottom: 10px;
-  margin-left: 10px;
-`;
-
-// All items header
-export const AllItemsHeader = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-  flex-wrap: wrap;
-  gap: 12px;
-  max-width: 1200px;
-  margin-left: auto;
-  margin-right: auto;
-
-  @media (max-width: 767px) {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 16px;
-  }
-`;
-
-export const TitleRow = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-`;
-
-export const AllItemsTitle = styled.h2`
-  margin-bottom: 0;
-  margin-right: 20px;
-  font-size: 24px;
-  font-weight: bold;
-  white-space: nowrap;
-  flex-shrink: 0;
-  margin-left: 10px;
-`;
-
-export const HeaderControls = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 12px;
-  flex: 1;
-  justify-content: space-between;
-  width: 100%;
-
-  @media (max-width: 767px) {
-    width: 100%;
-    justify-content: space-between;
-    flex-wrap: nowrap;
-    margin-top: 12px;
-  }
-`;
-
-export const Group2 = styled.div`
-  flex: 7;
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  justify-content: flex-end;
-  min-width: 0;
-
-  @media (max-width: 1199px) {
-    justify-content: flex-start;
-  }
-`;
-
-export const AddItemButton = styled(Link)`
-  width: 133px;
-  height: 42px !important;
-  padding: 0 15px;
-  font-size: 14px;
-  border-radius: 8px;
-  background-color: #3692ff;
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-
-  &:hover {
-    background-color: #2a7ad4;
-  }
-
-  @media (max-width: 767px) {
-    order: -1;
-    margin-left: 8px;
-  }
-`;
-
-export const MobileAddButton = styled(AddItemButton)`
-  order: initial;
-  margin-left: auto;
-
-  @media (min-width: 768px) {
-    display: none;
-  }
-`;
-
-export const DesktopAddButton = styled(AddItemButton)`
-  @media (max-width: 767px) {
-    display: none;
-  }
-`;
-
-export const SortDropdown = styled.select`
-  white-space: nowrap;
-  height: 32px;
-  padding: 0 36px 0 12px;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  font-size: 15px;
-  background: white
-    url('data:image/svg+xml;utf8,<svg fill="%23333" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>')
-    no-repeat right 12px center/16px 16px;
-  appearance: none;
-  text-align: center;
-  cursor: pointer;
-  box-sizing: border-box;
-  transition: border-color 0.2s;
-
-  &:focus {
-    outline: none;
-    border-color: #bdbdbd;
-  }
-
-  option {
-    font-size: 15px;
-    background: white;
-    color: #222;
-  }
-
-  @media (max-width: 767px) {
-    display: none;
-  }
-`;
-
-// Mobile sort elements
-export const MobileSortContainer = styled.div`
-  position: relative;
-  display: inline-block;
-`;
-
-export const MobileSortButton = styled.button`
-  background: none;
-  border: none;
-  padding: 0;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  border-radius: 8px;
-  transition: background 0.15s;
-
-  &:active,
-  &:focus {
-    background: #f0f0f0;
-    outline: none;
-  }
-
-  img {
-    width: 24px;
-    height: 24px;
-    display: block;
-  }
-`;
-
-export const MobileSortMenu = styled.ul`
-  position: absolute;
-  top: 40px;
-  right: 0;
-  min-width: 100px;
-  background: #fff;
-  border: 1px solid #e0e0e0;
-  border-radius: 12px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-  z-index: 10;
-  padding: 6px 0;
-  list-style: none;
-`;
-
-export const MobileSortMenuItem = styled.li`
-  padding: 10px 18px;
-  font-size: 15px;
-  color: #222;
-  cursor: pointer;
-  text-align: left;
-  transition: background 0.15s;
-
-  &.selected,
-  &:hover {
-    background: #f5f7fa;
-    font-weight: bold;
-  }
-`;
-
-// Grid layouts
-export const ItemsGrid = styled.div`
-  display: grid;
-  gap: 20px;
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto;
-`;
-
-export const BestItemsGrid = styled(ItemsGrid)`
-  grid-template-columns: 344px;
-  justify-content: center;
-
-  @media (min-width: 768px) and (max-width: 1199px) {
-    grid-template-columns: repeat(2, 344px);
-  }
-
-  @media (min-width: 1200px) {
-    grid-template-columns: repeat(4, 282px);
-  }
-`;
-
-export const AllItemsGrid = styled(ItemsGrid)`
-  display: grid;
-  gap: 20px;
-  width: 100%;
-  max-width: 1200px;
-  margin-left: auto;
-  margin-right: auto;
-  justify-content: center;
-  padding-left: 10px;
-
-  @media (max-width: 767px) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  @media (min-width: 768px) and (max-width: 1199px) {
-    grid-template-columns: repeat(3, 221px);
-    max-width: 1199px;
-  }
-
-  @media (min-width: 1200px) {
-    grid-template-columns: repeat(5, 224px);
-    max-width: 1200px;
-  }
-`;
-
-// Item card
-export const ItemCard = styled.div`
-  background-color: #fff;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-  transition: transform 0.2s, box-shadow 0.2s;
-
-  &:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-  }
-`;
-
-export const ItemCardContent = styled.div`
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-
-  h3 {
-    font-size: 16px;
-    font-weight: 500;
-    margin: 0;
-    color: #222;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-  }
-
-  .price {
-    font-size: 18px;
-    font-weight: 700;
-    color: #222;
-    margin-top: 4px;
-  }
-
-  .favorites {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 14px;
-    color: #666;
-    margin-top: 4px;
-  }
-`;
-
-export const FavoriteIcon = styled.img`
-  width: 16px;
-  height: 16px;
-  margin-right: 2px;
-  vertical-align: middle;
-`;
-
-// Pagination
-export const PaginationContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 40px;
-  margin-bottom: 40px;
-`;
-
-// Error message
-export const ErrorMessage = styled.div`
-  background-color: #ffeaea;
-  color: #e53935;
-  padding: 16px;
-  border-radius: 8px;
-  margin: 20px auto;
-  text-align: center;
-  max-width: 600px;
-`;
-
-export const MessageParagraph = styled.p`
-  text-align: center;
-  color: #757575;
-  margin: 40px 0;
-  font-size: 16px;
-`;
diff --git a/react/my-react-app/src/styles/pages/ProductsPage.styled.js b/react/my-react-app/src/styles/pages/ProductsPage.styled.js
index b462a838..f1fa20c2 100644
--- a/react/my-react-app/src/styles/pages/ProductsPage.styled.js
+++ b/react/my-react-app/src/styles/pages/ProductsPage.styled.js
@@ -1,4 +1,354 @@
 import styled from "styled-components";
+import { Link } from "react-router-dom";
 import { PageContainer, CommonContainer, FormHeader, Title } from "../common/CommonStyles";
 
+// 공통 스타일 내보내기
 export { PageContainer, FormHeader, Title };
+
+// Main container
+export const ProductsPageContainer = styled.div`
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 30px 20px 20px;
+`;
+
+// Section containers
+export const SectionContainer = styled.section`
+  margin-bottom: 40px;
+`;
+
+export const SectionTitle = styled.h2`
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  margin-left: 10px;
+`;
+
+// All items header
+export const AllItemsHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 12px;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+
+  @media (max-width: 767px) {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 16px;
+  }
+`;
+
+export const TitleRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+export const AllItemsTitle = styled.h2`
+  margin-bottom: 0;
+  margin-right: 20px;
+  font-size: 24px;
+  font-weight: bold;
+  white-space: nowrap;
+  flex-shrink: 0;
+  margin-left: 10px;
+`;
+
+export const HeaderControls = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  justify-content: space-between;
+  width: 100%;
+
+  @media (max-width: 767px) {
+    width: 100%;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    margin-top: 12px;
+  }
+`;
+
+export const Group2 = styled.div`
+  flex: 7;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 0;
+
+  @media (max-width: 1199px) {
+    justify-content: flex-start;
+  }
+`;
+
+export const AddItemButton = styled(Link)`
+  width: 133px;
+  height: 42px !important;
+  padding: 0 15px;
+  font-size: 14px;
+  border-radius: 8px;
+  background-color: #3692ff;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+
+  &:hover {
+    background-color: #2a7ad4;
+  }
+
+  @media (max-width: 767px) {
+    order: -1;
+    margin-left: 8px;
+  }
+`;
+
+export const MobileAddButton = styled(AddItemButton)`
+  order: initial;
+  margin-left: auto;
+
+  @media (min-width: 768px) {
+    display: none;
+  }
+`;
+
+export const DesktopAddButton = styled(AddItemButton)`
+  @media (max-width: 767px) {
+    display: none;
+  }
+`;
+
+export const SortDropdown = styled.select`
+  white-space: nowrap;
+  height: 32px;
+  padding: 0 36px 0 12px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  font-size: 15px;
+  background: white
+    url('data:image/svg+xml;utf8,<svg fill="%23333" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>')
+    no-repeat right 12px center/16px 16px;
+  appearance: none;
+  text-align: center;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition: border-color 0.2s;
+
+  &:focus {
+    outline: none;
+    border-color: #bdbdbd;
+  }
+
+  option {
+    font-size: 15px;
+    background: white;
+    color: #222;
+  }
+
+  @media (max-width: 767px) {
+    display: none;
+  }
+`;
+
+// Mobile sort elements
+export const MobileSortContainer = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+
+export const MobileSortButton = styled.button`
+  background: none;
+  border: none;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 8px;
+  transition: background 0.15s;
+
+  &:active,
+  &:focus {
+    background: #f0f0f0;
+    outline: none;
+  }
+
+  img {
+    width: 24px;
+    height: 24px;
+    display: block;
+  }
+`;
+
+export const MobileSortMenu = styled.ul`
+  position: absolute;
+  top: 40px;
+  right: 0;
+  min-width: 100px;
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  z-index: 10;
+  padding: 6px 0;
+  list-style: none;
+`;
+
+export const MobileSortMenuItem = styled.li`
+  padding: 10px 18px;
+  font-size: 15px;
+  color: #222;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s;
+
+  &.selected,
+  &:hover {
+    background: #f5f7fa;
+    font-weight: bold;
+  }
+`;
+
+// Grid layouts
+export const ItemsGrid = styled.div`
+  display: grid;
+  gap: 20px;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+`;
+
+export const BestItemsGrid = styled(ItemsGrid)`
+  grid-template-columns: 344px;
+  justify-content: center;
+
+  @media (min-width: 768px) and (max-width: 1199px) {
+    grid-template-columns: repeat(2, 344px);
+  }
+
+  @media (min-width: 1200px) {
+    grid-template-columns: repeat(4, 282px);
+  }
+`;
+
+export const AllItemsGrid = styled(ItemsGrid)`
+  display: grid;
+  gap: 20px;
+  width: 100%;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  justify-content: center;
+  padding-left: 10px;
+
+  @media (max-width: 767px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (min-width: 768px) and (max-width: 1199px) {
+    grid-template-columns: repeat(3, 221px);
+    max-width: 1199px;
+  }
+
+  @media (min-width: 1200px) {
+    grid-template-columns: repeat(5, 224px);
+    max-width: 1200px;
+  }
+`;
+
+// Item card
+export const ItemCard = styled.div`
+  background-color: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  transition: transform 0.2s, box-shadow 0.2s;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  }
+`;
+
+export const ItemCardContent = styled.div`
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  h3 {
+    font-size: 16px;
+    font-weight: 500;
+    margin: 0;
+    color: #222;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  .price {
+    font-size: 18px;
+    font-weight: 700;
+    color: #222;
+    margin-top: 4px;
+  }
+
+  .favorites {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 14px;
+    color: #666;
+    margin-top: 4px;
+  }
+`;
+
+export const FavoriteIcon = styled.img`
+  width: 16px;
+  height: 16px;
+  margin-right: 2px;
+  vertical-align: middle;
+`;
+
+// Pagination
+export const PaginationContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 40px;
+  margin-bottom: 40px;
+`;
+
+// Error message
+export const ErrorMessage = styled.div`
+  background-color: #ffeaea;
+  color: #e53935;
+  padding: 16px;
+  border-radius: 8px;
+  margin: 20px auto;
+  text-align: center;
+  max-width: 600px;
+`;
+
+export const MessageParagraph = styled.p`
+  text-align: center;
+  color: #757575;
+  margin: 40px 0;
+  font-size: 16px;
+`;