Page Banner

구조는 당근 SEED Page Banner(Apache-2.0)를 따른다 — 화면 폭 띠 · 아이콘 · 제목 · 본문 · 버튼, 옅은(weak) · 짙은(solid) 바탕, 상호작용 셋. 값은 groo 토큰이고, SEED 와 다른 자리는 맨 아래 "SEED 와 다른 점" 에 적었다(2026-10-02 사용자 결정). groo 에 처음 두는 컴포넌트다.

수치 원본은 page-banner.yaml이다. 수치 표 자리([표: …])와 그림 자리([그림: …])는 사이트가 그 파일로 그린다 — GitHub 에서는 그 파일 · 그림 코드로 가는 링크로 보인다.

직접 골라 보기제목 링크 복사

톤 · 바탕 · 상호작용 · 제목 · 버튼을 고르면 스펙대로 그린 띠와 그 코드가 바뀐다.

import { PageBanner } from "@/components/ui/page-banner"

<PageBanner tone="critical" title="연결 끊김" button={{ label: "다시 연결", onClick: handle }}>
  증권 연결 키가 만료돼 시세를 받지 못해요.
</PageBanner>

Anatomy제목 링크 복사

부위

Properties제목 링크 복사

띠제목 링크 복사

좌우 화면 여백 24 · 위아래 10 · 최소 40 · 모서리 없음. 아이콘 16(첫 줄 가운데), 제목 14 / 19 · 700, 본문 14 / 19 · 500(사이 띄어쓰기 두 칸), 버튼 13 / 18 · 700(누르는 높이 40). 본문과 버튼이 한 줄에 안 들어가면 버튼이 다음 줄 본문 시작선으로 내려간다.

공통

Tone · Variant제목 링크 복사

톤 다섯(neutral · informative · positive · warning · critical) × 바탕 둘. 옅은 바탕(weak, 기본)은 Callout 과 같은 짝(bg-*-weak + fg-*-contrast)이고, 짙은 바탕(solid)은 bg-*-solid + 흰 글이다 — 더 강하게 알려야 할 때(연결 끊김 · 거절 · 편집 불가).

바탕 · 톤

Interaction제목 링크 복사

display(보이기만 — 버튼 하나를 둘 수 있다) · actionable(띠 전체가 버튼 — 뒤 화살표) · dismissible(닫기 — 한 번 보면 되는 안내에만).

상호작용

State제목 링크 복사

상태

모션

Guidelines제목 링크 복사

페이지 맨 위에 하나제목 링크 복사

페이지 머리 바로 아래(위에 사진이 있으면 그 아래)에 하나만 둔다. 그 페이지 전체에 걸린 상태만 — 증권 연결이 끊긴 증권 페이지, Pro 만료가 다가온 설정, 새 버전이 나온 웹. 그 기능 가까이의 안내는 Callout 이다. 스크롤해도 맨 위에 붙여 둘 수 있다(붙일 때는 화면마다 정한다).

자리가 머리 바로 아래 화면 폭이라 Desk 폰 · 데스크톱 모두 회색 바닥(bg-layer-basement) 위에 놓인다. 옅은 neutral(weak · neutral)은 bg-neutral-weak 그대로 둔다 — 라이트에서 바닥과 같은 gray-200 이라 띠 모양이 보이지 않고 아이콘 · 글 · 버튼만 보인다(다크는 1.47:1 로 갈린다). 이것을 받아들인다(2026-10-17 사용자 결정 — 03-F 결정 3 — "지금 구현 그대로", https://claude.ai/artifact/F5SKUbGEWDG82F7B5RRjQB). 투명 짝 · 흰 띠 · 아래 선은 고르지 않았다. 띠가 보여야 하는 안내라면 neutral 이 아닌 톤(informative · warning …)을 쓴다.

"용도" · "Sticky" 두 줄은 SEED Page Banner 문서의 "Page Banner, Callout 비교" 에서 옮겼다(2026-10-22 사용자 결정 3B — https://claude.ai/artifact/NuEPiLRH2fJidXdKzcDsCX). 다른 알림과 고르는 표는 Snackbar 의 "무엇으로 알리나" 한 벌이다.

짙은 바탕은 더 강하게 알릴 때제목 링크 복사

기본은 옅은 바탕이다. 짙은 바탕은 더 강하게 알려야 할 때 쓴다 — 예: 연결 끊김 · 거절 · 편집 불가처럼 지금 그 페이지를 제대로 쓸 수 없는 상태(SEED 는 Tone 마다 Weak · Solid 를 두고 쓰임을 제한하지 않는다).

닫기는 한 번 보면 되는 안내에만제목 링크 복사

새 기능 · 새 버전처럼 한 번 보면 되는 안내만 닫을 수 있게 한다 — 닫은 것을 기억해 다시 띄우지 않는다. 경고 · 오류 배너는 닫지 못한다.

글제목 링크 복사

제목은 상태를 나타내는 짧은 말 — "연결 끊김" · "곧 만료". 본문은 제목을 되풀이하지 않고 해요체 문장에 마침표. 버튼은 동작 이름 — "다시 연결" · "업데이트" · "구독 보기".

코드제목 링크 복사

레시피 recipes/shadcn/components/ui/page-banner.tsx 를 쓴다. 아래 미리보기는 스펙 값으로 그린 모습이다.

연결 끊김 — 버튼 하나제목 링크 복사

import { PageBanner } from "@/components/ui/page-banner"

<PageBanner tone="critical" title="연결 끊김" button={{ label: "다시 연결", onClick: reconnect }}>
  증권 연결 키가 만료돼 시세를 받지 못해요.
</PageBanner>

새 기능 · 곧 만료제목 링크 복사

{/* 한 번 보면 되는 안내 — 닫으면 다시 띄우지 않는다 */}
<PageBanner tone="informative" title="새 기능" interaction="dismissible" open={!seen} onDismiss={markSeen}>
  반복 거래를 자동으로 기록할 수 있어요.
</PageBanner>

<PageBanner tone="warning" variant="solid" title="곧 만료" button={{ label: "구독 보기", onClick: openSubscription }}>
  Pro 이용이 10월 31일에 끝나요.
</PageBanner>

Behavior제목 링크 복사

Accessibility제목 링크 복사

Do / Don't제목 링크 복사

✅ Do제목 링크 복사

• 페이지 맨 위에 하나, 그 페이지 전체의 상태만.
• 기본은 옅은 바탕, 짙은 바탕은 더 강하게 알릴 때.
• 버튼은 동작 이름 하나.

❌ Don't제목 링크 복사

• 한 화면에 배너 둘 이상.
• 그 기능의 팁을 배너로 — Callout.
• 경고 · 오류 배너를 닫을 수 있게.

Specification제목 링크 복사

page-banner.yaml 의 규칙을 하나도 빼지 않고 조건마다 그린다 — 웹 · 앱이 Page Banner 를 만들 때 이 값을 그대로 쓴다. 조건이 없는 Base 가 모든 조합에 걸리고, 뒤의 규칙이 앞의 같은 값을 덮는다. 상태는 enabled 에서 바뀌는 값만 적었다.

SEED 와 다른 점제목 링크 복사

• 좌우 여백은 화면 여백 24 — SEED 16. 띠 안 글이 페이지 글과 같은 선에서 시작한다.
• 톤은 다섯 — magic(AI)은 두지 않는다.
• 짙은 바탕의 글은 흰색 — groo bg-*-solid 위 5.06 이상(SEED warning 은 노랑 위 검정 글).
• 아이콘은 lucide 선 아이콘(v106).
• 나중에 나타나는 경고 · 위험은 role="alert", 버튼은 모두 type="button".

Migration notes제목 링크 복사

2026-10-22 — 짙은 바탕은 더 강하게 알릴 때제목 링크 복사

"짙은 바탕은 무거운 상태에만" 은 10-02 알림 비교 페이지의 그림 꼬리표("짙음(solid) — 무거운 상태에만")가 규칙이 된 것이다 — 같은 페이지 글은 "짙은 바탕을 고르는 기준 문장은 없다" 였다. 예시(연결 끊김 · 거절 · 편집 불가)는 그대로 두고 금지를 권장으로 낮췄다(남은 규칙 R14). 사용자 결정 — https://claude.ai/artifact/Mag1tEv51MdQHdy1o8hY3L. 값 변경 없음.

2026-10-22 — Callout 견주기에 용도 · Sticky제목 링크 복사

Page Banner ↔ Callout 표에 SEED 의 "용도" · "Sticky" 두 줄을 더하고, 다른 알림과 고르는 표는 Snackbar 문서 한 벌로 링크한다(사용자 결정 3B — https://claude.ai/artifact/NuEPiLRH2fJidXdKzcDsCX). 코드 예시 · 사이트 그림 · 레시피 예제 · 미리보기의 실제 증권사 이름을 걷었다("증권 연결 키가 만료돼 …"). 값 변경 없음.

2026-10-02 — 새로 둔다(SEED Page Banner)제목 링크 복사

사용자가 비교 페이지에서 Page Banner 를 두기로 정했다. 세 제품에는 지금 페이지 배너가 없다 — 앱 적용 때 화면마다 정할 자리:

• Desk 웹 · 앱 증권 — 불러오기에 실패해도 "증권 계정을 연결해 주세요" 화면이 페이지를 대신한다(연결돼 있는데도). 연결 끊김은 Page Banner + 지난 값, 연결이 없을 때만 Result Section.
• Desk 앱 업데이트 — 업데이트는 화면 전체, 결제 문자 안내는 홈 맨 위 PAlert(iOS 만).
• HR 공지 — 로그인할 때마다 공지 대화상자가 차례로 뜬다("오늘 하루 보지 않기" 는 모든 공지를 하루 숨긴다).
• 환경 표시(DEVELOPMENT 워터마크 · DEV 배지) — 배너가 아니다. 보조 기술에 숨긴다(aria-hidden).