Files
Aislo/M01_MasterData/M01_MasterData_UI_LogicLab_Pill.ts
T
eomsangdonandClaude Sonnet 5 cb1b82c1dc feat(M01): 로직 화면 — 자동값 채움 · 서버 조각 알약 · 재료 고르기 모달 · 돈 모양 한 벌 (PLAN 3-4 화면)
- 시험 계산: 로직을 열 때 GET /logic/auto 값을 빈 입력에 채우고 「견본」 딱지(사용자가
  고치면 빠짐) 뒤 바로 계산 · 텍스트 수식까지. 서버 길이 없으면 안 채움
- 단가산출 상세 수량 칸: 화면 쪽 식 풀이(qtyFragments) 걷고 /text 줄의 조각으로 그림 —
  알약 글 = 조각 글 · 깊이 있는 조각은 흐리게 · 묶음별 줄 수가 안 맞으면 식 글자 그대로
- 표 알약 모달: 참조.행·열에 색(행을 못 받으면 열만)
- 재료 고르기 줄(요소가 객체): 모달이 객체를 받게 — 잡힌 품목 단가 + 후보 목록
- 돈 모양 한 벌(Logic_Money.ts): 상세·모달·텍스트 수식 소계와 계·시험 계산 결과·조합
  미리 보기 정수 · 수량·비율은 그대로
- 서버 파일은 안 만짐

검증 — typecheck 통과 · GF000160 ORCA: 알약 7 서로 다름 · 계 141,882 · 재료 줄 모달
· GF000219·GF000001 회귀 없음.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EY2vdBQkHjdih9GgCsp9Fd
2026-09-24 09:10:58 +09:00

48 lines
1.8 KiB
TypeScript

/* =============================================================================
* M01_MasterData_UI_LogicLab_Pill.ts
* 알약 단추 — 수량 칸 안 조각(표 찾기 등)을 누르면 곧장 그 자료 모달을 엶.
* (이전에는 알약을 늘어놓고 아래 자리에서 펼쳤으나, 알약이 수량 칸 안으로 들어가며
* 「누르면 모달」 로 바뀜 — 모달 안에 알약 목록을 또 두지 않음.)
* ========================================================================== */
import { el } from "@ui/ui_template_elements";
export interface Pill {
/** 알약 글 — 보기 「표 QF000421」 */
label: string;
/** 누르면 할 일 — 그 자료 모달을 엶 */
onClick: () => void;
}
/** 알약 하나 — 글자 조각 사이에 끼워 쓰는 단추 */
export function pillButton(p: Pill): HTMLButtonElement {
const b = el("button", {
className: "m01lab__pill",
text: p.label,
attrs: { type: "button", "data-pill": p.label },
});
b.addEventListener("click", (ev) => {
ev.stopPropagation(); // 줄 전체 누르기(행 모달)와 안 겹치게
p.onClick();
});
return b;
}
/** 수량 칸 조각 — 알약 아니면 그냥 글자(연산기호·숫자·중간값 이름) · `dim` = 계산 안 된 갈래(흐리게) */
export type Fragment = { pill: Pill; dim?: boolean } | { text: string; dim?: boolean };
/** 조각을 이어 그림 — 칸 폭을 넘으면 자동으로 줄바꿈(`flex-wrap`) */
export function fragmentRow(fragments: Fragment[]): HTMLElement {
return el("span", {
className: "m01lab__qty-frags",
children: fragments.map((f) => {
const one =
"pill" in f
? pillButton(f.pill)
: el("span", { className: "m01lab__qty-text", text: f.text });
if (f.dim) one.classList.add("m01lab__qty-dim");
return one;
}),
});
}