[송형진] Sprint5, Sprint6

src/App.js

@@ -2,15 +2,29 @@ import "./App.css";
 import Header from "./components/layout/Header";
 import BestProducts from "./components/BestProducts/BestProducts";
 import AllProducts from "./components/AllProducts/AllProducts";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import AddItem from "./pages/AddItem";
+import "./styles/global.css";
+
+function MainContent() {
+  return (
+    <>
+      <BestProducts />
+      <AllProducts />
+    </>
+  );
+}
 
 function App() {
   return (
     <BrowserRouter>
       <div className="App">
         <Header />
-        <BestProducts />
-        <AllProducts />
+        <Routes>
+          <Route path="/" element={<MainContent />} />
+          <Route path="/items" element={<MainContent />} />
+          <Route path="pages/additem" element={<AddItem />} />
+        </Routes>
       </div>
     </BrowserRouter>
   );

src/components/AllProducts/AllProducts.css

@@ -1,6 +1,7 @@
 .all-item-section {
   max-width: 1200px;
   margin: 40px auto;
+  padding: 20px;
 }
 
 .all-item-header {
@@ -10,11 +11,29 @@
   margin-bottom: 20px;
 }
 
-.all-product-list {
+.all-product-list.desktop {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 20px;
   list-style: none;
   padding: 0;
   margin: 0;
 }
+
+.all-product-list.tablet {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.all-product-list.mobile {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}

src/components/AllProducts/AllProducts.jsx

@@ -4,18 +4,32 @@ import ProductItem from "../common/product";
 import SearchForm from "../SearchForm/SearchForm";
 import Pagination from "../Pagination/Pagination";
 import "./AllProducts.css";
+import useDevice from "../../hooks/useDevice";
 
 function AllProducts() {
   const [allItemList, setAllItemList] = useState([]);
   const [selectedOption, setSelectedOption] = useState("recent");
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(0);
+  const [size, setSize] = useState(282);
+
+  const { mode } = useDevice();
 
   useEffect(() => {
     const fetchAllItems = async () => {
+      let pageSize = 10;
+      if (mode === "tablet") {
+        pageSize = 6;
+        setSize(221);
+      } else if (mode === "mobile") {
+        pageSize = 4;
+        setSize(168);
+      } else {
+        setSize(221);
+      }
       const data = await getData({
         page: currentPage,
-        pageSize: 10,
+        pageSize: pageSize,
         orderBy: selectedOption,
       });
 
@@ -24,7 +38,7 @@ function AllProducts() {
     };
 
     fetchAllItems();
-  }, [currentPage, selectedOption]);
+  }, [currentPage, selectedOption, mode]);
 
   const handlePageChange = (pageNumber) => {
     if (pageNumber < 1 || pageNumber > totalPages) return;
@@ -40,15 +54,15 @@ function AllProducts() {
           setSelectedOption={setSelectedOption}
         />
       </div>
-      <ul className="all-product-list">
+      <ul className={`all-product-list ${mode}`}>
         {allItemList.map((item) => (
           <li key={item.id}>
             <ProductItem
               imageUrl={item.images[0]}
               name={item.name}
               price={item.price}
               likeCount={item.favoriteCount}
-              size={221}
+              size={size}
             />
           </li>
         ))}

src/components/BestProducts/BestProducts.css

@@ -1,10 +1,10 @@
 .best-section {
   margin: 0 auto;
-  width: 1200px;
   padding: 20px;
+  max-width: 1200px;
 }
 
-.product-list {
+.product-list.desktop {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
@@ -14,3 +14,20 @@
   padding: 0;
   list-style: none;
 }
+
+.product-list.tablet {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  justify-content: left;
+  margin: 0 auto;
+  padding: 0;
+  list-style: none;
+}
+
+.product-list.mobile {
+  display: flex;
+  justify-content: left;
+  padding: 0;
+  list-style: none;
+}

src/components/BestProducts/BestProducts.jsx

@@ -2,28 +2,44 @@ import { useState, useEffect } from "react";
 import { getData } from "../../api";
 import ProductItem from "../common/product";
 import "./BestProducts.css";
+import useDevice from "../../hooks/useDevice";
 
 function BestProducts() {
   const [itemList, setItemList] = useState([]);
   const [currentPage, setCurrentPage] = useState(1);
 
+  const [size, setSize] = useState(282);
+
+  const { mode } = useDevice();
+
   //베스트상품 가져오기
   useEffect(() => {
     const fetchBestItems = async () => {
+      let pageSize = 4;
+      if (mode === "tablet") {
+        pageSize = 2;
+        setSize(343);
+      } else if (mode === "mobile") {
+        pageSize = 1;
+        setSize(343);
+      } else {
+        setSize(282);
+      }
+
       const data = await getData({
         page: currentPage,
-        pageSize: 4,
+        pageSize: pageSize,
         orderBy: "favorite",
       });
       setItemList(data.list);
     };
     fetchBestItems();
-  }, []); //베스트 상품은 pagination 없으니 일단 한번만 실행
+  }, [mode]); //베스트 상품은 pagination 없으니 일단 한번만 실행
 
   return (
     <section className="best-section">
       <h2>베스트 상품</h2>
-      <ul className="product-list">
+      <ul className={`product-list ${mode}`}>
         {" "}
         {itemList.map((item) => (
           <li key={item.id}>
@@ -33,7 +49,7 @@ function BestProducts() {
               name={item.name}
               price={item.price}
               likeCount={item.favoriteCount}
-              size={282}
+              size={size}
             />
           </li>
         ))}

src/components/SearchForm/SearchForm.css

@@ -49,3 +49,35 @@
   font-size: 14px;
   cursor: pointer;
 }
+
+.search-container.tablet .search-input {
+  width: 242px;
+}
+
+.search-container.mobile .search-input {
+  width: 242px;
+}
+
+@media screen and (max-width: 768px) {
+  .search-form {
+    display: block;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .search-button {
+    display: block;
+  }
+
+  .search-container {
+    top: 100px;
+    position: relative;
+    transform: translateX(-400px);
+    overflow-x: hidden; /* 가로 스크롤 방지 */
+  }
+
+  select {
+    position: relative;
+    top: 15px;
+  }
+}

src/components/SearchForm/SearchForm.jsx

@@ -1,19 +1,21 @@
 import { Link } from "react-router-dom";
 import searchImage from "../../assets/images/search.png";
 import "./SearchForm.css";
+import useDevice from "../../hooks/useDevice";
 
 function SearchForm({ selectedOption, setSelectedOption }) {
+  const { mode } = useDevice();
   return (
     <form className="search-form">
-      <div className="search-container">
+      <div className={`search-container ${mode}`}>
         <img src={searchImage} alt="검색" />
         <input
           type="text"
           placeholder="검색할 상품을 입력해주세요"
           className="search-input"
         />
       </div>
-      <Link to="./pages/items.jsx">
+      <Link to="./pages/additem">
         <button type="submit" className="search-button">
           상품 등록하기
         </button>

src/components/common/product.css

@@ -1,10 +1,9 @@
-@media screen and (min-width: 1200px) {
-  .heart-section {
-    display: flex;
-    gap: 6px;
-  }
+.heart-section {
+  display: flex;
+  gap: 6px;
 }
-/* @media screen and (min-width: 768px) and (max-width: 1199px) {
+
+.product-info span {
+  position: relative;
+  top: 5px;
 }
-@media screen and (min-width: 375px) and (max-width: 767px) {
-} */

src/components/common/product.jsx

@@ -1,5 +1,6 @@
 import "./product.css";
 import heartImage from "../../assets/images/heart.png";
+import useDevice from "../../hooks/useDevice";
 
 function ProductItem({ imageUrl, name, price, likeCount, size }) {
   return (
@@ -26,7 +27,7 @@ function ProductItem({ imageUrl, name, price, likeCount, size }) {
         <p>{price.toLocaleString()}원</p>
         <div className="heart-section">
           <img src={heartImage} alt="하트이미지" />
-          <span>{likeCount}</span>
+          <span>{likeCount.toLocaleString()}</span>
         </div>
       </div>
     </div>

src/components/layout/Header.jsx

@@ -1,16 +1,28 @@
 import userIcon from "../../assets/images/user.png";
 import "./Header.css";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 function Header() {
+  const location = useLocation();
   return (
     <header className="main-header">
       <div className="nav-container">
         <a href="/">
           <div className="brand-logo" />
         </a>
         <nav className="nav-links">
-          <Link to="./pages/items.jsx">자유게시판</Link>
-          <Link to="./pages/items.jsx">중고마켓</Link>
+          <Link to="./">자유게시판</Link>
+          <Link
+            to="./items"
+            style={{
+              color:
+                location.pathname === "/items" ||
+                location.pathname === "/pages/additem"
+                  ? "#3692ff"
+                  : "none",
+            }}
+          >
+            중고마켓
+          </Link>
         </nav>
       </div>
       <div className="user-profile">

src/hooks/useDevice.jsx

@@ -0,0 +1,22 @@
+import { useState, useEffect } from "react";
+
+const useDevice = () => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  let mode = "desktop";
+
+  if (windowWidth < 1200 && windowWidth >= 768) mode = "tablet";
+  else if (windowWidth < 768) mode = "mobile";
+
+  useEffect(() => {
+    window.addEventListener("resize", (event) => {
+      setWindowWidth(event.target.innerWidth);
+    });
+  }, []);
+
+  return {
+    mode,
+  };
+};
+
+export default useDevice;