mission : submit week3 mission(완성본)HomePage

mission/chapter03/mission01/.gitignore

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

mission/chapter03/mission01/src/App.jsx

@@ -5,14 +5,15 @@ import CategoryPage from "./pages/categoryPage";
 import SearchPage from "./pages/searchPage";
 import LoginPage from "./pages/loginPage";
 import SignupPage from "./pages/signupPage";
+import HomePage from "./pages/homePage";
 
 const router = createBrowserRouter([
     {
         path: '/',
         element: <RootLayout/>,
         children: [
             {   index:true,
-                element : <MoviesPage/>
+                element : <HomePage/>
             },
             {
                 path: 'search',
@@ -30,6 +31,11 @@ const router = createBrowserRouter([
                 path: 'signup',
                 element: <SignupPage/>
             }
+            ,
+            {
+                path: 'movies/:category',
+                element: <MoviesPage/>
+            }
         ]
     }
 ])

mission/chapter03/mission01/src/components/categoryCard/categoryCard.jsx

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+
+
+const CategoryCard = ({title})=>{
+    return(
+        <CardDiv>
+            <CardSpan>{title}</CardSpan>
+        </CardDiv>
+    )
+
+}
+
+export default CategoryCard;
+
+const CardDiv = styled.div`
+    width : 200px;
+    height : 100px;
+    background-color : white;
+    border-radius: 10px;
+    display : flex;
+    align-items : flex-end;
+    &:hover{
+        transform: scale(1.05);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); 
+    }
+`
+const CardSpan = styled.span`
+    background-color: grey;
+    color: white;
+    opacity: 0.5;
+    border-radius: 5px;
+    margin :10px 10px 10px 10px;
+    padding : 0px 3px 3px 3px;
+    vertical-align : bottom;
+`

mission/chapter03/mission01/src/components/moviePoster.css → mission/chapter03/mission01/src/components/moviePoster/moviePoster.css

@@ -1,15 +1,23 @@
   .movie_item{
     display: flex;
-    height: 240px;
+    flex-direction: column;
+    height: 300px;
     width: 160px;
     position: relative;
+    overflow: hidden;
+  }
+  .movie_item span{
+    font-size: 15px;
+  }
+  .movie_item p{
+    font-size: 10px;
+    margin-top: 2px;
   }
   .poster_img{
     width: 100%;
-    height: 100%;
+    height: 80%;
     object-fit: cover;
     border-radius: 10px;
-
   }
   .poster_hover{
     width: 100%;

mission/chapter03/mission01/src/components/moviePoster.jsx → mission/chapter03/mission01/src/components/moviePoster/moviePoster.jsx

@@ -1,10 +1,12 @@
 import "./moviePoster.css"
 
 const MoviePoster = (props)=>{
-    const {poster_path} = props
+    const {poster_path, title, release_date} = props
     return (
         <div className='movie_item'>
           <img className='poster_img' src={`https://image.tmdb.org/t/p/w500${poster_path}`}/>
+          <span>{title}</span>
+          <p>{release_date}</p>
           <div className='poster_hover'/>
         </div>
       )

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

@@ -0,0 +1,41 @@
+import {Link} from "react-router-dom";
+import styled from "styled-components";
+
+const Navbar = () => {
+    return (
+        <NavContainer>
+            <Link to={'/'}><Logo>YONGCHA</Logo></Link>
+            <div>
+            <Link to={'/login'}><StyledButton color={'#111'}>로그인</StyledButton></Link>
+            <Link to={'/signup'}><StyledButton color={'#111'}>회원가입</StyledButton></Link>
+            </div>
+        </NavContainer>
+    );
+};
+
+export default Navbar;
+
+const NavContainer = styled.div`
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    background-color: #1b1b1b;
+    align-items: center;
+`
+const StyledButton = styled.button`
+    background-color: ${props => props.color};
+    border: none;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 5px;
+    margin-left: 10px;
+    cursor: pointer;
+    font-size: 16px;
+    &:hover {
+     background-color: #ff007c;
+    }
+`
+const Logo = styled.h2`
+    color: #ff007c;
+    padding-left : 20px;
+`

mission/chapter03/mission01/src/components/sidebar/sidebar.css

@@ -0,0 +1,17 @@
+ ul li {
+    color: white;
+    text-decoration: none;
+    font-size: 18px;
+    display: block;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    transition: background-color 0.3s;
+}
+ul{
+    padding-left: 20px;
+    padding-right: 0px;
+}
+ul li:hover{
+    background-color: #333;
+    border-radius: 5px;
+}

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

@@ -0,0 +1,25 @@
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+import searchIcon from "./icon/search.png"
+import movieIcon from "./icon/movie.png"
+import "./sidebar.css"
+const SideBar = () => {
+    return (
+        <SideBarContainer>
+            <ul className = "sidebar" >
+                <Link to={'/search'}><li><img src={searchIcon} width={20} height={20}/>찾기</li></Link>
+                <Link to={'/movies'}><li><img src={movieIcon} width={20} height={20}/>영화</li></Link>
+            </ul>
+        </SideBarContainer>
+    );
+};
+
+export default SideBar;
+
+const SideBarContainer = styled.div`
+    dispaly: flex;
+    height: 100vh;
+    background-color: #1b1b1b;
+    width: 15%;
+   
+`

mission/chapter03/mission01/src/layout/root-layout.jsx

@@ -1,6 +1,6 @@
 import {Outlet} from "react-router-dom";
-import Navbar from "../components/navbar";
-import SideBar from "../components/sidebar";
+import Navbar from "../components/navbar/navbar";
+import SideBar from "../components/sidebar/sidebar";
 import styled from "styled-components";
 
 const RootLayout = () => {
@@ -22,4 +22,6 @@ const BoxLayout = styled.div`
     display: flex;
     flex-direction: row;
     width: 100vw;
+    background-color: #111;
+    color: white;
 `

mission/chapter03/mission01/src/pages/categoryPage.jsx

@@ -1,7 +1,37 @@
+import { Link } from "react-router-dom";
+import CategoryCard from "../components/categoryCard/categoryCard";
+import styled from "styled-components";
+
+const categoryList = [
+    { title : "현재 상영 중인", value : "now-playing"},
+    { title : "인기 있는", value : "popular"},
+    { title : "높은 평가를 받은", value : "top-rated"},
+    { title : "개봉 예정중인", value : "up-coming"}
+
+]
+
 const CategoryPage = ()=>{
     return(
-        <h3>카테고리</h3>
+        <CategoryContainer>
+            <h2>카테고리</h2>
+            <CateListBox>
+                {categoryList.map((category)=>(
+                    <Link to={`/movies/${category.value}`} key={category.value}><CategoryCard title = {category.title}/></Link>
+                ))}
+            </CateListBox>
+        </CategoryContainer>
     )
 }
 
-export default CategoryPage;
+export default CategoryPage;
+
+const CategoryContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    padding-left: 15px;
+`
+const CateListBox = styled.div`
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+`

mission/chapter03/mission01/src/pages/homePage.jsx

@@ -0,0 +1,7 @@
+const HomePage = ()=>{
+    return(
+        <h2>홈 페이지</h2>
+    )
+}
+
+export default HomePage;

mission/chapter03/mission01/src/pages/loginPage.jsx

@@ -1,6 +1,6 @@
 const LoginPage = ()=>{
     return(
-        <h3>로그인 페이지</h3>
+        <h2>로그인 페이지</h2>
     )
 }
 

mission/chapter03/mission01/src/pages/moviesPage.jsx

@@ -1,31 +1,40 @@
 import { useState, useEffect } from 'react'
-import MoviePoster from '../components/moviePoster.jsx';
+import MoviePoster from '../components/moviePoster/moviePoster.jsx';
 import './moviesPages.css'
 import axios from "axios";
+import { useParams } from 'react-router-dom';
+
+const APIurl={
+  "now-playing" : 'https://api.themoviedb.org/3/movie/now_playing?language=kr-KR&page=1',
+  "popular" : 'https://api.themoviedb.org/3/movie/popular?language=kr-KR&page=1',
+  "top-rated" : 'https://api.themoviedb.org/3/movie/top_rated?language=kr-KR&page=1', 
+  "up-coming" :'https://api.themoviedb.org/3/movie/upcoming?language=kr-KR&page=1'
+}
 
 const MoviesPage = () => {
     const [movies, setMovies] = useState([]);
-
+    const {category} = useParams();
     useEffect(() => {
         const getMovies = async () => {
-            const movies = await axios.get(`https://api.themoviedb.org/3/movie/popular?language=en-US&page=1`, {
+            const movies = await axios.get(APIurl[category], {
                 headers: {
-                    Authorization: `Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI3Yzk1MjQ3ZGU3NDUxMzY0MjM0MmE2MTc4ODQzOWYzNiIsIm5iZiI6MTcyODQ3OTkwOS44MDczNjEsInN1YiI6IjY3MDY3YmFkNTk3YzEyNmYwN2RkYzRhYSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.56L6fv17OgkRqftv2BLlKCJiw3-4w9Ym_g_sFhPyP-E`
+                    Authorization: `Bearer ${import.meta.env.VITE_TMDB_ACCESS_TOKEN}`
                 }
             })
             setMovies(movies);
         }
         getMovies()
-    }, []);
+    }, [category]);
 
 
     return (
       <>
         <div className="movie_poster_list">
           {movies.data?.results.map((movie) => (
-              <MoviePoster poster_path={movie.poster_path}/>
+              <MoviePoster poster_path={movie.poster_path} 
+                          title = {movie.title} 
+                          release_date = {movie.release_date}/>
           ))}
-          {console.log(movies)}
         </div>
       </>
     )

mission/chapter03/mission01/src/pages/moviesPages.css

@@ -2,7 +2,8 @@
     display: flex;
     flex-wrap: wrap;
     width: 100%;
-    gap: 10px;
-    margin-left: 10px;
-    justify-content: center; 
+    gap: 15px;
+    margin-left: 15px;
+    margin-top: 15px;
+
   }

mission/chapter03/mission01/src/pages/searchPage.jsx

@@ -1,6 +1,6 @@
 const SearchPage = ()=>{
     return(
-        <h3>검색 페이지 야호~!</h3>
+        <h2>검색 페이지 야호~!</h2>
     )
 }
 

mission/chapter03/mission01/src/pages/signupPage.jsx

@@ -1,6 +1,6 @@
 const SignupPage = ()=>{
     return(
-        <h3>회원가입 페이지</h3>
+        <h2>회원가입 페이지</h2>
     )
 }