wing-ops/frontend/src/tabs/aerial/components/CctvView.tsx

import { useState, useCallback, useEffect } from 'react'
import { fetchCctvCameras } from '../services/aerialApi'
import type { CctvCameraItem } from '../services/aerialApi'
import { CCTVPlayer } from './CCTVPlayer'

/** KHOA HLS 스트림 베이스 URL */
const KHOA_HLS = 'https://www.khoa.go.kr/SEAFOG/m4NiLawsC202gM5ixA7MPTYtO19KmV/hls/khoa';

/** KHOA HLS 스트림 URL 생성 */
function khoaHlsUrl(siteName: string): string {
  return `${KHOA_HLS}/${siteName}/s.m3u8`;
}

const cctvFavorites = [
  { name: '여수항 해무관측', reason: '유출 사고 인접' },
  { name: '부산항 조위관측소', reason: '주요 방제 거점' },
  { name: '목포항 해무관측', reason: '서해 모니터링' },
]

/** badatime.com 실제 해안 CCTV 데이터 (API 미연결 시 폴백) */
const FALLBACK_CAMERAS: CctvCameraItem[] = [
  // 서해
  { cctvSn: 29, cameraNm: '인천항 조위관측소', regionNm: '서해', lon: 126.5922, lat: 37.4519, locDc: '인천광역시 중구 항동', coordDc: '37.45°N 126.59°E', sttsCd: 'LIVE', ptzYn: 'N', sourceNm: 'KHOA', streamUrl: khoaHlsUrl('Incheon') },
  { cctvSn: 30, cameraNm: '인천항 해무관측', regionNm: '서해', lon: 126.6161, lat: 37.3797, locDc: '인천광역시 중구 항동', coordDc: 'N 37°22\'47" E 126°36\'58"', sttsCd: 'LIVE', ptzYn: 'N', sourceNm: 'KHOA', streamUrl: khoaHlsUrl('SeaFog_Incheon') },
  { cctvSn: 31, cameraNm: '대산항 해무관측', regionNm: '서해', lon: 126.3526, lat: 37.0058, locDc: '충남 서산시 대산읍', coordDc: '37.01°N 126.35°E', sttsCd: 'LIVE', ptzYn: 'N', sourceNm: 'KHOA', streamUrl: khoaHlsUrl('SeaFog_Daesan') },
  { cctvSn: 32, cameraNm: '평택·당진항 해무관측', regionNm: '서해', lon: 126.3936, lat: 37.1131, locDc: '충남 당진시 송악읍', coordDc: 'N 37°06\'47" E 126°23\'37"', sttsCd: 'LIVE', ptzYn: 'N', sourceNm: 'KHOA', streamUrl: khoaHlsUrl('SeaFog_PTDJ') },
  { cctvSn: 100, cameraNm: '인천 연안부두', regionNm: '서해', lon: 126.6125, lat: 37.4625, locDc: '인천광역시 중구 연안부두', coordDc: '37.46°N 126.61°E', sttsCd: 'LIVE', ptzYn: 'N', sourceNm: 'KBS', streamUrl: null },
  // 남해
  { cctvSn: 35, cameraNm: '목포항 해무관측', regionNm: '남해', lon: 126.3780, lat: 34.7780, locDc: '전남 목포시 항동', coordDc: '34.78°N 126.38°E', sttsCd: 'LIVE', ptzYn: 'N', sourceNm: 'KHOA', streamUrl: khoaHlsUrl('SeaFog_Mokpo') },
  { cctvSn: 36, cameraNm: '진도항 조위관측소', regionNm: '남해', lon: 126.3085, lat: 34.4710, locDc: '전남 진도군 진도읍', coordDc: '34.47°N 126.31°E', sttsCd: 'LIVE', ptzYn: 'N', sourceNm: 'KHOA', streamUrl: khoaHlsUrl('Jindo') },
  { cctvSn: 37, cameraNm: '여수항 해무관측', regionNm: '남해', lon: 127.7669, lat: 34.7384, locDc: '전남 여수시 종화동', coordDc: '34.74°N 127.77°E', sttsCd: 'LIVE', ptzYn: 'N', sourceNm: 'KHOA', streamUrl: khoaHlsUrl('SeaFog_Yeosu') },
  { cctvSn: 38, cameraNm: '여수항 조위관측소', regionNm: '남해', lon: 127.7650, lat: 34.7370, locDc: '전남 여수시 종화동', coordDc: '34.74°N 127.77°E', sttsCd: 'LIVE', ptzYn: 'N', sourceNm: 'KHOA', streamUrl: khoaHlsUrl('Yeosu') },
  { cctvSn: 39, cameraNm: '부산항 조위관측소', regionNm: '남해', lon: 129.0756, lat: 35.0969, locDc: '부산광역시 중구 중앙동', coordDc: '35.10°N 129.08°E', sttsCd: 'LIVE', ptzYn: 'N', sourceNm: 'KHOA', streamUrl: khoaHlsUrl('Busan') },
  { cctvSn: 40, cameraNm: '부산항 해무관측', regionNm: '남해', lon: 129.0780, lat: 35.0980, locDc: '부산광역시 중구', coordDc: '35.10°N 129.08°E', sttsCd: 'LIVE', ptzYn: 'N', sourceNm: 'KHOA', streamUrl: khoaHlsUrl('SeaFog_Busan') },
  { cctvSn: 41, cameraNm: '해운대 해무관측', regionNm: '남해', lon: 129.1718, lat: 35.1587, locDc: '부산광역시 해운대구', coordDc: '35.16°N 129.17°E', sttsCd: 'LIVE', ptzYn: 'N', sourceNm: 'KHOA', streamUrl: khoaHlsUrl('SeaFog_Haeundae') },
  { cctvSn: 97, cameraNm: '오동도', regionNm: '남해', lon: 127.7836, lat: 34.7369, locDc: '전남 여수시 수정동', coordDc: '34.74°N 127.78°E', sttsCd: 'LIVE', ptzYn: 'N', sourceNm: 'KBS', streamUrl: null },
  { cctvSn: 108, cameraNm: '완도항', regionNm: '남해', lon: 126.7550, lat: 34.3114, locDc: '전남 완도군 완도읍', coordDc: '34.31°N 126.76°E', sttsCd: 'LIVE', ptzYn: 'N', sourceNm: 'KBS', streamUrl: null },
  // 동해
  { cctvSn: 42, cameraNm: '울산항 해무관측', regionNm: '동해', lon: 129.3870, lat: 35.5000, locDc: '울산광역시 남구', coordDc: '35.50°N 129.39°E', sttsCd: 'LIVE', ptzYn: 'N', sourceNm: 'KHOA', streamUrl: khoaHlsUrl('SeaFog_Ulsan') },
  { cctvSn: 43, cameraNm: '포항항 해무관측', regionNm: '동해', lon: 129.3798, lat: 36.0323, locDc: '경북 포항시 북구', coordDc: '36.03°N 129.38°E', sttsCd: 'LIVE', ptzYn: 'N', sourceNm: 'KHOA', streamUrl: khoaHlsUrl('SeaFog_Pohang') },
  { cctvSn: 44, cameraNm: '묵호항 조위관측소', regionNm: '동해', lon: 129.1146, lat: 37.5500, locDc: '강원 동해시 묵호동', coordDc: '37.55°N 129.11°E', sttsCd: 'LIVE', ptzYn: 'N', sourceNm: 'KHOA', streamUrl: khoaHlsUrl('Mukho') },
  { cctvSn: 113, cameraNm: '속초등대', regionNm: '동해', lon: 128.5964, lat: 38.2070, locDc: '강원 속초시 영랑동', coordDc: '38.21°N 128.60°E', sttsCd: 'LIVE', ptzYn: 'N', sourceNm: 'KBS', streamUrl: null },
  { cctvSn: 115, cameraNm: '독도', regionNm: '동해', lon: 131.8689, lat: 37.2394, locDc: '경북 울릉군 울릉읍 독도리', coordDc: '37.24°N 131.87°E', sttsCd: 'LIVE', ptzYn: 'N', sourceNm: 'KBS', streamUrl: null },
  // 제주
  { cctvSn: 45, cameraNm: '모슬포항 조위관측소', regionNm: '제주', lon: 126.2519, lat: 33.2136, locDc: '제주 서귀포시 대정읍', coordDc: '33.21°N 126.25°E', sttsCd: 'LIVE', ptzYn: 'N', sourceNm: 'KHOA', streamUrl: khoaHlsUrl('Moseulpo') },
  { cctvSn: 116, cameraNm: '마라도', regionNm: '제주', lon: 126.2669, lat: 33.1140, locDc: '제주 서귀포시 대정읍 마라리', coordDc: '33.11°N 126.27°E', sttsCd: 'LIVE', ptzYn: 'N', sourceNm: 'KBS', streamUrl: null },
]

export function CctvView() {
  const [cameras, setCameras] = useState<CctvCameraItem[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState('')
  const [regionFilter, setRegionFilter] = useState('전체')
  const [selectedCamera, setSelectedCamera] = useState<CctvCameraItem | null>(null)
  const [gridMode, setGridMode] = useState(1)
  const [activeCells, setActiveCells] = useState<CctvCameraItem[]>([])

  const loadData = useCallback(async () => {
    setLoading(true)
    try {
      const items = await fetchCctvCameras()
      setCameras(items.length > 0 ? items : FALLBACK_CAMERAS)
    } catch {
      setCameras(FALLBACK_CAMERAS)
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    loadData()
  }, [loadData])

  const regions = ['전체', '제주', '남해', '서해', '동해']
  const regionIcons: Record<string, string> = { '전체': '', '제주': '🌊', '남해': '⚓', '서해': '🐟', '동해': '🌅' }

  const filtered = cameras.filter(c => {
    if (regionFilter !== '전체' && c.regionNm !== regionFilter) return false
    if (searchTerm && !c.cameraNm.includes(searchTerm) && !(c.locDc ?? '').includes(searchTerm)) return false
    return true
  })

  const handleSelectCamera = (cam: CctvCameraItem) => {
    setSelectedCamera(cam)
    if (gridMode === 1) {
      setActiveCells([cam])
    } else {
      setActiveCells(prev => {
        if (prev.length < gridMode && !prev.find(c => c.cctvSn === cam.cctvSn)) return [...prev, cam]
        return prev
      })
    }
  }

  const gridCols = gridMode === 1 ? 1 : gridMode === 4 ? 2 : 3
  const totalCells = gridMode

  return (
    <div className="flex h-full overflow-hidden" style={{ margin: '-20px -24px', height: 'calc(100% + 40px)' }}>
      {/* 왼쪽: 목록 패널 */}
      <div className="flex flex-col overflow-hidden bg-bg-1 border-r border-border w-[290px] min-w-[290px]">
        {/* 헤더 */}
        <div className="p-3 pb-2.5 border-b border-border shrink-0 bg-bg-2">
          <div className="flex items-center justify-between mb-2">
            <div className="text-xs font-bold text-text-1 font-korean flex items-center gap-1.5">
              <span className="w-[7px] h-[7px] rounded-full inline-block animate-pulse" style={{ background: 'var(--red)' }} />
              실시간 해안 CCTV
            </div>
            <div className="flex items-center gap-1.5">
              <span className="text-[9px] text-text-3 font-korean">API 상태</span>
              <span className="w-[7px] h-[7px] rounded-full inline-block" style={{ background: 'var(--green)' }} />
            </div>
          </div>
          {/* 검색 */}
          <div className="flex items-center gap-2 bg-bg-0 border border-border rounded-md px-2.5 py-1.5 mb-2 focus-within:border-primary-cyan/50 transition-colors">
            <span className="text-text-3 text-[11px]">🔍</span>
            <input
              type="text"
              placeholder="지점명 또는 지역 검색..."
              value={searchTerm}
              onChange={e => setSearchTerm(e.target.value)}
              className="flex-1 bg-transparent border-none text-text-1 text-[11px] font-korean outline-none"
            />
          </div>
          {/* 지역 필터 */}
          <div className="flex gap-1 flex-wrap">
            {regions.map(r => (
              <button
                key={r}
                onClick={() => setRegionFilter(r)}
                className="px-2 py-0.5 rounded text-[9px] font-semibold cursor-pointer font-korean border transition-colors"
                style={regionFilter === r
                  ? { background: 'rgba(6,182,212,.15)', color: 'var(--cyan)', borderColor: 'rgba(6,182,212,.3)' }
                  : { background: 'var(--bg3)', color: 'var(--t2)', borderColor: 'var(--bd)' }
                }
              >{regionIcons[r] ? `${regionIcons[r]} ` : ''}{r}</button>
            ))}
          </div>
        </div>

        {/* 상태 바 */}
        <div className="flex items-center justify-between px-3.5 py-1 border-b border-border shrink-0 bg-bg-1">
          <div className="text-[9px] text-text-3 font-korean">출처: 국립해양조사원 · KBS 재난안전포털</div>
          <div className="text-[10px] text-text-2 font-korean"><b className="text-text-1">{filtered.length}</b>개</div>
        </div>

        {/* 카메라 목록 */}
        <div className="flex-1 overflow-y-auto" style={{ scrollbarWidth: 'thin', scrollbarColor: 'var(--bdL) transparent' }}>
          {loading ? (
            <div className="px-3.5 py-4 text-[11px] text-text-3 font-korean">불러오는 중...</div>
          ) : filtered.map(cam => (
            <div
              key={cam.cctvSn}
              onClick={() => handleSelectCamera(cam)}
              className="flex items-center gap-2.5 px-3.5 py-2.5 border-b cursor-pointer transition-colors"
              style={{
                borderColor: 'rgba(255,255,255,.04)',
                background: selectedCamera?.cctvSn === cam.cctvSn ? 'rgba(6,182,212,.08)' : 'transparent',
              }}
            >
              <div className="relative shrink-0">
                <div className="w-8 h-8 rounded-md bg-bg-3 flex items-center justify-center text-sm">📹</div>
                <div className="absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full border border-bg-1" style={{ background: cam.sttsCd === 'LIVE' ? 'var(--green)' : 'var(--t3)' }} />
              </div>
              <div className="flex-1 min-w-0">
                <div className="text-[11px] font-semibold text-text-1 font-korean truncate">{cam.cameraNm}</div>
                <div className="text-[9px] text-text-3 font-korean truncate">{cam.locDc ?? ''}</div>
              </div>
              <div className="flex flex-col items-end gap-0.5 shrink-0">
                {cam.sttsCd === 'LIVE' ? (
                  <span className="text-[8px] font-bold px-1.5 py-px rounded-full" style={{ background: 'rgba(34,197,94,.12)', color: 'var(--green)' }}>LIVE</span>
                ) : (
                  <span className="text-[8px] font-bold px-1.5 py-px rounded-full" style={{ background: 'rgba(255,255,255,.06)', color: 'var(--t3)' }}>OFF</span>
                )}
                {cam.ptzYn === 'Y' && <span className="text-[8px] text-text-3 font-mono">PTZ</span>}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* 가운데: 영상 뷰어 */}
      <div className="flex-1 flex flex-col overflow-hidden min-w-0 bg-[#04070f]">
        {/* 뷰어 툴바 */}
        <div className="flex items-center justify-between px-4 py-2 border-b border-border bg-bg-2 shrink-0 gap-2.5">
          <div className="flex items-center gap-2 min-w-0">
            <div className="text-xs font-bold text-text-1 font-korean whitespace-nowrap overflow-hidden text-ellipsis">
              {selectedCamera ? `📹 ${selectedCamera.cameraNm}` : '📹 카메라를 선택하세요'}
            </div>
            {selectedCamera?.sttsCd === 'LIVE' && (
              <div className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-bold shrink-0" style={{ background: 'rgba(239,68,68,.14)', border: '1px solid rgba(239,68,68,.35)', color: 'var(--red)' }}>
                <span className="w-[5px] h-[5px] rounded-full inline-block animate-pulse" style={{ background: 'var(--red)' }} />LIVE
              </div>
            )}
          </div>
          <div className="flex items-center gap-1.5 shrink-0">
            {/* PTZ 컨트롤 */}
            {selectedCamera?.ptzYn === 'Y' && (
              <div className="flex items-center gap-1 px-2 py-1 bg-bg-3 border border-border rounded-[5px]">
                <span className="text-[9px] text-text-3 font-korean mr-1">PTZ</span>
                {['◀', '▲', '▼', '▶'].map((d, i) => (
                  <button key={i} className="w-5 h-5 flex items-center justify-center bg-bg-0 border border-border rounded text-[9px] text-text-2 cursor-pointer hover:bg-bg-hover transition-colors">{d}</button>
                ))}
                <div className="w-px h-4 bg-border mx-0.5" />
                {['+', '−'].map((z, i) => (
                  <button key={i} className="w-5 h-5 flex items-center justify-center bg-bg-0 border border-border rounded text-[9px] text-text-2 cursor-pointer hover:bg-bg-hover transition-colors">{z}</button>
                ))}
              </div>
            )}
            {/* 분할 모드 */}
            <div className="flex border border-border rounded-[5px] overflow-hidden">
              {[
                { mode: 1, icon: '▣', label: '1화면' },
                { mode: 4, icon: '⊞', label: '4분할' },
                { mode: 9, icon: '⊟', label: '9분할' },
              ].map(g => (
                <button
                  key={g.mode}
                  onClick={() => { setGridMode(g.mode); setActiveCells(prev => prev.slice(0, g.mode)) }}
                  title={g.label}
                  className="px-2 py-1 text-[11px] cursor-pointer border-none transition-colors"
                  style={gridMode === g.mode
                    ? { background: 'rgba(6,182,212,.15)', color: 'var(--cyan)' }
                    : { background: 'var(--bg3)', color: 'var(--t2)' }
                  }
                >{g.icon}</button>
              ))}
            </div>
            <button className="px-2.5 py-1 bg-bg-3 border border-border rounded-[5px] text-text-2 text-[10px] font-semibold cursor-pointer font-korean hover:bg-bg-hover transition-colors">📷 캡처</button>
          </div>
        </div>

        {/* 영상 그리드 */}
        <div className="flex-1 gap-0.5 p-0.5 overflow-hidden relative grid bg-black"
          style={{
            gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
            gridTemplateRows: `repeat(${gridCols}, 1fr)`,
          }}>
          {Array.from({ length: totalCells }).map((_, i) => {
            const cam = activeCells[i]
            return (
              <div key={i} className="relative flex items-center justify-center overflow-hidden bg-[#0a0e18]" style={{ border: '1px solid rgba(255,255,255,.06)' }}>
                {cam ? (
                  <CCTVPlayer
                    cameraNm={cam.cameraNm}
                    streamUrl={cam.streamUrl}
                    sttsCd={cam.sttsCd}
                    coordDc={cam.coordDc}
                    sourceNm={cam.sourceNm}
                    cellIndex={i}
                  />
                ) : (
                  <div className="text-[10px] text-text-3 font-korean opacity-40">카메라를 선택하세요</div>
                )}
              </div>
            )
          })}
        </div>

        {/* 하단 정보 바 */}
        <div className="flex items-center gap-3.5 px-4 py-1.5 border-t border-border bg-bg-2 shrink-0">
          <div className="text-[10px] text-text-3 font-korean">선택: <b className="text-text-1">{selectedCamera?.cameraNm ?? '–'}</b></div>
          <div className="text-[10px] text-text-3 font-korean">위치: <span className="text-text-2">{selectedCamera?.locDc ?? '–'}</span></div>
          <div className="text-[10px] text-text-3 font-korean">좌표: <span className="text-primary-cyan font-mono text-[9px]">{selectedCamera?.coordDc ?? '–'}</span></div>
          <div className="ml-auto text-[9px] text-text-3 font-korean">API: 국립해양조사원 TAGO 해양 CCTV</div>
        </div>
      </div>

      {/* 오른쪽: 미니맵 + 정보 */}
      <div className="flex flex-col overflow-hidden bg-bg-1 border-l border-border w-[232px] min-w-[232px]">
        {/* 지도 헤더 */}
        <div className="px-3 py-2 border-b border-border text-[11px] font-bold text-text-1 font-korean bg-bg-2 shrink-0 flex items-center justify-between">
          <span>🗺 위치 지도</span>
          <span className="text-[9px] text-text-3 font-normal">클릭하여 선택</span>
        </div>
        {/* 미니맵 (placeholder) */}
        <div className="w-full bg-bg-3 flex items-center justify-center shrink-0 relative h-[210px]">
          <div className="text-[10px] text-text-3 font-korean opacity-50">지도 영역</div>
          {/* 간략 지도 표현 */}
          <div className="absolute inset-2 rounded-md border border-border/30 overflow-hidden" style={{ background: 'linear-gradient(180deg, rgba(6,182,212,.03), rgba(59,130,246,.05))' }}>
            {cameras.filter(c => c.sttsCd === 'LIVE').slice(0, 6).map((c, i) => (
              <div
                key={i}
                className="absolute w-2 h-2 rounded-full cursor-pointer"
                style={{
                  background: selectedCamera?.cctvSn === c.cctvSn ? 'var(--cyan)' : 'var(--green)',
                  boxShadow: selectedCamera?.cctvSn === c.cctvSn ? '0 0 6px var(--cyan)' : 'none',
                  top: `${20 + (i * 25) % 70}%`,
                  left: `${15 + (i * 30) % 70}%`,
                }}
                title={c.cameraNm}
                onClick={() => handleSelectCamera(c)}
              />
            ))}
          </div>
        </div>

        {/* 카메라 정보 */}
        <div className="flex-1 overflow-y-auto px-3 py-2.5 border-t border-border" style={{ scrollbarWidth: 'thin', scrollbarColor: 'var(--bdL) transparent' }}>
          <div className="text-[10px] font-bold text-text-2 font-korean mb-2">📋 카메라 정보</div>
          {selectedCamera ? (
            <div className="flex flex-col gap-1.5">
              {[
                ['카메라명', selectedCamera.cameraNm],
                ['지역', selectedCamera.regionNm],
                ['위치', selectedCamera.locDc ?? '—'],
                ['좌표', selectedCamera.coordDc ?? '—'],
                ['상태', selectedCamera.sttsCd === 'LIVE' ? '● 송출중' : '● 오프라인'],
                ['PTZ', selectedCamera.ptzYn === 'Y' ? '지원' : '미지원'],
                ['출처', selectedCamera.sourceNm ?? '—'],
              ].map(([k, v], i) => (
                <div key={i} className="flex justify-between px-2 py-1 bg-bg-0 rounded text-[9px]">
                  <span className="text-text-3 font-korean">{k}</span>
                  <span className="font-mono text-text-1">{v}</span>
                </div>
              ))}
            </div>
          ) : (
            <div className="text-[10px] text-text-3 font-korean">카메라를 선택하세요</div>
          )}

          {/* 방제 즐겨찾기 */}
          <div className="mt-3 pt-2.5 border-t border-border">
            <div className="text-[10px] font-bold text-text-2 font-korean mb-2">⭐ 방제 핵심 지점</div>
            <div className="flex flex-col gap-1">
              {cctvFavorites.map((fav, i) => (
                <div
                  key={i}
                  className="flex items-center gap-2 px-2 py-1.5 bg-bg-3 rounded-[5px] cursor-pointer hover:bg-bg-hover transition-colors"
                  onClick={() => {
                    const found = cameras.find(c => c.cameraNm === fav.name)
                    if (found) handleSelectCamera(found)
                  }}
                >
                  <span className="text-[9px]">⭐</span>
                  <div className="flex-1 min-w-0">
                    <div className="text-[9px] font-semibold text-text-1 font-korean truncate">{fav.name}</div>
                    <div className="text-[8px] text-text-3 font-korean">{fav.reason}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* API 연동 현황 */}
          <div className="mt-3 pt-2.5 border-t border-border">
            <div className="text-[10px] font-bold text-text-2 font-korean mb-2">🔌 API 연동 현황</div>
            <div className="flex flex-col gap-1.5">
              {[
                { name: '해양조사원 TAGO', status: '● 연결', color: 'var(--green)' },
                { name: 'KBS 재난안전포털', status: '● 연결', color: 'var(--green)' },
              ].map((api, i) => (
                <div key={i} className="flex items-center justify-between px-2 py-1 bg-bg-3 rounded-[5px]" style={{ border: '1px solid rgba(34,197,94,.2)' }}>
                  <span className="text-[9px] text-text-2 font-korean">{api.name}</span>
                  <span className="text-[9px] font-bold" style={{ color: api.color }}>{api.status}</span>
                </div>
              ))}
              <div className="flex items-center justify-between px-2 py-1 bg-bg-3 rounded-[5px]" style={{ border: '1px solid rgba(59,130,246,.2)' }}>
                <span className="text-[9px] text-text-2 font-korean">갱신 주기</span>
                <span className="text-[9px] font-bold font-mono text-primary-blue">1 fps</span>
              </div>
              <div className="text-[9px] text-text-3 font-mono text-right mt-0.5">최종갱신: {new Date().toLocaleTimeString('ko-KR')}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}