Prose
먼저 보고, 그다음 계약을 읽습니다
임의 마크다운/HTML 트리에 AXE 타이포·간격·컬러를 입히는 본문 래퍼.
Component intent의도와 경계 읽기
단일 `.axe-prose` 클래스로 안의 모든 표준 HTML(h1–h6·p·ul/ol·blockquote·hr·table·pre/code·img)에 디자인 토큰 기반 타이포 스케일·수직 리듬·링크/표/코드 스타일을 부여한다. MDX 컴포넌트나 react-markdown 이 렌더한 트리를 한 겹 감싸는 용도이며, 자체 상호작용 상태는 없는 forwardRef `<div>` 다. 최대 폭은 `--prose-max` 토큰이 잡아 정보 밀도 높은 문서 페이지의 가독 폭을 유지한다.
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
import { Prose } from "@axe/ui";<Prose> <h1>배포 SSOT</h1> <p> origin/main 의 commit SHA 가 배포의 <a href="/ops/runbook">단일 진실</a>이다. </p> <table> <thead> <tr><th>서비스</th><th>포트</th></tr> </thead> <tbody> <tr><td>frame proxy</td><td>3712</td></tr> </tbody> </table></Prose>import { Prose } from "@axe/ui";import ReactMarkdown from "react-markdown";<Prose> <ReactMarkdown>{markdownSource}</ReactMarkdown></Prose><div class="axe-prose"> <h1>배포 SSOT</h1> <p>origin/main 의 commit SHA 가 배포의 단일 진실이다.</p></div>Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
children | React.ReactNode | — | — | prose 스타일을 받을 표준 HTML/마크다운 트리. |
...rest | React.HTMLAttributes<HTMLDivElement> | — | — | className(축약 없이 axe-prose 뒤에 병합) 포함 나머지 속성은 루트 div 로 전파. |
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-prose | stable | 본문 래퍼 루트. 하위 표준 요소를 자손 셀렉터(.axe-prose h1 …)로 스타일링. |
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
role 없는 순수 <div>. 의미(heading·표·리스트)는 안에 넣는 자식 마크업이 담당한다.
heading 위계(h1→h2→h3, 건너뜀 없이)·표의 <th scope>·이미지 alt·링크 텍스트 등 접근성은 감싸는 소비자 마크업의 책임. Prose 는 시각 스타일만 입히고 구조를 바꾸지 않는다. 링크는 밑줄(text-decoration)로 어포던스를 유지하며 색상만 hover 전환한다(모션 아님).