feat: 중간 점검(체크포인트) 프론트 — 진행상태 토글·점검일 입력·보고

작성/수정 화면: 중간 점검일 여러 개 입력(추가/삭제, 편집 모드 로드).
상세 화면: 체크리스트 항목별 작업자 진행상태(미착수/진행중/완료) 토글(담당자) + 비담당자 배지,
중간 점검 카드(점검일 목록, 점검일~마감 구간 '보고 보내기', 보고 메모, 보고 이력 스냅샷).
타입/컴포저블/스토어/뷰모델 + 알림(task.checkpoint_reported) 렌더 연동.

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

frontend/src/pages/relay/TaskCreatePage.vue

@@ -99,6 +99,7 @@ async function loadTaskForEdit() {
       category: c.category,
     }))
     existingFiles.value = t.files
+    checkpoints.value = t.checkpoints.map((c) => toDateInput(c.checkAt)).sort()
   } catch {
     // 404 등은 인터셉터가 알림 처리
   }
@@ -159,6 +160,22 @@ function onAssigneeBlur() {
 // --- 마감기한 ---
 const dueDate = ref('') // yyyy-MM-dd (input[type=date])
 
+// --- 중간 점검일(여러 개) — 작업자가 진행 상태를 보고하는 기준일 ---
+const checkpoints = ref<string[]>([]) // yyyy-MM-dd 목록
+const newCheckpoint = ref('')
+function addCheckpoint() {
+  const d = newCheckpoint.value
+  if (!d) return
+  if (!checkpoints.value.includes(d)) {
+    checkpoints.value.push(d)
+    checkpoints.value.sort()
+  }
+  newCheckpoint.value = ''
+}
+function removeCheckpoint(d: string) {
+  checkpoints.value = checkpoints.value.filter((x) => x !== d)
+}
+
 // 체크리스트 (생성 시 항목만 등록 — 완료여부는 항상 false 로 생성)
 // 항목은 카테고리(탭: 필수/관리/보안/부가)별로 추가한다.
 const checklist = ref<ChecklistItem[]>([])
@@ -414,6 +431,7 @@ async function submitTask() {
       .filter((p) => p.length > 0)
     const assigneeIds = assignees.value.map((a) => a.id)
     const dueIso = dueDate.value ? new Date(dueDate.value).toISOString() : null
+    const checkpointIsos = checkpoints.value.map((d) => new Date(d).toISOString())
 
     let tid: number
     if (isEdit.value && taskId.value !== null) {
@@ -428,6 +446,7 @@ async function submitTask() {
             ? { id: c.id, text: c.text, category: c.category }
             : { text: c.text, category: c.category },
         ),
+        checkpoints: checkpointIsos,
       })
       tid = updated.id
     } else {
@@ -439,6 +458,7 @@ async function submitTask() {
         checklist: checklist.value.length
           ? checklist.value.map((c) => ({ text: c.text, category: c.category }))
           : undefined,
+        checkpoints: checkpointIsos.length ? checkpointIsos : undefined,
       })
       tid = created.id
     }
@@ -1032,6 +1052,50 @@ function goBack() {
               >
             </div>
 
+            <div class="side-field">
+              <div class="side-label">
+                중간 점검일 <span class="muted">· 선택 · 여러 개</span>
+              </div>
+              <div class="cp-add">
+                <input
+                  v-model="newCheckpoint"
+                  class="input date-input"
+                  type="date"
+                >
+                <button
+                  class="cp-add-btn"
+                  type="button"
+                  :disabled="!newCheckpoint"
+                  @click="addCheckpoint"
+                >
+                  추가
+                </button>
+              </div>
+              <ul
+                v-if="checkpoints.length"
+                class="cp-list"
+              >
+                <li
+                  v-for="d in checkpoints"
+                  :key="d"
+                  class="cp-item"
+                >
+                  <span>{{ d }}</span>
+                  <button
+                    class="x"
+                    type="button"
+                    title="삭제"
+                    @click="removeCheckpoint(d)"
+                  >
+                    ×
+                  </button>
+                </li>
+              </ul>
+              <p class="cp-hint">
+                담당자가 점검일부터 마감 전까지 진행 상태를 보고할 수 있습니다.
+              </p>
+            </div>
+
             <div class="side-field">
               <div class="side-label">
                 첨부파일 <span
@@ -2141,6 +2205,69 @@ function goBack() {
   display: grid;
   place-items: center;
 }
+/* 중간 점검일 입력/목록 */
+.cp-add {
+  display: flex;
+  gap: 0.5rem;
+}
+.cp-add .date-input {
+  flex: 1;
+}
+.cp-add-btn {
+  flex-shrink: 0;
+  border: 1px solid var(--border-strong);
+  background: #fff;
+  font-family: inherit;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text-2);
+  padding: 0 0.75rem;
+  border-radius: var(--radius);
+  cursor: pointer;
+}
+.cp-add-btn:hover:not(:disabled) {
+  background: #f5f6f8;
+}
+.cp-add-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.cp-list {
+  list-style: none;
+  margin: 0.5rem 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.cp-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.8125rem;
+  color: var(--text);
+  background: #f5f6f8;
+  border-radius: var(--radius-sm);
+  padding: 0.3125rem 0.5rem 0.3125rem 0.625rem;
+}
+.cp-item .x {
+  cursor: pointer;
+  color: var(--text-3);
+  border: none;
+  background: transparent;
+  font-size: 1rem;
+  line-height: 1;
+  padding: 0 0.25rem;
+}
+.cp-item .x:hover {
+  color: var(--red);
+}
+.cp-hint {
+  font-size: 0.75rem;
+  color: var(--text-3);
+  margin-top: 0.4375rem;
+  line-height: 1.5;
+}
 .input .ico svg {
   width: 1rem;
   height: 1rem;

frontend/src/pages/relay/TaskDetailPage.vue

@@ -16,7 +16,9 @@ import {
   CHECKLIST_CATEGORIES,
   type ChecklistCategory,
   type ChecklistItem,
+  type ChecklistWorkStatus,
   type Comment,
+  type TaskCheckpointView,
   type TaskDetail,
   type TaskStatus,
   type User,
@@ -285,6 +287,71 @@ const isIssuer = computed(
 const isAssignee = computed(
   () => !!task.value && task.value.assignees.some((a) => a.id === me.value.id),
 )
+
+/* ============================================================
+ * 중간 점검(체크포인트) — 작업자 진행 상태 자가보고 + 보고 전송
+ * ============================================================ */
+const WORK_STATUS_LABEL: Record<ChecklistWorkStatus, string> = {
+  todo: '미착수',
+  doing: '진행 중',
+  done: '완료',
+}
+const WORK_STATUS_ORDER: ChecklistWorkStatus[] = ['todo', 'doing', 'done']
+const workSaving = ref(false)
+const reportNote = ref('')
+const reporting = ref(false)
+
+// 작업자: 항목 진행 상태 변경(상시) — 담당자만, id 있는 항목만
+async function setItemWorkStatus(item: ChecklistItem, status: ChecklistWorkStatus) {
+  if (!task.value || !item.id || workSaving.value) return
+  if ((item.workStatus ?? 'todo') === status) return
+  workSaving.value = true
+  try {
+    task.value = await taskStore.updateWorkStatus(projectId.value, task.value.id, [
+      { id: item.id, workStatus: status },
+    ])
+  } catch {
+    // 인터셉터가 알림 처리
+  } finally {
+    workSaving.value = false
+  }
+}
+
+// 보고 가능 구간: 점검일 당일 ~ 마감 전(마감 없으면 점검일 이후 상시). 담당자만.
+function isReportable(cp: TaskCheckpointView): boolean {
+  if (!isAssignee.value || !task.value) return false
+  const now = Date.now()
+  if (now < new Date(cp.checkAt).getTime()) return false
+  if (task.value.dueAt && now >= new Date(task.value.dueAt).getTime()) return false
+  return true
+}
+// 보고 불가 사유(버튼 대신 표시)
+function checkpointStateLabel(cp: TaskCheckpointView): string {
+  if (!task.value) return ''
+  const now = Date.now()
+  if (now < new Date(cp.checkAt).getTime()) return '점검일 전'
+  if (task.value.dueAt && now >= new Date(task.value.dueAt).getTime()) return '마감 종료'
+  return ''
+}
+
+// 중간 점검 보고 전송 — 현재 진행 상태를 스냅샷으로 기록 + 지시자 알림
+async function sendReport(cp: TaskCheckpointView) {
+  if (!task.value || reporting.value) return
+  reporting.value = true
+  try {
+    task.value = await taskStore.submitCheckpointReport(
+      projectId.value,
+      task.value.id,
+      cp.id,
+      reportNote.value.trim() || undefined,
+    )
+    reportNote.value = ''
+  } catch {
+    // 인터셉터가 알림 처리
+  } finally {
+    reporting.value = false
+  }
+}
 // 담당자 액션 카드 테마(시안): changes→빨강 / review→앰버 / done→초록 / 그 외→accent
 const assigneeCardClass = computed(() => {
   switch (task.value?.status) {
@@ -595,6 +662,26 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
                       v-if="!item.done && isChangesReview"
                       class="citem-tag"
                     >보완 필요</span>
+                    <!-- 작업자 진행 상태(자가보고) — 담당자는 편집, 그 외는 배지만 -->
+                    <span
+                      v-if="isAssignee"
+                      class="ws-seg"
+                    >
+                      <button
+                        v-for="s in WORK_STATUS_ORDER"
+                        :key="s"
+                        type="button"
+                        class="ws-btn"
+                        :class="[s, { active: (item.workStatus ?? 'todo') === s }]"
+                        :disabled="workSaving"
+                        @click="setItemWorkStatus(item, s)"
+                      >{{ WORK_STATUS_LABEL[s] }}</button>
+                    </span>
+                    <span
+                      v-else-if="(item.workStatus ?? 'todo') !== 'todo'"
+                      class="ws-badge"
+                      :class="item.workStatus"
+                    >{{ WORK_STATUS_LABEL[item.workStatus ?? 'todo'] }}</span>
                   </div>
                   <!-- 항목별 보완 내용(수정 요청 시 입력된 경우) -->
                   <div
@@ -1136,6 +1223,83 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
             </div>
           </div>
 
+          <!-- 중간 점검 — 점검일/보고 -->
+          <div
+            v-if="task.checkpoints.length || task.checkpointReports.length"
+            class="card side-card"
+          >
+            <div class="side-field">
+              <div class="side-label">
+                중간 점검
+              </div>
+              <ul
+                v-if="task.checkpoints.length"
+                class="cp-d-list"
+              >
+                <li
+                  v-for="cp in task.checkpoints"
+                  :key="cp.id"
+                  class="cp-d-item"
+                >
+                  <span class="cp-d-date">{{ cp.dateLabel }}</span>
+                  <button
+                    v-if="isReportable(cp)"
+                    class="cp-report-btn"
+                    type="button"
+                    :disabled="reporting"
+                    @click="sendReport(cp)"
+                  >
+                    보고 보내기
+                  </button>
+                  <span
+                    v-else-if="checkpointStateLabel(cp)"
+                    class="cp-d-state"
+                  >{{ checkpointStateLabel(cp) }}</span>
+                </li>
+              </ul>
+              <textarea
+                v-if="isAssignee && task.checkpoints.length"
+                v-model="reportNote"
+                class="cp-note-input"
+                rows="2"
+                placeholder="보고 메모(선택) — 보내기 전에 입력하세요"
+              />
+              <div
+                v-if="task.checkpointReports.length"
+                class="cp-rep-list"
+              >
+                <div
+                  v-for="r in task.checkpointReports"
+                  :key="r.id"
+                  class="cp-rep"
+                >
+                  <div class="cp-rep-head">
+                    <b>{{ r.reporterName }}</b>
+                    <span class="cp-rep-meta">점검일 {{ r.dateLabel }} · {{ r.timeLabel }}</span>
+                  </div>
+                  <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 class="card side-card">
             <div class="side-field bare">
               <div class="side-head">
@@ -2976,5 +3140,181 @@ a.file-info {
   margin-bottom: 0.75rem;
   white-space: pre-wrap;
 }
+
+/* ===== 중간 점검: 항목 진행상태 컨트롤 ===== */
+.ws-seg {
+  margin-left: auto;
+  display: inline-flex;
+  gap: 0.125rem;
+  background: #eceef1;
+  border-radius: var(--radius-sm);
+  padding: 0.125rem;
+  flex-shrink: 0;
+}
+.ws-btn {
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--text-3);
+  padding: 0.1875rem 0.4375rem;
+  border-radius: 4px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.ws-btn:hover:not(:disabled) {
+  color: var(--text);
+}
+.ws-btn:disabled {
+  cursor: default;
+}
+.ws-btn.active {
+  background: #fff;
+  box-shadow: var(--shadow-sm);
+}
+.ws-btn.active.doing {
+  color: var(--blue);
+}
+.ws-btn.active.done {
+  color: #1b7a3d;
+}
+.ws-btn.active.todo {
+  color: var(--text);
+}
+.ws-badge {
+  margin-left: auto;
+  flex-shrink: 0;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  padding: 0.0625rem 0.4375rem;
+  border-radius: 20px;
+}
+.ws-badge.doing {
+  color: var(--blue);
+  background: var(--blue-weak, #e8effd);
+}
+.ws-badge.done {
+  color: #1b7a3d;
+  background: var(--green-weak);
+}
+.ws-badge.todo {
+  color: var(--text-3);
+  background: #eceef1;
+}
+
+/* ===== 중간 점검: 점검일/보고 카드 ===== */
+.cp-d-list {
+  list-style: none;
+  margin: 0 0 0.625rem;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3125rem;
+}
+.cp-d-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  color: var(--text);
+}
+.cp-d-date {
+  font-weight: 600;
+}
+.cp-d-state {
+  margin-left: auto;
+  font-size: 0.6875rem;
+  color: var(--text-3);
+}
+.cp-report-btn {
+  margin-left: auto;
+  border: none;
+  background: var(--accent);
+  color: #fff;
+  font-family: inherit;
+  font-size: 0.719rem;
+  font-weight: 700;
+  padding: 0.25rem 0.625rem;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+.cp-report-btn:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+.cp-report-btn:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+.cp-note-input {
+  width: 100%;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  padding: 0.4375rem 0.5625rem;
+  font-family: inherit;
+  font-size: 0.781rem;
+  color: var(--text);
+  resize: vertical;
+  margin-bottom: 0.75rem;
+}
+.cp-note-input:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-weak);
+}
+.cp-rep-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  border-top: 1px solid var(--border);
+  padding-top: 0.625rem;
+}
+.cp-rep {
+  background: rgba(20, 24, 33, 0.03);
+  border-radius: var(--radius);
+  padding: 0.5rem 0.625rem;
+}
+.cp-rep-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.5rem;
+  font-size: 0.781rem;
+  color: var(--text);
+}
+.cp-rep-meta {
+  font-size: 0.6875rem;
+  color: var(--text-3);
+  white-space: nowrap;
+}
+.cp-rep-note {
+  font-size: 0.75rem;
+  color: var(--text-2);
+  margin-top: 0.25rem;
+  white-space: pre-wrap;
+}
+.cp-rep-items {
+  list-style: none;
+  margin: 0.375rem 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.cp-rep-items li {
+  display: flex;
+  align-items: center;
+  gap: 0.4375rem;
+}
+.cp-rep-items .ws-badge {
+  margin-left: 0;
+}
+.cp-rep-itext {
+  font-size: 0.75rem;
+  color: var(--text-2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>