CSP 허용 후보 표시 추가

pages/admin/index.vue

@@ -106,7 +106,8 @@ const {
     totalRows: 0,
     recentViolations: 0,
     latestSeenAt: null,
-    topViolations: []
+    topViolations: [],
+    allowlistCandidates: []
   })
 })
 
@@ -203,6 +204,7 @@ const chartPagination = computed(() => {
 const adsenseCards = computed(() => adsenseSummary.value.periods || [])
 const adsenseBalance = computed(() => adsenseSummary.value.balance || createEmptyAdsenseBalance())
 const cspViolations = computed(() => cspViolationSummary.value?.topViolations || [])
+const cspAllowlistCandidates = computed(() => cspViolationSummary.value?.allowlistCandidates || [])
 const hasCspViolations = computed(() => Number(cspViolationSummary.value?.totalViolations || 0) > 0)
 
 /**
@@ -799,6 +801,26 @@ watch(trendRows, () => {
           </div>
         </div>
 
+        <div
+          v-if="cspAllowlistCandidates.length"
+          class="admin-dashboard__csp-candidates mt-4 border border-line bg-paper p-3"
+        >
+          <h3 class="text-xs font-semibold uppercase text-muted">
+            허용 후보
+          </h3>
+          <div class="mt-2 flex flex-wrap gap-2">
+            <span
+              v-for="candidate in cspAllowlistCandidates"
+              :key="`${candidate.sourceDirective}-${candidate.blockedOrigin}`"
+              class="inline-flex max-w-full items-center gap-2 border border-line bg-white px-2 py-1 text-[11px] text-muted"
+            >
+              <strong class="shrink-0 text-ink">{{ candidate.sourceDirective }}</strong>
+              <span class="truncate">{{ candidate.blockedOrigin }}</span>
+              <span class="shrink-0 text-[#71717a]">{{ formatNumber(candidate.violationCount) }}회</span>
+            </span>
+          </div>
+        </div>
+
         <div
           v-if="cspViolations.length"
           class="admin-dashboard__csp-table mt-4 overflow-x-auto"