From 0af9d9da40e468d98e8b183d6c7ed1bd452d8abe Mon Sep 17 00:00:00 2001
From: sinyroom <wldmsdl7913@naver.com>
Date: Fri, 27 Jun 2025 22:20:19 +0900
Subject: [PATCH 01/18] =?UTF-8?q?fix:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C=20=EA=B4=80=EB=A0=A8=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/ImageUpload.jsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/UI/ImageUpload.jsx b/src/components/UI/ImageUpload.jsx
index dd1fb785..55b44192 100644
--- a/src/components/UI/ImageUpload.jsx
+++ b/src/components/UI/ImageUpload.jsx
@@ -15,20 +15,21 @@ function ImageUpload() {
     const file = e.target.files?.[0];
     if (!file) return;
 
-    const preview = URL.createObjectURL(file);
-    setPreviewUrl(preview);
+    if (file) {
+      const preview = URL.createObjectURL(file);
+      setPreviewUrl(preview);
 
-    if (previewUrl) {
-      setError('*이미지 등록은 최대 1개까지 가능합니다.');
+      if (previewUrl) {
+        setError('*이미지 등록은 최대 1개까지 가능합니다.');
+      }
       e.target.value = '';
       return;
     }
-
-    setError('');
   };
 
   const handleImageRemove = () => {
     setPreviewUrl(null);
+    setError('');
   };
 
   useEffect(() => {

From 1bf6c81b6beac1c404443730d86a610b1a7d9089 Mon Sep 17 00:00:00 2001
From: sinyroom <wldmsdl7913@naver.com>
Date: Fri, 27 Jun 2025 22:36:19 +0900
Subject: [PATCH 02/18] =?UTF-8?q?refactor:=20=ED=97=B7=EA=B0=88=EB=A6=AC?=
 =?UTF-8?q?=EB=8A=94=20=EB=B3=80=EC=88=98=EB=AA=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pages/AddItemPage/AddItemPage.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/AddItemPage/AddItemPage.jsx b/src/components/pages/AddItemPage/AddItemPage.jsx
index 98cf9e96..1e514910 100644
--- a/src/components/pages/AddItemPage/AddItemPage.jsx
+++ b/src/components/pages/AddItemPage/AddItemPage.jsx
@@ -13,7 +13,7 @@ function AddItemPage() {
   const [price, handlePriceChange] = useFormatNumber('');
   const [tags, setTags] = useState([]);
 
-  const isDisabled = name.trim() && description.trim() && price.trim() && tags.length > 0;
+  const isValid = name.trim() && description.trim() && price.trim() && tags.length > 0;
 
   return (
     <Container>
@@ -21,7 +21,7 @@ function AddItemPage() {
         <h3>상품 등록하기</h3>
         <StButton
           type="submit"
-          disabled={isDisabled}
+          disabled={isValid}
         >
           등록
         </StButton>

From 94aa7d5f8de27c4c4a73397df556dcdf96518629 Mon Sep 17 00:00:00 2001
From: sinyroom <wldmsdl7913@naver.com>
Date: Fri, 27 Jun 2025 23:01:38 +0900
Subject: [PATCH 03/18] =?UTF-8?q?style:=20styled-component=20=EC=9D=B4?=
 =?UTF-8?q?=EB=A6=84=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Layout/Header.jsx              | 44 +++++++-------
 src/components/UI/ImageUpload.jsx             | 46 +++++++--------
 src/components/UI/InputField.jsx              | 10 ++--
 src/components/UI/SearchBar.jsx               | 22 +++----
 src/components/UI/Taginput.jsx                | 24 ++++----
 .../pages/AddItemPage/AddItemPage.jsx         | 24 ++++----
 .../pages/MarketPage/AddItemButton.jsx        |  6 +-
 .../pages/MarketPage/AllProducts.jsx          | 58 +++++++++----------
 .../pages/MarketPage/BestProducts.jsx         | 12 ++--
 src/components/pages/MarketPage/ItemCard.jsx  | 32 +++++-----
 .../pages/MarketPage/MarketPage.jsx           |  6 +-
 11 files changed, 142 insertions(+), 142 deletions(-)

diff --git a/src/components/Layout/Header.jsx b/src/components/Layout/Header.jsx
index 97abc131..802444bc 100644
--- a/src/components/Layout/Header.jsx
+++ b/src/components/Layout/Header.jsx
@@ -12,38 +12,38 @@ function Header() {
   const isMarketActive = location.pathname === '/items' || location.pathname === '/additem';
 
   return (
-    <HeaderContainer>
-      <HeaderLeft>
+    <StyledHeaderContainer>
+      <StyledHeaderLeft>
         <Link
           to="/"
           aria-label="홈으로 이동"
         >
-          <TextLogo
+          <StyledTextLogo
             src={textLogo}
             alt="마켓로고"
           />
-          <Imglogo
+          <StyledImglogo
             src={logo}
             alt="마켓로고"
           />
         </Link>
 
         <nav>
-          <Ul>
-            <Li>
-              <StNavLink to="/community">자유게시판</StNavLink>
-            </Li>
-            <Li>
-              <StNavLink
+          <StyledUl>
+            <StyledLi>
+              <StyledNavLink to="/community">자유게시판</StyledNavLink>
+            </StyledLi>
+            <StyledLi>
+              <StyledNavLink
                 to="/items"
                 $isActive={isMarketActive}
               >
                 중고마켓
-              </StNavLink>
-            </Li>
-          </Ul>
+              </StyledNavLink>
+            </StyledLi>
+          </StyledUl>
         </nav>
-      </HeaderLeft>
+      </StyledHeaderLeft>
 
       <Link to="/login">
         <img
@@ -51,13 +51,13 @@ function Header() {
           alt="로그인"
         />
       </Link>
-    </HeaderContainer>
+    </StyledHeaderContainer>
   );
 }
 
 export default Header;
 
-const HeaderContainer = styled.header`
+const StyledHeaderContainer = styled.header`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -74,20 +74,20 @@ const HeaderContainer = styled.header`
   }
 `;
 
-const HeaderLeft = styled.div`
+const StyledHeaderLeft = styled.div`
   display: flex;
   align-items: center;
   gap: 10px;
 `;
 
-const Ul = styled.ul`
+const StyledUl = styled.ul`
   display: flex;
   align-items: center;
   gap: 8px;
   margin-top: 4px;
 `;
 
-const Li = styled.li`
+const StyledLi = styled.li`
   ${applyFontStyles(FontTypes.BOLD16, ColorTypes.SECONDARY_GRAY_600)};
 
   &:hover {
@@ -95,7 +95,7 @@ const Li = styled.li`
   }
 `;
 
-const StNavLink = styled(NavLink)`
+const StyledNavLink = styled(NavLink)`
   color: ${({ $isActive, theme }) =>
     $isActive ? theme.colors[ColorTypes.PRIMARY_100] : theme.colors[ColorTypes.SECONDARY_GRAY_600]};
 
@@ -104,7 +104,7 @@ const StNavLink = styled(NavLink)`
   }
 `;
 
-const TextLogo = styled.img`
+const StyledTextLogo = styled.img`
   width: 81px;
   display: none;
 
@@ -113,7 +113,7 @@ const TextLogo = styled.img`
   }
 `;
 
-const Imglogo = styled.img`
+const StyledImglogo = styled.img`
   width: 153px;
   display: block;
 
diff --git a/src/components/UI/ImageUpload.jsx b/src/components/UI/ImageUpload.jsx
index 55b44192..26c9d349 100644
--- a/src/components/UI/ImageUpload.jsx
+++ b/src/components/UI/ImageUpload.jsx
@@ -41,19 +41,19 @@ function ImageUpload() {
   }, [previewUrl]);
 
   return (
-    <Container>
+    <StyledContainer>
       <label>상품 이미지</label>
 
-      <Wrapper>
-        <StInput
+      <StyledWrapper>
+        <StyledInput
           type="file"
           placeholder="이미지를 추가해주세요"
           accept="image/*"
           id="file-input"
           onChange={handleImageUpload}
         />
-        <ImageWrapper>
-          <StLabel htmlFor="file-input">
+        <StyledImageWrapper>
+          <StyledLabel htmlFor="file-input">
             <img
               src={PlusIcon}
               alt="plus"
@@ -61,50 +61,50 @@ function ImageUpload() {
               height={28}
             />
             이미지 등록
-          </StLabel>
-        </ImageWrapper>
+          </StyledLabel>
+        </StyledImageWrapper>
 
         {previewUrl && (
-          <PreviewImage>
-            <StXIcon
+          <StyledPreviewImage>
+            <StyledXIcon
               src={XIcon}
               alt="x"
               width={20}
               height={20}
               onClick={handleImageRemove}
             />
-            <StImage
+            <StyledImage
               src={previewUrl}
               alt="샘플이미지"
             />
-          </PreviewImage>
+          </StyledPreviewImage>
         )}
-      </Wrapper>
+      </StyledWrapper>
 
-      {error && <ErrorMessage>{error}</ErrorMessage>}
-    </Container>
+      {error && <StyledErrorMessage>{error}</StyledErrorMessage>}
+    </StyledContainer>
   );
 }
 
 export default ImageUpload;
 
-const Container = styled.div`
+const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 16px;
 `;
 
-const Wrapper = styled.div`
+const StyledWrapper = styled.div`
   position: relative;
   display: flex;
   gap: 24px;
 `;
 
-const ImageWrapper = styled.div`
+const StyledImageWrapper = styled.div`
   display: flex;
 `;
 
-const StInput = styled.input`
+const StyledInput = styled.input`
   position: absolute;
   opacity: 0;
   width: 0;
@@ -112,7 +112,7 @@ const StInput = styled.input`
   overflow: hidden;
 `;
 
-const StLabel = styled.label`
+const StyledLabel = styled.label`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -132,22 +132,22 @@ const StLabel = styled.label`
   }
 `;
 
-const PreviewImage = styled.div`
+const StyledPreviewImage = styled.div`
   position: relative;
 `;
 
-const StImage = styled.img`
+const StyledImage = styled.img`
   width: 168px;
   height: 168px;
   border-radius: 12px;
 `;
 
-const StXIcon = styled.img`
+const StyledXIcon = styled.img`
   position: absolute;
   top: 14px;
   right: 13px;
 `;
 
-const ErrorMessage = styled.span`
+const StyledErrorMessage = styled.span`
   ${applyFontStyles(FontTypes.REGULAR16, ColorTypes.ERROR)}
 `;
diff --git a/src/components/UI/InputField.jsx b/src/components/UI/InputField.jsx
index 648eb88e..c8f67584 100644
--- a/src/components/UI/InputField.jsx
+++ b/src/components/UI/InputField.jsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 function InputField({ label, type, placeholder, isTextArea, value, onChange }) {
   return isTextArea ? (
-    <Container>
+    <StyledContainer>
       <label htmlFor="textarea">{label}</label>
       <textarea
         id="textarea"
@@ -11,9 +11,9 @@ function InputField({ label, type, placeholder, isTextArea, value, onChange }) {
         onChange={onChange}
         rows={10}
       />
-    </Container>
+    </StyledContainer>
   ) : (
-    <Container>
+    <StyledContainer>
       <label htmlFor="input">{label}</label>
       <input
         id="input"
@@ -22,13 +22,13 @@ function InputField({ label, type, placeholder, isTextArea, value, onChange }) {
         value={value}
         onChange={onChange}
       />
-    </Container>
+    </StyledContainer>
   );
 }
 
 export default InputField;
 
-const Container = styled.div`
+const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 16px;
diff --git a/src/components/UI/SearchBar.jsx b/src/components/UI/SearchBar.jsx
index f5e9a034..ec0a3963 100644
--- a/src/components/UI/SearchBar.jsx
+++ b/src/components/UI/SearchBar.jsx
@@ -10,32 +10,32 @@ function SearchBar({ onSearch }) {
   };
 
   return (
-    <SearchBarContainer>
-      <InputWrapper>
-        <StInput
+    <StyledContainer>
+      <StyledInputWrapper>
+        <StyledInput
           type="text"
           placeholder="검색할 상품을 입력해주세요"
           onChange={handleChange}
         />
-        <StSearchIcon
+        <StyledSearchIcon
           src={search}
           alt="검색 아이콘"
         />
-      </InputWrapper>
-    </SearchBarContainer>
+      </StyledInputWrapper>
+    </StyledContainer>
   );
 }
 
 export default SearchBar;
 
-const SearchBarContainer = styled.div`
+const StyledContainer = styled.div`
   display: flex;
   width: 100%;
 `;
 
-const InputWrapper = styled.div`
+const StyledInputWrapper = styled.div`
   position: relative;
-  width:100%;
+  width: 100%;
   flex-grow: 1;
   height: 42px;
 
@@ -49,7 +49,7 @@ const InputWrapper = styled.div`
   }
 `;
 
-const StInput = styled.input`
+const StyledInput = styled.input`
   width: 100%;
   border-radius: 12px;
   padding: 9px 0px 9px 44px;
@@ -61,7 +61,7 @@ const StInput = styled.input`
   }
 `;
 
-const StSearchIcon = styled.img`
+const StyledSearchIcon = styled.img`
   position: absolute;
   width: 24px;
   height: 24px;
diff --git a/src/components/UI/Taginput.jsx b/src/components/UI/Taginput.jsx
index be1f2bd0..1937ba58 100644
--- a/src/components/UI/Taginput.jsx
+++ b/src/components/UI/Taginput.jsx
@@ -26,10 +26,10 @@ function TagInput({ tags, setTags }) {
   };
 
   return (
-    <Container>
+    <StyledContainer>
       <label htmlFor="tag">태그</label>
 
-      <Wrapper>
+      <StyledWrapper>
         <input
           id="tag"
           type="text"
@@ -39,9 +39,9 @@ function TagInput({ tags, setTags }) {
           onChange={(e) => setInputValue(e.target.value)}
         />
 
-        <TagList>
+        <StyledTagList>
           {tags.map((tag) => (
-            <TagWrapper key={tag}>
+            <StyledTagWrapper key={tag}>
               <span>{tag}</span>
               <img
                 src={XIcon}
@@ -50,36 +50,36 @@ function TagInput({ tags, setTags }) {
                 height={24}
                 onClick={() => handleTagRemove(tag)}
               />
-            </TagWrapper>
+            </StyledTagWrapper>
           ))}
-        </TagList>
-      </Wrapper>
-    </Container>
+        </StyledTagList>
+      </StyledWrapper>
+    </StyledContainer>
   );
 }
 
 export default TagInput;
 
-const Container = styled.div`
+const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 16px;
 `;
 
-const Wrapper = styled.div`
+const StyledWrapper = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 14px;
 `;
 
-const TagList = styled.div`
+const StyledTagList = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
 `;
 
-const TagWrapper = styled.div`
+const StyledTagWrapper = styled.div`
   display: flex;
   justify-content: center;
   gap: 10px;
diff --git a/src/components/pages/AddItemPage/AddItemPage.jsx b/src/components/pages/AddItemPage/AddItemPage.jsx
index 1e514910..12c3f40d 100644
--- a/src/components/pages/AddItemPage/AddItemPage.jsx
+++ b/src/components/pages/AddItemPage/AddItemPage.jsx
@@ -16,18 +16,18 @@ function AddItemPage() {
   const isValid = name.trim() && description.trim() && price.trim() && tags.length > 0;
 
   return (
-    <Container>
-      <HeaderSection>
+    <StyledContainer>
+      <StyledHeaderSection>
         <h3>상품 등록하기</h3>
-        <StButton
+        <StyledButton
           type="submit"
           disabled={isValid}
         >
           등록
-        </StButton>
-      </HeaderSection>
+        </StyledButton>
+      </StyledHeaderSection>
 
-      <FormSection>
+      <StyledFormSection>
         <ImageUpload />
 
         <InputField
@@ -58,14 +58,14 @@ function AddItemPage() {
           tags={tags}
           setTags={setTags}
         />
-      </FormSection>
-    </Container>
+      </StyledFormSection>
+    </StyledContainer>
   );
 }
 
 export default AddItemPage;
 
-const Container = styled.div`
+const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 29px;
@@ -82,13 +82,13 @@ const Container = styled.div`
   }
 `;
 
-const HeaderSection = styled.div`
+const StyledHeaderSection = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
 `;
 
-const StButton = styled.button`
+const StyledButton = styled.button`
   width: 74px;
   height: 42px;
   background-color: ${({ theme }) => theme.colors[ColorTypes.SECONDARY_GRAY_400]};
@@ -98,7 +98,7 @@ const StButton = styled.button`
   }
 `;
 
-const FormSection = styled.form`
+const StyledFormSection = styled.form`
   display: flex;
   flex-direction: column;
   gap: 24px;
diff --git a/src/components/pages/MarketPage/AddItemButton.jsx b/src/components/pages/MarketPage/AddItemButton.jsx
index 09a62887..52bfd4a7 100644
--- a/src/components/pages/MarketPage/AddItemButton.jsx
+++ b/src/components/pages/MarketPage/AddItemButton.jsx
@@ -5,9 +5,9 @@ function AddItemButton() {
   return (
     <div>
       <Link to="/additem">
-        <StButton>
+        <StyledButton>
           <div>상품 등록하기</div>
-        </StButton>
+        </StyledButton>
       </Link>
     </div>
   );
@@ -15,7 +15,7 @@ function AddItemButton() {
 
 export default AddItemButton;
 
-const StButton = styled.button`
+const StyledButton = styled.button`
   width: 133px;
   height: 42px;
 `;
diff --git a/src/components/pages/MarketPage/AllProducts.jsx b/src/components/pages/MarketPage/AllProducts.jsx
index dec05be2..34784320 100644
--- a/src/components/pages/MarketPage/AllProducts.jsx
+++ b/src/components/pages/MarketPage/AllProducts.jsx
@@ -75,73 +75,73 @@ function AllProducts() {
   }
 
   return (
-    <AllProductsContainer>
+    <StyledAllProductsContainer>
       {isTablet ? (
         <>
-          <HeaderContainer>
+          <StyledHeaderContainer>
             <div>전체 상품</div>
-            <HeaderWrapper>
+            <StyledHeaderWrapper>
               <SearchBar onSearch={setKeyword} />
               <AddItemButton />
               <DropdownList onChange={(value) => setOrderBy(value)} />
-            </HeaderWrapper>
-          </HeaderContainer>
+            </StyledHeaderWrapper>
+          </StyledHeaderContainer>
         </>
       ) : (
         <>
-          <HeaderContainer>
-            <HeaderWrapper>
+          <StyledHeaderContainer>
+            <StyledHeaderWrapper>
               <div>전체 상품</div>
               <AddItemButton />
-            </HeaderWrapper>
+            </StyledHeaderWrapper>
 
-            <SecondHeaderWrapper>
+            <StyledSecondHeaderWrapper>
               <SearchBar onSearch={setKeyword} />
               <DropdownList onChange={(value) => setOrderBy(value)} />
-            </SecondHeaderWrapper>
-          </HeaderContainer>
+            </StyledSecondHeaderWrapper>
+          </StyledHeaderContainer>
         </>
       )}
 
-      <ItemCardContainer>
+      <StyledItemCardContainer>
         {items?.map((item) => (
           <ItemCard
             key={item.id}
             item={item}
           />
         ))}
-      </ItemCardContainer>
+      </StyledItemCardContainer>
 
-      <Pagination>
-        <Circle onClick={() => setCurrentPage(currentPage - 1)}>
+      <StyledPagination>
+        <StyledCircle onClick={() => setCurrentPage(currentPage - 1)}>
           <img
             src={left}
             alt="이전"
           />
-        </Circle>
+        </StyledCircle>
         {pageNumbers.map((pageNum) => (
-          <Circle
+          <StyledCircle
             key={pageNum}
             onClick={() => setCurrentPage(pageNum)}
             $isActive={pageNum === currentPage}
           >
             {pageNum}
-          </Circle>
+          </StyledCircle>
         ))}
-        <Circle onClick={() => setCurrentPage(currentPage + 1)}>
+        <StyledCircle onClick={() => setCurrentPage(currentPage + 1)}>
           <img
             src={right}
             alt="다음"
           />
-        </Circle>
-      </Pagination>
-    </AllProductsContainer>
+        </StyledCircle>
+      </StyledPagination>
+    </StyledAllProductsContainer>
   );
 }
 
 export default AllProducts;
 
-const AllProductsContainer = styled.div`
+const StyledAllProductsContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -149,7 +149,7 @@ const AllProductsContainer = styled.div`
   margin-bottom: 40px;
 `;
 
-const HeaderContainer = styled.div`
+const StyledHeaderContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -161,7 +161,7 @@ const HeaderContainer = styled.div`
   }
 `;
 
-const HeaderWrapper = styled.div`
+const StyledHeaderWrapper = styled.div`
   display: flex;
   justify-content: space-between;
 
@@ -173,14 +173,14 @@ const HeaderWrapper = styled.div`
   }
 `;
 
-const SecondHeaderWrapper = styled.div`
+const StyledSecondHeaderWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
 `;
 
-const ItemCardContainer = styled.div`
+const StyledItemCardContainer = styled.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 32px 8px;
@@ -194,14 +194,14 @@ const ItemCardContainer = styled.div`
   }
 `;
 
-const Pagination = styled.div`
+const StyledPagination = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
 `;
 
-const Circle = styled.div`
+const StyledCircle = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/src/components/pages/MarketPage/BestProducts.jsx b/src/components/pages/MarketPage/BestProducts.jsx
index 7cab6feb..d9d2330a 100644
--- a/src/components/pages/MarketPage/BestProducts.jsx
+++ b/src/components/pages/MarketPage/BestProducts.jsx
@@ -31,31 +31,31 @@ function BestProducts() {
   }, [pageSize]);
 
   return (
-    <BestProductsContainer>
+    <StyledBestProductsContainer>
       <div>베스트 상품</div>
 
-      <ItemCardContainer>
+      <StyledItemCardContainer>
         {bestItems?.map((item) => (
           <ItemCard
             key={item.id}
             item={item}
           />
         ))}
-      </ItemCardContainer>
-    </BestProductsContainer>
+      </StyledItemCardContainer>
+    </StyledBestProductsContainer>
   );
 }
 
 export default BestProducts;
 
-const BestProductsContainer = styled.div`
+const StyledBestProductsContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-top: 20px;
 `;
 
-const ItemCardContainer = styled.div`
+const StyledItemCardContainer = styled.div`
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   gap: 8px;
diff --git a/src/components/pages/MarketPage/ItemCard.jsx b/src/components/pages/MarketPage/ItemCard.jsx
index 1f14d9db..ea6f2a27 100644
--- a/src/components/pages/MarketPage/ItemCard.jsx
+++ b/src/components/pages/MarketPage/ItemCard.jsx
@@ -6,59 +6,59 @@ import heart from '../../../assets/images/icons/ic_heart.svg';
 
 function ItemCard({ item }) {
   return (
-    <ItemCardContainer>
-      <ItemImage
+    <StyledItemCardContainer>
+      <StyledItemImage
         src={item?.images[0]}
         alt={item?.name}
       />
-      <ItemName>{item?.name}</ItemName>
-      <ItemPrice>{item?.price.toLocaleString()}원</ItemPrice>
+      <StyledItemName>{item?.name}</StyledItemName>
+      <StyledItemPrice>{item?.price.toLocaleString()}원</StyledItemPrice>
 
-      <LikeCount>
-        <LikeIcon
+      <StyledLikeCount>
+        <StyledLikeIcon
           src={heart}
           alt="좋아요"
         />
-        <ItemLikes>{item?.favoriteCount.toLocaleString()}</ItemLikes>
-      </LikeCount>
-    </ItemCardContainer>
+        <StyledItemLikes>{item?.favoriteCount.toLocaleString()}</StyledItemLikes>
+      </StyledLikeCount>
+    </StyledItemCardContainer>
   );
 }
 
 export default ItemCard;
 
-const ItemCardContainer = styled.div`
+const StyledItemCardContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 6px;
 `;
 
-const ItemImage = styled.img`
+const StyledItemImage = styled.img`
   width: 100%;
   aspect-ratio: 1/1;
   object-fit: cover;
   border-radius: 30px;
 `;
 
-const ItemName = styled.div`
+const StyledItemName = styled.div`
   ${applyFontStyles(FontTypes.MEDIUM14, ColorTypes.SECONDARY_GRAY_800)};
 `;
 
-const ItemPrice = styled.div`
+const StyledItemPrice = styled.div`
   ${applyFontStyles(FontTypes.BOLD16, ColorTypes.SECONDARY_GRAY_800)};
 `;
 
-const LikeCount = styled.div`
+const StyledLikeCount = styled.div`
   display: flex;
   align-items: flex-start;
   gap: 4px;
 `;
 
-const LikeIcon = styled.img`
+const StyledLikeIcon = styled.img`
   width: 14px;
   height: 14px;
 `;
 
-const ItemLikes = styled.span`
+const StyledItemLikes = styled.span`
   ${applyFontStyles(FontTypes.MEDIUM12, ColorTypes.SECONDARY_GRAY_800)};
 `;
diff --git a/src/components/pages/MarketPage/MarketPage.jsx b/src/components/pages/MarketPage/MarketPage.jsx
index 5ab61ad5..e63d1073 100644
--- a/src/components/pages/MarketPage/MarketPage.jsx
+++ b/src/components/pages/MarketPage/MarketPage.jsx
@@ -5,16 +5,16 @@ import AllProducts from './AllProducts';
 
 function MarketPage() {
   return (
-    <MarketPageContainer>
+    <StyledMarketPageContainer>
       <BestProducts />
       <AllProducts />
-    </MarketPageContainer>
+    </StyledMarketPageContainer>
   );
 }
 
 export default MarketPage;
 
-const MarketPageContainer = styled.div`
+const StyledMarketPageContainer = styled.div`
   padding: 0 ${({ theme }) => theme.spacing.mobile};
 
   @media (min-width: 768px) {

From b21f242b8d5772cf802fd50473e312e6eaca1f77 Mon Sep 17 00:00:00 2001
From: sinyroom <wldmsdl7913@naver.com>
Date: Wed, 2 Jul 2025 14:01:50 +0900
Subject: [PATCH 04/18] =?UTF-8?q?feat:=20=EB=AF=B8=EC=85=987=20=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=84=B0,=20API=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                                   |  5 ++
 src/api/api.js                                | 10 ++++
 .../pages/ItemDetailPage/ItemDetailPage.jsx   | 59 +++++++++++++++++++
 3 files changed, 74 insertions(+)
 create mode 100644 src/components/pages/ItemDetailPage/ItemDetailPage.jsx

diff --git a/src/App.jsx b/src/App.jsx
index ed3f3226..afe9bd2e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -8,6 +8,7 @@ import LoginPage from './components/pages/LoginPage';
 import MarketPage from './components/pages/MarketPage/MarketPage';
 import AddItemPage from './components/pages/AddItemPage/AddItemPage';
 import CommunityFeedPage from './components/pages/CommunityFeedPage';
+import ItemDetailPage from './components/pages/ItemDetailPage/ItemDetailPage';
 
 function App() {
   return (
@@ -39,6 +40,10 @@ function App() {
                 path="/community"
                 element={<CommunityFeedPage />}
               />
+              <Route
+                path="/items/:productId"
+                element={<ItemDetailPage />}
+              />
             </Routes>
           </div>
         </BrowserRouter>
diff --git a/src/api/api.js b/src/api/api.js
index 7a7b0aec..a65747f0 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -13,3 +13,13 @@ export const getProducts = async ({ page = 1, pageSize = 10, orderBy = 'recent',
     throw error;
   }
 };
+
+export const getProductDetail = async (productId) => {
+  try {
+    const res = await axios.get(`${baseURL}/products/${productId}`);
+    return res.data;
+  } catch (error) {
+    console.log('상품 상세 정보 api 호출 실패 :', error.message);
+    throw error;
+  }
+};
diff --git a/src/components/pages/ItemDetailPage/ItemDetailPage.jsx b/src/components/pages/ItemDetailPage/ItemDetailPage.jsx
new file mode 100644
index 00000000..9b7461e7
--- /dev/null
+++ b/src/components/pages/ItemDetailPage/ItemDetailPage.jsx
@@ -0,0 +1,59 @@
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { useParams } from 'react-router-dom';
+import { getProductDetail } from '../../../api/api';
+
+function ItemDetailPage() {
+  const [product, setProduct] = useState(null);
+  const { productId } = useParams();
+
+  useEffect(() => {
+    const fetchProductDetail = async () => {
+      const res = await getProductDetail(productId);
+      setProduct(res);
+    };
+    fetchProductDetail();
+  }, [productId]);
+
+  return (
+    <StyledContainer>
+      <StyledProductInfo>
+        <div>
+          <img
+            src={product?.images[0]}
+            alt={product?.name}
+          />
+        </div>
+        <div>
+          <div>
+            <div>{product?.name}</div>
+            <div>{product?.price.toLocaleString()}원</div>
+            <div>{product?.description}</div>
+            <div>{product?.tags[0]}</div>
+            <div>{product?.favoriteCount.toLocaleString()}</div>
+            <div>{product?.ownerNickname}</div>
+            <div>{product?.updatedAt}</div>
+          </div>
+        </div>
+      </StyledProductInfo>
+    </StyledContainer>
+  );
+}
+
+export default ItemDetailPage;
+
+const StyledContainer = styled.div`
+  padding: 0 ${({ theme }) => theme.spacing.mobile};
+
+  @media (min-width: 768px) {
+    padding: 0 ${({ theme }) => theme.spacing.tablet};
+  }
+
+  @media (min-width: 1024px) {
+    padding: 0 ${({ theme }) => theme.spacing.desktop};
+  }
+`;
+
+const StyledProductInfo = styled.div`
+  display: flex;
+`;

From 28ce46df0831bb263d8e8e3bef77e1e4fbcdb0f3 Mon Sep 17 00:00:00 2001
From: sinyroom <wldmsdl7913@naver.com>
Date: Wed, 2 Jul 2025 18:22:11 +0900
Subject: [PATCH 05/18] =?UTF-8?q?feat:=20=EC=83=81=ED=92=88=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=EC=A0=95=EB=B3=B4=20=EB=B6=80=EB=B6=84=20=ED=8D=BC?=
 =?UTF-8?q?=EB=B8=94=EB=A6=AC=EC=8B=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |  24 +-
 src/assets/images/icons/ic_kebab.svg          |   5 +
 src/components/UI/Taginput.jsx                |   4 +-
 .../pages/ItemDetailPage/ItemDetailPage.jsx   |  52 +---
 .../pages/ItemDetailPage/ProductInfo.jsx      | 256 ++++++++++++++++++
 .../pages/ItemDetailPage/ProductQuestion.jsx  |   5 +
 .../pages/MarketPage/MarketPage.jsx           |   3 +
 src/styles/mixins.js                          |   6 +
 src/styles/theme.js                           |   5 +
 9 files changed, 295 insertions(+), 65 deletions(-)
 create mode 100644 src/assets/images/icons/ic_kebab.svg
 create mode 100644 src/components/pages/ItemDetailPage/ProductInfo.jsx
 create mode 100644 src/components/pages/ItemDetailPage/ProductQuestion.jsx

diff --git a/package-lock.json b/package-lock.json
index 4eac7311..9a967c67 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2040,31 +2040,12 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-<<<<<<< HEAD
     "node_modules/esquery": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
       "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
       "dev": true,
       "license": "BSD-3-Clause",
-=======
-    "node_modules/esprima": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "bin": {
-        "esparse": "bin/esparse.js",
-        "esvalidate": "bin/esvalidate.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/esquery": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
-      "integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==",
->>>>>>> 66f3ba6e6e7435aa827db8a2a9ce4b80c9b9d177
       "dependencies": {
         "estraverse": "^5.1.0"
       },
@@ -2076,11 +2057,8 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-<<<<<<< HEAD
       "dev": true,
       "license": "BSD-2-Clause",
-=======
->>>>>>> 66f3ba6e6e7435aa827db8a2a9ce4b80c9b9d177
       "dependencies": {
         "estraverse": "^5.2.0"
       },
@@ -3298,4 +3276,4 @@
       }
     }
   }
-
+}
diff --git a/src/assets/images/icons/ic_kebab.svg b/src/assets/images/icons/ic_kebab.svg
new file mode 100644
index 00000000..dd7ed7f5
--- /dev/null
+++ b/src/assets/images/icons/ic_kebab.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12.5" cy="6.5" r="1.5" fill="#9CA3AF"/>
+<circle cx="12.5" cy="11.5" r="1.5" fill="#9CA3AF"/>
+<circle cx="12.5" cy="16.5" r="1.5" fill="#9CA3AF"/>
+</svg>
diff --git a/src/components/UI/Taginput.jsx b/src/components/UI/Taginput.jsx
index 1937ba58..813639cb 100644
--- a/src/components/UI/Taginput.jsx
+++ b/src/components/UI/Taginput.jsx
@@ -73,13 +73,13 @@ const StyledWrapper = styled.div`
   gap: 14px;
 `;
 
-const StyledTagList = styled.div`
+export const StyledTagList = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
 `;
 
-const StyledTagWrapper = styled.div`
+export const StyledTagWrapper = styled.div`
   display: flex;
   justify-content: center;
   gap: 10px;
diff --git a/src/components/pages/ItemDetailPage/ItemDetailPage.jsx b/src/components/pages/ItemDetailPage/ItemDetailPage.jsx
index 9b7461e7..fe96df79 100644
--- a/src/components/pages/ItemDetailPage/ItemDetailPage.jsx
+++ b/src/components/pages/ItemDetailPage/ItemDetailPage.jsx
@@ -1,49 +1,22 @@
-import { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { useParams } from 'react-router-dom';
-import { getProductDetail } from '../../../api/api';
 
-function ItemDetailPage() {
-  const [product, setProduct] = useState(null);
-  const { productId } = useParams();
-
-  useEffect(() => {
-    const fetchProductDetail = async () => {
-      const res = await getProductDetail(productId);
-      setProduct(res);
-    };
-    fetchProductDetail();
-  }, [productId]);
+import ProductInfo from './ProductInfo';
+import ProductQuestion from './ProductQuestion';
 
+function ItemDetailPage() {
   return (
-    <StyledContainer>
-      <StyledProductInfo>
-        <div>
-          <img
-            src={product?.images[0]}
-            alt={product?.name}
-          />
-        </div>
-        <div>
-          <div>
-            <div>{product?.name}</div>
-            <div>{product?.price.toLocaleString()}원</div>
-            <div>{product?.description}</div>
-            <div>{product?.tags[0]}</div>
-            <div>{product?.favoriteCount.toLocaleString()}</div>
-            <div>{product?.ownerNickname}</div>
-            <div>{product?.updatedAt}</div>
-          </div>
-        </div>
-      </StyledProductInfo>
-    </StyledContainer>
+    <StyledItemDetailPage>
+      <ProductInfo />
+      <ProductQuestion />
+    </StyledItemDetailPage>
   );
 }
 
 export default ItemDetailPage;
 
-const StyledContainer = styled.div`
+const StyledItemDetailPage = styled.div`
   padding: 0 ${({ theme }) => theme.spacing.mobile};
+  margin-top: 24px;
 
   @media (min-width: 768px) {
     padding: 0 ${({ theme }) => theme.spacing.tablet};
@@ -51,9 +24,8 @@ const StyledContainer = styled.div`
 
   @media (min-width: 1024px) {
     padding: 0 ${({ theme }) => theme.spacing.desktop};
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
   }
 `;
-
-const StyledProductInfo = styled.div`
-  display: flex;
-`;
diff --git a/src/components/pages/ItemDetailPage/ProductInfo.jsx b/src/components/pages/ItemDetailPage/ProductInfo.jsx
new file mode 100644
index 00000000..d65f04ce
--- /dev/null
+++ b/src/components/pages/ItemDetailPage/ProductInfo.jsx
@@ -0,0 +1,256 @@
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { useParams } from 'react-router-dom';
+import { getProductDetail } from '../../../api/api';
+import { ColorTypes, FontTypes } from '../../../styles/theme';
+import { applyFontStyles, applyFlexColumn } from '../../../styles/mixins';
+import { StyledTagList, StyledTagWrapper } from '../../UI/Taginput';
+import profile from '../../../assets/images/icons/ic_profile.png';
+import heart from '../../../assets/images/icons/ic_heart.svg';
+import kebab from '../../../assets/images/icons/ic_kebab.svg';
+
+function ProductInfo() {
+  const [product, setProduct] = useState(null);
+  const { productId } = useParams();
+
+  useEffect(() => {
+    const fetchProductDetail = async () => {
+      const res = await getProductDetail(productId);
+      setProduct(res);
+    };
+    fetchProductDetail();
+  }, [productId]);
+
+  return (
+    <div>
+      <StyledProductInfo>
+        <StyledProductImage>
+          <img
+            src={product?.images[0]}
+            alt={product?.name}
+          />
+        </StyledProductImage>
+        <StyledProductInfoContainer>
+          <StyledProductInfoWrapper>
+            <StyledProductNamePrice>
+              <StyledProductNamePriceWrapper>
+                <StyledProductName>{product?.name}</StyledProductName>
+                <StyledProductPrice>{product?.price.toLocaleString()}원</StyledProductPrice>
+              </StyledProductNamePriceWrapper>
+              <img
+                src={kebab}
+                alt="목록"
+              />
+            </StyledProductNamePrice>
+            <StyledProductDesContainer>
+              <StyledProductDesWrapper>
+                <StyledSecTitle>상품 소개</StyledSecTitle>
+                <StyledProductDescription>{product?.description}</StyledProductDescription>
+              </StyledProductDesWrapper>
+              <StyledProductTagWrapper>
+                <StyledSecTitle>상품 태그</StyledSecTitle>
+                <StyledTagList>
+                  {product?.tags.map((tag) => (
+                    <StyledTagWrapper key={tag}>
+                      <span>{`#${tag}`}</span>
+                    </StyledTagWrapper>
+                  ))}
+                </StyledTagList>
+              </StyledProductTagWrapper>
+            </StyledProductDesContainer>
+          </StyledProductInfoWrapper>
+          <StyledProductOwnerInfo>
+            <StyledOwnerInfo>
+              <StyledOwnerProfile>
+                <img
+                  src={profile}
+                  alt="profile"
+                />
+              </StyledOwnerProfile>
+              <div>
+                <StyledOwnerNickname>{product?.ownerNickname}</StyledOwnerNickname>
+                <StyledProductCreatedAt>
+                  {product?.createdAt.split('T')[0].split('-').join('. ')}
+                </StyledProductCreatedAt>
+              </div>
+            </StyledOwnerInfo>
+            <StyledDeviderWrapper>
+              <StyledDevider />
+              <StyledProductFavorite>
+                <img
+                  src={heart}
+                  alt="heart"
+                />
+                <StyledProductFavoriteCount>{product?.favoriteCount.toLocaleString()}</StyledProductFavoriteCount>
+              </StyledProductFavorite>
+            </StyledDeviderWrapper>
+          </StyledProductOwnerInfo>
+        </StyledProductInfoContainer>
+      </StyledProductInfo>
+    </div>
+  );
+}
+
+export default ProductInfo;
+
+const StyledProductInfo = styled.div`
+  ${applyFlexColumn('16px')}
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    width: 100%;
+  }
+
+  @media (min-width: 1024px) {
+    gap: 24px;
+  }
+`;
+
+const StyledProductImage = styled.div`
+  width: 100%;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  @media (min-width: 768px) {
+    width: 340px;
+    height: 340px;
+  }
+
+  @media (min-width: 1024px) {
+    width: 486px;
+    height: 486px;
+  }
+`;
+
+const StyledProductInfoContainer = styled.div`
+  ${applyFlexColumn()}
+  flex-grow: 1;
+  gap: 40px;
+`;
+
+const StyledProductInfoWrapper = styled.div`
+  ${applyFlexColumn('16px')}
+`;
+
+const StyledProductNamePrice = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding-bottom: 16px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors[ColorTypes.SECONDARY_GRAY_200]};
+
+  img {
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+  }
+`;
+
+const StyledProductNamePriceWrapper = styled.div`
+  ${applyFlexColumn()}
+`;
+
+const StyledProductName = styled.div`
+  ${applyFontStyles(FontTypes.SEMIBOLD16, ColorTypes.SECONDARY_GRAY_800)};
+
+  @media (min-width: 768px) {
+    ${applyFontStyles(FontTypes.SEMIBOLD20, ColorTypes.SECONDARY_GRAY_800)}
+  }
+
+  @media (min-width: 1024px) {
+    ${applyFontStyles(FontTypes.SEMIBOLD24, ColorTypes.SECONDARY_GRAY_800)}
+  }
+`;
+
+const StyledProductPrice = styled.div`
+  ${applyFontStyles(FontTypes.SEMIBOLD40, ColorTypes.SECONDARY_GRAY_800)};
+`;
+
+const StyledProductDesContainer = styled.div`
+  ${applyFlexColumn('24px')}
+`;
+
+const StyledProductDesWrapper = styled.div`
+  ${applyFlexColumn()}
+`;
+
+const StyledSecTitle = styled.div`
+  ${applyFontStyles(FontTypes.SEMIBOLD14, ColorTypes.SECONDARY_GRAY_800)};
+`;
+
+const StyledProductDescription = styled.div`
+  ${applyFontStyles(FontTypes.REGULAR16, ColorTypes.SECONDARY_GRAY_400)};
+`;
+
+const StyledProductTagWrapper = styled.div`
+  ${applyFlexColumn()}
+`;
+
+const StyledProductOwnerInfo = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+`;
+
+const StyledOwnerInfo = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`;
+
+const StyledOwnerProfile = styled.div`
+  width: 40px;
+  height: 40px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+
+const StyledOwnerNickname = styled.div`
+  ${applyFontStyles(FontTypes.SEMIBOLD14, ColorTypes.SECONDARY_GRAY_600)};
+`;
+
+const StyledProductCreatedAt = styled.div`
+  ${applyFontStyles(FontTypes.REGULAR14, ColorTypes.SECONDARY_GRAY_400)};
+`;
+
+const StyledDeviderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  height: 34px;
+`;
+
+const StyledDevider = styled.div`
+  width: 1px;
+  height: 100%;
+  background-color: ${({ theme }) => theme.colors[ColorTypes.SECONDARY_GRAY_200]};
+`;
+
+const StyledProductFavorite = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  width: fit-content;
+  padding: 4px 12px;
+  border-radius: 35px;
+  border: 1px solid ${({ theme }) => theme.colors[ColorTypes.SECONDARY_GRAY_100]};
+  margin-left: 14px;
+
+  img {
+    width: 20px;
+    height: 17.5px;
+  }
+`;
+
+const StyledProductFavoriteCount = styled.div`
+  ${applyFontStyles(FontTypes.MEDIUM16, ColorTypes.SECONDARY_GRAY_500)};
+`;
diff --git a/src/components/pages/ItemDetailPage/ProductQuestion.jsx b/src/components/pages/ItemDetailPage/ProductQuestion.jsx
new file mode 100644
index 00000000..424c62cf
--- /dev/null
+++ b/src/components/pages/ItemDetailPage/ProductQuestion.jsx
@@ -0,0 +1,5 @@
+function ProductQuestion() {
+  return <div>ProductQuestion</div>;
+}
+
+export default ProductQuestion;
diff --git a/src/components/pages/MarketPage/MarketPage.jsx b/src/components/pages/MarketPage/MarketPage.jsx
index e63d1073..4a4786f8 100644
--- a/src/components/pages/MarketPage/MarketPage.jsx
+++ b/src/components/pages/MarketPage/MarketPage.jsx
@@ -23,5 +23,8 @@ const StyledMarketPageContainer = styled.div`
 
   @media (min-width: 1200px) {
     padding: 0 ${({ theme }) => theme.spacing.desktop};
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
   }
 `;
diff --git a/src/styles/mixins.js b/src/styles/mixins.js
index 2707d383..7a66ff3a 100644
--- a/src/styles/mixins.js
+++ b/src/styles/mixins.js
@@ -6,3 +6,9 @@ export const applyFontStyles = (fontType, color = 'secGray900') => css`
   line-height: ${({ theme }) => theme.fonts[fontType].lineHeight};
   color: ${({ theme }) => theme.colors[color]};
 `;
+
+export const applyFlexColumn = (gap = '8px') => css`
+  display: flex;
+  flex-direction: column;
+  gap: ${gap};
+`;
diff --git a/src/styles/theme.js b/src/styles/theme.js
index 71c4e84d..f1a7df26 100644
--- a/src/styles/theme.js
+++ b/src/styles/theme.js
@@ -17,6 +17,7 @@ export const ColorTypes = {
 };
 
 export const FontTypes = {
+  SEMIBOLD40: 'semibold40',
   BOLD32: 'bold32',
   SEMIBOLD32: 'semibold32',
   BOLD24: 'bold24',
@@ -71,6 +72,10 @@ const theme = {
   },
 
   fonts: {
+    semibold40: {
+      fontSize: '2.5rem',
+      fontWeight: 600,
+    },
     bold32: {
       fontSize: '2rem',
       fontWeight: 700,

From a59e3b512e24ffa3126091f936ae44149efd82aa Mon Sep 17 00:00:00 2001
From: sinyroom <wldmsdl7913@naver.com>
Date: Thu, 3 Jul 2025 15:25:54 +0900
Subject: [PATCH 06/18] =?UTF-8?q?feat:=20=EC=83=81=ED=92=88=20=EC=BD=94?=
 =?UTF-8?q?=EB=A9=98=ED=8A=B8=20=EB=B6=80=EB=B6=84=20=ED=8D=BC=EB=B8=94?=
 =?UTF-8?q?=EB=A6=AC=EC=8B=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/api.js                                |  15 ++
 src/assets/images/icons/ic_back.png           | Bin 0 -> 335 bytes
 .../pages/ItemDetailPage/ItemDetailPage.jsx   |  46 ++++-
 .../pages/ItemDetailPage/ProductComments.jsx  | 163 ++++++++++++++++++
 .../pages/ItemDetailPage/ProductInfo.jsx      |   9 +-
 .../pages/ItemDetailPage/ProductQuestion.jsx  |   5 -
 6 files changed, 229 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/images/icons/ic_back.png
 create mode 100644 src/components/pages/ItemDetailPage/ProductComments.jsx
 delete mode 100644 src/components/pages/ItemDetailPage/ProductQuestion.jsx

diff --git a/src/api/api.js b/src/api/api.js
index a65747f0..9f2d59a0 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -23,3 +23,18 @@ export const getProductDetail = async (productId) => {
     throw error;
   }
 };
+
+export const getComments = async (productId, limit = 10, cursor = null) => {
+  try {
+    const res = await axios.get(`${baseURL}/products/${productId}/comments`, {
+      params: {
+        limit,
+        cursor,
+      },
+    });
+    return res.data;
+  } catch (error) {
+    console.log('상품 댓글 목록 api 호출 실패 :', error.message);
+    throw error;
+  }
+};
diff --git a/src/assets/images/icons/ic_back.png b/src/assets/images/icons/ic_back.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c5cbec229ca1bde471b5d244123af0d16bf56f0
GIT binary patch
literal 335
zcmeAS@N?(olHy`uVBq!ia0vp^B0wy}!3HFwFZ>e#Qk(@Ik;M!Q+`=Ht$S`Y;1W=H%
zILO_JVcj{Imp~3nx}&cn1H;CC?mvmFK>ia?7srqa#-o!Pd7BIbT;I=W5R^D5DB-9!
zfj5Qurh|I{v-<(T0;U@dW-I=G=<v<WX!fl*d0utPpSbnqK4QmabUl(>*f*2?z1A7N
zG}&^E`L#DpT~BEA$yjB{ED*X`_C?=g(M6wX4YQdGUWWQgdo`vkYts!@dU8sre9DX|
zZ8sM!{4(usym!L=INtgDTs1$qcE`B<IBCE3-TIit#$PrqTfiZaYNdIZ`?UGBG#f|L
zzkVm1?SdaDw?A8bs%6UMn8O>c>BT$0H#5$DRTSlV|K=RcuO;%zMpBvq!j(6pb9fhT
e?BTvO%e<ypZHwWAYx98qW$<+Mb6Mw<&;$TsGJuHy

literal 0
HcmV?d00001

diff --git a/src/components/pages/ItemDetailPage/ItemDetailPage.jsx b/src/components/pages/ItemDetailPage/ItemDetailPage.jsx
index fe96df79..ff64a03b 100644
--- a/src/components/pages/ItemDetailPage/ItemDetailPage.jsx
+++ b/src/components/pages/ItemDetailPage/ItemDetailPage.jsx
@@ -1,13 +1,27 @@
 import styled from 'styled-components';
 
 import ProductInfo from './ProductInfo';
-import ProductQuestion from './ProductQuestion';
+import ProductComments from './ProductComments';
+
+import { applyFontStyles } from '../../../styles/mixins';
+import { FontTypes, ColorTypes } from '../../../styles/theme';
+
+import back from '../../../assets/images/icons/ic_back.png';
 
 function ItemDetailPage() {
   return (
     <StyledItemDetailPage>
       <ProductInfo />
-      <ProductQuestion />
+      <ProductComments />
+      <StyledButtonWrapper>
+        <StyledButton>
+          <StyledButtonText>목록으로 돌아가기</StyledButtonText>
+          <img
+            src={back}
+            alt="back"
+          />
+        </StyledButton>
+      </StyledButtonWrapper>
     </StyledItemDetailPage>
   );
 }
@@ -15,8 +29,12 @@ function ItemDetailPage() {
 export default ItemDetailPage;
 
 const StyledItemDetailPage = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
   padding: 0 ${({ theme }) => theme.spacing.mobile};
   margin-top: 24px;
+  margin-bottom: 100px;
 
   @media (min-width: 768px) {
     padding: 0 ${({ theme }) => theme.spacing.tablet};
@@ -29,3 +47,27 @@ const StyledItemDetailPage = styled.div`
     margin-right: auto;
   }
 `;
+
+const StyledButtonWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+`;
+
+const StyledButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+
+  width: 240px;
+  height: 48px;
+  padding: 12px 64px;
+  border-radius: 40px;
+`;
+
+const StyledButtonText = styled.p`
+  ${applyFontStyles(FontTypes.SEMIBOLD16, ColorTypes.SECONDARY_GRAY_100)}
+`;
diff --git a/src/components/pages/ItemDetailPage/ProductComments.jsx b/src/components/pages/ItemDetailPage/ProductComments.jsx
new file mode 100644
index 00000000..81c95f71
--- /dev/null
+++ b/src/components/pages/ItemDetailPage/ProductComments.jsx
@@ -0,0 +1,163 @@
+import { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import styled from 'styled-components';
+import { getComments } from '../../../api/api';
+import { applyFontStyles } from '../../../styles/mixins';
+import { FontTypes, ColorTypes } from '../../../styles/theme';
+import { applyFlexColumn } from '../../../styles/mixins';
+import profile from '../../../assets/images/icons/ic_profile.png';
+import kebab from '../../../assets/images/icons/ic_kebab.svg';
+
+function ProductComments() {
+  const { productId } = useParams();
+  const [comments, setComments] = useState([]);
+  const [nextCursor, setNextCursor] = useState(null);
+
+  const fetchComments = async () => {
+    try {
+      const data = await getComments(productId, 3, nextCursor);
+      setComments((prev) => [...prev, ...data.list]);
+      setNextCursor(data.nextCursor);
+    } catch (error) {
+      console.error('댓글 목록 가져오기 실패:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchComments();
+  }, [productId]);
+
+  return (
+    <StyledCommentContainer>
+      <StyledCommentInput>
+        <StyledCommentTitle>문의하기</StyledCommentTitle>
+        <textarea
+          rows={5}
+          placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
+        />
+        <StyledButtonWrapper>
+          <StyledButton>등록</StyledButton>
+        </StyledButtonWrapper>
+      </StyledCommentInput>
+      <StyledCommentList>
+        {comments?.map((comment) => (
+          <StyledCommentWrapper key={comment?.id}>
+            <StyledCommentContentWrapper>
+              <StyledCommentContent>{comment?.content}</StyledCommentContent>
+
+              <StyledKebabWrapper>
+                <img
+                  src={kebab}
+                  alt="kebab"
+                />
+              </StyledKebabWrapper>
+            </StyledCommentContentWrapper>
+            <StyledUserInfoWrapper>
+              <StyledUserInfo>
+                <StyledProfileWrapper>
+                  <img
+                    src={profile}
+                    alt="profile"
+                  />
+                </StyledProfileWrapper>
+                <StyledNameWrapper>
+                  <StyledName>{comment.writer.nickname}</StyledName>
+                  <StyledCreatedAt>{comment.createdAt}</StyledCreatedAt>
+                </StyledNameWrapper>
+              </StyledUserInfo>
+            </StyledUserInfoWrapper>
+          </StyledCommentWrapper>
+        ))}
+      </StyledCommentList>
+    </StyledCommentContainer>
+  );
+}
+
+export default ProductComments;
+
+const StyledCommentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  width: 100%;
+  margin-bottom: 40px;
+`;
+
+const StyledCommentInput = styled.div`
+  ${applyFlexColumn('16px')}
+`;
+
+const StyledCommentTitle = styled.div`
+  ${applyFontStyles(FontTypes.SEMIBOLD16, ColorTypes.SECONDARY_GRAY_800)}
+`;
+
+const StyledButtonWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  height: 100%;
+`;
+
+const StyledButton = styled.button`
+  width: 74px;
+  height: 42px;
+  padding: 12px 23px;
+  background-color: ${({ theme }) => theme.colors[ColorTypes.SECONDARY_GRAY_400]};
+`;
+
+const StyledCommentList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+`;
+
+const StyledCommentContent = styled.div`
+  ${applyFontStyles(FontTypes.REGULAR14, ColorTypes.SECONDARY_GRAY_800)}
+`;
+
+const StyledUserInfoWrapper = styled.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+`;
+
+const StyledCommentWrapper = styled.div`
+  ${applyFlexColumn('24px')}
+  padding-bottom: 12px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors[ColorTypes.SECONDARY_GRAY_200]};
+`;
+
+const StyledCommentContentWrapper = styled.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+`;
+
+const StyledUserInfo = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const StyledProfileWrapper = styled.div`
+  width: 32px;
+  height: 32px;
+`;
+
+const StyledNameWrapper = styled.div`
+  ${applyFlexColumn('4px')}
+`;
+
+const StyledName = styled.p`
+  ${applyFontStyles(FontTypes.REGULAR12, ColorTypes.SECONDARY_GRAY_600)}
+`;
+
+const StyledCreatedAt = styled.p`
+  ${applyFontStyles(FontTypes.REGULAR12, ColorTypes.SECONDARY_GRAY_400)}
+`;
+
+const StyledKebabWrapper = styled.div`
+  width: 24px;
+  height: 24px;
+`;
diff --git a/src/components/pages/ItemDetailPage/ProductInfo.jsx b/src/components/pages/ItemDetailPage/ProductInfo.jsx
index d65f04ce..cfd085e1 100644
--- a/src/components/pages/ItemDetailPage/ProductInfo.jsx
+++ b/src/components/pages/ItemDetailPage/ProductInfo.jsx
@@ -22,7 +22,7 @@ function ProductInfo() {
   }, [productId]);
 
   return (
-    <div>
+    <StyledContainer>
       <StyledProductInfo>
         <StyledProductImage>
           <img
@@ -87,12 +87,17 @@ function ProductInfo() {
           </StyledProductOwnerInfo>
         </StyledProductInfoContainer>
       </StyledProductInfo>
-    </div>
+    </StyledContainer>
   );
 }
 
 export default ProductInfo;
 
+const StyledContainer = styled.div`
+  padding-bottom: 33px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors[ColorTypes.SECONDARY_GRAY_200]};
+`;
+
 const StyledProductInfo = styled.div`
   ${applyFlexColumn('16px')}
 
diff --git a/src/components/pages/ItemDetailPage/ProductQuestion.jsx b/src/components/pages/ItemDetailPage/ProductQuestion.jsx
deleted file mode 100644
index 424c62cf..00000000
--- a/src/components/pages/ItemDetailPage/ProductQuestion.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function ProductQuestion() {
-  return <div>ProductQuestion</div>;
-}
-
-export default ProductQuestion;

From 02f17ec8f46bc54009b8daa6679ef46e1700dabb Mon Sep 17 00:00:00 2001
From: sinyroom <wldmsdl7913@naver.com>
Date: Thu, 3 Jul 2025 15:55:06 +0900
Subject: [PATCH 07/18] =?UTF-8?q?feat:=20=EC=BD=94=EB=A9=98=ED=8A=B8=20?=
 =?UTF-8?q?=EC=9E=91=EC=84=B1=EC=8B=9C=EA=B0=84=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/ItemDetailPage/ProductComments.jsx          |  8 ++++++--
 src/hooks/useFormatTime.js                            | 11 +++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 src/hooks/useFormatTime.js

diff --git a/src/components/pages/ItemDetailPage/ProductComments.jsx b/src/components/pages/ItemDetailPage/ProductComments.jsx
index 81c95f71..895c098e 100644
--- a/src/components/pages/ItemDetailPage/ProductComments.jsx
+++ b/src/components/pages/ItemDetailPage/ProductComments.jsx
@@ -5,6 +5,7 @@ import { getComments } from '../../../api/api';
 import { applyFontStyles } from '../../../styles/mixins';
 import { FontTypes, ColorTypes } from '../../../styles/theme';
 import { applyFlexColumn } from '../../../styles/mixins';
+import useFormatTime from '../../../hooks/useFormatTime';
 import profile from '../../../assets/images/icons/ic_profile.png';
 import kebab from '../../../assets/images/icons/ic_kebab.svg';
 
@@ -27,6 +28,9 @@ function ProductComments() {
     fetchComments();
   }, [productId]);
 
+  const time = useFormatTime(comments[0]?.createdAt);
+  console.log(time);
+
   return (
     <StyledCommentContainer>
       <StyledCommentInput>
@@ -43,7 +47,7 @@ function ProductComments() {
         {comments?.map((comment) => (
           <StyledCommentWrapper key={comment?.id}>
             <StyledCommentContentWrapper>
-              <StyledCommentContent>{comment?.content}</StyledCommentContent>
+              <StyledCommentContent>{comment.content}</StyledCommentContent>
 
               <StyledKebabWrapper>
                 <img
@@ -62,7 +66,7 @@ function ProductComments() {
                 </StyledProfileWrapper>
                 <StyledNameWrapper>
                   <StyledName>{comment.writer.nickname}</StyledName>
-                  <StyledCreatedAt>{comment.createdAt}</StyledCreatedAt>
+                  <StyledCreatedAt>{time}</StyledCreatedAt>
                 </StyledNameWrapper>
               </StyledUserInfo>
             </StyledUserInfoWrapper>
diff --git a/src/hooks/useFormatTime.js b/src/hooks/useFormatTime.js
new file mode 100644
index 00000000..034dd321
--- /dev/null
+++ b/src/hooks/useFormatTime.js
@@ -0,0 +1,11 @@
+function useFormatTime(time) {
+  const now = new Date();
+  const date = new Date(time);
+  const diffTime = now.getTime() - date.getTime();
+
+  const diffHours = Math.floor(diffTime / (1000 * 60 * 60));
+
+  return `${diffHours}시간 전`;
+}
+
+export default useFormatTime;

From ac6876ebeda3b5b5deee478ffb8b0e1a1670794d Mon Sep 17 00:00:00 2001
From: sinyroom <wldmsdl7913@naver.com>
Date: Thu, 3 Jul 2025 16:29:06 +0900
Subject: [PATCH 08/18] =?UTF-8?q?feat:=20=EC=BD=94=EB=A7=A8=ED=8A=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/CommentEditList.jsx         | 69 +++++++++++++++++++
 .../pages/ItemDetailPage/ProductComments.jsx  |  8 +--
 2 files changed, 71 insertions(+), 6 deletions(-)
 create mode 100644 src/components/UI/CommentEditList.jsx

diff --git a/src/components/UI/CommentEditList.jsx b/src/components/UI/CommentEditList.jsx
new file mode 100644
index 00000000..0cca5899
--- /dev/null
+++ b/src/components/UI/CommentEditList.jsx
@@ -0,0 +1,69 @@
+import styled from 'styled-components';
+import { useState } from 'react';
+
+import kebab from '../../assets/images/icons/ic_kebab.svg';
+import { FontTypes, ColorTypes } from '../../styles/theme';
+import { applyFontStyles } from '../../styles/mixins';
+
+function CommentEditList() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <StyledContainer>
+      <StyledEditButton onClick={() => setIsOpen((prev) => !prev)}>
+        <img
+          src={kebab}
+          alt="kebab"
+        />
+      </StyledEditButton>
+
+      {isOpen && (
+        <StyledEditList>
+          <StyledEditItem>수정하기</StyledEditItem>
+          <StyledEditItem>삭제하기</StyledEditItem>
+        </StyledEditList>
+      )}
+    </StyledContainer>
+  );
+}
+
+export default CommentEditList;
+
+const StyledContainer = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const StyledEditButton = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+`;
+
+const StyledEditList = styled.div`
+  position: absolute;
+  top: 34px;
+  right: 0px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+
+  width: 138px;
+  height: 96px;
+  border-radius: 8px;
+  border: 1px solid ${({ theme }) => theme.colors[ColorTypes.SECONDARY_GRAY_200]};
+  background-color: #ffffff;
+  z-index: 1;
+`;
+
+const StyledEditItem = styled.div`
+  display: flex;
+
+  ${applyFontStyles(FontTypes.REGULAR16, ColorTypes.SECONDARY_GRAY_500)}
+`;
diff --git a/src/components/pages/ItemDetailPage/ProductComments.jsx b/src/components/pages/ItemDetailPage/ProductComments.jsx
index 895c098e..e68b824c 100644
--- a/src/components/pages/ItemDetailPage/ProductComments.jsx
+++ b/src/components/pages/ItemDetailPage/ProductComments.jsx
@@ -7,7 +7,7 @@ import { FontTypes, ColorTypes } from '../../../styles/theme';
 import { applyFlexColumn } from '../../../styles/mixins';
 import useFormatTime from '../../../hooks/useFormatTime';
 import profile from '../../../assets/images/icons/ic_profile.png';
-import kebab from '../../../assets/images/icons/ic_kebab.svg';
+import CommentEditList from '../../UI/CommentEditList';
 
 function ProductComments() {
   const { productId } = useParams();
@@ -29,7 +29,6 @@ function ProductComments() {
   }, [productId]);
 
   const time = useFormatTime(comments[0]?.createdAt);
-  console.log(time);
 
   return (
     <StyledCommentContainer>
@@ -50,10 +49,7 @@ function ProductComments() {
               <StyledCommentContent>{comment.content}</StyledCommentContent>
 
               <StyledKebabWrapper>
-                <img
-                  src={kebab}
-                  alt="kebab"
-                />
+                <CommentEditList />
               </StyledKebabWrapper>
             </StyledCommentContentWrapper>
             <StyledUserInfoWrapper>

From babea4103b057e210ebd9d9c541520ee728e31ca Mon Sep 17 00:00:00 2001
From: sinyroom <wldmsdl7913@naver.com>
Date: Thu, 3 Jul 2025 17:18:05 +0900
Subject: [PATCH 09/18] =?UTF-8?q?feat:=20=EC=BD=94=EB=A9=98=ED=8A=B8=20?=
 =?UTF-8?q?=EC=97=86=EC=9D=84=20=EC=8B=9C=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EB=B3=B4=EC=97=AC=EC=A3=BC=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/icons/ic_nocomment.png      | Bin 0 -> 6265 bytes
 src/components/UI/CommentEditList.jsx         |   4 +-
 .../pages/ItemDetailPage/ItemDetailPage.jsx   |   1 -
 .../pages/ItemDetailPage/ProductComments.jsx  |  64 ++++++++++--------
 4 files changed, 38 insertions(+), 31 deletions(-)
 create mode 100644 src/assets/images/icons/ic_nocomment.png

diff --git a/src/assets/images/icons/ic_nocomment.png b/src/assets/images/icons/ic_nocomment.png
new file mode 100644
index 0000000000000000000000000000000000000000..25019b5afc96cfe296a580709c763565507e2260
GIT binary patch
literal 6265
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

literal 0
HcmV?d00001

diff --git a/src/components/UI/CommentEditList.jsx b/src/components/UI/CommentEditList.jsx
index 0cca5899..1f01c969 100644
--- a/src/components/UI/CommentEditList.jsx
+++ b/src/components/UI/CommentEditList.jsx
@@ -44,7 +44,7 @@ const StyledEditButton = styled.div`
   height: 24px;
 `;
 
-const StyledEditList = styled.div`
+const StyledEditList = styled.ul`
   position: absolute;
   top: 34px;
   right: 0px;
@@ -62,7 +62,7 @@ const StyledEditList = styled.div`
   z-index: 1;
 `;
 
-const StyledEditItem = styled.div`
+const StyledEditItem = styled.li`
   display: flex;
 
   ${applyFontStyles(FontTypes.REGULAR16, ColorTypes.SECONDARY_GRAY_500)}
diff --git a/src/components/pages/ItemDetailPage/ItemDetailPage.jsx b/src/components/pages/ItemDetailPage/ItemDetailPage.jsx
index ff64a03b..3d485001 100644
--- a/src/components/pages/ItemDetailPage/ItemDetailPage.jsx
+++ b/src/components/pages/ItemDetailPage/ItemDetailPage.jsx
@@ -5,7 +5,6 @@ import ProductComments from './ProductComments';
 
 import { applyFontStyles } from '../../../styles/mixins';
 import { FontTypes, ColorTypes } from '../../../styles/theme';
-
 import back from '../../../assets/images/icons/ic_back.png';
 
 function ItemDetailPage() {
diff --git a/src/components/pages/ItemDetailPage/ProductComments.jsx b/src/components/pages/ItemDetailPage/ProductComments.jsx
index e68b824c..6281fc37 100644
--- a/src/components/pages/ItemDetailPage/ProductComments.jsx
+++ b/src/components/pages/ItemDetailPage/ProductComments.jsx
@@ -8,15 +8,18 @@ import { applyFlexColumn } from '../../../styles/mixins';
 import useFormatTime from '../../../hooks/useFormatTime';
 import profile from '../../../assets/images/icons/ic_profile.png';
 import CommentEditList from '../../UI/CommentEditList';
+import noComment from '../../../assets/images/icons/ic_nocomment.png';
 
 function ProductComments() {
   const { productId } = useParams();
+  const [isNoComment, setIsNoComment] = useState(true);
   const [comments, setComments] = useState([]);
   const [nextCursor, setNextCursor] = useState(null);
 
   const fetchComments = async () => {
     try {
       const data = await getComments(productId, 3, nextCursor);
+      setIsNoComment(data.list.length === 0);
       setComments((prev) => [...prev, ...data.list]);
       setNextCursor(data.nextCursor);
     } catch (error) {
@@ -28,9 +31,12 @@ function ProductComments() {
     fetchComments();
   }, [productId]);
 
-  const time = useFormatTime(comments[0]?.createdAt);
-
-  return (
+  return isNoComment ? (
+    <img
+      src={noComment}
+      alt="noComment"
+    />
+  ) : (
     <StyledCommentContainer>
       <StyledCommentInput>
         <StyledCommentTitle>문의하기</StyledCommentTitle>
@@ -43,31 +49,33 @@ function ProductComments() {
         </StyledButtonWrapper>
       </StyledCommentInput>
       <StyledCommentList>
-        {comments?.map((comment) => (
-          <StyledCommentWrapper key={comment?.id}>
-            <StyledCommentContentWrapper>
-              <StyledCommentContent>{comment.content}</StyledCommentContent>
-
-              <StyledKebabWrapper>
-                <CommentEditList />
-              </StyledKebabWrapper>
-            </StyledCommentContentWrapper>
-            <StyledUserInfoWrapper>
-              <StyledUserInfo>
-                <StyledProfileWrapper>
-                  <img
-                    src={profile}
-                    alt="profile"
-                  />
-                </StyledProfileWrapper>
-                <StyledNameWrapper>
-                  <StyledName>{comment.writer.nickname}</StyledName>
-                  <StyledCreatedAt>{time}</StyledCreatedAt>
-                </StyledNameWrapper>
-              </StyledUserInfo>
-            </StyledUserInfoWrapper>
-          </StyledCommentWrapper>
-        ))}
+        {comments?.map((comment) => {
+          const time = useFormatTime(comment?.createdAt);
+          return (
+            <StyledCommentWrapper key={comment?.id}>
+              <StyledCommentContentWrapper>
+                <StyledCommentContent>{comment.content}</StyledCommentContent>
+                <StyledKebabWrapper>
+                  <CommentEditList />
+                </StyledKebabWrapper>
+              </StyledCommentContentWrapper>
+              <StyledUserInfoWrapper>
+                <StyledUserInfo>
+                  <StyledProfileWrapper>
+                    <img
+                      src={profile}
+                      alt="profile"
+                    />
+                  </StyledProfileWrapper>
+                  <StyledNameWrapper>
+                    <StyledName>{comment.writer.nickname}</StyledName>
+                    <StyledCreatedAt>{time}</StyledCreatedAt>
+                  </StyledNameWrapper>
+                </StyledUserInfo>
+              </StyledUserInfoWrapper>
+            </StyledCommentWrapper>
+          );
+        })}
       </StyledCommentList>
     </StyledCommentContainer>
   );

From b28c26b1fe0c7b69d04e3077d443fa3b13752505 Mon Sep 17 00:00:00 2001
From: sinyroom <wldmsdl7913@naver.com>
Date: Thu, 3 Jul 2025 17:25:06 +0900
Subject: [PATCH 10/18] =?UTF-8?q?feat:=20=ED=83=9C=EA=B7=B8=20=EC=97=86?=
 =?UTF-8?q?=EC=9D=84=20=EB=95=8C=20=EB=AC=B8=EA=B5=AC=20=EC=82=BD=EC=9E=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/ItemDetailPage/ProductInfo.jsx      | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/pages/ItemDetailPage/ProductInfo.jsx b/src/components/pages/ItemDetailPage/ProductInfo.jsx
index cfd085e1..5644c6e6 100644
--- a/src/components/pages/ItemDetailPage/ProductInfo.jsx
+++ b/src/components/pages/ItemDetailPage/ProductInfo.jsx
@@ -11,12 +11,14 @@ import kebab from '../../../assets/images/icons/ic_kebab.svg';
 
 function ProductInfo() {
   const [product, setProduct] = useState(null);
+  const [isTags, setIsTags] = useState(false);
   const { productId } = useParams();
 
   useEffect(() => {
     const fetchProductDetail = async () => {
       const res = await getProductDetail(productId);
       setProduct(res);
+      setIsTags(res.tags.length > 0);
     };
     fetchProductDetail();
   }, [productId]);
@@ -50,11 +52,15 @@ function ProductInfo() {
               <StyledProductTagWrapper>
                 <StyledSecTitle>상품 태그</StyledSecTitle>
                 <StyledTagList>
-                  {product?.tags.map((tag) => (
-                    <StyledTagWrapper key={tag}>
-                      <span>{`#${tag}`}</span>
-                    </StyledTagWrapper>
-                  ))}
+                  {isTags ? (
+                    product.tags.map((tag) => (
+                      <StyledTagWrapper key={tag}>
+                        <span>{`#${tag}`}</span>
+                      </StyledTagWrapper>
+                    ))
+                  ) : (
+                    <StyledNoTag>태그가 없습니다.</StyledNoTag>
+                  )}
                 </StyledTagList>
               </StyledProductTagWrapper>
             </StyledProductDesContainer>
@@ -195,6 +201,10 @@ const StyledProductTagWrapper = styled.div`
   ${applyFlexColumn()}
 `;
 
+const StyledNoTag = styled.span`
+  ${applyFontStyles(FontTypes.REGULAR16, ColorTypes.SECONDARY_GRAY_400)}
+`;
+
 const StyledProductOwnerInfo = styled.div`
   display: flex;
   justify-content: space-between;

From 4fdad0003032e1e857fcf7bbadce0a5f6963fa55 Mon Sep 17 00:00:00 2001
From: sinyroom <wldmsdl7913@naver.com>
Date: Thu, 3 Jul 2025 17:33:37 +0900
Subject: [PATCH 11/18] =?UTF-8?q?feat:=20=EC=BD=94=EB=A9=98=ED=8A=B8=20?=
 =?UTF-8?q?=EC=97=86=EC=9D=84=20=EC=8B=9C=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/ItemDetailPage/ProductComments.jsx  | 30 ++++++++++++++++---
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/components/pages/ItemDetailPage/ProductComments.jsx b/src/components/pages/ItemDetailPage/ProductComments.jsx
index 6281fc37..a71e1096 100644
--- a/src/components/pages/ItemDetailPage/ProductComments.jsx
+++ b/src/components/pages/ItemDetailPage/ProductComments.jsx
@@ -32,10 +32,13 @@ function ProductComments() {
   }, [productId]);
 
   return isNoComment ? (
-    <img
-      src={noComment}
-      alt="noComment"
-    />
+    <StyledNoCommentContainer>
+      <img
+        src={noComment}
+        alt="noComment"
+      />
+      <div>아직 문의가 없어요</div>
+    </StyledNoCommentContainer>
   ) : (
     <StyledCommentContainer>
       <StyledCommentInput>
@@ -83,6 +86,25 @@ function ProductComments() {
 
 export default ProductComments;
 
+const StyledNoCommentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  margin-bottom: 59px;
+
+  img {
+    width: 196px;
+    height: 196px;
+  }
+
+  div {
+    ${applyFontStyles(FontTypes.REGULAR18, ColorTypes.SECONDARY_GRAY_400)}
+  }
+`;
+
 const StyledCommentContainer = styled.div`
   display: flex;
   flex-direction: column;

From 81af5a7c8a2eb1bef5d630b6d81b7af06a800d02 Mon Sep 17 00:00:00 2001
From: sinyroom <wldmsdl7913@naver.com>
Date: Fri, 4 Jul 2025 22:21:45 +0900
Subject: [PATCH 12/18] =?UTF-8?q?feat:=20=EC=BD=94=EB=A9=98=ED=8A=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20API=20=ED=95=A8=EC=88=98=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1,=20=EC=9D=BC=EB=B6=80=20UI=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/api.js                                | 10 +++
 .../pages/ItemDetailPage/ProductComments.jsx  | 81 ++++++++++---------
 2 files changed, 52 insertions(+), 39 deletions(-)

diff --git a/src/api/api.js b/src/api/api.js
index 9f2d59a0..a67398a0 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -38,3 +38,13 @@ export const getComments = async (productId, limit = 10, cursor = null) => {
     throw error;
   }
 };
+
+export const patchComment = async (commentId, content) => {
+  try {
+    const res = await axios.patch(`${baseURL}/comments/${commentId}`, { content: content });
+    return res.data;
+  } catch (error) {
+    console.log('상품 댓글 수정 api 호출 실패 :', error.message);
+    throw error;
+  }
+};
diff --git a/src/components/pages/ItemDetailPage/ProductComments.jsx b/src/components/pages/ItemDetailPage/ProductComments.jsx
index a71e1096..2564a47b 100644
--- a/src/components/pages/ItemDetailPage/ProductComments.jsx
+++ b/src/components/pages/ItemDetailPage/ProductComments.jsx
@@ -31,15 +31,7 @@ function ProductComments() {
     fetchComments();
   }, [productId]);
 
-  return isNoComment ? (
-    <StyledNoCommentContainer>
-      <img
-        src={noComment}
-        alt="noComment"
-      />
-      <div>아직 문의가 없어요</div>
-    </StyledNoCommentContainer>
-  ) : (
+  return (
     <StyledCommentContainer>
       <StyledCommentInput>
         <StyledCommentTitle>문의하기</StyledCommentTitle>
@@ -51,35 +43,46 @@ function ProductComments() {
           <StyledButton>등록</StyledButton>
         </StyledButtonWrapper>
       </StyledCommentInput>
-      <StyledCommentList>
-        {comments?.map((comment) => {
-          const time = useFormatTime(comment?.createdAt);
-          return (
-            <StyledCommentWrapper key={comment?.id}>
-              <StyledCommentContentWrapper>
-                <StyledCommentContent>{comment.content}</StyledCommentContent>
-                <StyledKebabWrapper>
-                  <CommentEditList />
-                </StyledKebabWrapper>
-              </StyledCommentContentWrapper>
-              <StyledUserInfoWrapper>
-                <StyledUserInfo>
-                  <StyledProfileWrapper>
-                    <img
-                      src={profile}
-                      alt="profile"
-                    />
-                  </StyledProfileWrapper>
-                  <StyledNameWrapper>
-                    <StyledName>{comment.writer.nickname}</StyledName>
-                    <StyledCreatedAt>{time}</StyledCreatedAt>
-                  </StyledNameWrapper>
-                </StyledUserInfo>
-              </StyledUserInfoWrapper>
-            </StyledCommentWrapper>
-          );
-        })}
-      </StyledCommentList>
+
+      {isNoComment ? (
+        <StyledNoCommentContainer>
+          <img
+            src={noComment}
+            alt="noComment"
+          />
+          <div>아직 문의가 없어요</div>
+        </StyledNoCommentContainer>
+      ) : (
+        <StyledCommentList>
+          {comments?.map((comment) => {
+            const time = useFormatTime(comment?.createdAt);
+            return (
+              <StyledCommentWrapper key={comment?.id}>
+                <StyledCommentContentWrapper>
+                  <StyledCommentContent>{comment.content}</StyledCommentContent>
+                  <StyledKebabWrapper>
+                    <CommentEditList />
+                  </StyledKebabWrapper>
+                </StyledCommentContentWrapper>
+                <StyledUserInfoWrapper>
+                  <StyledUserInfo>
+                    <StyledProfileWrapper>
+                      <img
+                        src={profile}
+                        alt="profile"
+                      />
+                    </StyledProfileWrapper>
+                    <StyledNameWrapper>
+                      <StyledName>{comment.writer.nickname}</StyledName>
+                      <StyledCreatedAt>{time}</StyledCreatedAt>
+                    </StyledNameWrapper>
+                  </StyledUserInfo>
+                </StyledUserInfoWrapper>
+              </StyledCommentWrapper>
+            );
+          })}
+        </StyledCommentList>
+      )}
     </StyledCommentContainer>
   );
 }
@@ -101,7 +104,7 @@ const StyledNoCommentContainer = styled.div`
   }
 
   div {
-    ${applyFontStyles(FontTypes.REGULAR18, ColorTypes.SECONDARY_GRAY_400)}
+    ${applyFlexColumn('16px')}
   }
 `;
 

From a0f0a7ca8438f1644391471528ecb40c45cd3126 Mon Sep 17 00:00:00 2001
From: sinyroom <wldmsdl7913@naver.com>
Date: Wed, 9 Jul 2025 12:18:13 +0900
Subject: [PATCH 13/18] =?UTF-8?q?feat:=20=EC=BD=94=EB=A9=98=ED=8A=B8=20?=
 =?UTF-8?q?=EB=B6=80=EB=B6=84=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/api.js                                |  20 +++
 src/components/UI/CommentEditList.jsx         |  17 +-
 .../pages/ItemDetailPage/ProductComments.jsx  | 168 +++++++++++++++++-
 3 files changed, 193 insertions(+), 12 deletions(-)

diff --git a/src/api/api.js b/src/api/api.js
index a67398a0..6f015ce0 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -24,6 +24,16 @@ export const getProductDetail = async (productId) => {
   }
 };
 
+export const postComment = async (productId, content) => {
+  try {
+    const res = await axios.post(`${baseURL}/products/${productId}/comments`, { content: content });
+    return res.data;
+  } catch (error) {
+    console.log('상품 댓글 등록 api 호출 실패 :', error.message);
+    throw error;
+  }
+};
+
 export const getComments = async (productId, limit = 10, cursor = null) => {
   try {
     const res = await axios.get(`${baseURL}/products/${productId}/comments`, {
@@ -48,3 +58,13 @@ export const patchComment = async (commentId, content) => {
     throw error;
   }
 };
+
+export const deleteComment = async (commentId) => {
+  try {
+    const res = await axios.delete(`${baseURL}/comments/${commentId}`);
+    return res.data;
+  } catch (error) {
+    console.log('상품 댓글 삭제 api 호출 실패 :', error.message);
+    throw error;
+  }
+};
diff --git a/src/components/UI/CommentEditList.jsx b/src/components/UI/CommentEditList.jsx
index 1f01c969..6e465ac7 100644
--- a/src/components/UI/CommentEditList.jsx
+++ b/src/components/UI/CommentEditList.jsx
@@ -5,9 +5,19 @@ import kebab from '../../assets/images/icons/ic_kebab.svg';
 import { FontTypes, ColorTypes } from '../../styles/theme';
 import { applyFontStyles } from '../../styles/mixins';
 
-function CommentEditList() {
+function CommentEditList({ onEditClick, commentId, onDeleteClick }) {
   const [isOpen, setIsOpen] = useState(false);
 
+  const handleEdit = () => {
+    onEditClick(commentId);
+    setIsOpen(false);
+  };
+
+  const handleDelete = () => {
+    onDeleteClick(commentId);
+    setIsOpen(false);
+  };
+
   return (
     <StyledContainer>
       <StyledEditButton onClick={() => setIsOpen((prev) => !prev)}>
@@ -19,8 +29,8 @@ function CommentEditList() {
 
       {isOpen && (
         <StyledEditList>
-          <StyledEditItem>수정하기</StyledEditItem>
-          <StyledEditItem>삭제하기</StyledEditItem>
+          <StyledEditItem onClick={handleEdit}>수정하기</StyledEditItem>
+          <StyledEditItem onClick={handleDelete}>삭제하기</StyledEditItem>
         </StyledEditList>
       )}
     </StyledContainer>
@@ -64,6 +74,7 @@ const StyledEditList = styled.ul`
 
 const StyledEditItem = styled.li`
   display: flex;
+  cursor: pointer;
 
   ${applyFontStyles(FontTypes.REGULAR16, ColorTypes.SECONDARY_GRAY_500)}
 `;
diff --git a/src/components/pages/ItemDetailPage/ProductComments.jsx b/src/components/pages/ItemDetailPage/ProductComments.jsx
index 2564a47b..6fb47c13 100644
--- a/src/components/pages/ItemDetailPage/ProductComments.jsx
+++ b/src/components/pages/ItemDetailPage/ProductComments.jsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import styled from 'styled-components';
-import { getComments } from '../../../api/api';
+import { getComments, postComment, patchComment, deleteComment } from '../../../api/api';
 import { applyFontStyles } from '../../../styles/mixins';
 import { FontTypes, ColorTypes } from '../../../styles/theme';
 import { applyFlexColumn } from '../../../styles/mixins';
@@ -13,24 +13,93 @@ import noComment from '../../../assets/images/icons/ic_nocomment.png';
 function ProductComments() {
   const { productId } = useParams();
   const [isNoComment, setIsNoComment] = useState(true);
+  const [comment, setComment] = useState('');
   const [comments, setComments] = useState([]);
   const [nextCursor, setNextCursor] = useState(null);
+  const [editCommentId, setEditCommentId] = useState(null);
+  const [editContent, setEditContent] = useState('');
 
-  const fetchComments = async () => {
+  const submitComment = async (content) => {
     try {
-      const data = await getComments(productId, 3, nextCursor);
+      const data = await postComment(productId, content);
+      console.log(data);
+    } catch (error) {
+      console.error('댓글 등록 실패:', error);
+    }
+  };
+
+  const fetchComments = async (isInitial = false) => {
+    try {
+      const data = await getComments(productId, 3, isInitial ? null : nextCursor);
       setIsNoComment(data.list.length === 0);
-      setComments((prev) => [...prev, ...data.list]);
+      if (isInitial) {
+        setComments(data.list);
+      } else {
+        setComments((prev) => [...prev, ...data.list]);
+      }
       setNextCursor(data.nextCursor);
     } catch (error) {
       console.error('댓글 목록 가져오기 실패:', error);
     }
   };
 
+  const editComment = async (commentId, content) => {
+    try {
+      const data = await patchComment(commentId, content);
+      console.log(data);
+    } catch (error) {
+      console.error('댓글 수정 실패:', error);
+    }
+  };
+
+  const removeComment = async (commentId) => {
+    try {
+      const data = await deleteComment(commentId);
+      console.log(data);
+    } catch (error) {
+      console.error('댓글 삭제 실패:', error);
+    }
+  };
+
   useEffect(() => {
-    fetchComments();
+    setNextCursor(null);
+    fetchComments(true);
   }, [productId]);
 
+  const handlePostComment = (content) => {
+    submitComment(content);
+    setComments((prevComments) => [...prevComments, { id: 'new', content: content }]);
+  };
+
+  const handleEditClick = (commentId) => {
+    setEditCommentId(commentId);
+    const updateComment = comments.find((comment) => comment.id === commentId);
+    setEditContent(updateComment?.content || '');
+  };
+
+  const handleCancelEdit = () => {
+    setEditCommentId(null);
+    setEditContent('');
+  };
+
+  const handleSaveEdit = async (commentId, content) => {
+    try {
+      await editComment(commentId, content);
+      setEditCommentId(null);
+      setEditContent('');
+      setComments((prevComments) =>
+        prevComments.map((comment) => (comment.id === commentId ? { ...comment, content: content } : comment))
+      );
+    } catch (error) {
+      console.error('댓글 수정 실패:', error);
+    }
+  };
+
+  const handleDeleteClick = (commentId) => {
+    removeComment(commentId);
+    setComments((prevComments) => prevComments.filter((comment) => comment.id !== commentId));
+  };
+
   return (
     <StyledCommentContainer>
       <StyledCommentInput>
@@ -40,7 +109,7 @@ function ProductComments() {
           placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
         />
         <StyledButtonWrapper>
-          <StyledButton>등록</StyledButton>
+          <StyledButton onClick={() => handlePostComment(comment)}>등록</StyledButton>
         </StyledButtonWrapper>
       </StyledCommentInput>
 
@@ -55,13 +124,48 @@ function ProductComments() {
       ) : (
         <StyledCommentList>
           {comments?.map((comment) => {
-            const time = useFormatTime(comment?.createdAt);
-            return (
+            const time = useFormatTime(comment?.createdAt || '');
+            return editCommentId === comment.id ? (
+              <StyledEditCommentWrapper key={comment?.id}>
+                <StyledEditComment>
+                  <textarea
+                    value={editContent}
+                    onChange={(e) => setEditContent(e.target.value)}
+                  />
+                  <StyledEditUserInfo>
+                    <StyledProfileContainer>
+                      <StyledProfileWrapper>
+                        <img
+                          src={profile}
+                          alt="profile"
+                        />
+                      </StyledProfileWrapper>
+                      <StyledNameWrapper>
+                        <StyledName>{comment.writer.nickname}</StyledName>
+                        <StyledCreatedAt>{time}</StyledCreatedAt>
+                      </StyledNameWrapper>
+                    </StyledProfileContainer>
+                    <StyledEditButtonContainer>
+                      <StyledEditButtonWrapper>
+                        <StyledEditCancelButton onClick={handleCancelEdit}>취소</StyledEditCancelButton>
+                        <StyledEditSaveButton onClick={() => handleSaveEdit(comment.id, editContent)}>
+                          수정 완료
+                        </StyledEditSaveButton>
+                      </StyledEditButtonWrapper>
+                    </StyledEditButtonContainer>
+                  </StyledEditUserInfo>
+                </StyledEditComment>
+              </StyledEditCommentWrapper>
+            ) : (
               <StyledCommentWrapper key={comment?.id}>
                 <StyledCommentContentWrapper>
                   <StyledCommentContent>{comment.content}</StyledCommentContent>
                   <StyledKebabWrapper>
-                    <CommentEditList />
+                    <CommentEditList
+                      onEditClick={handleEditClick}
+                      commentId={comment.id}
+                      onDeleteClick={handleDeleteClick}
+                    />
                   </StyledKebabWrapper>
                 </StyledCommentContentWrapper>
                 <StyledUserInfoWrapper>
@@ -155,6 +259,16 @@ const StyledUserInfoWrapper = styled.div`
   justify-content: space-between;
 `;
 
+const StyledEditCommentWrapper = styled.div`
+  ${applyFlexColumn('16px')}
+  width: 100%;
+`;
+
+const StyledEditComment = styled.div`
+  ${applyFlexColumn('16px')}
+  width: 100%;
+`;
+
 const StyledCommentWrapper = styled.div`
   ${applyFlexColumn('24px')}
   padding-bottom: 12px;
@@ -173,6 +287,25 @@ const StyledUserInfo = styled.div`
   gap: 8px;
 `;
 
+const StyledEditUserInfo = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+`;
+
+const StyledProfileContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const StyledEditButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 24px;
+`;
+
 const StyledProfileWrapper = styled.div`
   width: 32px;
   height: 32px;
@@ -182,6 +315,23 @@ const StyledNameWrapper = styled.div`
   ${applyFlexColumn('4px')}
 `;
 
+const StyledEditButtonWrapper = styled.div`
+  display: flex;
+  gap: 24px;
+`;
+
+const StyledEditCancelButton = styled.button`
+  background-color: transparent;
+  ${applyFontStyles(FontTypes.SEMIBOLD16, ColorTypes.SECONDARY_GRAY_500)}
+`;
+
+const StyledEditSaveButton = styled.button`
+  width: 106px;
+  height: 42px;
+  padding: 12px 23px;
+  ${applyFontStyles(FontTypes.SEMIBOLD16, ColorTypes.SECONDARY_GRAY_100)}
+`;
+
 const StyledName = styled.p`
   ${applyFontStyles(FontTypes.REGULAR12, ColorTypes.SECONDARY_GRAY_600)}
 `;

From ebaebdd04310156dba1be5ba37e0c1aa314c3c86 Mon Sep 17 00:00:00 2001
From: sinyroom <wldmsdl7913@naver.com>
Date: Wed, 9 Jul 2025 13:31:22 +0900
Subject: [PATCH 14/18] =?UTF-8?q?feat:=20=EC=83=81=ED=92=88=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D=ED=8E=98=EC=9D=B4=EC=A7=80=20POST=20=EC=9A=94?=
 =?UTF-8?q?=EC=B2=AD=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/api.js                                | 28 ++++++++++-
 .../pages/AddItemPage/AddItemPage.jsx         | 50 ++++++++++++++++---
 2 files changed, 71 insertions(+), 7 deletions(-)

diff --git a/src/api/api.js b/src/api/api.js
index 6f015ce0..8c5d80d1 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -24,9 +24,35 @@ export const getProductDetail = async (productId) => {
   }
 };
 
+export const postProduct = async (product) => {
+  try {
+    const token = localStorage.getItem('token');
+    const res = await axios.post(`${baseURL}/products`, product, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json',
+      },
+    });
+    return res.data;
+  } catch (error) {
+    console.log('상품 등록 api 호출 실패 :', error.message);
+    throw error;
+  }
+};
+
 export const postComment = async (productId, content) => {
   try {
-    const res = await axios.post(`${baseURL}/products/${productId}/comments`, { content: content });
+    const token = localStorage.getItem('token');
+    const res = await axios.post(
+      `${baseURL}/products/${productId}/comments`,
+      { content: content },
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+      }
+    );
     return res.data;
   } catch (error) {
     console.log('상품 댓글 등록 api 호출 실패 :', error.message);
diff --git a/src/components/pages/AddItemPage/AddItemPage.jsx b/src/components/pages/AddItemPage/AddItemPage.jsx
index 12c3f40d..113ddcef 100644
--- a/src/components/pages/AddItemPage/AddItemPage.jsx
+++ b/src/components/pages/AddItemPage/AddItemPage.jsx
@@ -1,29 +1,61 @@
 import styled from 'styled-components';
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import InputField from '../../UI/InputField';
 import ImageUpload from '../../UI/ImageUpload';
 import TagInput from '../../UI/Taginput';
 import useFormatNumber from '../../../hooks/useFormatNumber';
+import { postProduct } from '../../../api/api';
 import { ColorTypes } from '../../../styles/theme';
 
 function AddItemPage() {
+  const navigate = useNavigate();
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
   const [price, handlePriceChange] = useFormatNumber('');
   const [tags, setTags] = useState([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const isValid = name.trim() && description.trim() && price.trim() && tags.length > 0;
+  const isValid = name.trim() && description.trim() && price.replace(/,/g, '').length > 0 && tags.length > 0;
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!isValid || isSubmitting) return;
+
+    setIsSubmitting(true);
+
+    try {
+      const productData = {
+        name: name.trim(),
+        description: description.trim(),
+        price: parseInt(price.replace(/,/g, '')),
+        tags: tags,
+      };
+
+      const response = await postProduct(productData);
+      console.log('상품 등록 성공:', response);
+
+      navigate('/items');
+    } catch (error) {
+      console.error('상품 등록 실패:', error);
+      alert('상품 등록에 실패했습니다. 다시 시도해주세요.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
 
   return (
     <StyledContainer>
       <StyledHeaderSection>
         <h3>상품 등록하기</h3>
         <StyledButton
-          type="submit"
-          disabled={isValid}
+          type="button"
+          disabled={!isValid || isSubmitting}
+          onClick={handleSubmit}
         >
-          등록
+          {isSubmitting ? '등록 중...' : '등록'}
         </StyledButton>
       </StyledHeaderSection>
 
@@ -91,10 +123,16 @@ const StyledHeaderSection = styled.div`
 const StyledButton = styled.button`
   width: 74px;
   height: 42px;
-  background-color: ${({ theme }) => theme.colors[ColorTypes.SECONDARY_GRAY_400]};
+  background-color: ${({ theme, disabled }) =>
+    disabled ? theme.colors[ColorTypes.SECONDARY_GRAY_400] : theme.colors[ColorTypes.PRIMARY_100]};
 
   &:disabled {
-    background-color: ${({ theme }) => theme.colors[ColorTypes.PRIMARY_100]};
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  &:not(:disabled):hover {
+    background-color: ${({ theme }) => theme.colors[ColorTypes.PRIMARY_200]};
   }
 `;
 

From 9a1fbe1b5659e3da219d7408a0dc0f75f3b58faa Mon Sep 17 00:00:00 2001
From: sinyroom <wldmsdl7913@naver.com>
Date: Wed, 9 Jul 2025 17:58:02 +0900
Subject: [PATCH 15/18] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8/?=
 =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                                   |   5 +
 src/api/api.js                                |  28 ++
 src/assets/images/icons/ic_google.png         | Bin 0 -> 3351 bytes
 src/assets/images/icons/ic_kakao.png          | Bin 0 -> 2702 bytes
 src/assets/images/icons/ic_visibility_off.png | Bin 0 -> 828 bytes
 src/assets/images/icons/ic_visibility_on.png  | Bin 0 -> 690 bytes
 src/components/UI/InputField.jsx              | 116 +++++--
 src/components/pages/LoginPage.jsx            | 219 ++++++++++++-
 src/components/pages/SignupPage.jsx           | 288 ++++++++++++++++++
 src/hooks/useFormValidation.js                |  43 +++
 10 files changed, 675 insertions(+), 24 deletions(-)
 create mode 100644 src/assets/images/icons/ic_google.png
 create mode 100644 src/assets/images/icons/ic_kakao.png
 create mode 100644 src/assets/images/icons/ic_visibility_off.png
 create mode 100644 src/assets/images/icons/ic_visibility_on.png
 create mode 100644 src/components/pages/SignupPage.jsx
 create mode 100644 src/hooks/useFormValidation.js

diff --git a/src/App.jsx b/src/App.jsx
index afe9bd2e..8b99d3e0 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,6 +5,7 @@ import theme from './styles/theme';
 import Header from './components/Layout/Header';
 import HomePage from './components/pages/HomePage';
 import LoginPage from './components/pages/LoginPage';
+import SignupPage from './components/pages/SignupPage';
 import MarketPage from './components/pages/MarketPage/MarketPage';
 import AddItemPage from './components/pages/AddItemPage/AddItemPage';
 import CommunityFeedPage from './components/pages/CommunityFeedPage';
@@ -28,6 +29,10 @@ function App() {
                 path="/login"
                 element={<LoginPage />}
               />
+              <Route
+                path="/signup"
+                element={<SignupPage />}
+              />
               <Route
                 path="/items"
                 element={<MarketPage />}
diff --git a/src/api/api.js b/src/api/api.js
index 8c5d80d1..3b72e59f 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -94,3 +94,31 @@ export const deleteComment = async (commentId) => {
     throw error;
   }
 };
+
+export const postSignup = async (email, password, nickname, passwordConfirmation) => {
+  try {
+    const res = await axios.post(`${baseURL}/auth/signup`, {
+      email,
+      password,
+      nickname,
+      passwordConfirmation,
+    });
+    return res.data;
+  } catch (error) {
+    console.log('회원가입 api 호출 실패 :', error.message);
+    throw error;
+  }
+};
+
+export const postLogin = async (email, password) => {
+  try {
+    const res = await axios.post(`${baseURL}/auth/signin`, {
+      email,
+      password,
+    });
+    return res.data;
+  } catch (error) {
+    console.log('로그인 api 호출 실패 :', error.message);
+    throw error;
+  }
+};
diff --git a/src/assets/images/icons/ic_google.png b/src/assets/images/icons/ic_google.png
new file mode 100644
index 0000000000000000000000000000000000000000..53575dc086d8d4cb039401ba685e7d9971e256b9
GIT binary patch
literal 3351
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/icons/ic_kakao.png b/src/assets/images/icons/ic_kakao.png
new file mode 100644
index 0000000000000000000000000000000000000000..000d07e3360427044d6008fd0765583cb0b18478
GIT binary patch
literal 2702
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
IM6N<$g2S^u?*IS*

literal 0
HcmV?d00001

diff --git a/src/assets/images/icons/ic_visibility_off.png b/src/assets/images/icons/ic_visibility_off.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e80ce22490b6498938cb3fad70003e1d9a77959
GIT binary patch
literal 828
zcmV-C1H=4@P)<h;3K|Lk000e1NJLTq000&M000vR1^@s6lzIJ#00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0?|oCK~#7FtyDoz
z6G0SyGrNuPR(^pc*ivYPZA+pz%MAe&Oei5<C=?TJz>OQr&6|4Dq(Hf$R8vABaALVZ
zVrZLKBw)gF!;^SZw%zf)hAl&-dY~_votZapzIpS$ZwCNvV0gmQ8yky515KsRMfoDi
zfGze8josV$urMbF^ge%~fmPNx;~ts|W}h?0^V#L3@h@QJ4EhEWDV&W6CUgh<>EQS)
zn~AA9drfSHOL5I*mfxDSi`*Hkr|07!V2KH)W9GBuTT3UWao&xao7Y$788sSn8=hh8
z4u-_7vUTFb%cjT^Uoi9-FYyS=67>c{a9qso93AYN{$Q88rCpo#1;RZgQT~ldWR4GV
znU;>uC2sR3jGyuaBktqk{?=c>bSh>ygN@2?O2H2J;g`?nt^Uvx#u#z|=nrcFZ|7Dv
zojRifTH7P&7Bez<1(+0pK(7fjn@;Li!Jt<&|C-yx?B96<U8@{~ZmSAAD()M!AN_^{
ze*Zz}=eJ^Rw?bauP~rqZ&Fo6DTP{t1Eb&7CxMe~s{-JSQ2r-E@Z<6EtVu@|+G?!Iw
z<^wU5lK@Ydi8pdk&v4vBpfr{Vy`<d0ubcEQ??F-t!(CEUje}*GC^M4_n3RJyms2KQ
z=iHgg;G|(HTdmA&4zzBnrBYrwJk0-UZHp8TyjoAFsw8q3yJ!{sx>^hwv_d|xVF6-#
z?bG6}a#?({mMrqOdpq(%<$fIcZvwvtiZ>EiijDNbOY&9acEv2{s8>&*<6$9_PM#eV
zbMO6a;eyTJJFe|v9ru8-85!Ky79Pc}u<>zz;wpg}t4NQrSt1mtDFj@-!(Dl&o<x{s
zTidi=s}|YVO-@pTT2kYJi;>F%>RLT;2LG}C!SSe2Y>f$Ck)ADVR1i1uM>1}DxEf}7
zu#P{5sC|eOxTVRYdjp|Ud=B#D=g<J7_XYJkYAd$k`2GOmhHA0pTduVL0000<MNUMn
GLSTY>V|p(D

literal 0
HcmV?d00001

diff --git a/src/assets/images/icons/ic_visibility_on.png b/src/assets/images/icons/ic_visibility_on.png
new file mode 100644
index 0000000000000000000000000000000000000000..9920a1ef717e1386f1ca86d9449fb42b16cbb33f
GIT binary patch
literal 690
zcmV;j0!{siP)<h;3K|Lk000e1NJLTq000&M000jN1^@s6;B7x>00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0!K+iK~#7Fg;YUq
z+E5Uk`385(5u6*iC#bV)(pGiVf>1XYNTu$=4S*B0>?#Ec*;EJ`$yEvIF60KjL45?&
zt{Ut=opCU73?W~F|2>|0Gk@M2BRsN>-+!=S7267xCC`L<iKv3vxWCvJhr5if+bZ3f
ze@+!)ivUUw#D;`4GL?DmkH3WZmnv^KdfRlP;@{r_3aA!J!<(W}Jh+?=P=0b28xY(e
zVP_Suu8+$NZ*RrNl}1~f5pWS1QT^9=6pH<2^~50!ujQ<PZmuQ+U(U~~o@GQvhf!)=
zeP=%T+T8-)fD(3R-}{}^{-WHx=FMTxkl!r{$R-5eyp8L=KUyY<-<@<AxSa)8X+=9h
zD~(T_*=GCU<z#R$oA#ed8x(;PnT1yBCovK$7@Wk}0F$O67awFnlj{(Agg9dRBDMXz
z;5H!ki0CxyyN+FO)x!kXEwh{mEREF7I!gaU5z<r06BARwTgk0{w6b=-O^-KAB&z)B
zSs?x6>)oqBh~qXa4L}>VkntJ+FY_|f3fjDd^KWNC(hAgA=gkoUa{$Sek19<!H6;o`
z@>nJ3S=V)}@KH}fHvv1CbzQF%nZ}R^1UTS#B@VPij!fiX7Bo-(Jsqdud>rv0bknQ8
z;-QHZOHTSo=%-{#k9k0ZEGMt1t&x@~Ld3QZDhV{gk0+`aq)7zqpI+GpK#hHpWU+?&
z)y3V=JP0gH6j6u@9x1A=6KpLZmcK~7LKJ;Y2jx-V>=MC~p_vqwe2g^d5WooLqNY9T
YKPB-kpp#q@0{{R307*qoM6N<$f@=yXvH$=8

literal 0
HcmV?d00001

diff --git a/src/components/UI/InputField.jsx b/src/components/UI/InputField.jsx
index c8f67584..28d9b71c 100644
--- a/src/components/UI/InputField.jsx
+++ b/src/components/UI/InputField.jsx
@@ -1,27 +1,65 @@
 import styled from 'styled-components';
+import { useState } from 'react';
+import closeEye from '../../assets/images/icons/ic_visibility_off.png';
+import openEye from '../../assets/images/icons/ic_visibility_on.png';
+import { applyFontStyles } from '../../styles/mixins';
+import { ColorTypes, FontTypes } from '../../styles/theme';
 
-function InputField({ label, type, placeholder, isTextArea, value, onChange }) {
-  return isTextArea ? (
-    <StyledContainer>
-      <label htmlFor="textarea">{label}</label>
-      <textarea
-        id="textarea"
-        placeholder={placeholder}
-        value={value}
-        onChange={onChange}
-        rows={10}
-      />
-    </StyledContainer>
-  ) : (
+function InputField({ label, type, placeholder, isTextArea, value, onChange, onBlur, error, id }) {
+  const [isPwVisible, setIsPwVisible] = useState(false);
+
+  if (isTextArea) {
+    return (
+      <StyledContainer>
+        <label htmlFor="textarea">{label}</label>
+        <textarea
+          id="textarea"
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          rows={10}
+        />
+      </StyledContainer>
+    );
+  }
+
+  const inputType = type === 'password' ? (isPwVisible ? 'text' : 'password') : type;
+
+  return (
     <StyledContainer>
       <label htmlFor="input">{label}</label>
-      <input
-        id="input"
-        type={type}
-        placeholder={placeholder}
-        value={value}
-        onChange={onChange}
-      />
+      <InputWrapper $hasError={!!error}>
+        <input
+          id={id}
+          type={inputType}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+          autoComplete={
+            type === 'email'
+              ? 'username'
+              : type === 'password'
+              ? 'current-password'
+              : type === 'nickname'
+              ? 'nickname'
+              : undefined
+          }
+        />
+        {type === 'password' && (
+          <EyeButton
+            type="button"
+            onClick={() => setIsPwVisible((prev) => !prev)}
+            tabIndex={-1}
+          >
+            <img
+              src={isPwVisible ? openEye : closeEye}
+              alt={isPwVisible ? '비밀번호 숨기기' : '비밀번호 보기'}
+            />
+          </EyeButton>
+        )}
+      </InputWrapper>
+      {error && <StyledError>{error}</StyledError>}
     </StyledContainer>
   );
 }
@@ -31,5 +69,41 @@ export default InputField;
 const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 8px;
+  width: 100%;
+`;
+
+const InputWrapper = styled.div`
+  position: relative;
+  width: 100%;
+
+  input {
+    width: 100%;
+    padding-right: 30px;
+    border: 1px solid
+      ${({ $hasError, theme }) =>
+        $hasError ? theme.colors[ColorTypes.ERROR] : theme.colors[ColorTypes.SECONDARY_GRAY_100]};
+  }
+`;
+
+const EyeButton = styled.button`
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  img {
+    width: 20px;
+    height: 18px;
+    margin-right: 18px;
+  }
+`;
+const StyledError = styled.p`
+  ${applyFontStyles(FontTypes.SEMIBOLD14, ColorTypes.ERROR)}
 `;
diff --git a/src/components/pages/LoginPage.jsx b/src/components/pages/LoginPage.jsx
index 3abbd607..40b03fb9 100644
--- a/src/components/pages/LoginPage.jsx
+++ b/src/components/pages/LoginPage.jsx
@@ -1,9 +1,222 @@
+import { Link, useNavigate } from 'react-router-dom';
+import { useState } from 'react';
+import styled from 'styled-components';
+import logo from '../../assets/images/logo/logo.svg';
+import google from '../../assets/images/icons/ic_google.png';
+import kakao from '../../assets/images/icons/ic_kakao.png';
+import InputField from '../UI/InputField';
+import { applyFontStyles } from '../../styles/mixins';
+import { ColorTypes, FontTypes } from '../../styles/theme';
+import useFormValidation from '../../hooks/useFormValidation';
+import { postLogin } from '../../api/api';
+
 function LoginPage() {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const { errors, setErrors, validate, validateField } = useFormValidation('login');
+
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    const validationResult = validate({ email, password });
+    setErrors(validationResult);
+    if (Object.keys(validationResult).length > 0) return;
+
+    try {
+      const res = await postLogin(email, password);
+      localStorage.setItem('token', res.accessToken);
+      navigate('/');
+    } catch (error) {
+      console.error('로그인 실패:', error);
+    }
+  };
+
+  const handleEmailChange = (e) => {
+    const value = e.target.value;
+    setEmail(value);
+    setErrors((prev) => ({
+      ...prev,
+      email: validateField('email', value, { email: value, password }, 'login'),
+    }));
+  };
+
+  const handlePasswordChange = (e) => {
+    const value = e.target.value;
+    setPassword(value);
+    setErrors((prev) => ({
+      ...prev,
+      password: validateField('password', value, { email, password: value }, 'login'),
+    }));
+  };
+
+  const handleEmailBlur = (e) => {
+    const value = e.target.value;
+    setErrors((prev) => ({
+      ...prev,
+      email: validateField('email', value, { email: value, password }, 'login'),
+    }));
+  };
+
+  const handlePasswordBlur = (e) => {
+    const value = e.target.value;
+    setErrors((prev) => ({
+      ...prev,
+      password: validateField('password', value, { email, password: value }, 'login'),
+    }));
+  };
+
+  const hasError = Object.values(errors).some((v) => !!v);
+  const isFilled = email && password;
+  const disabled = hasError || !isFilled;
+
   return (
-    <div>
-      <h1>LoginPage</h1>
-    </div>
+    <StyledContainer>
+      <StyledLogo
+        src={logo}
+        alt="logo"
+      />
+      <StyledForm onSubmit={handleLogin}>
+        <InputField
+          label="이메일"
+          type="email"
+          placeholder="이메일을 입력해주세요"
+          isTextArea={false}
+          value={email}
+          onChange={handleEmailChange}
+          onBlur={handleEmailBlur}
+          error={errors.email}
+        />
+        <InputField
+          label="비밀번호"
+          type="password"
+          placeholder="비밀번호를 입력해주세요"
+          isTextArea={false}
+          value={password}
+          onChange={handlePasswordChange}
+          onBlur={handlePasswordBlur}
+          error={errors.password}
+        />
+        <StyledButton
+          type="submit"
+          disabled={disabled}
+        >
+          로그인
+        </StyledButton>
+      </StyledForm>
+      <StyledSnsLogin>
+        <p>간편 로그인하기</p>
+        <StyledSnsLoginIcons>
+          <a
+            href="https://www.google.com/?hl=ko"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img
+              src={google}
+              alt="google"
+            />
+          </a>
+          <a
+            href="https://www.kakaocorp.com/page/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img
+              src={kakao}
+              alt="kakao"
+            />
+          </a>
+        </StyledSnsLoginIcons>
+      </StyledSnsLogin>
+      <StyledSignupLink>
+        <p>판다마켓이 처음이신가요?</p>
+        <Link to="/signup">회원가입</Link>
+      </StyledSignupLink>
+    </StyledContainer>
   );
 }
 
 export default LoginPage;
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 33px;
+  margin-top: 50px;
+  max-width: 640px;
+  width: 100%;
+  padding: ${({ theme }) => theme.spacing.mobile};
+
+  @media (min-width: 768px) {
+    padding: ${({ theme }) => theme.spacing.tablet};
+    margin-left: auto;
+    margin-right: auto;
+  }
+`;
+
+const StyledLogo = styled.img`
+  width: 198px;
+  height: 66px;
+
+  @media (min-width: 768px) {
+    width: 396px;
+    height: 132px;
+  }
+`;
+
+const StyledForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+`;
+
+const StyledButton = styled.button`
+  padding: 16px 124px;
+  border-radius: 40px;
+  ${applyFontStyles(FontTypes.SEMIBOLD20, ColorTypes.SECONDARY_GRAY_100)}
+
+  &:disabled {
+    background-color: ${({ theme }) => theme.colors[ColorTypes.SECONDARY_GRAY_400]};
+  }
+`;
+
+const StyledSnsLogin = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 640px;
+  padding: 16px 24px;
+  background-color: #e6f2ff;
+  border-radius: 8px;
+
+  p {
+    ${applyFontStyles(FontTypes.MEDIUM16, ColorTypes.SECONDARY_GRAY_800)}
+  }
+`;
+
+const StyledSnsLoginIcons = styled.div`
+  display: flex;
+  gap: 16px;
+
+  img {
+    width: 42px;
+    height: 42px;
+  }
+`;
+
+const StyledSignupLink = styled.div`
+  display: flex;
+  gap: 4px;
+
+  p {
+    ${applyFontStyles(FontTypes.MEDIUM14, ColorTypes.SECONDARY_GRAY_800)}
+  }
+
+  a {
+    text-decoration: underline;
+    ${applyFontStyles(FontTypes.MEDIUM14, ColorTypes.PRIMARY_100)}
+  }
+`;
diff --git a/src/components/pages/SignupPage.jsx b/src/components/pages/SignupPage.jsx
new file mode 100644
index 00000000..d2e0eb99
--- /dev/null
+++ b/src/components/pages/SignupPage.jsx
@@ -0,0 +1,288 @@
+import { Link, useNavigate } from 'react-router-dom';
+import { useState } from 'react';
+import styled from 'styled-components';
+import logo from '../../assets/images/logo/logo.svg';
+import google from '../../assets/images/icons/ic_google.png';
+import kakao from '../../assets/images/icons/ic_kakao.png';
+import InputField from '../UI/InputField';
+import { applyFontStyles } from '../../styles/mixins';
+import { ColorTypes, FontTypes } from '../../styles/theme';
+import useFormValidation from '../../hooks/useFormValidation';
+import { postSignup } from '../../api/api';
+
+function SignupPage() {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [nickname, setNickname] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const { errors, setErrors, validate, validateField } = useFormValidation('signup');
+
+  const handleSignup = async (e) => {
+    e.preventDefault();
+    const validationResult = validate({ email, password, nickname, confirmPassword });
+    setErrors(validationResult);
+    if (Object.keys(validationResult).length > 0) return;
+
+    try {
+      const res = await postSignup(email, password, nickname, confirmPassword);
+      localStorage.setItem('token', res.accessToken);
+      navigate('/');
+    } catch (error) {
+      console.error('로그인 실패:', error);
+    }
+  };
+
+  const handleEmailChange = (e) => {
+    const value = e.target.value;
+    setEmail(value);
+    setErrors((prev) => ({
+      ...prev,
+      email: validateField('email', value, { email: value, password, nickname, confirmPassword }, 'signup'),
+    }));
+  };
+
+  const handleNicknameChange = (e) => {
+    const value = e.target.value;
+    setNickname(value);
+    setErrors((prev) => ({
+      ...prev,
+      nickname: validateField('nickname', value, { email, password, nickname: value, confirmPassword }, 'signup'),
+    }));
+  };
+
+  const handlePasswordChange = (e) => {
+    const value = e.target.value;
+    setPassword(value);
+    setErrors((prev) => ({
+      ...prev,
+      password: validateField('password', value, { email, password: value, nickname, confirmPassword }, 'signup'),
+    }));
+  };
+
+  const handleConfirmPasswordChange = (e) => {
+    const value = e.target.value;
+    setConfirmPassword(value);
+    setErrors((prev) => ({
+      ...prev,
+      confirmPassword: validateField(
+        'confirmPassword',
+        value,
+        { email, password, nickname, confirmPassword: value },
+        'signup'
+      ),
+    }));
+  };
+
+  const handleEmailBlur = (e) => {
+    const value = e.target.value;
+    setErrors((prev) => ({
+      ...prev,
+      email: validateField('email', value, { email: value, password, nickname, confirmPassword }, 'signup'),
+    }));
+  };
+
+  const handleNicknameBlur = (e) => {
+    const value = e.target.value;
+    setErrors((prev) => ({
+      ...prev,
+      nickname: validateField('nickname', value, { email, password, nickname: value, confirmPassword }, 'signup'),
+    }));
+  };
+
+  const handlePasswordBlur = (e) => {
+    const value = e.target.value;
+    setErrors((prev) => ({
+      ...prev,
+      password: validateField('password', value, { email, password: value, nickname, confirmPassword }, 'signup'),
+    }));
+  };
+
+  const handleConfirmPasswordBlur = (e) => {
+    const value = e.target.value;
+    setErrors((prev) => ({
+      ...prev,
+      confirmPassword: validateField(
+        'confirmPassword',
+        value,
+        { email, password, nickname, confirmPassword: value },
+        'signup'
+      ),
+    }));
+  };
+
+  const hasError = Object.values(errors).some((v) => !!v);
+  const isFilled = email && password && nickname && confirmPassword;
+  const disabled = hasError || !isFilled;
+
+  return (
+    <StyledContainer>
+      <StyledLogo
+        src={logo}
+        alt="logo"
+      />
+      <StyledForm onSubmit={handleSignup}>
+        <InputField
+          label="이메일"
+          type="email"
+          placeholder="이메일을 입력해주세요"
+          isTextArea={false}
+          value={email}
+          onChange={handleEmailChange}
+          onBlur={handleEmailBlur}
+          error={errors.email}
+        />
+        <InputField
+          label="닉네임"
+          type="text"
+          placeholder="닉네임을 입력해주세요"
+          isTextArea={false}
+          value={nickname}
+          onChange={handleNicknameChange}
+          onBlur={handleNicknameBlur}
+          error={errors.nickname}
+        />
+        <InputField
+          label="비밀번호"
+          type="password"
+          placeholder="비밀번호를 입력해주세요"
+          isTextArea={false}
+          value={password}
+          onChange={handlePasswordChange}
+          onBlur={handlePasswordBlur}
+          error={errors.password}
+        />
+        <InputField
+          label="비밀번호 확인"
+          type="password"
+          placeholder="비밀번호를 다시 입력해주세요"
+          isTextArea={false}
+          value={confirmPassword}
+          onChange={handleConfirmPasswordChange}
+          onBlur={handleConfirmPasswordBlur}
+          error={errors.confirmPassword}
+        />
+        <StyledButton
+          type="submit"
+          disabled={disabled}
+        >
+          회원가입
+        </StyledButton>
+      </StyledForm>
+      <StyledSnsLogin>
+        <p>간편 로그인하기</p>
+        <StyledSnsLoginIcons>
+          <a
+            href="https://www.google.com/?hl=ko"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img
+              src={google}
+              alt="google"
+            />
+          </a>
+          <a
+            href="https://www.kakaocorp.com/page/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img
+              src={kakao}
+              alt="kakao"
+            />
+          </a>
+        </StyledSnsLoginIcons>
+      </StyledSnsLogin>
+      <StyledSignupLink>
+        <p>판다마켓이 처음이신가요?</p>
+        <Link to="/signup">회원가입</Link>
+      </StyledSignupLink>
+    </StyledContainer>
+  );
+}
+
+export default SignupPage;
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 33px;
+  margin-top: 50px;
+  max-width: 640px;
+  width: 100%;
+  padding: ${({ theme }) => theme.spacing.mobile};
+
+  @media (min-width: 768px) {
+    padding: ${({ theme }) => theme.spacing.tablet};
+    margin-left: auto;
+    margin-right: auto;
+  }
+`;
+
+const StyledLogo = styled.img`
+  width: 198px;
+  height: 66px;
+
+  @media (min-width: 768px) {
+    width: 396px;
+    height: 132px;
+  }
+`;
+
+const StyledForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+`;
+
+const StyledButton = styled.button`
+  padding: 16px 124px;
+  border-radius: 40px;
+  ${applyFontStyles(FontTypes.SEMIBOLD20, ColorTypes.SECONDARY_GRAY_100)}
+
+  &:disabled {
+    background-color: ${({ theme }) => theme.colors[ColorTypes.SECONDARY_GRAY_400]};
+  }
+`;
+
+const StyledSnsLogin = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 640px;
+  padding: 16px 24px;
+  background-color: #e6f2ff;
+  border-radius: 8px;
+
+  p {
+    ${applyFontStyles(FontTypes.MEDIUM16, ColorTypes.SECONDARY_GRAY_800)}
+  }
+`;
+
+const StyledSnsLoginIcons = styled.div`
+  display: flex;
+  gap: 16px;
+
+  img {
+    width: 42px;
+    height: 42px;
+  }
+`;
+
+const StyledSignupLink = styled.div`
+  display: flex;
+  gap: 4px;
+
+  p {
+    ${applyFontStyles(FontTypes.MEDIUM14, ColorTypes.SECONDARY_GRAY_800)}
+  }
+
+  a {
+    text-decoration: underline;
+    ${applyFontStyles(FontTypes.MEDIUM14, ColorTypes.PRIMARY_100)}
+  }
+`;
diff --git a/src/hooks/useFormValidation.js b/src/hooks/useFormValidation.js
new file mode 100644
index 00000000..76d896c4
--- /dev/null
+++ b/src/hooks/useFormValidation.js
@@ -0,0 +1,43 @@
+import { useState } from 'react';
+
+const validateField = (name, value, values, mode = 'signup') => {
+  let error = '';
+  if (name === 'email') {
+    if (!value) error = '이메일을 입력해주세요.';
+    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) error = '이메일 형식이 올바르지 않습니다.';
+  }
+  if (name === 'password') {
+    if (!value) error = '비밀번호를 입력해주세요.';
+    else if (value.length < 8) error = '비밀번호는 8자 이상이어야 합니다.';
+  }
+  if (mode === 'signup') {
+    if (name === 'nickname') {
+      if (!value) error = '닉네임을 입력해주세요.';
+    }
+    if (name === 'confirmPassword') {
+      if (!value) error = '비밀번호 확인을 입력해주세요.';
+      else if (value !== values.password) error = '비밀번호가 일치하지 않습니다.';
+      else if (value.length < 8) error = '비밀번호는 8자 이상이어야 합니다.';
+    }
+  }
+  return error;
+};
+
+const useFormValidation = (mode = 'signup') => {
+  const [errors, setErrors] = useState({});
+
+  // 전체 폼 검사
+  const validate = (values) => {
+    const newErrors = {};
+    Object.keys(values).forEach((key) => {
+      const error = validateField(key, values[key], values, mode);
+      if (error) newErrors[key] = error;
+    });
+    setErrors(newErrors);
+    return newErrors;
+  };
+
+  return { errors, setErrors, validate, validateField };
+};
+
+export default useFormValidation;

From 5e0c63b56c52780567ede0a1ccd65a679f622ba5 Mon Sep 17 00:00:00 2001
From: sinyroom <wldmsdl7913@naver.com>
Date: Wed, 9 Jul 2025 23:50:59 +0900
Subject: [PATCH 16/18] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EC=8B=9C=20=ED=97=A4=EB=8D=94=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD,=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EA=B4=80?=
 =?UTF-8?q?=EB=A0=A8=20=EC=A0=84=EC=97=AD=20context=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                                  | 79 ++++++++++----------
 src/components/Layout/Header.jsx             | 39 ++++++++--
 src/components/pages/LoginPage.jsx           | 15 ++--
 src/components/pages/MarketPage/ItemCard.jsx | 38 ++++++----
 src/context/AuthContext.jsx                  | 41 ++++++++++
 5 files changed, 148 insertions(+), 64 deletions(-)
 create mode 100644 src/context/AuthContext.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 8b99d3e0..92608742 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,7 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import GlobalStyle from './styles/GlobalStyle';
 import { ThemeProvider } from 'styled-components';
+import { AuthProvider } from './context/AuthContext';
 import theme from './styles/theme';
 import Header from './components/Layout/Header';
 import HomePage from './components/pages/HomePage';
@@ -14,45 +15,47 @@ import ItemDetailPage from './components/pages/ItemDetailPage/ItemDetailPage';
 function App() {
   return (
     <>
-      <ThemeProvider theme={theme}>
-        <GlobalStyle />
-        <BrowserRouter>
-          <Header />
+      <AuthProvider>
+        <ThemeProvider theme={theme}>
+          <GlobalStyle />
+          <BrowserRouter>
+            <Header />
 
-          <div>
-            <Routes>
-              <Route
-                index
-                element={<HomePage />}
-              />
-              <Route
-                path="/login"
-                element={<LoginPage />}
-              />
-              <Route
-                path="/signup"
-                element={<SignupPage />}
-              />
-              <Route
-                path="/items"
-                element={<MarketPage />}
-              />
-              <Route
-                path="/additem"
-                element={<AddItemPage />}
-              />
-              <Route
-                path="/community"
-                element={<CommunityFeedPage />}
-              />
-              <Route
-                path="/items/:productId"
-                element={<ItemDetailPage />}
-              />
-            </Routes>
-          </div>
-        </BrowserRouter>
-      </ThemeProvider>
+            <div>
+              <Routes>
+                <Route
+                  index
+                  element={<HomePage />}
+                />
+                <Route
+                  path="/login"
+                  element={<LoginPage />}
+                />
+                <Route
+                  path="/signup"
+                  element={<SignupPage />}
+                />
+                <Route
+                  path="/items"
+                  element={<MarketPage />}
+                />
+                <Route
+                  path="/additem"
+                  element={<AddItemPage />}
+                />
+                <Route
+                  path="/community"
+                  element={<CommunityFeedPage />}
+                />
+                <Route
+                  path="/items/:productId"
+                  element={<ItemDetailPage />}
+                />
+              </Routes>
+            </div>
+          </BrowserRouter>
+        </ThemeProvider>
+      </AuthProvider>
     </>
   );
 }
diff --git a/src/components/Layout/Header.jsx b/src/components/Layout/Header.jsx
index 802444bc..42e44160 100644
--- a/src/components/Layout/Header.jsx
+++ b/src/components/Layout/Header.jsx
@@ -3,11 +3,13 @@ import styled from 'styled-components';
 
 import { FontTypes, ColorTypes } from '../../styles/theme';
 import { applyFontStyles } from '../../styles/mixins';
+import { useAuth } from '../../context/AuthContext';
 import logo from '../../assets/images/logo/logo.svg';
 import textLogo from '../../assets/images/logo/textlogo.svg';
 import profile from '../../assets/images/icons/ic_profile.png';
 
 function Header() {
+  const { isAuthenticated, logout } = useAuth();
   const location = useLocation();
   const isMarketActive = location.pathname === '/items' || location.pathname === '/additem';
 
@@ -45,12 +47,24 @@ function Header() {
         </nav>
       </StyledHeaderLeft>
 
-      <Link to="/login">
-        <img
-          src={profile}
-          alt="로그인"
-        />
-      </Link>
+      {isAuthenticated ? (
+        <StyledLogoutButtonContainer>
+          <StyledLogoutButton onClick={logout}>로그아웃</StyledLogoutButton>
+          <Link to="/mypage">
+            <img
+              src={profile}
+              alt="마이페이지"
+            />
+          </Link>
+        </StyledLogoutButtonContainer>
+      ) : (
+        <Link to="/login">
+          <img
+            src={profile}
+            alt="로그인"
+          />
+        </Link>
+      )}
     </StyledHeaderContainer>
   );
 }
@@ -121,3 +135,16 @@ const StyledImglogo = styled.img`
     display: none;
   }
 `;
+
+const StyledLogoutButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+`;
+
+const StyledLogoutButton = styled.button`
+  padding: 10px 20px;
+  border-radius: 40px;
+  background-color: ${({ theme }) => theme.colors[ColorTypes.PRIMARY_100]};
+  ${applyFontStyles(FontTypes.SEMIBOLD14, ColorTypes.SECONDARY_WHITE)};
+`;
diff --git a/src/components/pages/LoginPage.jsx b/src/components/pages/LoginPage.jsx
index 40b03fb9..69c0e3f9 100644
--- a/src/components/pages/LoginPage.jsx
+++ b/src/components/pages/LoginPage.jsx
@@ -1,17 +1,21 @@
-import { Link, useNavigate } from 'react-router-dom';
 import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
-import logo from '../../assets/images/logo/logo.svg';
-import google from '../../assets/images/icons/ic_google.png';
-import kakao from '../../assets/images/icons/ic_kakao.png';
-import InputField from '../UI/InputField';
+
 import { applyFontStyles } from '../../styles/mixins';
 import { ColorTypes, FontTypes } from '../../styles/theme';
+import InputField from '../UI/InputField';
 import useFormValidation from '../../hooks/useFormValidation';
 import { postLogin } from '../../api/api';
+import { useAuth } from '../../context/AuthContext';
+
+import logo from '../../assets/images/logo/logo.svg';
+import google from '../../assets/images/icons/ic_google.png';
+import kakao from '../../assets/images/icons/ic_kakao.png';
 
 function LoginPage() {
   const navigate = useNavigate();
+  const { login } = useAuth();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const { errors, setErrors, validate, validateField } = useFormValidation('login');
@@ -25,6 +29,7 @@ function LoginPage() {
     try {
       const res = await postLogin(email, password);
       localStorage.setItem('token', res.accessToken);
+      login(res.accessToken);
       navigate('/');
     } catch (error) {
       console.error('로그인 실패:', error);
diff --git a/src/components/pages/MarketPage/ItemCard.jsx b/src/components/pages/MarketPage/ItemCard.jsx
index ea6f2a27..09988d3d 100644
--- a/src/components/pages/MarketPage/ItemCard.jsx
+++ b/src/components/pages/MarketPage/ItemCard.jsx
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { Link } from 'react-router-dom';
 
 import { applyFontStyles } from '../../../styles/mixins';
 import { ColorTypes, FontTypes } from '../../../styles/theme';
@@ -6,27 +7,34 @@ import heart from '../../../assets/images/icons/ic_heart.svg';
 
 function ItemCard({ item }) {
   return (
-    <StyledItemCardContainer>
-      <StyledItemImage
-        src={item?.images[0]}
-        alt={item?.name}
-      />
-      <StyledItemName>{item?.name}</StyledItemName>
-      <StyledItemPrice>{item?.price.toLocaleString()}원</StyledItemPrice>
-
-      <StyledLikeCount>
-        <StyledLikeIcon
-          src={heart}
-          alt="좋아요"
+    <StyledLink to={`/items/${item.id}`}>
+      <StyledItemCardContainer>
+        <StyledItemImage
+          src={item?.images[0]}
+          alt={item?.name}
         />
-        <StyledItemLikes>{item?.favoriteCount.toLocaleString()}</StyledItemLikes>
-      </StyledLikeCount>
-    </StyledItemCardContainer>
+        <StyledItemName>{item?.name}</StyledItemName>
+        <StyledItemPrice>{item?.price.toLocaleString()}원</StyledItemPrice>
+
+        <StyledLikeCount>
+          <StyledLikeIcon
+            src={heart}
+            alt="좋아요"
+          />
+          <StyledItemLikes>{item?.favoriteCount.toLocaleString()}</StyledItemLikes>
+        </StyledLikeCount>
+      </StyledItemCardContainer>
+    </StyledLink>
   );
 }
 
 export default ItemCard;
 
+const StyledLink = styled(Link)`
+  text-decoration: none;
+  color: inherit;
+`;
+
 const StyledItemCardContainer = styled.div`
   display: flex;
   flex-direction: column;
diff --git a/src/context/AuthContext.jsx b/src/context/AuthContext.jsx
new file mode 100644
index 00000000..312aed8f
--- /dev/null
+++ b/src/context/AuthContext.jsx
@@ -0,0 +1,41 @@
+import { createContext, useContext, useState, useEffect } from 'react';
+
+const AuthContext = createContext();
+
+export function AuthProvider({ children }) {
+  const [token, setToken] = useState(() => localStorage.getItem('token'));
+  const [isAuthenticated, setIsAuthenticated] = useState(!!localStorage.getItem('token'));
+
+  useEffect(() => {
+    setIsAuthenticated(!!token);
+  }, [token]);
+
+  const login = (token) => {
+    localStorage.setItem('token', token);
+    setToken(token);
+    setIsAuthenticated(true);
+  };
+
+  const logout = () => {
+    localStorage.removeItem('token');
+    setToken(null);
+    setIsAuthenticated(false);
+  };
+
+  return (
+    <AuthContext.Provider
+      value={{
+        token,
+        isAuthenticated,
+        login,
+        logout,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  return useContext(AuthContext);
+}

From 13819a52710d0553b1d982d6c395f3d9ff99b9b0 Mon Sep 17 00:00:00 2001
From: sinyroom <wldmsdl7913@naver.com>
Date: Thu, 10 Jul 2025 14:18:27 +0900
Subject: [PATCH 17/18] =?UTF-8?q?feat:=20=EC=BD=94=EB=A9=98=ED=8A=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4=EC=9D=B4=EC=85=98=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95,=20=EB=B2=84=ED=8A=BC=20=EB=A7=81=ED=81=AC?=
 =?UTF-8?q?=20=EB=B0=8F=20=EB=B0=B0=EA=B2=BD=EC=83=89=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/ItemDetailPage/ItemDetailPage.jsx   |  17 +--
 .../pages/ItemDetailPage/ProductComments.jsx  | 111 +++++++++++++++---
 .../pages/MarketPage/AllProducts.jsx          |   4 +-
 3 files changed, 107 insertions(+), 25 deletions(-)

diff --git a/src/components/pages/ItemDetailPage/ItemDetailPage.jsx b/src/components/pages/ItemDetailPage/ItemDetailPage.jsx
index 3d485001..52b5be21 100644
--- a/src/components/pages/ItemDetailPage/ItemDetailPage.jsx
+++ b/src/components/pages/ItemDetailPage/ItemDetailPage.jsx
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { Link } from 'react-router-dom';
 
 import ProductInfo from './ProductInfo';
 import ProductComments from './ProductComments';
@@ -13,13 +14,15 @@ function ItemDetailPage() {
       <ProductInfo />
       <ProductComments />
       <StyledButtonWrapper>
-        <StyledButton>
-          <StyledButtonText>목록으로 돌아가기</StyledButtonText>
-          <img
-            src={back}
-            alt="back"
-          />
-        </StyledButton>
+        <Link to="/items">
+          <StyledButton>
+            <StyledButtonText>목록으로 돌아가기</StyledButtonText>
+            <img
+              src={back}
+              alt="back"
+            />
+          </StyledButton>
+        </Link>
       </StyledButtonWrapper>
     </StyledItemDetailPage>
   );
diff --git a/src/components/pages/ItemDetailPage/ProductComments.jsx b/src/components/pages/ItemDetailPage/ProductComments.jsx
index 6fb47c13..6773bab4 100644
--- a/src/components/pages/ItemDetailPage/ProductComments.jsx
+++ b/src/components/pages/ItemDetailPage/ProductComments.jsx
@@ -1,14 +1,19 @@
 import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import styled from 'styled-components';
+
 import { getComments, postComment, patchComment, deleteComment } from '../../../api/api';
 import { applyFontStyles } from '../../../styles/mixins';
 import { FontTypes, ColorTypes } from '../../../styles/theme';
 import { applyFlexColumn } from '../../../styles/mixins';
 import useFormatTime from '../../../hooks/useFormatTime';
+import { StyledPagination, StyledCircle } from '../MarketPage/AllProducts';
+
 import profile from '../../../assets/images/icons/ic_profile.png';
 import CommentEditList from '../../UI/CommentEditList';
 import noComment from '../../../assets/images/icons/ic_nocomment.png';
+import left from '../../../assets/images/icons/arrow_left.svg';
+import right from '../../../assets/images/icons/arrow_right.svg';
 
 function ProductComments() {
   const { productId } = useParams();
@@ -19,30 +24,40 @@ function ProductComments() {
   const [editCommentId, setEditCommentId] = useState(null);
   const [editContent, setEditContent] = useState('');
 
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalCount, setTotalCount] = useState(0);
+  const [pageSize] = useState(3);
+  const [allComments, setAllComments] = useState([]);
+  const [displayedComments, setDisplayedComments] = useState([]);
+
   const submitComment = async (content) => {
     try {
       const data = await postComment(productId, content);
-      console.log(data);
+      setComments((prev) => [data, ...prev]);
+      setComment('');
     } catch (error) {
       console.error('댓글 등록 실패:', error);
     }
   };
 
-  const fetchComments = async (isInitial = false) => {
+  const fetchAllComments = async () => {
     try {
-      const data = await getComments(productId, 3, isInitial ? null : nextCursor);
+      const data = await getComments(productId, 100, null);
       setIsNoComment(data.list.length === 0);
-      if (isInitial) {
-        setComments(data.list);
-      } else {
-        setComments((prev) => [...prev, ...data.list]);
-      }
-      setNextCursor(data.nextCursor);
+      setAllComments(data.list);
+      setTotalCount(data.list.length);
     } catch (error) {
       console.error('댓글 목록 가져오기 실패:', error);
     }
   };
 
+  const updateDisplayedComments = (page) => {
+    const startIndex = (page - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    const pageComments = allComments.slice(startIndex, endIndex);
+    setDisplayedComments(pageComments);
+  };
+
   const editComment = async (commentId, content) => {
     try {
       const data = await patchComment(commentId, content);
@@ -62,13 +77,22 @@ function ProductComments() {
   };
 
   useEffect(() => {
-    setNextCursor(null);
-    fetchComments(true);
+    setCurrentPage(1);
+    fetchAllComments();
   }, [productId]);
 
+  useEffect(() => {
+    updateDisplayedComments(currentPage);
+  }, [currentPage, allComments]);
+
   const handlePostComment = (content) => {
+    if (!content.trim()) {
+      alert('댓글을 입력해주세요.');
+      return;
+    }
     submitComment(content);
-    setComments((prevComments) => [...prevComments, { id: 'new', content: content }]);
+    setCurrentPage(1);
+    fetchAllComments();
   };
 
   const handleEditClick = (commentId) => {
@@ -97,9 +121,21 @@ function ProductComments() {
 
   const handleDeleteClick = (commentId) => {
     removeComment(commentId);
-    setComments((prevComments) => prevComments.filter((comment) => comment.id !== commentId));
+    setComments((prev) => prev.filter((comment) => comment.id !== commentId));
   };
 
+  const totalPages = Math.ceil(totalCount / pageSize);
+  const visiblePageCount = 5;
+  const safeCurrentPage = Math.max(currentPage, 1);
+  const currentGroup = Math.floor((safeCurrentPage - 1) / visiblePageCount);
+  const startPage = currentGroup * visiblePageCount + 1;
+  const endPage = Math.min(startPage + visiblePageCount - 1, totalPages);
+
+  const pageNumbers = [];
+  for (let i = startPage; i <= endPage; i++) {
+    pageNumbers.push(i);
+  }
+
   return (
     <StyledCommentContainer>
       <StyledCommentInput>
@@ -107,9 +143,16 @@ function ProductComments() {
         <textarea
           rows={5}
           placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
+          value={comment}
+          onChange={(e) => setComment(e.target.value)}
         />
         <StyledButtonWrapper>
-          <StyledButton onClick={() => handlePostComment(comment)}>등록</StyledButton>
+          <StyledButton
+            onClick={() => handlePostComment(comment)}
+            disabled={!comment.trim()}
+          >
+            등록
+          </StyledButton>
         </StyledButtonWrapper>
       </StyledCommentInput>
 
@@ -123,12 +166,13 @@ function ProductComments() {
         </StyledNoCommentContainer>
       ) : (
         <StyledCommentList>
-          {comments?.map((comment) => {
+          {displayedComments?.map((comment) => {
             const time = useFormatTime(comment?.createdAt || '');
             return editCommentId === comment.id ? (
               <StyledEditCommentWrapper key={comment?.id}>
                 <StyledEditComment>
                   <textarea
+                    rows={5}
                     value={editContent}
                     onChange={(e) => setEditContent(e.target.value)}
                   />
@@ -185,6 +229,37 @@ function ProductComments() {
               </StyledCommentWrapper>
             );
           })}
+          {totalPages > 1 && (
+            <StyledPagination style={{ marginTop: '24px' }}>
+              <StyledCircle
+                onClick={() => setCurrentPage(currentPage - 1)}
+                $disabled={currentPage <= 1}
+              >
+                <img
+                  src={left}
+                  alt="이전"
+                />
+              </StyledCircle>
+              {pageNumbers.map((pageNum) => (
+                <StyledCircle
+                  key={pageNum}
+                  onClick={() => setCurrentPage(pageNum)}
+                  $isActive={pageNum === currentPage}
+                >
+                  {pageNum}
+                </StyledCircle>
+              ))}
+              <StyledCircle
+                onClick={() => setCurrentPage(currentPage + 1)}
+                $disabled={currentPage >= totalPages}
+              >
+                <img
+                  src={right}
+                  alt="다음"
+                />
+              </StyledCircle>
+            </StyledPagination>
+          )}
         </StyledCommentList>
       )}
     </StyledCommentContainer>
@@ -239,7 +314,11 @@ const StyledButton = styled.button`
   width: 74px;
   height: 42px;
   padding: 12px 23px;
-  background-color: ${({ theme }) => theme.colors[ColorTypes.SECONDARY_GRAY_400]};
+  background-color: ${({ theme }) => theme.colors[ColorTypes.PRIMARY_100]};
+
+  &:disabled {
+    background-color: ${({ theme }) => theme.colors[ColorTypes.SECONDARY_GRAY_400]};
+  }
 `;
 
 const StyledCommentList = styled.div`
diff --git a/src/components/pages/MarketPage/AllProducts.jsx b/src/components/pages/MarketPage/AllProducts.jsx
index 34784320..63a51e26 100644
--- a/src/components/pages/MarketPage/AllProducts.jsx
+++ b/src/components/pages/MarketPage/AllProducts.jsx
@@ -194,14 +194,14 @@ const StyledItemCardContainer = styled.div`
   }
 `;
 
-const StyledPagination = styled.div`
+export const StyledPagination = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
 `;
 
-const StyledCircle = styled.div`
+export const StyledCircle = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;

From eef1ce531c6fcf23af609fb3f5b56a08363fb587 Mon Sep 17 00:00:00 2001
From: sinyroom <wldmsdl7913@naver.com>
Date: Thu, 10 Jul 2025 14:58:58 +0900
Subject: [PATCH 18/18] =?UTF-8?q?feat:=20=EB=B3=80=EC=88=98=EB=AA=85=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95,=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4?=
 =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/ItemDetailPage/ProductComments.jsx  | 24 ++++++++-----------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/components/pages/ItemDetailPage/ProductComments.jsx b/src/components/pages/ItemDetailPage/ProductComments.jsx
index 6773bab4..5628ba4c 100644
--- a/src/components/pages/ItemDetailPage/ProductComments.jsx
+++ b/src/components/pages/ItemDetailPage/ProductComments.jsx
@@ -19,15 +19,13 @@ function ProductComments() {
   const { productId } = useParams();
   const [isNoComment, setIsNoComment] = useState(true);
   const [comment, setComment] = useState('');
-  const [comments, setComments] = useState([]);
-  const [nextCursor, setNextCursor] = useState(null);
   const [editCommentId, setEditCommentId] = useState(null);
   const [editContent, setEditContent] = useState('');
 
   const [currentPage, setCurrentPage] = useState(1);
   const [totalCount, setTotalCount] = useState(0);
   const [pageSize] = useState(3);
-  const [allComments, setAllComments] = useState([]);
+  const [comments, setComments] = useState([]);
   const [displayedComments, setDisplayedComments] = useState([]);
 
   const submitComment = async (content) => {
@@ -44,7 +42,7 @@ function ProductComments() {
     try {
       const data = await getComments(productId, 100, null);
       setIsNoComment(data.list.length === 0);
-      setAllComments(data.list);
+      setComments(data.list);
       setTotalCount(data.list.length);
     } catch (error) {
       console.error('댓글 목록 가져오기 실패:', error);
@@ -54,14 +52,13 @@ function ProductComments() {
   const updateDisplayedComments = (page) => {
     const startIndex = (page - 1) * pageSize;
     const endIndex = startIndex + pageSize;
-    const pageComments = allComments.slice(startIndex, endIndex);
+    const pageComments = comments.slice(startIndex, endIndex);
     setDisplayedComments(pageComments);
   };
 
   const editComment = async (commentId, content) => {
     try {
-      const data = await patchComment(commentId, content);
-      console.log(data);
+      await patchComment(commentId, content);
     } catch (error) {
       console.error('댓글 수정 실패:', error);
     }
@@ -69,8 +66,7 @@ function ProductComments() {
 
   const removeComment = async (commentId) => {
     try {
-      const data = await deleteComment(commentId);
-      console.log(data);
+      await deleteComment(commentId);
     } catch (error) {
       console.error('댓글 삭제 실패:', error);
     }
@@ -83,7 +79,7 @@ function ProductComments() {
 
   useEffect(() => {
     updateDisplayedComments(currentPage);
-  }, [currentPage, allComments]);
+  }, [currentPage, comments]);
 
   const handlePostComment = (content) => {
     if (!content.trim()) {
@@ -111,8 +107,8 @@ function ProductComments() {
       await editComment(commentId, content);
       setEditCommentId(null);
       setEditContent('');
-      setComments((prevComments) =>
-        prevComments.map((comment) => (comment.id === commentId ? { ...comment, content: content } : comment))
+      setComments((prev) =>
+        prev.map((comment) => (comment.id === commentId ? { ...comment, content: content } : comment))
       );
     } catch (error) {
       console.error('댓글 수정 실패:', error);
@@ -232,7 +228,7 @@ function ProductComments() {
           {totalPages > 1 && (
             <StyledPagination style={{ marginTop: '24px' }}>
               <StyledCircle
-                onClick={() => setCurrentPage(currentPage - 1)}
+                onClick={() => currentPage > 1 && setCurrentPage(currentPage - 1)}
                 $disabled={currentPage <= 1}
               >
                 <img
@@ -250,7 +246,7 @@ function ProductComments() {
                 </StyledCircle>
               ))}
               <StyledCircle
-                onClick={() => setCurrentPage(currentPage + 1)}
+                onClick={() => currentPage < totalPages && setCurrentPage(currentPage + 1)}
                 $disabled={currentPage >= totalPages}
               >
                 <img