From f81fb09e3bc49a0c94869c43dea9e0989514d496 Mon Sep 17 00:00:00 2001
From: gm <nitro820@gmail.com>
Date: Mon, 1 Jun 2026 23:43:21 +0900
Subject: [PATCH] feat(ui): add namesPerLine setting to builder
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ui/builder.html | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/ui/builder.html b/ui/builder.html
index f3671f3..48fadbe 100644
--- a/ui/builder.html
+++ b/ui/builder.html
@@ -266,6 +266,13 @@ input,textarea,button{font-family:inherit}
           <div class="marks-wrap" id="marksList"></div>
           <button class="btn-add-mark" onclick="addMark()">+ 레벨</button>
         </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>
 
       <!-- 문서 제목 -->
@@ -319,7 +326,7 @@ input,textarea,button{font-family:inherit}
 // 상태
 // ════════════════════════════════════════════════════════════
 let S = {
-  cfg: { titleMark:'✅', marks:['🔹','🔸'] },
+  cfg: { titleMark:'✅', marks:['🔹','🔸'], namesPerLine:0 },
   title: '예시 양식',
   sections: [
     { id:id(), lv:1, name:'1번 항목',
@@ -351,7 +358,8 @@ function load(){
 // 설정
 // ════════════════════════════════════════════════════════════
 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;
   renderMarks();
   renderSections();
@@ -513,6 +521,7 @@ function renderSections(){
   renderMarks();
   document.getElementById('titleMarkBadge').textContent = 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('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);
       if(!ns.length) continue;
       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('');
     }
     for(const c of sec.children) renderSec(c);