From 3380bbdcff78ff51288d607622368ecafa9df035 Mon Sep 17 00:00:00 2001
From: ttipo <kysung114y@gmail.com>
Date: Tue, 23 Jun 2026 00:00:21 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=9E=91=EC=97=85=EC=9E=90=20?=
 =?UTF-8?q?=EC=A7=84=ED=96=89=EC=83=81=ED=83=9C(=EB=8C=80=EA=B8=B0/?=
 =?UTF-8?q?=EC=A7=84=ED=96=89=EC=A4=91/=EC=99=84=EB=A3=8C)=20=EB=9D=BC?=
 =?UTF-8?q?=EB=B2=A8=C2=B7=EC=83=89=20SSOT=20=ED=86=B5=ED=95=A9=20(Phase?=
 =?UTF-8?q?=204)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

StatusSelect 와 업무 상세에 각각 중복 정의되던 WORK_STATUS_META/ORDER 를
shared/constants/workStatus.ts 단일 소스로 추출(값 동일, 표시 변화 없음).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/StatusSelect.vue    | 10 ++++------
 frontend/src/pages/relay/TaskDetailPage.vue | 15 +++++----------
 frontend/src/shared/constants/workStatus.ts | 18 ++++++++++++++++++
 3 files changed, 27 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/shared/constants/workStatus.ts

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<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' },
-}
-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<ChecklistCategory, string> = {
   필수: '#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<ChecklistWorkStatus, WorkStatusMeta> = {
+  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']