Merge pull request #230 from imi21123/test

Feat: 검색 기능 구현

src/components/views/StoreList/StoreList.jsx

@@ -1,22 +1,32 @@
+import React from "react";
 import "./StoreList.css";
 import { IMAGES } from "../../../constants/images";
 import { useNavigate } from "react-router-dom";
 import useFetchSearch from "../../../hooks/useFetchSearch";
 
-const StoreList = () => {
+const StoreList = ({ searchTerm = "" }) => {
   const navigate = useNavigate();
   const stores = useFetchSearch();
 
+  // 검색어에 따라 필터링된 목록을 반환하는 로직
+  const filteredStores = stores.filter((item) => {
+    return item.name.toLowerCase().includes(searchTerm.toLowerCase());
+  });
+
+  // 검색어가 있을 경우 filteredStores를 사용하고, 없을 경우 기존 stores를 사용
+  const displayStores = searchTerm ? filteredStores : stores;
+
   return (
     <div className="store_list">
-      {stores.map((item) => (
+      {displayStores.map((item) => (
         <div
+          key={item.idx} // React 리스트에서 각 요소는 고유한 key prop을 가져야 합니다.
           className="store_list_item"
           onClick={() => navigate(`/packagingStatus?storeId=${item.idx}`)}
         >
           <img
             src={item.imgUrl}
-            alt="veryPickimg"
+            alt="storeImage"
             className="store_list_cafe_img"
           />
           {!item.status && (

src/pages/PaymentPage/Redirect/PaymentLoadingPage.jsx

@@ -26,9 +26,9 @@ const PaymentLoadingPage = () => {
     navigate(-1);
   } else if (paymentStatus === 200) {
     if (paymentMessage !== "결제 성공") {
-      navigate(`/payment/fail`);
+      navigate(`/payment/fail`, { replace: true });
     } else {
-      navigate(`/status?orderId=${orderId}`);
+      navigate(`/status?orderId=${orderId}`, { replace: true });
     }
   }
 

src/pages/StoreSearch/StoreSearch.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { IMAGES } from "../../constants/images";
 import "./StoreSearch.css";
 import Header from "../../components/views/Header/Header";
@@ -7,39 +7,46 @@ import StoreList from "../../components/views/StoreList/StoreList";
 
 function StoreSearch() {
   const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(searchTerm);
+  const debounceDelay = 500; // 디바운스 지연 시간
+  const inputRef = useRef(null);
 
-  const handleSearch = (e) => {
-    e.preventDefault();
-    // 검색어와 함께 다른 페이지로 이동하거나 검색 결과를 표시할 수 있습니다.
-    // 예: navigate(`/search-results?query=${searchTerm}`);
-    console.log("검색어:", searchTerm);
-  };
-
+  // 사용자 입력 처리
   const handleInputChange = (e) => {
     setSearchTerm(e.target.value);
   };
 
+  // 디바운싱 구현
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+      console.log("검색어:", searchTerm);
+    }, debounceDelay);
+
+    // 컴포넌트가 unmount되거나 다음 useEffect가 실행되기 전에 타이머를 정리
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchTerm, debounceDelay]);
+
   return (
     <div className="store_search">
-      <Header
-        headerProps={{
-          pageName: "매장검색",
-          // linkTo: "/",
-        }}
-      />
-
-      <form className="store_search_form" onSubmit={handleSearch}>
+      <Header headerProps={{ pageName: "매장검색" }} />
+
+      <form className="store_search_form" onSubmit={(e) => e.preventDefault()}>
         <img src={IMAGES.search} alt="search" />
         <input
           type="text"
           className="store_search_input"
           placeholder="Search"
           value={searchTerm}
           onChange={handleInputChange}
+          ref={inputRef}
         />
       </form>
 
-      <StoreList />
+      {/* Debounced search term을 사용하여 StoreList에 prop으로 전달 */}
+      <StoreList searchTerm={debouncedSearchTerm} />
 
       <NavBar />
     </div>