feat: 수정 요청 상태에서 보완 항목을 체크박스에 X로 표기

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

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

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-21 18:10:19 +09:00
parent 5f0b80593f
commit c32df3cf39
+42 -2
View File
@@ -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 {