From 4a31331ae1db129369a746beaf0aec587464f3a3 Mon Sep 17 00:00:00 2001
From: ttipo <kysung114y@gmail.com>
Date: Mon, 22 Jun 2026 16:19:49 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=B3=B4=EA=B3=A0=EC=84=9C=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20=ED=95=AD=EB=AA=A9=20=EC=83=81=ED=83=9C=EB=A5=BC=20?=
 =?UTF-8?q?=EB=82=B4=EC=9A=A9=20=EC=95=9E=20=EB=93=9C=EB=A1=AD=EB=8B=A4?=
 =?UTF-8?q?=EC=9A=B4=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

세그먼트 버튼 → 할 일 내용 앞쪽의 DropdownSelect(미착수/진행중/완료)로 선택하도록 변경.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/pages/relay/TaskDetailPage.vue | 40 ++++++++++++---------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/frontend/src/pages/relay/TaskDetailPage.vue b/frontend/src/pages/relay/TaskDetailPage.vue
index 1a00db6..2bdf5e5 100644
--- a/frontend/src/pages/relay/TaskDetailPage.vue
+++ b/frontend/src/pages/relay/TaskDetailPage.vue
@@ -29,6 +29,7 @@ import { useTaskStore } from '@/stores/task.store'
 import { useAuthStore } from '@/stores/auth.store'
 import { useDialog } from '@/composables/useDialog'
 import UserAvatar from '@/components/UserAvatar.vue'
+import DropdownSelect from '@/components/DropdownSelect.vue'
 import { attachmentKindOf, fileBadge } from '@/shared/utils/format'
 
 const route = useRoute()
@@ -307,6 +308,9 @@ const WORK_STATUS_LABEL: Record<ChecklistWorkStatus, string> = {
   done: '완료',
 }
 const WORK_STATUS_OPTIONS: ChecklistWorkStatus[] = ['todo', 'doing', 'done']
+// 보고서 작성 모달의 진행 상태 드롭다운 옵션
+const WORK_STATUS_DD: { value: ChecklistWorkStatus; label: string }[] =
+  WORK_STATUS_OPTIONS.map((s) => ({ value: s, label: WORK_STATUS_LABEL[s] }))
 
 // KST(UTC+9) 기준 'yyyy-MM-dd' — '당일' 판정
 function kstDate(iso: string | Date): string {
@@ -1734,17 +1738,14 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
               :key="it.id"
               class="cp-write-item"
             >
+              <DropdownSelect
+                v-model="it.workStatus"
+                :options="WORK_STATUS_DD"
+                align="left"
+                aria-label="진행 상태"
+                class="cp-write-dd"
+              />
               <span class="cp-write-text">{{ it.text }}</span>
-              <span class="ws-seg">
-                <button
-                  v-for="s in WORK_STATUS_OPTIONS"
-                  :key="s"
-                  type="button"
-                  class="ws-btn"
-                  :class="[s, { active: it.workStatus === s }]"
-                  @click="it.workStatus = s"
-                >{{ WORK_STATUS_LABEL[s] }}</button>
-              </span>
             </div>
             <div
               v-if="writeItemsByCat(writeTab).length === 0"
@@ -3484,11 +3485,11 @@ a.file-info {
   background: var(--accent-hover);
 }
 /* 보고서 작성 폼 */
-/* 보고서 작성 모달 — 항목 + 상태 선택 */
+/* 보고서 작성 모달 — 진행 상태 드롭다운(앞) + 항목 내용 */
 .cp-write-item {
   display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
+  align-items: center;
+  gap: 0.625rem;
   padding-bottom: 0.625rem;
   border-bottom: 1px solid var(--border);
 }
@@ -3499,10 +3500,17 @@ a.file-info {
 .cp-write-text {
   font-size: 0.8125rem;
   color: var(--text);
+  min-width: 0;
 }
-.cp-write-item .ws-seg {
-  margin-left: 0;
-  align-self: flex-start;
+/* 진행 상태 드롭다운 — 콤팩트 고정폭(내용 앞쪽) */
+.cp-write-dd {
+  flex-shrink: 0;
+}
+.cp-write-dd :deep(.dd-trigger) {
+  height: 1.875rem;
+  min-width: 5.5rem;
+  padding: 0 0.5rem;
+  font-size: 0.75rem;
 }
 .cp-write-foot {
   border-top: 1px solid var(--border);