@teamsparta/stack-header

Stack 디자인 시스템의 Header 컴포넌트. 페이지 최상단에 위치하며 좌·우 슬롯, titleText(center/left 정렬), divider, progress bar를 지원합니다.

코드 위계 (Figma ↔ src)

| Figma 노드 / 부위 | src 위치 | | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | Header wrapper | Header.style.ts (wrapperBaseCss + wrapperSizeCss) — full width, height 60/50, zIndex.popover | | contents (inner) | Header.style.ts (contentsBaseCss + contentsSizeCss) — padding, max-width | | left slot (icon + addon) | Header.tsx 좌측 영역 + leftSideCss, iconSlotCss | | right slot (addon + icon) | Header.tsx 우측 영역 + rightSideCss, iconSlotCss | | titleText | Header.tsx title + <Text font="bodyB"> — center: 좌·우 슬롯 flex:1 균등 분배로 정중앙(순수 CSS), left: leftIcon ↔ leftAddon 사이 | | divider | Header.style.ts (dividerCss) — vars.line.nonClickable | | progressBar track + fill | Header.style.ts (progressTrackCss, progressFillCss) | | dev-mode misuse warning | warnHeaderDevMisuse.ts |

사용 예시

import { Header } from "@teamsparta/stack-header";

<Header
  titleText='페이지 제목'
  leftIcon={<MenuIcon />}
  rightIcon={<CloseIcon />}
  progress={42}
/>;

의존성

Stack DS의 다른 컴포넌트와 마찬가지로 root에 <StackProvider>를 두는 것을 권장합니다. 없어도 default breakpoint(mobile:0, tablet:768)로 동작합니다.

import { StackProvider } from "@teamsparta/stack-core";

<StackProvider>
  <App />
</StackProvider>;

sticky 헤더 패턴

Header는 "페이지 최상단에 위치하는 컨테이너"이므로 기본적으로 sticky가 켜져 position: sticky; top: 0으로 상단에 고정됩니다.

// 기본 — 스크롤 시 상단 고정
<Header titleText="페이지 제목" />

// 고정이 불필요하면 끄기 (position: relative) — 모달 내부 헤더, 섹션 경계 헤더 등
<Header titleText="페이지 제목" sticky={false} />

Header는 position: sticky(또는 sticky={false} 시 relative)로 stacking context를 만들고 zIndex.popover (1000)을 적용하므로 일반 페이지 콘텐츠 위에 자연스럽게 표시됩니다. (Tooltip/Modal은 zIndex.overlay (10000)로 Header 위에 표시됩니다.)

자세한 가이드는 Storybook Components/Header/Introduction 페이지를 참고하세요.