🚷 Blocker

Footer 컴포넌트를 Router 파일에 내용(Routes)태그 밑에 배치할 때 내용 바로 밑에 렌더링되어 문제가 생겼다.

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Nav from './pages/Nav/Nav';
import MyPage from './pages/MyPage/MyPage';
import Footer from './pages/Footer/Footer';

function Router() {
  return (
    <BrowserRouter>
      <Nav />
      <Routes>
        <Route path="/mypage" element={<MyPage />} />
      </Routes>
      <Footer />
    </BrowserRouter>
  );
}

export default Router;

⚙️ 해결

Footer 컴포넌트의 최상단 class 선택자에
position: relative;
transform: translateY(100%);
를 추가하였다.

근데 Route의 내용이 짧으면(ex 로그인페이지) Footer가 하단에 고정이 안된다.
transform: translateY(100%); 가 footer의 높이만큼 내용컴포넌트 아래에 위치하겠다는건데 그게 웹사이트 크기가 크고 내용의 높이가 작으면 웹을 다 채우지 못하기 때문이다. 이럴 경우 내용 컴포넌트에 margin-bottom을 주면 된다.
margin-bottom까지 포함한 Footer/Nav 및 내용 컴포넌트가 웹의 크기를 다 채우거나 넘치면 footer가 웹의 최하단에 고정된다.

Position: relative와 absolute을 이용하여 footer를 하단에 고정할 수 있다. 참고사이트
근데 이 방법을 쓰면 모든 내용 컴포넌트마다 position relative를 설정해주어야한다.
이러면 내용 컴포넌트 내에서 다른 선택자에 position 속성이 있을 경우 레이아웃에 영향을 끼칠 수가 있어서 이 방법은 보류해두었다.