From adf157394282e0489d4de1fc5a734d103657c7b7 Mon Sep 17 00:00:00 2001
From: TopiaYu <raemo963@naver.com>
Date: Sun, 11 May 2025 16:46:45 +0900
Subject: [PATCH 1/9] =?UTF-8?q?allitem=EC=97=90=EC=84=9C=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=EC=8B=9C=20=ED=98=B8=EB=B2=84,=20productId=EB=A1=9C?=
 =?UTF-8?q?=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AllItems.jsx     | 6 ++++--
 src/components/AllitemsStyle.js | 5 +++++
 src/components/ItemListStyle.js | 5 +++++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/AllItems.jsx b/src/components/AllItems.jsx
index 91a3d7d3..59f0104a 100644
--- a/src/components/AllItems.jsx
+++ b/src/components/AllItems.jsx
@@ -3,6 +3,7 @@ import {
     header,
     title,
     itemGrid,
+    itemLinkStyle,
     pagenation
 } from "./AllitemsStyle";
 import ItemList from "./ItemList";
@@ -21,7 +22,6 @@ const AllItems = ({ items, onChangeOrder }) => {
                     <input placeholder="🔎 검색할 상품을 입력해주세요"></input>
                     <Link to={"/additems"}>
                     상품 등록하기
-                        {/* <button >상품 등록하기</button> */}
                     </Link>
                     <select onChange={(e)=> onChangeOrder(e.target.value)}>
                         <option value={"recent"}>최신순</option>
@@ -32,7 +32,9 @@ const AllItems = ({ items, onChangeOrder }) => {
                 <div css={itemGrid} >
                     {items.map((item) => {
                         return(
-                            <ItemList key={item.id} item={item} />
+                            <Link to={`/items/${item.id}`} css={itemLinkStyle} >
+                                <ItemList key={item.id} item={item} />
+                            </Link>
                         )
                     })}
                 </div>
diff --git a/src/components/AllitemsStyle.js b/src/components/AllitemsStyle.js
index db0b9842..ecaece7a 100644
--- a/src/components/AllitemsStyle.js
+++ b/src/components/AllitemsStyle.js
@@ -103,8 +103,12 @@ const itemGrid = css`
         grid-template-columns: repeat(2, 1fr);
         gap: 8px;    
     }
+`
 
+const itemLinkStyle = css`
+    text-decoration: none;
 `
+
 const pagenation = css`
     display: flex;
     justify-content: center;
@@ -117,5 +121,6 @@ export {
     header,
     title,
     itemGrid,
+    itemLinkStyle,
     pagenation,
 }
diff --git a/src/components/ItemListStyle.js b/src/components/ItemListStyle.js
index 7d19f6c0..4184971f 100644
--- a/src/components/ItemListStyle.js
+++ b/src/components/ItemListStyle.js
@@ -2,6 +2,11 @@ import { css } from "@emotion/react"
 
 const itemListStyle = css`
     width: 100%;
+    transition: all 0.2s ease;
+
+        &:hover {
+            transform: scale(1.05);
+        }
 
 `
 

From 46ebd1a3bb89f64c870708546e9ea02b2e528d3e Mon Sep 17 00:00:00 2001
From: TopiaYu <raemo963@naver.com>
Date: Sun, 11 May 2025 17:13:00 +0900
Subject: [PATCH 2/9] =?UTF-8?q?itemDetail=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                                    |  2 ++
 src/components/pages/itemDetail/itemDetail.jsx | 10 ++++++++++
 2 files changed, 12 insertions(+)
 create mode 100644 src/components/pages/itemDetail/itemDetail.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 6331f0d8..d4c2a2bc 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,6 +7,7 @@ import FreeBoard from './components/pages/FreeBoard';
 import Items from './components/pages/Items';
 import { Route, Routes } from "react-router";
 import AddItem from './components/pages/AddItem';
+import ItemDetail from './components/pages/itemDetail/itemDetail';
 
 function App() {
 
@@ -20,6 +21,7 @@ function App() {
           <Route path="/freeBoard" element={<FreeBoard />} />
           <Route path="/items" element={<Items />} />
           <Route path="/additems" element={<AddItem />} />
+          <Route path="/items/:id" element={<ItemDetail />} />
         </Routes>
     </>
   )
diff --git a/src/components/pages/itemDetail/itemDetail.jsx b/src/components/pages/itemDetail/itemDetail.jsx
new file mode 100644
index 00000000..65e920a8
--- /dev/null
+++ b/src/components/pages/itemDetail/itemDetail.jsx
@@ -0,0 +1,10 @@
+
+const ItemDetail = () => {
+    return(
+        <div>
+            아이템 디테일
+        </div>
+    )
+}
+
+export default ItemDetail;
\ No newline at end of file

From 0452f0d34d6d65730ef1ade36995ccd1f3e5dfa8 Mon Sep 17 00:00:00 2001
From: TopiaYu <raemo963@naver.com>
Date: Sun, 11 May 2025 22:40:01 +0900
Subject: [PATCH 3/9] =?UTF-8?q?ui=EC=99=84=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/kebabIcon.png                      | Bin 0 -> 266 bytes
 src/components/pages/AddItem.jsx              |   6 +-
 .../pages/itemDetail/itemDetail.jsx           | 234 +++++++++++++++++-
 3 files changed, 235 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/kebabIcon.png

diff --git a/src/assets/kebabIcon.png b/src/assets/kebabIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..d467650380c0e78ffc38c2863a77c54b3e3de62c
GIT binary patch
literal 266
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC&H|6fVg?2=RS;(M3{v?36l5$8
za(7}_cTVOdki(Mh=<CS9u(6-}Pa-RjKi|{EF{Fa=?NvjrLk1FU5A}B@7KUnhq<>|(
zCcI)d>sIy?ywcG}U3t<@tUvu*M>lfPe1SMl28KWVlNYYz->s1=Cv6!U_Bm_yp)+hR
z@*WD@{ro|{P~w}fZFcB{=@UPGIQ`x9`QND4nY<sg%ghz#+O3HTo$*rH?)yWFx>qmj
zrB+0StYr{!?F`l^RP&nS)XA8#@QCIV3t?5ig-3vn`|*nJn6sb8x3;-{KpumqtDnm{
Hr-UW|jyqo;

literal 0
HcmV?d00001

diff --git a/src/components/pages/AddItem.jsx b/src/components/pages/AddItem.jsx
index 2ef8a287..b3b07a7d 100644
--- a/src/components/pages/AddItem.jsx
+++ b/src/components/pages/AddItem.jsx
@@ -118,17 +118,17 @@ const AddItem = () => {
                     </div>
                     
                     <div>
-                        <label>상품 소개</label>
+                        <label htmlFor='description'>상품 소개</label>
                         <textarea id="description" placeholder="상품 소개를 입력해주세요" value={itemDescription} onChange={(e) => setItemDiscription(e.target.value)}></textarea>
                     </div>
 
                     <div>
-                        <label>판매가격</label>
+                        <label htmlFor='price'>판매가격</label>
                         <input id="price" placeholder="판매가격을 입력해주세요" type='number' value={itemPrice} onChange={(e) => setItemPrice(e.target.value)}></input>
                     </div>
 
                     <div>
-                        <label>태그</label>
+                        <label htmlFor='tag'>태그</label>
                         <input 
                             id="tag" 
                             placeholder="태그를 입력해주세요" 
diff --git a/src/components/pages/itemDetail/itemDetail.jsx b/src/components/pages/itemDetail/itemDetail.jsx
index 65e920a8..ff5ec104 100644
--- a/src/components/pages/itemDetail/itemDetail.jsx
+++ b/src/components/pages/itemDetail/itemDetail.jsx
@@ -1,8 +1,238 @@
 
+import { css } from '@emotion/react';
+import kebabIcon from '../../../assets/kebabIcon.png'
+import userImage from '../../../assets/LoginProfile.png'
+
+/** @jsxImportSource @emotion/react */
+
+const pageWrapper = css`
+    max-width: 1200px;
+    margin: 0 auto;
+`
+
+const itemDetailWrapper = css`
+    margin: 16px;
+    gap: 24px;
+    display: flex;
+    padding-bottom: 16px;
+    border-bottom: 1px solid var(--gray-200);
+`
+const imgSection = css`
+    // width: 100%;
+    
+    > img {
+    width: 486px;
+    aspect-ratio: 1/1;
+    background: pink;
+    border-radius: 16px;
+    }
+`
+
+const itemDetail = css`
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: 24px;  
+    // border-bottom: 1px solid var(--gray-200);
+`
+
+const itemHeader = css`
+    border-bottom: 1px solid var(--gray-200);
+    padding-bottom: 16px;
+`
+
+const titleHeader = css`
+    color: var(--grey-800);
+    font-size: 24px;
+    font-weight: 600;
+    display: flex;
+    justify-content: space-between;
+`
+
+const editIconStyle = css`
+    width: 24px;
+    height: 24px;
+`
+
+const itemDescription = css`
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+`
+
+const itemTag = css`
+    margin-bottom: 62px;
+
+    > div {
+        display: inline-flex;
+        background: yellow;
+        padding: 6px;
+    }
+
+    > span {
+        background: pink;
+        padding: 6px;
+    }
+`
+
+const itemUserInfo= css`
+    display: flex;
+    align-items: center;
+    margin-top: 24px;
+`
+
+const userImg = css`
+    width: 40px;
+    height: 40px;
+    margin-right: 16px;
+
+    > img {
+        width: 40px;
+        height: 40px;
+    }
+`
+
+const userText = css`
+    flex: 1;
+`
+
+const likeSection = css `
+    width: 
+    
+
+    > button {
+
+    }
+`
+
+const commentSection = css  `
+    margin: 16px;
+
+`
+
+const makeComment = css`
+    display: flex;
+    flex-direction: column;
+
+    > textarea {
+    height: 104px;
+    }
+
+    > button {
+        width: 74px;
+        height: 42px;
+        border-radius: 8px;
+        border: none;
+    }
+`
+
+const commentList = css`
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    gap: 24px;
+`
+
+const comment =css`
+    display: flex;
+    flex-direction: column;
+    margin-top: 24px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--gray-200);
+`
+
+const commentHeader = css`
+    display: flex;
+    justify-content: space-between;
+`
+
 const ItemDetail = () => {
     return(
-        <div>
-            아이템 디테일
+        <div css={pageWrapper}>
+            <div css={itemDetailWrapper}>
+                <div css={imgSection}>
+                    <img />
+                </div>
+                <div css={itemDetail}>
+                    <div css={itemHeader}>
+                        <div css={titleHeader}>
+                            <h3>타이틀</h3>
+                            <img src={kebabIcon} css={editIconStyle} />
+                        </div>
+                        <h2>price</h2>
+                    </div>
+                    <div css={itemDescription}>
+                        <h3>상품 소개</h3>
+                        <h4>상품 소개상품 소개상품 소개상품 소개상품 소개상품 소개</h4>
+                    </div>
+                    <div css={itemTag}>
+                        <h3>상품 태그</h3>  
+                        <div>
+                            <span>#태그</span>
+                        </div>
+                    </div>
+                    <div css={itemUserInfo}>
+                        <div css={userImg}>
+                            <img src={userImage} />
+                        </div>
+                        <div css={userText}>
+                            <h4>이름</h4>
+                            <p>날짜</p>
+                        </div>
+                        <div css={likeSection}>
+                            <button></button>
+                            숫자
+                        </div>
+                    </div>
+                </div>
+            
+            </div>
+
+            <div css={commentSection}>
+                <div css={makeComment}>
+                    <label htmlFor="makecomment">문의하기</label>
+                    <textarea id="makecomment" placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다." />
+                    <button type="button">등록</button>
+                </div>
+                <ul css={commentList}>
+                    <li css={comment}>
+                        <div css={commentHeader}>
+                            <p>내용</p>
+                            <img src={kebabIcon} css={editIconStyle} />
+                        </div>
+                        
+                        <div css={itemUserInfo}>
+                            <div css={userImg}>
+                                <img src={userImage} />
+                            </div>
+                            <div css={userText}>
+                                <h4>이름</h4>
+                                <p>날짜</p>
+                            </div>
+                            <hr />
+                        </div>
+                    </li>
+
+                    <li css={comment}>
+                        <div css={commentHeader}>
+                            <p>내용</p>
+                            <img src={kebabIcon} css={editIconStyle} />
+                        </div>
+                        
+                        <div css={itemUserInfo}>
+                            <div css={userImg}>
+                                <img src={userImage} />
+                            </div>
+                            <div css={userText}>
+                                <h4>이름</h4>
+                                <p>날짜</p>
+                            </div>
+                            <hr />
+                        </div>
+                    </li>
+
+                </ul>
+            </div>
         </div>
     )
 }

From 97715783cfc1ffd36304258b52086e2c012b34d6 Mon Sep 17 00:00:00 2001
From: TopiaYu <raemo963@naver.com>
Date: Mon, 12 May 2025 16:19:47 +0900
Subject: [PATCH 4/9] =?UTF-8?q?allitem,=20bestItem=EC=97=90=20api=20?=
 =?UTF-8?q?=EC=97=B0=EA=B2=B0=20=EB=B0=8F=20=EC=BB=A8=ED=85=90=EC=B8=A0=20?=
 =?UTF-8?q?=EC=97=B0=EA=B2=B0,=20ui=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                                   |   2 +-
 src/api/Api.js                                |  23 ++
 src/assets/backIcon.png                       | Bin 0 -> 505 bytes
 src/components/BestItem.jsx                   |   9 +-
 .../pages/itemDetail/itemDetail.jsx           | 232 +++++++++++++-----
 5 files changed, 204 insertions(+), 62 deletions(-)
 create mode 100644 src/assets/backIcon.png

diff --git a/src/App.jsx b/src/App.jsx
index d4c2a2bc..d35b2acd 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -21,7 +21,7 @@ function App() {
           <Route path="/freeBoard" element={<FreeBoard />} />
           <Route path="/items" element={<Items />} />
           <Route path="/additems" element={<AddItem />} />
-          <Route path="/items/:id" element={<ItemDetail />} />
+          <Route path="/items/:productId" element={<ItemDetail />} />
         </Routes>
     </>
   )
diff --git a/src/api/Api.js b/src/api/Api.js
index 29103ef6..54e1d2fd 100644
--- a/src/api/Api.js
+++ b/src/api/Api.js
@@ -8,3 +8,26 @@ export async function getItems({ page=1, pageSize=100, orderBy="recent"}) {
     return body;
 }
 
+//productId 받아오는 api
+export async function getItemId(productsId) {
+    const response = await fetch(`https://panda-market-api.vercel.app/products/${productsId}`)
+    
+    if (!response.ok) {
+        throw new Error(`error 상태 ${response.status}`)
+    }
+
+    const body = await response.json();
+    return body
+}
+
+export async function getProductComments(productId, limit=10) {
+    const response = await fetch(`https://panda-market-api.vercel.app/products/${productId}/comments?limit=${limit}`)
+
+    if (!response.ok) {
+        
+        throw new Error(`error 상태 ${response.status}`)
+    }
+    const body = await response.json();
+    return body.list;
+}
+
diff --git a/src/assets/backIcon.png b/src/assets/backIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..706c218a6fb594a6e5844652427b00bf12820acf
GIT binary patch
literal 505
zcmV<V0S5kwP)<h;3K|Lk000e1NJLTq001!n001xu1^@s6xWJOR00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0gg#TK~#7F?U>O~
z!!Qhn6^;QI!5hE^WCWN1GXZQ+HYiMxV*@s5HfWi^-2j+C$ixq>&$-0GcB4Cece*yU
z&(UwWmSq4z5CowRO-g4(RP?bWyMi(t$Ue#XrfH5)0us?-JvujOlUzU=Ns;>}n#_=p
z%~Z!F%c+AhC}%NxvU^%$->`P<B#~({6Iot6;08JU5)rZmZn&s~+yFPo>1X!K%0iCs
z10g4QDs_uJ7w^Hd25#7y4-=u^&LR>nKODWEl;6%}Iax*%orqWqoJ5Qs|2c_J-uEBB
zfrSX#Qd>BU#KCXRCc^FI8?rmd&qMIsLry&Bzg!~HkP&x0_c4$Y8t}<;9&?Lu6J&~v
zkK=_)wwJgF?6XH<!uf0>+<U?Z+h-N)e>ro|7KW>uIR(ir^@oLA!*D{4<%GvY*ErUB
zvK^imgG;M9jMuoe=`bjOxJ1H`y<)=b&$@TQ;Xh$7vDz8k-^e~7oxhr)_}vm#+MTL^
v74k$iM#N~~NFYW7XPlT81VIo4VMY7`2e<aBNcJxu00000NkvXXu0mjfshQJR

literal 0
HcmV?d00001

diff --git a/src/components/BestItem.jsx b/src/components/BestItem.jsx
index 02e00a2b..b8f39861 100644
--- a/src/components/BestItem.jsx
+++ b/src/components/BestItem.jsx
@@ -1,3 +1,4 @@
+import { Link } from "react-router-dom";
 import { 
     constainer,
     title,
@@ -18,8 +19,12 @@ const BestItem = ({ items }) => {
             
             <div css={itemGrid} >
                 {bestItems.map((item) => {
-                    return <ItemList key={item.id} item={item}/>
-                })}                
+                    return (
+                        <Link to={`${item.id}`}>
+                            <ItemList key={item.id} item={item}/>
+                        </Link>
+                    )
+                })}          
             </div>
         </div>
     )
diff --git a/src/components/pages/itemDetail/itemDetail.jsx b/src/components/pages/itemDetail/itemDetail.jsx
index ff5ec104..85118b70 100644
--- a/src/components/pages/itemDetail/itemDetail.jsx
+++ b/src/components/pages/itemDetail/itemDetail.jsx
@@ -2,6 +2,10 @@
 import { css } from '@emotion/react';
 import kebabIcon from '../../../assets/kebabIcon.png'
 import userImage from '../../../assets/LoginProfile.png'
+import backIcon from '../../../assets/backIcon.png'
+import { useParams } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import { getItemId, getProductComments } from '../../../api/Api';
 
 /** @jsxImportSource @emotion/react */
 
@@ -25,6 +29,7 @@ const imgSection = css`
     aspect-ratio: 1/1;
     background: pink;
     border-radius: 16px;
+    object-fit: cover;
     }
 `
 
@@ -33,48 +38,80 @@ const itemDetail = css`
     flex-direction: column;
     flex: 1;
     gap: 24px;  
-    // border-bottom: 1px solid var(--gray-200);
 `
 
 const itemHeader = css`
     border-bottom: 1px solid var(--gray-200);
     padding-bottom: 16px;
+    color: var(--gray-800);
+
+    
+    > h2 {
+        font-size: 40px;
+    }
 `
 
 const titleHeader = css`
-    color: var(--grey-800);
     font-size: 24px;
     font-weight: 600;
     display: flex;
+    margin-bottom: 16px;
     justify-content: space-between;
 `
 
 const editIconStyle = css`
     width: 24px;
     height: 24px;
+    cursor: pointer;
 `
 
 const itemDescription = css`
     display: flex;
     flex-direction: column;
     gap: 16px;
+    font-weight: 600;
+    color: var(--gray-600);
+
+    > h3 {
+        font-weight: 600;
+    }
 `
 
 const itemTag = css`
     margin-bottom: 62px;
+    font-weight: 600;
+    color: var(--gray-600);
 
-    > div {
-        display: inline-flex;
-        background: yellow;
-        padding: 6px;
+    > h3 {
+        font-weight: 600;
     }
 
     > span {
-        background: pink;
         padding: 6px;
     }
 `
 
+const tagWrapper = css`
+    display: flex;
+    gap: 8px;
+    margin-top: 16px;
+`
+
+const tagBox = css`
+    display: inline-flex;
+    padding: 6px 16px;
+    background: var(--gray-100);
+    border-radius: 26px;
+    border: none;
+
+    font-weight: 600;
+    color: var(--gray-600);
+
+    > h3 {
+        font-weight: 600;
+    }
+`
+
 const itemUserInfo= css`
     display: flex;
     align-items: center;
@@ -93,15 +130,28 @@ const userImg = css`
 `
 
 const userText = css`
+    font-weight: 500;
+    color: var(--gray-600);
+    font-size: 14px;
     flex: 1;
+
+    > p {
+        margin-top: 6px;
+        font-weight: 400;
+        color: var(--gray-400);
+    }
 `
 
 const likeSection = css `
-    width: 
-    
+    // display: inline-flex;
+    border-radius: 35px;
+    border: 1px solid var(--gray-200);
+    padding: 4px 12px;
+    font-size: 16px;
 
     > button {
-
+        background: transparent;
+        border: none;
     }
 `
 
@@ -116,6 +166,13 @@ const makeComment = css`
 
     > textarea {
     height: 104px;
+    border: none;
+    background: var(--gray-100);
+    border-radius: 12px;
+    margin-top: 10px;
+    margin-bottom: 16px;
+    padding: 16px;
+    resize: none;
     }
 
     > button {
@@ -123,6 +180,10 @@ const makeComment = css`
         height: 42px;
         border-radius: 8px;
         border: none;
+        background: var(--gray-400);
+        align-self: flex-end;
+        color: white;
+        cursor: pointer;
     }
 `
 
@@ -133,7 +194,7 @@ const commentList = css`
     gap: 24px;
 `
 
-const comment =css`
+const commentListStyle =css`
     display: flex;
     flex-direction: column;
     margin-top: 24px;
@@ -146,42 +207,106 @@ const commentHeader = css`
     justify-content: space-between;
 `
 
+const backToListButtonStyle = css`
+    background: var(--blue);
+    height: 48px;
+    color: white;
+    border: none;
+    border-radius: 40px;
+    padding: 12px 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 24px auto;
+    cursor: pointer;
+    gap: 8px;
+    
+
+    > img {
+        width: 24px;
+        height: 24px;
+    }
+`
+
 const ItemDetail = () => {
+
+    const {productId} = useParams();
+    const [item, setItem] = useState(null);
+    const [comments, setComments] = useState([]);
+
+    useEffect(()=> {
+        async function fetchData() {
+            try {
+                const data = await getItemId(productId);
+                setItem(data);
+            }   catch (err) {
+                console.error(err);
+            }
+        }
+
+        fetchData();
+    }, [productId])
+
+
+    useEffect(()=> {
+        async function fetchData() {
+            try {
+                const data = await getProductComments(Number(productId));
+                setComments(data);
+            } catch (error) {
+                console.error("커멘트 불러오기:", error);
+            }
+        }
+
+        if (productId) {
+            fetchData();
+        }
+        
+    }, [productId]);
+
+    if (!item) return <div>로딩 중...</div>;
+
     return(
         <div css={pageWrapper}>
             <div css={itemDetailWrapper}>
                 <div css={imgSection}>
-                    <img />
+                    <img src={item.images} />
                 </div>
                 <div css={itemDetail}>
                     <div css={itemHeader}>
                         <div css={titleHeader}>
-                            <h3>타이틀</h3>
+                            <h3>{item.name}</h3>
                             <img src={kebabIcon} css={editIconStyle} />
                         </div>
-                        <h2>price</h2>
+                        <h2>{item.price}원</h2>
                     </div>
                     <div css={itemDescription}>
-                        <h3>상품 소개</h3>
-                        <h4>상품 소개상품 소개상품 소개상품 소개상품 소개상품 소개</h4>
+                        <h3>상품소개</h3>
+                        <h4>{item.description}</h4>
                     </div>
                     <div css={itemTag}>
                         <h3>상품 태그</h3>  
-                        <div>
-                            <span>#태그</span>
-                        </div>
+                            <div css={tagWrapper}>
+                                {item.tags.map((tag)=> {
+                                    return(
+                                        <div key={item.id} css={tagBox}>
+                                            <span>#{tag}</span>
+                                        </div>
+                                    )
+                                })}
+                            </div>
                     </div>
                     <div css={itemUserInfo}>
                         <div css={userImg}>
                             <img src={userImage} />
                         </div>
                         <div css={userText}>
-                            <h4>이름</h4>
-                            <p>날짜</p>
+                            <h4>{item.ownerNickname}</h4>
+                            <p>{new Date(item.createdAt).toISOString().slice(0, 10)}</p>
                         </div>
                         <div css={likeSection}>
-                            <button></button>
-                            숫자
+                            <button>💛</button>
+                            {item.favoriteCount}
                         </div>
                     </div>
                 </div>
@@ -195,44 +320,33 @@ const ItemDetail = () => {
                     <button type="button">등록</button>
                 </div>
                 <ul css={commentList}>
-                    <li css={comment}>
-                        <div css={commentHeader}>
-                            <p>내용</p>
-                            <img src={kebabIcon} css={editIconStyle} />
-                        </div>
-                        
-                        <div css={itemUserInfo}>
-                            <div css={userImg}>
-                                <img src={userImage} />
-                            </div>
-                            <div css={userText}>
-                                <h4>이름</h4>
-                                <p>날짜</p>
-                            </div>
-                            <hr />
-                        </div>
-                    </li>
-
-                    <li css={comment}>
-                        <div css={commentHeader}>
-                            <p>내용</p>
-                            <img src={kebabIcon} css={editIconStyle} />
-                        </div>
-                        
-                        <div css={itemUserInfo}>
-                            <div css={userImg}>
-                                <img src={userImage} />
-                            </div>
-                            <div css={userText}>
-                                <h4>이름</h4>
-                                <p>날짜</p>
-                            </div>
-                            <hr />
-                        </div>
-                    </li>
-
+                    {comments.length > 0 &&
+                        comments.map((comment) =>(
+                            <li key={comment.id} css={commentListStyle}>
+                                <div css={commentHeader}>
+                                    <p>{comment.content}</p>
+                                    <img src={kebabIcon} css={editIconStyle} />
+                                </div>
+                                
+                                <div css={itemUserInfo}>
+                                    <div css={userImg}>
+                                        <img src={userImage} />
+                                    </div>
+                                    <div css={userText}>
+                                        <h4>{comment.writer.nickname}</h4>
+                                        <p>{new Date(comment.createdAt).toISOString().slice(0, 10)}</p>
+                                    </div>
+                                    <hr />
+                                </div>
+                            </li>
+                        ))
+                    }                
                 </ul>
             </div>
+            <button type='button' css={backToListButtonStyle} >
+                <p>목록으로 돌아가기</p>
+                <img src={backIcon} />
+            </button>
         </div>
     )
 }

From ffb83f0f3d4fbaefb65f70a33f5a37d8db632be0 Mon Sep 17 00:00:00 2001
From: TopiaYu <raemo963@naver.com>
Date: Mon, 12 May 2025 16:33:54 +0900
Subject: [PATCH 5/9] =?UTF-8?q?=EB=AA=A9=EB=A1=9D=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=8F=8C=EC=95=84=EA=B0=80=EA=B8=B0=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BestItem.jsx                   |  3 ++-
 src/components/BestItemStyle.js               |  6 +++++
 .../pages/itemDetail/itemDetail.jsx           | 24 ++++++++++++++-----
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/components/BestItem.jsx b/src/components/BestItem.jsx
index b8f39861..5ab35037 100644
--- a/src/components/BestItem.jsx
+++ b/src/components/BestItem.jsx
@@ -3,6 +3,7 @@ import {
     constainer,
     title,
     itemGrid,
+    linkStyle,
 } from "./BestItemStyle";
 import ItemList from "./ItemList";
 
@@ -20,7 +21,7 @@ const BestItem = ({ items }) => {
             <div css={itemGrid} >
                 {bestItems.map((item) => {
                     return (
-                        <Link to={`${item.id}`}>
+                        <Link to={`${item.id}`} css={linkStyle}>
                             <ItemList key={item.id} item={item}/>
                         </Link>
                     )
diff --git a/src/components/BestItemStyle.js b/src/components/BestItemStyle.js
index 4ee350b1..92f35342 100644
--- a/src/components/BestItemStyle.js
+++ b/src/components/BestItemStyle.js
@@ -30,8 +30,14 @@ const itemGrid = css`
 
 `
 
+const linkStyle = css`
+    text-decoration: none;
+`
+
+
 export {
     constainer,
     title,
     itemGrid,
+    linkStyle,
 }
\ No newline at end of file
diff --git a/src/components/pages/itemDetail/itemDetail.jsx b/src/components/pages/itemDetail/itemDetail.jsx
index 85118b70..a4af37b4 100644
--- a/src/components/pages/itemDetail/itemDetail.jsx
+++ b/src/components/pages/itemDetail/itemDetail.jsx
@@ -6,6 +6,7 @@ import backIcon from '../../../assets/backIcon.png'
 import { useParams } from 'react-router-dom';
 import { useState, useEffect } from 'react';
 import { getItemId, getProductComments } from '../../../api/Api';
+import { Link } from 'react-router-dom';
 
 /** @jsxImportSource @emotion/react */
 
@@ -15,14 +16,13 @@ const pageWrapper = css`
 `
 
 const itemDetailWrapper = css`
-    margin: 16px;
+    margin: 32px 16px 42px;
     gap: 24px;
     display: flex;
     padding-bottom: 16px;
     border-bottom: 1px solid var(--gray-200);
 `
 const imgSection = css`
-    // width: 100%;
     
     > img {
     width: 486px;
@@ -107,6 +107,11 @@ const tagBox = css`
     font-weight: 600;
     color: var(--gray-600);
 
+    > span {
+        color: var(--gray-800);
+        font-weight: 400;
+    }
+
     > h3 {
         font-weight: 600;
     }
@@ -228,6 +233,10 @@ const backToListButtonStyle = css`
     }
 `
 
+const linkStyle = css`
+    text-decoration: none;
+`
+
 const ItemDetail = () => {
 
     const {productId} = useParams();
@@ -343,10 +352,13 @@ const ItemDetail = () => {
                     }                
                 </ul>
             </div>
-            <button type='button' css={backToListButtonStyle} >
-                <p>목록으로 돌아가기</p>
-                <img src={backIcon} />
-            </button>
+            <Link to={"/items"} css={linkStyle}>
+                <button type='button' css={backToListButtonStyle} >
+                    <p>목록으로 돌아가기</p>
+                    <img src={backIcon} />
+                </button>
+            </Link>
+
         </div>
     )
 }

From c33cafab0ff691bce09fd6e03a1c6ec941848786 Mon Sep 17 00:00:00 2001
From: TopiaYu <raemo963@naver.com>
Date: Mon, 12 May 2025 16:47:09 +0900
Subject: [PATCH 6/9] =?UTF-8?q?=EC=BD=94=EB=A9=98=ED=8A=B8=20=EB=82=A8?=
 =?UTF-8?q?=EA=B2=BC=EC=9D=84=EB=95=8C=20=EB=B2=84=ED=8A=BC=20=EC=83=89=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/itemDetail/itemDetail.jsx           | 39 +++++++++++++------
 1 file changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/components/pages/itemDetail/itemDetail.jsx b/src/components/pages/itemDetail/itemDetail.jsx
index a4af37b4..b8386861 100644
--- a/src/components/pages/itemDetail/itemDetail.jsx
+++ b/src/components/pages/itemDetail/itemDetail.jsx
@@ -179,17 +179,21 @@ const makeComment = css`
     padding: 16px;
     resize: none;
     }
+`
 
-    > button {
-        width: 74px;
-        height: 42px;
-        border-radius: 8px;
-        border: none;
-        background: var(--gray-400);
-        align-self: flex-end;
-        color: white;
-        cursor: pointer;
-    }
+const commentButtonStyle = css`
+    width: 74px;
+    height: 42px;
+    border-radius: 8px;
+    border: none;
+    background: var(--gray-400);
+    align-self: flex-end;
+    color: white;
+    cursor: pointer;
+`
+
+const activeButtonStyle = css`
+    background: var(--blue)
 `
 
 const commentList = css`
@@ -242,6 +246,12 @@ const ItemDetail = () => {
     const {productId} = useParams();
     const [item, setItem] = useState(null);
     const [comments, setComments] = useState([]);
+    const [commentTextarea, setCommentTextarea] = useState("");
+    const isButtonActive = commentTextarea.trim().length > 0;
+
+    const handleChange = (e) => {
+        setCommentTextarea(e.target.value);
+    }
 
     useEffect(()=> {
         async function fetchData() {
@@ -325,8 +335,13 @@ const ItemDetail = () => {
             <div css={commentSection}>
                 <div css={makeComment}>
                     <label htmlFor="makecomment">문의하기</label>
-                    <textarea id="makecomment" placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다." />
-                    <button type="button">등록</button>
+                    <textarea 
+                        id="makecomment" 
+                        placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
+                        value={commentTextarea}
+                        onChange={handleChange}
+                        />
+                    <button type="button" css={[commentButtonStyle, isButtonActive && activeButtonStyle]} >등록</button>
                 </div>
                 <ul css={commentList}>
                     {comments.length > 0 &&

From 8879b1af94aaaaeea2f60665a9ed261fd5869606 Mon Sep 17 00:00:00 2001
From: TopiaYu <raemo963@naver.com>
Date: Mon, 12 May 2025 17:06:58 +0900
Subject: [PATCH 7/9] =?UTF-8?q?=EC=95=84=EC=9D=B4=ED=85=9C=20=20default=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B6=94=EA=B0=80,=20=EC=BD=94?=
 =?UTF-8?q?=EB=A9=98=ED=8A=B8=20=EC=97=86=EC=9D=84=EB=95=8C=20default?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/noCommentImg.png                   | Bin 0 -> 16130 bytes
 .../pages/itemDetail/itemDetail.jsx           |  26 ++++++++++++++++--
 2 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/noCommentImg.png

diff --git a/src/assets/noCommentImg.png b/src/assets/noCommentImg.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ef0aaff2268362dea065ecbed18df519c24d1cd
GIT binary patch
literal 16130
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

literal 0
HcmV?d00001

diff --git a/src/components/pages/itemDetail/itemDetail.jsx b/src/components/pages/itemDetail/itemDetail.jsx
index b8386861..295aa5f1 100644
--- a/src/components/pages/itemDetail/itemDetail.jsx
+++ b/src/components/pages/itemDetail/itemDetail.jsx
@@ -3,6 +3,8 @@ import { css } from '@emotion/react';
 import kebabIcon from '../../../assets/kebabIcon.png'
 import userImage from '../../../assets/LoginProfile.png'
 import backIcon from '../../../assets/backIcon.png'
+import noCommentImg from '../../../assets/noCommentImg.png'
+import defaultImage from '../../../assets/img_default.png'
 import { useParams } from 'react-router-dom';
 import { useState, useEffect } from 'react';
 import { getItemId, getProductComments } from '../../../api/Api';
@@ -27,7 +29,6 @@ const imgSection = css`
     > img {
     width: 486px;
     aspect-ratio: 1/1;
-    background: pink;
     border-radius: 16px;
     object-fit: cover;
     }
@@ -71,9 +72,11 @@ const itemDescription = css`
     gap: 16px;
     font-weight: 600;
     color: var(--gray-600);
+    font-size: 16px;
 
     > h3 {
         font-weight: 600;
+        font-size: 16px;
     }
 `
 
@@ -84,6 +87,7 @@ const itemTag = css`
 
     > h3 {
         font-weight: 600;
+        font-size: 16px;
     }
 
     > span {
@@ -241,6 +245,13 @@ const linkStyle = css`
     text-decoration: none;
 `
 
+const noCommentImgStyles = css`
+    margin: 10px auto 48px;
+    display: flex;
+    justify-content: center;
+    width: 196px;
+`
+
 const ItemDetail = () => {
 
     const {productId} = useParams();
@@ -289,7 +300,12 @@ const ItemDetail = () => {
         <div css={pageWrapper}>
             <div css={itemDetailWrapper}>
                 <div css={imgSection}>
-                    <img src={item.images} />
+                    <img src={item.images || defaultImage}
+                        onError={(e)=> {
+                            e.target.onerror = null;
+                            e.target.src = defaultImage;
+                        }}    
+                    />
                 </div>
                 <div css={itemDetail}>
                     <div css={itemHeader}>
@@ -344,7 +360,11 @@ const ItemDetail = () => {
                     <button type="button" css={[commentButtonStyle, isButtonActive && activeButtonStyle]} >등록</button>
                 </div>
                 <ul css={commentList}>
-                    {comments.length > 0 &&
+                    {comments.length == 0 ? 
+                    <div>
+                        <img src={noCommentImg} css={noCommentImgStyles} />
+                    </div>
+                    :
                         comments.map((comment) =>(
                             <li key={comment.id} css={commentListStyle}>
                                 <div css={commentHeader}>

From 906af6d6109bee6d794ed51f8316d32398effbb5 Mon Sep 17 00:00:00 2001
From: TopiaYu <raemo963@naver.com>
Date: Mon, 12 May 2025 17:25:41 +0900
Subject: [PATCH 8/9] =?UTF-8?q?=EC=84=B8=EB=B6=80=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=ED=85=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20=EB=93=A4?=
 =?UTF-8?q?=EC=96=B4=EA=B0=80=EB=A9=B4=20=20=EC=A4=91=EA=B3=A0=EB=A7=88?=
 =?UTF-8?q?=EC=BC=93=20hearder=20=ED=8C=8C=EB=9E=80=EC=83=89=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AllItems.jsx                    | 2 +-
 src/components/Header.jsx                      | 4 +++-
 src/components/pages/itemDetail/itemDetail.jsx | 9 +++++++++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/AllItems.jsx b/src/components/AllItems.jsx
index 59f0104a..6288d7b1 100644
--- a/src/components/AllItems.jsx
+++ b/src/components/AllItems.jsx
@@ -32,7 +32,7 @@ const AllItems = ({ items, onChangeOrder }) => {
                 <div css={itemGrid} >
                     {items.map((item) => {
                         return(
-                            <Link to={`/items/${item.id}`} css={itemLinkStyle} >
+                            <Link to={`/Items/${item.id}`} css={itemLinkStyle} >
                                 <ItemList key={item.id} item={item} />
                             </Link>
                         )
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 797d44cb..d47b579d 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -49,7 +49,9 @@ const Header = () => {
                             <Link to={"/FreeBoard"} css={aTag}>자유게시판</Link>
                             <Link to={"/Items"} 
                                 css={[aTag, 
-                                (location.pathname ==='/Items' || location.pathname === '/additems')  && css`
+                                (location.pathname ==='/Items' || 
+                                    location.pathname.startsWith('/Items/') ||
+                                    location.pathname === '/additems' )  && css`
                                 color: var(--blue)`]}
                                 >
                                 중고마켓
diff --git a/src/components/pages/itemDetail/itemDetail.jsx b/src/components/pages/itemDetail/itemDetail.jsx
index 295aa5f1..072e7fae 100644
--- a/src/components/pages/itemDetail/itemDetail.jsx
+++ b/src/components/pages/itemDetail/itemDetail.jsx
@@ -23,6 +23,10 @@ const itemDetailWrapper = css`
     display: flex;
     padding-bottom: 16px;
     border-bottom: 1px solid var(--gray-200);
+
+        @media(max-width: 425px) {
+            flex-direction: column;
+        }
 `
 const imgSection = css`
     
@@ -31,6 +35,10 @@ const imgSection = css`
     aspect-ratio: 1/1;
     border-radius: 16px;
     object-fit: cover;
+
+        @media(max-width: 768px) {
+            width: 340px;
+        }
     }
 `
 
@@ -97,6 +105,7 @@ const itemTag = css`
 
 const tagWrapper = css`
     display: flex;
+    flex-wrap: wrap;
     gap: 8px;
     margin-top: 16px;
 `

From ccaea140805fc07d839bab7c0db1211df7132b7c Mon Sep 17 00:00:00 2001
From: TopiaYu <raemo963@naver.com>
Date: Mon, 12 May 2025 17:42:18 +0900
Subject: [PATCH 9/9] =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/pages/itemDetail/itemDetail.jsx b/src/components/pages/itemDetail/itemDetail.jsx
index 072e7fae..00156464 100644
--- a/src/components/pages/itemDetail/itemDetail.jsx
+++ b/src/components/pages/itemDetail/itemDetail.jsx
@@ -39,6 +39,10 @@ const imgSection = css`
         @media(max-width: 768px) {
             width: 340px;
         }
+
+        @media(max-width: 425px) {
+            width: 100%;
+        }
     }
 `