팀 프로젝트

Problems

Footer 위치

<상황 파악>

Layout으로 뿌려주는 Footer 컴포넌트의 위치가 의도대로 잡히지 않는상황.

본문이 차지하는 영역이 너무 작을 때는 Footer 가 그만큼 위로 올라오게 된다.

반면에 본문의 길이가 길어지면 Footer가 중간쯤에서 출력되는 난감한 상황.

const FooterContainer = styled.div`
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: #71d5c9;
    color: white;
    padding: 30px 0;
    display: flex;
    gap: 30px;
    justify-content: center;
`;

postion:absolute 와 bottom:0px 로는 해결할수 없는 상황인 것이 분명해 보인다.

<문제 해결>

먼저 본문이 차지하는 영역이 너무 짧은 경우부터 해결해 보자.

const Layout = () => {
    return (
        <>
            <Navbar />
            <Outlet />
            <Footer />
        </>
    );
};

Layout은 위 코드와 같이 구성되어 있고 <Outlet /> 부분이 본문이 표시되는 부분이다. 이 부분의 길이가 짧을때가 문제인데 <Outlet />에 직접 스타일을 적용하는것은 불가능해 보인다. 따라서 코드를 아래와 같이 수정.

const Layout = () => {
    return (
        <>
            <Navbar />
            <div
                style={{
                    height: 'auto',
                    minHeight: '100vh',
                }}
            >
                <Outlet />
            </div>
            <Footer />
        </>
    );
};

<Outlet />을 스타일을 부여하기 위한 목적의 div로 감싸주었고 그 div에 height:auto 와 minHeight:100vh를 설정. height:auto 로 인해 본문 내용이 늘어날때 해당 영역의 높이도 자동으로 늘어나게 될 것이며, minHeight:100vh 덕분에 본문 내용이 적을때도 최소한 화면 높이만큼의 높이는 차지하게 될 것이다.

그리고 나서 Footer의 css를 아래와 같이 변경

const FooterContainer = styled.div`
    position: relative;
    width: 100%;
    background-color: #71d5c9;
    color: white;
    padding: 30px 0;
    display: flex;
    gap: 30px;
    justify-content: center;
`;

위치를 설정하는 특별한 코드는 없다. position:relative 이기 때문에 그냥 일반적인 렌더링 위치에 뿌려질 것이다. 이미 Layout 에서 Footer가 뿌려질 위치는 지정해 주고 있기 때문에 별도로 absolute나 fixed 속성을 부여할 필요가 없는 것이다.

위 변경사항들이 적용된 모습은 아래와 같다.

본문의 내용이 길어져도 Footer는 항상 최하단에 들어가게되고,

이렇게 본문의 내용이 짧아도 본문 영역이 100vh만큼의 높이는 보장받기 때문에 Footer는 여전히 화면 최하단에 고정이 되게 된다.