Merge pull request #299 from imi21123/test

Feat: 축제 부스 검색 페이지 제작

Author: imi21123

src/App.js

@@ -31,6 +31,7 @@ import PaymentFailPage from "./pages/PaymentPage/Redirect/PaymentFailPage";
 import PaymentLoadingPage from "./pages/PaymentPage/Redirect/PaymentLoadingPage";
 import Splash from "./pages/Splash/Splash";
 import StoreSearchPage from "./pages/StoreSearch/StoreSearch";
+import FestivalBoothSearch from "./pages/StoreSearch/FestivalBoothSearch";
 function App() {
   // const [cookies, , removeCookies] = useCookies();
   // const [isAuth, setIsAuth] = useRecoilState(isAuthenticatedState);
@@ -163,6 +164,9 @@ function App() {
             />
             {/* 결제 실패 리다이렉트 페이지 */}
             <Route path="/payment/fail" element={<NewPaymentFailPage />} />
+
+            {/* 축제 부스 검색 페이지 */}
+            <Route path="/booth" element={<FestivalBoothSearch />} />
           </Routes>
         </Suspense>
       </RecoilRoot>

src/components/views/StoreList/StoreList.jsx

@@ -4,25 +4,37 @@ import { IMAGES } from "../../../constants/images";
 import { useNavigate } from "react-router-dom";
 import useFetchSearch from "../../../hooks/useFetchSearch";
 
-const StoreList = ({ searchTerm = "" }) => {
+const StoreList = ({ searchTerm = "", cafe = false, booth = false }) => {
   const navigate = useNavigate();
   const stores = useFetchSearch();
+  let displayStores = [];
 
+  if (cafe) {
+    displayStores = stores.filter((item) => item.idx < 5);
+  } else if (booth) {
+    displayStores = stores.filter((item) => item.idx >= 5);
+  }
   // 검색어에 따라 필터링된 목록을 반환하는 로직
   const filteredStores = stores.filter((item) => {
     return item.name.toLowerCase().includes(searchTerm.toLowerCase());
   });
 
   // 검색어가 있을 경우 filteredStores를 사용하고, 없을 경우 기존 stores를 사용
-  const displayStores = searchTerm ? filteredStores : stores;
+  displayStores = searchTerm ? filteredStores : displayStores;
 
   return (
     <div className="store_list">
       {displayStores.map((item) => (
         <div
           key={item.idx}
           className="store_list_item"
-          onClick={() => navigate(`/packagingStatus?storeId=${item.idx}`)}
+          onClick={() => {
+            if (item.idx >= 5) {
+              navigate(`/packagingStatus?storeId=${item.idx}&inout=2`);
+            } else {
+              navigate(`/packagingStatus?storeId=${item.idx}`);
+            }
+          }}
         >
           <img
             src={item.imgUrl}

src/pages/StoreSearch/FestivalBoothSearch.jsx

@@ -0,0 +1,57 @@
+import React, { useState, useEffect, useRef } from "react";
+import { IMAGES } from "../../constants/images";
+import "./StoreSearch.css";
+import Header from "../../components/views/Header/Header";
+import NavBar from "../../components/views/NavBar/NavBar";
+import StoreList from "../../components/views/StoreList/StoreList";
+
+function FestivalBoothSearch() {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(searchTerm);
+  const debounceDelay = 500; // 디바운스 지연 시간
+  const inputRef = useRef(null);
+
+  // 사용자 입력 처리
+  const handleInputChange = (e) => {
+    setSearchTerm(e.target.value);
+    // console.log("검색어:", searchTerm);
+  };
+
+  // 디바운싱 구현
+  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: "축제 주점 검색" }} />
+
+      <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>
+
+      {/* Debounced search term을 사용하여 StoreList에 prop으로 전달 */}
+      <StoreList searchTerm={debouncedSearchTerm} booth={true} />
+
+      <NavBar />
+    </div>
+  );
+}
+
+export default FestivalBoothSearch;

src/pages/StoreSearch/StoreSearch.jsx

@@ -47,7 +47,7 @@ function StoreSearch() {
       </form>
 
       {/* Debounced search term을 사용하여 StoreList에 prop으로 전달 */}
-      <StoreList searchTerm={debouncedSearchTerm} />
+      <StoreList searchTerm={debouncedSearchTerm} cafe={true} />
 
       <NavBar />
     </div>