Merge pull request 'release: 2026-04-17 (320건 커밋)' (#190) from develop into main

Reviewed-on: #71

.claude/settings.json

@@ -87,7 +87,5 @@
   },
   "enabledPlugins": {
     "frontend-design@claude-plugins-official": true
-  },
-  "deny": [],
-  "allow": []
+  }
 }

.claude/workflow-version.json

@@ -1,7 +1,7 @@
 {
   "applied_global_version": "1.6.1",
-  "applied_date": "2026-04-20",
+  "applied_date": "2026-04-17",
   "project_type": "react-ts",
   "gitea_url": "https://gitea.gc-si.dev",
   "custom_pre_commit": true
-}
+}

.githooks/commit-msg

@@ -3,6 +3,7 @@
 # commit-msg hook
 # Conventional Commits 형식 검증 (한/영 혼용 지원)
 #==============================================================================
+export LC_ALL=en_US.UTF-8 2>/dev/null || export LC_ALL=C.UTF-8 2>/dev/null || true
 
 COMMIT_MSG_FILE="$1"
 COMMIT_MSG=$(cat "$COMMIT_MSG_FILE")

backend/src/hns/hnsRouter.ts

@@ -14,23 +14,13 @@ router.get('/analyses', requireAuth, requirePermission('hns', 'READ'), async (re
   try {
     const { status, substance, search, acdntSn } = req.query
     const acdntSnNum = acdntSn ? parseInt(acdntSn as string, 10) : undefined
-    const page = parseInt(req.query.page as string, 10) || 1
-    const limit = parseInt(req.query.limit as string, 10) || 10
-
-    if (!isValidNumber(page, 1, 10000) || !isValidNumber(limit, 1, 100)) {
-      res.status(400).json({ error: '유효하지 않은 페이지네이션 파라미터' })
-      return
-    }
-
-    const result = await listAnalyses({
+    const items = await listAnalyses({
       status: status as string | undefined,
       substance: substance as string | undefined,
       search: search as string | undefined,
       acdntSn: acdntSnNum && !Number.isNaN(acdntSnNum) ? acdntSnNum : undefined,
-      page,
-      limit,
     })
-    res.json(result)
+    res.json(items)
   } catch (err) {
     console.error('[hns] 분석 목록 오류:', err)
     res.status(500).json({ error: 'HNS 분석 목록 조회 실패' })

backend/src/hns/hnsService.ts

@@ -120,8 +120,6 @@ interface ListAnalysesInput {
   substance?: string
   search?: string
   acdntSn?: number
-  page?: number
-  limit?: number
 }
 
 function rowToAnalysis(r: Record<string, unknown>): HnsAnalysisItem {
@@ -149,12 +147,7 @@ function rowToAnalysis(r: Record<string, unknown>): HnsAnalysisItem {
   }
 }
 
-export async function listAnalyses(input: ListAnalysesInput): Promise<{
-  items: HnsAnalysisItem[]
-  total: number
-  page: number
-  limit: number
-}> {
+export async function listAnalyses(input: ListAnalysesInput): Promise<HnsAnalysisItem[]> {
   const conditions: string[] = ["USE_YN = 'Y'"]
   const params: (string | number)[] = []
   let idx = 1
@@ -177,36 +170,18 @@ export async function listAnalyses(input: ListAnalysesInput): Promise<{
     params.push(input.acdntSn)
   }
 
-  const whereClause = conditions.join(' AND ')
-
-  const countResult = await wingPool.query(
-    `SELECT COUNT(*) AS cnt FROM HNS_ANALYSIS WHERE ${whereClause}`,
-    params
-  )
-  const total = parseInt(countResult.rows[0].cnt as string, 10)
-
-  const page = input.page ?? 1
-  const limit = input.limit ?? 10
-  const offset = (page - 1) * limit
-
   const { rows } = await wingPool.query(
     `SELECT HNS_ANLYS_SN, ACDNT_SN, ANLYS_NM, ACDNT_DTM, LOC_NM, LON, LAT,
             SBST_NM, SPIL_QTY, SPIL_UNIT_CD, FCST_HR, ALGO_CD, CRIT_MDL_CD,
             WIND_SPD, WIND_DIR, EXEC_STTS_CD, RISK_CD, ANALYST_NM,
             RSLT_DATA, REG_DTM
      FROM HNS_ANALYSIS
-     WHERE ${whereClause}
-     ORDER BY ACDNT_DTM DESC NULLS LAST
-     LIMIT $${idx++} OFFSET $${idx}`,
-    [...params, limit, offset]
+     WHERE ${conditions.join(' AND ')}
+     ORDER BY ACDNT_DTM DESC NULLS LAST`,
+    params
   )
 
-  return {
-    items: rows.map((r: Record<string, unknown>) => rowToAnalysis(r)),
-    total,
-    page,
-    limit,
-  }
+  return rows.map((r: Record<string, unknown>) => rowToAnalysis(r))
 }
 
 export async function getAnalysis(sn: number): Promise<HnsAnalysisItem | null> {

docs/RELEASE-NOTES.md

@@ -7,7 +7,6 @@
 ## [2026-04-17]
 
 ### 추가
-- HNS: 분석 목록 서버사이드 페이지네이션 추가 및 대기확산 히트맵 렌더링 개선
 - HNS: 물질 DB 데이터 확장 및 데이터 구조 개선 (PDF 추출 스크립트, 병합 스크립트 개선, 물질 상세 패널 업데이트)
 
 ### 변경

frontend/src/components/common/map/MapView.tsx

@@ -233,10 +233,12 @@ function MapCenterTracker({
     };
 
     update();
-    map.on('moveend', update);
+    map.on('move', update);
+    map.on('zoom', update);
 
     return () => {
-      map.off('moveend', update);
+      map.off('move', update);
+      map.off('zoom', update);
     };
   }, [map, onCenterChange]);
 
@@ -505,87 +507,6 @@ export function MapView({
   const wmsBrightnessMin = wmsBrightnessMax > 1 ? wmsBrightnessMax - 1 : 0;
   const wmsOpacity = layerOpacity / 100;
 
-  // HNS 대기확산 히트맵 이미지 (Canvas 렌더링 + PNG 변환은 고비용이므로 별도 메모이제이션)
-  const heatmapImage = useMemo(() => {
-    if (!dispersionHeatmap || dispersionHeatmap.length === 0) return null;
-
-    const maxConc = Math.max(...dispersionHeatmap.map((p) => p.concentration));
-    const minConc = Math.min(
-      ...dispersionHeatmap.filter((p) => p.concentration > 0.001).map((p) => p.concentration),
-    );
-    const filtered = dispersionHeatmap.filter((p) => p.concentration > 0.001);
-
-    if (filtered.length === 0) return null;
-
-    // 경위도 바운드 계산
-    let minLon = Infinity,
-      maxLon = -Infinity,
-      minLat = Infinity,
-      maxLat = -Infinity;
-    for (const p of dispersionHeatmap) {
-      if (p.lon < minLon) minLon = p.lon;
-      if (p.lon > maxLon) maxLon = p.lon;
-      if (p.lat < minLat) minLat = p.lat;
-      if (p.lat > maxLat) maxLat = p.lat;
-    }
-    const padLon = (maxLon - minLon) * 0.02;
-    const padLat = (maxLat - minLat) * 0.02;
-    minLon -= padLon;
-    maxLon += padLon;
-    minLat -= padLat;
-    maxLat += padLat;
-
-    // 캔버스에 농도 이미지 렌더링
-    const W = 1200,
-      H = 960;
-    const canvas = document.createElement('canvas');
-    canvas.width = W;
-    canvas.height = H;
-    const ctx = canvas.getContext('2d')!;
-    ctx.clearRect(0, 0, W, H);
-
-    // 로그 스케일: 농도 범위를 고르게 분포
-    const logMin = Math.log(minConc);
-    const logMax = Math.log(maxConc);
-    const logRange = logMax - logMin || 1;
-
-    const stops: [number, number, number, number][] = [
-      [34, 197, 94, 220], // green  (저농도)
-      [234, 179, 8, 235], // yellow
-      [249, 115, 22, 245], // orange
-      [239, 68, 68, 250], // red    (고농도)
-      [185, 28, 28, 255], // dark red (초고농도)
-    ];
-
-    for (const p of filtered) {
-      // 로그 스케일 정규화 (0~1)
-      const ratio = Math.max(0, Math.min(1, (Math.log(p.concentration) - logMin) / logRange));
-      const t = ratio * (stops.length - 1);
-      const lo = Math.floor(t);
-      const hi = Math.min(lo + 1, stops.length - 1);
-      const f = t - lo;
-      const r = Math.round(stops[lo][0] + (stops[hi][0] - stops[lo][0]) * f);
-      const g = Math.round(stops[lo][1] + (stops[hi][1] - stops[lo][1]) * f);
-      const b = Math.round(stops[lo][2] + (stops[hi][2] - stops[lo][2]) * f);
-      const a = (stops[lo][3] + (stops[hi][3] - stops[lo][3]) * f) / 255;
-
-      const px = ((p.lon - minLon) / (maxLon - minLon)) * W;
-      const py = (1 - (p.lat - minLat) / (maxLat - minLat)) * H;
-
-      ctx.fillStyle = `rgba(${r},${g},${b},${a.toFixed(2)})`;
-      ctx.beginPath();
-      ctx.arc(px, py, 12, 0, Math.PI * 2);
-      ctx.fill();
-    }
-
-    // Canvas → data URL 변환 (interleaved MapboxOverlay에서 HTMLCanvasElement 직접 전달 시 렌더링 안 되는 문제 회피)
-    const imageUrl = canvas.toDataURL('image/png');
-    return {
-      imageUrl,
-      bounds: [minLon, minLat, maxLon, maxLat] as [number, number, number, number],
-    };
-  }, [dispersionHeatmap]);
-
   // deck.gl 레이어 구축
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const deckLayers = useMemo((): any[] => {
@@ -885,17 +806,96 @@ export function MapView({
       }
     }
 
-    // --- HNS 대기확산 히트맵 (BitmapLayer, 캐싱된 이미지 사용) ---
-    if (heatmapImage) {
-      result.push(
-        new BitmapLayer({
-          id: 'hns-dispersion-bitmap',
-          image: heatmapImage.imageUrl,
-          bounds: heatmapImage.bounds,
-          opacity: 1.0,
-          pickable: false,
-        }) as unknown as DeckLayer,
+    // --- HNS 대기확산 히트맵 (BitmapLayer, 고정 이미지) ---
+    if (dispersionHeatmap && dispersionHeatmap.length > 0) {
+      const maxConc = Math.max(...dispersionHeatmap.map((p) => p.concentration));
+      const minConc = Math.min(
+        ...dispersionHeatmap.filter((p) => p.concentration > 0.001).map((p) => p.concentration),
       );
+      const filtered = dispersionHeatmap.filter((p) => p.concentration > 0.001);
+      console.log(
+        '[MapView] HNS 히트맵:',
+        dispersionHeatmap.length,
+        '→ filtered:',
+        filtered.length,
+        'maxConc:',
+        maxConc.toFixed(2),
+      );
+
+      if (filtered.length > 0) {
+        // 경위도 바운드 계산
+        let minLon = Infinity,
+          maxLon = -Infinity,
+          minLat = Infinity,
+          maxLat = -Infinity;
+        for (const p of dispersionHeatmap) {
+          if (p.lon < minLon) minLon = p.lon;
+          if (p.lon > maxLon) maxLon = p.lon;
+          if (p.lat < minLat) minLat = p.lat;
+          if (p.lat > maxLat) maxLat = p.lat;
+        }
+        const padLon = (maxLon - minLon) * 0.02;
+        const padLat = (maxLat - minLat) * 0.02;
+        minLon -= padLon;
+        maxLon += padLon;
+        minLat -= padLat;
+        maxLat += padLat;
+
+        // 캔버스에 농도 이미지 렌더링
+        const W = 1200,
+          H = 960;
+        const canvas = document.createElement('canvas');
+        canvas.width = W;
+        canvas.height = H;
+        const ctx = canvas.getContext('2d')!;
+        ctx.clearRect(0, 0, W, H);
+
+        // 로그 스케일: 농도 범위를 고르게 분포
+        const logMin = Math.log(minConc);
+        const logMax = Math.log(maxConc);
+        const logRange = logMax - logMin || 1;
+
+        const stops: [number, number, number, number][] = [
+          [34, 197, 94, 220], // green  (저농도)
+          [234, 179, 8, 235], // yellow
+          [249, 115, 22, 245], // orange
+          [239, 68, 68, 250], // red    (고농도)
+          [185, 28, 28, 255], // dark red (초고농도)
+        ];
+
+        for (const p of filtered) {
+          // 로그 스케일 정규화 (0~1)
+          const ratio = Math.max(0, Math.min(1, (Math.log(p.concentration) - logMin) / logRange));
+          const t = ratio * (stops.length - 1);
+          const lo = Math.floor(t);
+          const hi = Math.min(lo + 1, stops.length - 1);
+          const f = t - lo;
+          const r = Math.round(stops[lo][0] + (stops[hi][0] - stops[lo][0]) * f);
+          const g = Math.round(stops[lo][1] + (stops[hi][1] - stops[lo][1]) * f);
+          const b = Math.round(stops[lo][2] + (stops[hi][2] - stops[lo][2]) * f);
+          const a = (stops[lo][3] + (stops[hi][3] - stops[lo][3]) * f) / 255;
+
+          const px = ((p.lon - minLon) / (maxLon - minLon)) * W;
+          const py = (1 - (p.lat - minLat) / (maxLat - minLat)) * H;
+
+          ctx.fillStyle = `rgba(${r},${g},${b},${a.toFixed(2)})`;
+          ctx.beginPath();
+          ctx.arc(px, py, 12, 0, Math.PI * 2);
+          ctx.fill();
+        }
+
+        // Canvas → data URL 변환 (interleaved MapboxOverlay에서 HTMLCanvasElement 직접 전달 시 렌더링 안 되는 문제 회피)
+        const imageUrl = canvas.toDataURL('image/png');
+        result.push(
+          new BitmapLayer({
+            id: 'hns-dispersion-bitmap',
+            image: imageUrl,
+            bounds: [minLon, minLat, maxLon, maxLat],
+            opacity: 1.0,
+            pickable: false,
+          }) as unknown as DeckLayer,
+        );
+      }
     }
 
     // --- HNS 대기확산 구역 (ScatterplotLayer, meters 단위) ---
@@ -1300,7 +1300,7 @@ export function MapView({
     isDrawingBoom,
     drawingPoints,
     dispersionResult,
-    heatmapImage,
+    dispersionHeatmap,
     incidentCoord,
     backtrackReplay,
     sensitiveResources,

frontend/src/components/hns/components/HNSAnalysisListTable.tsx

@@ -8,8 +8,6 @@ interface HNSAnalysisListTableProps {
   onSelectAnalysis?: (sn: number, localRsltData?: Record<string, unknown>) => void;
 }
 
-const PAGE_SIZE = 10;
-
 const RISK_LABEL: Record<string, string> = {
   CRITICAL: '심각',
   HIGH: '위험',
@@ -41,17 +39,12 @@ function substanceTag(sbstNm: string | null): string {
 export function HNSAnalysisListTable({ onTabChange, onSelectAnalysis }: HNSAnalysisListTableProps) {
   const [analyses, setAnalyses] = useState<HnsAnalysisItem[]>([]);
   const [loading, setLoading] = useState(true);
-  const [page, setPage] = useState(1);
-  const [total, setTotal] = useState(0);
-
-  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
 
   const loadData = useCallback(async () => {
     setLoading(true);
     try {
-      const res = await fetchHnsAnalyses({ page, limit: PAGE_SIZE });
-      setAnalyses(res.items);
-      setTotal(res.total);
+      const items = await fetchHnsAnalyses();
+      setAnalyses(items);
     } catch (err) {
       console.error('[hns] 분석 목록 조회 실패, localStorage fallback:', err);
       // DB 실패 시 localStorage에서 불러오기
@@ -100,7 +93,7 @@ export function HNSAnalysisListTable({ onTabChange, onSelectAnalysis }: HNSAnaly
     } finally {
       setLoading(false);
     }
-  }, [page]);
+  }, []);
 
   useEffect(() => {
     loadData();
@@ -112,7 +105,7 @@ export function HNSAnalysisListTable({ onTabChange, onSelectAnalysis }: HNSAnaly
       <div className="flex items-center justify-between px-5 py-4 border-b border-stroke">
         <div>
           <h1 className="text-heading-3 font-bold text-fg">HNS 대기확산 분석 목록</h1>
-          <p className="text-title-3 text-fg-disabled mt-1">총 {total}건</p>
+          <p className="text-title-3 text-fg-disabled mt-1">총 {analyses.length}건</p>
         </div>
         <div className="flex items-center gap-3">
           <div className="relative">
@@ -306,66 +299,6 @@ export function HNSAnalysisListTable({ onTabChange, onSelectAnalysis }: HNSAnaly
           </div>
         )}
       </div>
-
-      {/* Pagination */}
-      {totalPages > 1 && (
-        <div className="flex items-center justify-center gap-1 px-5 py-3 border-t border-stroke">
-          <button
-            disabled={page <= 1}
-            onClick={() => setPage(1)}
-            className="px-2.5 py-1.5 text-label-1 rounded-sm bg-bg-elevated text-fg-disabled hover:bg-bg-card hover:text-fg disabled:opacity-40 disabled:cursor-not-allowed"
-          >
-            «
-          </button>
-          <button
-            disabled={page <= 1}
-            onClick={() => setPage((p) => p - 1)}
-            className="px-2.5 py-1.5 text-label-1 rounded-sm bg-bg-elevated text-fg-disabled hover:bg-bg-card hover:text-fg disabled:opacity-40 disabled:cursor-not-allowed"
-          >
-            ‹
-          </button>
-          {Array.from({ length: totalPages }, (_, i) => i + 1)
-            .filter((p) => p === 1 || p === totalPages || Math.abs(p - page) <= 2)
-            .reduce<number[]>((acc, p) => {
-              if (acc.length > 0 && p - acc[acc.length - 1] > 1) acc.push(-acc.length);
-              acc.push(p);
-              return acc;
-            }, [])
-            .map((p) =>
-              p < 0 ? (
-                <span key={`ellipsis-${p}`} className="px-1.5 text-fg-disabled text-label-1">
-                  …
-                </span>
-              ) : (
-                <button
-                  key={p}
-                  onClick={() => setPage(p)}
-                  className={`min-w-[32px] px-2.5 py-1.5 text-label-1 rounded-sm ${
-                    p === page
-                      ? 'bg-color-accent text-white font-semibold'
-                      : 'bg-bg-elevated text-fg-disabled hover:bg-bg-card hover:text-fg'
-                  }`}
-                >
-                  {p}
-                </button>
-              ),
-            )}
-          <button
-            disabled={page >= totalPages}
-            onClick={() => setPage((p) => p + 1)}
-            className="px-2.5 py-1.5 text-label-1 rounded-sm bg-bg-elevated text-fg-disabled hover:bg-bg-card hover:text-fg disabled:opacity-40 disabled:cursor-not-allowed"
-          >
-            ›
-          </button>
-          <button
-            disabled={page >= totalPages}
-            onClick={() => setPage(totalPages)}
-            className="px-2.5 py-1.5 text-label-1 rounded-sm bg-bg-elevated text-fg-disabled hover:bg-bg-card hover:text-fg disabled:opacity-40 disabled:cursor-not-allowed"
-          >
-            »
-          </button>
-        </div>
-      )}
     </div>
   );
 }

frontend/src/components/hns/components/HNSScenarioView.tsx

@@ -288,8 +288,8 @@ export function HNSScenarioView() {
   useEffect(() => {
     let cancelled = false;
     fetchHnsAnalyses()
-      .then((res) => {
-        if (!cancelled) setIncidents(res.items);
+      .then((items) => {
+        if (!cancelled) setIncidents(items);
       })
       .catch((err) => console.error('[hns] 사고 목록 조회 실패:', err));
     return () => {

frontend/src/components/hns/services/hnsApi.ts

@@ -6,22 +6,13 @@ import type { HnsAnalysisItem, CreateHnsAnalysisInput } from '@interfaces/hns/Hn
 // ============================================================
 
 
-interface HnsAnalysesResponse {
-  items: HnsAnalysisItem[];
-  total: number;
-  page: number;
-  limit: number;
-}
-
 export async function fetchHnsAnalyses(params?: {
   status?: string;
   substance?: string;
   search?: string;
   acdntSn?: number;
-  page?: number;
-  limit?: number;
-}): Promise<HnsAnalysesResponse> {
-  const response = await api.get<HnsAnalysesResponse>('/hns/analyses', { params });
+}): Promise<HnsAnalysisItem[]> {
+  const response = await api.get<HnsAnalysisItem[]>('/hns/analyses', { params });
   return response.data;
 }
 

frontend/src/components/incidents/components/AnalysisSelectModal.tsx

@@ -156,8 +156,8 @@ export function AnalysisSelectModal({
           const items = await fetchPredictionAnalyses();
           setPredItems(items);
         } else if (type === 'hns') {
-          const res = await fetchHnsAnalyses();
-          setHnsItems(res.items);
+          const items = await fetchHnsAnalyses();
+          setHnsItems(items);
         } else {
           const items = await fetchRescueOps();
           setRescueItems(items);

frontend/src/components/incidents/components/IncidentsRightPanel.tsx

@@ -175,12 +175,12 @@ export function IncidentsRightPanel({
       })
       .catch(() => setPredItems([]));
     fetchHnsAnalyses({ acdntSn, status: 'COMPLETED' })
-      .then((res) => {
-        setHnsItems(res.items);
-        const allIds = new Set(res.items.map((i) => String(i.hnsAnlysSn)));
+      .then((items) => {
+        setHnsItems(items);
+        const allIds = new Set(items.map((i) => String(i.hnsAnlysSn)));
         setCheckedHnsIds(allIds);
         onCheckedHnsChange?.(
-          res.items.map((h) => ({
+          items.map((h) => ({
             id: String(h.hnsAnlysSn),
             hnsAnlysSn: h.hnsAnlysSn,
             acdntSn: h.acdntSn,

frontend/src/components/incidents/components/IncidentsView.tsx

@@ -221,7 +221,7 @@ export function IncidentsView() {
     const acdntSn = parseInt(selectedIncidentId, 10);
     if (Number.isNaN(acdntSn)) return;
     fetchHnsAnalyses({ acdntSn, status: 'COMPLETED' })
-      .then((res) => setHnsAnalyses(res.items))
+      .then((items) => setHnsAnalyses(items))
       .catch(() => {});
   }, [selectedIncidentId]);