diff --git a/frontend/src/components/StatusSelect.vue b/frontend/src/components/StatusSelect.vue index 37a2d87..e7324f6 100644 --- a/frontend/src/components/StatusSelect.vue +++ b/frontend/src/components/StatusSelect.vue @@ -2,17 +2,15 @@ // 진행 상태(대기/진행 중/완료) 선택 드롭다운 — 상태색 테마. 메뉴는 body Teleport(스크롤 클리핑 방지). import { computed } from 'vue' import { useDropdownMenu } from '@/composables/useDropdownMenu' +import { + WORK_STATUS_META as META, + WORK_STATUS_ORDER as ORDER, +} from '@/shared/constants/workStatus' import type { ChecklistWorkStatus } from '@/mock/relay.mock' const props = defineProps<{ modelValue: ChecklistWorkStatus }>() const emit = defineEmits<{ (e: 'update:modelValue', v: ChecklistWorkStatus): void }>() -const META: Record = { - todo: { label: '대기', color: '#9298a3', weak: '#eef0f2' }, - doing: { label: '진행 중', color: '#2563eb', weak: '#e9f0fd' }, - done: { label: '완료', color: '#1f9d57', weak: '#e7f5ed' }, -} -const ORDER: ChecklistWorkStatus[] = ['todo', 'doing', 'done'] const cur = computed(() => META[props.modelValue]) // 메뉴 위치/토글/바깥클릭 닫기 — 공용 훅(우측 정렬, 너비는 CSS 고정) diff --git a/frontend/src/pages/relay/TaskDetailPage.vue b/frontend/src/pages/relay/TaskDetailPage.vue index 8899b43..5554123 100644 --- a/frontend/src/pages/relay/TaskDetailPage.vue +++ b/frontend/src/pages/relay/TaskDetailPage.vue @@ -31,6 +31,10 @@ import { useDialog } from '@/composables/useDialog' import UserAvatar from '@/components/UserAvatar.vue' import StatusSelect from '@/components/StatusSelect.vue' import { attachmentKindOf, fileBadge } from '@/shared/utils/format' +import { + WORK_STATUS_META, + WORK_STATUS_ORDER, +} from '@/shared/constants/workStatus' const route = useRoute() const router = useRouter() @@ -302,16 +306,7 @@ const isAssignee = computed( /* ============================================================ * 중간 점검(체크포인트) — 작업자가 점검일 당일에 보고서로 전송, 지시자는 기록 열람 * ============================================================ */ -const WORK_STATUS_ORDER: ChecklistWorkStatus[] = ['todo', 'doing', 'done'] -// 진행 상태 표시 메타(라벨/색/약색) -const WORK_STATUS_META: Record< - ChecklistWorkStatus, - { label: string; color: string; weak: string } -> = { - todo: { label: '대기', color: '#9298a3', weak: '#eef0f2' }, - doing: { label: '진행 중', color: '#2563eb', weak: '#e9f0fd' }, - done: { label: '완료', color: '#1f9d57', weak: '#e7f5ed' }, -} +// 진행 상태 메타/순서는 공용 SSOT(shared/constants/workStatus) 사용 // 카테고리 색(탭/그룹 dot) const CAT_COLOR: Record = { 필수: '#2563eb', diff --git a/frontend/src/shared/constants/workStatus.ts b/frontend/src/shared/constants/workStatus.ts new file mode 100644 index 0000000..e6419f1 --- /dev/null +++ b/frontend/src/shared/constants/workStatus.ts @@ -0,0 +1,18 @@ +import type { ChecklistWorkStatus } from '@/mock/relay.mock' + +// 작업자 진행상태(대기/진행 중/완료) 라벨·색 — 단일 진실 공급원(SSOT). +// StatusSelect(드롭다운)·업무 상세(보고서)에서 공통 사용한다. +export interface WorkStatusMeta { + label: string + color: string + weak: string +} + +export const WORK_STATUS_META: Record = { + todo: { label: '대기', color: '#9298a3', weak: '#eef0f2' }, + doing: { label: '진행 중', color: '#2563eb', weak: '#e9f0fd' }, + done: { label: '완료', color: '#1f9d57', weak: '#e7f5ed' }, +} + +// 표시 순서(대기 → 진행 중 → 완료) +export const WORK_STATUS_ORDER: ChecklistWorkStatus[] = ['todo', 'doing', 'done']