[최제원] Sprint6

src/App.js → src/App.jsx

@@ -1,4 +1,4 @@
-import { Route, Routes, BrowserRouter } from "react-router-dom";
+import { Route, Routes, BrowserRouter, Navigate } from "react-router-dom";
 import Header from "./components/Header/Header.jsx";
 import Home from "./pages/Home/Home.jsx";
 import AddItem from "./pages/AddItem/AddItem.jsx";
@@ -12,8 +12,11 @@ function App() {
       <BrowserRouter>
         <Header></Header>
         <Routes>
-          <Route path="/" element={<Home></Home>}></Route>
-          <Route path="/item" element={<Items></Items>}></Route>
+          <Route
+            path="/"
+            element={<Navigate to="/items" replace></Navigate>}
+          ></Route>
+          <Route path="/items" element={<Home></Home>}></Route>
           <Route path="/additem" element={<AddItem></AddItem>}></Route>
         </Routes>
       </BrowserRouter>

src/components/Header/Header.css

@@ -1,7 +1,6 @@
 .header {
-  width: 100vw;
   height: 70px;
-  border: 1px solid #dfdfdf;
+  border-bottom: 1px solid #dfdfdf;
 }
 
 .header-nav__container {

src/components/ItemList/ItemList.css

@@ -8,4 +8,7 @@
 .ItemList-ul.grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
 }

src/components/ItemList/ItemList.jsx

@@ -8,7 +8,7 @@ export default function ItemList({ items, layoutType }) {
       {items.map((item) => {
         return (
           <li key={item.id}>
-            <Products item={item}></Products>
+            <Products item={item} layoutType={layoutType}></Products>
           </li>
         );
       })}

src/components/Products/Product.css

@@ -5,8 +5,40 @@
 }
 
 .product-img {
-  width: 287px;
-  height: 287px;
   border-radius: 16px;
   object-fit: cover;
 }
+
+.product-img.flex {
+  width: 282px;
+  height: 282px;
+}
+
+.product-img.grid {
+  width: 221px;
+  height: 221px;
+}
+
+.product-name {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+.favorite-count__container {
+  display: flex;
+  gap: 4px;
+}
+
+.product-price {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 26px;
+}
+
+.product-favoriteCount {
+  color: #4b5563;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+}

src/components/Products/Products.jsx

@@ -1,13 +1,21 @@
 import React from "react";
 import "./Product.css";
+import heartImg from "../../img/heartIcon.png";
 
-export default function Products({ item }) {
+export default function Products({ item, layoutType }) {
   return (
     <div className="product">
-      <img src={item.images} alt="제품 이미지" className="product-img" />
+      <img
+        src={item.images}
+        alt="제품 이미지"
+        className={`product-img ${layoutType}`}
+      />
       <h2 className="product-name">{item.name}</h2>
       <p className="product-price">{item.price}</p>
-      <p className="product-favoriteCount">{item.favoriteCount}</p>
+      <div className="favorite-count__container">
+        <img src={heartImg} alt="하트이미지" className="favorite-count__img" />
+        <p className="product-favoriteCount">{item.favoriteCount}</p>
+      </div>
     </div>
   );
 }

src/css/Global.css

@@ -1,5 +1,6 @@
 .App {
   background-color: #fcfcfc;
+  font-family: "Pretendard-Regular";
 }
 
 * {
@@ -13,3 +14,7 @@
   font-weight: 400;
   font-style: normal;
 }
+
+p {
+  color: #1f2937;
+}

src/pages/Home/Home.css

@@ -1,4 +1,4 @@
-.products__section {
+.products-section {
   width: 1200px;
   max-width: 1200px;
   height: auto;
@@ -11,12 +11,37 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  gap: 16px;
 }
 
-h1 {
-  font-family: "Pretendard-Regular";
+.favorite-products__container {
+  padding-bottom: 40px;
+}
+
+.all-products__container {
+  padding-bottom: 43px;
+}
+
+.products-section__title--best,
+.products-section__title--all {
   font-size: 20px;
   font-weight: 700;
   line-height: 32px;
   color: #111827;
 }
+
+.all-products__header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.all-products__search-container {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.all-products__input {
+  width: 325px;
+  height: 42px;
+}

src/pages/Home/Home.jsx

@@ -2,11 +2,12 @@ import { useEffect, useState } from "react";
 import productList from "../../Api.js";
 import ItemList from "../../components/ItemList/ItemList.jsx";
 import "./Home.css";
+import { Link } from "react-router-dom";
 
 function Home() {
   const [allItems, setAllItems] = useState([]);
   const [bestItems, setBestItems] = useState([]);
-
+  const [selectedOption, setSelectedOption] = useState("최신순");
   const loadAllItems = async () => {
     try {
       const { list } = await productList({ orderBy: "recent" });
@@ -33,21 +34,38 @@ function Home() {
     loadBestItems();
   }, []);
 
-  const handleSortClick = () => {
-    setOrderBy((prevOrderBy) =>
-      prevOrderBy === "recent" ? "favorite" : "recent"
-    );
+  const handleOptionClick = (e) => {
+    setSelectedOption(e.target.value);
   };
 
   return (
-    <section className="products__section">
+    <section className="products-section">
       <div className="favorite-products__container">
-        <h1>베스트 상품</h1>
+        <h1 className="products-section__title--best">베스트 상품</h1>
         <ItemList items={bestItems} layoutType="flex"></ItemList>
       </div>
       <div className="all-products__container">
-        <div className=""></div>
-        <h1>전체 상품</h1>
+        <div className="all-products__header">
+          <h1 className="products-section__title--all">전체 상품</h1>
+          <form className="all-products__search-container">
+            <input
+              type="text"
+              placeholder="검색할 상품을 입력해주세요"
+              className="all-products__input"
+            />
+            <Link to="/additem" className="all-products__add-button">
+              상품 등록하기
+            </Link>
+            <select
+              value={selectedOption}
+              onChange={handleOptionClick}
+              className="dropDown-products"
+            >
+              <option value="최신순">최신순</option>
+              <option value="인기순">인기순</option>
+            </select>
+          </form>
+        </div>
         <ItemList items={allItems} layoutType="grid"></ItemList>
       </div>
     </section>