# Page Banner URL: /components/page-banner Source: https://github.com/daangn/seed-design/blob/dev/docs/content/components/page-banner.mdx 페이지 상단에 위치하며 사용자에게 전체적인 상태나 중요한 메시지를 전달하는 상위 레벨 메시지 컴포넌트입니다. | Platform | Status | | --- | --- | | Figma | Done | | [React](/react/components/page-banner) | Done | | Lynx | Not Ready | | iOS | Done | | Android | Done | ## Anatomy ![Page Banner의 Anatomy 이미지. Container, Prefix Icon, Title, Link Text, Chevron, Dismiss 버튼으로 구성됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/b85ee1c0-df25-4219-bae0-67bb17e115bd) Page Banner는 메시지 텍스트를 감싸고 있는 컨테이너로 구성되어 있으며, 필요에 따라 Prefix Icon, Title, Link Text, Chevron, Dismiss 버튼을 표시할 수 있습니다. ## Properties ### Interaction ![Page Banner의 Interaction 종류 - Default, Actionable, Dismissible](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/10c2d6b4-2a7a-4314-a418-f00c8940e753) Page Banner 우측에 표시되는 요소에 따라 다른 Interaction을 가질 수 있습니다. ### Variant ![Page Banner의 Variant 및 Tone - Neutral, Informative, Positive, Warning, Critical, Magic Tone과 Weak, Solid Variant](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/1c114839-0c0a-4fe0-87b2-33fcbd34696a) Page Banner는 Neutral, Informative, Positive, Warning, Critical, Magic 여섯 가지 Tone으로 구성되어 있으며, 각 Tone은 Weak와 Solid 두 가지 스타일을 가집니다. Tone=Magic은 Variant=Solid와 조합하여 사용하지 않습니다. ### Prefix Icon Property ![Page Banner의 Prefix Icon Property](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/d46afc4b-80d1-4a8e-84d5-10165babe450) Prefix Icon을 표시할 수 있습니다. 아이콘은 Fill 타입 사용을 권장합니다. ### Title Property ![Page Banner의 Title Property](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/90b860cb-800b-47f7-a0ca-f7d24b382a32) Show Title Property로 Title을 표시할 수 있습니다. ### State ![Page Banner의 State - Actionable Page Banner의 Pressed 상태](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/a7f67348-3b45-47f6-bace-b2e803d558e9) Actionable Page Banner에는 Pressed 상태가 있습니다. ## Guidelines ### Page Banner의 위치 ![Page Banner의 위치 예시 - 페이지 상단 배치](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/ff60f291-397a-4249-9c53-b1fecab3089d) Page Banner는 페이지 상단에 위치하며 사용자에게 전체적인 상태나 중요한 메시지를 전달하는 상위 레벨 메시지 컴포넌트입니다. 항상 페이지 최상단에 배치되며(상단 이미지가 있는 경우 이미지 하단), 한 화면에 하나만 존재할 수 있습니다. ![Page Banner의 위치 예시 - 상단 고정](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/d780ced6-cb40-415b-a8ce-02c73d904467) 스크롤 시에도 Page Banner를 상단에 고정하여 표시할 수 있습니다. 이 경우, 개발자에게 인터랙션 가이드를 명확히 제공해야 합니다. **한 화면에 여러 개의 Page Banner가 표시되지 않도록 주의해주세요.** ### Title, Description 사이 간격 표시 ![Page Banner의 Title과 Description 사이 간격 표시 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/9403968d-efa8-441f-ac33-986cd29a1c02) Page Banner의 Title은 Inline 요소로, 텍스트처럼 줄을 차지하지 않고 배치됩니다. Title과 Description 사이의 여백은 두 번의 띄어쓰기로 표시합니다. ### 제목과 내용 작성하기 ![Page Banner 제목으로 '미노출'을 사용한 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/d1fa2197-7a30-44c7-92dd-bbf4b2b2adc6) Page Banner 제목은 검토 중, 미노출, 제재됨과 같이 상태를 나타내는 짧은 단어로 표시하고, 꼭 필요한 경우에만 사용합니다. 본문은 핵심 내용만 간결하게 작성하며, 제목에서 언급한 내용을 반복하지 않습니다. ### Page Banner로 상태 표시하기 ![Page Banner로 다양한 상태 표시 예시 - Neutral Weak, Warning Weak](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/de30451a-49f0-4566-914d-26636a22fc42) ![Page Banner로 다양한 상태 표시 예시 - Critical Weak, Critical Strong](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/395225c8-7070-4a2e-9705-02ad88c50713) ![Page Banner로 다양한 상태 표시 예시 - Informative Weak, Positive Weak](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c0a25a60-21b7-4eb0-8a98-f18e93b53ea1) Page Banner는 페이지의 중요한 상태 변화나 사용자 액션에 대한 피드백을 전달합니다. 상황에 맞는 Tone을 선택해서 사용해주세요. | Tone | 사용 예시 | | --------------- | ---------------------------------- | | **Neutral** | 상태가 특별히 없거나, 상태값이 명확하지 않은 초기 상태 | | **Informative** | 베타 기능 안내, 사용자 권한 제한, 정보 기반 메시지 | | **Positive** | 승인됨, 발행됨, 저장 성공, 검토 통과 | | **Warning** | 만료 임박, 제출 누락, 필수 정보 부족 등 잠재적 문제 상태 | | **Critical** | 검수 거절, 제재 상태, 편집 불가, 유효성 검증 실패 | ### 주요 기능 또는 서비스의 진입점을 표시하기 ![Actionable Page Banner를 서비스 진입점으로 활용한 예시 - 안심결제, 부동산](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/cd0d540a-1383-4ab3-8319-324755b54dd1) ![Actionable Page Banner를 주요 기능 진입점으로 활용한 예시 - 이웃광고, 편의점 택배](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/34381564-2e73-4693-948e-0ec9dea5205a) Actionable Page Banner는 주요 기능 또는 서비스의 진입점으로 활용할 수 있습니다. ### Dismissible 인터랙션 사용하기 ![새 기능 소개를 위해 Dismissible 인터랙션을 사용한 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/0c17815d-13f1-4b38-aff9-a0197ded24f2) Dismissible 인터랙션은 사용자에게 한 번만 전달해도 충분한 정보에 한해 사용하며, 경고·오류 메시지에는 사용하지 않습니다. 닫은 후에 동일한 메시지가 반복해서 표시되지 않도록 주의해주세요. ### Page Banner, Callout 비교 Page Banner와 [Callout](/components/callout) 컴포넌트는 모두 사용자에게 메시지를 전달하지만, 용도, 시각적 무게, 위치, 메시지의 범위가 다르기 때문에 명확하게 구분하여 사용해야 합니다. | | Callout | Page Banner | | ------------- | ------------------ | ----------------------- | | **위치** | 콘텐츠 흐름 내 (본문 중간) | 페이지 상단 | | **너비** | 콘텐츠 너비 (제한적) | 전체 너비 (gutter 없이 가로 확장) | | **용도** | 팁, 기능 설명, 위험 요소 주의 | 페이지 상태, 제재, 기능 활성화 안내 등 | | **메시지 범위** | 로컬 (해당 기능/내용에 국한) | 글로벌 (페이지 전체) | | **Sticky 속성** | 없음 (스크롤과 함께 이동) | 있음 (상단 고정 가능) | ## Specification ### Page Banner Component spec (JSON): /rootage/components/page-banner.json ### Page Banner Close Button Component spec (JSON): /rootage/components/page-banner-close-button.json