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

제품 안에서 검색어를 입력할 수 있는 Input을 제공하는 컴포넌트입니다.

## Anatomy

![Search Bar의 Anatomy. Search Input, Search Input Clear, Close Button과 Back Button으로 구성됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c3d9417f-e2cb-43cf-88e9-67a08159acf6)

Search Bar는 Search Input, Back Button, Close Button을 조합해 제공하며, Search Input만 따로 사용하는 것은 권장하지 않습니다.

## Properties

### Stack

![Search Bar의 Use Stack 속성 - 꺼진 경우 Search Input과 닫기 버튼만, 켜진 경우 Back Button이 함께 표시됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/b5e6df76-e3e0-4748-8df7-d871d4ff05e6)

Search Bar는 검색 플로우에서 네비게이션 기능을 제공하기 위해 Use Stack 속성으로 Back Button을 표시할 수 있습니다. Back Button은 검색 플로우에서 네비게이션 동작을 제공하는 경우에만 사용해야 합니다.

### Search Input State

![Search Input의 Filled, Focused 조합 - 플레이스홀더만 있는 상태, 포커스된 빈 상태, 값이 입력된 상태, 포커스된 입력 상태](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/e1fadf0f-3aab-4d61-8049-8b25fc2f2b98)

Search Input은 Filled 상태로 검색어 입력 여부를 표현하며, Focused 상태도 함께 제공합니다.

## Guidelines

### Layout

![기본 Layout - 화면 최상단에 Search Bar만 배치한 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/f42c4e6e-e2c2-4246-92e4-f19e158fecdc)

![Scroll 하는 경우 - Search Bar와 Tabs를 상단 Fixed 영역에 고정한 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/7560804c-a334-43ad-812f-6eca91b7c4d5)

Search Bar는 [Top Navigation](/components/top-navigation)과 함께 사용하지 않고 단독으로 화면 최상단에 배치하는 것을 권장합니다. [Tabs](/components/tabs) 같은 다른 요소와 조합할 수도 있으며, 이때도 Search Bar는 상단 Fixed 영역에 고정하고 Content만 Scroll되도록 하는 것을 권장합니다.

### Stack 사용하기

![3 Depth 검색 화면에서 Back Button 클릭 → 이전 검색 결과(2 Depth)로 이동하는 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/92b77c00-b338-413d-8d03-3916ce413d90)

![첫 검색 화면에서 Back Button 클릭 → 최초 진입점(Root)으로 이동하는 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/0ccef826-8a3b-49be-a92f-e2294c727d12)

![n Depth 화면에서 Close Button 클릭 → 최초 진입점(Root)으로 이동하는 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/25400442-0966-49b9-b13a-d2f09ec3228e)

<DontImage body="Back Button은 반드시 뒤로가기로 동작해야 합니다. 닫기와 혼용해서 사용하지 않습니다." alt="n Depth에서 Back Button을 클릭했는데 최초 진입점(Root)으로 이동하는 예시" />

Stack을 사용하면 검색 플로우에 Back Button과 Close Button이 항상 함께 표시되어, 사용자가 이전에 검색한 결과 페이지를 다시 확인할 수 있습니다.

- **Back Button:** 이전 Depth로 이동합니다.
- **Close Button:** 현재 Depth와 상관없이 검색 화면을 닫습니다.

**Back Button을 Close Button처럼 사용하지 않도록 주의해주세요.**

### 매우 긴 검색어를 입력한 경우

![입력한 검색어가 Search Input 너비보다 길어진 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/4254001c-6103-4a9d-9491-f5607049327a)

Search Input 사용 시 긴 검색어를 입력해도 줄바꿈이 발생하지 않아요.

### 검색하기

![검색 중 OS Keyboard의 Submit 버튼을 누르면 Keyboard가 사라지고 검색 결과 화면이 표시되는 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/95f8d3b4-538b-41b2-9904-34598168a12b)

OS Keyboard에서 Submit 버튼을 누르면 입력된 검색어로 검색 결과가 화면에 표시되고 OS Keyboard는 사라집니다.

### Keyboard

![OS별 권장 Keyboard - iOS와 Android](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/11f246ba-3869-41a0-882b-de71e968530c)

Search Input에 포커스되면 검색어를 제출할 수 있는 OS Keyboard를 사용해야 하며, Submit 버튼에는 OS에서 권장하는 스타일을 적용해야 합니다.

![검색 중 Content 빈 영역을 탭하거나 스크롤하면 Keyboard가 내려가고 포커스가 해제되는 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/a7393f70-eb1a-4473-b9e4-6088c43fbb35)

검색 중에 Content의 빈 영역을 탭하거나 스크롤하면 Keyboard가 내려가고 Search Input의 포커스가 해제됩니다.

### 검색어 지우기

![Clear Button을 누르면 검색어가 지워지고 포커스가 유지된 채 플레이스홀더가 표시되는 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/7d3e3d67-dd0c-42db-9b35-c2d2798f4c56)

Search Input에 검색어가 입력되어 있으면 Clear Button으로 지울 수 있습니다. Input에 포커스된 상태였다면 검색어를 지운 뒤에도 포커스를 유지해야 합니다.