feat(ui): add namesPerLine setting to builder

- 구분자 설정 카드에 '한 줄 N개' 입력란 추가
- 0 = 제한 없음 (기존 동작 유지)
- N > 0 이면 이름을 N개씩 줄 분할, 카테고리 prefix는 첫 줄에만
- localStorage 저장/복원 포함

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
gm
2026-06-01 23:43:21 +09:00
parent bbee99a225
commit f81fb09e3b

View File

@@ -266,6 +266,13 @@ input,textarea,button{font-family:inherit}
<div class="marks-wrap" id="marksList"></div> <div class="marks-wrap" id="marksList"></div>
<button class="btn-add-mark" onclick="addMark()">+ 레벨</button> <button class="btn-add-mark" onclick="addMark()">+ 레벨</button>
</div> </div>
<div class="config-row">
<span class="config-lbl">한 줄</span>
<input id="cfgNpl" type="number" min="0" step="1"
style="width:56px;text-align:center;font-size:13px;border:1px solid var(--border);border-radius:6px;padding:3px 6px;background:var(--surface)"
value="0" oninput="syncConfig()">
<span style="font-size:12px;color:var(--muted)">&nbsp;&nbsp;<span style="font-size:11px">(0 = 제한 없음)</span></span>
</div>
</div> </div>
<!-- 문서 제목 --> <!-- 문서 제목 -->
@@ -319,7 +326,7 @@ input,textarea,button{font-family:inherit}
// 상태 // 상태
// ════════════════════════════════════════════════════════════ // ════════════════════════════════════════════════════════════
let S = { let S = {
cfg: { titleMark:'✅', marks:['🔹','🔸'] }, cfg: { titleMark:'✅', marks:['🔹','🔸'], namesPerLine:0 },
title: '예시 양식', title: '예시 양식',
sections: [ sections: [
{ id:id(), lv:1, name:'1번 항목', { id:id(), lv:1, name:'1번 항목',
@@ -351,7 +358,8 @@ function load(){
// 설정 // 설정
// ════════════════════════════════════════════════════════════ // ════════════════════════════════════════════════════════════
function syncConfig(){ function syncConfig(){
S.cfg.titleMark = document.getElementById('cfgTitle').value || '✅'; S.cfg.titleMark = document.getElementById('cfgTitle').value || '✅';
S.cfg.namesPerLine = Math.max(0, parseInt(document.getElementById('cfgNpl').value)||0);
document.getElementById('titleMarkBadge').textContent = S.cfg.titleMark; document.getElementById('titleMarkBadge').textContent = S.cfg.titleMark;
renderMarks(); renderMarks();
renderSections(); renderSections();
@@ -513,6 +521,7 @@ function renderSections(){
renderMarks(); renderMarks();
document.getElementById('titleMarkBadge').textContent = S.cfg.titleMark; document.getElementById('titleMarkBadge').textContent = S.cfg.titleMark;
document.getElementById('cfgTitle').value = S.cfg.titleMark; document.getElementById('cfgTitle').value = S.cfg.titleMark;
document.getElementById('cfgNpl').value = S.cfg.namesPerLine ?? 0;
document.getElementById('docTitle').value = S.title; document.getElementById('docTitle').value = S.title;
document.getElementById('secList').innerHTML = S.sections.map((s,i)=>renderSec(s,i,S.sections.length)).join(''); document.getElementById('secList').innerHTML = S.sections.map((s,i)=>renderSec(s,i,S.sections.length)).join('');
} }
@@ -537,7 +546,13 @@ function toText(){
const ns=parseNames(g.names); const ns=parseNames(g.names);
if(!ns.length) continue; if(!ns.length) continue;
const pre=g.cat.trim()?`(${g.cat.trim()}) `:''; const pre=g.cat.trim()?`(${g.cat.trim()}) `:'';
lines.push(pre+ns.join(' ')); const npl=S.cfg.namesPerLine;
if(npl>0){
for(let i=0;i<ns.length;i+=npl)
lines.push((i===0?pre:'')+ns.slice(i,i+npl).join(' '));
} else {
lines.push(pre+ns.join(' '));
}
lines.push(''); lines.push('');
} }
for(const c of sec.children) renderSec(c); for(const c of sec.children) renderSec(c);