fix(B05): 라벨이 스텝 - 버튼을 집던 문제와 라벨 간격을 함께 정리한다

- <label>이 [-][입력][+] 묶음을 감싸면 암묵 대상이 **첫 버튼(-)**이 된다.
  입력에 id를 붙이고 label.htmlFor로 명시 연결해 라벨·입력 위 커서가 -를
  활성화하거나 라벨 클릭이 값을 줄이던 동작을 없앴다(2026-08-29 사용자 보고).
- 제목(라벨)과 항목 간격도 --b05-label-gap(2px) 한 변수로 묶고 라벨 글자를
  caption 크기로 맞췄다. 측점 행은 가로 배치라 열 간격 6px 유지.

검증: label.control=INPUT, 라벨 클릭 후 값 10 불변, 커서 올려도 - 배경 투명.
시설·이식·메모·구조물군 라벨 간격 모두 2px·라벨 높이 14px.
This commit is contained in:
2026-08-29 16:17:50 +09:00
parent 1516710afe
commit 5393ea4720
2 changed files with 34 additions and 0 deletions
@@ -60,6 +60,10 @@ export function labeled(text: string, input: HTMLElement): HTMLLabelElement {
const caption = document.createElement("span");
caption.textContent = text;
wrapper.append(caption, input);
// 묶음(스텝 등)을 담으면 라벨의 암묵 대상이 첫 버튼이 된다 — 안쪽 입력을 명시로
// 가리켜 라벨 hover·클릭이 버튼으로 새지 않게 한다(2026-08-29 사용자 보고).
const inner = input.querySelector?.("input, select, textarea") as HTMLElement | null;
if (inner?.id) wrapper.htmlFor = inner.id;
return wrapper;
}
@@ -77,9 +81,16 @@ export function numberInput(step: string, min = "0", placeholder = ""): HTMLInpu
* 고칠 수 있게 한다. 래퍼 여백은 0이라 기존 격자 레이아웃을 흔들지 않는다.
* 버튼은 값을 고친 뒤 input·change를 모두 울려 기존 리스너(연동·저장)가 그대로 탄다.
*/
/** 스텝 묶음 입력에 붙일 일련번호 — 라벨이 가리킬 대상을 명시하는 데 쓴다. */
let stepperSeq = 0;
export function stepper(input: HTMLInputElement, stepM: number): HTMLElement {
const wrap = document.createElement("div");
wrap.className = "b05-structure__stepper";
// 라벨이 이 입력을 가리키게 id를 붙인다. 없으면 <label>의 암묵 대상이 묶음의
// **첫 버튼(-)**이 되어, 라벨·입력 위에 커서만 올려도 - 버튼이 눌린 것처럼
// 보이고 라벨을 누르면 값이 줄어든다(2026-08-29 사용자 보고).
if (!input.id) input.id = `b05-step-${(stepperSeq += 1)}`;
const nudge = (delta: number) => (): void => {
const current = Number.parseFloat(input.value);
const min = Number.parseFloat(input.min);
@@ -366,3 +366,26 @@
.b05-structure__adjust-slot .b06-structure-panel__hval {
height: 100%;
}
/* 제목(라벨)과 항목 사이 간격도 한 변수로 묶는다(2026-08-29 사용자 지시) — 기준은
조정창에서 옮겨 온 행(2px·작은 글자). 측점 행은 가로 배치라 열 간격을 그대로 둔다. */
.b05-structure-section {
--b05-label-gap: 2px;
}
.b05-structure-section .b05-route__field {
gap: var(--b05-label-gap);
}
.b05-structure-section .b05-route__field > span {
font-size: var(--text-caption);
line-height: 1.2;
}
.b05-structure__adjust-slot .b06-structure-panel__struct {
gap: var(--b05-label-gap);
}
.b05-structure-section .b05-structure__position-row .b05-route__field {
gap: 6px;
}