3주차 미션 완료

mission/chapter03/mission_ch03/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

mission/chapter03/mission_ch03/eslint.config.js

@@ -34,6 +34,7 @@ export default [
         { allowConstantExport: true },
       ],
       'react/prop-types': 'off',
+      'no-unused-vars': ['warn', { 'varsIgnorePattern': 'React' }],
     },
   },
 ]

mission/chapter03/mission_ch03/package.json

@@ -14,6 +14,8 @@
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
+    "react-router-dom": "^6.27.0",
     "styled-components": "^6.1.13"
   },
   "devDependencies": {

mission/chapter03/mission_ch03/src/App.jsx

@@ -1,23 +1,50 @@
-//import React from 'react';
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import React from 'react';
+import {createBrowserRouter, RouterProvider} from "react-router-dom";
 import RootLayout from "./layout/root-layout";
+import HomePage from "./pages/home";
 import Login from "./pages/login";
 import Signup from "./pages/signup";
-import HomePage from "./pages/home";
-import Movies from "./pages/movies";
+import Movies from "./pages/movie";
+import MovieDetail from "./components/MovieDetail";
+import Search from './pages/search';
+
+const router = createBrowserRouter([
+  {
+      path: '/',
+      element: <RootLayout/>,
+      children: [
+          {
+              index: true,
+              element: <HomePage/>
+          },
+          {
+              path: 'login',
+              element: <Login/>
+          },
+          {
+            path: 'signup',
+            element: <Signup/>
+          },
+          {
+              path: 'movies',
+              element: <Movies/>
+          },
+          {
+            path: 'movies/:movieId',
+            element: <MovieDetail />
+          },
+          {
+            path: 'search',
+            element: <Search/>
+          }
+      ]
+  },
+
+])
 
 function App() {
   return (
-    <Router>
-      <Routes>
-        <Route path="/" element={<RootLayout />}>
-          <Route path="/" element={<HomePage />} />
-          <Route path="/login" element={<Login />} />
-          <Route path="/signup" element={<Signup />} />
-          <Route path="/movies" element={<Movies />} />
-        </Route>
-      </Routes>
-    </Router>
+    <RouterProvider router={router}/>
   );
 }
 

mission/chapter03/mission_ch03/src/components/CategoryList.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { MoviesGrid, MovieCard, MovieImage, MovieLabel } from "../styled/Movie.styled";
+
+const CategoryList = ({ categories }) => {
+  return (
+    <MoviesGrid>
+      {categories.map((category) => (
+        <Link
+          key={category.id}
+          to={category.endpoint} // Link의 to 속성에 엔드포인트 전달
+          style={{ textDecoration: 'none', color: 'inherit' }} // 기본 스타일 제거
+        >
+          <MovieCard>
+            <MovieImage src={category.imgSrc} alt={category.title} />
+            <MovieLabel>{category.title}</MovieLabel>
+          </MovieCard>
+        </Link>
+      ))}
+    </MoviesGrid>
+  );
+};
+
+export default CategoryList;

mission/chapter03/mission_ch03/src/components/MovieDetail.jsx

@@ -0,0 +1,29 @@
+// MovieDetail.js
+import React from "react";
+import { useParams } from "react-router-dom";
+import useCustomFetch from "../hooks/useCustomFetch";
+import { MovieDetailContainer, MovieTitle, MovieOverview, MoviePoster } from "../styled/MovieDetail.styled";
+
+const MovieDetail = () => {
+  const { movieId } = useParams(); // URL에서 movieId를 가져옴
+  const apiKey = import.meta.env.VITE_TMDB_API_KEY;
+  const { data: movies, isLoading, isError } = useCustomFetch(`https://api.themoviedb.org/3/movie/${movieId}?api_key=${apiKey}&language=ko-KR`);
+  if (isLoading) return <div>Loading...</div>;
+  if (isError) return <div>Error loading movie details.</div>;
+
+  // movie가 undefined가 아닌 경우에만 렌더링
+  return (
+    <MovieDetailContainer>
+      {movies.results?.map((movie) => (
+        <div key={movie.id}>
+          <MoviePoster src={`https://image.tmdb.org/t/p/w300${movie.poster_path}`} alt={movie.title} />
+          <MovieTitle>{movie.title}</MovieTitle>
+          <MovieOverview>{movie.overview}</MovieOverview>
+        </div>
+      ))}
+    </MovieDetailContainer>
+
+  );
+};
+
+export default MovieDetail;

mission/chapter03/mission_ch03/src/components/MovieList.jsx

@@ -1,15 +1,27 @@
-//import React from 'react';
-import MovieItem from './MovieItem';
-import { MovieListContainer } from './MovieList.styled';
+import React from "react";
+import { Link } from "react-router-dom";
+import { MoviesGrid, MovieCard, MovieImage, MovieTitle } from "../styled/Movie.styled";
 
-function MovieList({ movies }) {
+const MovieList = ({ movies }) => {
   return (
-    <MovieListContainer>
+    <MoviesGrid>
       {movies.map((movie) => (
-        <MovieItem key={movie.id} movie={movie} />
+        <Link
+          key={movie.id}
+          to={`/movies/${movie.id}`} // 각 영화의 ID를 포함한 경로로 링크 설정
+          style={{ textDecoration: 'none', color: 'inherit' }}
+        >
+          <MovieCard>
+            <MovieImage
+              src={`https://image.tmdb.org/t/p/w200${movie.poster_path}`}
+              alt={movie.title}
+            />
+            <MovieTitle>{movie.title}</MovieTitle>
+          </MovieCard>
+        </Link>
       ))}
-    </MovieListContainer>
+    </MoviesGrid>
   );
-}
+};
 
 export default MovieList;

mission/chapter03/mission_ch03/src/components/navbar.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { NavbarContainer, Logo, NavLinks, NavButton } from "./Navbar.styled";
+import { NavbarContainer, Logo, NavLinks, NavButton } from "../styled/Navbar.styled";
 
 const Navbar = () => {
   return (

mission/chapter03/mission_ch03/src/components/sidebar.jsx

@@ -1,11 +1,19 @@
 import React from "react";
-import { SidebarContainer, SidebarLink } from "./Sidebar.styled";
+import { SidebarContainer, SidebarLink } from "../styled/Sidebar.styled";
+import { IoSearch } from "react-icons/io5";
+import { PiFilmSlateFill } from "react-icons/pi";
 
 const Sidebar = () => {
   return (
     <SidebarContainer>
-      <SidebarLink to="/search">찾기</SidebarLink>
-      <SidebarLink to="/movies">영화</SidebarLink>
+      <SidebarLink to="/search">
+      <IoSearch size={18} /> {/* 찾기 아이콘 */}
+      찾기
+      </SidebarLink>
+      <SidebarLink to="/movies">
+      <PiFilmSlateFill size={18} /> {/* 영화 아이콘 */}
+      영화
+      </SidebarLink>
     </SidebarContainer>
   );
 };

mission/chapter03/mission_ch03/src/hooks/useCustomFetch.js

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+import axios from "axios";
+
+const useCustomFetch = (url) =>{
+    const [data, setData] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isError, setIsError] = useState(false);
+    useEffect(()=>{
+        const fetchData = async()=>{
+            setIsLoading(true);
+            try{
+                const response = await axios.get(url);
+                setData(response.data);
+            }
+            catch (error){
+                setIsError(error);
+            }
+            finally{
+                setIsLoading(false);
+            }
+        }
+        fetchData();
+    },[url]);
+
+    return {data,isLoading,isError};
+}
+
+export default useCustomFetch;

mission/chapter03/mission_ch03/src/index.css

@@ -0,0 +1,3 @@
+body{
+  margin : 0;
+}