# Page Banner
URL: /lynx/components/page-banner
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/lynx/components/page-banner.mdx

페이지 상단에서 전체 상태나 중요한 메시지를 전달하는 상위 레벨 메시지 컴포넌트입니다.

Lynx Engine 최소 버전: 3.6

사용 가능 버전: @seed-design/lynx-react@0.6.0, @seed-design/lynx-css@0.10.0

## Preview

```tsx
import "./styles";

import { useState } from "@lynx-js/react";

import {
  ActionablePageBanner,
  DismissiblePageBanner,
  PageBanner,
} from "@/components/ui/page-banner";

export default function Example() {
  const [open, setOpen] = useState(true);

  function handleTap() {
    "background only";
  }

  function handleDismiss() {
    "background only";
    setOpen(false);
  }

  return (
    <view className="page-banner-preview">
      <PageBanner description="새로운 소식을 확인해 보세요." />
      <ActionablePageBanner
        title="알림"
        description="전체 배너를 탭할 수 있어요."
        bindtap={handleTap}
        accessibility-label="새로운 소식 확인"
      />
      <DismissiblePageBanner
        open={open}
        description="닫을 수 있는 안내 메시지예요."
        onDismiss={handleDismiss}
      />
    </view>
  );
}
```

## Installation

- npm: npx @seed-design/cli@latest add ui:page-banner
- pnpm: pnpm dlx @seed-design/cli@latest add ui:page-banner
- yarn: yarn dlx @seed-design/cli@latest add ui:page-banner
- bun: bun x @seed-design/cli@latest add ui:page-banner

## Props

### `PageBanner`

### `PageBannerButton`

고유 prop이 없습니다. `className`, `style`, `children`, `bindtap`, `main-thread:bindtap`을 받습니다.

### `ActionablePageBanner`

### `DismissiblePageBanner`

## Usage

```tsx
import { PageBanner } from "@/components/ui/page-banner";

export function App() {
  return <PageBanner title="알림" description="새로운 소식을 확인해 보세요." />;
}
```

## Examples

### With Button

`PageBanner`의 `suffix`에 `PageBannerButton`을 전달하면 메시지 옆에 버튼을 배치할 수 있습니다.

```tsx
import "./styles";

import { PageBanner, PageBannerButton } from "@/components/ui/page-banner";

export default function Example() {
  function handleTap() {
    "background only";
  }

  return (
    <view className="page-banner-preview">
      <PageBanner
        description="사업자 정보를 등록해 주세요."
        suffix={<PageBannerButton bindtap={handleTap}>자세히 보기</PageBannerButton>}
      />
    </view>
  );
}
```

### Tones and Variants

`tone`은 `neutral`, `positive`, `informative`, `warning`, `critical`, `magic`을 지원합니다. `variant`는 `weak`과 `solid`를 지원합니다. 기본 조합은 `neutral`과 `weak`입니다.

#### Neutral

```tsx
import "./styles";

import IconExclamationmarkCircleFill from "@karrotmarket/lynx-monochrome-icon/IconExclamationmarkCircleFill";

import {
  ActionablePageBanner,
  DismissiblePageBanner,
  PageBanner,
  PageBannerButton,
} from "@/components/ui/page-banner";

export default function Example() {
  function handleTap() {
    "background only";
  }

  return (
    <view className="page-banner-preview">
      <PageBanner
        tone="neutral"
        variant="weak"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
        suffix={<PageBannerButton>등록하기</PageBannerButton>}
      />
      <PageBanner
        tone="neutral"
        variant="solid"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
        suffix={<PageBannerButton>등록하기</PageBannerButton>}
      />
      <ActionablePageBanner
        tone="neutral"
        variant="weak"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
        bindtap={handleTap}
        accessibility-label="미노출, 사업자 정보를 등록해주세요."
      />
      <ActionablePageBanner
        tone="neutral"
        variant="solid"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
        bindtap={handleTap}
        accessibility-label="미노출, 사업자 정보를 등록해주세요."
      />
      <DismissiblePageBanner
        tone="neutral"
        variant="weak"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
      />
      <DismissiblePageBanner
        tone="neutral"
        variant="solid"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
      />
    </view>
  );
}
```

#### Positive

```tsx
import "./styles";

import IconExclamationmarkCircleFill from "@karrotmarket/lynx-monochrome-icon/IconExclamationmarkCircleFill";

import {
  ActionablePageBanner,
  DismissiblePageBanner,
  PageBanner,
  PageBannerButton,
} from "@/components/ui/page-banner";

export default function Example() {
  function handleTap() {
    "background only";
  }

  return (
    <view className="page-banner-preview">
      <PageBanner
        tone="positive"
        variant="weak"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
        suffix={<PageBannerButton>등록하기</PageBannerButton>}
      />
      <PageBanner
        tone="positive"
        variant="solid"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
        suffix={<PageBannerButton>등록하기</PageBannerButton>}
      />
      <ActionablePageBanner
        tone="positive"
        variant="weak"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
        bindtap={handleTap}
        accessibility-label="미노출, 사업자 정보를 등록해주세요."
      />
      <ActionablePageBanner
        tone="positive"
        variant="solid"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
        bindtap={handleTap}
        accessibility-label="미노출, 사업자 정보를 등록해주세요."
      />
      <DismissiblePageBanner
        tone="positive"
        variant="weak"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
      />
      <DismissiblePageBanner
        tone="positive"
        variant="solid"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
      />
    </view>
  );
}
```

#### Informative

```tsx
import "./styles";

import IconExclamationmarkCircleFill from "@karrotmarket/lynx-monochrome-icon/IconExclamationmarkCircleFill";

import {
  ActionablePageBanner,
  DismissiblePageBanner,
  PageBanner,
  PageBannerButton,
} from "@/components/ui/page-banner";

export default function Example() {
  function handleTap() {
    "background only";
  }

  return (
    <view className="page-banner-preview">
      <PageBanner
        tone="informative"
        variant="weak"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
        suffix={<PageBannerButton>등록하기</PageBannerButton>}
      />
      <PageBanner
        tone="informative"
        variant="solid"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
        suffix={<PageBannerButton>등록하기</PageBannerButton>}
      />
      <ActionablePageBanner
        tone="informative"
        variant="weak"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
        bindtap={handleTap}
        accessibility-label="미노출, 사업자 정보를 등록해주세요."
      />
      <ActionablePageBanner
        tone="informative"
        variant="solid"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
        bindtap={handleTap}
        accessibility-label="미노출, 사업자 정보를 등록해주세요."
      />
      <DismissiblePageBanner
        tone="informative"
        variant="weak"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
      />
      <DismissiblePageBanner
        tone="informative"
        variant="solid"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
      />
    </view>
  );
}
```

#### Warning

```tsx
import "./styles";

import IconExclamationmarkCircleFill from "@karrotmarket/lynx-monochrome-icon/IconExclamationmarkCircleFill";

import {
  ActionablePageBanner,
  DismissiblePageBanner,
  PageBanner,
  PageBannerButton,
} from "@/components/ui/page-banner";

export default function Example() {
  function handleTap() {
    "background only";
  }

  return (
    <view className="page-banner-preview">
      <PageBanner
        tone="warning"
        variant="weak"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
        suffix={<PageBannerButton>등록하기</PageBannerButton>}
      />
      <PageBanner
        tone="warning"
        variant="solid"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
        suffix={<PageBannerButton>등록하기</PageBannerButton>}
      />
      <ActionablePageBanner
        tone="warning"
        variant="weak"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
        bindtap={handleTap}
        accessibility-label="미노출, 사업자 정보를 등록해주세요."
      />
      <ActionablePageBanner
        tone="warning"
        variant="solid"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
        bindtap={handleTap}
        accessibility-label="미노출, 사업자 정보를 등록해주세요."
      />
      <DismissiblePageBanner
        tone="warning"
        variant="weak"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
      />
      <DismissiblePageBanner
        tone="warning"
        variant="solid"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
      />
    </view>
  );
}
```

#### Critical

```tsx
import "./styles";

import IconExclamationmarkCircleFill from "@karrotmarket/lynx-monochrome-icon/IconExclamationmarkCircleFill";

import {
  ActionablePageBanner,
  DismissiblePageBanner,
  PageBanner,
  PageBannerButton,
} from "@/components/ui/page-banner";

export default function Example() {
  function handleTap() {
    "background only";
  }

  return (
    <view className="page-banner-preview">
      <PageBanner
        tone="critical"
        variant="weak"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
        suffix={<PageBannerButton>등록하기</PageBannerButton>}
      />
      <PageBanner
        tone="critical"
        variant="solid"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
        suffix={<PageBannerButton>등록하기</PageBannerButton>}
      />
      <ActionablePageBanner
        tone="critical"
        variant="weak"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
        bindtap={handleTap}
        accessibility-label="미노출, 사업자 정보를 등록해주세요."
      />
      <ActionablePageBanner
        tone="critical"
        variant="solid"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
        bindtap={handleTap}
        accessibility-label="미노출, 사업자 정보를 등록해주세요."
      />
      <DismissiblePageBanner
        tone="critical"
        variant="weak"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
      />
      <DismissiblePageBanner
        tone="critical"
        variant="solid"
        prefixIcon={<IconExclamationmarkCircleFill />}
        title="미노출"
        description="사업자 정보를 등록해주세요."
      />
    </view>
  );
}
```

#### Magic

<Callout type="warning">
  `tone="magic"`은 `variant="weak"`과만 함께 사용할 수 있습니다.
</Callout>

```tsx
import "./styles";

import IconSparkle2 from "@karrotmarket/lynx-multicolor-icon/IconSparkle2";

import {
  ActionablePageBanner,
  DismissiblePageBanner,
  PageBanner,
  PageBannerButton,
} from "@/components/ui/page-banner";

export default function Example() {
  function handleTap() {
    "background only";
  }

  return (
    <view className="page-banner-preview">
      <PageBanner
        tone="magic"
        variant="weak"
        prefixIcon={<IconSparkle2 />}
        title="새로운 기능"
        description="마법 같은 소식이 도착했어요!"
        suffix={<PageBannerButton>둘러보기</PageBannerButton>}
      />
      <ActionablePageBanner
        tone="magic"
        variant="weak"
        prefixIcon={<IconSparkle2 />}
        title="새로운 기능"
        description="마법 같은 소식이 도착했어요!"
        bindtap={handleTap}
        accessibility-label="새로운 기능, 마법 같은 소식이 도착했어요!"
      />
      <DismissiblePageBanner
        tone="magic"
        variant="weak"
        prefixIcon={<IconSparkle2 />}
        title="새로운 기능"
        description="마법 같은 소식이 도착했어요!"
      />
    </view>
  );
}
```

## Action and Dismiss

전체 배너를 액션으로 사용하려면 `ActionablePageBanner`에 `bindtap`과 `accessibility-label`을 전달하세요. 닫기 상태를 직접 관리하려면 `DismissiblePageBanner`의 `open`과 `onDismiss`를 사용합니다.

## Web Version Differences

- 탭 이벤트는 `onClick` 대신 `bindtap` 또는 `main-thread:bindtap`으로 받습니다.
- 접근성은 HTML 의미 요소와 ARIA 대신 Lynx의 `accessibility-*` 속성을 사용합니다.
- CloseButton은 Root의 직접 자식이나 Fragment 안에 두세요. 다른 컴포넌트로 감싸면 배너 본문과 함께 눌림 피드백이 적용됩니다.

## Unsupported Lynx Features

- `asChild`를 지원하지 않습니다.
- 웹의 focus ring과 HTML 속성은 지원하지 않습니다. 대응하는 Lynx native 속성을 사용하세요.