# Search Bar
URL: /react/stackflow/search-bar
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/react/stackflow/search-bar.mdx

Stackflow 화면 상단에서 검색어를 입력하는 App Bar입니다. Search Input을 Back·닫기 버튼과 함께 배치합니다.

사용 가능 버전: @seed-design/stackflow@2.1.0, @seed-design/react@3.1.0, @seed-design/css@3.1.0

```tsx
import { useState } from "react";
import { Flex, Text } from "@seed-design/react";
import { useActivity } from "@stackflow/react";
import { useFlow, type StaticActivityComponentType } from "@stackflow/react/future";
import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";
import { SearchBar } from "seed-design/ui/search-bar";

declare module "@stackflow/config" {
  interface Register {
    ActivitySearchBar: {};
  }
}

const ActivitySearchBar: StaticActivityComponentType<"ActivitySearchBar"> = () => {
  const { pop } = useFlow();
  const { isRoot } = useActivity();
  const [value, setValue] = useState("");
  const [message, setMessage] = useState("검색어를 입력하고 검색해주세요");

  return (
    <AppScreen>
      <SearchBar
        value={value}
        onValueChange={setValue}
        onSubmit={(submittedValue) => setMessage(`"${submittedValue}" 검색`)}
        placeholder="검색어를 입력해주세요"
        showBackButton
        // The root activity has nowhere to pop to, so it shows the action instead.
        onClose={() => (isRoot ? setMessage("닫기를 눌렀습니다") : pop())}
      />
      <AppScreenContent>
        <Flex
          justify="center"
          align="center"
          height="full"
          // The screen dismisses the keyboard when its content is touched; the search input does not.
          onPointerDown={() => {
            if (document.activeElement instanceof HTMLElement) {
              document.activeElement.blur();
            }
          }}
        >
          <Text color="fg.neutralMuted">{message}</Text>
        </Flex>
      </AppScreenContent>
    </AppScreen>
  );
};

export default ActivitySearchBar;
```

Search Bar는 [App Screen](/react/stackflow/app-screen)의 `AppBar` 안에 [Search Input](/react/components/search-input)을 배치한 컴포넌트입니다. App Bar가 Stackflow activity에 의존하므로 Stackflow 밖에서는 Search Input snippet을 직접 사용하고 바 레이아웃을 구성하세요.

## Installation

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

## Usage

```tsx
import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";
import { SearchBar } from "seed-design/ui/search-bar";
```

```tsx
<AppScreen>
  <SearchBar
    value={value}
    onValueChange={setValue}
    onSubmit={handleSubmit}
    placeholder="검색어를 입력해주세요"
    onClose={() => pop()}
  />
  <AppScreenContent>{/* content */}</AppScreenContent>
</AppScreen>
```

## Props

`showBackButton`, `onClose`, `closeLabel`을 제외한 prop은 [Search Input](/react/components/search-input#props) snippet으로 전달됩니다. `ui:search-bar`를 설치하면 `ui:search-input`과 `ui:app-screen`도 함께 설치됩니다.

## Examples

### Back Button

`showBackButton`을 사용하면 이전 화면으로 돌아가는 Back 버튼을 표시합니다. 검색 플로우에서 이전 화면으로 돌아가는 동작을 제공할 때만 사용하세요. root activity에서는 Back 버튼이 표시되지 않습니다.

닫기 버튼은 항상 표시되며, `onClose`로 동작을 지정합니다. 레이블은 `closeLabel`로 바꿀 수 있습니다.

### Keyboard

Enter를 누르면 `onSubmit`이 호출되고 입력의 focus가 해제되어 모바일 키보드가 내려갑니다. 콘텐츠를 누르거나 스크롤할 때 키보드를 내리는 동작은 화면에서 처리합니다. 위 예제는 콘텐츠를 누르면 focus를 해제합니다.