/**
* 상태 글리프. 10×10 정사각 격자 위에 90°와 45°만 써서 그린다 - 곡선을 하나도 넣지 않은 것은
* 이 화면들이 법률 서식(체크칸·도장·서류 모서리)의 어휘를 따르기 때문이다.
*
* 모양 자체가 상태를 담는다는 점이 핵심이다. 예전에는 색만 달랐던 탓에, 색약 사용자나
* 흑백 출력에서는 "완료"와 "개방불가"가 똑같이 보였다.
*
* 색은 넣지 않는다. currentColor를 그대로 물려받아 감싼 칩의 글자색을 따른다.
*/
export type GlyphKind =
/** 아직 손대지 않음 - 빈 사각 */
| 'idle'
/** 진행 중 - 왼쪽 절반만 채운 사각 */
| 'progress'
/** 끝남 - 채운 사각에 각진 체크 */
| 'done'
/** 확인이 필요함 - 삼각 */
| 'caution'
/** 막힘·불가 - 사각을 가로지르는 사선 */
| 'blocked'
/** 자료·문서 - 모서리를 접은 사각 */
| 'document'
/** 메모 - 가로줄 세 개 */
| 'note'
/** 끝난 항목 표시 - 상자 없는 각진 체크. 이미 색을 채운 자리 위에 얹을 때 쓴다. */
| 'check'
interface Props {
kind: GlyphKind
/** 픽셀 크기. 표 안에서는 10, 제목 옆에서는 12를 쓴다. */
size?: number
className?: string
}
export default function StatusGlyph({ kind, size = 10, className = '' }: Props) {
const common = {
width: size,
height: size,
viewBox: '0 0 10 10',
// 상태 이름은 옆의 글자가 이미 말해 준다. 보조기술이 같은 말을 두 번 읽지 않게 감춘다.
'aria-hidden': true,
focusable: false,
className: `shrink-0 ${className}`,
} as const
const stroke = {
stroke: 'currentColor',
strokeWidth: 1.6,
strokeLinecap: 'square',
strokeLinejoin: 'miter',
fill: 'none',
} as const
switch (kind) {
case 'idle':
return (
)
case 'progress':
return (
)
case 'done':
return (
)
case 'caution':
return (
)
case 'blocked':
return (
)
case 'document':
return (
)
case 'note':
return (
)
case 'check':
return (
)
}
}