File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
/**
* 상태 글리프. 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 (
<svg {...common}>
<rect x="1.6" y="1.6" width="6.8" height="6.8" {...stroke} />
</svg>
)
case 'progress':
return (
<svg {...common}>
<rect x="1.6" y="1.6" width="6.8" height="6.8" {...stroke} />
<rect x="1.6" y="1.6" width="3.4" height="6.8" fill="currentColor" />
</svg>
)
case 'done':
return (
<svg {...common}>
<rect x="1" y="1" width="8" height="8" fill="currentColor" />
<polyline
points="2.9,5.1 4.3,6.5 7.1,3.4"
stroke="#fff"
strokeWidth="1.5"
strokeLinecap="square"
strokeLinejoin="miter"
fill="none"
/>
</svg>
)
case 'caution':
return (
<svg {...common}>
<polygon points="5,1 9.2,8.6 0.8,8.6" {...stroke} />
<line x1="5" y1="4" x2="5" y2="6.2" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" />
<line x1="5" y1="7.2" x2="5" y2="7.3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" />
</svg>
)
case 'blocked':
return (
<svg {...common}>
<rect x="1.6" y="1.6" width="6.8" height="6.8" {...stroke} />
<line x1="2.4" y1="7.6" x2="7.6" y2="2.4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square" />
</svg>
)
case 'document':
return (
<svg {...common}>
{/* 오른쪽 위 모서리를 접은 종이 */}
<polygon points="1.8,1 6.4,1 8.4,3 8.4,9 1.8,9" {...stroke} />
<polyline points="6.4,1 6.4,3 8.4,3" {...stroke} />
</svg>
)
case 'note':
return (
<svg {...common}>
<line x1="1.4" y1="2.6" x2="8.6" y2="2.6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
<line x1="1.4" y1="5" x2="8.6" y2="5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
<line x1="1.4" y1="7.4" x2="5.8" y2="7.4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
</svg>
)
case 'check':
return (
<svg {...common}>
<polyline points="1.4,5 3.9,7.6 8.6,2.4" {...stroke} strokeWidth={1.8} />
</svg>
)
}
}