File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
/**
* 코드의 tone(의미 토큰)을 실제 Tailwind 클래스로 바꾼다.
*
* DB에는 'emerald' 같은 이름표만 저장하고 클래스는 여기서 붙인다. DB에 Tailwind 클래스를
* 넣으면 화면 스타일을 손볼 때마다 DB를 고쳐야 하기 때문이다.
*
* 맵을 풀어 쓴 이유는 Tailwind가 `bg-${tone}-50` 같은 조립식 클래스명을 빌드 시점에
* 못 찾아 지워버리기 때문이다. 반드시 문자열 전체가 소스에 보여야 한다.
*/
import type { GlyphKind } from '../ui/StatusGlyph'
/** 뱃지: 옅은 배경 + 진한 글씨. 예전 표기. 새 화면은 StatusChip을 쓴다. */
const BADGE: Record<string, string> = {
slate: 'bg-slate-100 text-slate-700',
gray: 'bg-gray-100 text-gray-700',
blue: 'bg-blue-50 text-blue-700',
sky: 'bg-sky-50 text-sky-700',
indigo: 'bg-indigo-50 text-indigo-700',
violet: 'bg-violet-50 text-violet-700',
emerald: 'bg-emerald-50 text-emerald-700',
amber: 'bg-amber-50 text-amber-700',
orange: 'bg-orange-50 text-orange-700',
red: 'bg-red-50 text-red-700',
}
/** 색 띠: 칸반 컬럼 상단에 그리는 한 줄. 업무구간이 쓴다. */
const BAR: Record<string, string> = {
slate: 'bg-slate-400',
gray: 'bg-gray-400',
blue: 'bg-blue-400',
sky: 'bg-sky-400',
indigo: 'bg-indigo-400',
violet: 'bg-violet-400',
emerald: 'bg-emerald-400',
amber: 'bg-amber-400',
orange: 'bg-orange-400',
red: 'bg-red-400',
}
const BADGE_FALLBACK = 'bg-gray-100 text-gray-700'
const BAR_FALLBACK = 'bg-gray-300'
/**
* 모르는 tone이 와도 화면이 깨지지 않게 회색으로 떨어뜨린다 - 코드 관리 화면에서
* 오타가 들어가도 색만 밋밋해질 뿐 항목이 사라지지는 않아야 한다.
*/
export function badgeClass(tone: string | null | undefined): string {
return (tone && BADGE[tone]) || BADGE_FALLBACK
}
export function barClass(tone: string | null | undefined): string {
return (tone && BAR[tone]) || BAR_FALLBACK
}
/**
* 칩: 왼쪽 컬러 바 + 옅은 배경 + 진한 글씨. StatusChip이 쓴다.
*
* 배경만 칠하던 예전 뱃지와 달리 왼쪽에 2px 바를 세우는 이유는, 표에서 상태 칸이
* 세로로 늘어설 때 그 바들이 한 줄로 정렬돼 눈이 빠르게 훑고 내려갈 수 있어서다.
*/
const CHIP: Record<string, string> = {
slate: 'border-slate-400 bg-slate-50 text-slate-700',
gray: 'border-gray-400 bg-gray-50 text-gray-700',
blue: 'border-blue-500 bg-blue-50 text-blue-800',
sky: 'border-sky-500 bg-sky-50 text-sky-800',
indigo: 'border-indigo-500 bg-indigo-50 text-indigo-800',
violet: 'border-violet-500 bg-violet-50 text-violet-800',
emerald: 'border-emerald-600 bg-emerald-50 text-emerald-800',
amber: 'border-amber-500 bg-amber-50 text-amber-800',
orange: 'border-orange-500 bg-orange-50 text-orange-800',
red: 'border-red-500 bg-red-50 text-red-800',
}
const CHIP_FALLBACK = 'border-gray-300 bg-gray-50 text-gray-600'
/**
* tone이 정해지면 글리프 모양도 따라 정해진다. 코드표에 색만 지정해도 알맞은 모양이
* 붙게 하려는 것이다 - 코드 한 줄 추가할 때마다 모양까지 고르게 하면 금방 어긋난다.
*/
const GLYPH: Record<string, GlyphKind> = {
emerald: 'done',
blue: 'progress',
sky: 'progress',
indigo: 'progress',
violet: 'progress',
amber: 'caution',
orange: 'caution',
red: 'blocked',
slate: 'idle',
gray: 'idle',
}
export function chipClass(tone: string | null | undefined): string {
return (tone && CHIP[tone]) || CHIP_FALLBACK
}
export function glyphOf(tone: string | null | undefined): GlyphKind {
return (tone && GLYPH[tone]) || 'idle'
}