[정하윤] sprint6

mission-fe/package.json

@@ -6,6 +6,7 @@
     "cra-template": "1.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^7.1.1",
     "react-scripts": "5.0.1"
   },
   "scripts": {

mission-fe/src/App.jsx

@@ -0,0 +1,18 @@
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Home from "./pages/home/Home";
+import Products from "./pages/Products";
+import Registration from "./components/features/registration/Registration";
+
+function App() {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/items" element={<Products />} />
+        <Route path="/registration" element={<Registration />} />
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

mission-fe/src/components/common/Button.jsx

@@ -0,0 +1,9 @@
+function Button({ children, ...props }) {
+  return (
+    <button {...props} className={`button ${props.className || ""}`}>
+      {children}
+    </button>
+  );
+}
+
+export default Button;

mission-fe/src/components/common/DropDown.jsx → mission-fe/src/components/features/products/ProductSortDropdown.jsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
-import toggleIcon from "../../assets/icons/ic_arrow_down.png";
+import toggleIcon from "../../../assets/icons/ic_arrow_down.png";
 
-function DropDown({ orderBy, setOrderBy }) {
+function ProductSortDropdown({ orderBy, setOrderBy }) {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
   // dropdown handler
@@ -35,4 +35,4 @@ function DropDown({ orderBy, setOrderBy }) {
   );
 }
 
-export default DropDown;
+export default ProductSortDropdown;

mission-fe/src/components/features/products/BestItems.css → mission-fe/src/components/features/products/bestitems/BestItems.css

@@ -1,3 +1,9 @@
+.container {
+  max-width: 120rem;
+  padding: 4rem 2rem;
+  margin: var(--header-height) auto 0;
+  width: 100%;
+}
 .container h2 {
   font-size: 2rem;
   margin-bottom: 1.6rem;

mission-fe/src/components/features/products/BestItems.jsx → mission-fe/src/components/features/products/bestitems/BestItems.jsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
 import "./BestItems.css";
-import heartIcon from "../../../assets/icons/ic_heart.png";
-import defaultImage from "../../../assets/icons/img_default.png";
-import useResponsivePageSize from "../../../hooks/useResponsivePageSize";
+import heartIcon from "../../../../assets/icons/ic_heart.png";
+import defaultImage from "../../../../assets/icons/img_default.png";
+import useResponsivePageSize from "../../../../hooks/useResponsivePageSize";
 
 const BASE_URL = "https://panda-market-api.vercel.app";
 

mission-fe/src/components/features/products/OnSaleItems.jsx → mission-fe/src/components/features/products/onsaleitems/OnSaleItems.jsx

@@ -1,13 +1,15 @@
 import { useState, useEffect } from "react";
-import Pagination from "../../common/Pagination";
-import SearchInput from "../../common/SearchInput";
-import DropDown from "../../common/DropDown";
+import Pagination from "../../../common/pagination/Pagination";
+import SearchInput from "../../../common/SearchInput";
+import ProductSortDropdown from "../ProductSortDropdown";
 import "./OnSaleItems.css";
-import heartIcon from "../../../assets/icons/ic_heart.png";
-import defaultImage from "../../../assets/icons/img_default.png";
-import useResponsivePageSize from "../../../hooks/useResponsivePageSize";
+import heartIcon from "../../../../assets/icons/ic_heart.png";
+import defaultImage from "../../../../assets/icons/img_default.png";
+import useResponsivePageSize from "../../../../hooks/useResponsivePageSize";
+import { useNavigate } from "react-router-dom";
+import Button from "../../../common/Button";
 
-const BASE_URL = "https://panda-market-api.vercel.app";
+const BASE_URL = "https://five-sprint-mission-be.onrender.com/api/products";
 
 function OnSaleItems() {
   const [productList, setProductList] = useState([]);
@@ -16,19 +18,20 @@ function OnSaleItems() {
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
   const pageSize = useResponsivePageSize({ mobile: 4, tablet: 6, desktop: 10 });
+  const navigate = useNavigate();
 
   // fetch data
   useEffect(() => {
     const fetchOnSaleItems = async () => {
       try {
         const response = await fetch(
-          `${BASE_URL}/products?page=${currentPage}&pageSize=${pageSize}&orderBy=${orderBy}&keyword=${keyword}`
+          `${BASE_URL}?page=${currentPage}&pageSize=${pageSize}&keyword=${keyword}`
         );
         if (!response.ok) throw new Error("데이터를 불러오는데 실패했습니다");
 
         const data = await response.json();
-        setProductList(data.list);
-        setTotalPages(Math.ceil(data.totalCount / pageSize));
+        setProductList(data.products);
+        setTotalPages(data.totalPages);
       } catch (err) {
         console.log("데이터 로딩 에러:", err);
       }
@@ -44,17 +47,21 @@ function OnSaleItems() {
         <h2>판매중인 상품</h2>
         <div className="searchBox">
           <SearchInput keyword={keyword} setKeyword={setKeyword} />
-          <button className="register-button">상품 등록하기</button>
-          <DropDown orderBy={orderBy} setOrderBy={setOrderBy} />
+
+          <Button className="button" onClick={() => navigate("/registration")}>
+            상품 등록하기
+          </Button>
+
+          <ProductSortDropdown orderBy={orderBy} setOrderBy={setOrderBy} />
         </div>
       </div>
 
       <div className="onSale-itemGrid">
         {productList.map((item) => (
-          <div key={item.id}>
+          <div key={item._id} onClick={() => navigate(`/products/${item._id}`)}>
             <img
               src={item.images || defaultImage}
-              alt={item.title}
+              alt={item.name}
               className="itemCard"
               onError={(e) => {
                 e.target.onerror = null;
@@ -66,7 +73,7 @@ function OnSaleItems() {
               <p>{item.price.toLocaleString()}원</p>
               <span>
                 <img src={heartIcon} alt="좋아요" className="heartIcon" />
-                {item.favoriteCount}
+                {item.favoriteCount || 0}
               </span>
             </div>
           </div>