[Team Project] Bid Panda ep.1

✶ 항해99 16기 3조
팀 프로젝트 Bid Panda의 FE 개발일지

Issue ▸
모바일 브라우져를 기반으로 시작하게 된 기획이라, 실제 모바일 디바이스의 화면비를 고정 값으로 두고, 스크린에 가상의 배경을 두고 작업해야 했다. 결국 우리의 프로젝트 UI는 공통의 프레임과 다소 고정된 헤더 & 풋터를 가지고 있어야만 했다. 하지만 이 레이아웃을 그저 별도의 컴포넌트로 만들어, 필요한 페이지 마다 하나하나 붙이는 건 어려운 일이었고, 비효율적인 일 이었다. 팀원인 지원님께서 이 부분을 이렇게 해결했다.

Solve :

import { Outlet } from "react-router";
import Footer from "./components/layouts/Footer";
import Header from "./components/layouts/Header";

function App() {
  return (
    <>
      <div className="bg-gray-300 w-screen h-screen fixed flex justify-center">
        <div className="bg-white w-[390px] h-[844px] rounded-[37px] mt-[50px]">
          <div className="h-[5%]">
            <Header />
          </div>
          <div className="h-[83%]">
            <Outlet />
          </div>
          <div className="h-[15%]">
            <Footer />
          </div>
        </div>
      </div>
    </>
  );
}
export default App;

우리는 어딘가 모두를 감싸고 있는 가장 상위 객체를 찾아야 했다. 우리의 디렉토리에는 React Router 까지 있었기 때문에, 교통정리를 깔끔하게 해야했다. App.tsx에서 Router Outlet을 import해 말하자면 화면의 Body에 해당하는 부분의 비중을 고정하였고, 그에 비례하도록 별도로 개발된 Header와 Footer 컴포넌트를 상하로 배치하였다. 하드코딩 없이 모든 화면에 우리에게 필요한 가상 배경과 모바일 화면 프레임, 버튼 독을 적용할 수 있었다.