feat: 검색 기능 구현

codeit-sprint-fullstack · Oct 28, 2024 · 12831cc · 12831cc
1 parent e4f93df
commit 12831cc
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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;
 }