# AppBar
URL: /react/components/app-bar
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/react/components/app-bar.mdx

화면 상단에서 현재 화면의 제목과 탐색 액션을 보여주는 내비게이션 바 컴포넌트입니다.

사용 가능 버전: @seed-design/stackflow@0.0.1, @seed-design/css@0.0.1

## Preview

```tsx
import { IconBellLine, IconChevronLeftLine } from "@karrotmarket/react-monochrome-icon";
import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic";
import { Box, Flex } from "@seed-design/react";
import { seedPlugin } from "@seed-design/stackflow";
import { stackflow } from "@stackflow/react";
import {
  AppBar,
  AppBarIconButton,
  AppBarLeft,
  AppBarMain,
  AppBarRight,
} from "seed-design/ui/app-bar";
import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";

function Activity() {
  return (
    <AppScreen theme="cupertino">
      <AppBar>
        <AppBarLeft>
          <AppBarIconButton aria-label="뒤로">
            <IconChevronLeftLine />
          </AppBarIconButton>
        </AppBarLeft>
        <AppBarMain title="동네생활" />
        <AppBarRight>
          <AppBarIconButton aria-label="알림">
            <IconBellLine />
          </AppBarIconButton>
        </AppBarRight>
      </AppBar>
      <AppScreenContent>
        <Flex height="full" align="center" justify="center" color="fg.neutralMuted">
          화면 콘텐츠
        </Flex>
      </AppScreenContent>
    </AppScreen>
  );
}

const { Stack } = stackflow({
  activities: { Activity },
  initialActivity: () => "Activity",
  plugins: [basicRendererPlugin(), seedPlugin({ theme: "cupertino" })],
  transitionDuration: 0,
});

export default function Preview() {
  return (
    <Box
      position="relative"
      width="375px"
      maxWidth="100%"
      height="375px"
      overflowX="hidden"
      overflowY="hidden"
      borderWidth={1}
      borderColor="stroke.neutralWeak"
      borderRadius="r4"
    >
      <Stack />
    </Box>
  );
}
```

## Installation

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

React Registry는 AppBar를 AppScreen과 함께 설치합니다. AppBar는 Stackflow Activity 안에서 AppScreen과 함께 사용하세요. Stackflow 설정은 [Getting Started](/react/stackflow/getting-started)를 참고하세요.

## Props

### `AppBar`

### `AppBarLeft`

### `AppBarMain`

### `AppBarRight`

### `AppBarSlot`

### `AppBarIconButton`

## Usage

설치한 snippet은 Root와 주요 슬롯을 `AppBar`, `AppBarLeft`, `AppBarMain`, `AppBarRight`로 내보냅니다. `AppBarBackButton`은 현재 Activity가 루트가 아닐 때 나타나며, 클릭하면 이전 Activity로 이동합니다.

```tsx
import {
  AppBar,
  AppBarBackButton,
  AppBarLeft,
  AppBarMain,
  AppBarRight,
} from "@/components/ui/app-bar";

export function Header() {
  return (
    <AppBar>
      <AppBarLeft>
        <AppBarBackButton />
      </AppBarLeft>
      <AppBarMain title="동네생활" />
      <AppBarRight />
    </AppBar>
  );
}
```

### Title / Subtitle

`AppBarMain`에 `title`, `subtitle`을 전달하면 제목과 부제목을 조립합니다. `subtitle`이 있으면 `layout="withSubtitle"`을 자동으로 적용합니다.

```tsx
import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic";
import { Box, Flex } from "@seed-design/react";
import { seedPlugin } from "@seed-design/stackflow";
import { stackflow } from "@stackflow/react";
import { AppBar, AppBarMain } from "seed-design/ui/app-bar";
import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";

function Activity() {
  return (
    <AppScreen theme="cupertino">
      <AppBar>
        <AppBarMain title="관심 목록" subtitle="3개의 새 소식" />
      </AppBar>
      <AppScreenContent>
        <Flex height="full" align="center" justify="center" color="fg.neutralMuted">
          제목과 부제목을 함께 표시한 AppBar
        </Flex>
      </AppScreenContent>
    </AppScreen>
  );
}

const { Stack } = stackflow({
  activities: { Activity },
  initialActivity: () => "Activity",
  plugins: [basicRendererPlugin(), seedPlugin({ theme: "cupertino" })],
  transitionDuration: 0,
});

export default function TitleAndSubtitle() {
  return (
    <Box
      position="relative"
      width="375px"
      maxWidth="100%"
      height="375px"
      overflowX="hidden"
      overflowY="hidden"
      borderWidth={1}
      borderColor="stroke.neutralWeak"
      borderRadius="r4"
    >
      <Stack />
    </Box>
  );
}
```

### Left / Right Action

왼쪽과 오른쪽에는 아이콘 버튼이나 커스텀 슬롯을 배치할 수 있습니다. Cupertino theme에서는 좌우 슬롯 폭을 기준으로 가운데 제목의 padding을 조정합니다.

```tsx
"use client";

import { IconChevronLeftLine, IconXmarkLine } from "@karrotmarket/react-monochrome-icon";
import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic";
import { Box, Flex } from "@seed-design/react";
import { seedPlugin } from "@seed-design/stackflow";
import { stackflow } from "@stackflow/react";
import {
  AppBar,
  AppBarIconButton,
  AppBarLeft,
  AppBarMain,
  AppBarRight,
  AppBarSlot,
} from "seed-design/ui/app-bar";
import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";
import { useState } from "react";

function Activity() {
  const [lastAction, setLastAction] = useState("없음");

  return (
    <AppScreen theme="cupertino">
      <AppBar>
        <AppBarLeft>
          <AppBarIconButton aria-label="뒤로" onClick={() => setLastAction("뒤로")}>
            <IconChevronLeftLine />
          </AppBarIconButton>
        </AppBarLeft>
        <AppBarMain title="작성하기" />
        <AppBarRight>
          <AppBarSlot>
            <button type="button">완료</button>
          </AppBarSlot>
          <AppBarIconButton aria-label="닫기" onClick={() => setLastAction("닫기")}>
            <IconXmarkLine />
          </AppBarIconButton>
        </AppBarRight>
      </AppBar>
      <AppScreenContent>
        <Flex height="full" align="center" justify="center" color="fg.neutralMuted">
          마지막 액션: {lastAction}
        </Flex>
      </AppScreenContent>
    </AppScreen>
  );
}

const { Stack } = stackflow({
  activities: { Activity },
  initialActivity: () => "Activity",
  plugins: [basicRendererPlugin(), seedPlugin({ theme: "cupertino" })],
  transitionDuration: 0,
});

export default function LeftAndRightActions() {
  return (
    <Box
      position="relative"
      width="375px"
      maxWidth="100%"
      height="375px"
      overflowX="hidden"
      overflowY="hidden"
      borderWidth={1}
      borderColor="stroke.neutralWeak"
      borderRadius="r4"
    >
      <Stack />
    </Box>
  );
}
```

### Accessibility

아이콘만 있는 버튼에는 동작을 설명하는 `aria-label`을 지정하세요. `AppBarBackButton`과 `AppBarCloseButton`은 각각 `"뒤로"`, `"닫기"`를 기본값으로 제공합니다.

### Theme

`theme`은 `"cupertino"` 또는 `"android"`를 사용할 수 있습니다. `AppScreen`과 같은 theme을 사용하세요.

```tsx
import { IconChevronLeftLine, IconXmarkLine } from "@karrotmarket/react-monochrome-icon";
import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic";
import { Box, HStack, VStack } from "@seed-design/react";
import { seedPlugin } from "@seed-design/stackflow";
import { stackflow } from "@stackflow/react";
import {
  AppBar,
  AppBarIconButton,
  AppBarLeft,
  AppBarMain,
  AppBarRight,
} from "seed-design/ui/app-bar";
import { AppScreen } from "seed-design/ui/app-screen";
import type { ReactNode } from "react";

function CupertinoActivity() {
  return (
    <AppScreen theme="cupertino">
      <AppBar theme="cupertino">
        <AppBarLeft>
          <AppBarIconButton aria-label="뒤로">
            <IconChevronLeftLine />
          </AppBarIconButton>
        </AppBarLeft>
        <AppBarMain title="화면 제목" subtitle="보조 제목" />
        <AppBarRight>
          <AppBarIconButton aria-label="닫기">
            <IconXmarkLine />
          </AppBarIconButton>
        </AppBarRight>
      </AppBar>
    </AppScreen>
  );
}

function AndroidActivity() {
  return (
    <AppScreen theme="android">
      <AppBar theme="android">
        <AppBarLeft>
          <AppBarIconButton aria-label="뒤로">
            <IconChevronLeftLine />
          </AppBarIconButton>
        </AppBarLeft>
        <AppBarMain title="화면 제목" subtitle="보조 제목" />
        <AppBarRight>
          <AppBarIconButton aria-label="닫기">
            <IconXmarkLine />
          </AppBarIconButton>
        </AppBarRight>
      </AppBar>
    </AppScreen>
  );
}

const { Stack: CupertinoStack } = stackflow({
  activities: { CupertinoActivity },
  initialActivity: () => "CupertinoActivity",
  plugins: [basicRendererPlugin(), seedPlugin({ theme: "cupertino" })],
  transitionDuration: 0,
});

const { Stack: AndroidStack } = stackflow({
  activities: { AndroidActivity },
  initialActivity: () => "AndroidActivity",
  plugins: [basicRendererPlugin(), seedPlugin({ theme: "android" })],
  transitionDuration: 0,
});

function ExampleFrame({ children }: { children: ReactNode }) {
  return (
    <Box
      position="relative"
      width="375px"
      maxWidth="100%"
      height="375px"
      overflowX="hidden"
      overflowY="hidden"
      borderWidth={1}
      borderColor="stroke.neutralWeak"
      borderRadius="r4"
    >
      {children}
    </Box>
  );
}

export default function PlatformLayouts() {
  return (
    <HStack gap="x6" flexWrap="wrap" justify="center">
      <VStack gap="x3">
        <span>Cupertino</span>
        <ExampleFrame>
          <CupertinoStack />
        </ExampleFrame>
      </VStack>
      <VStack gap="x3">
        <span>Android</span>
        <ExampleFrame>
          <AndroidStack />
        </ExampleFrame>
      </VStack>
    </HStack>
  );
}
```