gm/CTStruct
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: add main tab navigation skeleton (Step 1)

Browse Source 
- Add top-level tab bar (양식 만들기 / 내용 채우기)
- Wrap existing builder in panel-builder tab panel
- Move action buttons (불러오기, 새 문서) into editor panel header
- Add placeholder panel-filler tab panel (Step 3 예정)
- Add switchTab() for tab switching
- Bump version badge to v0.5

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
이규민
2026-06-05 11:35:28 +09:00
parent 65e946b4e3
commit 45677d7b18
1 changed files with 46 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
ui/builder.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CTStruct 양식 빌더</title>
<title>CTStruct</title>
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
@@ -27,10 +27,21 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;backgrou
.hdr-btn{display:flex;align-items:center;gap:5px;font-size:12px;padding:5px 12px;border-radius:6px;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--muted);transition:all .15s;font-weight:500}
.hdr-btn:hover{background:var(--surface-alt);color:var(--text);border-color:var(--border-focus)}
/* ── 메인 탭 네비게이션 ───────────────────── */
.main-nav{background:var(--surface);border-bottom:2px solid var(--border);padding:0 20px;display:flex;gap:4px;flex-shrink:0}
.main-tab{font-size:13px;font-weight:600;padding:11px 18px;border:none;background:transparent;color:var(--muted);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-2px;transition:all .15s;display:flex;align-items:center;gap:6px;letter-spacing:.01em}
.main-tab:hover:not(.active){color:var(--text)}
.main-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
/* ── 탭 패널 ─────────────────────────────── */
.tab-panel{flex:1;display:flex;overflow:hidden}
.tab-panel.hidden{display:none!important}
/* ── 레이아웃 ─────────────────────────────── */
.app-body{display:flex;flex:1;overflow:hidden}
.builder-panel{width:460px;min-width:340px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.panel-lbl{padding:10px 16px 8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surface-alt)}
.panel-lbl{padding:8px 12px 7px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surface-alt);display:flex;align-items:center;gap:6px}
.panel-lbl-title{flex:1}
.builder-scroll{flex:1;overflow-y:auto;padding:12px}
.builder-scroll::-webkit-scrollbar{width:5px}
.builder-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
@@ -154,16 +165,23 @@ input,textarea,button,select{font-family:inherit}
<header class="app-header">
<span style="font-size:18px">🏗️</span>
<h1>CTStruct 양식 빌더</h1>
<span class="badge">v0.4</span>
<div class="hdr-spacer"></div>
<button class="hdr-btn" onclick="openImport()">📥 불러오기</button>
<button class="hdr-btn" onclick="newDoc()">🗒 새 문서</button>
<h1>CTStruct</h1>
<span class="badge">v0.5</span>
</header>
<nav class="main-nav">
<button class="main-tab active" id="mtab-builder" onclick="switchTab('builder')">✏️ 양식 만들기</button>
<button class="main-tab" id="mtab-filler" onclick="switchTab('filler')">📋 내용 채우기</button>
</nav>
<div id="panel-builder" class="tab-panel">
<div class="app-body">
<div class="builder-panel">
<div class="panel-lbl">✏️ 편집기</div>
<div class="panel-lbl">
<span class="panel-lbl-title">✏️ 편집기</span>
<button class="hdr-btn" onclick="openImport()">📥 불러오기</button>
<button class="hdr-btn" onclick="newDoc()">🗒 새 문서</button>
</div>
<div class="builder-scroll">
<div class="root-row">
<span class="root-lbl">문서</span>
@@ -192,6 +210,15 @@ input,textarea,button,select{font-family:inherit}
</div>
</div>
</div>
</div><!-- /panel-builder -->
<div id="panel-filler" class="tab-panel hidden">
<div style="flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:var(--muted)">
<span style="font-size:48px">📋</span>
<p style="font-size:15px;font-weight:600">내용 채우기</p>
<p style="font-size:12px">Step 3에서 구현 예정</p>
</div>
</div>
<div class="overlay" id="importModal">
<div class="modal">
@@ -868,6 +895,17 @@ function newDoc(){
S={titleMark:'✅',title:'',nodes:[]}; refresh();
}
// ════════════════════════════════════════════════════════
// 탭 전환
// ════════════════════════════════════════════════════════
const TAB_IDS = ['builder', 'filler'];
function switchTab(name){
TAB_IDS.forEach(id => {
document.getElementById('panel-'+id).classList.toggle('hidden', id !== name);
document.getElementById('mtab-'+id).classList.toggle('active', id === name);
});
}
// ════════════════════════════════════════════════════════
// 초기화
// ════════════════════════════════════════════════════════