From 17113d5814f9812af70639e6bea2f714c4dd482d Mon Sep 17 00:00:00 2001
From: unknown <imi21123@gmail.com>
Date: Mon, 6 May 2024 21:03:13 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EC=B6=95=EC=A0=9C=20=EB=B6=80=EC=8A=A4?=
 =?UTF-8?q?=20=EA=B2=80=EC=83=89=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A0=9C?=
 =?UTF-8?q?=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js                                    |  4 ++
 src/components/views/StoreList/StoreList.jsx  | 18 +++++-
 src/pages/StoreSearch/FestivalBoothSearch.jsx | 57 +++++++++++++++++++
 src/pages/StoreSearch/StoreSearch.jsx         |  2 +-
 4 files changed, 77 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/StoreSearch/FestivalBoothSearch.jsx

diff --git a/src/App.js b/src/App.js
index 94d5b55..5bed52c 100644
--- a/src/App.js
+++ b/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>
diff --git a/src/components/views/StoreList/StoreList.jsx b/src/components/views/StoreList/StoreList.jsx
index 77f4705..965b812 100644
--- a/src/components/views/StoreList/StoreList.jsx
+++ b/src/components/views/StoreList/StoreList.jsx
@@ -4,17 +4,23 @@ 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">
@@ -22,7 +28,13 @@ const StoreList = ({ searchTerm = "" }) => {
         <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}
diff --git a/src/pages/StoreSearch/FestivalBoothSearch.jsx b/src/pages/StoreSearch/FestivalBoothSearch.jsx
new file mode 100644
index 0000000..41e3162
--- /dev/null
+++ b/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;
diff --git a/src/pages/StoreSearch/StoreSearch.jsx b/src/pages/StoreSearch/StoreSearch.jsx
index d71595a..aea5664 100644
--- a/src/pages/StoreSearch/StoreSearch.jsx
+++ b/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>