# Top Navigation
URL: /components/top-navigation
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/components/top-navigation.mdx
화면 상단에 위치하여 탐색 인터페이스를 제공하는 네비게이션 컴포넌트입니다.
| Platform | Status | Note |
| --- | --- | --- |
| Figma | Done | |
| [React](/react/stackflow/app-screen) | Done | Stackflow AppBar |
| [Lynx](/lynx/components/app-bar) | Done | |
| iOS | Done | |
| Android | Done | |
## Anatomy
Top Navigation은 Root 타입과 Standard 타입, 두 가지로 나뉩니다. 각 타입은 별도의 구현체와 Figma 컴포넌트로 제공됩니다.
## Properties
### Title Type
Root Top Navigation의 Title 영역에는 Label만 표시하는 Text 타입과, 선택 시 동작이 있는 Button 타입을 선택하여 사용할 수 있습니다.
Standard Top Navigation의 경우 Title 영역을 Slot으로 구성하여 조금 더 다양한 조합으로 사용할 수 있습니다.
### Left Slot
Standard 타입 Top Navigation은 2-depth 이상의 화면에서 사용하며, 왼쪽에 네비게이션 액션을 배치할 수 있습니다. 뒤로가기와 닫기 버튼을 배치할 수 있으며, 두 버튼은 서로 다른 동작을 제공합니다. 각 버튼의 차이를 이해하고 정확한 용도에 맞게 사용해야 합니다.
왼쪽에 추가 액션이 필요한 경우 숨겨진 Icon Button을 사용할 수 있습니다. 꼭 필요한 상황에서만 제한적으로 사용하는 것을 권장합니다. 이 옵션은 Figma에서만 제공합니다.
### Right Slot
Top Navigation 우측은 Slot으로 구성되어 Icon Button 또는 Text Button을 배치할 수 있습니다. Icon Button은 최대 3개까지 추가 가능하며, 타이틀 영역과 겹치지 않도록 개수를 조정하여 사용하는 것을 권장합니다.
### Notification Badge
Icon Button에 [Notification Badge](/components/notification-badge)를 표시할 수 있습니다. Small과 Large 사이즈 모두 사용 가능하며, Large 사이즈는 숫자 정보가 필요한 경우에 사용합니다.
## Guidelines
### Root Top Navigation과 Standard Top Navigation의 차이
Top Navigation은 Root 타입과 Standard 타입, 두 가지로 나뉩니다. 각 타입은 별도의 구현체와 Figma 컴포넌트로 제공됩니다.
#### Root Top Navigation
앱의 최상위 루트 탭에서 사용되며, 핵심 액션 진입을 제공합니다.
#### Standard Top Navigation
2-depth 이상의 화면에서 사용됩니다. 뒤로가기 또는 닫기, 타이틀, 보조 액션을 통해 현재 위치와 주요 인터랙션을 안내합니다.
### 뒤로가기(Back)와 닫기(Close) 동작
뒤로가기(Back)와 닫기(Close)는 비슷해 보이지만 서로 다른 동작을 제공합니다. 사용자의 흐름에 큰 영향을 주므로 각 동작을 정확히 이해하고 사용하는 것이 중요합니다.
| 구분 | 뒤로가기 (Back) | 닫기 (Close) |
| --------- | ----------------- | -------------------- |
| **이동 방식** | 이전 화면으로 이동 | 현재 레이어/플로우 종료 |
| **적용 위치** | 일반 페이지, 계층 구조 화면 | 모달, 독립 플로우 |
| **UX 의미** | 한 단계 뒤로 가기 | 이 플로우를 끝내고 나가기 |
| **아이콘** | \< (Chevron Left) | X (Close) |
| **예상 행동** | 이전 단계 유지 | 현재 상태/입력 값이 폐기될 수 있음 |
#### 뒤로가기 (Back)
네비게이션 스택을 기반으로 현재 화면을 이전 화면으로 되돌립니다. 히스토리 기반(History Back)과 계층 기반(Hierarchy Back)으로 구분되며, 화면의 목적과 진입 경로에 따라 선택해서 사용합니다.
- 계층적인 화면 구조에서 단계별 이동이 필요한 경우
- 사용자의 입력 내용을 유지해야 하는 경우
#### 닫기 (Close)
현재 화면을 종료하고 상위 레이어로 복귀합니다. 페이지 히스토리를 거슬러 올라가는 것이 아니라, 열려있는 모달, [Bottom Sheet](/components/bottom-sheet), 전체 화면 등을 닫는 동작입니다.
- 모달/풀스크린 모달/[Bottom Sheet](/components/bottom-sheet)처럼 레이어를 닫는 경우
- 상태를 초기화하거나, 플로우를 종료하거나, 작업을 중단하는 경우
### 뒤로가기(Back)의 두 가지 동작: History Back vs. Hierarchy Back
뒤로가기 버튼은 일반적으로 '이전 화면으로 돌아가는 행동'으로 생각할 수 있지만, 실제로는 History Back(히스토리 기반)과 Hierarchy Back(계층 기반)으로 구분됩니다. 사용자가 예상치 못한 이동을 경험하지 않도록 일관된 정책을 적용하는 것이 중요합니다.
| 구분 | History Back | Hierarchy Back |
| ---------- | ---------------- | ----------------- |
| **기준** | 사용자의 실제 이동 경로 | 앱의 정보 구조 (IA) |
| **이동 결과** | 직전 화면으로 이동 | 상위 레벨 화면으로 이동 |
| **외부 진입** | 외부로 다시 나갈수도 있음 | 앱 내부 상위 화면으로 고정 |
| **대표 케이스** | 검색, 추천, 피드 기반 탐색 | 설정, 프로필, 고정 구조 메뉴 |
#### History Back (히스토리 기반 뒤로가기)
사용자가 실제로 거쳐온 페이지 순서대로 돌아가는 뒤로가기 방식입니다. 방문 기록을 기반으로 동작합니다.
- 검색, 추천 지면 등 연속적인 탐색 흐름이 있는 경우
- 외부에서 딥링크로 상세 화면에 바로 진입한 경우, Back하면 외부 브라우저로 돌아갈 수 있음
#### Hierarchy Back (계층 기반 뒤로가기)
앱의 정보구조(IA)에 따라 상위 레벨 화면으로 이동하는 뒤로가기 방식입니다. 앱 구조를 기반으로 동작합니다.
- 설정 화면처럼 고정된 구조를 따라 이동해야 하는 경우
- 외부에서 딥링크로 상세 화면에 바로 진입한 경우, 상위 화면으로 이동하도록 정의할 수 있음
### 타이틀 작성하기
타이틀은 한 줄로 표시되도록 간결하게 작성합니다. 액션 개수에 따라 타이틀 길이가 자동 조정되며, 길어지면 말줄임으로 표시됩니다. 글로벌 앱에서는 말줄임 대신 그라디언트로 표시됩니다.
**Figma에서는 타이틀 말줄임 처리가 되어 있지 않습니다. 구현체에서 확인해주세요.**
### 우측 액션 영역 사용하기
Top Navigation 우측에는 화면에서 접근 가능한 보조 액션을 표시할 수 있습니다. 아이콘 버튼은 최대 2개까지 표시하는 것을 권장합니다. 필요시 3개까지 표시할 수 있으나, 타이틀 텍스트가 충분히 표시되지 않을 수 있으니 주의하세요. 텍스트 버튼은 1개만 표시할 수 있습니다.
액션이 3개를 초과하는 경우, 더보기 버튼과 [Menu Sheet](/components/menu-sheet)를 조합하여 중요한 액션만 노출하고 나머지는 숨기는 것을 권장합니다.
### 스크롤 시 동작
Top Navigation은 스크롤 시 항상 상단에 고정되는 동작을 기본으로 가집니다. 고정된 영역과 스크롤되는 영역을 구분하기 위해 별도의 시각적인 장치를 표시하지 않습니다.
배경이 투명한 Top Navigation을 사용하는 경우 스크롤할 때 배경색이 채워지는 동작을 가집니다.
## Specification
Component spec (JSON): /rootage/components/top-navigation.json