Footer

모바일 애플리케이션 개발에서 푸터는 화면의 하단에 위치하는 요소로, 사용자가 앱을 사용할 때 중요한 정보를 제공합니다.

숏컨텐츠 푸터

화면 안에서 컨텐츠가 화면을 다 채우지 않아도, 푸터가 바닥에 붙어있는 경우 입니다.

이경우 flex:1 속성을 줘서 컨텐츠 부분이 전체 내용을 차지하도록 해야 합니다.

롱컨텐츠 푸터

화면안에서 컨텐츠가 이미 화면의 크기를 넘어서, 푸터가 컨텐츠 밑에 있는 경우입니다.

이경우, 스크롤을 하지 않은 첫 화면에서 푸터가 보이지 않습니다. 컨텐츠를 다 지나고 나서야 푸터가 보이는 경우입니다.

 "use client";

// 1. 숏컨텐츠푸터 + 롱컨텐츠푸터
export function Footer({ children, isFixed }) {
  return (
    <>
      {/* 1. 숏컨텐츠라면? 부모 사이즈를 채우도록 (flex: 1) 최대로 늘려줌 */}
      {/* 2. 롱컨텐츠라면? 이미 부모 사이즈를 넘었으므로 (flex: 1) 무시됨 */}
      <div style={{ flex: 1 }} />

      <div
        style={{
          height: "3.125rem", // 50px
          width: "100vw",
          backgroundColor: "skyblue",

          position: isFixed ? "fixed" : "relative",
          ...(isFixed ? { bottom: 0 } : {}),
        }}
      >
        {children}
      </div>
    </>
  );
}

어떠한 푸터를 사용하던, 정답은 없습니다.

구현하고싶은 기능이나, 도메인 성격상 유저 친화적인 방법을 선택하여 구현하면 됩니다. ☺️