feat: 중간 점검 보고를 모달 + 카테고리 탭으로 열람

하단 토글 목록 제거 → 상단 '보고 완료' 체크포인트 클릭 시 모달로 보고 내용 표시.
모달은 업무 생성의 카테고리 탭(필수/관리/보안/부가) 방식으로 항목을 구분해 보여준다.
보고 스냅샷에 category 추가(백엔드 엔티티/서비스 + 프론트 타입/뷰/스토어).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

backend/src/modules/task/entities/checkpoint-report.entity.ts

@@ -10,12 +10,16 @@ import {
 import { User } from '../../user/entities/user.entity';
 import { Task } from './task.entity';
 import { TaskCheckpoint } from './task-checkpoint.entity';
-import type { ChecklistWorkStatus } from './checklist-item.entity';
+import type {
+  ChecklistCategory,
+  ChecklistWorkStatus,
+} from './checklist-item.entity';
 
 // 보고 스냅샷의 항목 단위(보고 시점의 항목별 진행 상태를 동결 보관)
 export interface ReportItemSnapshot {
   itemId: string;
   text: string;
+  category: ChecklistCategory;
   workStatus: ChecklistWorkStatus;
 }
 

backend/src/modules/task/task.service.ts

@@ -1383,7 +1383,7 @@ export class TaskService {
         c.workStatus = ws;
         changed.push(c);
       }
-      return { itemId: c.id, text: c.text, workStatus: ws };
+      return { itemId: c.id, text: c.text, category: c.category, workStatus: ws };
     });
     if (changed.length) {
       await this.checklistRepo.save(changed);

frontend/src/mock/relay.mock.ts

@@ -67,7 +67,7 @@ export interface CheckpointReportView {
   checkpointId: string
   reporterName: string
   note: string | null
-  items: { text: string; workStatus: ChecklistWorkStatus }[]
+  items: { text: string; category: ChecklistCategory; workStatus: ChecklistWorkStatus }[]
   /** 점검일 표시 */
   dateLabel: string
   /** 보고 시각(상대) */

frontend/src/pages/relay/TaskDetailPage.vue

@@ -17,6 +17,7 @@ import {
   type ChecklistCategory,
   type ChecklistItem,
   type ChecklistWorkStatus,
+  type CheckpointReportView,
   type Comment,
   type TaskCheckpointView,
   type TaskDetail,
@@ -365,13 +366,21 @@ async function submitReport() {
   }
 }
 
-// --- 보고 기록 펼치기(지시자 열람) ---
-const openReports = ref<Set<string>>(new Set())
-function toggleReport(id: string) {
-  const s = new Set(openReports.value)
-  if (s.has(id)) s.delete(id)
-  else s.add(id)
-  openReports.value = s
+// --- 보고 기록 열람(모달) ---
+const openedReport = ref<CheckpointReportView | null>(null)
+const reportTab = ref<ChecklistCategory>('필수')
+// 보고 완료 체크포인트 클릭 → 해당 체크포인트의 최신 보고를 모달로 연다
+function openReportModal(cp: TaskCheckpointView) {
+  const r = task.value?.checkpointReports.find((x) => x.checkpointId === cp.id)
+  if (!r) return
+  openedReport.value = r
+  reportTab.value = '필수'
+}
+function reportItemsByCat(cat: ChecklistCategory) {
+  return openedReport.value?.items.filter((it) => it.category === cat) ?? []
+}
+function reportCatCount(cat: ChecklistCategory): number {
+  return reportItemsByCat(cat).length
 }
 // 담당자 액션 카드 테마(시안): changes→빨강 / review→앰버 / done→초록 / 그 외→accent
 const assigneeCardClass = computed(() => {
@@ -1253,6 +1262,15 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
                   >
                     {{ reportingCpId === cp.id ? '취소' : '보고서 작성' }}
                   </button>
+                  <button
+                    v-else-if="checkpointState(cp) === 'reported'"
+                    class="cp-state reported clickable"
+                    type="button"
+                    title="보고 내용 보기"
+                    @click="openReportModal(cp)"
+                  >
+                    보고 완료
+                  </button>
                   <span
                     v-else
                     class="cp-state"
@@ -1314,54 +1332,6 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
                   </button>
                 </div>
               </div>
-
-              <!-- 보고 기록(클릭하여 열람) -->
-              <div
-                v-if="task.checkpointReports.length"
-                class="cp-rep-list"
-              >
-                <div
-                  v-for="r in task.checkpointReports"
-                  :key="r.id"
-                  class="cp-rep"
-                >
-                  <button
-                    type="button"
-                    class="cp-rep-head"
-                    @click="toggleReport(r.id)"
-                  >
-                    <span
-                      class="cp-rep-caret"
-                      :class="{ open: openReports.has(r.id) }"
-                    >▸</span>
-                    <b>{{ r.reporterName }}</b>
-                    <span class="cp-rep-meta">{{ r.dateLabel }} · {{ r.timeLabel }}</span>
-                  </button>
-                  <div
-                    v-if="openReports.has(r.id)"
-                    class="cp-rep-body"
-                  >
-                    <div
-                      v-if="r.note"
-                      class="cp-rep-note"
-                    >
-                      {{ r.note }}
-                    </div>
-                    <ul class="cp-rep-items">
-                      <li
-                        v-for="(it, i) in r.items"
-                        :key="i"
-                      >
-                        <span
-                          class="ws-badge"
-                          :class="it.workStatus"
-                        >{{ WORK_STATUS_LABEL[it.workStatus] }}</span>
-                        <span class="cp-rep-itext">{{ it.text }}</span>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
             </div>
           </div>
 
@@ -1632,6 +1602,95 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
         </div>
       </div>
     </Teleport>
+
+    <!-- 중간 점검 보고 열람 모달 -->
+    <Teleport to="body">
+      <div
+        class="modal-backdrop"
+        :class="{ open: !!openedReport }"
+        @click.self="openedReport = null"
+      >
+        <div
+          v-if="openedReport"
+          class="cp-modal"
+          role="dialog"
+          aria-modal="true"
+          aria-label="중간 점검 보고"
+        >
+          <div class="cp-modal-head">
+            <div>
+              <div class="cp-modal-title">
+                중간 점검 보고
+              </div>
+              <div class="cp-modal-sub">
+                {{ openedReport.reporterName }} · 점검일 {{ openedReport.dateLabel }} · {{ openedReport.timeLabel }}
+              </div>
+            </div>
+            <button
+              class="rv-x"
+              type="button"
+              aria-label="닫기"
+              @click="openedReport = null"
+            >
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ><path d="M18 6 6 18M6 6l12 12" /></svg>
+            </button>
+          </div>
+          <div
+            v-if="openedReport.note"
+            class="cp-modal-note"
+          >
+            {{ openedReport.note }}
+          </div>
+          <!-- 카테고리 탭 -->
+          <div
+            class="cat-tabs"
+            role="tablist"
+          >
+            <button
+              v-for="tab in CHECKLIST_CATEGORIES"
+              :key="tab"
+              type="button"
+              class="cat-tab"
+              :class="[categoryClass(tab), { active: reportTab === tab }]"
+              role="tab"
+              :aria-selected="reportTab === tab"
+              @click="reportTab = tab"
+            >
+              <span class="cat-dot" />
+              {{ tab }}
+              <span class="cat-count">{{ reportCatCount(tab) }}</span>
+            </button>
+          </div>
+          <!-- 항목 목록 -->
+          <div class="cp-modal-items">
+            <div
+              v-for="(it, i) in reportItemsByCat(reportTab)"
+              :key="i"
+              class="cp-modal-item"
+            >
+              <span
+                class="ws-badge"
+                :class="it.workStatus"
+              >{{ WORK_STATUS_LABEL[it.workStatus] }}</span>
+              <span class="cp-mi-text">{{ it.text }}</span>
+            </div>
+            <div
+              v-if="reportItemsByCat(reportTab).length === 0"
+              class="cp-modal-empty"
+            >
+              '{{ reportTab }}' 항목이 없습니다.
+            </div>
+          </div>
+        </div>
+      </div>
+    </Teleport>
   </AppShell>
 </template>
 
@@ -3288,12 +3347,14 @@ a.file-info {
 .cp-d-date {
   font-weight: 600;
 }
-/* 상태 배지 */
+/* 상태 배지(span/button 공용) */
 .cp-state {
   margin-left: auto;
+  font-family: inherit;
   font-size: 0.75rem;
   font-weight: 700;
   padding: 0.1875rem 0.5625rem;
+  border: none;
   border-radius: 20px;
   color: var(--text-3);
   background: #eceef1;
@@ -3310,6 +3371,12 @@ a.file-info {
   color: var(--red);
   background: var(--red-weak);
 }
+.cp-state.clickable {
+  cursor: pointer;
+}
+.cp-state.reported.clickable:hover {
+  background: #cfe9d8;
+}
 .cp-report-btn {
   margin-left: auto;
   border: none;
@@ -3401,81 +3468,123 @@ a.file-info {
   border-color: var(--accent);
   box-shadow: 0 0 0 3px var(--accent-weak);
 }
-/* 보고 기록(열람) */
-.cp-rep-list {
+/* 보고 열람 모달 */
+.cp-modal {
+  width: min(34rem, calc(100vw - 2rem));
+  max-height: calc(100vh - 4rem);
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
-  border-top: 1px solid var(--border);
-  padding-top: 0.625rem;
-}
-.cp-rep {
-  background: rgba(20, 24, 33, 0.03);
-  border-radius: var(--radius);
+  background: #fff;
+  border-radius: 0.875rem;
+  box-shadow: 0 1.5rem 4.375rem rgba(20, 24, 33, 0.3);
   overflow: hidden;
 }
-.cp-rep-head {
+.cp-modal-head {
   display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 1.125rem 1.25rem 0.875rem;
+  border-bottom: 1px solid var(--border);
+}
+.cp-modal-title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--text);
+}
+.cp-modal-sub {
+  margin-top: 0.25rem;
+  font-size: 0.781rem;
+  color: var(--text-3);
+}
+.cp-modal-note {
+  font-size: 0.8125rem;
+  color: var(--text-2);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  padding: 0.75rem 1.25rem;
+  background: rgba(20, 24, 33, 0.03);
+  border-bottom: 1px solid var(--border);
+}
+/* 카테고리 탭 */
+.cat-tabs {
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.75rem 1.25rem 0;
+}
+.cat-tab {
+  display: inline-flex;
   align-items: center;
-  gap: 0.4375rem;
-  width: 100%;
+  gap: 0.375rem;
   border: none;
   background: transparent;
   font-family: inherit;
-  text-align: left;
-  cursor: pointer;
-  padding: 0.5rem 0.625rem;
-  font-size: 0.781rem;
-  color: var(--text);
-}
-.cp-rep-head:hover {
-  background: rgba(20, 24, 33, 0.04);
-}
-.cp-rep-caret {
-  color: var(--text-3);
-  transition: transform 0.15s ease;
-  font-size: 0.75rem;
-}
-.cp-rep-caret.open {
-  transform: rotate(90deg);
-}
-.cp-rep-meta {
-  margin-left: auto;
-  font-size: 0.6875rem;
-  color: var(--text-3);
-  white-space: nowrap;
-}
-.cp-rep-body {
-  padding: 0 0.625rem 0.5625rem 1.5rem;
-}
-.cp-rep-note {
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
   color: var(--text-2);
-  margin-bottom: 0.375rem;
-  white-space: pre-wrap;
+  padding: 0.375rem 0.625rem;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
 }
-.cp-rep-items {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+.cat-tab:hover {
+  background: #f1f2f4;
+}
+.cat-tab .cat-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: var(--text-3);
+}
+.cat-tab.sec-1 .cat-dot {
+  background: var(--accent);
+}
+.cat-tab.sec-2 .cat-dot {
+  background: #1b7a47;
+}
+.cat-tab.sec-3 .cat-dot {
+  background: #c0394f;
+}
+.cat-tab.sec-4 .cat-dot {
+  background: #a96a13;
+}
+.cat-tab .cat-count {
+  font-size: 0.6875rem;
+  font-weight: 700;
+  color: var(--text-3);
+}
+.cat-tab.active {
+  background: var(--accent-weak);
+  color: var(--accent);
+}
+.cat-tab.active .cat-count {
+  color: var(--accent);
+}
+/* 모달 항목 목록 */
+.cp-modal-items {
+  padding: 0.75rem 1.25rem 1.25rem;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.5rem;
 }
-.cp-rep-items li {
+.cp-modal-item {
   display: flex;
   align-items: center;
-  gap: 0.4375rem;
+  gap: 0.625rem;
 }
-.cp-rep-items .ws-badge {
+.cp-modal-item .ws-badge {
   margin-left: 0;
+  flex-shrink: 0;
 }
-.cp-rep-itext {
-  font-size: 0.75rem;
-  color: var(--text-2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.cp-mi-text {
+  font-size: 0.8125rem;
+  color: var(--text);
+}
+.cp-modal-empty {
+  font-size: 0.8125rem;
+  color: var(--text-3);
+  padding: 1rem 0;
+  text-align: center;
 }
 </style>
 

frontend/src/stores/task.store.ts

@@ -215,7 +215,11 @@ function toTaskDetailView(api: ApiTaskDetail): TaskDetailView {
       checkpointId: r.checkpointId,
       reporterName: r.reporter?.name ?? '알 수 없음',
       note: r.note,
-      items: r.items.map((it) => ({ text: it.text, workStatus: it.workStatus })),
+      items: r.items.map((it) => ({
+        text: it.text,
+        category: it.category,
+        workStatus: it.workStatus,
+      })),
       dateLabel: r.checkAt ? monthDayKo(r.checkAt) : '',
       timeLabel: relativeTimeKo(r.createdAt),
     })),

frontend/src/types/task.ts

@@ -46,6 +46,7 @@ export interface ApiCheckpoint {
 export interface ApiReportItem {
   itemId: string
   text: string
+  category: ChecklistCategory
   workStatus: ChecklistWorkStatus
 }