API 상태 타임라인 개선:

- 진행 상태에 따른 상태 색 및 한글 라벨 표시 추가

src/main/resources/static/css/main.css

@@ -27135,7 +27135,7 @@ input[type=checkbox]:checked + .custom-checkbox {
 }
 .api-status .as-alert-card .as-tl-row {
   display: grid;
-  grid-template-columns: 60px 76px 1fr;
+  grid-template-columns: 60px 76px 64px 1fr;
   gap: 12px;
   font-size: 13px;
 }
@@ -27143,6 +27143,37 @@ input[type=checkbox]:checked + .custom-checkbox {
   color: var(--as-muted);
   font-variant-numeric: tabular-nums;
 }
+.api-status .as-alert-card .as-tl-row .as-tl-state {
+  font-size: 11px;
+  font-weight: 500;
+  text-align: center;
+  height: -webkit-fit-content;
+  height: fit-content;
+  padding: 2px 8px;
+  border-radius: var(--as-pill);
+  background: var(--as-gray-bg);
+  color: var(--as-text-2);
+}
+.api-status .as-alert-card .as-tl-row .as-tl-state.state-INVESTIGATING {
+  background: var(--as-err-bg);
+  color: var(--as-err);
+}
+.api-status .as-alert-card .as-tl-row .as-tl-state.state-IDENTIFIED {
+  background: #fbe9d7;
+  color: #c95a0f;
+}
+.api-status .as-alert-card .as-tl-row .as-tl-state.state-MONITORING {
+  background: var(--as-warn-bg);
+  color: var(--as-warn);
+}
+.api-status .as-alert-card .as-tl-row .as-tl-state.state-RESOLVED {
+  background: var(--as-ok-bg);
+  color: var(--as-ok);
+}
+.api-status .as-alert-card .as-tl-row .as-tl-state.state-CANCELED {
+  background: var(--as-gray-bg);
+  color: var(--as-muted);
+}
 .api-status .as-alert-card .as-tl-row .as-tl-who {
   font-size: 11px;
   font-weight: 500;
@@ -27720,7 +27751,7 @@ input[type=checkbox]:checked + .custom-checkbox {
     margin-bottom: 12px;
   }
   .api-status .as-alert-card .as-tl-row {
-    grid-template-columns: 52px 1fr;
+    grid-template-columns: 52px 68px 1fr;
   }
   .api-status .as-alert-card .as-tl-who {
     display: none;

src/main/resources/static/js/djb/api-status.js

@@ -160,10 +160,14 @@
 
     const cards = visible.map(function (incident) {
       const timeline = (incident.recentTimeline || []).map(function (entry) {
+        // 지난 이슈 이력과 같은 기준: 진행 상태(labelKo)를 상태 색으로 구분해 보여준다.
+        const state = entry.stateAfter || 'NONE';
+        const label = entry.labelKo || '진행 상황';
         const who = entry.authorType === 'SYSTEM' ? 'SYSTEM' : '운영자';
         const whoClass = entry.authorType === 'SYSTEM' ? ' is-system' : '';
         return '<div class="as-tl-row">'
           + '<span class="as-tl-time">' + escapeHtml(formatTime(entry.eventAt)) + '</span>'
+          + '<span class="as-tl-state state-' + escapeHtml(state) + '">' + escapeHtml(label) + '</span>'
           + '<span class="as-tl-who' + whoClass + '">' + escapeHtml(who) + '</span>'
           + '<span>' + escapeHtml(entry.body) + '</span>'
           + '</div>';

src/main/resources/static/sass/pages/_api-status.scss

@@ -362,7 +362,7 @@
 
     .as-tl-row {
       display: grid;
-      grid-template-columns: 60px 76px 1fr;
+      grid-template-columns: 60px 76px 64px 1fr;
       gap: 12px;
       font-size: 13px;
 
@@ -371,6 +371,26 @@
         font-variant-numeric: tabular-nums;
       }
 
+      // 진행 상태 칩. 색 기준은 지난 이슈 이력 타임라인(.as-tl-item .as-dot)과 같다.
+      .as-tl-state {
+        font-size: 11px;
+        font-weight: 500;
+        text-align: center;
+        height: -webkit-fit-content;
+        height: fit-content;
+        padding: 2px 8px;
+        border-radius: var(--as-pill);
+        background: var(--as-gray-bg);
+        color: var(--as-text-2);
+
+        &.state-INVESTIGATING { background: var(--as-err-bg); color: var(--as-err); }
+        &.state-IDENTIFIED { background: #fbe9d7; color: #c95a0f; }
+        &.state-MONITORING { background: var(--as-warn-bg); color: var(--as-warn); }
+        &.state-RESOLVED { background: var(--as-ok-bg); color: var(--as-ok); }
+        &.state-CANCELED { background: var(--as-gray-bg); color: var(--as-muted); }
+      }
+
+      // 작성 주체(운영자/SYSTEM)
       .as-tl-who {
         font-size: 11px;
         font-weight: 500;
@@ -908,7 +928,7 @@
 
     .as-card-head { margin-bottom: 12px; }
 
-    .as-alert-card .as-tl-row { grid-template-columns: 52px 1fr; }
+    .as-alert-card .as-tl-row { grid-template-columns: 52px 68px 1fr; }
     .as-alert-card .as-tl-who { display: none; }
     .as-alert-card .as-alert-title { font-size: 18px; }