[프로젝트] Watcha Classic #Footer

Joah·2022년 7월 3일
0

프로젝트-Watcha Classic

목록 보기
12/15
post-thumbnail

Footer 만들기

생각보다 MainPage가 빨리 구현되어 다른 팀원들이 각자의 페이지를 진행하고 있을 때 간단한 Footer를 구현하기로 했다.

Watcha Pedia의 Footer는 Main Page, Detail Page 등 모든 페이지의 하단에 붙어있는 컴포넌트다.

시간 관계상 SCSS에 엄청난 노력을 쏟기 보다는 빨리 만들고 다른 팀원을 도와주거나 추가 기능 구현을 하기로!



우선 Router.jsFooter 컴포는터는 항상 하단에 고정되어 있다는 것을 명시한다.

//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는 없었다.



⛳ Long Story Short

Footer는 메인, 상세, 프로필, 보고싶어요 페이지에서 모두 잘 나타난다!
MainPage에 비해 상대적으로 금방 끝냈지만 Footer가 없다면 구조가 잡히지 않은 웹 사이트처럼 보인다. 일단 모든 데이터는 상수 데이터로 작성했다. 쉽게 바뀌지 않을 내용이라 판단했기 때문이다.
앞으로 남은 [보고싶어요] 페이지는 멘토님이 무한 스크롤 pagination을 구현해 보는 것이 어떻겠냐고 제안하셨다. 워..프로젝트 마감까지 이틀 남았지만...한 번 해보자!!!

profile
Front-end Developer

0개의 댓글