[김치영] sprint6

package.json

@@ -14,7 +14,8 @@
     "react-dom": "^19.0.0",
     "react-responsive": "^10.0.1",
     "react-router": "^7.5.3",
-    "react-router-dom": "^7.5.3"
+    "react-router-dom": "^7.5.3",
+    "styled-components": "^6.1.18"
   },
   "devDependencies": {
     "@eslint/js": "^9.22.0",

src/App.jsx

@@ -1,27 +1,29 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import Home from './pages/Home/Home';
-import Login from './pages/Auth/Login';
-import Signup from './pages/Auth/Signup';
-import Items from './pages/Items/Items';
-import Privacy from './pages/Privacy/Privacy';
-import Faq from './pages/Faq/Faq';
-import AddItem from './pages/AddItem/AddItem';
-import { LoginStateProvider } from './contexts/LoginStateContext';
-import Board from './pages/Board/Board';
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { LoginStateProvider } from "./contexts/LoginStateContext";
+import HomePage from "./pages/HomePage/HomePage";
+import LoginPage from "./pages/AuthPage/LoginPage";
+import SignupPage from "./pages/AuthPage/SignupPage";
+import ItemsPage from "./pages/ItemsPage/ItemsPage";
+import AddItemPage from "./pages/AddItemPage/AddItemPage";
+import PrivacyPage from "./pages/PrivacyPage/PrivacyPage";
+import FaqPage from "./pages/FaqPage/FaqPage";
+import BoardPage from "./pages/BoardPage/BoardPage";
 
 function App() {
   return (
     <BrowserRouter>
       <LoginStateProvider>
         <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/login" element={<Login />} />
-          <Route path="/signup" element={<Signup />} />
-          <Route path="/items" element={<Items />} />
-          <Route path="/board" element={<Board />} />
-          <Route path="/additem" element={<AddItem />} />
-          <Route path="/privacy" element={<Privacy />} />
-          <Route path="/faq" element={<Faq />} />
+          <Route path="/">
+            <Route index element={<HomePage />} />
+            <Route path="items" element={<ItemsPage />} />
+            <Route path="board" element={<BoardPage />} />
+            <Route path="additem" element={<AddItemPage />} />
+            <Route path="privacy" element={<PrivacyPage />} />
+            <Route path="faq" element={<FaqPage />} />
+          </Route>
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/signup" element={<SignupPage />} />
         </Routes>
       </LoginStateProvider>
     </BrowserRouter>

src/components/BestItemsSection.jsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+import { getItems } from "../utils/api";
+import ItemsContainer from "./ItemsContainer";
+import styles from "./ItemsSection.module.css";
+
+const LIST_TYPE = "best";
+
+const BestItemsSection = ({ pageSize }) => {
+  const [bestItemList, setBestItemList] = useState([]);
+
+  const loadBestItemList = async (options) => {
+    const result = await getItems(options);
+    if (!result) return;
+    const { list } = result;
+    setBestItemList(list);
+  };
+
+  useEffect(() => {
+    if (!pageSize) return;
+    (async () => {
+      await loadBestItemList({
+        offset: 1,
+        pageSize: pageSize,
+        orderBy: "favorite",
+        keyword: "",
+      });
+    })();
+  }, [pageSize]);
+
+  return (
+    <section className={`${styles["cards-section"]} ${styles[LIST_TYPE]}`}>
+      <div className={styles["section-header-container"]}>
+        <h2 className={styles["section-title"]}>베스트 상품</h2>
+      </div>
+      <ItemsContainer
+        listName={LIST_TYPE}
+        itemList={bestItemList}
+        pageSize={pageSize}
+      />
+    </section>
+  );
+};
+
+export default BestItemsSection;