From c32df3cf390f4abbc53340bfe895b67dd3581595 Mon Sep 17 00:00:00 2001
From: ttipo <kysung114y@gmail.com>
Date: Sun, 21 Jun 2026 18:10:19 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=88=98=EC=A0=95=20=EC=9A=94=EC=B2=AD?=
 =?UTF-8?q?=20=EC=83=81=ED=83=9C=EC=97=90=EC=84=9C=20=EB=B3=B4=EC=99=84=20?=
 =?UTF-8?q?=ED=95=AD=EB=AA=A9=EC=9D=84=20=EC=B2=B4=ED=81=AC=EB=B0=95?=
 =?UTF-8?q?=EC=8A=A4=EC=97=90=20X=EB=A1=9C=20=ED=91=9C=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

업무가 '수정 요청됨(changes)' 상태일 때 상세 화면 체크리스트의
미완료 항목을 빨강 X(보완 필요)로 표시해 담당자가 보완 대상을 명확히 보게 한다.

- 완료 항목은 초록 체크, 보완 항목은 빨강 X + '보완 필요' 태그
- changes 상태가 아닐 때는 기존대로 체크/빈 박스 유지

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

diff --git a/frontend/src/pages/relay/TaskDetailPage.vue b/frontend/src/pages/relay/TaskDetailPage.vue
index d65060e..8ebd411 100644
--- a/frontend/src/pages/relay/TaskDetailPage.vue
+++ b/frontend/src/pages/relay/TaskDetailPage.vue
@@ -57,6 +57,9 @@ const checklistPct = computed(() => {
   return total ? Math.round((checklistDone.value / total) * 100) : 0
 })
 
+// 수정 요청(changes) 상태 — 미완료 항목을 '보완 필요(X)'로 표기
+const isChangesReview = computed(() => task.value?.status === 'changes')
+
 // 카테고리별 그룹(항목 있는 카테고리만, 필수/관리/보안/부가 고정 순서)
 const checklistGroups = computed(() =>
   CHECKLIST_CATEGORIES.map((cat) => ({
@@ -578,13 +581,14 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
                   v-for="(item, i) in group.items"
                   :key="item.id ?? i"
                   class="citem"
-                  :class="{ done: item.done }"
+                  :class="{ done: item.done, todo: !item.done && isChangesReview }"
                 >
                   <span
                     class="cbox"
-                    :class="{ done: item.done }"
+                    :class="{ done: item.done, todo: !item.done && isChangesReview }"
                   >
                     <svg
+                      v-if="item.done"
                       viewBox="0 0 24 24"
                       fill="none"
                       stroke="currentColor"
@@ -592,8 +596,21 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
                       stroke-linecap="round"
                       stroke-linejoin="round"
                     ><path d="M20 6 9 17l-5-5" /></svg>
+                    <svg
+                      v-else-if="isChangesReview"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="3.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    ><path d="M18 6 6 18M6 6l12 12" /></svg>
                   </span>
                   <span class="ctext">{{ item.text }}</span>
+                  <span
+                    v-if="!item.done && isChangesReview"
+                    class="citem-tag"
+                  >보완 필요</span>
                 </div>
               </div>
               <div
@@ -2208,6 +2225,14 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
 .cbox.done svg {
   opacity: 1;
 }
+/* 보완 필요(수정 요청 상태의 미완료 항목) — 빨강 X */
+.cbox.todo {
+  background: var(--red);
+  border-color: var(--red);
+}
+.cbox.todo svg {
+  opacity: 1;
+}
 .citem .ctext {
   font-size: 0.844rem;
   color: var(--text);
@@ -2216,6 +2241,21 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
   color: var(--text-3);
   text-decoration: line-through;
 }
+.citem.todo .ctext {
+  color: var(--red);
+  font-weight: 500;
+}
+.citem-tag {
+  margin-left: auto;
+  flex-shrink: 0;
+  font-size: 0.688rem;
+  font-weight: 700;
+  color: var(--red);
+  background: var(--red-weak);
+  border: 1px solid var(--red-border);
+  border-radius: 999px;
+  padding: 0.0625rem 0.4375rem;
+}
 
 /* 댓글/활동 탭 */
 .thread-tabs {