[문주영] Sprint7

src/App.jsx

@@ -2,6 +2,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { HelmetProvider } from 'react-helmet-async';
 import Index from './pages/Index.jsx';
 import Items from './pages/Items.jsx';
+import ItemProduct from './pages/ItemProduct.jsx';
 import AddItem from './pages/AddItem.jsx';
 import Auth from './pages/Auth.jsx';
 import Login from './pages/Login.jsx';
@@ -16,7 +17,10 @@ function App() {
         <Routes>
           <Route index element={<Index />} />
 
-          <Route path="items" element={<Items />} />
+          <Route path="items">
+            <Route index element={<Items />} />
+            <Route path=":productId" element={<ItemProduct />} />
+          </Route>
 
           <Route path="additem" element={<AddItem />} />
 

src/api/api.js

@@ -1,7 +1,20 @@
 const BASE_URL = "https://panda-market-api.vercel.app";
 
-export async function getProducts( { page=1, pageSize=10, orderBy="recent", keyword } ) {
+export async function getProducts({ page=1, pageSize=10, orderBy="recent", keyword }) {
     const query = new URLSearchParams({ page, pageSize, orderBy }).toString();
-    const products = await fetch(`${BASE_URL}/products?${query}${keyword ? "&keyword="+keyword : ''}`);
-    return (await products.json());
+    const response = await fetch(`${BASE_URL}/products?${query}${keyword ? "&keyword="+keyword : ''}`);
+    if (!response.ok) { throw Error("Request Error"); }
+    return (await response.json());
+}
+
+export async function getProduct({ productId }) {
+    const response = await fetch(`${BASE_URL}/products/${productId}`);
+    if (!response.ok) { throw Error("Request Error"); }
+    return (await response.json());
+}
+
+export async function getProductComments({ productId, limit }) {
+    const response = await fetch(`${BASE_URL}/products/${productId}/comments?limit=${limit}`);
+    if (!response.ok) { throw Error("Request Error"); }
+    return (await response.json());
 }

src/components/Button.jsx

@@ -1,16 +1,9 @@
-import { useNavigate } from "react-router-dom";
 import styles from "./Button.module.css";
 
 //styleType은 small, medium, large로 나뉜다
-function Button ({ styleType="small", className, onClick, to, children, ...props }) {
-    const navigate = useNavigate();
-    const handleClick = (e) => {
-        if (onClick) onClick(e);
-        if (to) setTimeout(() => navigate(to), 0);
-    }
-
+function Button ({ styleType="small", className='', children, ...props }) {
     return (
-    <button className={`${styles.btn} ${styles[styleType]} ${className}`} onClick={handleClick} {...props}>
+    <button className={`${styles.btn} ${styles[styleType]} ${className}`} {...props}>
         {children}
     </button>
     );

src/components/Button.module.css

@@ -21,18 +21,22 @@
 }
 
 .btn.small {
+    padding: 8px 23px;
     border-radius: 8px;
     font-size: 16px;
     line-height: 26px;
 }
 
 .btn.medium {
+    width: 240px;
+    padding: 11px 0;
     border-radius: 9999px;
     font-size: 18px;
     line-height: 26px;
 }
 
 .btn.large {
+    padding: 12px 0;
     border-radius: 9999px;
     font-size: 20px;
     line-height: 32px;

src/components/ButtonHeart.jsx

@@ -0,0 +1,17 @@
+import icHeartLargeActive from "../assets/heart/ic_heart_large_active.svg";
+import icHeartLargeInactive from "../assets/heart/ic_heart_large_inactive.svg";
+import icHeartMediumActive from "../assets/heart/ic_heart_medium_active.svg";
+import icHeartMediumInactive from "../assets/heart/ic_heart_medium_inactive.svg";
+import styles from "./ButtonHeart.module.css";
+
+function ButtonHeart({ isActive=false, className='', children, ...props }) {
+    return (<button className={styles.btn+' '+className} {...props}>
+        <img className={styles.large+' '+styles[isActive]} src={icHeartLargeActive} />
+        <img className={styles.large+' '+styles[!isActive]} src={icHeartLargeInactive} />
+        <img className={styles.medium+' '+styles[isActive]} src={icHeartMediumActive} />
+        <img className={styles.medium+' '+styles[!isActive]} src={icHeartMediumInactive} />
+        {children}
+    </button>);
+}
+
+export default ButtonHeart;

src/components/ButtonHeart.module.css

@@ -0,0 +1,29 @@
+.btn {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 11px;
+    border: 1px solid var(--gray200);
+    border-radius: 9999px;
+    background-color: white;
+    color: var(--gray500);
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 26px;
+}
+
+.btn img.medium,
+.btn img.false {
+    display: none;
+}
+
+@media (max-width: 1199px) {
+    .btn img.medium {
+        display: block;
+    }
+
+    .btn img.large,
+    .btn img.false {
+        display: none;
+    }
+}

src/components/Dropdown.jsx

@@ -1,14 +1,11 @@
-import { useEffect, useRef, useState } from 'react';
-import icArrowDown from '../assets/ic_arrow_down.svg';
-import icSort from '../assets/ic_sort.svg';
-import styles from './Dropdown.module.css';
+import { useEffect, useRef, useState } from "react";
+import icKebab from "../assets/ic_kebab.svg";
+import styles from "./Dropdown.module.css";
 
-const option = { recent: "최신순", favorite: "좋아요순", }
-
-function Dropdown({ state, setState, mode }) {
+function Dropdown({ className='', onClickEdit, onClickDelete, ...props }) {
     const [isOpen, setIsOpen] = useState(false);
     const dropdownRef = useRef(null);
-
+    
     useEffect(() => {
         const handleClickOutside = (e) => {
             if (dropdownRef.current && !dropdownRef.current.contains(e.target)) setIsOpen(false);
@@ -17,23 +14,13 @@ function Dropdown({ state, setState, mode }) {
         return () => document.removeEventListener("click", handleClickOutside);;
     }, []);
 
-    return (
-        <button 
-            className={`${styles.dropdown} ${(mode === "Mobile" && styles.small)}`} 
-            onClick={() => setIsOpen((prev) => !prev)} 
-            ref={dropdownRef}
-        >
-            { mode !== "Mobile" 
-                ? <> <div>{option[state]}</div> <img src={icArrowDown} /> </>
-                : <img src={icSort} /> }
-            { isOpen &&
-                <ul className={styles.dropdownList}>
-                    {Object.entries(option).map(([key, value]) => (<li key={key}>
-                        <input type="button" value={value} onClick={() => setState(key)} />
-                    </li>))}
-                </ul>}    
-        </button>
-    );
+    return (<button type="button" className={styles.dropdown+' '+className} ref={dropdownRef} onClick={() => setIsOpen((prev) => !prev)} {...props}>
+        <img src={icKebab} />
+        {isOpen && <div className={styles.list}>
+            <input type="button" value="수정하기" onClick={onClickEdit} />
+            <input type="button" value="삭제하기" onClick={onClickDelete}/>
+        </div>}
+    </button>);
 }
 
 export default Dropdown;

src/components/Dropdown.module.css

@@ -1,51 +1,55 @@
 .dropdown {
     position: relative;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 0;
-    width: 130px;
-    padding: 0 19px;
-    border: 1px solid var(--gray200);
-    border-radius: 12px;
-    color: var(--gray800);
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 26px;
-}
-
-.dropdown.small {
-    justify-content: center;
-    width: 42px;
+    padding: 0;
+    border: none;
 }
 
-.dropdownList {
+.dropdown .list {
+    z-index: 1;
     position: absolute;
-    top: calc(100% + 8px);
+    top: calc(100% + 10px);
     right: 0;
-    width: 130px;
-    margin: 0;
-    padding: 0;
-    border: 1px solid var(--gray200);
-    border-radius: 12px;
-    background-color: white;
+    width: 139px;
 }
 
-.dropdownList li input {
-    display: block;
+.dropdown .list input {
     cursor: pointer;
     width: 100%;
-    height: 41px;
-    padding: 8px 0 6px;
-    border: none;
-    border-bottom: 1px solid var(--gray200);
-    background-color: transparent;
-    color: var(--gray800);
+    border: 1px solid #D1D5DB;
+    background-color: white;
+    color: var(--gray500);
     font-weight: 400;
     font-size: 16px;
     line-height: 26px;
 }
 
-.dropdownList li:last-child input {
-    border: none;
+.dropdown .list input:first-child {
+    padding: 11px 0 8px;
+    border-bottom: none;
+    border-radius: 8px 8px 0 0;
+}
+
+.dropdown .list input:last-child {
+    padding: 8px 0 11px;
+    border-top: none;
+    border-radius: 0 0 8px 8px;
+}
+
+@media (max-width: 767px) {
+    .dropdown .list {
+        width: 102px;
+    }
+
+    .dropdown .list input {
+        font-size: 14px;
+        line-height: 17px;
+    }
+
+    .dropdown .list input:first-child {
+        padding: 15px 0 12px;
+    }
+
+    .dropdown .list input:last-child {
+        padding: 12px 0 15px;
+    }
 }

src/components/DropdownSort.jsx

@@ -0,0 +1,40 @@
+import { useEffect, useRef, useState } from 'react';
+import icArrowDown from '../assets/ic_arrow_down.svg';
+import icSort from '../assets/ic_sort.svg';
+import styles from './DropdownSort.module.css';
+
+const option = { recent: "최신순", favorite: "좋아요순", }
+
+function Dropdown({ state, setState, mode }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef(null);
+
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(e.target)) setIsOpen(false);
+        };
+        document.addEventListener("click", handleClickOutside);
+        return () => document.removeEventListener("click", handleClickOutside);;
+    }, []);
+
+    return (
+        <button 
+            type="button"
+            className={`${styles.dropdown} ${(mode === "Mobile" && styles.small)}`} 
+            onClick={() => setIsOpen((prev) => !prev)} 
+            ref={dropdownRef}
+        >
+            { mode !== "Mobile" 
+                ? <> <div>{option[state]}</div> <img src={icArrowDown} /> </>
+                : <img src={icSort} /> }
+            { isOpen &&
+                <ul className={styles.dropdownList}>
+                    {Object.entries(option).map(([key, value]) => (<li key={key}>
+                        <input type="button" value={value} onClick={() => setState(key)} />
+                    </li>))}
+                </ul>}    
+        </button>
+    );
+}
+
+export default Dropdown;