feat(M01): 화면 부품 공용화 — 드롭다운·찾기 칸·단추·확인창을 공용 템플릿으로 · 재료 컨테이너 차례

- createSelectField 에 선택 인자 더함(compact · ariaLabel · setOptions) — 기본 동작 그대로
- 인력 2단 거름 · 로직 편집 고르기 · 계산 입력 · 요소 찾기 창 그룹 select 를 공용으로 · m01-side__select 걷음
- 찾기 칸은 createInputField · 표 칸·모달 단추는 createButton · 버리기 확인은 showConfirmDialog
- 재료 컨테이너 = 자재품목 · 유가 · 품셈재료 차례 · 안 쓰는 조달 문구 걷음

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016WRFJmmhPi4exAzHgPZHMT

M01_MasterData/M01_MasterData_UI_Pick.ts

@@ -3,7 +3,7 @@
  * 고르기 모달 — 가격 연결(자재품목) · 준용 직종을 이름·규격으로 찾아 고르면 ref 를 돌려줌
  * ========================================================================== */
 
-import { el, showToast } from "@ui/ui_template_elements";
+import { createButton, createInputField, el, showToast } from "@ui/ui_template_elements";
 import { t as L } from "@ui/ui_template_locale";
 import { fetchPick, type PickItem, type PickKind } from "./M01_MasterData_Api_Fetch";
 import { show } from "./M01_MasterData_UI_Cells";
@@ -28,21 +28,15 @@ export interface PickOptions {
   cond?: { 이름: string; 규격: string; onCond: (c: Cond) => void };
 }
 
-const button = (text: string): HTMLButtonElement =>
-  el("button", { className: "m01-master__row-btn", text, attrs: { type: "button" } });
+const button = (label: string): HTMLButtonElement => createButton({ label, variant: "ghost" });
 
-const input = (value: string, placeholder: string): HTMLInputElement => {
-  const box = el("input", {
-    className: "m01-master__search",
-    attrs: { type: "search", placeholder },
-  });
-  box.value = value;
-  return box;
-};
+const field = (value: string, placeholder: string): ReturnType<typeof createInputField> =>
+  createInputField({ type: "search", placeholder, value });
 
 export function openPickModal(opt: PickOptions): void {
   const close = (): void => back.remove();
-  const search = input(opt.seed, L("M01_ProcureSearch"));
+  const searchField = field(opt.seed, L("M01_ProcureSearch"));
+  const search = searchField.input;
   const list = el("div", { className: "m01-procure__list" });
   const cut = button(L("M01_ProcureCut"));
   cut.disabled = !opt.current;
@@ -56,8 +50,8 @@ export function openPickModal(opt: PickOptions): void {
   const condRow: HTMLElement[] = [];
   if (opt.cond) {
     const { onCond } = opt.cond;
-    const name = input(opt.cond.이름, L("M01_PriceCondName"));
-    const spec = input(opt.cond.규격, L("M01_PriceCondSpec"));
+    const name = field(opt.cond.이름, L("M01_PriceCondName")).input;
+    const spec = field(opt.cond.규격, L("M01_PriceCondSpec")).input;
     const go = button(L("M01_PriceCond"));
     go.addEventListener("click", () => {
       if (!name.value.trim()) return;
@@ -72,7 +66,7 @@ export function openPickModal(opt: PickOptions): void {
     children: [
       el("h3", { text: opt.title }),
       el("p", { className: "m01-master__muted", text: opt.current }),
-      search,
+      searchField.root,
       list,
       ...condRow,
       el("div", { className: "m01-procure__foot", children: [cut, shut] }),