3단계 시작, 검색기능 구현중

Author: sowonhub

src/App.jsx

@@ -1,8 +1,8 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 
 import Layout from "./Layout.jsx";
-import MainPage from "./page/MainPage.jsx";
-import DetailPage from "./page/DetailPage.jsx";
+import MainPage from "./pages/MainPage.jsx";
+import DetailPage from "./pages/DetailPage.jsx";
 
 import { createGlobalStyle } from "styled-components";
 

src/Component/NavigationBarComponent.jsx

@@ -1,5 +1,5 @@
 import { Outlet } from "react-router-dom";
-import NavigationBar from "./component/NavigationBarComponent";
+import NavigationBar from "./components/NavigationBar.jsx";
 
 export default function Layout() {
   return (

src/Layout.jsx

@@ -3,9 +3,9 @@ import { Link } from "react-router-dom";
 
 // <-------------------- function, return -------------------->
 
-export default function CardComponent({ movie }) {
+export default function Card({ movie }) {
   return (
-    <Card>
+    <Container>
       <Link to={`/details/${movie.id}`}>
         <Poster
           src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`}
@@ -16,13 +16,13 @@ export default function CardComponent({ movie }) {
         <Title>{movie.title}</Title>
         <Rating>{movie.vote_average}</Rating>
       </Info>
-    </Card>
+    </Container>
   );
 }
 
 // <-------------------- styled-components -------------------->
 
-const Card = styled.div`
+const Container = styled.div`
   width: 18vw;
   max-width: 200px;
   min-width: 150px;

src/Component/CardComponent.jsx renamed to src/components/Card.jsx

@@ -0,0 +1,136 @@
+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 useTmdbKeywordData from "../data/hooks/useTmdbKeywordData.js";
+
+// <-------------------- function -------------------->
+
+export default function NavigationBar() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const keywordParam = searchParams.get("keyword") || "";
+  const [keyword, setKeyword] = useState(keywordParam);
+
+  const debouncedKeyword = useDebounce(keyword, 500);
+  const searchKeyword = useTmdbKeywordData(debouncedKeyword);
+
+  useEffect(() => {
+    if (keyword.trim() === "") {
+      searchParams.delete("keyword");
+      setSearchParams(searchParams);
+    } else {
+      setSearchParams({ keyword });
+    }
+  }, [keyword]);
+
+  // <-------------------- return -------------------->
+
+  return (
+    <Navigationbar>
+      <Link to="/" style={{ textDecoration: "none", color: "white" }}>
+        <Logo>🎬 • WISH MOVIE</Logo>
+      </Link>
+
+      <SearchBox>
+        <input
+          type="text"
+          placeholder="tell me your wish 🧞‍♂️"
+          value={keyword}
+          onChange={(e) => setKeyword(e.target.value)}
+        />
+      </SearchBox>
+
+      {/* <-------------------- 검색 결과 표시 */}
+
+      {searchKeyword && searchKeyword.length > 0 && (
+        <searchKeyword>
+          {searchKeyword.map((movie) => (
+            <p key={movie.id}>{movie.title}</p>
+          ))}
+        </searchKeyword>
+      )}
+
+      <Buttons>
+        <LoginBtn>로그인</LoginBtn>
+        <SignupBtn>회원가입</SignupBtn>
+      </Buttons>
+    </Navigationbar>
+  );
+}
+
+// <-------------------- styled-components -------------------->
+
+const Navigationbar = styled.nav`
+  width: 100%;
+  height: 60px;
+  background-color: #1a1a1a;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 40px;
+  box-sizing: border-box;
+  overflow: hidden;
+  gap: 50px;
+`;
+
+const Logo = styled.h1`
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: #757575;
+`;
+
+const SearchBox = styled.div`
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  input {
+    width: 100%;
+    height: 30px;
+    border-radius: 15px;
+    border: none;
+    padding: 0 15px;
+    font-size: 16px;
+    background-color: #bafd00;
+  }
+`;
+
+const SearchResults = styled.div`
+  position: absolute;
+  top: 70px;
+  background-color: #111;
+  width: 300px;
+  max-height: 400px;
+  overflow-y: auto;
+  color: white;
+  border-radius: 8px;
+  padding: 10px;
+`;
+
+const Buttons = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+`;
+
+const LoginBtn = styled.button`
+  background: none;
+  color: white;
+  border: 1px solid white;
+  border-radius: 15px;
+  padding: 5px 15px;
+  cursor: pointer;
+`;
+
+const SignupBtn = styled.button`
+  background-color: white;
+  color: #141414;
+  border: none;
+  border-radius: 15px;
+  padding: 5px 15px;
+  cursor: pointer;
+`;

src/components/NavigationBar.jsx

@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+
+export default function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

src/Data/DetailData.json renamed to src/data/DummyDetailData.json

@@ -5,9 +5,8 @@ const apiToken = import.meta.env.VITE_TMDB_ACCESS_TOKEN;
 
 // <-------------------- function -------------------->
 
-export default function useDetailApi(id) {
-  const [detailApi, setDetailApi] = useState([]);
-  // console.log(movieId);
+export default function useTmdbDetailData(id) {
+  const [tmdbDetailData, setTmdbDetailData] = useState([]);
 
   // <-------------------- API : Details
 
@@ -25,12 +24,12 @@ export default function useDetailApi(id) {
     axios
       .request(options)
       .then((res) => {
-        setDetailApi(res.data);
+        setTmdbDetailData(res.data);
       })
       .catch((err) => console.error(err));
   }, []);
 
   // <-------------------- return -------------------->
 
-  return detailApi;
+  return tmdbDetailData;
 }

src/Data/MainData.json renamed to src/data/DummyMainData.json

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+import axios from "axios";
+
+const apiToken = import.meta.env.VITE_TMDB_ACCESS_TOKEN;
+
+export default function useTmdbKeywordData(keyword) {
+  const [search, setSearch] = useState([]);
+
+  useEffect(() => {
+    if (!keyword) return;
+
+    const options = {
+      method: "GET",
+      url: `https://api.themoviedb.org/3/search/movie`,
+      params: {
+        query: keyword,
+        language: "ko-KR",
+        page: 1,
+      },
+      headers: {
+        accept: "application/json",
+        Authorization: `Bearer ${apiToken}`,
+      },
+    };
+
+    axios
+      .request(options)
+      .then((res) => setSearch(res.data.results))
+      .catch((err) => console.error(err));
+  }, [keyword]);
+
+  return search;
+}