fix(B06): 가로 개수 저장값 없을 때 기본 3 · 칸 왼쪽 라벨(150-1)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JywHxQuWPk6UYXTebyrBoU

B06_Section/B06_Section_UI_Section_Columns.ts

@@ -12,8 +12,9 @@ export const CROSS_COLUMNS_DEFAULT = 3;
 /** 높이 비율의 기준 열 수. */
 export const CROSS_COLUMNS_BASE = 3;
 
-/** 저장값 → 열 수(정수 · 1~6 · 못 읽으면 기본 3). */
+/** 저장값 → 열 수(정수 · 1~6 · 못 읽으면 기본 3 · 저장값 없음 null 포함). */
 export function clampCrossColumns(value: unknown): number {
+  if (value == null) return CROSS_COLUMNS_DEFAULT;
   const number = typeof value === "string" && value.trim() === "" ? NaN : Number(value);
   if (!Number.isFinite(number)) return CROSS_COLUMNS_DEFAULT;
   return Math.min(CROSS_COLUMNS_MAX, Math.max(CROSS_COLUMNS_MIN, Math.round(number)));

B06_Section/B06_Section_UI_Section_View.ts

@@ -125,6 +125,7 @@ export function createSectionView(
   );
   // 열 수 칸(138-3) — 고정 알림 줄 오른쪽 끝 · 1~6 · 바꾸면 카드 전부 다시 그림
   const columnsField = createInputField({
+    label: L("B06_Cross_Columns"),
     type: "number",
     compact: true,
     min: CROSS_COLUMNS_MIN,
@@ -132,7 +133,6 @@ export function createSectionView(
     value: String(columnCount),
   });
   columnsField.root.classList.add("b06-section__columns");
-  columnsField.input.title = L("B06_Cross_Columns");
   columnsField.input.addEventListener("change", () => {
     const next = clampCrossColumns(columnsField.input.value);
     columnsField.input.value = String(next);

B06_Section/B06_Section_UI_Style_Cross.css

@@ -146,12 +146,28 @@
   margin-bottom: 0;
 }
 
-.b06-section__columns {
+/* 열 수 칸 — 라벨 왼쪽 · 한 줄(150-1) */
+.ui-field.b06-section__columns {
   flex: none;
-  width: 4.5em;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-8);
   margin-left: auto;
 }
 
+.b06-section__columns .ui-field__label {
+  margin: 0;
+  white-space: nowrap;
+}
+
+.b06-section__columns .ui-input {
+  width: 4.5em;
+}
+
+.b06-section__columns .ui-field__error {
+  display: none;
+}
+
 /* 펼친 목록이 길면 줄 안에서 스크롤 — 고정 줄이 카드 칸을 다 덮지 않게 */
 .b06-section__notice-list {
   max-height: 30vh;

resources/tester/helper_138_cross_columns.cjs

@@ -15,7 +15,7 @@ const c = box.exports;
 const baseWidth = c.crossCardWidth(1232, 3, 16);
 const base = [250, 300, 280, 260, 400];
 const out = {
-  clamp: [undefined, "", "abc", 0, 1, 2.6, 6, 9, "4"].map(c.clampCrossColumns),
+  clamp: [undefined, null, "", "abc", 0, 1, 2.6, 6, 9, "4"].map(c.clampCrossColumns),
   widths: [1, 2, 3, 6].map((n) => c.crossCardWidth(1232, n, 16)),
   baseWidth,
   rows3: c.crossRowHeights(base, baseWidth, baseWidth, 3),

resources/tester/test_138_cross_columns.py

@@ -27,7 +27,8 @@ def out():
 
 
 def test_열_수_1_6_기본_3(out):
-    assert out["clamp"] == [3, 3, 3, 1, 1, 3, 6, 6, 4]
+    # null = 저장값 없음(readStateRaw) → 기본 3(150-1)
+    assert out["clamp"] == [3, 3, 3, 3, 1, 1, 3, 6, 6, 4]
 
 
 def test_카드_폭은_칸_폭_나누기_열_수(out):

ui_template/ui_template_locale_b2.ts

@@ -473,7 +473,7 @@ export const ui_locales_b2 = {
     "Available only when a ditch is created.",
   ],
   B06_Notice_PaveSuggested: ["포장 권장", "Pavement recommended"],
-  B06_Cross_Columns: ["한 줄 카드 수(1~6)", "Cards per row (1-6)"],
+  B06_Cross_Columns: ["가로 개수", "Per row"],
   B06_Design_Detail: ["상세", "Detail"],
   B06_Design_Paved_Suggested: [
     "종단경사 법정 상한 초과 — 포장 권장 (임도설치 및 관리 등에 관한 규정 별표 1-2)",