From 96b74094118c5cbdfea6e86d714b52724aa79aea Mon Sep 17 00:00:00 2001 From: umsangdon Date: Mon, 28 Sep 2026 22:35:50 +0900 Subject: [PATCH] =?UTF-8?q?fix(ui):=20=EC=9E=85=EB=A0=A5=EC=B9=B8=20=C2=B7?= =?UTF-8?q?=20=EA=B3=A0=EB=A5=B4=EA=B8=B0=EC=B9=B8=20=EB=86=92=EC=9D=B4=20?= =?UTF-8?q?=ED=81=AC=EA=B8=B0=EB=A7=88=EB=8B=A4=20=ED=95=9C=20=EA=B0=92=20?= =?UTF-8?q?=E2=80=94=20=EA=B0=99=EC=9D=80=20=EC=A4=84=20=EC=9C=84=EC=95=84?= =?UTF-8?q?=EB=9E=98=20=EB=A7=9E=EC=B6=A4=20=C2=B7=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EA=B3=A0=EB=A5=B4=EA=B8=B0=20=EC=B0=BD=EC=9D=B4=20=EC=9E=90?= =?UTF-8?q?=EA=B8=B0=20=EB=AA=A8=EC=96=91=20=ED=8C=8C=EC=9D=BC=20=EC=A7=81?= =?UTF-8?q?=EC=A0=91=20=EB=B6=88=EB=9F=AC=EC=98=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 공용 높이 변수(보통 42 · 작은 30) · 입력칸 작은 크기(compact) 더함 - M01 조합 미리 보기 입력칸 작은 크기 · M01 로직 계산 칸 작은 높이 - 서식 창 글꼴 이름 칸 28 로(속성 없는 칸이 규칙에서 빠졌음) - M02 가 대신 불러오던 M01 로직 고르기 창 모양 걷어냄 Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01RoyUwuTFiDJfvCfHpvKKzp --- A00_Common/spreadsheet/spreadsheet_format_dialog.css | 1 + M01_MasterData/M01_MasterData_UI_Combo_Pick.ts | 1 + M01_MasterData/M01_MasterData_UI_Combo_Preview.ts | 2 +- M01_MasterData/M01_MasterData_UI_Logic_Style.css | 5 +++++ M02_MasterTemplete/M02_MasterTemplete_Combo.ts | 1 - ui_template/ui_template_elements.ts | 4 +++- ui_template/ui_template_elements_styles.ts | 4 ++++ ui_template/ui_template_theme.css | 4 ++++ 8 files changed, 19 insertions(+), 3 deletions(-) diff --git a/A00_Common/spreadsheet/spreadsheet_format_dialog.css b/A00_Common/spreadsheet/spreadsheet_format_dialog.css index 9d48ee59..c6773afb 100644 --- a/A00_Common/spreadsheet/spreadsheet_format_dialog.css +++ b/A00_Common/spreadsheet/spreadsheet_format_dialog.css @@ -72,6 +72,7 @@ .ss-fmtdlg__row select, .ss-fmtdlg__row input[type="text"], +.ss-fmtdlg__row input:not([type]), .ss-fmtdlg__row input[type="number"], .ss-fmtdlg__code { height: 28px; diff --git a/M01_MasterData/M01_MasterData_UI_Combo_Pick.ts b/M01_MasterData/M01_MasterData_UI_Combo_Pick.ts index a5e019bb..7567a4d7 100644 --- a/M01_MasterData/M01_MasterData_UI_Combo_Pick.ts +++ b/M01_MasterData/M01_MasterData_UI_Combo_Pick.ts @@ -18,6 +18,7 @@ import { type SubBrief, } from "./M01_MasterData_UI_Logic_Api"; import { tc } from "./M01_MasterData_UI_Combo_Text"; +import "./M01_MasterData_UI_Logic_Style.css"; // 창 겉틀 — M02 에서 열 때도 이 모듈이 불러옴 import "./M01_MasterData_UI_Combo.css"; const opts = (values: string[]): { value: string; text: string }[] => diff --git a/M01_MasterData/M01_MasterData_UI_Combo_Preview.ts b/M01_MasterData/M01_MasterData_UI_Combo_Preview.ts index 581db717..c5df4e17 100644 --- a/M01_MasterData/M01_MasterData_UI_Combo_Preview.ts +++ b/M01_MasterData/M01_MasterData_UI_Combo_Preview.ts @@ -37,7 +37,7 @@ function inputCell( const choices = input.고르기?.map((v) => ({ value: String(v), text: String(v) })); const field = choices ? createSelectField({ options: choices, value, compact: true, label: input.이름 }) - : createInputField({ type: "text", label: input.이름 }); + : createInputField({ type: "text", label: input.이름, compact: true }); const control = "select" in field ? field.select : field.input; control.value = value; control.setAttribute("data-input", `${key}|${input.이름}`); diff --git a/M01_MasterData/M01_MasterData_UI_Logic_Style.css b/M01_MasterData/M01_MasterData_UI_Logic_Style.css index ee37c395..b6cd54c8 100644 --- a/M01_MasterData/M01_MasterData_UI_Logic_Style.css +++ b/M01_MasterData/M01_MasterData_UI_Logic_Style.css @@ -121,6 +121,11 @@ font-size: var(--text-body-sm); } +/* 한 줄 칸은 작은 고르기칸과 같은 높이 */ +input.m01-logic__input { + height: var(--control-height-sm); +} + .m01-logic__note { min-height: 48px; resize: vertical; diff --git a/M02_MasterTemplete/M02_MasterTemplete_Combo.ts b/M02_MasterTemplete/M02_MasterTemplete_Combo.ts index 80dddf90..d40ac736 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_Combo.ts +++ b/M02_MasterTemplete/M02_MasterTemplete_Combo.ts @@ -18,7 +18,6 @@ import { fetchCombo, type ComboLine } from "../M01_MasterData/M01_MasterData_UI_ import { openLogicPicker } from "../M01_MasterData/M01_MasterData_UI_Combo_Pick"; import { branchCombo, type BranchedCombo } from "./M02_MasterTemplete_Api_Fetch"; import { readColumnBase, reasonOf } from "./M02_MasterTemplete_Combo_Api"; -import "../M01_MasterData/M01_MasterData_UI_Logic_Style.css"; // [로직 더하기] 창(M01 고르기) 겉틀 — M02 에서 열 때도 import "./M02_MasterTemplete_Combo.css"; const TEXT = { diff --git a/ui_template/ui_template_elements.ts b/ui_template/ui_template_elements.ts index 4bd498b4..017b17f1 100644 --- a/ui_template/ui_template_elements.ts +++ b/ui_template/ui_template_elements.ts @@ -72,6 +72,8 @@ export interface InputFieldOptions { min?: number; max?: number; onInput?: (value: string) => void; + /** 좁은 자리(표 칸·좌측 패널)용 작은 크기 — 작은 고르기칸(compact)과 높이가 같음 */ + compact?: boolean; } export interface InputFieldHandle { @@ -90,7 +92,7 @@ export function createInputField(opts: InputFieldOptions): InputFieldHandle { } const input = el("input", { - className: "ui-input", + className: opts.compact ? "ui-input ui-input--sm" : "ui-input", attrs: { type: opts.type ?? "text", ...(opts.placeholder ? { placeholder: opts.placeholder } : {}), diff --git a/ui_template/ui_template_elements_styles.ts b/ui_template/ui_template_elements_styles.ts index 5a1dd3d1..0eb57923 100644 --- a/ui_template/ui_template_elements_styles.ts +++ b/ui_template/ui_template_elements_styles.ts @@ -99,6 +99,10 @@ const BASE_CSS = ` transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .ui-input::placeholder { color: var(--color-text-muted); } +/* 입력칸 · 고르기칸 높이는 크기마다 한 값 — 같은 줄에 놓여도 위아래 · 글자 줄이 맞음(date 칸 포함) */ +.ui-input:not(textarea), .ui-select { height: var(--control-height); line-height: 20px; } +.ui-input--sm:not(textarea), .ui-select--sm { height: var(--control-height-sm); line-height: 20px; } +.ui-input--sm { padding: 4px 8px; } .ui-input:focus { outline: none; border-color: var(--color-focus-ring); diff --git a/ui_template/ui_template_theme.css b/ui_template/ui_template_theme.css index 6ff260f1..bda8dae0 100644 --- a/ui_template/ui_template_theme.css +++ b/ui_template/ui_template_theme.css @@ -154,6 +154,10 @@ --radius-icons: var(--radius-lg); --radius-large: var(--radius-3xl); + /* 입력칸 · 고르기칸 높이 — 크기마다 한 값(같은 줄이면 위아래가 맞음) */ + --control-height: 42px; + --control-height-sm: 30px; + /* --------------------------------------------------------------------------- * 6. 그림자 (Shadows) — 블루틴트, 서브틀 (최대 32px blur / 6% opacity) * ------------------------------------------------------------------------ */