kimandClaude Sonnet 4.6
d74614cee1
- 카카오톡 채널 챗봇 (오픈빌더 비동기 콜백 방식, 5초 제한 우회) - 카카오 "나에게 보내기" OAuth 알림 (kakao-notify.ts) - 채널 설정 UI + userMap으로 다중 사용자 계정 매핑 - 탐정앱: 탭(메모/체크리스트/타임라인), 우선순위, 검색, 보고서/고소장/접수안내 생성 - 모바일 브레이크포인트 640px → 1024px (갤럭시 폴드 대응) - 프롬프트 파일 제한 상향 (USER.md 3000, SOUL.md/AGENTS.md 4000) - 교통앱 마지막 선택 지역 localStorage 저장/복원 - docs/kakao-setup.md 작성 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
336 lines
16 KiB
HTML
336 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>🚦 교통 CCTV</title>
|
|
<link rel="icon" type="image/png" sizes="64x64" href="cherry_logo.png">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<script>try{var _t=localStorage.getItem('cherryclaw_theme')||'dark';document.documentElement.setAttribute('data-theme',_t);}catch(e){}</script>
|
|
<style>
|
|
:root{--brand:#f59e0b;}
|
|
html,body{height:100%;margin:0;padding:0;}
|
|
body{background:var(--bg);color:var(--text);font-family:system-ui,sans-serif;display:flex;flex-direction:column;overflow:hidden;height:100dvh;}
|
|
|
|
.hdr{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--panel);border-bottom:1px solid var(--line);flex-shrink:0;}
|
|
.hdr h1{font-size:13px;font-weight:700;margin:0;}
|
|
.hdr-sp{flex:1;}
|
|
.hdr-btn{background:none;border:1.5px solid var(--line);border-radius:6px;padding:3px 9px;font-size:11px;color:var(--muted);cursor:pointer;font-family:inherit;transition:.15s;}
|
|
.hdr-btn:hover{border-color:var(--brand);color:var(--brand);}
|
|
|
|
/* ── 사이드바 ── */
|
|
.sidebar{width:280px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--panel);min-height:0;}
|
|
.sb-top{padding:8px;border-bottom:1px solid var(--line);flex-shrink:0;}
|
|
.search-box{width:100%;background:var(--panel-2);border:1.5px solid var(--line);border-radius:7px;padding:5px 10px;font-size:12px;color:var(--text);font-family:inherit;outline:none;box-sizing:border-box;transition:.15s;}
|
|
.search-box:focus{border-color:var(--brand);}
|
|
.region-bar{display:flex;gap:4px;flex-wrap:wrap;padding:6px 8px;border-bottom:1px solid var(--line);flex-shrink:0;}
|
|
.r-btn{padding:3px 8px;border:1.5px solid var(--line);border-radius:12px;font-size:11px;font-weight:600;cursor:pointer;background:none;color:var(--muted);font-family:inherit;transition:.12s;white-space:nowrap;}
|
|
.r-btn:hover{border-color:var(--brand);color:var(--brand);}
|
|
.r-btn.active{border-color:var(--brand);background:rgba(245,158,11,.12);color:var(--brand);}
|
|
.list-wrap{flex:1;overflow-y:auto;}
|
|
.list-wrap::-webkit-scrollbar{width:3px;}
|
|
.list-wrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}
|
|
.cctv-item{padding:8px 10px;cursor:pointer;border-bottom:1px solid var(--line);transition:.12s;}
|
|
.cctv-item:hover{background:rgba(245,158,11,.06);}
|
|
.cctv-item.active{background:rgba(245,158,11,.12);border-left:2px solid var(--brand);}
|
|
.ci-name{font-size:12px;font-weight:600;color:var(--text);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
.ci-road{font-size:10px;color:var(--muted);}
|
|
.list-empty{padding:20px;text-align:center;color:var(--muted);font-size:12px;}
|
|
|
|
/* ── 메인 뷰어 ── */
|
|
.main{flex:1;display:flex;flex-direction:column;min-width:0;}
|
|
.viewer-hdr{padding:8px 12px;border-bottom:1px solid var(--line);background:var(--panel);flex-shrink:0;display:flex;align-items:center;gap:8px;}
|
|
.viewer-title{font-size:13px;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
.status-dot{width:8px;height:8px;border-radius:50%;background:#888;flex-shrink:0;}
|
|
.status-dot.live{background:#22c55e;box-shadow:0 0 6px #22c55e;}
|
|
.btn-sm{padding:3px 10px;background:none;border:1.5px solid var(--line);border-radius:6px;font-size:11px;color:var(--muted);cursor:pointer;font-family:inherit;transition:.15s;}
|
|
.btn-sm:hover{border-color:var(--brand);color:var(--brand);}
|
|
|
|
.video-wrap{flex:1;position:relative;background:#000;display:flex;align-items:center;justify-content:center;min-height:0;}
|
|
.video-wrap video{width:100%;height:100%;object-fit:contain;}
|
|
.placeholder{color:#555;font-size:13px;text-align:center;padding:40px;line-height:1.8;}
|
|
.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);color:#fff;font-size:13px;display:none;}
|
|
.loading-overlay.show{display:flex;}
|
|
|
|
/* ── 그리드 뷰 ── */
|
|
.grid-wrap{flex:1;overflow-y:auto;padding:8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;}
|
|
.grid-wrap::-webkit-scrollbar{width:3px;}
|
|
.grid-wrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}
|
|
.grid-item{background:#111;border-radius:8px;overflow:hidden;cursor:pointer;border:1.5px solid var(--line);transition:.15s;aspect-ratio:4/3;position:relative;}
|
|
.grid-item:hover{border-color:var(--brand);}
|
|
.grid-item video{width:100%;height:100%;object-fit:cover;}
|
|
.grid-label{position:absolute;bottom:0;left:0;right:0;padding:4px 8px;background:rgba(0,0,0,.7);font-size:10px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
|
|
.view-toggle{display:flex;gap:4px;}
|
|
.vt-btn{padding:3px 10px;background:none;border:1.5px solid var(--line);border-radius:6px;font-size:11px;color:var(--muted);cursor:pointer;font-family:inherit;transition:.15s;}
|
|
.vt-btn.active{border-color:var(--brand);color:var(--brand);background:rgba(245,158,11,.1);}
|
|
|
|
.count-badge{font-size:11px;color:var(--muted);padding:0 4px;}
|
|
|
|
/* ── 탭 ── */
|
|
.tab-bar{display:flex;gap:0;border-bottom:1px solid var(--line);background:var(--panel);flex-shrink:0;}
|
|
.tab-btn{padding:7px 16px;font-size:12px;font-weight:600;cursor:pointer;background:none;border:none;color:var(--muted);font-family:inherit;border-bottom:2px solid transparent;transition:.15s;margin-bottom:-1px;}
|
|
.tab-btn:hover{color:var(--text);}
|
|
.tab-btn.active{color:var(--brand);border-bottom-color:var(--brand);}
|
|
.tab-pane{display:none;flex:1;min-height:0;}
|
|
.tab-pane.active{display:flex;flex-direction:column;}
|
|
|
|
/* ── UTIC iframe ── */
|
|
.utic-frame{flex:1;border:none;width:100%;height:100%;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="hdr">
|
|
<a href="/" style="text-decoration:none;font-size:13px;color:var(--muted)">← 홈</a>
|
|
<h1>🚦 교통 CCTV</h1>
|
|
<span class="count-badge" id="count-badge"></span>
|
|
<span class="hdr-sp"></span>
|
|
<button class="hdr-btn" onclick="toggleTheme()">🌙</button>
|
|
</header>
|
|
|
|
<div style="display:flex;flex-direction:column;flex:1;min-height:0;">
|
|
<!-- 탭 바 -->
|
|
<div class="tab-bar">
|
|
<button class="tab-btn active" id="tab-utic" onclick="switchTab('utic')">🗺️ UTIC 교통지도</button>
|
|
<button class="tab-btn" id="tab-its" onclick="switchTab('its')">📡 ITS 고속도로 CCTV</button>
|
|
</div>
|
|
|
|
<!-- UTIC 탭 -->
|
|
<div class="tab-pane active" id="pane-utic">
|
|
<iframe class="utic-frame" src="https://www.utic.go.kr/map/map.do?menu=cctv"
|
|
id="utic-frame" allowfullscreen></iframe>
|
|
</div>
|
|
|
|
<!-- ITS CCTV 탭 -->
|
|
<div class="tab-pane" id="pane-its" style="flex-direction:row;">
|
|
<!-- 사이드바: CCTV 목록 -->
|
|
<aside class="sidebar">
|
|
<div class="sb-top">
|
|
<input class="search-box" id="search" type="text" placeholder="🔍 도로·지역 검색..." oninput="filterList()">
|
|
</div>
|
|
<div class="region-bar" id="region-bar">
|
|
<button class="r-btn active" data-minX="124.0" data-maxX="132.0" data-minY="33.0" data-maxY="39.0" onclick="loadRegion(this)">전국</button>
|
|
<button class="r-btn" data-minX="126.7" data-maxX="127.2" data-minY="37.4" data-maxY="37.7" onclick="loadRegion(this)">서울</button>
|
|
<button class="r-btn" data-minX="126.6" data-maxX="127.5" data-minY="37.1" data-maxY="37.8" onclick="loadRegion(this)">경기</button>
|
|
<button class="r-btn" data-minX="128.8" data-maxX="129.3" data-minY="35.0" data-maxY="35.4" onclick="loadRegion(this)">부산</button>
|
|
<button class="r-btn" data-minX="128.5" data-maxX="129.0" data-minY="35.7" data-maxY="36.1" onclick="loadRegion(this)">대구</button>
|
|
<button class="r-btn" data-minX="126.6" data-maxX="127.0" data-minY="35.0" data-maxY="35.3" onclick="loadRegion(this)">광주</button>
|
|
<button class="r-btn" data-minX="127.3" data-maxX="127.6" data-minY="36.2" data-maxY="36.5" onclick="loadRegion(this)">대전</button>
|
|
<button class="r-btn" data-minX="128.5" data-maxX="129.3" data-minY="35.4" data-maxY="35.9" onclick="loadRegion(this)">울산</button>
|
|
<button class="r-btn" data-minX="126.3" data-maxX="126.9" data-minY="33.2" data-maxY="33.6" onclick="loadRegion(this)">제주</button>
|
|
</div>
|
|
<div class="list-wrap" id="list-wrap">
|
|
<div class="list-empty">지역을 선택하면 CCTV 목록이 로드됩니다.</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- 메인 뷰어 -->
|
|
<main class="main" id="main-area">
|
|
<div class="viewer-hdr" id="viewer-hdr">
|
|
<span class="status-dot" id="status-dot"></span>
|
|
<span class="viewer-title" id="viewer-title">카메라를 선택하세요</span>
|
|
<button class="btn-sm" id="btn-reload" onclick="reloadCurrent()" style="display:none">↺ 새로고침</button>
|
|
<div class="view-toggle" style="margin-left:auto;">
|
|
<button class="vt-btn active" id="btn-single" onclick="setView('single')">단일</button>
|
|
<button class="vt-btn" id="btn-grid" onclick="setView('grid')">그리드</button>
|
|
</div>
|
|
</div>
|
|
<div class="video-wrap" id="video-wrap">
|
|
<div class="placeholder" id="placeholder">← 목록에서 CCTV를 선택하면<br>실시간 영상이 재생됩니다.<br><br>📡 ITS 국가교통정보 · HLS 스트리밍</div>
|
|
<video id="player" style="display:none" controls muted autoplay playsinline></video>
|
|
<div class="loading-overlay" id="loading-overlay">⏳ 스트림 연결 중...</div>
|
|
</div>
|
|
<div class="grid-wrap" id="grid-wrap" style="display:none"></div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- hls.js CDN -->
|
|
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js"></script>
|
|
<script>
|
|
const TOKEN_KEY='smallclaw_token';
|
|
function getToken(){try{return sessionStorage.getItem(TOKEN_KEY)||localStorage.getItem(TOKEN_KEY)||'';}catch{return '';}}
|
|
function authH(extra){const t=getToken();const h={...(extra||{})};if(t)h['Authorization']='Bearer '+t;return h;}
|
|
function toggleTheme(){const d=document.documentElement;const n=d.getAttribute('data-theme')==='dark'?'light':'dark';d.setAttribute('data-theme',n);try{localStorage.setItem('cherryclaw_theme',n);}catch{}}
|
|
|
|
let allItems=[];
|
|
let currentUrl=null;
|
|
let currentHls=null;
|
|
let currentView='single';
|
|
let gridHlsList=[];
|
|
let lastRegionBtn=null;
|
|
|
|
function switchTab(t){
|
|
document.getElementById('tab-utic').classList.toggle('active',t==='utic');
|
|
document.getElementById('tab-its').classList.toggle('active',t==='its');
|
|
document.getElementById('pane-utic').classList.toggle('active',t==='utic');
|
|
document.getElementById('pane-its').classList.toggle('active',t==='its');
|
|
}
|
|
|
|
function setView(v){
|
|
currentView=v;
|
|
document.getElementById('btn-single').classList.toggle('active',v==='single');
|
|
document.getElementById('btn-grid').classList.toggle('active',v==='grid');
|
|
document.getElementById('video-wrap').style.display=v==='single'?'flex':'none';
|
|
document.getElementById('grid-wrap').style.display=v==='grid'?'grid':'none';
|
|
if(v==='grid') renderGrid();
|
|
}
|
|
|
|
// ── 지역 로드 ──
|
|
async function loadRegion(btn){
|
|
document.querySelectorAll('#region-bar .r-btn').forEach(b=>b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
lastRegionBtn=btn;
|
|
const minX=btn.getAttribute('data-minX'),maxX=btn.getAttribute('data-maxX');
|
|
const minY=btn.getAttribute('data-minY'),maxY=btn.getAttribute('data-maxY');
|
|
try{localStorage.setItem('traffic_region',JSON.stringify({minX,maxX,minY,maxY,label:btn.textContent.trim()}));}catch{}
|
|
|
|
const listWrap=document.getElementById('list-wrap');
|
|
listWrap.innerHTML='<div class="list-empty">⏳ 로딩 중...</div>';
|
|
destroyAllGrid();
|
|
|
|
try{
|
|
const r=await fetch(`/api/traffic/cctv?minX=${minX}&maxX=${maxX}&minY=${minY}&maxY=${maxY}&cctvType=1`,{headers:authH()});
|
|
const d=await r.json();
|
|
allItems=d.items||[];
|
|
document.getElementById('count-badge').textContent=allItems.length+'개';
|
|
renderList(allItems);
|
|
if(currentView==='grid')renderGrid();
|
|
}catch(e){
|
|
listWrap.innerHTML=`<div class="list-empty">오류: ${e.message}</div>`;
|
|
}
|
|
}
|
|
|
|
// ── 목록 렌더링 ──
|
|
function renderList(items){
|
|
const wrap=document.getElementById('list-wrap');
|
|
if(!items.length){wrap.innerHTML='<div class="list-empty">해당 지역에 CCTV 없음</div>';return;}
|
|
wrap.innerHTML=items.map(it=>{
|
|
const origIdx=allItems.indexOf(it);
|
|
return `<div class="cctv-item" id="item-${origIdx}" onclick="playCctv(${origIdx})">
|
|
<div class="ci-name">${escHtml(it.cctvname||'')}</div>
|
|
<div class="ci-road">📍 ${it.cctvformat||'HLS'} · ${it.coordy?.toFixed(4)}, ${it.coordx?.toFixed(4)}</div>
|
|
</div>`;
|
|
}).join('');
|
|
}
|
|
|
|
function filterList(){
|
|
const q=document.getElementById('search').value.toLowerCase();
|
|
const filtered=q?allItems.filter(it=>(it.cctvname||'').toLowerCase().includes(q)):allItems;
|
|
renderList(filtered);
|
|
}
|
|
|
|
function escHtml(s){return String(s||'').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');}
|
|
|
|
// ── 단일 재생 ──
|
|
function playCctv(idx){
|
|
document.querySelectorAll('.cctv-item').forEach(el=>el.classList.remove('active'));
|
|
const el=document.getElementById('item-'+idx);
|
|
if(el)el.classList.add('active');
|
|
|
|
const it=allItems[idx];
|
|
if(!it)return;
|
|
document.getElementById('viewer-title').textContent=it.cctvname||'CCTV';
|
|
document.getElementById('btn-reload').style.display='';
|
|
currentUrl=it.cctvurl;
|
|
playHls(currentUrl, document.getElementById('player'), document.getElementById('status-dot'));
|
|
}
|
|
|
|
function reloadCurrent(){if(currentUrl)playHls(currentUrl, document.getElementById('player'), document.getElementById('status-dot'));}
|
|
|
|
function proxyUrl(url){return '/api/traffic/hls-proxy?url='+encodeURIComponent(url);}
|
|
|
|
function playHls(url, videoEl, dotEl){
|
|
url=proxyUrl(url);
|
|
document.getElementById('placeholder').style.display='none';
|
|
videoEl.style.display='block';
|
|
document.getElementById('loading-overlay').classList.add('show');
|
|
if(dotEl)dotEl.className='status-dot';
|
|
|
|
if(currentHls){currentHls.destroy();currentHls=null;}
|
|
|
|
if(Hls.isSupported()){
|
|
const hls=new Hls({enableWorker:false});
|
|
currentHls=hls;
|
|
hls.loadSource(url);
|
|
hls.attachMedia(videoEl);
|
|
hls.on(Hls.Events.MANIFEST_PARSED,()=>{
|
|
videoEl.play().catch(()=>{});
|
|
document.getElementById('loading-overlay').classList.remove('show');
|
|
if(dotEl)dotEl.className='status-dot live';
|
|
});
|
|
hls.on(Hls.Events.ERROR,(_,data)=>{
|
|
if(data.fatal){
|
|
document.getElementById('loading-overlay').classList.remove('show');
|
|
if(dotEl)dotEl.className='status-dot';
|
|
}
|
|
});
|
|
} else if(videoEl.canPlayType('application/vnd.apple.mpegurl')){
|
|
videoEl.src=url;
|
|
videoEl.play().catch(()=>{});
|
|
document.getElementById('loading-overlay').classList.remove('show');
|
|
if(dotEl)dotEl.className='status-dot live';
|
|
}
|
|
}
|
|
|
|
// ── 그리드 뷰 (최대 9개) ──
|
|
function destroyAllGrid(){
|
|
gridHlsList.forEach(h=>h.destroy());
|
|
gridHlsList=[];
|
|
}
|
|
|
|
function renderGrid(){
|
|
destroyAllGrid();
|
|
const wrap=document.getElementById('grid-wrap');
|
|
const items=allItems.slice(0,9);
|
|
if(!items.length){wrap.innerHTML='<div style="color:var(--muted);font-size:12px;grid-column:1/-1;text-align:center;padding:20px">CCTV 없음</div>';return;}
|
|
wrap.innerHTML=items.map((it,i)=>`
|
|
<div class="grid-item" onclick="switchToSingle(${i})">
|
|
<video id="gvid-${i}" muted autoplay playsinline></video>
|
|
<div class="grid-label">${escHtml(it.cctvname||'')}</div>
|
|
</div>`).join('');
|
|
|
|
items.forEach((it,i)=>{
|
|
const v=document.getElementById('gvid-'+i);
|
|
if(!v||!it.cctvurl)return;
|
|
const purl=proxyUrl(it.cctvurl);
|
|
if(Hls.isSupported()){
|
|
const hls=new Hls({enableWorker:false,maxBufferLength:10});
|
|
gridHlsList.push(hls);
|
|
hls.loadSource(purl);
|
|
hls.attachMedia(v);
|
|
hls.on(Hls.Events.MANIFEST_PARSED,()=>v.play().catch(()=>{}));
|
|
} else if(v.canPlayType('application/vnd.apple.mpegurl')){
|
|
v.src=purl;
|
|
v.play().catch(()=>{});
|
|
}
|
|
});
|
|
}
|
|
|
|
function switchToSingle(idx){
|
|
setView('single');
|
|
playCctv(idx);
|
|
}
|
|
|
|
// ── Init ──
|
|
(async()=>{
|
|
// 저장된 지역 복원, 없으면 전국
|
|
let restored=false;
|
|
try{
|
|
const saved=JSON.parse(localStorage.getItem('traffic_region')||'null');
|
|
if(saved){
|
|
const btn=document.querySelector(
|
|
`.r-btn[data-minX="${saved.minX}"][data-maxX="${saved.maxX}"][data-minY="${saved.minY}"][data-maxY="${saved.maxY}"]`
|
|
);
|
|
if(btn){loadRegion(btn);restored=true;}
|
|
}
|
|
}catch{}
|
|
if(!restored){
|
|
const btn=document.querySelector('.r-btn[data-minX="124.0"]');
|
|
if(btn)loadRegion(btn);
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|