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) * ------------------------------------------------------------------------ */