MOVIE 프로젝트 레이아웃 완성 / API 연결 / 라우팅 처리

[givemethatsewon]

• Styled-Components를 활용하여, 스타일링을 진행하겠습니다. 이전에, className 또는 inline-style로 진행했더라면, 해당 내용을 Styled-Components로 수정해주세요!
• 먼저, root-layout을 잡아주세요
  • navbar를 최상단에 먼저 배치해주세요.
  • sidebar와 Outlet을 가로축으로 배치해주세요.

navbar 구현

• 로고를 만들어주세요, 로고를 클릭했을 시, 홈페이지로 ‘/’ 이동하여야 합니다.
• 로그인과 회원가입 버튼을 만들어주세요.

  • 버튼이 hover 되었을 시, 색상이 달라지게 UX를 개선해주세요!

  • 로그인 버튼을 클릭시 ‘/login’ 페이지로 이동합니다.

  • 회원가입 버튼을 클릭시 ‘/signup’ 페이지로 이동합니다.

sidebar 구현

• react-icons 라이브러리를 활용하여, 비슷한 아이콘을 활용해주세요!

  https://react-icons.github.io/react-icons/

• 찾기 버튼 클릭시, /search 경로로 이동하며, 아래와 같은 화면을 보이게 해주세요.

• 영화 버튼 클릭시, 아래와 같은 화면이 보이도록 해주세요! 이미지는, 자유롭게 사용하시면 좋습니다!

카테고리 페이지

• 현재 상영중인 박스를 클릭하면 /movies/now-playing 페이지로 이동 후, 실제 NowPlaying 영화 데이터를 불러오기
• 인기있는 박스를 클릭하면 /movies/popular 페이지로 이동 후, 실제 Popular 영화 데이터를 불러오기
• 높은 평가를 받은 박스를 클릭하면 /movies/top-rated 페이지로 이동 후, 실제 TopRated 영화 데이터를 불러오기
• 개봉 예정중인 박스를 클릭하면 /movies/up-coming 페이지로 이동 후, 실제 UpComing 영화 데이터를 불러오기
• 각기 다른, 요소의 영화 데이터들이 아래와 같이 불러와진다면 성공입니다.

• 카테고리 클릭 시 각기 다른 영화 정보 로딩