refactor: 중간 점검을 점검일 당일 보고서 방식으로 변경

진행 상태(미착수/진행중/완료)를 상시 토글 대신 '보고서'로 전환: - 보고는 점검일 당일(KST)에만 가능, 지나면 누락 — 마감 전 상시 전송 제거 - 작업자가 점검일 당일 보고서 폼에서 항목별 상태 + 메모를 작성해 전송(상태는 보고에 포함) - 지시자는 상세 화면에서 보고 기록을 접힌 목록으로 보고 클릭해 펼쳐 열람 - 체크리스트 항목은 마지막 보고 상태를 읽기 전용 배지로 표시(인라인 편집 제거) - 상시 진행상태 갱신 엔드포인트/DTO 제거(work-status) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-22 15:18:58 +09:00
parent 25ca63a925
commit 4ef07f65a7
9 changed files with 342 additions and 239 deletions
@@ -1092,7 +1092,7 @@ function goBack() {
                </li>
              </ul>
              <p class="cp-hint">
-                담당자가 점검일부터 마감 전까지 진행 상태를 보고할 수 있습니다.
+                담당자가 점검일 당일에 진행 상태를 보고서로 보낼 수 있습니다. (지나면 누락)
              </p>
            </div>

@@ -289,69 +289,90 @@ const isAssignee = computed(
 )

 /* ============================================================
- * 중간 점검(체크포인트) — 작업자 진행 상태 자가보고 + 보고 전송
+ * 중간 점검(체크포인트) — 작업자가 점검일 당일에 보고서로 전송, 지시자는 기록 열람
 * ============================================================ */
 const WORK_STATUS_LABEL: Record<ChecklistWorkStatus, string> = {
  todo: '미착수',
  doing: '진행 중',
  done: '완료',
 }
-const WORK_STATUS_ORDER: ChecklistWorkStatus[] = ['todo', 'doing', 'done']
-const workSaving = ref(false)
+const WORK_STATUS_OPTIONS: ChecklistWorkStatus[] = ['todo', 'doing', 'done']
+
+// KST(UTC+9) 기준 'yyyy-MM-dd' — '당일' 판정
+function kstDate(iso: string | Date): string {
+  const t = typeof iso === 'string' ? new Date(iso).getTime() : iso.getTime()
+  return new Date(t + 9 * 60 * 60 * 1000).toISOString().slice(0, 10)
+}
+const todayKst = computed(() => kstDate(new Date()))
+
+type CheckpointState = 'future' | 'today' | 'reported' | 'missed'
+const CP_STATE_LABEL: Record<CheckpointState, string> = {
+  future: '예정',
+  today: '오늘 점검',
+  reported: '보고 완료',
+  missed: '누락',
+}
+// 체크포인트 상태 — 보고됨 / 당일 / 지남(누락) / 예정
+function checkpointState(cp: TaskCheckpointView): CheckpointState {
+  const reported = task.value?.checkpointReports.some((r) => r.checkpointId === cp.id) ?? false
+  if (reported) return 'reported'
+  const cpDay = kstDate(cp.checkAt)
+  if (cpDay === todayKst.value) return 'today'
+  if (cpDay < todayKst.value) return 'missed'
+  return 'future'
+}
+
+// --- 보고서 작성 폼(인라인, 점검일 당일·담당자만) ---
+const reportingCpId = ref<string | null>(null)
+const reportItems = ref<{ id: string; text: string; workStatus: ChecklistWorkStatus }[]>([])
 const reportNote = ref('')
-const reporting = ref(false)
+const reportSubmitting = 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 openReportForm(cp: TaskCheckpointView) {
+  if (!task.value) return
+  reportingCpId.value = cp.id
+  // 현재(마지막 보고) 상태로 프리필
+  reportItems.value = task.value.checklist
+    .filter((c) => c.id)
+    .map((c) => ({
+      id: c.id as string,
+      text: c.text,
+      workStatus: c.workStatus ?? 'todo',
+    }))
+  reportNote.value = ''
 }
-
-// 보고 가능 구간: 점검일 당일 ~ 마감 전(마감 없으면 점검일 이후 상시). 담당자만.
-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 cancelReportForm() {
+  reportingCpId.value = null
+  reportItems.value = []
+  reportNote.value = ''
 }
-// 보고 불가 사유(버튼 대신 표시)
-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
+async function submitReport() {
+  if (!task.value || !reportingCpId.value || reportSubmitting.value) return
+  reportSubmitting.value = true
  try {
    task.value = await taskStore.submitCheckpointReport(
      projectId.value,
      task.value.id,
-      cp.id,
+      reportingCpId.value,
+      reportItems.value.map((it) => ({ id: it.id, workStatus: it.workStatus })),
      reportNote.value.trim() || undefined,
    )
-    reportNote.value = ''
+    cancelReportForm()
  } catch {
    // 인터셉터가 알림 처리
  } finally {
-    reporting.value = false
+    reportSubmitting.value = false
  }
 }
+
+// --- 보고 기록 펼치기(지시자 열람) ---
+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
+}
 // 담당자 액션 카드 테마(시안): changes→빨강 / review→앰버 / done→초록 / 그 외→accent
 const assigneeCardClass = computed(() => {
  switch (task.value?.status) {
@@ -662,23 +683,9 @@ 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'"
+                      v-if="(item.workStatus ?? 'todo') !== 'todo'"
                      class="ws-badge"
                      :class="item.workStatus"
                    >{{ WORK_STATUS_LABEL[item.workStatus ?? 'todo'] }}</span>
@@ -1232,6 +1239,7 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
              <div class="side-label">
                중간 점검
              </div>
+              <!-- 점검일 목록 + 상태(예정/오늘/완료/누락) -->
              <ul
                v-if="task.checkpoints.length"
                class="cp-d-list"
@@ -1242,28 +1250,78 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
                  class="cp-d-item"
                >
                  <span class="cp-d-date">{{ cp.dateLabel }}</span>
+                  <!-- 당일 + 담당자만 보고서 작성 -->
                  <button
-                    v-if="isReportable(cp)"
+                    v-if="checkpointState(cp) === 'today' && isAssignee"
                    class="cp-report-btn"
                    type="button"
-                    :disabled="reporting"
-                    @click="sendReport(cp)"
+                    @click="reportingCpId === cp.id ? cancelReportForm() : openReportForm(cp)"
                  >
-                    보고 보내기
+                    {{ reportingCpId === cp.id ? '취소' : '보고서 작성' }}
                  </button>
                  <span
-                    v-else-if="checkpointStateLabel(cp)"
-                    class="cp-d-state"
-                  >{{ checkpointStateLabel(cp) }}</span>
+                    v-else
+                    class="cp-state"
+                    :class="checkpointState(cp)"
+                  >{{ CP_STATE_LABEL[checkpointState(cp)] }}</span>
                </li>
              </ul>
-              <textarea
-                v-if="isAssignee && task.checkpoints.length"
-                v-model="reportNote"
-                class="cp-note-input"
-                rows="2"
-                placeholder="보고 메모(선택) — 보내기 전에 입력하세요"
-              />
+
+              <!-- 보고서 작성 폼(인라인) — 항목별 상태 선택 + 메모 -->
+              <div
+                v-if="reportingCpId"
+                class="cp-form"
+              >
+                <div class="cp-form-title">
+                  진행 상태 보고서
+                </div>
+                <div
+                  v-if="reportItems.length"
+                  class="cp-form-items"
+                >
+                  <div
+                    v-for="it in reportItems"
+                    :key="it.id"
+                    class="cp-form-item"
+                  >
+                    <span class="cp-fi-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>
+                <p
+                  v-else
+                  class="cp-form-empty"
+                >
+                  등록된 할 일이 없어 메모만 보고됩니다.
+                </p>
+                <textarea
+                  v-model="reportNote"
+                  class="cp-note-input"
+                  rows="2"
+                  placeholder="보고 메모(선택)"
+                />
+                <div class="cp-form-actions">
+                  <button
+                    class="cp-send-btn"
+                    type="button"
+                    :disabled="reportSubmitting"
+                    @click="submitReport"
+                  >
+                    {{ reportSubmitting ? '보내는 중…' : '지시자에게 보내기' }}
+                  </button>
+                </div>
+              </div>
+
+              <!-- 보고 기록(클릭하여 열람) -->
              <div
                v-if="task.checkpointReports.length"
                class="cp-rep-list"
@@ -1273,28 +1331,41 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
                  :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"
+                  <button
+                    type="button"
+                    class="cp-rep-head"
+                    @click="toggleReport(r.id)"
                  >
-                    {{ r.note }}
-                  </div>
-                  <ul class="cp-rep-items">
-                    <li
-                      v-for="(it, i) in r.items"
-                      :key="i"
+                    <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"
                    >
-                      <span
-                        class="ws-badge"
-                        :class="it.workStatus"
-                      >{{ WORK_STATUS_LABEL[it.workStatus] }}</span>
-                      <span class="cp-rep-itext">{{ it.text }}</span>
-                    </li>
-                  </ul>
+                      {{ 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>
@@ -3222,10 +3293,27 @@ a.file-info {
 .cp-d-date {
  font-weight: 600;
 }
-.cp-d-state {
+/* 상태 배지 */
+.cp-state {
  margin-left: auto;
  font-size: 0.6875rem;
+  font-weight: 700;
+  padding: 0.0625rem 0.4375rem;
+  border-radius: 20px;
  color: var(--text-3);
+  background: #eceef1;
+}
+.cp-state.today {
+  color: var(--accent);
+  background: var(--accent-weak);
+}
+.cp-state.reported {
+  color: #1b7a3d;
+  background: var(--green-weak);
+}
+.cp-state.missed {
+  color: var(--red);
+  background: var(--red-weak);
 }
 .cp-report-btn {
  margin-left: auto;
@@ -3239,10 +3327,66 @@ a.file-info {
  border-radius: var(--radius-sm);
  cursor: pointer;
 }
-.cp-report-btn:hover:not(:disabled) {
+.cp-report-btn:hover {
  background: var(--accent-hover);
 }
-.cp-report-btn:disabled {
+/* 보고서 작성 폼 */
+.cp-form {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.625rem;
+  margin-bottom: 0.75rem;
+  background: #fafbfc;
+}
+.cp-form-title {
+  font-size: 0.781rem;
+  font-weight: 700;
+  color: var(--text);
+  margin-bottom: 0.5rem;
+}
+.cp-form-items {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4375rem;
+  margin-bottom: 0.5rem;
+}
+.cp-form-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.cp-fi-text {
+  font-size: 0.75rem;
+  color: var(--text);
+}
+.cp-form-item .ws-seg {
+  margin-left: 0;
+  align-self: flex-start;
+}
+.cp-form-empty {
+  font-size: 0.75rem;
+  color: var(--text-3);
+  margin: 0 0 0.5rem;
+}
+.cp-form-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+.cp-send-btn {
+  border: none;
+  background: var(--accent);
+  color: #fff;
+  font-family: inherit;
+  font-size: 0.781rem;
+  font-weight: 700;
+  padding: 0.375rem 0.75rem;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+.cp-send-btn:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+.cp-send-btn:disabled {
  opacity: 0.6;
  cursor: default;
 }
@@ -3255,47 +3399,69 @@ a.file-info {
  font-size: 0.781rem;
  color: var(--text);
  resize: vertical;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.5rem;
 }
 .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;
+  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);
-  padding: 0.5rem 0.625rem;
+  overflow: hidden;
 }
 .cp-rep-head {
  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 0.5rem;
+  align-items: center;
+  gap: 0.4375rem;
+  width: 100%;
+  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;
  color: var(--text-2);
-  margin-top: 0.25rem;
+  margin-bottom: 0.375rem;
  white-space: pre-wrap;
 }
 .cp-rep-items {
  list-style: none;
-  margin: 0.375rem 0 0;
+  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;