fix(B06): 단 수 조작을 높이 행과 같은 형식으로 + 버튼 행열 정렬

- 추가 기슭막이(단): 직접 입력 제거 — 높이와 동일한 [- 값 +] 형식(0단 표기)
- 값 조작 버튼 26×22 고정 폭 — 높이·단 수·십자 이동의 열이 맞는다
- 값 표시 폭 3.5em 고정(높이 2.0m / 0단 동일 열)

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-22 14:46:50 +09:00
co-authored by Claude Opus 5
parent c4322f620c
commit 411d4351c2
2 changed files with 21 additions and 36 deletions
@@ -219,29 +219,21 @@ export function buildStructurePanel(deps: StructurePanelDeps): StructurePanelHan
});
structureParts.controls.append(select);
// 다단 기슭막이 단 수(2026-08-22 사용자) — 숫자 입력 + +/- 병행(스피너는 CSS 제거).
// 다단 기슭막이 단 수(2026-08-22 사용자) — 높이 행과 같은 형식(),
// 직접 입력 없음. 현재 단 수는 show()가 채운다.
const extraParts = makeRow(L("B06_Cross_Extra_Count"));
const extraRow = extraParts.row;
const countInput = document.createElement("input");
countInput.type = "number";
countInput.min = "0";
countInput.max = "9";
countInput.step = "1";
countInput.className = "b06-structure-panel__count";
const clampCount = (value: number): number =>
Math.max(0, Math.min(9, Math.round(Number.isFinite(value) ? value : 0)));
countInput.addEventListener("change", () => {
const requested = clampCount(Number(countInput.value));
countInput.value = String(requested);
deps.setExtraCount(requested);
});
const countValue = document.createElement("span");
countValue.className = "b06-structure-panel__hval";
let currentCount = 0;
const clampCount = (value: number): number => Math.max(0, Math.min(9, Math.round(value)));
const countMinus = makeButton("", L("B06_Cross_Extra_Remove"), () =>
deps.setExtraCount(clampCount(Number(countInput.value) - 1)),
deps.setExtraCount(clampCount(currentCount - 1)),
);
const countPlus = makeButton("", L("B06_Cross_Extra_Add"), () =>
deps.setExtraCount(clampCount(Number(countInput.value) + 1)),
deps.setExtraCount(clampCount(currentCount + 1)),
);
extraParts.controls.append(countMinus, countInput, countPlus);
extraParts.controls.append(countMinus, countValue, countPlus);
const closeButton = makeButton("✕", L("B06_Cross_Revet_Close"), () => deps.close());
closeButton.classList.add("b06-structure-panel__close");
@@ -293,7 +285,8 @@ export function buildStructurePanel(deps: StructurePanelDeps): StructurePanelHan
// 나타났다 사라지면 레이아웃이 널뛴다).
const extra = deps.extraState();
extraRow.classList.toggle("is-hidden", key !== "outlet");
countInput.value = String(extra.count);
currentCount = extra.count;
countValue.textContent = `${extra.count}`;
const adjust = deps.adjustFor(key);
// 조작 요약 — 0이면 "자동". 좌우는 안/바깥, 상하는 위/아래로 적는다.
const parts: string[] = [];
+10 -18
View File
@@ -637,28 +637,20 @@
display: none;
}
/* 숫자 입력의 브라우저 스피너 제거(2026-08-22 사용자 — / 버튼으로 조작). */
.b06-structure-panel__count::-webkit-inner-spin-button,
.b06-structure-panel__count::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.b06-structure-panel__count {
-moz-appearance: textfield;
appearance: textfield;
/* 값 조작 버튼은 정사각 고정 폭 — 높이·단 수·십자 이동의 행열이 맞는다
(2026-08-22 사용자 — 버튼 행열 정렬). */
.b06-structure-panel__controls .b06-structure-panel__btn {
box-sizing: border-box;
width: 26px;
height: 22px;
padding: 0;
text-align: center;
width: 2.5em;
padding: 0 4px;
border: 1px solid var(--color-border);
border-radius: var(--radius-inputs);
background: var(--color-surface);
color: var(--color-text-body);
font-size: var(--text-caption);
line-height: 1;
}
.b06-structure-panel__hval {
min-width: 3em;
box-sizing: border-box;
width: 3.5em;
text-align: center;
color: var(--color-text-body);
font-size: var(--text-caption);