[유동환] sprint7

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/:productId" element={<ItemDetail />} />
         </Routes>
     </>
   )

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;
+}
+

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>

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,
 }

src/components/BestItem.jsx

@@ -1,7 +1,9 @@
+import { Link } from "react-router-dom";
 import { 
     constainer,
     title,
     itemGrid,
+    linkStyle,
 } from "./BestItemStyle";
 import ItemList from "./ItemList";
 
@@ -18,8 +20,12 @@ const BestItem = ({ items }) => {
 
             <div css={itemGrid} >
                 {bestItems.map((item) => {
-                    return <ItemList key={item.id} item={item}/>
-                })}                
+                    return (
+                        <Link to={`${item.id}`} css={linkStyle}>
+                            <ItemList key={item.id} item={item}/>
+                        </Link>
+                    )
+                })}          
             </div>
         </div>
     )

src/components/BestItemStyle.js

@@ -30,8 +30,14 @@ const itemGrid = css`
 
 `
 
+const linkStyle = css`
+    text-decoration: none;
+`
+
+
 export {
     constainer,
     title,
     itemGrid,
+    linkStyle,
 }

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)`]}
                                 >
                                 중고마켓

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);
+        }
 
 `
 

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="태그를 입력해주세요"