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><!-- .axe-prose 밖에 놓인 <a> 는 자손 셀렉터를 못 받는다 — 이 클래스를 단다. 되돌아가기 링크는 화살표를 텍스트에 그대로 두고 변형은 없다. --><p><a class="axe-link" href="/sessions">← 세션 목록</a></p><p class="axe-section__note"> 최근 50건만 표시합니다. 전체는 <a class="axe-link" href="/sessions/1/log">세션 기록</a>에서 볼 수 있습니다.</p>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 …)로 스타일링. |
.axe-link | stable | 인라인 링크 재료(0.38.7) — 산문 **밖**에서도 쓰는 단일 클래스. `.axe-prose a` 는 자손 셀렉터라 이 래퍼 안에서만 서고, 캔버스에 그냥 놓인 <a>(되돌아가기·각주·고지 안 링크)에는 어휘가 없었다. 색 축은 `.axe-prose a` 와 같은 accent 이고 밑줄은 색에만 의존하지 않는 어포던스라 항상 켜 둔다. :visited 는 같은 색(UI 표면의 링크는 열람 이력이 아니라 이동 수단이다). 포커스는 outline 2px accent — box-shadow 링 토큰은 여러 줄로 감기는 인라인 조각마다 halo 를 그려 이웃 줄을 덮고 forced-colors 에서 사라진다. forced-colors 에서는 색이 LinkText 로 간다. 소비자 규약: 되돌아가기 링크(← 세션 목록)는 화살표를 텍스트에 그대로 둔 채 이 클래스만 단다. |
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
role 없는 순수 <div>. 의미(heading·표·리스트)는 안에 넣는 자식 마크업이 담당한다.
heading 위계(h1→h2→h3, 건너뜀 없이)·표의 <th scope>·이미지 alt·링크 텍스트 등 접근성은 감싸는 소비자 마크업의 책임. Prose 는 시각 스타일만 입히고 구조를 바꾸지 않는다. 링크는 밑줄(text-decoration)로 어포던스를 유지하며 색상만 hover 전환한다(모션 아님).