[김서연] Sprint7

src/App.jsx

@@ -1,30 +1,13 @@
-import { Routes, Route, BrowserRouter } from "react-router-dom";
-
-import Home from "./pages/Home";
-import Login from "./pages/Login";
-import Signup from "./pages/Signup";
-import Item from "./pages/Item";
-import Privacy from "./pages/Privacy";
-import FAQ from "./pages/FAQ";
-import Community from "./pages/Community";
+import { BrowserRouter as Router, Routes } from "react-router-dom";
+import routes from "./routes";
 
 import "./styles/common.css";
-import AddItem from "./pages/AddItem";
 
 function App() {
   return (
-    <BrowserRouter>
-      <Routes>
-        <Route index element={<Home />} />
-        <Route path="/login" element={<Login />} />
-        <Route path="/signup" element={<Signup />} />
-        <Route path="/item" element={<Item />} />
-        <Route path="/privacy" element={<Privacy />} />
-        <Route path="/FAQ" element={<FAQ />} />
-        <Route path="/community" element={<Community />} />
-        <Route path="/item/additem" element={<AddItem />} />
-      </Routes>
-    </BrowserRouter>
+    <Router>
+      <Routes>{routes}</Routes>
+    </Router>
   );
 }
 

src/api/getItemById.js

@@ -0,0 +1,16 @@
+export default async function getProductById(id) {
+  try {
+    const response = await fetch(
+      `https://panda-market-api.vercel.app/products/${id}`
+    );
+    if (!response.ok) {
+      throw new Error("상품 정보를 불러오는데 실패했습니다.");
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("상품 상세 에러:", error);
+    throw error;
+  }
+}

src/api/getItemComment.js

@@ -0,0 +1,15 @@
+export default function getItemComment({ id, limit = 10 }) {
+  return fetch(
+    `https://panda-market-api.vercel.app/products/${id}/comments?limit=${limit}`
+  )
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error("Failed to fetch comments");
+      }
+      return response.json();
+    })
+    .catch((error) => {
+      console.error("Error fetching comments:", error);
+      throw error;
+    });
+}

src/api/itemAPI.js

@@ -1,14 +1,18 @@
 export async function getProducts(params = {}) {
-  const query = new URLSearchParams(params).toString();
+  try {
+    const query = new URLSearchParams(params).toString();
+    const response = await fetch(
+      `https://panda-market-api.vercel.app/products?${query}`
+    );
 
-  const response = await fetch(
-    `https://panda-market-api.vercel.app/products?${query}`
-  );
-  if (!response.ok) {
-    throw new Error("데이터를 불러오는데 실패했습니다.");
-  }
-
-  const data = await response.json();
+    if (!response.ok) {
+      throw new Error("데이터를 불러오는데 실패했습니다.");
+    }
 
-  return data;
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("에러 발생:", error);
+    throw error;
+  }
 }

src/components/Home/Banner.jsx → src/components/Home/Header.jsx

@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 import logo from "/logo.svg";
 import logo_title from "/logo_title.svg";
 
-function Banner() {
+function Header() {
   return (
     <div className="banner-content">
       <div className="logo-content">
@@ -21,4 +21,4 @@ function Banner() {
   );
 }
 
-export default Banner;
+export default Header;

src/components/Item/AllItems.jsx

@@ -1,5 +1,4 @@
 import { useState, useEffect, useCallback } from "react";
-import debounce from "lodash/debounce";
 
 import { getProducts } from "../../api/itemAPI";
 import { Link } from "react-router-dom";
@@ -30,33 +29,34 @@ function AllItem() {
   const [totalPage, setTotalPage] = useState();
   const [pageSize, setPageSize] = useState(getPageSize());
   const [page, setPage] = useState(1);
+  const [keyword, setKeyword] = useState("");
 
   const handleResize = useCallback(() => {
     const newSize = getPageSize();
     setPageSize((prevSize) => (prevSize !== newSize ? newSize : prevSize));
   }, []);
 
-  const debouncedResize = useCallback(debounce(handleResize, 300), [
-    handleResize,
-  ]);
-
   useEffect(() => {
-    window.addEventListener("resize", debouncedResize);
-
+    window.addEventListener("resize", handleResize);
     return () => {
-      window.removeEventListener("resize", debouncedResize);
-      debouncedResize.cancel();
+      window.removeEventListener("resize", handleResize);
     };
-  }, [debouncedResize]);
+  }, []);
 
   useEffect(() => {
     const fetchItems = async () => {
       try {
-        const data = await getProducts({
+        const params = {
           orderBy: sort,
-          pageSize: pageSize,
-          page: page,
-        });
+          pageSize,
+          page,
+        };
+
+        if (keyword.trim() !== "") {
+          params.keyword = keyword;
+        }
+
+        const data = await getProducts(params);
         setItems(data.list);
         setTotalPage(Math.ceil(data.totalCount / pageSize));
       } catch (error) {
@@ -65,7 +65,12 @@ function AllItem() {
     };
 
     fetchItems();
-  }, [sort, pageSize, page]);
+  }, [sort, pageSize, page, keyword]);
+
+  const handleKeywordChange = (e) => {
+    setKeyword(e.target.value);
+    setPage(1);
+  };
 
   return (
     <div className="all-item">
@@ -76,8 +81,10 @@ function AllItem() {
           <input
             className="item-search"
             placeholder="검색할 상품을 입력해주세요"
+            value={keyword}
+            onChange={handleKeywordChange}
           />
-          <Link to="/item/additem" className="item-add-item">
+          <Link to="additem" className="item-add-item">
             상품 등록하기
           </Link>
           <Dropdown sort={sort} setSort={setSort} className="dropdown" />

src/components/Item/BestItem.jsx

@@ -1,5 +1,4 @@
 import { useState, useEffect, useCallback } from "react";
-import debounce from "lodash/debounce";
 
 import ItemList from "./component/ItemList";
 import { getProducts } from "../../api/itemAPI";
@@ -27,18 +26,12 @@ function BestItem() {
     setPageSize((prevSize) => (prevSize !== newSize ? newSize : prevSize));
   }, []);
 
-  const debouncedResize = useCallback(debounce(handleResize, 300), [
-    handleResize,
-  ]);
-
   useEffect(() => {
-    window.addEventListener("resize", debouncedResize);
-
+    window.addEventListener("resize", handleResize);
     return () => {
-      window.removeEventListener("resize", debouncedResize);
-      debouncedResize.cancel(); // 꼭 필요!
+      window.removeEventListener("resize", handleResize);
     };
-  }, [debouncedResize]);
+  }, []);
 
   useEffect(() => {
     const fetchItems = async () => {

src/components/Item/Banner.jsx → src/components/Item/Header.jsx

@@ -3,27 +3,24 @@ import { Link, NavLink } from "react-router-dom";
 import logo from "/logo.svg";
 import logo_title from "/logo_title.svg";
 
-import "./Banner.css";
+import "./Header.css";
 
 function getLinkStyle({ isActive }) {
   return {
     color: isActive ? "var(--blue)" : undefined,
   };
 }
 
-function Banner() {
+function Header() {
   return (
     <header className="item-banner">
       <div className="item-banner-content">
         <div className="item-banner-left">
-          <div className="item-logo-content">
-            <Link className="item-logo" to="/">
-              <img src={logo} alt="판다마켓 로고 이미지" />
-            </Link>
-            <Link className="item-logo-text" to="/">
-              <img src={logo_title} alt="판다마켓" />
-            </Link>
-          </div>
+          <Link className="item-logo-content" to="/">
+            <img className="item-logo" src={logo} alt="판다마켓 로고 이미지" />
+            <img className="item-logo-text" src={logo_title} alt="판다마켓" />
+          </Link>
+
           <nav className="item-nav-content">
             <ul>
               <li>
@@ -48,4 +45,4 @@ function Banner() {
   );
 }
 
-export default Banner;
+export default Header;

src/components/Item/component/Dropdown.jsx

@@ -40,12 +40,14 @@ export default function Dropdown({ sort, setSort }) {
       {isOpen && (
         <ul className="dropdown-menu">
           {options.map((option) => (
-            <li
-              key={option.value}
-              className="dropdown-item"
-              onClick={() => handleOptionClick(option.value)}
-            >
-              {option.label}
+            <li key={option.value} className="dropdown-item">
+              <button
+                type="button"
+                value={option.value}
+                onClick={() => handleOptionClick(option.value)}
+              >
+                {option.label}
+              </button>
             </li>
           ))}
         </ul>

src/components/Item/component/ItemCard.css

@@ -4,6 +4,8 @@
   align-items: flex-start;
   gap: 16px;
 
+  margin-top: 16px;
+
   cursor: pointer;
 }
 
@@ -32,6 +34,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: start;
+  gap: 0.6rem;
 }
 
 .item-name {

src/components/Item/component/ItemCard.jsx

@@ -1,3 +1,4 @@
+import { Link } from "react-router-dom";
 import heart_icon from "/heart_icon.svg";
 
 import "./ItemCard.css";
@@ -12,7 +13,7 @@ function isValidImage(url) {
 
 function ItemCard({ item, className }) {
   return (
-    <>
+    <Link to={`/item/${item.id}`} className="item-card-link">
       <div className="item-card-container">
         <img
           src={isValidImage(item.images[0]) ? item.images[0] : "/no_image.png"}
@@ -23,20 +24,21 @@ function ItemCard({ item, className }) {
           alt={item.name}
           className={`${className} item-image`}
         />
+
         <div className="item-card-description">
           <span className="item-name">{item.name}</span>
-          <h2 className="item-price">{item.price}</h2>
-          <div className="item-heart-content">
+          <h2 className="item-price">{item.price.toLocaleString()}</h2>
+          <button className="item-heart-content" type="button">
             <img
               src={heart_icon}
               alt="좋아요 누르는 하트 버튼"
               className="item-heart-icon"
             />
             <span className="item-heart-count">{item.favoriteCount}</span>
-          </div>
+          </button>
         </div>
       </div>
-    </>
+    </Link>
   );
 }