기능 추가 — 신고 상황종료 처리

- DB: reports 테이블에 closure_type, closure_note, closed_at, closed_by 컬럼 추가
- 백엔드: PATCH /reports/{id}/close 엔드포인트 (사유 4종: natural/remote_reset/false_alarm/other)
- 신고상세: 승인대기 상태에서 [상황종료] 버튼 추가, 인라인 패널에서 사유 선택
- 상황종료 후 상세 화면에 사유·메모·처리자·일시 표시
- 엑셀 AS신고목록에 상황종료 4개 컬럼 추가
- 신고목록 필터·지도 상태 목록에 closed 추가, CSS 뱃지 추가

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/static/css/style.css

@@ -114,6 +114,7 @@ textarea{resize:vertical;min-height:80px;}
 .s-cost-billed{background:#DBEAFE;color:#1565C0;}
 .s-cost-waived{background:#F0F0F0;color:#555;}
 .s-cost-settled{background:#D1FAE5;color:#065F46;}
+.s-closed{background:#F1F5F9;color:#475569;}
 
 /* ── ALERTS ── */
 .alert{padding:12px 16px;border-radius:6px;margin-bottom:14px;font-size:13px;}

frontend/static/js/auth.js

@@ -73,7 +73,7 @@ const Auth = (() => {
   function statusBadge(status) {
     const map = {
       pending_approval: '승인대기', pending: '접수', in_progress: '처리중',
-      done: '완료', waiting: '부품대기', revisit: '재방문',
+      done: '완료', waiting: '부품대기', revisit: '재방문', closed: '상황종료',
       registered: '등록', reviewing: '검토중', developing: '개발중',
       deployed: '배포완료',
     };

frontend/static/pages/admin/report-detail.html

@@ -395,8 +395,43 @@ async function load() {
               <pre style="margin-top:6px;background:var(--gray1);border:1px solid var(--gray3);border-radius:6px;padding:10px;font-size:11px;overflow-x:auto;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto;">${escHtmlDetail(r.ocpp_log)}</pre>
             </div>` : ''}
           ${r.status === 'pending_approval' ? `
-            <button class="btn btn-success btn-sm" style="margin-top:12px"
-              onclick="approveReport(${r.id})">✅ 신고 승인 (정비사 공개)</button>` : ''}
+            <div style="display:flex;gap:8px;margin-top:12px;flex-wrap:wrap">
+              <button class="btn btn-success btn-sm"
+                onclick="approveReport(${r.id})">✅ 신고 승인 (정비사 공개)</button>
+              <button class="btn btn-sm" style="background:#64748B;color:white;border:none"
+                onclick="toggleClosePanel()">🔚 상황종료</button>
+            </div>
+            <div id="closurePanel" style="display:none;margin-top:12px;background:#F8FAFC;border:1px solid var(--gray3);border-radius:8px;padding:14px">
+              <div style="font-size:13px;font-weight:700;color:var(--navy);margin-bottom:10px">🔚 상황종료 사유 선택</div>
+              <div style="display:flex;flex-direction:column;gap:7px;margin-bottom:10px">
+                ${[
+                  ['natural','증상자연소거'],
+                  ['remote_reset','원격리셋후증상소거'],
+                  ['false_alarm','인지오류'],
+                  ['other','기타']
+                ].map(([v,l]) => `
+                  <label style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer">
+                    <input type="radio" name="closureType" value="${v}" style="width:auto;accent-color:var(--accent)"
+                      onchange="document.getElementById('closureNoteWrap').style.display=this.value==='other'?'block':'none'">
+                    ${l}
+                  </label>`).join('')}
+              </div>
+              <div id="closureNoteWrap" style="display:none;margin-bottom:10px">
+                <input type="text" id="closureNote" placeholder="기타 사유를 입력하세요"
+                  style="width:100%;padding:8px 10px;border:1px solid var(--gray3);border-radius:6px;font-size:13px">
+              </div>
+              <div style="display:flex;gap:8px">
+                <button class="btn btn-sm" style="background:#64748B;color:white;border:none"
+                  onclick="submitClose(${r.id})">확인</button>
+                <button class="btn btn-outline btn-sm" onclick="toggleClosePanel()">취소</button>
+              </div>
+            </div>` : ''}
+          ${r.status === 'closed' ? `
+            <div style="margin-top:12px;padding:10px 14px;background:#F1F5F9;border-radius:8px;border-left:4px solid #64748B">
+              <div style="font-size:12px;font-weight:700;color:#475569;margin-bottom:4px">🔚 상황종료 처리됨</div>
+              <div style="font-size:13px;color:var(--text)">사유: <strong>${{'natural':'증상자연소거','remote_reset':'원격리셋후증상소거','false_alarm':'인지오류','other':'기타'}[r.closure_type]||r.closure_type||'-'}</strong>${r.closure_note ? ' — ' + escHtmlDetail(r.closure_note) : ''}</div>
+              <div style="font-size:11px;color:var(--gray4);margin-top:3px">${r.closed_by_name||''} · ${r.closed_at ? new Date(r.closed_at).toLocaleString('ko-KR') : ''}</div>
+            </div>` : ''}
         </div>
 
         <!-- 편집 모드 -->
@@ -886,6 +921,27 @@ async function approveReport(id) {
   load();
 }
 
+function toggleClosePanel() {
+  const panel = document.getElementById('closurePanel');
+  if (!panel) return;
+  panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
+}
+
+async function submitClose(id) {
+  const selected = document.querySelector('input[name="closureType"]:checked');
+  if (!selected) { alert('상황종료 사유를 선택해 주세요.'); return; }
+  const note = document.getElementById('closureNote')?.value || '';
+  if (selected.value === 'other' && !note.trim()) { alert('기타 사유를 입력해 주세요.'); return; }
+  if (!confirm('상황종료 처리하시겠습니까?\n정비사 조치 없이 신고를 종결합니다.')) return;
+  try {
+    const fd = new FormData();
+    fd.append('closure_type', selected.value);
+    fd.append('closure_note', note);
+    await API.patch(`/reports/${id}/close`, fd);
+    load();
+  } catch(e) { alert('오류: ' + e.message); }
+}
+
 async function saveCost(repairId) {
   const partyType = document.getElementById('partyType').value;
   if (!partyType) { showCostErr('출장비 부담 주체를 선택해 주세요.'); return; }

frontend/static/pages/admin/reports.html

@@ -80,6 +80,7 @@
           <option value="done">완료</option>
           <option value="waiting">부품대기</option>
           <option value="revisit">재방문</option>
+          <option value="closed">상황종료</option>
         </select>
         <input type="text" id="fCharger" placeholder="충전기 ID" style="width:150px">
         <button class="btn btn-outline btn-sm" onclick="load()">🔍 검색</button>
@@ -245,7 +246,7 @@ const STATUS_CLASS = {
   pending: 'pending', pending_approval: 'pending',
   in_progress: 'in_progress',
   waiting: 'waiting', revisit: 'revisit',
-  done: 'done',
+  done: 'done', closed: 'done',
 };
 
 // ── 지도 마커 렌더 ──