-
-
📋
-
내용 채우기
-
Step 3에서 구현 예정
+
+
+ 📋
+ 템플릿 없음
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
📂 템플릿 JSON 불러오기
+
Builder의 JSON slim 또는 JSON full 출력을 붙여넣으세요.
+
+
+
+
+
@@ -1046,6 +1109,167 @@ function newDoc(){
S={titleMark:'✅',title:'',nodes:[]}; refresh();
}
+// ════════════════════════════════════════════════════════
+// Tab 2: 내용 채우기
+// ════════════════════════════════════════════════════════
+let FT = null; // filler template (parsed JSON root)
+let FV = {}; // filler values: nodeId → string
+let fillerTab = 'text';
+
+function openFillerImport(){ document.getElementById('fillerImportModal').classList.add('open') }
+function closeFillerImport(){ document.getElementById('fillerImportModal').classList.remove('open') }
+
+function doLoadFillerTemplate(){
+ const raw=document.getElementById('fillerImportTxt').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; }
+ FT=obj; FV={};
+ initFillerValues(FT);
+ closeFillerImport();
+ document.getElementById('fillerImportTxt').value='';
+ renderFiller();
+}
+
+function initFillerValues(node){
+ for(const child of node.children??[]){
+ if(child.type==='VALUE'){
+ if(!child.id) child.id='fv_'+Math.random().toString(36).slice(2);
+ FV[child.id]=String(child.value??'');
+ } else if(child.type==='SECTION'){
+ if(!child.id) child.id='fs_'+Math.random().toString(36).slice(2);
+ initFillerValues(child);
+ }
+ }
+}
+
+function clearFiller(){
+ if(!confirm('템플릿을 지우고 처음부터 시작할까요?')) return;
+ FT=null; FV={};
+ renderFiller();
+}
+
+function renderFiller(){
+ const form=document.getElementById('fillerForm');
+ const titleEl=document.getElementById('fillerTitle');
+ const outEl=document.getElementById('fillerOut');
+ if(!FT){
+ titleEl.textContent='템플릿 없음';
+ form.innerHTML=`
+
📋
+
템플릿이 없습니다
+
위의 📂 JSON 불러오기 버튼으로
Builder에서 만든 양식 JSON을 가져오세요
+
`;
+ outEl.className='preview-text dim'; outEl.textContent='내용을 채우면 미리보기가 표시됩니다';
+ return;
+ }
+ const title=FT.attributes?.title??'(제목 없음)';
+ const mark=FT.attributes?.mark??'';
+ titleEl.textContent=(mark?mark+' ':'')+title;
+ let html='';
+ for(const child of FT.children??[]) if(child.type==='SECTION') html+=renderFillerSection(child);
+ form.innerHTML=html||'
';
+ updateFillerPreview();
+}
+
+function renderFillerSection(sec){
+ const mark=sec.attributes?.mark??'';
+ const name=sec.content??'';
+ let body='';
+ for(const child of sec.children??[]){
+ if(child.type==='VALUE'){
+ const type=child.data_type??'string';
+ const id=child.id;
+ const val=FV[id]??'';
+ body+=`
+ ${esc(type)}
+ ${type==='string'
+ ?``
+ :``}
+
`;
+ } else if(child.type==='SECTION'){
+ body+=renderFillerSection(child);
+ }
+ }
+ return `
+
+ ${esc(mark||'·')}
+ ${esc(name||'이름 없음')}
+
+ ${body?`
${body}
`:''}
+
`;
+}
+
+function updateFillerPreview(){
+ const el=document.getElementById('fillerOut'); if(!FT) return;
+ if(fillerTab==='text'){
+ const t=fillerToText();
+ el.className=t.trim()?'preview-text':'preview-text dim';
+ el.textContent=t.trim()||'내용을 채우면 미리보기가 표시됩니다';
+ } else {
+ el.className='preview-text';
+ el.innerHTML=highlight(fillerToJSON());
+ }
+}
+
+function setFillerTab(t){
+ fillerTab=t;
+ document.querySelectorAll('.ftab').forEach(el=>el.classList.remove('active'));
+ document.getElementById('ftab-'+t).classList.add('active');
+ updateFillerPreview();
+}
+
+function copyFillerOutput(){
+ const txt=fillerTab==='text'?fillerToText():fillerToJSON();
+ navigator.clipboard.writeText(txt).then(()=>{
+ const btn=document.getElementById('fCopyBtn');
+ btn.textContent='✅ 복사됨'; btn.classList.add('ok');
+ setTimeout(()=>{ btn.innerHTML='📋 복사'; btn.classList.remove('ok'); },2000);
+ });
+}
+
+function fillerToText(){
+ if(!FT) return '';
+ function rSec(sec){
+ const mark=sec.attributes?.mark??'';
+ const content=sec.content??'';
+ const prefix=sec.prefix??'';
+ const suffix=sec.suffix??'';
+ const nl=sec.nameNewline!==false?'\n':'';
+ let t=prefix+mark+content;
+ let first=true;
+ for(const child of sec.children??[]){
+ if(child.type==='SECTION'){
+ t+=rSec(child); first=false;
+ } else if(child.type==='VALUE'){
+ const val=FV[child.id]??'';
+ if(val.trim()){ t+=(first?nl:'\n')+val; first=false; }
+ }
+ }
+ t+=suffix;
+ return t;
+ }
+ const title=FT.attributes?.title??'';
+ const titleMark=FT.attributes?.mark??'';
+ let out=title?`${titleMark}${title}\n`:'';
+ for(const child of FT.children??[]) if(child.type==='SECTION') out+=rSec(child);
+ return out.replace(/\n{3,}/g,'\n\n').trimEnd()+'\n';
+}
+
+function fillerToJSON(){
+ if(!FT) return '{}';
+ function fill(node){
+ const r={...node};
+ r.children=(node.children??[]).map(child=>{
+ if(child.type==='VALUE') return {...child, value:FV[child.id]??child.value??null};
+ if(child.type==='SECTION') return fill(child);
+ return child;
+ });
+ return r;
+ }
+ return JSON.stringify(fill(FT),null,2);
+}
+
// ════════════════════════════════════════════════════════
// 탭 전환
// ════════════════════════════════════════════════════════
@@ -1063,7 +1287,8 @@ function switchTab(name){
load();
refresh();
document.getElementById('importModal').addEventListener('click',e=>{ if(e.target===e.currentTarget) closeImport(); });
-document.addEventListener('keydown',e=>{ if(e.key==='Escape') closeImport(); });
+document.getElementById('fillerImportModal').addEventListener('click',e=>{ if(e.target===e.currentTarget) closeFillerImport(); });
+document.addEventListener('keydown',e=>{ if(e.key==='Escape'){ closeImport(); closeFillerImport(); } });