피드백 / callout
Callout
본문 흐름 안에 끼우는 시맨틱 강조 박스(info/success/warning/danger/note).
01 · Specimen
먼저 보고, 그다음 계약을 읽습니다
본문 흐름 안에 끼우는 시맨틱 강조 박스(info/success/warning/danger/note).
Workbench 불러오는 중…
Component intent의도와 경계 읽기
아이콘 + 제목 + 본문의 3파트 알림 블록. variant 가 시맨틱 색과 기본 아이콘(ⓘ/✓/⚠/✕/•)을 결정하고, accent 가 색 강조 방식을 고른다 — icon(기본, 아이콘+전체 트림) · left-bar(좌측 4px 바만, 더 미니멀) · both(둘 다) · none(색 트림 제거). 루트에 role="note" 가 고정되어 보조 설명 영역임을 알린다.
02 · Use
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
기본(warning)
import { Callout } from "@axe/ui";<Callout variant="warning" title="마감 임박"> IC 자료 제출이 D-1 남았습니다.</Callout>left-bar accent (미니멀 정보용)
import { Callout } from "@axe/ui";<Callout variant="info" accent="left-bar"> 이 값은 공단 고지서 기준으로 검증되었습니다.</Callout>CSS-only (비-React)
<div class="axe-callout axe-callout--warning axe-callout--accent-icon" role="note"> <div class="axe-callout__icon" aria-hidden>⚠</div> <div class="axe-callout__content"> <div class="axe-callout__title">마감 임박</div> IC 자료 제출이 D-1 남았습니다. </div></div>03 · React
Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
variant | "info" | "success" | "warning" | "danger" | "note" | — | "info" | 시맨틱 색과 기본 아이콘을 결정. note 는 중립 회색. |
accent | "icon" | "left-bar" | "both" | "none" | — | "icon" | 색 강조 방식. icon=아이콘+전체 트림(기본) · left-bar=좌측 4px 색 바만 · both=바+아이콘 · none=색 트림 제거(배경/텍스트만). |
title | React.ReactNode | — | — | 굵은 제목 줄(`.axe-callout__title`). 있을 때만 렌더. HTMLAttributes 의 title 은 이 prop 으로 대체됨. |
icon | React.ReactNode | — | — | 좌측 아이콘 override. 미지정 시 variant 기본 아이콘 사용. accent 가 icon 또는 both 일 때만 렌더된다. |
children | React.ReactNode | — | — | 콜아웃 본문 — 제목 아래 `.axe-callout__content` 안에 들어간다. |
...rest | Omit<React.HTMLAttributes<HTMLDivElement>, "title"> | — | — | className 병합, 나머지는 루트 div 로 전파. rest 가 role 보다 뒤에 전개되므로 role="alert" 등으로 덮어쓸 수 있다. |
04 · Any stack
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-callout | stable | 루트 div — flex row·border·radius-md·sm 텍스트. |
.axe-callout__icon | stable | 좌측 아이콘 박스(flex-shrink 0). variant 색 상속. |
.axe-callout__content | stable | 제목+본문 컨테이너(flex 1, min-width 0). |
.axe-callout__title | stable | 굵은 제목 줄. |
.axe-callout--info | stable | info 변형 — info-soft 배경·info 테두리/아이콘. |
.axe-callout--success | stable | success 변형 — success-soft 트림. |
.axe-callout--warning | stable | warning 변형 — warning-soft 트림. |
.axe-callout--danger | stable | danger 변형 — danger-soft 트림. |
.axe-callout--note | stable | note 변형 — 중립 subtle 배경·secondary 텍스트. |
.axe-callout--accent-icon | stable | accent=icon(기본) — 아이콘+전체 트림. 추가 규칙 없는 마커. |
.axe-callout--accent-left-bar | stable | accent=left-bar — 좌측 테두리만 4px 로 강조. |
.axe-callout--accent-both | stable | accent=both — 좌측 4px 바 + 아이콘. |
.axe-callout--accent-none | stable | accent=none — 색 트림을 border-subtle 로 눌러 배경/텍스트만 남김. |
05 · Inclusive
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
ARIA
루트에 role="note" 고정 — 부가 설명 영역임을 보조기술에 알린다. 아이콘은 `aria-hidden`(의미는 텍스트로).
Notes
긴급 통지가 필요하면 rest 로 role="alert"(또는 aria-live)를 넘겨 덮어쓴다 — warning/danger variant 여도 기본 role 은 alert 가 아니다.
06 · Judgment