Merge pull request #1 from sowonhub/mission-3-ktj

feat:keyword 출력하게 변경

Author: sowonhub

src/components/NavigationBar.jsx

@@ -43,14 +43,6 @@ export default function NavigationBar() {
 
       {/* <-------------------- 검색 결과 표시 */}
 
-      {searchKeyword && searchKeyword.length > 0 && (
-        <searchKeyword>
-          {searchKeyword.map((movie) => (
-            <p key={movie.id}>{movie.title}</p>
-          ))}
-        </searchKeyword>
-      )}
-
       <Buttons>
         <LoginBtn>로그인</LoginBtn>
         <SignupBtn>회원가입</SignupBtn>

src/data/hooks/useTmdbDetailData.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import axios from "axios";
 
-const apiToken = import.meta.env.VITE_TMDB_ACCESS_TOKEN;
+const apiToken = import.meta.env.VITE_TMDB_API_KEY;
 
 // <-------------------- function -------------------->
 

src/data/hooks/useTmdbKeywordData.js

@@ -1,12 +1,14 @@
 import { useEffect, useState } from "react";
 import axios from "axios";
 
-const apiToken = import.meta.env.VITE_TMDB_ACCESS_TOKEN;
+const apiToken = import.meta.env.VITE_TMDB_API_KEY;
 
 export default function useTmdbKeywordData(keyword) {
   const [search, setSearch] = useState([]);
 
   useEffect(() => {
+    console.log(keyword);
+
     if (!keyword) return;
 
     const options = {

src/data/hooks/useTmdbMainData.js

@@ -2,13 +2,13 @@ import { useEffect, useState } from "react";
 
 // <-------------------- function -------------------->
 
-export default function useTmdbMainData() {
+export default function useTmdbMainData(keyword) {
   const [tmdbMainData, setTmdbMainData] = useState([]);
 
   // <-------------------- API : popular
 
   useEffect(() => {
-    const apiToken = import.meta.env.VITE_TMDB_ACCESS_TOKEN;
+    const apiToken = import.meta.env.VITE_TMDB_API_KEY;
     const options = {
       method: "GET",
       headers: {
@@ -30,7 +30,7 @@ export default function useTmdbMainData() {
         setTmdbMainData(noAdultResData);
       })
       .catch((err) => console.error(err));
-  }, []);
+  }, [keyword]);
 
   // <-------------------- return -------------------->
 

src/data/hooks/useTmdbTopData.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import axios from "axios";
 
-const apiToken = import.meta.env.VITE_TMDB_ACCESS_TOKEN;
+const apiToken = import.meta.env.VITE_TMDB_API_KEY;
 
 // <-------------------- function -------------------->
 
@@ -27,7 +27,7 @@ export default function useTmdbTopData() {
         setTmdbTopData(res.data.results);
       })
       .catch((err) => console.error(err));
-  });
+  },[]);
 
   // <-------------------- return -------------------->
 

src/pages/MainPage.jsx

@@ -1,28 +1,31 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
-import Card from "../components/Card.jsx";
-import useTmdbTopData from "../data/hooks/useTmdbTopData.js";
-import useTmdbMainData from "../data/hooks/useTmdbMainData.js";
+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 NavigationBar from "../components/NavigationBar.jsx";
+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';
 
 // <-------------------- function -------------------->
 
 export default function MainPage() {
+  const [keyword, setKeyword] = useSearchParams();
   const tmdbTop = useTmdbTopData();
-  const tmdbMain = useTmdbMainData();
+  const query = keyword.get("keyword")?.trim();
+  const tmdbMain = query ? useTmdbKeywordData(query) : useTmdbMainData(query);
 
   // <-------------------- return -------------------->
 
   return (
     <>
-      <NavigationBar />
       <Container>
         <Top10>TOP 10 🏆</Top10>
         <Swiper