[리액트 실습] 간단 영화 앱 만들기 6 (헤더 만들기)

[리액트 실습] 간단 영화 앱 만들기 5 (React Routing)

5에서 이어진다 ~ 

 

이번 포스팅에서는 '헤더'부분에 대해서 코드를 짜 볼 예정이다. 

아마 마켓컬리 클론코딩 헤터 포스팅과 유사한 부분이 많을 것이다. 

[리액트 실습] 마켓컬리 클론코딩 1. 헤더 만들기

---

1.  페이지 만들기 

우선 이동할 페이지를 만들어야한다. 

src에 여러 페이지를 넣어주고 ! 

 

홈 화면, 영화, TV프로그램, 등장인물 페이지를 만들어주었다. 

 

 

App.js 

import { Route,Routes } from "react-router-dom";
import { BrowserRouter } from "react-router-dom";
import Home from "./pages/Home"
import Movies from "./pages/Movies"
import TV from "./pages/Tv"
import Celebrity from "./pages/Celebrity";
import NotFound from "./pages/NotFound";
import Header from "./componenets/Header";
import MovieDetail from "./pages/MovieDetail";

function App() {
  return (
    <div className="root-wrap">
    <BrowserRouter>
    <Header/>
    <Routes>
      <Route path="/" element={<Home/>}/>
      <Route path="/movie" element={<Movies/>}/>
      <Route path ="/movie/:title" element={<MovieDetail />} />
      
      <Route path="/tv" element={<TV/>}/>
      <Route path="/person" element={<Celebrity/>}/>
      <Route path="/*" element={<NotFound/>}/>
    </Routes>
    </BrowserRouter>
    </div>
  );
}

export default App;

App.js에서 앞서 포스팅했던 <BrowserRoute>, <Routes>, <Route>컴포넌트를 통해 페이지들을 지정해줄 것이다. 

---

2. 페이지

홈 페이지

import React from 'react'

export default function home() {
  return (
    <div className='page-container' style={{fontSize:'32pxs'}}>
      <div className = "">

      </div>
    
    
    </div>

  )
}

인물 페이지 

import React from 'react'

export default function Celebrity() {
  return (
    <div className='page-container' style={{fontSize:'32pxs'}}>Celebrity</div>
  )
}

TV페이지 

import React from 'react'

export default function Tv() {
  return (
    <div>Tv</div>
  )
}

Movie페이지

import React from 'react'
import { dummy } from '../movieDummy'
import Movie from '../componenets/Movie';

export default function movies() {
  return (
    <div className='page-container' style={{fontSize:'32pxs'}}>
      
      <div>
        <div className="movies-container">
          {dummy.results.map((item)=>{
            return(
              <Movie
              title = {item.title}
              poster_path ={item.poster_path}
              vote_average = {item.vote_average}

              />
            );
          })}


        </div>
      </div>
      
    </div>
  )
}

NotFound 페이지 

지정한 경로를 벗어날 경우 

import React from 'react'
import { useNavigate } from 'react-router-dom'

export default function NotFound() {
    const navigate = useNavigate();

    const onClickButton = () => {
        navigate('/');
    }
  return (
    <div className='page-container'>
        <div style={{
            margin : '60px',
            fontSize : '48px',
            fontWeight:'bold',marginBottomo:'32px'

        }}>해당페이지를 찾지못했습니다.</div>
        <div style={{
            fontSize:"32px",
            lineWeight:"1.6"

        }}>주소가 잘못되었거나 더 이상 제공되지 않는 페이지입니다. </div>
        <div 
            onClick={onClickButton}
            style={{
            fontSize :"32px",
            lineWeight:1.6,
            color:'red',
            cursor:'pointer'

        }}
        >메인페이지로 이동</div>
    
    
    </div>
  )
}​

이 페이지에서는 useNavigate를 사용해주었다. 

---

3. 헤더 버튼에서 페이지 이동 

import React from 'react'
import { Link } from 'react-router-dom'

export default function Header() {
  return (
    <div className='header-container'>
        <div className="header-wrap">
            <div className='header-left-wrap'>
                <Link style={{display:'flex',alignItems:'center'}}to="/">
                    <img 
                    style ={{width : "154px", height:"20px"}}
                    src ="https://www.themoviedb.org/assets/2/v4/logos/v2/blue_short-8e7b30f73a4020692ccca9c88bafe5dcb6f8a62a4c6bc55cd9ba82bb2cd95f6c.svg"
                    alt="로고"/>
                </Link>
                <ul>
                    <li>
                        <Link className='header-nav-item' to="/movie">
                            영화
                        </Link>
                    </li>
                    <li>
                        <Link className='header-nav-item' to="/tv">
                            TV 프로그램 
                        </Link>
                    </li>
                    <li>
                        <Link className='header-nav-item' to='/person'>
                            인물
                        </Link>
                    </li>


                </ul>
            </div>


        </div>

    </div>

  )
}

<Link>로 경로를 지정해주었다. 

.header-container{
  background-color:rgba(3,37,65,1);
}

.header-wrap{
  height:64px;
  max-width: 1400px;
  margin: 0 auto;

  border:1px red;
  display: flex;
  align-items: center;

}

.header-left-wrap{
  display: flex;
}

.header-left-wrap ul{
  display: flex;
  margin-left:16px;
}

.header-left-wrap{
  margin-right: 20px;
}

.header-nav-item{
  color:white;
  text-decoration: none;
  font-weight: 600;
  padding:8px;
}

.page-continer{
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 0;
}

/* Header 끝  */

보고 배운대로 CSS도 해주면 끝 ! 

 

 

 

 

다음 포스팅에서는 디테일 페이지에 대해 작성해보겠다.