생각보다 MainPage가 빨리 구현되어 다른 팀원들이 각자의 페이지를 진행하고 있을 때 간단한 Footer를 구현하기로 했다.
Watcha Pedia의 Footer는 Main Page, Detail Page 등 모든 페이지의 하단에 붙어있는 컴포넌트다.
시간 관계상 SCSS에 엄청난 노력을 쏟기 보다는 빨리 만들고 다른 팀원을 도와주거나 추가 기능 구현을 하기로!
우선 Router.js에 Footer 컴포는터는 항상 하단에 고정되어 있다는 것을 명시한다.
//Router.js
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Nav from "./components/Nav/Nav";
import Footer from "./components/Footer/Footer";
import Main from "./pages/Main/Main";
import Detail from "./pages/Details/Detail";
import Profile from "./pages/Profile/Profile";
import Cart from "./pages/MovieCart/Cart";
const Routers = () => {
return (
<BrowserRouter>
<Nav />
<Routes>
<Route path="/" element={<Main />} />
<Route path="/films/:id" element={<Detail />} />
<Route path="/profile" element={<Profile />} />
</Routes>
<Footer />
</BrowserRouter>
);
};
export default Routers;
<Nav />
컴포넌트는 다른 팀원이 구현 중이다. Navigation Bar 또한 Footer와 마찬가지로 항상 상단에 고정되어 있는 영역이다.
따라서 pages
폴더가 아닌 src
폴더 안에 공통적인 component
폴더로 따로 생성하여 구현한다.
대부분 JSX, SCSS로 완성이 되었기 때문에 따로 어려웠거나 Blocker는 없었다.
Footer는 메인, 상세, 프로필, 보고싶어요 페이지에서 모두 잘 나타난다!
MainPage에 비해 상대적으로 금방 끝냈지만 Footer가 없다면 구조가 잡히지 않은 웹 사이트처럼 보인다. 일단 모든 데이터는 상수 데이터로 작성했다. 쉽게 바뀌지 않을 내용이라 판단했기 때문이다.
앞으로 남은 [보고싶어요] 페이지는 멘토님이 무한 스크롤 pagination을 구현해 보는 것이 어떻겠냐고 제안하셨다. 워..프로젝트 마감까지 이틀 남았지만...한 번 해보자!!!