เลย์เอาต์หัวข้อ

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

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

"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>
  );
}

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",
});

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

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

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

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