Header Layout

useFlexLayoutControl로 header container를 제어합니다. scroll 방향에 따라 header를 접고, route 변경 시 현재 노출 비율을 유지합니다.

root/head 구조

header를 제어하려면 header가 FlexLayoutContainer로 구성되어 있어야 합니다. 보통 root layout 안에 head container를 두고, 나머지 화면을 body container로 구성합니다.

tsx

<FlexLayout layoutName="root" direction="column">
  <FlexLayoutContainer containerName="head">
    <Header />
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="body">
    {children}
  </FlexLayoutContainer>
</FlexLayout>

Header를 제어

Header 컴포넌트에서 현재 pathname과 hide 조건을 전달합니다. 반환되는 contentRef는 실제 header content wrapper에 연결하십시오.

tsx

"use client";

import { useFlexLayoutControl } from "@byeolnaerim/flex-layout";
import { usePathname } from "next/navigation";

export default function HeaderShell() {
  const pathname = usePathname();

  const hideHeaderByRoute =
    pathname.startsWith("/editor") || pathname.startsWith("/viewer");

  const { contentRef } = useFlexLayoutControl({
    layoutName: "root",
    containerName: "head",
    pathname,
    hideContainer: hideHeaderByRoute ? true : null,
    enableScrollHideOnScroll: true,
    containerSizeKeyName: "__root_headSize",
  });

  return (
    <header ref={contentRef}>
      <GlobalNavigation />
    </header>
  );
}

scroll로 접기

enableScrollHideOnScroll을 true로 설정하면 아래로 스크롤할 때 header container가 접히고, 위로 스크롤하거나 page top으로 돌아오면 다시 펼쳐집니다.

height를 직접 조작하지 않음

동작은 height, display, visibility를 직접 바꾸는 방식이 아닙니다. 대상 container의 flex-grow 값을 변경합니다.

window scroll layout

body의 직계자손인FlexLayout을 scrollMode="window"로 사용한다면 FlexLayoutDynamicHeight로 document/body 높이를 함께 동기화하는 구성이 필요합니다. 그렇지 않다면 헤더는 리사이징 되지 않습니다. 현재 사이트는 FlexLayoutDynamicHeight 컴포넌트가 scroll height 안정화하고, header를 접는 동작은 useFlexLayoutControl이 담당하고 있습니다.

route 조건으로 숨기기/표시하기

특정 route에서 header를 명시적으로 숨기거나 표시해야 한다면 해당 조건을 hideContainer로 전달합니다. 값이 true이면 header container를 접고, 값이 false이면 header container를 펼칩니다. 두 경우 모두 scroll 기반 자동 접기/펼치기는 비활성화됩니다.

tsx

const pathname = usePathname();

const shouldForceHideHeader =
  pathname.startsWith("/editor") || pathname.startsWith("/viewer");

const { contentRef } = useFlexLayoutControl({
  layoutName: "root",
  containerName: "head",
  pathname,
  hideContainer: shouldForceHideHeader ? true : null,
  enableScrollHideOnScroll: true,
  containerSizeKeyName: "__root_headSize",
});

hideContainer는 tri-state 값

true는 강제 숨김,false는 강제 표시입니다.null 또는undefined일 때만enableScrollHideOnScroll 설정에 따라 scroll 기반 자동 접기/펼치기가 동작합니다.

Header size 사용

header의 현재 노출 size가 필요하면 같은 containerSizeKeyName으로 state를 생성해 사용합니다.

tsx

import { createContainerSizeState } from "@byeolnaerim/flex-layout";

const [, , useHeaderSize] = createContainerSizeState({
  containerSizeKeyName: "__root_headSize",
});

function ContentLayout() {
  const headerSize = useHeaderSize();

  return (
    <main style={{ paddingTop: headerSize }}>
      Content
    </main>
  );
}

params

layoutName

제어할 container가 들어 있는 decomposition layout 이름입니다. header 예시에서는 root를 사용합니다.

containerName

flex-grow로 제어할 decomposition container 이름입니다. header 예시에서는 head를 사용합니다.

pathname

route 변경을 감지하고 현재 main-axis 노출 비율을 새 route에 동기화하는 데 사용합니다.

hideContainer

대상 container의 표시 상태를 명시적으로 제어하는 tri-state 값입니다. true이면 강제 숨김, false이면 강제 표시, null/undefined이면 명시적 제어 없이 enableScrollHideOnScroll 설정을 따릅니다.

enableScrollHideOnScroll

hideContainer가 null/undefined일 때 scroll 방향에 따라 대상 container를 자동으로 접거나 복원할지 여부입니다. hideContainer가 true 또는 false이면 이 설정은 적용되지 않습니다.

containerSizeKeyName

측정된 container main-axis size를 저장할 global-rx-state key입니다.

containerSizeStorageOptions

container size state에 적용할 global-rx-state storage 옵션입니다.

return value

contentRef

실제 content size를 측정할 wrapper에 연결하는 ref입니다.