From 12831cc46a44851ebc1755bdbd9fba8f9e5ad222 Mon Sep 17 00:00:00 2001
From: just-codingbaby <gocks5393@naver.com>
Date: Mon, 28 Oct 2024 13:20:06 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=20=EA=B8=B0=EB=8A=A5?=
 =?UTF-8?q?=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pandamarket/sprint5/src/App.js                | 13 ++++++++----
 .../sprint5/src/components/ProductList.js     |  8 +++----
 pandamarket/sprint5/src/style/productlist.css | 21 +++++++++++++++++--
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/pandamarket/sprint5/src/App.js b/pandamarket/sprint5/src/App.js
index 38b126fc..37b4e22c 100644
--- a/pandamarket/sprint5/src/App.js
+++ b/pandamarket/sprint5/src/App.js
@@ -14,6 +14,7 @@ function App() {
   const [sortedItems, setSortedItems] = useState([]);
   const [sortedPageSize, setSortedPageSize] = useState(10);
   const [favoritePageSize, setFavoritePageSize] = useState(4);
+  const [searchItem, setSearchItem] = useState('');
 
   const loadFavorite = async () => {
     let pageSize;
@@ -24,7 +25,7 @@ function App() {
 
     setFavoritePageSize(pageSize);
 
-    const response = await getProduct(1, pageSize, 'favorite');
+    const response = await getProduct(1, favoritePageSize, 'favorite');
     setFavoriteItems(response.list);
   }
 
@@ -37,10 +38,14 @@ function App() {
 
     setSortedPageSize(pageSize);
 
-    const response = await getProduct(1, pageSize, sort);
+    const response = await getProduct(1, sortedPageSize, sort, searchItem);
     setSortedItems(response.list);
   }
 
+  const handleSearch = (e) => {
+    setSearchItem(e.target.value);
+  }
+
   useEffect(() => {
     const handleResize = () => {
       setScreenWidth(window.innerWidth);
@@ -50,14 +55,14 @@ function App() {
     loadFavorite();
     loadSorted();
 
-  }, [screenWidth, sort]);
+  }, [screenWidth, sort, searchItem]);
 
   return (
     <div className="app__container">
       <Header/>
       <main className="main__container">
         <ProductList items={favoriteItems} label='베스트 상품' />
-        <ProductList items={sortedItems} label='판매 중인 상품' setSort={setSort}/>
+        <ProductList items={sortedItems} label='판매 중인 상품' setSort={setSort} onSearch={handleSearch} />
       </main>
       <Footer/>
     </div> 
diff --git a/pandamarket/sprint5/src/components/ProductList.js b/pandamarket/sprint5/src/components/ProductList.js
index c65591e7..de64948e 100644
--- a/pandamarket/sprint5/src/components/ProductList.js
+++ b/pandamarket/sprint5/src/components/ProductList.js
@@ -1,6 +1,8 @@
 
 import '../style/productlist.css';
 import likeIcon from '../img/LikeIcon.png';
+import { useState } from 'react';
+
 
 function ProductItem({ item , label }) {
   const {id, name, description, price, images, favoriteCount, createdAt, updatedAt} = item;
@@ -18,9 +20,7 @@ function ProductItem({ item , label }) {
   );
 }
 
-
-
-function ProductList({ items, label, setSort }) {
+function ProductList({ items, label, setSort, onSearch }) {
   const handleSortChange = (e) => {
     setSort(e.target.value);
   }
@@ -31,7 +31,7 @@ function ProductList({ items, label, setSort }) {
         : (<div className='sortedProductList__label__box'>
             <p className='productList__label'>{label}</p>
             <div>
-              <input type='search' placeholder='검색할 상품을 입력해주세요'/>
+              <input type='search' placeholder='검색할 상품을 입력해주세요' onChange={onSearch} />
               <button type='button'>상품 등록하기</button>
               <select className='sortedSelect' onChange={handleSortChange}>
                 <option value="recent">최신순</option>
diff --git a/pandamarket/sprint5/src/style/productlist.css b/pandamarket/sprint5/src/style/productlist.css
index 2066b9b1..31c13f7f 100644
--- a/pandamarket/sprint5/src/style/productlist.css
+++ b/pandamarket/sprint5/src/style/productlist.css
@@ -91,12 +91,13 @@
 .sortedProductList__label__box {
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 
 .sortedProductList__label__box input {
   width: 250px;
   height: 25px;
-  background-color: rgba(200, 200, 200, 0.5);
+  background-color: #F3F4F6;
   border: 0;
   border-radius: 12px;
   padding-left: 25px;
@@ -116,6 +117,22 @@
 }
 
 .sortedProductList__label__box > div {
-  
+  display: flex;
+  gap: 8px;
+}
+
+.sortedProductList__label__box > div > button,
+.sortedProductList__label__box > div > select {
+  height: 25px;
+}
+
+.sortedProductList__label__box > div > button {
+  background-color: var(--color-blue);
+  font-family: var(--font-pretendard);
+  color: #F3F4F6;
+  border-radius: 8px;
+  font-size: 12px;
+  border: 0;
+  width: 120px;
 }