@fuzionx/framework 0.1.28 → 0.1.29

package/cli/templates/app/tester/views/default/pages/i18n.html

@@ -0,0 +1,104 @@
+{% extends "layouts/main.html" %}
+
+{% block title %}i18n — {{ config.app.name | default(value='FuzionX') }}{% endblock %}
+
+{% block head %}
+<style>
+    .demo-card { background: var(--bs-tertiary-bg); }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="container py-3">
+    <div class="card mb-3">
+        <div class="card-header d-flex justify-content-between align-items-center">
+            <span><i class="bi bi-translate"></i> 언어 전환</span>
+            <div class="btn-group" id="localeSwitch">
+                <button class="btn btn-info btn-sm active" data-locale="ko" onclick="switchLocale('ko')">🇰🇷 한국어</button>
+                <button class="btn btn-outline-secondary btn-sm" data-locale="en" onclick="switchLocale('en')">🇺🇸 English</button>
+            </div>
+        </div>
+        <div class="card-body py-2">
+            <div class="row small">
+                <div class="col">현재: <span class="text-info fw-bold" id="currentLocale">ko</span></div>
+                <div class="col">사용 가능: <span id="availableLocales">—</span></div>
+                <div class="col">기본: <span id="defaultLocale">—</span> / 폴백: <span id="fallbackLocale">—</span></div>
+                <div class="col">소스: <span class="badge bg-info" id="i18nSource">—</span></div>
+            </div>
+        </div>
+    </div>
+    <div class="card mb-3">
+        <div class="card-header"><i class="bi bi-key"></i> 실시간 번역 테스트</div>
+        <div class="card-body">
+            <div class="row g-2 mb-2">
+                <div class="col-md-5"><input type="text" class="form-control form-control-sm" id="translateKey" value="common.greeting" placeholder="키"></div>
+                <div class="col-md-3"><input type="text" class="form-control form-control-sm" id="translateName" value="FuzionX" placeholder="변수 {name}"></div>
+                <div class="col-md-2"><button class="btn btn-info btn-sm w-100" onclick="doTranslate()"><i class="bi bi-search"></i> 번역</button></div>
+            </div>
+            <div class="d-flex gap-1 flex-wrap mb-2">
+                <button class="btn btn-outline-secondary btn-sm" onclick="qk('app.welcome')">app.welcome</button>
+                <button class="btn btn-outline-secondary btn-sm" onclick="qk('common.greeting')">common.greeting</button>
+                <button class="btn btn-outline-secondary btn-sm" onclick="qk('user.created')">user.created</button>
+                <button class="btn btn-outline-secondary btn-sm" onclick="qk('auth.login_required')">auth.login_required</button>
+                <button class="btn btn-outline-secondary btn-sm" onclick="qk('upload.drag_drop')">upload.drag_drop</button>
+                <button class="btn btn-outline-secondary btn-sm" onclick="qk('common.items_count')">common.items_count</button>
+                <button class="btn btn-outline-danger btn-sm" onclick="qk('nonexistent.key')">nonexistent ❌</button>
+            </div>
+            <pre class="bg-black text-success rounded p-2" id="translateResult">키를 입력하고 번역을 클릭하세요</pre>
+        </div>
+    </div>
+    <div class="row g-3">
+        <div class="col-lg-7">
+            <div class="card h-100">
+                <div class="card-header d-flex justify-content-between">
+                    <span><i class="bi bi-table"></i> 전체 키 비교 (ko vs en)</span>
+                    <button class="btn btn-outline-info btn-sm" onclick="loadComparison()"><i class="bi bi-arrow-clockwise"></i> 로드</button>
+                </div>
+                <div class="card-body p-0" style="max-height:400px;overflow-y:auto">
+                    <table class="table table-sm table-striped mb-0 small">
+                        <thead class="sticky-top"><tr><th>Key</th><th>🇰🇷</th><th>🇺🇸</th></tr></thead>
+                        <tbody id="comparisonBody"><tr><td colspan="3" class="text-muted">로드 버튼 클릭</td></tr></tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-5">
+            <div class="card h-100">
+                <div class="card-header"><i class="bi bi-brush"></i> UI 적용 데모</div>
+                <div class="card-body">
+                    <p class="text-muted small">언어를 전환하면 자동 변경됩니다</p>
+                    <div class="demo-card rounded p-3 mb-2">
+                        <h5 id="demo-welcome">—</h5>
+                        <p class="text-muted" id="demo-desc">—</p>
+                        <div class="btn-group"><button class="btn btn-info btn-sm" id="demo-save">—</button><button class="btn btn-outline-secondary btn-sm" id="demo-cancel">—</button></div>
+                        <p class="mt-2 mb-1" id="demo-greeting">—</p>
+                        <p class="mb-0 text-muted small" id="demo-items">—</p>
+                    </div>
+                    <h6 class="mt-3"><i class="bi bi-code-slash"></i> SSR 렌더링 (Bridge)</h6>
+                    <input type="text" class="form-control form-control-sm mb-2" id="ssrTemplate" value="&#123;&#123;title&#125;&#125; — &#123;&#123;desc&#125;&#125;">
+                    <div class="row g-2 mb-2">
+                        <div class="col"><input type="text" class="form-control form-control-sm" id="ssrTitle" value="FuzionX" placeholder="title"></div>
+                        <div class="col"><input type="text" class="form-control form-control-sm" id="ssrDesc" value="Framework" placeholder="desc"></div>
+                    </div>
+                    <button class="btn btn-info btn-sm" onclick="doSSR()"><i class="bi bi-play-fill"></i> 렌더링</button>
+                    <pre class="bg-black text-success rounded p-2 mt-2" id="ssrResult">—</pre>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+let currentLocale='ko',allMessages={ko:{},en:{}};
+async function init(){const r=await aspFetch('/api/lang/locales');const d=r instanceof Response?await r.json():r;document.getElementById('availableLocales').textContent=(d.locales||[]).join(', ')||'ko, en';document.getElementById('defaultLocale').textContent=d.default;document.getElementById('fallbackLocale').textContent=d.fallback;document.getElementById('i18nSource').textContent=d.source;for(const l of['ko','en']){const r2=await aspFetch(`/api/lang/all?locale=${l}`);const d2=r2 instanceof Response?await r2.json():r2;allMessages[l]=d2.messages}updateDemo()}
+function switchLocale(l){currentLocale=l;document.getElementById('currentLocale').textContent=l;document.querySelectorAll('#localeSwitch button').forEach(b=>{b.className=b.dataset.locale===l?'btn btn-info btn-sm active':'btn btn-outline-secondary btn-sm'});updateDemo()}
+function updateDemo(){const t=(k,v)=>{let val=allMessages[currentLocale]?.[k]||k;if(v)Object.entries(v).forEach(([a,b])=>{val=val.replace(`{${a}}`,b)});return val};document.getElementById('demo-welcome').textContent=t('app.welcome');document.getElementById('demo-desc').textContent=t('app.description');document.getElementById('demo-save').textContent=t('common.save');document.getElementById('demo-cancel').textContent=t('common.cancel');document.getElementById('demo-greeting').textContent=t('common.greeting',{name:'Admin'});document.getElementById('demo-items').textContent=t('common.items_count',{count:'42'})}
+async function doTranslate(){const key=document.getElementById('translateKey').value,name=document.getElementById('translateName').value;if(!key)return;const p=new URLSearchParams({locale:currentLocale,key});if(name)p.append('name',name);const r=await aspFetch(`/api/lang/translate?${p}`);const d=r instanceof Response?await r.json():r;const p2=new URLSearchParams({locale:currentLocale==='ko'?'en':'ko',key});if(name)p2.append('name',name);const r2=await aspFetch(`/api/lang/translate?${p2}`);const d2=r2 instanceof Response?await r2.json():r2;document.getElementById('translateResult').textContent=`${d.locale}: ${d.value}\n${d2.locale}: ${d2.value}\n\n${JSON.stringify({current:d,other:d2},null,2)}`}
+function qk(k){document.getElementById('translateKey').value=k;doTranslate()}
+async function loadComparison(){const body=document.getElementById('comparisonBody');const keys=new Set([...Object.keys(allMessages.ko||{}),...Object.keys(allMessages.en||{})]);body.innerHTML=[...keys].sort().map(k=>{const ko=allMessages.ko?.[k]||'<span class="text-danger">❌</span>';const en=allMessages.en?.[k]||'<span class="text-danger">❌</span>';return`<tr><td><code>${k}</code></td><td>${ko}</td><td>${en}</td></tr>`}).join('')}
+async function doSSR(){const template=document.getElementById('ssrTemplate').value,context={title:document.getElementById('ssrTitle').value,desc:document.getElementById('ssrDesc').value};const r=await aspFetch('/api/lang/render',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({template,context,locale:currentLocale})});const d=r instanceof Response?await r.json():r;document.getElementById('ssrResult').textContent=JSON.stringify(d,null,2)}
+init();
+</script>
+{% endblock %}

package/cli/templates/app/tester/views/default/pages/upload.html

@@ -0,0 +1,149 @@
+{% extends "layouts/main.html" %}
+
+{% block title %}Upload & Media — {{ config.app.name | default(value='FuzionX') }}{% endblock %}
+
+{% block head %}
+<style>
+    .drop-zone { border: 2px dashed #6c757d; border-radius: 8px; padding: 40px; text-align: center; cursor: pointer; transition: all 0.2s; }
+    .drop-zone:hover, .drop-zone.drag-over { border-color: #0dcaf0; background: rgba(13,202,240,0.05); }
+    .drop-zone input { display: none; }
+    .preview img { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; }
+    .sprite-preview { max-width: 100%; border-radius: 8px; margin-top: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="container py-3">
+    <div class="card mb-3">
+        <div class="card-header"><i class="bi bi-cloud-upload"></i> 파일 업로드</div>
+        <div class="card-body">
+            <div class="drop-zone" id="dropZone" onclick="document.getElementById('fileInput').click()">
+                <i class="bi bi-file-earmark-arrow-up" style="font-size:32px"></i>
+                <p class="mt-2 mb-1">파일을 드래그하거나 클릭</p>
+                <small class="text-muted">이미지/비디오 (최대 50MB)</small>
+                <input type="file" id="fileInput" accept="image/*,video/*" multiple>
+            </div>
+            <div class="d-flex gap-2 mt-2 flex-wrap" id="preview"></div>
+            <div class="btn-group mt-2">
+                <button class="btn btn-info btn-sm" onclick="uploadSingle()"><i class="bi bi-upload"></i> 단일 업로드</button>
+                <button class="btn btn-outline-info btn-sm" onclick="uploadMultiple()"><i class="bi bi-stack"></i> 다중 업로드</button>
+                <button class="btn btn-outline-secondary btn-sm" onclick="clearFiles()"><i class="bi bi-x-circle"></i> 초기화</button>
+            </div>
+            <pre class="bg-black text-success rounded p-2 mt-2" id="uploadResult">결과 대기</pre>
+        </div>
+    </div>
+    <div class="row g-3">
+        <div class="col-md-6">
+            <div class="card h-100">
+                <div class="card-header"><i class="bi bi-aspect-ratio"></i> 이미지 리사이즈</div>
+                <div class="card-body">
+                    <div class="row g-2 mb-2">
+                        <div class="col"><input type="number" class="form-control form-control-sm" id="resizeW" value="200" placeholder="Width"></div>
+                        <div class="col"><input type="number" class="form-control form-control-sm" id="resizeH" value="200" placeholder="Height"></div>
+                        <div class="col"><select class="form-select form-select-sm" id="resizeFmt"><option>webp</option><option>jpeg</option><option>png</option></select></div>
+                        <div class="col"><input type="number" class="form-control form-control-sm" id="resizeQ" value="80" placeholder="Quality"></div>
+                    </div>
+                    <div class="btn-group">
+                        <button class="btn btn-info btn-sm" onclick="doResize()"><i class="bi bi-arrows-angle-contract"></i> 리사이즈</button>
+                        <button class="btn btn-outline-info btn-sm" onclick="doResizeMultiple()">다중 (L/M/S)</button>
+                    </div>
+                    <pre class="bg-black text-success rounded p-2 mt-2" id="resizeResult">—</pre>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="card h-100">
+                <div class="card-header"><i class="bi bi-arrow-repeat"></i> 변환 & 정보</div>
+                <div class="card-body">
+                    <div class="btn-group mb-2">
+                        <button class="btn btn-info btn-sm" onclick="doToWebp()"><i class="bi bi-filetype-png"></i> WebP 변환</button>
+                        <button class="btn btn-outline-info btn-sm" onclick="doImageInfo()"><i class="bi bi-info-circle"></i> 이미지 정보</button>
+                        <button class="btn btn-outline-info btn-sm" onclick="doVideoThumb()"><i class="bi bi-film"></i> 비디오 썸네일</button>
+                    </div>
+                    <pre class="bg-black text-success rounded p-2 mt-2" id="convertResult">—</pre>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row g-3 mt-0">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-header"><i class="bi bi-camera-reels"></i> 비디오 미리보기 (다중 썸네일 + 스프라이트 시트)</div>
+                <div class="card-body">
+                    <div class="row g-2 mb-2">
+                        <div class="col-auto"><label class="form-label small mb-0">간격(초)</label><input type="number" class="form-control form-control-sm" id="pvInterval" value="5" style="width:80px"></div>
+                        <div class="col-auto"><label class="form-label small mb-0">폭(px)</label><input type="number" class="form-control form-control-sm" id="pvWidth" value="320" style="width:80px"></div>
+                        <div class="col-auto"><label class="form-label small mb-0">그리드 열</label><input type="number" class="form-control form-control-sm" id="pvCols" value="10" style="width:80px"></div>
+                        <div class="col-auto d-flex align-items-end">
+                            <button class="btn btn-info btn-sm" onclick="doVideoPreview()"><i class="bi bi-grid-3x3"></i> 미리보기 생성</button>
+                        </div>
+                    </div>
+                    <pre class="bg-black text-success rounded p-2" id="previewResult">비디오 파일을 선택 후 "미리보기 생성" 클릭</pre>
+                    <div id="spriteSheetContainer"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row g-3 mt-0">
+        <div class="col-md-6">
+            <div class="card h-100">
+                <div class="card-header"><i class="bi bi-shield-lock"></i> 암호화 / 복호화</div>
+                <div class="card-body">
+                    <input type="text" class="form-control form-control-sm mb-2" id="cryptoText" placeholder="암호화할 텍스트">
+                    <input type="text" class="form-control form-control-sm mb-2" id="cryptoKey" placeholder="키 (기본: test-secret-key-32bytes!)">
+                    <div class="btn-group"><button class="btn btn-info btn-sm" onclick="doEncrypt()"><i class="bi bi-lock"></i> 암호화</button><button class="btn btn-outline-info btn-sm" onclick="doDecrypt()"><i class="bi bi-unlock"></i> 복호화</button></div>
+                    <pre class="bg-black text-success rounded p-2 mt-2" id="cryptoResult">—</pre>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="card h-100">
+                <div class="card-header"><i class="bi bi-key"></i> 패스워드 해싱</div>
+                <div class="card-body">
+                    <input type="text" class="form-control form-control-sm mb-2" id="hashPassword" placeholder="패스워드 입력">
+                    <div class="btn-group"><button class="btn btn-info btn-sm" onclick="doHash('bcrypt')"><i class="bi bi-hash"></i> bcrypt</button><button class="btn btn-outline-info btn-sm" onclick="doHash('argon2')">argon2</button></div>
+                    <pre class="bg-black text-success rounded p-2 mt-2" id="hashResult">—</pre>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="card mt-3">
+        <div class="card-header d-flex justify-content-between align-items-center">
+            <span><i class="bi bi-folder2-open"></i> Storage 파일 목록</span>
+            <div class="d-flex gap-2">
+                <select class="form-select form-select-sm" style="width:auto" id="listDir"><option>uploads</option><option>resized</option><option>converted</option><option>thumbnails</option><option>previews</option></select>
+                <button class="btn btn-outline-info btn-sm" onclick="loadFileList()"><i class="bi bi-arrow-clockwise"></i></button>
+            </div>
+        </div>
+        <ul class="list-group list-group-flush" id="fileList"><li class="list-group-item small">조회 버튼 클릭</li></ul>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+let selectedFiles=[];
+const dz=document.getElementById('dropZone');
+dz.addEventListener('dragover',e=>{e.preventDefault();dz.classList.add('drag-over')});
+dz.addEventListener('dragleave',()=>dz.classList.remove('drag-over'));
+dz.addEventListener('drop',e=>{e.preventDefault();dz.classList.remove('drag-over');handleFiles(e.dataTransfer.files)});
+document.getElementById('fileInput').addEventListener('change',e=>handleFiles(e.target.files));
+function handleFiles(files){selectedFiles=Array.from(files);const p=document.getElementById('preview');p.innerHTML='';selectedFiles.forEach(f=>{const d=document.createElement('div');d.className='text-center';if(f.type.startsWith('image/')){const img=document.createElement('img');img.src=URL.createObjectURL(f);d.appendChild(img)}d.innerHTML+=`<div class="small text-muted">${f.name}<br>${(f.size/1024).toFixed(1)}KB</div>`;p.appendChild(d)})}
+function clearFiles(){selectedFiles=[];document.getElementById('preview').innerHTML='';document.getElementById('fileInput').value=''}
+function getFormData(){const fd=new FormData();selectedFiles.forEach(f=>fd.append('file',f));return fd}
+async function apiPost(url,fd,rid){const el=document.getElementById(rid);el.textContent='처리중...';try{const r=await aspFetch(url,{method:'POST',body:fd});if(r instanceof Response){const d=await r.json();el.textContent=`HTTP ${r.status}\n${JSON.stringify(d,null,2)}`}else{el.textContent=`HTTP 200\n${JSON.stringify(r,null,2)}`}}catch(e){el.textContent=e.message}}
+async function apiPostJson(url,body,rid){const el=document.getElementById(rid);el.textContent='처리중...';try{const r=await aspFetch(url,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});if(r instanceof Response){const d=await r.json();el.textContent=`HTTP ${r.status}\n${JSON.stringify(d,null,2)}`}else{el.textContent=`HTTP 200\n${JSON.stringify(r,null,2)}`}}catch(e){el.textContent=e.message}}
+function uploadSingle(){if(!selectedFiles.length)return alert('파일 선택');const fd=new FormData();fd.append('file',selectedFiles[0]);apiPost('/api/files/upload',fd,'uploadResult')}
+function uploadMultiple(){if(!selectedFiles.length)return alert('파일 선택');apiPost('/api/files/upload-multiple',getFormData(),'uploadResult')}
+function doResize(){if(!selectedFiles.length)return alert('이미지 선택');const fd=new FormData();fd.append('file',selectedFiles[0]);apiPost(`/api/media/resize?width=${document.getElementById('resizeW').value}&height=${document.getElementById('resizeH').value}&format=${document.getElementById('resizeFmt').value}&quality=${document.getElementById('resizeQ').value}`,fd,'resizeResult')}
+function doResizeMultiple(){if(!selectedFiles.length)return alert('이미지 선택');const fd=new FormData();fd.append('file',selectedFiles[0]);apiPost('/api/media/resize-multiple',fd,'resizeResult')}
+function doToWebp(){if(!selectedFiles.length)return alert('이미지 선택');const fd=new FormData();fd.append('file',selectedFiles[0]);apiPost('/api/media/to-webp',fd,'convertResult')}
+function doImageInfo(){if(!selectedFiles.length)return alert('이미지 선택');const fd=new FormData();fd.append('file',selectedFiles[0]);apiPost('/api/media/image-info',fd,'convertResult')}
+function doVideoThumb(){if(!selectedFiles.length)return alert('비디오 선택');const fd=new FormData();fd.append('file',selectedFiles[0]);apiPost('/api/media/video-thumbnail',fd,'convertResult')}
+async function doVideoPreview(){if(!selectedFiles.length)return alert('비디오 선택');const fd=new FormData();fd.append('file',selectedFiles[0]);const intv=document.getElementById('pvInterval').value;const w=document.getElementById('pvWidth').value;const cols=document.getElementById('pvCols').value;const el=document.getElementById('previewResult');const sc=document.getElementById('spriteSheetContainer');el.textContent='처리중... (대용량 비디오는 시간이 소요됩니다)';sc.innerHTML='';try{const r=await aspFetch(`/api/media/video-preview?interval=${intv}&width=${w}&cols=${cols}`,{method:'POST',body:fd});const d=r instanceof Response?await r.json():r;el.textContent=`HTTP 200\n${JSON.stringify(d,null,2)}`;if(d.spriteSheet&&d.spriteSheet.path){sc.innerHTML=`<img class="sprite-preview" src="/storage/previews/${d.spriteSheet.path.split('/previews/').pop()}" alt="Sprite Sheet" onerror="this.style.display='none'">`}}catch(e){el.textContent=e.message}}
+function doEncrypt(){const t=document.getElementById('cryptoText').value,k=document.getElementById('cryptoKey').value;if(!t)return alert('텍스트 입력');apiPostJson('/api/utils/encrypt',{text:t,key:k||undefined},'cryptoResult')}
+function doDecrypt(){try{const prev=JSON.parse(document.getElementById('cryptoResult').textContent.split('\n').slice(1).join('\n'));apiPostJson('/api/utils/decrypt',{encrypted:prev.encrypted,key:prev.key},'cryptoResult')}catch{alert('먼저 암호화 실행')}}
+function doHash(algo){const pw=document.getElementById('hashPassword').value;if(!pw)return alert('패스워드 입력');apiPostJson('/api/utils/hash',{password:pw,algorithm:algo},'hashResult')}
+async function loadFileList(){const dir=document.getElementById('listDir').value,el=document.getElementById('fileList');el.innerHTML='<li class="list-group-item small">로딩중...</li>';try{const r=await aspFetch(`/api/files/list?dir=${dir}`);const d=r instanceof Response?await r.json():r;el.innerHTML=d.files.length?d.files.map(f=>`<li class="list-group-item d-flex justify-content-between small"><span>${f.name}</span><span class="text-muted">${(f.size/1024).toFixed(1)}KB</span></li>`).join(''):'<li class="list-group-item small text-muted">파일 없음</li>'}catch(e){el.innerHTML=`<li class="list-group-item small text-danger">${e.message}</li>`}}
+</script>
+{% endblock %}

package/cli/templates/app/tester/views/default/pages/websocket.html

@@ -0,0 +1,239 @@
+{% extends "layouts/main.html" %}
+
+{% block title %}WebSocket — {{ config.app.name | default(value='FuzionX') }}{% endblock %}
+
+{% block head %}
+<style>
+    .ws-main { display: grid; grid-template-columns: 260px 1fr 180px; height: calc(100vh - 120px); overflow: hidden; }
+    .sidebar { overflow-y: auto; }
+    .chat-col { display: flex; flex-direction: column; overflow: hidden; }
+    .messages { flex: 1; overflow-y: auto; min-height: 0; }
+    .msg { max-width: 80%; }
+    .msg.sent { margin-left: auto; }
+    .msg.system { max-width: 100%; font-size: 12px; }
+    .quick-btn .btn { text-align: left; font-size: 12px; }
+    .badge-online { animation: pulse 2s infinite; }
+    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.6} }
+    .user-item { font-size: 12px; padding: 4px 8px; border-radius: 4px; }
+    .user-item.me { background: rgba(13,202,240,0.15); border: 1px solid rgba(13,202,240,0.3); }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="ws-main">
+    <!-- 좌측: 연결/Quick Send -->
+    <div class="sidebar bg-body-tertiary border-end p-3">
+        <h6 class="text-info"><i class="bi bi-wifi"></i> 연결 상태</h6>
+        <div class="alert alert-danger py-2 small" id="connStatus"><i class="bi bi-circle"></i> 연결 안됨</div>
+        <div class="mb-3">
+            <label class="form-label small">Namespace</label>
+            <select class="form-select form-select-sm" id="namespace">
+                <option value="/chat">/chat</option>
+                <option value="/">/</option>
+            </select>
+        </div>
+        <div class="d-flex gap-2 mb-3">
+            <button class="btn btn-info btn-sm flex-fill" onclick="connect()" id="btnConnect"><i class="bi bi-plug"></i> 연결</button>
+            <button class="btn btn-outline-danger btn-sm flex-fill" onclick="disconnect()" id="btnDisconnect" disabled><i class="bi bi-x-circle"></i> 끊기</button>
+        </div>
+
+        <h6 class="text-info mt-3"><i class="bi bi-send"></i> Quick Send</h6>
+        <div class="d-grid gap-1 quick-btn">
+            <button class="btn btn-outline-primary btn-sm" onclick="quickSend('message',{text:'Hello!'})"><i class="bi bi-chat-dots"></i> message (나 제외 전체)</button>
+            <button class="btn btn-outline-warning btn-sm" onclick="quickSend('broadcast',{text:'공지사항!'})"><i class="bi bi-megaphone"></i> broadcast (나 제외 전체)</button>
+            <button class="btn btn-outline-secondary btn-sm" onclick="quickSend('typing',{})"><i class="bi bi-keyboard"></i> typing (나 제외)</button>
+            <button class="btn btn-outline-info btn-sm" onclick="quickSend('userlist',{})"><i class="bi bi-people"></i> 접속자 목록 요청</button>
+        </div>
+
+        <h6 class="text-info mt-3"><i class="bi bi-journal-text"></i> 이벤트 로그</h6>
+        <pre class="bg-black text-success rounded p-2" style="max-height:180px;overflow-y:auto;font-size:11px" id="eventLog">Ready...</pre>
+    </div>
+
+    <!-- 중앙: 채팅 -->
+    <div class="chat-col">
+        <div class="messages p-3" id="messages"></div>
+        <div class="border-top p-2 d-flex gap-2">
+            <select class="form-select form-select-sm" style="width:130px" id="eventType">
+                <option value="message">message</option>
+                <option value="broadcast">broadcast</option>
+                <option value="typing">typing</option>
+            </select>
+            <input type="text" class="form-control form-control-sm" placeholder="메시지 입력..." id="msgInput" onkeydown="if(event.key==='Enter')sendMsg()">
+            <button class="btn btn-info btn-sm" onclick="sendMsg()"><i class="bi bi-send-fill"></i></button>
+        </div>
+    </div>
+
+    <!-- 우측: 접속자 목록 -->
+    <div class="bg-body-tertiary border-start p-3" style="overflow-y:auto">
+        <h6 class="text-info"><i class="bi bi-people-fill"></i> 접속자 <span class="badge bg-info text-dark" id="onlineCount">0</span></h6>
+        <div id="userList" class="d-grid gap-1"></div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+let ws = null;
+let mySessionId = null;
+const messagesEl = document.getElementById('messages');
+const eventLogEl = document.getElementById('eventLog');
+let logLines = [];
+
+function log(m) {
+    logLines.push(`[${new Date().toLocaleTimeString()}] ${m}`);
+    if (logLines.length > 100) logLines.shift();
+    eventLogEl.textContent = logLines.join('\n');
+    eventLogEl.scrollTop = eventLogEl.scrollHeight;
+}
+
+function addMsg(type, content, cls) {
+    const d = document.createElement('div');
+    d.className = `msg ${cls} mb-2 p-2 rounded border small`;
+    if (cls === 'sent') d.classList.add('bg-info-subtle', 'border-info');
+    else if (cls === 'received') d.classList.add('bg-body-tertiary');
+    else d.classList.add('bg-body-secondary', 'text-center', 'mx-auto');
+    const icons = { message:'bi-chat-dots', broadcast:'bi-megaphone', typing:'bi-keyboard', system:'bi-info-circle', userlist:'bi-people' };
+    const icon = icons[type] || 'bi-envelope';
+    const cs = typeof content === 'object' ? JSON.stringify(content, null, 2) : content;
+    d.innerHTML = `<div class="text-info fw-bold" style="font-size:10px"><i class="bi ${icon}"></i> ${type}</div><div>${cs}</div><div class="text-muted" style="font-size:10px">${new Date().toLocaleTimeString()}</div>`;
+    messagesEl.appendChild(d);
+    messagesEl.scrollTop = messagesEl.scrollHeight;
+}
+
+function updateUserList(data) {
+    document.getElementById('onlineCount').textContent = data.count || 0;
+    const ul = document.getElementById('userList');
+    ul.innerHTML = '';
+    (data.sessions || []).forEach(sid => {
+        const d = document.createElement('div');
+        d.className = 'user-item bg-body-secondary mb-1';
+        d.innerHTML = `<i class="bi bi-person-circle text-info"></i> ${sid}`;
+        ul.appendChild(d);
+    });
+}
+
+async function connect() {
+    const ns = document.getElementById('namespace').value;
+    const wsProto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const url = `${wsProto}//${location.host}/ws${ns}`;
+    log(`연결 시도: ${url}`);
+    addMsg('system', `연결 시도: ${url}`, 'system');
+
+    try {
+        if (window.aspEnabled) {
+            // WASM FuzionXSocket — ASP transport 암/복호화 자동 적용
+            await window._aspReady;
+            ws = new window.FuzionXSocket(url, '{{ config.bridge.asp.master_secret }}', true);
+
+            ws.on('connect', () => {
+                log('✅ 연결 (ASP 암호화)');
+                document.getElementById('connStatus').className = 'alert alert-success py-2 small';
+                document.getElementById('connStatus').innerHTML = `<i class="bi bi-circle-fill badge-online"></i> 연결됨 — ASP 🔐 (${ns})`;
+                document.getElementById('btnConnect').disabled = true;
+                document.getElementById('btnDisconnect').disabled = false;
+                addMsg('system', '연결 성공 (ASP 암호화)', 'system');
+            });
+
+            ws.on('welcome', (data) => {
+                log(`← welcome: ${JSON.stringify(data)}`);
+                addMsg('system', `입장: ${JSON.stringify(data)}`, 'system');
+                setTimeout(() => { if (ws && ws.is_connected()) ws.send('userlist', {}); }, 500);
+            });
+
+            ws.on('message', (data) => {
+                const str = typeof data === 'object' ? JSON.stringify(data) : data;
+                log(`← ${str.slice(0, 200)}`);
+                if (data?.type === 'userlist') { updateUserList(data.data || data); return; }
+                if (data?.type === 'typing') { log(`✏️ 타이핑 중...`); return; }
+                addMsg(data?.type || 'msg', data?.data || data, 'received');
+            });
+
+            ws.on('userlist', (data) => { updateUserList(data); });
+            ws.on('typing', () => { log('✏️ 타이핑 중...'); });
+            ws.on('broadcast', (data) => { addMsg('broadcast', data, 'received'); });
+
+            ws.on('disconnect', (info) => {
+                log(`🔌 종료: ${JSON.stringify(info)}`);
+                document.getElementById('connStatus').className = 'alert alert-danger py-2 small';
+                document.getElementById('connStatus').innerHTML = `<i class="bi bi-circle"></i> 연결 안됨`;
+                document.getElementById('btnConnect').disabled = false;
+                document.getElementById('btnDisconnect').disabled = true;
+                addMsg('system', `종료: ${JSON.stringify(info)}`, 'system');
+                updateUserList({ count: 0, sessions: [] });
+            });
+
+            ws.on('error', () => { log('❌ 에러'); addMsg('system', '에러', 'system'); });
+            ws.connect();
+        } else {
+            // Plain WebSocket (ASP 비활성)
+            ws = new WebSocket(url);
+            ws.onopen = () => {
+                log('✅ 연결');
+                document.getElementById('connStatus').className = 'alert alert-success py-2 small';
+                document.getElementById('connStatus').innerHTML = `<i class="bi bi-circle-fill badge-online"></i> 연결됨 (${ns})`;
+                document.getElementById('btnConnect').disabled = true;
+                document.getElementById('btnDisconnect').disabled = false;
+                addMsg('system', '연결 성공', 'system');
+                setTimeout(() => { if (ws && ws.readyState === 1) ws.send(JSON.stringify({type:'userlist',data:{}})); }, 500);
+            };
+            ws.onmessage = e => {
+                log(`← ${e.data.slice(0,200)}`);
+                let p; try { p = JSON.parse(e.data); } catch { p = e.data; }
+                if (p?.type === 'userlist') { updateUserList(p.data); return; }
+                if (p?.type === 'typing') { log(`✏️ 타이핑 중...`); return; }
+                addMsg(p?.type || 'msg', p?.data || p, 'received');
+            };
+            ws.onclose = e => {
+                log(`🔌 종료: ${e.code}`);
+                document.getElementById('connStatus').className = 'alert alert-danger py-2 small';
+                document.getElementById('connStatus').innerHTML = `<i class="bi bi-circle"></i> 연결 안됨`;
+                document.getElementById('btnConnect').disabled = false;
+                document.getElementById('btnDisconnect').disabled = true;
+                addMsg('system', `종료: ${e.code}`, 'system');
+                ws = null;
+                updateUserList({ count: 0, sessions: [] });
+            };
+            ws.onerror = () => { log('❌ 에러'); addMsg('system', '에러', 'system'); };
+        }
+    } catch (err) { log(`❌ ${err.message}`); }
+}
+
+function disconnect() {
+    if (!ws) return;
+    if (window.aspEnabled) { ws.disconnect(); }
+    else { ws.close(1000, 'User'); }
+}
+
+function sendMsg() {
+    if (!ws) return log('⚠️ 미연결');
+    if (window.aspEnabled && !ws.is_connected()) return log('⚠️ 미연결');
+    if (!window.aspEnabled && ws.readyState !== 1) return log('⚠️ 미연결');
+
+    const type = document.getElementById('eventType').value;
+    const text = document.getElementById('msgInput').value.trim();
+    if (!text && (type === 'message' || type === 'broadcast')) return;
+
+    if (window.aspEnabled) {
+        ws.send(type, { text });
+    } else {
+        ws.send(JSON.stringify({ type, data: { text } }));
+    }
+    log(`→ ${type}: ${text}`);
+    if (type !== 'typing') addMsg(type, { text }, 'sent');
+    document.getElementById('msgInput').value = '';
+}
+
+function quickSend(type, data) {
+    if (!ws) return log('⚠️ 미연결');
+    if (window.aspEnabled) {
+        if (!ws.is_connected()) return log('⚠️ 미연결');
+        ws.send(type, data);
+    } else {
+        if (ws.readyState !== 1) return log('⚠️ 미연결');
+        ws.send(JSON.stringify({ type, data }));
+    }
+    log(`→ ${JSON.stringify({ type, data })}`);
+    if (type !== 'typing' && type !== 'userlist') addMsg(type, data, 'sent');
+}
+</script>
+{% endblock %}

package/cli/templates/app/tester/views/default/partials/footer.html

@@ -0,0 +1,8 @@
+<footer class="bg-body-tertiary border-top py-2 mt-4">
+    <div class="container-fluid text-center small text-muted">
+        <i class="bi bi-lightning-charge-fill text-info"></i>
+        {{ config.app.name | default(value='FuzionX') }} —
+        Theme: {{ theme | default(value='default') }} ·
+        Locale: {{ locale | default(value='ko') }}
+    </div>
+</footer>

package/cli/templates/app/tester/views/default/partials/header.html

@@ -0,0 +1,20 @@
+<nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom">
+    <div class="container-fluid">
+        <a class="navbar-brand nav-brand" href="/"><i class="bi bi-lightning-charge-fill"></i> FuzionX</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="mainNav">
+            <ul class="navbar-nav">
+                <li class="nav-item"><a class="nav-link" href="/"><i class="bi bi-speedometer2"></i> Dashboard</a></li>
+                <li class="nav-item"><a class="nav-link" href="/test/websocket"><i class="bi bi-plug"></i> WebSocket</a></li>
+                <li class="nav-item"><a class="nav-link" href="/test/upload"><i class="bi bi-cloud-upload"></i> Upload</a></li>
+                <li class="nav-item"><a class="nav-link" href="/test/i18n"><i class="bi bi-translate"></i> i18n</a></li>
+                <li class="nav-item"><a class="nav-link" href="/docs"><i class="bi bi-file-earmark-code"></i> Swagger</a></li>
+            </ul>
+            <ul class="navbar-nav ms-auto">
+                <li class="nav-item"><span class="nav-link text-muted small"><i class="bi bi-gear"></i> {{ theme | default(value='default') }} · {{ locale | default(value='ko') }}</span></li>
+            </ul>
+        </div>
+    </div>
+</nav>