feat(search): 키워드 검색 기능 구현 (TMDB 연동, 디바운스)

Author: sowonhub

src/Layout.jsx

@@ -1,10 +1,8 @@
 import { Outlet } from "react-router-dom";
-import NavigationBar from "./components/NavigationBar.jsx";
 
 export default function Layout() {
   return (
     <div>
-      <NavigationBar />
       <div>
         <Outlet />
       </div>

src/pages/DetailPage.jsx

@@ -1,8 +1,10 @@
 import styled from "styled-components";
 
+import NavigationBar from "./components/NavigationBar";
+
 import { useParams } from "react-router-dom";
 
-import useTmdbDetailData from "../data/hooks/useTmdbDetailData";
+import useTmdbDetailData from "./data/hooks/useTmdbDetailData";
 
 // <-------------------- function -------------------->
 
@@ -14,20 +16,23 @@ export default function DetailPage() {
   // <-------------------- return -------------------->
 
   return (
-    <Detail>
-      <Poster
-        className="poster"
-        src={`https://image.tmdb.org/t/p/w500${tmdbDetail.backdrop_path}`}
-        alt={tmdbDetail.title}
-      />
-      <Info>
-        <TitleRating>
-          <Title>{tmdbDetail.title}</Title>
-          <Rating>{tmdbDetail.vote_average}</Rating>
-        </TitleRating>
-        <Overview>{tmdbDetail.overview}</Overview>
-      </Info>
-    </Detail>
+    <>
+      <NavigationBar />
+      <Detail>
+        <Poster
+          className="poster"
+          src={`https://image.tmdb.org/t/p/w500${tmdbDetail.backdrop_path}`}
+          alt={tmdbDetail.title}
+        />
+        <Info>
+          <TitleRating>
+            <Title>{tmdbDetail.title}</Title>
+            <Rating>{tmdbDetail.vote_average}</Rating>
+          </TitleRating>
+          <Overview>{tmdbDetail.overview}</Overview>
+        </Info>
+      </Detail>
+    </>
   );
 }
 

src/pages/MainPage.jsx

@@ -1,33 +1,38 @@
-import styled from 'styled-components';
+import styled from "styled-components";
+import Card from "./components/Card.jsx";
 
-import Card from '../components/Card.jsx';
-import useTmdbTopData from '../data/hooks/useTmdbTopData.js';
-import useTmdbMainData from '../data/hooks/useTmdbMainData.js';
-import useTmdbKeywordData from '../data/hooks/useTmdbKeywordData.js';
+import useTmdbTopData from "./data/hooks/useTmdbTopData.js";
+import useTmdbMainData from "./data/hooks/useTmdbMainData.js";
+import useTmdbKeywordData from "./data/hooks/useTmdbKeywordData.js";
 
-import NavigationBar from '../components/NavigationBar.jsx';
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation, Pagination, Autoplay } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
 
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { Navigation, Pagination, Autoplay } from 'swiper/modules';
-import 'swiper/css';
-import 'swiper/css/navigation';
-import 'swiper/css/pagination';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from "react-router-dom";
+import NavigationBar from "./components/NavigationBar.jsx";
 
 // <-------------------- function -------------------->
 
 export default function MainPage() {
-  const [keyword, setKeyword] = useSearchParams();
+  const [searchParams] = useSearchParams();
+  const query = searchParams.get("keyword")?.trim();
+
   const tmdbTop = useTmdbTopData();
-  const query = keyword.get("keyword")?.trim();
-  const tmdbMain = query ? useTmdbKeywordData(query) : useTmdbMainData(query);
+  const tmdbMainData = useTmdbMainData();
+  const tmdbKeywordData = useTmdbKeywordData(query);
+
+  const tmdbData = query ? tmdbKeywordData : tmdbMainData;
 
   // <-------------------- return -------------------->
 
   return (
     <>
+      <NavigationBar />
       <Container>
-        <Top10>TOP 10 🏆</Top10>
+        <Top10>🏆 TOP 10</Top10>
         <Swiper
           modules={[Navigation, Pagination, Autoplay]}
           navigation
@@ -46,12 +51,12 @@ export default function MainPage() {
           ))}
         </Swiper>
 
-        <Popular>Popular ✨</Popular>
-        <Mainapi>
-          {tmdbMain.map((api) => (
-            <Card movie={api} key={api.id} />
+        <Popular>✨ Popular</Popular>
+        <MainList>
+          {tmdbData.map((movie) => (
+            <Card movie={movie} key={movie.id} />
           ))}
-        </Mainapi>
+        </MainList>
       </Container>
     </>
   );
@@ -75,7 +80,7 @@ const Popular = styled.p`
   padding-left: 100px;
 `;
 
-const Mainapi = styled.div`
+const MainList = styled.div`
   display: flex;
   flex-wrap: wrap;
   justify-content: center;

src/components/Card.jsx renamed to src/pages/components/Card.jsx

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { Link, useSearchParams } from "react-router-dom";
 import { useEffect, useState } from "react";
 
-import useDebounce from "../data/hooks/useDebounce.js";
+import useDebounce from "./hooks/useDebounce.js";
 import useTmdbKeywordData from "../data/hooks/useTmdbKeywordData.js";
 
 // <-------------------- function -------------------->
@@ -12,17 +12,18 @@ export default function NavigationBar() {
   const keywordParam = searchParams.get("keyword") || "";
   const [keyword, setKeyword] = useState(keywordParam);
 
-  const debouncedKeyword = useDebounce(keyword, 500);
-  const searchKeyword = useTmdbKeywordData(debouncedKeyword);
+  const debouncedKeyword = useDebounce(keyword, 100);
+  useTmdbKeywordData(debouncedKeyword);
 
   useEffect(() => {
     if (keyword.trim() === "") {
-      searchParams.delete("keyword");
-      setSearchParams(searchParams);
+      const params = new URLSearchParams(searchParams);
+      params.delete("keyword");
+      setSearchParams(params);
     } else {
       setSearchParams({ keyword });
     }
-  }, [keyword]);
+  }, [keyword, searchParams, setSearchParams]);
 
   // <-------------------- return -------------------->
 
@@ -40,9 +41,6 @@ export default function NavigationBar() {
           onChange={(e) => setKeyword(e.target.value)}
         />
       </SearchBox>
-
-      {/* <-------------------- 검색 결과 표시 */}
-
       <Buttons>
         <LoginBtn>로그인</LoginBtn>
         <SignupBtn>회원가입</SignupBtn>