From 702eb918eea0441fa3375147b16d9de623d1eeef Mon Sep 17 00:00:00 2001 From: gm Date: Wed, 3 Jun 2026 01:14:52 +0900 Subject: [PATCH] =?UTF-8?q?feat(ui):=20JSON=20=E2=86=92=20=EB=85=B8?= =?UTF-8?q?=EB=93=9C=20=EB=B6=88=EB=9F=AC=EC=98=A4=EA=B8=B0=20=ED=83=AD=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 불러오기 모달에 텍스트/JSON 탭 구분 추가. JSON 탭: ROOT→SECTION→LIST/VALUE 구조를 노드 트리로 복원. - SECTION: mark, content, header/footer/prefix/suffix, attributes 복원 - LIST: LIST_ITEM들을 names로 결합, category 복원 - SECTION 중첩: node-type value로 재귀 복원 - VALUE: data_type/value → scalar val 복원 - nextSep/childSep/nameNewline은 기본값으로 초기화 Co-Authored-By: Claude Sonnet 4.6 --- ui/builder.html | 103 ++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 92 insertions(+), 11 deletions(-) diff --git a/ui/builder.html b/ui/builder.html index 5d66cdd..10e6210 100644 --- a/ui/builder.html +++ b/ui/builder.html @@ -140,6 +140,12 @@ input,textarea,button,select{font-family:inherit} .preview-text.dim{color:var(--dt3);font-style:italic} .j-key{color:#89b4fa}.j-str{color:#a6e3a1}.j-num{color:#fab387}.j-bool{color:#f38ba8}.j-null{color:#f38ba8;font-style:italic} +/* ── 임포트 탭 ────────────────────────────── */ +.import-tabs{display:flex;gap:0;margin-bottom:12px;border-bottom:2px solid var(--border)} +.itab{font-size:12px;padding:6px 16px;border:none;background:transparent;color:var(--muted);cursor:pointer;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s} +.itab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:700} +.itab:hover:not(.active){color:var(--text)} + /* ── 모달 ─────────────────────────────────── */ .overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:200} .overlay.open{display:flex} @@ -206,21 +212,37 @@ input,textarea,button,select{font-family:inherit}
-

📥 텍스트 불러오기

-

기존 양식 텍스트를 붙여넣으면 편집기로 불러옵니다.

-
- - +

📥 불러오기

+
+ +
-
- - + + +
+

기존 양식 텍스트를 붙여넣으면 편집기로 불러옵니다.

+
+ + +
+
+ + +
+
+
-
- + + + +
- +
@@ -890,6 +912,16 @@ function copyOutput(){ // ════════════════════════════════════════════════════════ // 불러오기 // ════════════════════════════════════════════════════════ +let importTab='text'; + +function switchImportTab(tab){ + importTab=tab; + document.getElementById('import-text-body').style.display=tab==='text'?'':'none'; + document.getElementById('import-json-body').style.display=tab==='json'?'':'none'; + document.querySelectorAll('.itab').forEach(el=>el.classList.remove('active')); + document.getElementById('itab-'+tab).classList.add('active'); +} + function openImport(){ document.getElementById('importTitleMark').value=S.titleMark; const marks=[]; function col(nodes){ for(const n of nodes){ if(n.mark&&!marks.includes(n.mark)) marks.push(n.mark); for(const v of n.values) if(v.type==='node') col([v.node]); } } @@ -899,6 +931,55 @@ function openImport(){ } function closeImport(){ document.getElementById('importModal').classList.remove('open') } +function doImportActive(){ + if(importTab==='json') doImportJson(); else doImport(); +} + +// ── JSON 파서 ────────────────────────────────────────── +function doImportJson(){ + const raw=document.getElementById('importJsonTxt').value.trim(); + if(!raw) return; + let obj; + try{ obj=JSON.parse(raw); } + catch(e){ alert('JSON 파싱 오류:\n'+e.message); return; } + + if(obj.type!=='ROOT'){ alert('최상위 타입이 ROOT가 아닙니다.'); return; } + + S.titleMark = obj.attributes?.mark ?? '✅'; + S.title = obj.attributes?.title ?? ''; + S.nodes = (obj.children??[]).filter(c=>c.type==='SECTION').map(parseJsonSection); + + refresh(); closeImport(); + document.getElementById('importJsonTxt').value=''; +} + +function parseJsonSection(sec){ + const mark=sec.attributes?.mark??''; + const n=mkNode(mark, sec.content??''); + + if(sec.header) n.settings.header=sec.header; + if(sec.footer) n.settings.footer=sec.footer; + if(sec.prefix) n.settings.prefix=sec.prefix; + if(sec.suffix) n.settings.suffix=sec.suffix; + + const filtAttrs=Object.entries(sec.attributes??{}).filter(([k])=>k!=='mark'&&k!=='level'); + if(filtAttrs.length) n.settings.attributes=Object.fromEntries(filtAttrs); + + for(const child of sec.children??[]){ + if(child.type==='LIST'){ + const names=(child.children??[]).filter(c=>c.type==='LIST_ITEM').map(c=>c.content??'').join(' '); + n.values.push(mkListVal(names, child.attributes?.category??'')); + } else if(child.type==='SECTION'){ + n.values.push(mkNodeVal(parseJsonSection(child))); + } else if(child.type==='VALUE'){ + const sv=mkScalarVal(child.data_type??'string'); + sv.data=String(child.value??''); + n.values.push(sv); + } + } + return n; +} + function doImport(){ const raw=document.getElementById('importTxt').value.trim(); if(!raw) return; const titleMark=document.getElementById('importTitleMark').value||'✅';