eomsangdon/Aislo
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev' into sub_laptop_8

Browse Source
This commit is contained in:
eomsangdon
2026-10-26 22:01:00 +09:00
parent 2033125fec b114616505
commit 64fd45b8d4
77 changed files with 1653 additions and 1843 deletions
Download Patch File Download Diff File Expand all files Collapse all files
A00_Common/b_page_tabs.ts
+46
View File
@@ -0,0 +1,46 @@
/* =============================================================================
* b_page_tabs.ts
* 페이지 탭 줄 — 부품 「탭」(`ui_template_tabs`)을 이미 있는 줄 요소 안에 채움(553-3 · B08 · B09 · ☰ [설정]).
*
* 쓰기 = `fillTabs(줄, { tabs, value, onChange, kind: "pill", data: "b08Tab" })` — 칸마다 `data-<data>` = 탭 열쇠
* 줄 요소는 페이지가 정함(클래스 · 자리) · 칸 모양 · 크기 · 고름 표시는 부품 몫 · 누른 칸이 지금 칸이면 안 부름
* 탭 이름이 바뀌면 다시 부르면 됨(줄을 통째로 다시 채움)
* ========================================================================== */
import type { UiSize } from "@ui/ui_template_button";
import { createTabs, type TabItem } from "@ui/ui_template_tabs";
export interface PageTabsOptions {
tabs: TabItem[];
value: string;
onChange: (key: string) => void;
/** line = 위 탭(밑줄) · pill = 보조 탭(작은 알약) */
kind?: "line" | "pill";
size?: UiSize;
/** 칸에 붙일 data 이름(camelCase · 예: b08Tab → data-b08-tab) */
data: string;
/** 칸 풍선 */
title?: (key: string) => string | undefined;
}
export function fillTabs(host: HTMLElement, opts: PageTabsOptions): HTMLElement[] {
const tabs = createTabs({
tabs: opts.tabs,
value: opts.value,
kind: opts.kind,
size: opts.size,
onChange: (key) => key !== opts.value && opts.onChange(key),
});
const buttons = [...tabs.root.querySelectorAll<HTMLElement>("[data-tab]")];
for (const button of buttons) {
const key = button.dataset.tab ?? "";
button.dataset[opts.data] = key;
const title = opts.title?.(key);
if (title) button.title = title;
}
host.classList.add(...tabs.root.classList);
host.dataset.size = tabs.root.dataset.size ?? "";
host.setAttribute("role", "tablist");
host.replaceChildren(...tabs.root.childNodes);
return buttons;
}
A01_Home/A01_Home_UI_Page.ts
+30 -70
View File
@@ -5,12 +5,15 @@
* 제약 준수:
* - 모든 문구는 ui_template_locale.ts 참조 (하드코딩 금지).
* - 색상/간격은 A01_Home_UI_Style.css + theme.css 변수만 사용.
* - 공통 컴포넌트(createButton/createCard/createTag) 우선 사용.
* - 공통 부품(createPublicFrame/createCard/createBadge/createButton) 우선 사용.
* - 이벤트 핸들러는 on[페이지]_[기능]_[액션] 명명.
* ========================================================================== */
import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
import { createButton, createCard, createTag } from "@ui/ui_template_elements";
import { createBadge } from "@ui/ui_template_badge";
import { createButton, createCard } from "@ui/ui_template_elements";
import { createPublicFrame } from "@ui/ui_template_public_layout";
import { createText } from "@ui/ui_template_text";
import { navigateTo } from "../A00_Common/router";
import { ROUTES } from "@config/config_frontend";
import "./A01_Home_UI_Style.css";
@@ -49,57 +52,12 @@ function onA01_Home_Explore_Click(): void {
/* -----------------------------------------------------------------------------
* 섹션 빌더
* -------------------------------------------------------------------------- */
function buildHero(): HTMLElement {
const hero = document.createElement("section");
hero.className = "a01-hero";
const inner = document.createElement("div");
inner.className = "a01-hero__inner";
const title = document.createElement("h1");
title.className = "a01-hero__title";
title.textContent = L("A01_Home_Title");
const subtitle = document.createElement("p");
subtitle.className = "a01-hero__subtitle";
subtitle.textContent = L("A01_Home_Hero_Subtitle");
const ctas = document.createElement("div");
ctas.className = "a01-hero__ctas";
ctas.append(
createButton({
label: L("A01_Home_Hero_CtaPrimary"),
variant: "filled",
onClick: onA01_Home_GetStarted_Click,
}),
createButton({
label: L("A01_Home_Hero_CtaSecondary"),
variant: "ghost",
onClick: onA01_Home_Explore_Click,
}),
);
inner.append(title, subtitle, ctas);
hero.append(inner);
return hero;
}
function buildNews(): HTMLElement {
const section = document.createElement("section");
section.className = "a01-section";
const heading = document.createElement("h2");
heading.className = "a01-section__title";
heading.textContent = L("A01_Home_News_SectionTitle");
const list = document.createElement("div");
list.className = "a01-news-list";
for (const item of MOCK_NEWS) {
const row = document.createElement("div");
row.className = "a01-news-row";
const tag = createTag(L("A01_Home_News_Tag"), "accent");
const tag = createBadge(L("A01_Home_News_Tag"), "accent");
const titleEl = document.createElement("span");
titleEl.className = "a01-news-row__title";
titleEl.textContent = item.title;
@@ -107,22 +65,14 @@ function buildNews(): HTMLElement {
dateEl.className = "a01-news-row__date";
dateEl.textContent = item.date;
row.append(tag, titleEl, dateEl);
const row = createCard({ body: [tag, titleEl, dateEl] });
row.classList.add("a01-news-row");
list.append(row);
}
section.append(heading, list);
return section;
return list;
}
function buildFeatures(): HTMLElement {
const section = document.createElement("section");
section.className = "a01-section";
const heading = document.createElement("h2");
heading.className = "a01-section__title";
heading.textContent = L("A01_Home_Features_SectionTitle");
const grid = document.createElement("div");
grid.className = "a01-feature-grid";
@@ -133,24 +83,34 @@ function buildFeatures(): HTMLElement {
];
for (const [titleKey, descKey] of features) {
const desc = document.createElement("p");
desc.className = "a01-feature__desc";
desc.textContent = L(descKey);
const card = createCard({ title: L(titleKey), body: [desc] });
const card = createCard({ title: L(titleKey), body: [createText(L(descKey), "muted", 14)] });
card.classList.add("a01-feature-card");
grid.append(card);
}
section.append(heading, grid);
return section;
return grid;
}
/* -----------------------------------------------------------------------------
* 페이지 진입점
* -------------------------------------------------------------------------- */
export function renderA01Home(root: HTMLElement): void {
const page = document.createElement("div");
page.className = "a01-home";
page.append(buildHero(), buildNews(), buildFeatures());
root.append(page);
const frame = createPublicFrame({
title: L("A01_Home_Title"),
lead: L("A01_Home_Hero_Subtitle"),
actions: [
createButton({
label: L("A01_Home_Hero_CtaPrimary"),
variant: "filled",
onClick: onA01_Home_GetStarted_Click,
}),
createButton({
label: L("A01_Home_Hero_CtaSecondary"),
variant: "ghost",
onClick: onA01_Home_Explore_Click,
}),
],
});
frame.addSection(L("A01_Home_News_SectionTitle")).append(buildNews());
frame.addSection(L("A01_Home_Features_SectionTitle")).append(buildFeatures());
root.append(frame.root);
}
A01_Home/A01_Home_UI_Style.css
+7 -75
View File
@@ -1,66 +1,8 @@
/* =============================================================================
* A01_Home_UI_Style.css
* 홈 페이지 고유 스타일 — theme.css 변수만 참조 (하드코딩 금지).
* 홈 페이지 고유 배치 — 머리 · 구역 · 카드 겉은 공용 부품(공개 화면 틀 · 카드)이 냄.
* ========================================================================== */
.a01-home {
display: flex;
flex-direction: column;
gap: var(--section-gap);
padding-bottom: var(--spacing-64);
}
/* --- Hero --- */
.a01-hero {
/* 라벤더 그라디언트는 흰 표면 아래에만: 히어로 배경으로 사용 */
background: linear-gradient(to bottom, var(--color-mist-violet), var(--color-canvas));
padding: var(--spacing-96) var(--spacing-32);
}
.a01-hero__inner {
max-width: var(--page-max-width);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--spacing-24);
}
.a01-hero__title {
font-size: var(--text-heading-lg);
line-height: var(--leading-heading-lg);
color: var(--color-deep-iris);
max-width: 14ch;
}
.a01-hero__subtitle {
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--color-slate);
max-width: 52ch;
margin: 0;
}
.a01-hero__ctas {
display: flex;
gap: var(--spacing-16);
margin-top: var(--spacing-8);
}
/* --- 공통 섹션 --- */
.a01-section {
max-width: var(--page-max-width);
margin: 0 auto;
width: 100%;
padding: 0 var(--spacing-32);
display: flex;
flex-direction: column;
gap: var(--spacing-24);
}
.a01-section__title {
font-size: var(--text-heading-sm);
line-height: var(--leading-heading-sm);
color: var(--color-deep-iris);
text-align: center;
}
/* --- News --- */
.a01-news-list {
display: flex;
@@ -68,21 +10,20 @@
gap: var(--spacing-8);
}
.a01-news-row {
display: flex;
padding: var(--spacing-16) var(--spacing-24);
}
.a01-news-row > .ui-card__body {
flex-direction: row;
align-items: center;
gap: var(--spacing-16);
padding: var(--spacing-16) var(--spacing-24);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-cards);
}
.a01-news-row__title {
flex: 1;
color: var(--color-charcoal);
color: var(--color-text);
font-size: var(--text-body-sm);
}
.a01-news-row__date {
color: var(--color-ash);
color: var(--color-text-muted);
font-size: var(--text-caption);
}
@@ -95,18 +36,9 @@
.a01-feature-card {
min-height: 140px;
}
.a01-feature__desc {
margin: 0;
color: var(--color-slate);
font-size: var(--text-body-sm);
line-height: var(--leading-body-sm);
}
@media (max-width: 900px) {
.a01-feature-grid {
grid-template-columns: 1fr;
}
.a01-hero__title {
font-size: var(--text-heading);
}
}
A02_ProgDetail/A02_ProgDetail_UI_Page.ts
+25 -64
View File
@@ -5,12 +5,14 @@
* 제약 준수:
* - 모든 문구는 ui_template_locale.ts 참조 (하드코딩 금지).
* - 색상/간격은 A02_ProgDetail_UI_Style.css + theme.css 변수만 사용.
* - 공통 컴포넌트(createButton/createCard) 우선 사용.
* - 공통 부품(createPublicFrame/createCard/createButton) 우선 사용.
* - 이벤트 핸들러는 on[페이지]_[기능]_[액션] 명명.
* ========================================================================== */
import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
import { createButton, createCard } from "@ui/ui_template_elements";
import { createPublicFrame } from "@ui/ui_template_public_layout";
import { createText } from "@ui/ui_template_text";
import { navigateTo } from "../A00_Common/router";
import { ROUTES } from "@config/config_frontend";
import "./A02_ProgDetail_UI_Style.css";
@@ -30,40 +32,7 @@ function onA02_ProgDetail_Start_Click(): void {
/* -----------------------------------------------------------------------------
* 섹션 빌더
* -------------------------------------------------------------------------- */
function buildHero(): HTMLElement {
const hero = document.createElement("section");
hero.className = "a02-hero";
const inner = document.createElement("div");
inner.className = "a02-hero__inner";
const title = document.createElement("h1");
title.className = "a02-hero__title";
title.textContent = L("A02_ProgDetail_Title");
const subtitle = document.createElement("p");
subtitle.className = "a02-hero__subtitle";
subtitle.textContent = L("A02_ProgDetail_Hero_Subtitle");
const cta = createButton({
label: L("A02_ProgDetail_Hero_Cta"),
variant: "filled",
onClick: onA02_ProgDetail_Start_Click,
});
inner.append(title, subtitle, cta);
hero.append(inner);
return hero;
}
function buildWorkflow(): HTMLElement {
const section = document.createElement("section");
section.className = "a02-section";
const heading = document.createElement("h2");
heading.className = "a02-section__title";
heading.textContent = L("A02_ProgDetail_Workflow_SectionTitle");
const list = document.createElement("div");
list.className = "a02-workflow-list";
@@ -77,9 +46,6 @@ function buildWorkflow(): HTMLElement {
];
steps.forEach(([titleKey, descKey], index) => {
const row = document.createElement("div");
row.className = "a02-workflow-row";
const badge = document.createElement("span");
badge.className = "a02-workflow-row__badge";
badge.textContent = String(index + 1);
@@ -91,27 +57,15 @@ function buildWorkflow(): HTMLElement {
stepTitle.className = "a02-workflow-row__title";
stepTitle.textContent = L(titleKey);
const stepDesc = document.createElement("p");
stepDesc.className = "a02-workflow-row__desc";
stepDesc.textContent = L(descKey);
text.append(stepTitle, stepDesc);
row.append(badge, text);
text.append(stepTitle, createText(L(descKey), "muted", 14));
const row = createCard({ body: [badge, text] });
row.classList.add("a02-workflow-row");
list.append(row);
});
section.append(heading, list);
return section;
return list;
}
function buildTech(): HTMLElement {
const section = document.createElement("section");
section.className = "a02-section";
const heading = document.createElement("h2");
heading.className = "a02-section__title";
heading.textContent = L("A02_ProgDetail_Tech_SectionTitle");
const grid = document.createElement("div");
grid.className = "a02-tech-grid";
@@ -122,24 +76,31 @@ function buildTech(): HTMLElement {
];
for (const [titleKey, descKey] of techs) {
const desc = document.createElement("p");
desc.className = "a02-tech__desc";
desc.textContent = L(descKey);
const card = createCard({ title: L(titleKey), body: [desc] });
const card = createCard({ title: L(titleKey), body: [createText(L(descKey), "muted", 14)] });
card.classList.add("a02-tech-card");
grid.append(card);
}
section.append(heading, grid);
return section;
return grid;
}
/* -----------------------------------------------------------------------------
* 페이지 진입점
* -------------------------------------------------------------------------- */
export function renderA02ProgDetail(root: HTMLElement): void {
const page = document.createElement("div");
page.className = "a02-prog-detail";
page.append(buildHero(), buildWorkflow(), buildTech());
root.append(page);
const frame = createPublicFrame({
title: L("A02_ProgDetail_Title"),
lead: L("A02_ProgDetail_Hero_Subtitle"),
actions: [
createButton({
label: L("A02_ProgDetail_Hero_Cta"),
variant: "filled",
onClick: onA02_ProgDetail_Start_Click,
}),
],
wide: true,
});
frame.root.classList.add("a02-prog-detail");
frame.addSection(L("A02_ProgDetail_Workflow_SectionTitle")).append(buildWorkflow());
frame.addSection(L("A02_ProgDetail_Tech_SectionTitle")).append(buildTech());
root.append(frame.root);
}
A02_ProgDetail/A02_ProgDetail_UI_Style.css
+7 -73
View File
@@ -1,58 +1,11 @@
/* =============================================================================
* A02_ProgDetail_UI_Style.css
* 프로그램 상세 페이지 고유 스타일 — theme.css 변수만 참조 (하드코딩 금지).
* 프로그램 상세 페이지 고유 배치 — 머리 · 구역 · 카드 겉은 공용 부품(공개 화면 틀 · 카드)이 냄.
* ========================================================================== */
.a02-prog-detail {
display: flex;
flex-direction: column;
gap: var(--section-gap);
padding-bottom: var(--spacing-64);
}
/* --- Hero --- */
.a02-hero {
background: linear-gradient(to bottom, var(--color-mist-violet), var(--color-canvas));
padding: var(--spacing-96) var(--spacing-32);
}
.a02-hero__inner {
max-width: var(--page-max-width);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--spacing-24);
}
.a02-hero__title {
font-size: var(--text-heading-lg);
line-height: var(--leading-heading-lg);
color: var(--color-deep-iris);
max-width: 18ch;
}
.a02-hero__subtitle {
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--color-slate);
max-width: 56ch;
margin: 0;
}
/* --- 공통 섹션 --- */
.a02-section {
max-width: var(--page-max-width);
margin: 0 auto;
width: 100%;
padding: 0 var(--spacing-32);
display: flex;
flex-direction: column;
gap: var(--spacing-24);
}
.a02-section__title {
font-size: var(--text-heading-sm);
line-height: var(--leading-heading-sm);
color: var(--color-deep-iris);
text-align: center;
/* 단추 하나뿐인 머리 — 단추 줄 위 여백 없음 */
.a02-prog-detail .ui-public-frame__actions {
margin-top: 0;
}
/* --- Workflow (번호 배지 + 텍스트) --- */
@@ -61,14 +14,10 @@
flex-direction: column;
gap: var(--spacing-16);
}
.a02-workflow-row {
display: flex;
.a02-workflow-row > .ui-card__body {
flex-direction: row;
align-items: flex-start;
gap: var(--spacing-24);
padding: var(--spacing-24);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-cards);
}
.a02-workflow-row__badge {
flex-shrink: 0;
@@ -90,15 +39,9 @@
}
.a02-workflow-row__title {
font-size: var(--text-body);
color: var(--color-charcoal);
color: var(--color-text);
margin: 0;
}
.a02-workflow-row__desc {
margin: 0;
color: var(--color-slate);
font-size: var(--text-body-sm);
line-height: var(--leading-body-sm);
}
/* --- Tech --- */
.a02-tech-grid {
@@ -109,18 +52,9 @@
.a02-tech-card {
min-height: 140px;
}
.a02-tech__desc {
margin: 0;
color: var(--color-slate);
font-size: var(--text-body-sm);
line-height: var(--leading-body-sm);
}
@media (max-width: 900px) {
.a02-tech-grid {
grid-template-columns: 1fr;
}
.a02-hero__title {
font-size: var(--text-heading);
}
}
A03_CompDetail/A03_CompDetail_UI_Page.ts
+16 -59
View File
@@ -5,11 +5,13 @@
* 제약 준수:
* - 모든 문구는 ui_template_locale.ts 참조 (하드코딩 금지).
* - 색상/간격은 A03_CompDetail_UI_Style.css + theme.css 변수만 사용.
* - 공통 컴포넌트(createCard) 우선 사용.
* - 공통 부품(createPublicFrame/createCard) 우선 사용.
* ========================================================================== */
import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
import { createCard } from "@ui/ui_template_elements";
import { createPublicFrame } from "@ui/ui_template_public_layout";
import { createText } from "@ui/ui_template_text";
import "./A03_CompDetail_UI_Style.css";
/** locale 헬퍼 */
@@ -20,50 +22,14 @@ function L(key: keyof typeof ui_locales): string {
/* -----------------------------------------------------------------------------
* 섹션 빌더
* -------------------------------------------------------------------------- */
function buildHero(): HTMLElement {
const hero = document.createElement("section");
hero.className = "a03-hero";
const inner = document.createElement("div");
inner.className = "a03-hero__inner";
const title = document.createElement("h1");
title.className = "a03-hero__title";
title.textContent = L("A03_CompDetail_Title");
const subtitle = document.createElement("p");
subtitle.className = "a03-hero__subtitle";
subtitle.textContent = L("A03_CompDetail_Hero_Subtitle");
inner.append(title, subtitle);
hero.append(inner);
return hero;
}
function buildMission(): HTMLElement {
const section = document.createElement("section");
section.className = "a03-section";
const heading = document.createElement("h2");
heading.className = "a03-section__title";
heading.textContent = L("A03_CompDetail_Mission_SectionTitle");
const body = document.createElement("p");
body.className = "a03-mission__body";
body.textContent = L("A03_CompDetail_Mission_Body");
section.append(heading, body);
return section;
return body;
}
function buildValues(): HTMLElement {
const section = document.createElement("section");
section.className = "a03-section";
const heading = document.createElement("h2");
heading.className = "a03-section__title";
heading.textContent = L("A03_CompDetail_Value_SectionTitle");
const grid = document.createElement("div");
grid.className = "a03-value-grid";
@@ -74,40 +40,31 @@ function buildValues(): HTMLElement {
];
for (const [titleKey, descKey] of values) {
const desc = document.createElement("p");
desc.className = "a03-value__desc";
desc.textContent = L(descKey);
const card = createCard({ title: L(titleKey), body: [desc] });
const card = createCard({ title: L(titleKey), body: [createText(L(descKey), "muted", 14)] });
card.classList.add("a03-value-card");
grid.append(card);
}
section.append(heading, grid);
return section;
return grid;
}
function buildContact(): HTMLElement {
const section = document.createElement("section");
section.className = "a03-section";
const heading = document.createElement("h2");
heading.className = "a03-section__title";
heading.textContent = L("A03_CompDetail_Contact_SectionTitle");
const email = document.createElement("p");
email.className = "a03-contact__email";
email.textContent = L("A03_CompDetail_Contact_Email");
section.append(heading, email);
return section;
return email;
}
/* -----------------------------------------------------------------------------
* 페이지 진입점
* -------------------------------------------------------------------------- */
export function renderA03CompDetail(root: HTMLElement): void {
const page = document.createElement("div");
page.className = "a03-comp-detail";
page.append(buildHero(), buildMission(), buildValues(), buildContact());
root.append(page);
const frame = createPublicFrame({
title: L("A03_CompDetail_Title"),
lead: L("A03_CompDetail_Hero_Subtitle"),
wide: true,
});
frame.addSection(L("A03_CompDetail_Mission_SectionTitle")).append(buildMission());
frame.addSection(L("A03_CompDetail_Value_SectionTitle")).append(buildValues());
frame.addSection(L("A03_CompDetail_Contact_SectionTitle")).append(buildContact());
root.append(frame.root);
}
A03_CompDetail/A03_CompDetail_UI_Style.css
+3 -64
View File
@@ -1,66 +1,14 @@
/* =============================================================================
* A03_CompDetail_UI_Style.css
* 회사 상세 페이지 고유 스타일 — theme.css 변수만 참조 (하드코딩 금지).
* 회사 상세 페이지 고유 배치 — 머리 · 구역 · 카드 겉은 공용 부품(공개 화면 틀 · 카드)이 냄.
* ========================================================================== */
.a03-comp-detail {
display: flex;
flex-direction: column;
gap: var(--section-gap);
padding-bottom: var(--spacing-64);
}
/* --- Hero --- */
.a03-hero {
background: linear-gradient(to bottom, var(--color-mist-violet), var(--color-canvas));
padding: var(--spacing-96) var(--spacing-32);
}
.a03-hero__inner {
max-width: var(--page-max-width);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--spacing-24);
}
.a03-hero__title {
font-size: var(--text-heading-lg);
line-height: var(--leading-heading-lg);
color: var(--color-deep-iris);
max-width: 18ch;
}
.a03-hero__subtitle {
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--color-slate);
max-width: 56ch;
margin: 0;
}
/* --- 공통 섹션 --- */
.a03-section {
max-width: var(--page-max-width);
margin: 0 auto;
width: 100%;
padding: 0 var(--spacing-32);
display: flex;
flex-direction: column;
gap: var(--spacing-24);
}
.a03-section__title {
font-size: var(--text-heading-sm);
line-height: var(--leading-heading-sm);
color: var(--color-deep-iris);
text-align: center;
}
/* --- Mission --- */
.a03-mission__body {
margin: 0 auto;
max-width: 60ch;
text-align: center;
color: var(--color-slate);
color: var(--color-text-secondary);
font-size: var(--text-body);
line-height: var(--leading-body);
}
@@ -74,18 +22,12 @@
.a03-value-card {
min-height: 140px;
}
.a03-value__desc {
margin: 0;
color: var(--color-slate);
font-size: var(--text-body-sm);
line-height: var(--leading-body-sm);
}
/* --- Contact --- */
.a03-contact__email {
margin: 0;
text-align: center;
color: var(--color-charcoal);
color: var(--color-text);
font-size: var(--text-body);
}
@@ -93,7 +35,4 @@
.a03-value-grid {
grid-template-columns: 1fr;
}
.a03-hero__title {
font-size: var(--text-heading);
}
}
A04_NewsHistory/A04_NewsHistory_UI_Page.ts
+18 -46
View File
@@ -5,12 +5,15 @@
* 제약 준수:
* - 모든 문구는 ui_template_locale.ts 참조 (하드코딩 금지).
* - 색상/간격은 A04_NewsHistory_UI_Style.css + theme.css 변수만 사용.
* - 공통 컴포넌트(createTag) 우선 사용.
* - 공통 부품(createPublicFrame/createCard/createBadge) 우선 사용.
* - Mock 데이터는 나중에 GET /api/a04/history로 교체.
* ========================================================================== */
import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
import { createTag, type TagVariant } from "@ui/ui_template_elements";
import { createBadge, type BadgeTone } from "@ui/ui_template_badge";
import { createCard } from "@ui/ui_template_elements";
import { createEmpty } from "@ui/ui_template_empty";
import { createPublicFrame } from "@ui/ui_template_public_layout";
import "./A04_NewsHistory_UI_Style.css";
/** locale 헬퍼 */
@@ -38,7 +41,7 @@ const MOCK_HISTORY: HistoryItem[] = [
];
/** 이력 종류별 태그 변형/라벨 매핑 */
const KIND_META: Record<HistoryKind, { variant: TagVariant; labelKey: keyof typeof ui_locales }> = {
const KIND_META: Record<HistoryKind, { variant: BadgeTone; labelKey: keyof typeof ui_locales }> = {
feature: { variant: "accent", labelKey: "A04_NewsHistory_Tag_Feature" },
fix: { variant: "success", labelKey: "A04_NewsHistory_Tag_Fix" },
notice: { variant: "neutral", labelKey: "A04_NewsHistory_Tag_Notice" },
@@ -47,47 +50,14 @@ const KIND_META: Record<HistoryKind, { variant: TagVariant; labelKey: keyof type
/* -----------------------------------------------------------------------------
* 섹션 빌더
* -------------------------------------------------------------------------- */
function buildHero(): HTMLElement {
const hero = document.createElement("section");
hero.className = "a04-hero";
const inner = document.createElement("div");
inner.className = "a04-hero__inner";
const title = document.createElement("h1");
title.className = "a04-hero__title";
title.textContent = L("A04_NewsHistory_Title");
const subtitle = document.createElement("p");
subtitle.className = "a04-hero__subtitle";
subtitle.textContent = L("A04_NewsHistory_Hero_Subtitle");
inner.append(title, subtitle);
hero.append(inner);
return hero;
}
function buildTimeline(): HTMLElement {
const section = document.createElement("section");
section.className = "a04-section";
if (MOCK_HISTORY.length === 0) return createEmpty({ text: L("A04_NewsHistory_Empty") });
const list = document.createElement("div");
list.className = "a04-timeline";
if (MOCK_HISTORY.length === 0) {
const empty = document.createElement("p");
empty.className = "a04-timeline__empty";
empty.textContent = L("A04_NewsHistory_Empty");
section.append(empty);
return section;
}
for (const item of MOCK_HISTORY) {
const meta = KIND_META[item.kind];
const row = document.createElement("div");
row.className = "a04-timeline-row";
const tag = createTag(L(meta.labelKey), meta.variant);
const tag = createBadge(L(meta.labelKey), meta.variant);
const titleEl = document.createElement("span");
titleEl.className = "a04-timeline-row__title";
@@ -97,20 +67,22 @@ function buildTimeline(): HTMLElement {
dateEl.className = "a04-timeline-row__date";
dateEl.textContent = item.date;
row.append(tag, titleEl, dateEl);
const row = createCard({ body: [tag, titleEl, dateEl] });
row.classList.add("a04-timeline-row");
list.append(row);
}
section.append(list);
return section;
return list;
}
/* -----------------------------------------------------------------------------
* 페이지 진입점
* -------------------------------------------------------------------------- */
export function renderA04NewsHistory(root: HTMLElement): void {
const page = document.createElement("div");
page.className = "a04-news-history";
page.append(buildHero(), buildTimeline());
root.append(page);
const frame = createPublicFrame({
title: L("A04_NewsHistory_Title"),
lead: L("A04_NewsHistory_Hero_Subtitle"),
wide: true,
});
frame.addSection().append(buildTimeline());
root.append(frame.root);
}
A04_NewsHistory/A04_NewsHistory_UI_Style.css
+7 -65
View File
@@ -1,54 +1,8 @@
/* =============================================================================
* A04_NewsHistory_UI_Style.css
* 최신소식/개선이력 페이지 고유 스타일 — theme.css 변수만 참조 (하드코딩 금지).
* 최신소식 · 개선 이력 고유 배치 — 머리 · 구역 · 카드 겉은 공용 부품(공개 화면 틀 · 카드)이 냄.
* ========================================================================== */
.a04-news-history {
display: flex;
flex-direction: column;
gap: var(--section-gap);
padding-bottom: var(--spacing-64);
}
/* --- Hero --- */
.a04-hero {
background: linear-gradient(to bottom, var(--color-mist-violet), var(--color-canvas));
padding: var(--spacing-96) var(--spacing-32);
}
.a04-hero__inner {
max-width: var(--page-max-width);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--spacing-24);
}
.a04-hero__title {
font-size: var(--text-heading-lg);
line-height: var(--leading-heading-lg);
color: var(--color-deep-iris);
max-width: 18ch;
}
.a04-hero__subtitle {
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--color-slate);
max-width: 56ch;
margin: 0;
}
/* --- 공통 섹션 --- */
.a04-section {
max-width: var(--page-max-width);
margin: 0 auto;
width: 100%;
padding: 0 var(--spacing-32);
display: flex;
flex-direction: column;
gap: var(--spacing-24);
}
/* --- Timeline --- */
.a04-timeline {
display: flex;
@@ -56,31 +10,19 @@
gap: var(--spacing-8);
}
.a04-timeline-row {
display: flex;
padding: var(--spacing-16) var(--spacing-24);
}
.a04-timeline-row > .ui-card__body {
flex-direction: row;
align-items: center;
gap: var(--spacing-16);
padding: var(--spacing-16) var(--spacing-24);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-cards);
}
.a04-timeline-row__title {
flex: 1;
color: var(--color-charcoal);
color: var(--color-text);
font-size: var(--text-body-sm);
}
.a04-timeline-row__date {
color: var(--color-ash);
color: var(--color-text-muted);
font-size: var(--text-caption);
}
.a04-timeline__empty {
text-align: center;
color: var(--color-slate);
font-size: var(--text-body);
}
@media (max-width: 900px) {
.a04-hero__title {
font-size: var(--text-heading);
}
}
A05_EduDetail/A05_EduDetail_UI_Page.ts
+21 -53
View File
@@ -5,12 +5,14 @@
* 제약 준수:
* - 모든 문구는 ui_template_locale.ts 참조 (하드코딩 금지).
* - 색상/간격은 A05_EduDetail_UI_Style.css + theme.css 변수만 사용.
* - 공통 컴포넌트(createButton/createCard) 우선 사용.
* - 공통 부품(createPublicFrame/createCard/createButton) 우선 사용.
* - 이벤트 핸들러는 on[페이지]_[기능]_[액션] 명명.
* ========================================================================== */
import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
import { createButton, createCard } from "@ui/ui_template_elements";
import { createPublicFrame } from "@ui/ui_template_public_layout";
import { createText } from "@ui/ui_template_text";
import { navigateTo } from "../A00_Common/router";
import { ROUTES } from "@config/config_frontend";
import "./A05_EduDetail_UI_Style.css";
@@ -30,34 +32,7 @@ function onA05_EduDetail_Inquiry_Click(): void {
/* -----------------------------------------------------------------------------
* 섹션 빌더
* -------------------------------------------------------------------------- */
function buildHero(): HTMLElement {
const hero = document.createElement("section");
hero.className = "a05-hero";
const inner = document.createElement("div");
inner.className = "a05-hero__inner";
const title = document.createElement("h1");
title.className = "a05-hero__title";
title.textContent = L("A05_EduDetail_Title");
const subtitle = document.createElement("p");
subtitle.className = "a05-hero__subtitle";
subtitle.textContent = L("A05_EduDetail_Hero_Subtitle");
inner.append(title, subtitle);
hero.append(inner);
return hero;
}
function buildCourses(): HTMLElement {
const section = document.createElement("section");
section.className = "a05-section";
const heading = document.createElement("h2");
heading.className = "a05-section__title";
heading.textContent = L("A05_EduDetail_Course_SectionTitle");
const grid = document.createElement("div");
grid.className = "a05-course-grid";
@@ -68,38 +43,31 @@ function buildCourses(): HTMLElement {
];
for (const [titleKey, descKey] of courses) {
const desc = document.createElement("p");
desc.className = "a05-course__desc";
desc.textContent = L(descKey);
const card = createCard({ title: L(titleKey), body: [desc] });
const card = createCard({ title: L(titleKey), body: [createText(L(descKey), "muted", 14)] });
card.classList.add("a05-course-card");
grid.append(card);
}
section.append(heading, grid);
return section;
}
function buildCta(): HTMLElement {
const section = document.createElement("section");
section.className = "a05-section a05-cta";
section.append(
createButton({
label: L("A05_EduDetail_Cta"),
variant: "filled",
onClick: onA05_EduDetail_Inquiry_Click,
}),
);
return section;
return grid;
}
/* -----------------------------------------------------------------------------
* 페이지 진입점
* -------------------------------------------------------------------------- */
export function renderA05EduDetail(root: HTMLElement): void {
const page = document.createElement("div");
page.className = "a05-edu-detail";
page.append(buildHero(), buildCourses(), buildCta());
root.append(page);
const frame = createPublicFrame({
title: L("A05_EduDetail_Title"),
lead: L("A05_EduDetail_Hero_Subtitle"),
wide: true,
});
frame.addSection(L("A05_EduDetail_Course_SectionTitle")).append(buildCourses());
const cta = frame.addSection();
cta.classList.add("a05-cta");
cta.append(
createButton({
label: L("A05_EduDetail_Cta"),
variant: "filled",
onClick: onA05_EduDetail_Inquiry_Click,
}),
);
root.append(frame.root);
}
A05_EduDetail/A05_EduDetail_UI_Style.css
+1 -62
View File
@@ -1,60 +1,8 @@
/* =============================================================================
* A05_EduDetail_UI_Style.css
* 교육 상세 페이지 고유 스타일 — theme.css 변수만 참조 (하드코딩 금지).
* 교육 상세 페이지 고유 배치 — 머리 · 구역 · 카드 겉은 공용 부품(공개 화면 틀 · 카드)이 냄.
* ========================================================================== */
.a05-edu-detail {
display: flex;
flex-direction: column;
gap: var(--section-gap);
padding-bottom: var(--spacing-64);
}
/* --- Hero --- */
.a05-hero {
background: linear-gradient(to bottom, var(--color-mist-violet), var(--color-canvas));
padding: var(--spacing-96) var(--spacing-32);
}
.a05-hero__inner {
max-width: var(--page-max-width);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--spacing-24);
}
.a05-hero__title {
font-size: var(--text-heading-lg);
line-height: var(--leading-heading-lg);
color: var(--color-deep-iris);
max-width: 18ch;
}
.a05-hero__subtitle {
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--color-slate);
max-width: 56ch;
margin: 0;
}
/* --- 공통 섹션 --- */
.a05-section {
max-width: var(--page-max-width);
margin: 0 auto;
width: 100%;
padding: 0 var(--spacing-32);
display: flex;
flex-direction: column;
gap: var(--spacing-24);
}
.a05-section__title {
font-size: var(--text-heading-sm);
line-height: var(--leading-heading-sm);
color: var(--color-deep-iris);
text-align: center;
}
/* --- Courses --- */
.a05-course-grid {
display: grid;
@@ -64,12 +12,6 @@
.a05-course-card {
min-height: 140px;
}
.a05-course__desc {
margin: 0;
color: var(--color-slate);
font-size: var(--text-body-sm);
line-height: var(--leading-body-sm);
}
/* --- CTA --- */
.a05-cta {
@@ -80,7 +22,4 @@
.a05-course-grid {
grid-template-columns: 1fr;
}
.a05-hero__title {
font-size: var(--text-heading);
}
}
A05_EduDetail/guide/B03/_scenes.json
+3 -3
View File
@@ -38,11 +38,11 @@
},
{
"n": 6,
"sel": ".b03-file__columns > :nth-child(1) .b03-file__group-title"
"sel": ".b03-file__columns > :nth-child(1) .ui-panel-head__title"
},
{
"n": 7,
"sel": ".b03-file__columns > :nth-child(2) .b03-file__group-title"
"sel": ".b03-file__columns > :nth-child(2) .ui-panel-head__title"
}
]
},
@@ -215,7 +215,7 @@
"wait": ".b03-file__lasfree"
},
{
"click": ".b03-file__lasfree input"
"click": ".b03-file__lasfree"
},
{
"wait_ms": 800
A06_Login/A06_Login_UI_Auth_Page.ts
+3 -3
View File
@@ -2,6 +2,7 @@ import { ROUTES } from "@config/config_frontend";
import { isBlank, isValidEmail } from "@util/common_util_validate";
import {
createButton,
createCard,
createInputField,
hideLoadingOverlay,
showLoadingOverlay,
@@ -67,8 +68,6 @@ function clearOtpPending(): void {
export function renderA06Login(root: HTMLElement): void {
const page = document.createElement("div");
page.className = "a06-login";
const card = document.createElement("div");
card.className = "a06-login__card";
const title = document.createElement("h1");
title.className = "a06-login__title";
title.textContent = L("A06_Login_Title");
@@ -215,7 +214,8 @@ export function renderA06Login(root: HTMLElement): void {
variant: "ghost",
onClick: () => navigateTo(ROUTES.A07_REGISTER),
});
card.append(title, form, register);
const card = createCard({ body: [title, form, register] });
card.classList.add("a06-login__card");
page.append(card);
root.append(page);
A06_Login/A06_Login_UI_Style.css
+2 -22
View File
@@ -1,6 +1,6 @@
/* =============================================================================
* A06_Login_UI_Style.css
* 로그인 페이지 고유 스타일 — theme.css 변수만 참조 (하드코딩 금지).
* 로그인 페이지 고유 배치 — 카드 겉은 공용 부품(카드)이 냄.
* ========================================================================== */
.a06-login {
@@ -13,29 +13,16 @@
.a06-login__card {
width: 100%;
max-width: 400px;
display: flex;
flex-direction: column;
gap: var(--spacing-16);
padding: var(--spacing-40);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-cards);
box-shadow: var(--shadow-sm);
}
.a06-login__title {
font-size: var(--text-heading-sm);
line-height: var(--leading-heading-sm);
color: var(--color-deep-iris);
color: var(--color-text);
text-align: center;
margin: 0;
}
.a06-login__subtitle {
font-size: var(--text-body-sm);
color: var(--color-slate);
text-align: center;
margin: 0 0 var(--spacing-8);
}
.a06-login__form {
display: flex;
@@ -50,10 +37,3 @@
.a06-login__otp-actions > .ui-btn {
flex: 1;
}
.a06-login__submit {
width: 100%;
margin-top: var(--spacing-8);
}
.a06-login__link {
width: 100%;
}
A07_Register/A07_Register_UI_Auth_Page.ts
+17 -24
View File
@@ -2,11 +2,14 @@ import { ROUTES } from "@config/config_frontend";
import { hasMinLength, isBlank, isValidEmail } from "@util/common_util_validate";
import {
createButton,
createCard,
createInputField,
hideLoadingOverlay,
showLoadingOverlay,
showToast,
} from "@ui/ui_template_elements";
import { createCheckbox } from "@ui/ui_template_checkbox";
import { attachCollapsible } from "@ui/ui_template_collapsible";
import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
import { navigateTo } from "../A00_Common/router";
import { requestRegistration, verifyRegistration } from "./A07_Register_Api_Fetch";
@@ -22,38 +25,29 @@ interface AgreementField {
function checkboxWithAccordion(label: string, contentText: string): AgreementField {
const container = document.createElement("div");
container.className = "a07-register__agreement";
container.className = "ui-collapsible is-collapsed a07-register__agreement";
const summary = document.createElement("div");
summary.className = "a07-register__agreement-summary";
summary.className = "ui-collapsible__title a07-register__agreement-summary";
const input = document.createElement("input");
input.type = "checkbox";
const box = createCheckbox("");
// 체크 상자를 누를 땐 접힘이 바뀌지 않게 — 줄의 나머지를 누르면 약관이 펴짐
box.root.addEventListener("click", (e) => e.stopPropagation());
const labelSpan = document.createElement("span");
labelSpan.className = "a07-register__agreement-label";
labelSpan.textContent = label;
summary.append(input, labelSpan);
summary.append(box.root, labelSpan);
const details = document.createElement("details");
details.className = "a07-register__agreement-details";
const content = document.createElement("div");
content.className = "a07-register__agreement-content";
content.textContent = contentText;
const detailsContent = document.createElement("div");
detailsContent.className = "a07-register__agreement-content";
detailsContent.textContent = contentText;
container.append(summary, content);
attachCollapsible(container);
details.appendChild(detailsContent);
summary.addEventListener("click", (e) => {
if (e.target !== input) {
details.open = !details.open;
}
});
container.append(summary, details);
return { root: container, input };
return { root: container, input: box.input };
}
async function loadAgreementText(filename: string): Promise<string> {
@@ -69,8 +63,6 @@ async function loadAgreementText(filename: string): Promise<string> {
export function renderA07Register(root: HTMLElement): void {
const page = document.createElement("div");
page.className = "a07-register";
const card = document.createElement("div");
card.className = "a07-register__card";
const title = document.createElement("h1");
title.className = "a07-register__title";
title.textContent = L("A07_Register_Title");
@@ -210,7 +202,8 @@ export function renderA07Register(root: HTMLElement): void {
variant: "ghost",
onClick: () => navigateTo(ROUTES.A06_LOGIN),
});
card.append(title, form, login);
const card = createCard({ body: [title, form, login] });
card.classList.add("a07-register__card");
page.append(card);
root.append(page);
});
A07_Register/A07_Register_UI_Page.ts
-141
View File
@@ -1,141 +0,0 @@
/* =============================================================================
* A07_Register_UI_Page.ts
* 로그인 전 07: 회원가입 (회사명 + 이름 + 이메일 + 비밀번호 폼)
*
* 제약 준수:
* - 모든 문구는 ui_template_locale.ts 참조 (하드코딩 금지).
* - 색상/간격은 A07_Register_UI_Style.css + theme.css 변수만 사용.
* - 공통 컴포넌트(createButton/createInputField) 우선 사용.
* - 이벤트 핸들러는 on[페이지]_[기능]_[액션] 명명.
* - 백엔드 전송 전 1차 유효성 검사 (frontend.md §4).
* ========================================================================== */
import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
import { createButton, createInputField } from "@ui/ui_template_elements";
import { isBlank, isValidEmail, hasMinLength } from "@util/common_util_validate";
import { navigateTo } from "../A00_Common/router";
import { ROUTES } from "@config/config_frontend";
import "./A07_Register_UI_Style.css";
/** locale 헬퍼 */
function L(key: keyof typeof ui_locales): string {
return ui_locales[key][currentLanguageIndex];
}
/** 비밀번호 최소 길이 */
const PASSWORD_MIN_LENGTH = 8;
/* -----------------------------------------------------------------------------
* 페이지 진입점
* -------------------------------------------------------------------------- */
export function renderA07Register(root: HTMLElement): void {
const page = document.createElement("div");
page.className = "a07-register";
const card = document.createElement("div");
card.className = "a07-register__card";
const title = document.createElement("h1");
title.className = "a07-register__title";
title.textContent = L("A07_Register_Title");
const subtitle = document.createElement("p");
subtitle.className = "a07-register__subtitle";
subtitle.textContent = L("A07_Register_Subtitle");
// 입력 필드
const companyField = createInputField({
label: L("A07_Register_Field_Company"),
placeholder: L("A07_Register_Field_Company_Placeholder"),
type: "text",
required: true,
});
const nameField = createInputField({
label: L("A07_Register_Field_Name"),
placeholder: L("A07_Register_Field_Name_Placeholder"),
type: "text",
required: true,
});
const emailField = createInputField({
label: L("A07_Register_Field_Email"),
placeholder: L("A07_Register_Field_Email_Placeholder"),
type: "email",
required: true,
});
const passwordField = createInputField({
label: L("A07_Register_Field_Password"),
placeholder: L("A07_Register_Field_Password_Placeholder"),
type: "password",
required: true,
});
const form = document.createElement("form");
form.className = "a07-register__form";
form.noValidate = true;
const submitBtn = createButton({
label: L("A07_Register_Submit"),
variant: "filled",
type: "submit",
});
submitBtn.classList.add("a07-register__submit");
/* 이벤트 핸들러: 제출 시 1차 유효성 검사 */
function onA07_Register_Submit_Click(event: Event): void {
event.preventDefault();
[companyField, nameField, emailField, passwordField].forEach((f) => f.setError());
const company = companyField.input.value;
const name = nameField.input.value;
const email = emailField.input.value;
const password = passwordField.input.value;
// 필수값 검사
let hasError = false;
if (isBlank(company)) {
companyField.setError(L("A07_Register_Error_Required"));
hasError = true;
}
if (isBlank(name)) {
nameField.setError(L("A07_Register_Error_Required"));
hasError = true;
}
if (isBlank(email)) {
emailField.setError(L("A07_Register_Error_Required"));
hasError = true;
}
if (isBlank(password)) {
passwordField.setError(L("A07_Register_Error_Required"));
hasError = true;
}
if (hasError) return;
// 형식 검사
if (!isValidEmail(email)) {
emailField.setError(L("A07_Register_Error_Email"));
return;
}
if (!hasMinLength(password, PASSWORD_MIN_LENGTH)) {
passwordField.setError(L("A07_Register_Error_Password"));
return;
}
// TODO: POST /api/a07/register 연동. 성공 시 로그인 페이지로.
navigateTo(ROUTES.A06_LOGIN);
}
form.addEventListener("submit", onA07_Register_Submit_Click);
form.append(companyField.root, nameField.root, emailField.root, passwordField.root, submitBtn);
// 로그인 링크
const toLogin = createButton({
label: L("A07_Register_ToLogin"),
variant: "ghost",
onClick: () => navigateTo(ROUTES.A06_LOGIN),
});
toLogin.classList.add("a07-register__link");
card.append(title, subtitle, form, toLogin);
page.append(card);
root.append(page);
}
A07_Register/A07_Register_UI_Style.css
+5 -46
View File
@@ -1,6 +1,6 @@
/* =============================================================================
* A07_Register_UI_Style.css
* 회원가입 페이지 고유 스타일 — theme.css 변수만 참조 (하드코딩 금지).
* 회원가입 페이지 고유 배치 — 카드 · 체크 · 접이 겉은 공용 부품이 냄.
* ========================================================================== */
.a07-register {
@@ -13,49 +13,22 @@
.a07-register__card {
width: 100%;
max-width: 420px;
display: flex;
flex-direction: column;
gap: var(--spacing-16);
padding: var(--spacing-40);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-cards);
box-shadow: var(--shadow-sm);
}
.a07-register__title {
font-size: var(--text-heading-sm);
line-height: var(--leading-heading-sm);
color: var(--color-deep-iris);
color: var(--color-text);
text-align: center;
margin: 0;
}
.a07-register__subtitle {
font-size: var(--text-body-sm);
color: var(--color-slate);
text-align: center;
margin: 0 0 var(--spacing-8);
}
.a07-register__form {
display: flex;
flex-direction: column;
gap: var(--spacing-16);
}
.a07-register__submit {
width: 100%;
margin-top: var(--spacing-8);
}
.a07-register__link {
width: 100%;
}
.a07-register__check {
display: flex;
align-items: center;
gap: var(--spacing-8);
color: var(--color-text);
font-size: var(--text-body-sm);
}
.a07-register__agreement {
border: 1px solid var(--color-border);
@@ -64,17 +37,9 @@
}
.a07-register__agreement-summary {
display: flex;
align-items: center;
gap: var(--spacing-8);
padding: var(--spacing-12) var(--spacing-16);
background-color: var(--color-canvas);
cursor: pointer;
user-select: none;
}
.a07-register__agreement-summary input[type="checkbox"] {
flex-shrink: 0;
}
.a07-register__agreement-label {
@@ -83,20 +48,14 @@
color: var(--color-text);
}
.a07-register__agreement-details {
border-top: 1px solid var(--color-border);
}
.a07-register__agreement-details[open] {
padding: var(--spacing-12) var(--spacing-16);
}
.a07-register__agreement-content {
max-height: 200px;
overflow-y: auto;
padding: var(--spacing-12) var(--spacing-16);
border-top: 1px solid var(--color-border);
white-space: pre-wrap;
word-break: break-word;
font-size: var(--text-body-sm);
color: var(--color-slate);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
A08_Support/A08_Support_UI_Page.ts
+13 -57
View File
@@ -5,13 +5,14 @@
* 제약 준수:
* - 모든 문구는 ui_template_locale.ts 참조 (하드코딩 금지).
* - 색상/간격은 A08_Support_UI_Style.css + theme.css 변수만 사용.
* - 공통 컴포넌트(createButton/createInputField) 우선 사용.
* - 공통 부품(createCard/createBanner/createInputField/createButton) 우선 사용.
* - 이벤트 핸들러는 on[페이지]_[기능]_[액션] 명명.
* - 백엔드 전송 전 1차 유효성 검사 (frontend.md §4).
* ========================================================================== */
import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
import { createButton, createInputField } from "@ui/ui_template_elements";
import { createBanner } from "@ui/ui_template_banner";
import { createButton, createCard, createInputField } from "@ui/ui_template_elements";
import { isBlank, isValidEmail } from "@util/common_util_validate";
import { fetchSessionUser } from "../A06_Login/A06_Login_Api_Fetch";
import "./A08_Support_UI_Style.css";
@@ -21,48 +22,6 @@ function L(key: keyof typeof ui_locales): string {
return ui_locales[key][currentLanguageIndex];
}
/** 문의내용 textarea 핸들 (createInputField와 유사한 형태로 에러 슬롯 포함) */
interface TextAreaHandle {
root: HTMLDivElement;
textarea: HTMLTextAreaElement;
setError: (msg?: string) => void;
}
/** 여러 줄 입력용 textarea 필드 생성 (공통 .ui-field/.ui-input 스타일 상속). */
function createTextAreaField(label: string, placeholder: string): TextAreaHandle {
const root = document.createElement("div");
root.className = "ui-field";
const labelEl = document.createElement("label");
labelEl.className = "ui-field__label";
labelEl.textContent = label;
const textarea = document.createElement("textarea");
textarea.className = "ui-input a08-support__textarea";
textarea.placeholder = placeholder;
textarea.rows = 6;
const errorSlot = document.createElement("span");
errorSlot.className = "ui-field__error";
errorSlot.setAttribute("role", "alert");
root.append(labelEl, textarea, errorSlot);
const setError = (msg?: string): void => {
if (msg) {
textarea.classList.add("ui-input--error");
errorSlot.textContent = msg;
errorSlot.classList.add("is-visible");
} else {
textarea.classList.remove("ui-input--error");
errorSlot.textContent = "";
errorSlot.classList.remove("is-visible");
}
};
return { root, textarea, setError };
}
/* -----------------------------------------------------------------------------
* 페이지 진입점
* -------------------------------------------------------------------------- */
@@ -70,9 +29,6 @@ export function renderA08Support(root: HTMLElement): void {
const page = document.createElement("div");
page.className = "a08-support";
const card = document.createElement("div");
card.className = "a08-support__card";
const title = document.createElement("h1");
title.className = "a08-support__title";
title.textContent = L("A08_Support_Title");
@@ -82,9 +38,7 @@ export function renderA08Support(root: HTMLElement): void {
subtitle.textContent = L("A08_Support_Subtitle");
// 성공 메시지 슬롯 (제출 성공 시 표시)
const successMsg = document.createElement("p");
successMsg.className = "a08-support__success";
successMsg.textContent = L("A08_Support_Success");
const successMsg = createBanner({ tone: "success", text: L("A08_Support_Success") });
successMsg.hidden = true;
// 입력 필드
@@ -113,10 +67,11 @@ export function renderA08Support(root: HTMLElement): void {
type: "text",
required: true,
});
const messageField = createTextAreaField(
L("A08_Support_Field_Message"),
L("A08_Support_Field_Message_Placeholder"),
);
const messageField = createInputField({
label: L("A08_Support_Field_Message"),
placeholder: L("A08_Support_Field_Message_Placeholder"),
multiline: 6,
});
const form = document.createElement("form");
form.className = "a08-support__form";
@@ -142,7 +97,7 @@ export function renderA08Support(root: HTMLElement): void {
const email = emailField.input.value;
const phone = phoneField.input.value;
const subject = subjectField.input.value;
const message = messageField.textarea.value;
const message = messageField.input.value;
// 필수값 검사
let hasError = false;
@@ -184,7 +139,7 @@ export function renderA08Support(root: HTMLElement): void {
throw new Error(error.detail ?? "요청 실패");
}
form.reset();
messageField.textarea.value = "";
messageField.input.value = "";
successMsg.hidden = false;
} catch (err) {
const msg = err instanceof Error ? err.message : "오류 발생";
@@ -203,7 +158,8 @@ export function renderA08Support(root: HTMLElement): void {
submitBtn,
);
card.append(title, subtitle, successMsg, form);
const card = createCard({ body: [title, subtitle, successMsg, form] });
card.classList.add("a08-support__card");
page.append(card);
root.append(page);
A08_Support/A08_Support_UI_Style.css
+3 -25
View File
@@ -1,6 +1,6 @@
/* =============================================================================
* A08_Support_UI_Style.css
* 기술지원 요청 페이지 고유 스타일 — theme.css 변수만 참조 (하드코딩 금지).
* 기술지원 요청 페이지 고유 배치 — 카드 · 알림 · 칸 겉은 공용 부품이 냄.
* ========================================================================== */
.a08-support {
@@ -13,50 +13,28 @@
.a08-support__card {
width: 100%;
max-width: 520px;
display: flex;
flex-direction: column;
gap: var(--spacing-16);
padding: var(--spacing-40);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-cards);
box-shadow: var(--shadow-sm);
}
.a08-support__title {
font-size: var(--text-heading-sm);
line-height: var(--leading-heading-sm);
color: var(--color-deep-iris);
color: var(--color-text);
text-align: center;
margin: 0;
}
.a08-support__subtitle {
font-size: var(--text-body-sm);
color: var(--color-slate);
color: var(--color-text-secondary);
text-align: center;
margin: 0 0 var(--spacing-8);
}
.a08-support__success {
margin: 0;
padding: var(--spacing-16);
text-align: center;
color: var(--color-success);
background-color: var(--color-mist-violet);
border-radius: var(--radius-cards);
font-size: var(--text-body-sm);
}
.a08-support__form {
display: flex;
flex-direction: column;
gap: var(--spacing-16);
}
.a08-support__textarea {
resize: vertical;
min-height: 120px;
font-family: inherit;
}
.a08-support__submit {
width: 100%;
margin-top: var(--spacing-8);
A09_Security/A09_Security_UI_Page.ts
+5 -4
View File
@@ -1,3 +1,4 @@
import { createCard } from "@ui/ui_template_elements";
import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
import { SECURITY_TERMS_VERSION, securityTerms } from "./A09_Security_Terms";
import "./A09_Security_UI_Style.css";
@@ -5,13 +6,11 @@ import "./A09_Security_UI_Style.css";
const L = (key: keyof typeof ui_locales): string => ui_locales[key][currentLanguageIndex];
export function renderA09Security(root: HTMLElement): void {
const page = document.createElement("article");
page.className = "a09-security";
const title = document.createElement("h1");
title.textContent = L("A09_Security_Title");
const version = document.createElement("p");
version.textContent = `${L("A09_Security_Version")} ${SECURITY_TERMS_VERSION}`;
page.append(title, version);
const blocks: HTMLElement[] = [title, version];
const sections = [
["A09_Security_Terms", securityTerms.terms],
["A09_Security_Privacy", securityTerms.privacy],
@@ -24,7 +23,9 @@ export function renderA09Security(root: HTMLElement): void {
const paragraph = document.createElement("p");
paragraph.textContent = body[currentLanguageIndex];
section.append(heading, paragraph);
page.append(section);
blocks.push(section);
}
const page = createCard({ body: blocks });
page.classList.add("a09-security");
root.append(page);
}
A09_Security/A09_Security_UI_Style.css
+5 -4
View File
@@ -1,12 +1,13 @@
/* 약관 문서 — 카드 겉은 공용 부품(카드) · 여기는 폭 · 여백 · 글 흐름만 */
.a09-security {
max-width: 800px;
margin: var(--spacing-64) auto;
padding: var(--spacing-40);
color: var(--color-text);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-cards);
box-shadow: var(--shadow-sm);
}
.a09-security > .ui-card__body {
display: block;
}
.a09-security section {
B01_Dashboard/B01_Dashboard_UI_PageKit.ts
+11 -125
View File
@@ -5,7 +5,7 @@
* 아이콘 = `ui_template_icons`(552-2 에 여섯을 옮김).
* ========================================================================== */
import { createButton, createTag, showConfirmDialog } from "@ui/ui_template_elements";
import { createButton, createTag } from "@ui/ui_template_elements";
import { createEmpty } from "@ui/ui_template_empty";
import { icon, type IconName } from "@ui/ui_template_icons";
import type { BadgeTone } from "./logic/B01_Dashboard_Logic_Pages";
@@ -70,107 +70,16 @@ export function pageFrame(host: HTMLElement, title: string, desc: string): PageF
};
}
export type Cell = string | Node;
export interface RowMenuItem {
label: string;
onClick: () => void;
/** 삭제 · 빼기 = 빨강 + 확인창 */
danger?: boolean;
/** 확인창 글(danger 일 때) */
confirm?: string;
/** 누르면 열리는 모달이 확인을 맡음 — 빨강만 · 확인창 없음 */
ownConfirm?: boolean;
}
/** 줄 끝 ⋯ — 열면 항목 · 밖을 누르면 닫힘 · danger 는 확인 뒤 실행 */
export function rowMenu(items: RowMenuItem[]): HTMLElement {
const wrap = node("div", "b01-pg-menu");
if (!items.length) return wrap;
const trigger = node("button", "b01-pg-menu__btn");
trigger.type = "button";
trigger.title = trigger.ariaLabel = "더 보기";
trigger.setAttribute("aria-haspopup", "menu");
trigger.setAttribute("aria-expanded", "false");
trigger.append(kitIcon("dots", 18));
const pop = node("div", "b01-pg-menu__pop");
pop.setAttribute("role", "menu");
pop.hidden = true;
const setOpen = (open: boolean): void => {
pop.hidden = !open;
trigger.setAttribute("aria-expanded", String(open));
wrap.classList.toggle("is-open", open);
};
for (const item of items) {
const b = node("button", `b01-pg-menu__item${item.danger ? " is-danger" : ""}`, item.label);
b.type = "button";
b.setAttribute("role", "menuitem");
b.addEventListener("click", () => {
setOpen(false);
if (!item.danger || item.ownConfirm) return item.onClick();
void showConfirmDialog(item.confirm ?? `${item.label} 하시겠습니까?`, item.label).then(
(ok) => ok && item.onClick(),
);
});
pop.append(b);
}
trigger.addEventListener("click", (e) => {
e.stopPropagation();
setOpen(pop.hidden === true);
});
const outside = (e: MouseEvent): void => {
if (!wrap.isConnected) document.removeEventListener("click", outside);
else if (!wrap.contains(e.target as Node)) setOpen(false);
};
document.addEventListener("click", outside);
wrap.addEventListener("keydown", (e) => e.key === "Escape" && setOpen(false));
wrap.append(trigger, pop);
return wrap;
}
export interface Column {
label: string;
/** 칸 너비(CSS) — 없으면 나눠 가짐 */
width?: string;
align?: "end";
}
/** 표 껍데기 — 머리 + 빈 tbody (줄은 호출 쪽이 채움 · 펼침 줄 같은 것을 끼우려고 떼어 둠) */
export function tableShell(columns: Column[]): { root: HTMLElement; tbody: HTMLElement } {
const table = node("table", "b01-pg-table");
const head = node("thead", "");
const hr = node("tr", "");
for (const col of columns) {
const th = node("th", col.align ? "is-end" : "", col.label);
if (col.width) th.style.width = col.width;
hr.append(th);
}
head.append(hr);
const tbody = node("tbody", "");
table.append(head, tbody);
const root = node("div", "b01-pg-card b01-pg-scroll");
root.append(table);
return { root, tbody };
}
/** 한 줄 — 칸 수는 columns 와 같게 · label "" 인 칸 = ⋯ 칸 */
export function tableRow(columns: Column[], cells: Cell[]): HTMLElement {
const tr = node("tr", "");
cells.forEach((cell, i) => {
const col = columns[i];
const td = node("td", col?.align ? "is-end" : col?.label === "" ? "b01-pg-menucell" : "");
td.append(cell);
tr.append(td);
});
return tr;
}
/** 표 — 줄 높이 40 · 세로선 없음 · 마지막 칸 = ⋯ (columns 에 label "" 로) */
export function dataTable(columns: Column[], rows: Cell[][]): HTMLElement {
const { root, tbody } = tableShell(columns);
tbody.append(...rows.map((cells) => tableRow(columns, cells)));
return root;
}
// 부품(552-3) — 표 · 줄 끝 ⋯ · 설정 줄 = ui_template 부품 · 부름 꼴 그대로
export { createRowMenu as rowMenu, type RowMenuItem } from "@ui/ui_template_context_menu";
export {
createTable as dataTable,
tableRow,
tableShell,
type Cell,
type Column,
} from "@ui/ui_template_table";
export { settingCard, settingRow, valueText } from "@ui/ui_template_setting_row";
export interface EmptyOptions {
icon: IconName | KitIconName;
@@ -235,22 +144,6 @@ export function tabBar(
};
}
/** 설정 카드 한 줄(Linear 꼴) — 제목 · 설명 왼쪽 · 값 · 조작 오른쪽 */
export function settingRow(title: string, desc: string, right: Node): HTMLElement {
const row = node("div", "b01-pg-row");
const left = node("div", "b01-pg-row__text");
left.append(node("strong", "", title));
if (desc) left.append(node("span", "b01-pg-row__desc", desc));
const side = node("div", "b01-pg-row__side");
side.append(right);
row.append(left, side);
return row;
}
/** 값 글 — 없으면 「-」 */
export const valueText = (v: string | number | null | undefined): HTMLElement =>
node("span", "b01-pg-row__value", v === null || v === undefined || v === "" ? "-" : String(v));
/** 줄 첫 칸 — 이름 + (작은 글) 보조 */
export function nameCell(name: string, sub?: string | null): HTMLElement {
const cell = node("div", "b01-pg-name");
@@ -258,10 +151,3 @@ export function nameCell(name: string, sub?: string | null): HTMLElement {
if (sub) cell.append(node("span", "b01-pg-name__sub", sub));
return cell;
}
/** 카드 묶음 — 설정 줄을 둥근 상자 한 개에 */
export function settingCard(rows: HTMLElement[]): HTMLElement {
const card = node("div", "b01-pg-card b01-pg-settings");
card.append(...rows);
return card;
}
B01_Dashboard/B01_Dashboard_UI_Profile.ts
+2 -1
View File
@@ -31,7 +31,8 @@ function input(value: string, type = "text", label = ""): HTMLInputElement {
/** 입력 줄 아래에 오류 글 — 비우면 지움 */
function fieldError(row: HTMLElement, message?: string): void {
row.querySelector(".b01-sys-error")?.remove();
if (message) row.querySelector(".b01-pg-row__text")?.append(el("span", "b01-sys-error", message));
if (message)
row.querySelector(".ui-setting-row__text")?.append(el("span", "b01-sys-error", message));
}
export function buildProfileCard(user: DashboardUser): HTMLElement {
B01_Dashboard/B01_Dashboard_UI_Style_Pages.css
+1 -142
View File
@@ -45,53 +45,6 @@
border: 1px solid var(--b01-line);
border-radius: var(--b01-radius);
}
.b01-pg-scroll {
overflow-x: auto;
}
.b01-pg-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.b01-pg-table th {
height: 36px;
padding: 0 12px;
text-align: left;
font-weight: 600;
font-size: 12px;
color: var(--b01-muted);
border-bottom: 1px solid var(--b01-line);
white-space: nowrap;
}
.b01-pg-table td {
height: 40px;
padding: 0 12px;
border-bottom: 1px solid var(--b01-line);
vertical-align: middle;
}
.b01-pg-table tbody tr:last-child td {
border-bottom: 0;
}
.b01-pg-table tbody tr:hover {
background: var(--b01-hover);
}
.b01-pg-table .is-end {
text-align: right;
}
.b01-pg-table td.b01-pg-menucell {
width: 44px;
padding: 0 8px;
text-align: right;
}
.b01-pg-table tr.is-sub > td {
height: auto;
padding: 0;
background: var(--b01-bg);
}
.b01-pg-table tr.is-sub:hover {
background: var(--b01-bg);
}
/* 이름 칸 */
.b01-pg-name {
display: flex;
@@ -127,60 +80,6 @@
white-space: nowrap;
}
/* 줄 끝 ⋯ */
.b01-pg-menu {
position: relative;
display: inline-block;
}
.b01-pg-menu__btn {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border: 0;
border-radius: 6px;
background: none;
color: var(--b01-muted);
cursor: pointer;
}
.b01-pg-menu__btn:hover,
.b01-pg-menu.is-open .b01-pg-menu__btn {
background: var(--b01-hover);
color: var(--b01-text);
}
.b01-pg-menu__pop {
position: absolute;
right: 0;
top: 30px;
z-index: 20;
min-width: 132px;
padding: 4px;
background: var(--b01-card);
border: 1px solid var(--b01-line);
border-radius: 8px;
box-shadow: 0 6px 18px rgb(0 0 0 / 12%);
text-align: left;
}
.b01-pg-menu__item {
display: block;
width: 100%;
padding: 7px 10px;
border: 0;
border-radius: 6px;
background: none;
color: var(--b01-text);
font: inherit;
text-align: left;
cursor: pointer;
white-space: nowrap;
}
.b01-pg-menu__item:hover {
background: var(--b01-hover);
}
.b01-pg-menu__item.is-danger {
color: var(--b01-alert);
}
/* 탭 */
.b01-pg-tabs {
display: flex;
@@ -222,46 +121,6 @@
display: none;
}
/* 설정 줄(Linear 꼴) */
.b01-pg-settings {
overflow: hidden;
}
.b01-pg-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 52px;
padding: 8px 16px;
border-bottom: 1px solid var(--b01-line);
}
.b01-pg-row:last-child {
border-bottom: 0;
}
.b01-pg-row__text {
display: flex;
flex-direction: column;
min-width: 0;
}
.b01-pg-row__desc {
font-size: 12px;
color: var(--b01-muted);
}
.b01-pg-row__side {
display: flex;
align-items: center;
gap: 8px;
flex: none;
max-width: 55%;
}
.b01-pg-row__side .ui-field__label:empty {
display: none;
}
.b01-pg-row__value {
text-align: right;
overflow-wrap: anywhere;
}
.b01-pg-link {
border: 0;
background: none;
@@ -460,7 +319,7 @@
outline: 2px solid var(--b01-accent);
outline-offset: 0;
}
.b01-pg-row__side .b01-sys-input {
.ui-setting-row__side .b01-sys-input {
width: 240px;
}
.b01-sys-count {
B02_ProjRegister/B02_ProjRegister_UI_Style.css
-17
View File
@@ -19,23 +19,6 @@
gap: var(--spacing-16);
}
/* select는 공통 .ui-input 상속 + 드롭다운 화살표 여백 확보 */
.b02-proj__select {
appearance: none;
cursor: pointer;
background-image:
linear-gradient(45deg, transparent 50%, var(--color-slate) 50%),
linear-gradient(135deg, var(--color-slate) 50%, transparent 50%);
background-position:
calc(100% - 18px) 50%,
calc(100% - 13px) 50%;
background-size:
5px 5px,
5px 5px;
background-repeat: no-repeat;
padding-right: var(--spacing-32);
}
@media (max-width: 640px) {
.b02-proj__grid {
grid-template-columns: 1fr;
B03_FileInput/B03_FileInput_State.ts
+5 -3
View File
@@ -1,3 +1,5 @@
import { createBanner } from "@ui/ui_template_banner";
export type B03AnalysisStatus = "pending" | "in_progress" | "completed" | "failed";
export interface B03StoredFileState {
@@ -78,9 +80,9 @@ export function restoreB03ProjectState(options: {
const state = loadB03ProjectState(options.projectId);
if (!state) return;
options.container.replaceChildren();
const message = document.createElement("span");
message.textContent = `${options.label}: ${state.analysisProgress}%`;
options.container.append(message);
options.container.append(
createBanner({ tone: "info", text: `${options.label}: ${state.analysisProgress}%` }),
);
options.container.classList.add("is-visible");
if (state.analysisStatus === "in_progress" || state.analysisStatus === "pending") {
void options.poll(options.projectId).then((completed) => {
B03_FileInput/B03_FileInput_UI_Page.ts
+68 -57
View File
@@ -5,7 +5,12 @@ import {
UPLOAD_MAX_FILES,
} from "@config/config_frontend";
import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
import { createButton, createTag } from "@ui/ui_template_elements";
import { createBanner } from "@ui/ui_template_banner";
import { createButton, createIconButton, createTag } from "@ui/ui_template_elements";
import { createPanelHead } from "@ui/ui_template_panel_head";
import { createProgressBar, type ProgressBarHandle } from "@ui/ui_template_progress";
import { createText } from "@ui/ui_template_text";
import { createToggle } from "@ui/ui_template_toggle";
import { createGeneralLayout } from "@ui/ui_template_general_layout";
import { createWorkflowOverlays } from "@ui/ui_template_overlay";
import { createStepBar, WORKFLOW_STEP_ICONS } from "@ui/ui_template_workflow_layout";
@@ -63,6 +68,7 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
// 대시보드 임시 보관함에서 가져올 자료 선택기 — 선택되면 [업로드]가 이동을 수행한다.
const tempPicker = createTempPicker(() => updateUploadButton());
const cardMap = new Map<FileSlot, HTMLElement>();
const progressMap = new Map<FileSlot, ProgressBarHandle>();
let uploadButton: HTMLButtonElement;
let resumeBanner: HTMLDivElement;
let activeProjectId = localStorage.getItem(CURRENT_PROJECT_ID_KEY) ?? "";
@@ -75,9 +81,8 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
? localStorage.getItem(`b03_las_free_${activeProjectId}`) === "1"
: false;
const subtitle = document.createElement("p");
subtitle.className = "b03-file__subtitle";
subtitle.textContent = L("B03_File_Subtitle");
const subtitle = createText(L("B03_File_Subtitle"), "muted", 14);
subtitle.classList.add("b03-file__subtitle");
const fileInput = document.createElement("input");
fileInput.type = "file";
@@ -94,7 +99,7 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
dropzone.append(dropzoneLabel, fileInput);
const pageError = document.createElement("p");
pageError.className = "b03-file__error";
pageError.className = "ui-text ui-text--error b03-file__error";
pageError.setAttribute("role", "alert");
// 업로드 버튼 안에서 도는 원 — 공용 스피너를 버튼 크기로 줄여 쓴다.
@@ -200,11 +205,11 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
const fileName = card.querySelector<HTMLSpanElement>(".b03-file__file-name");
const fileSize = card.querySelector<HTMLSpanElement>(".b03-file__file-size");
const progress = card.querySelector<HTMLDivElement>(".b03-file__progress-bar");
const progress = progressMap.get(slot);
const progressBytes = card.querySelector<HTMLSpanElement>(".b03-file__progress-bytes");
const progressSpeed = card.querySelector<HTMLSpanElement>(".b03-file__progress-speed");
const progressEta = card.querySelector<HTMLSpanElement>(".b03-file__progress-eta");
const error = card.querySelector<HTMLDivElement>(".b03-file__error-message");
const error = card.querySelector<HTMLElement>(".b03-file__error-message .ui-banner__text");
const remove = card.querySelector<HTMLButtonElement>(".b03-file__card-remove");
const percent = state.file ? Math.min(100, (state.progressBytes / state.file.size) * 100) : 0;
@@ -217,7 +222,7 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
? `${state.serverUploaded.sizeMb.toFixed(2)} MB`
: "";
}
if (progress) progress.style.width = `${percent}%`;
progress?.set(percent / 100);
if (progressBytes) {
progressBytes.textContent = `${L("B03_File_Progress_Bytes")}: ${formatBytes(
state.progressBytes,
@@ -413,26 +418,27 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
const lock = overview.analysis_lock;
if (lock?.running) {
const who = lock.name ?? lock.email ?? null;
const busy = document.createElement("p");
busy.className = "b03-file__overview-lock";
busy.textContent = who
? `${who} 님이 올린 자료를 분석하는 중입니다 — 끝난 뒤에 새 자료를 올릴 수 있습니다.`
: "다른 자리에서 올린 자료를 분석하는 중입니다 — 끝난 뒤에 새 자료를 올릴 수 있습니다.";
notes.push(busy);
notes.push(
createBanner({
tone: "warning",
text: who
? `${who} 님이 올린 자료를 분석하는 중입니다 — 끝난 뒤에 새 자료를 올릴 수 있습니다.`
: "다른 자리에서 올린 자료를 분석하는 중입니다 — 끝난 뒤에 새 자료를 올릴 수 있습니다.",
}),
);
}
if (overview.required_complete && overview.analysis_complete) {
const complete = document.createElement("p");
complete.className = "b03-file__overview-complete";
complete.textContent = L("B03_File_Overview_Complete");
notes.push(complete);
notes.push(createBanner({ tone: "success", text: L("B03_File_Overview_Complete") }));
}
for (const session of overview.pending_sessions) {
const pending = document.createElement("p");
pending.className = "b03-file__overview-pending";
pending.textContent =
`${session.original_filename} — ${session.progress_percent}% ` +
L("B03_File_Overview_Pending");
notes.push(pending);
notes.push(
createBanner({
tone: "info",
text:
`${session.original_filename} — ${session.progress_percent}% ` +
L("B03_File_Overview_Pending"),
}),
);
}
if (notes.length) {
overviewBanner.append(...notes);
@@ -453,18 +459,30 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
renderExtensionLabel(card, state);
const input = card.querySelector<HTMLInputElement>(".b03-file__slot-input")!;
input.accept = state.extensions.join(",");
const select = card.querySelector<HTMLButtonElement>(".b03-file__card-select")!;
select.textContent = L("B03_File_Card_Select");
const select = createButton({ label: L("B03_File_Card_Select"), variant: "ghost", size: 24 });
select.classList.add("b03-file__card-select");
card.querySelector('[data-slot="select"]')!.replaceWith(select);
select.addEventListener("click", () => input.click());
input.addEventListener("change", () => {
onFileSelected(input.files ? Array.from(input.files) : [], state.slot);
input.value = "";
});
const remove = card.querySelector<HTMLButtonElement>(".b03-file__card-remove")!;
remove.textContent = "×";
remove.title = L("B03_File_Card_Remove");
remove.setAttribute("aria-label", L("B03_File_Card_Remove"));
remove.addEventListener("click", () => removeFile(state.slot));
const remove = createIconButton({
glyph: "×",
title: L("B03_File_Card_Remove"),
variant: "outline",
size: 24,
onClick: () => removeFile(state.slot),
});
remove.classList.add("b03-file__card-remove");
card.querySelector('[data-slot="remove"]')!.replaceWith(remove);
const progress = createProgressBar({ thick: 6 });
progress.root.classList.add("b03-file__progress");
card.querySelector('[data-slot="progress"]')!.replaceWith(progress.root);
progressMap.set(state.slot, progress);
const errorBanner = createBanner({ tone: "danger", text: "" });
errorBanner.classList.add("b03-file__error-message");
card.querySelector('[data-slot="error"]')!.replaceWith(errorBanner);
cardMap.set(state.slot, card);
return card;
}
@@ -478,18 +496,7 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
const group = document.createElement("section");
group.className = "b03-file__group";
if (modifier) group.classList.add(modifier);
if (title) {
const groupTitle = document.createElement("h3");
groupTitle.className = "b03-file__group-title";
groupTitle.textContent = title;
group.append(groupTitle);
}
if (hint) {
const groupHint = document.createElement("p");
groupHint.className = "b03-file__group-hint";
groupHint.textContent = hint;
group.append(groupHint);
}
if (title) group.append(createPanelHead({ title, sub: hint }).root);
const content = document.createElement("div");
content.className = "b03-file__group-content";
for (const slot of groupSlots) {
@@ -560,7 +567,8 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
pickRow.append(dropzone, tempPicker.root, uploadButton);
const uploadControlPanel = document.createElement("div");
uploadControlPanel.className = "b03-file__control-panel";
uploadControlPanel.dataset.pad = "16";
uploadControlPanel.className = "ui-card b03-file__control-panel";
uploadControlPanel.append(subtitle, pickRow, resumeBanner, pageError);
// 자료의 출처가 둘로 갈린다 — 원청이 준 계획노선, 측량이 준 지형(LAS·래스터).
@@ -581,16 +589,17 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
);
// LAS 없는 설계 토글 — 켜면 포인트클라우드 카드를 비활성화하고 필수에서 뺀다.
const lasFreeRow = document.createElement("label");
lasFreeRow.className = "b03-file__lasfree";
const lasFreeToggle = createToggle({
label: L("B03_File_LasFree_Toggle"),
checked: lasFreeDesign,
size: 36,
onChange: onLasFreeChange,
});
const lasFreeRow = lasFreeToggle.root;
lasFreeRow.classList.add("b03-file__lasfree");
lasFreeRow.title = L("B03_File_LasFree_Hint");
const lasFreeCheck = document.createElement("input");
lasFreeCheck.type = "checkbox";
const lasFreeText = document.createElement("span");
lasFreeText.textContent = L("B03_File_LasFree_Toggle");
lasFreeRow.append(lasFreeCheck, lasFreeText);
function applyLasFreeState(): void {
lasFreeCheck.checked = lasFreeDesign;
lasFreeToggle.set(lasFreeDesign);
terrainGroup.classList.toggle("b03-file__group--disabled", lasFreeDesign);
for (const slot of TERRAIN_SLOTS) {
const card = cardMap.get(slot);
@@ -608,8 +617,8 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
if (lasFreeDesign && slots.get(slot)?.file) removeFile(slot);
}
}
lasFreeCheck.addEventListener("change", () => {
lasFreeDesign = lasFreeCheck.checked;
function onLasFreeChange(checked: boolean): void {
lasFreeDesign = checked;
if (activeProjectId) {
localStorage.setItem(`b03_las_free_${activeProjectId}`, lasFreeDesign ? "1" : "0");
}
@@ -619,19 +628,21 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
// 골라 놓고도 [파일 업로드]가 잠긴 채 남는다(2026-09-03 실측: 파일을 먼저 고르고
// 토글을 나중에 켠 순서에서 재현).
updateUploadButton();
});
}
// LAS 토글은 **파일 입력 컨테이너**의 것이다(2026-09-03 사용자 지시) — 무엇을 받을지
// 정하는 스위치라 고르는 자리 옆에 선다. 켜면 지형 컨테이너가 통째로 잠긴다.
uploadControlPanel.insertBefore(lasFreeRow, resumeBanner);
const routePanel = document.createElement("div");
routePanel.className = "b03-file__control-panel b03-file__cards-container-panel";
routePanel.dataset.pad = "16";
routePanel.className = "ui-card b03-file__control-panel b03-file__cards-container-panel";
routePanel.append(routeGroup);
mountPlanImport(routePanel, uploadControlPanel, () => void applyUploadOverview());
const terrainPanel = document.createElement("div");
terrainPanel.className = "b03-file__control-panel b03-file__cards-container-panel";
terrainPanel.dataset.pad = "16";
terrainPanel.className = "ui-card b03-file__control-panel b03-file__cards-container-panel";
terrainPanel.append(terrainGroup);
const cardsContainer = document.createElement("div");
B03_FileInput/B03_FileInput_UI_Page_Flow.ts
+10 -3
View File
@@ -8,6 +8,7 @@
* ========================================================================== */
import { CURRENT_PROJECT_ID_KEY, type RoutePath } from "@config/config_frontend";
import { createBanner } from "@ui/ui_template_banner";
import { createButton, showToast } from "@ui/ui_template_elements";
import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
import { navigateTo } from "../A00_Common/router";
@@ -81,16 +82,16 @@ export function createUploadFlow(ctx: UploadFlowContext): UploadFlowHandle {
state.uploadSessionId = session.uploadSessionId;
state.progressBytes = session.completedChunks * session.chunkSizeBytes;
ctx.renderSlot(state.slot);
const text = document.createElement("span");
text.textContent = `${L("B03_File_Status_Detected")}: ${session.fileName}`;
const resume = createButton({
label: L("B03_File_Resume_Button"),
variant: "ghost",
size: 24,
onClick: () => void startChunkedUpload([state]),
});
const fresh = createButton({
label: L("B03_File_New_Button"),
variant: "ghost",
size: 24,
onClick: () => {
localStorage.removeItem(session.key);
state.uploadSessionId = undefined;
@@ -100,7 +101,13 @@ export function createUploadFlow(ctx: UploadFlowContext): UploadFlowHandle {
ctx.resumeBanner.classList.remove("is-visible");
},
});
ctx.resumeBanner.append(text, resume, fresh);
ctx.resumeBanner.append(
createBanner({
tone: "info",
text: `${L("B03_File_Status_Detected")}: ${session.fileName}`,
actions: [resume, fresh],
}),
);
ctx.resumeBanner.classList.add("is-visible");
break;
}
B03_FileInput/B03_FileInput_UI_PlanImport.ts
+25 -21
View File
@@ -8,6 +8,7 @@
* ========================================================================== */
import { API_BASE_URL, CURRENT_PROJECT_ID_KEY } from "@config/config_frontend";
import { createBanner } from "@ui/ui_template_banner";
import {
createButton,
el,
@@ -17,6 +18,7 @@ import {
showToast,
} from "@ui/ui_template_elements";
import { t } from "@ui/ui_template_locale";
import { createListRow } from "@ui/ui_template_list_row";
import { openModal } from "@ui/ui_template_modal";
interface AssignedRoute {
@@ -99,7 +101,7 @@ export function mountPlanImport(
const projectId = localStorage.getItem(CURRENT_PROJECT_ID_KEY) ?? "";
if (!projectId) return;
const lasFree = (): boolean => localStorage.getItem(`b03_las_free_${projectId}`) === "1";
const banner = el("div", { className: "b03-file__overview-pending b03-file__plan-update" });
const banner = el("div", { className: "b03-file__plan-update" });
banner.hidden = true;
bannerHost.prepend(banner);
@@ -117,12 +119,17 @@ export function mountPlanImport(
if (!source?.update_available || source.assignee_id === undefined) return;
const assigneeId = source.assignee_id;
banner.replaceChildren(
el("span", { text: `${t("D04_Update_Banner")} (${source.plan_name} ${source.year}) — ` }),
createButton({
label: t("D04_Update_Reimport"),
variant: "ghost",
size: "sm",
onClick: () => void done(assigneeId),
createBanner({
tone: "info",
text: `${t("D04_Update_Banner")} (${source.plan_name} ${source.year})`,
actions: [
createButton({
label: t("D04_Update_Reimport"),
variant: "ghost",
size: 24,
onClick: () => void done(assigneeId),
}),
],
}),
);
}
@@ -149,20 +156,17 @@ export function mountPlanImport(
? ` · ${t("D04_Linked")}: ${route.linked_project_name}`
: "";
body.append(
el("div", {
className: "b03-file__plan-pick",
children: [
el("span", { text: `${route.project_name} · ${route.year}${linked}` }),
createButton({
label: t("D04_Import_Btn"),
variant: "filled",
size: "sm",
onClick: () => {
close();
void done(route.assignee_id);
},
}),
],
createListRow({
label: `${route.project_name} · ${route.year}${linked}`,
trailing: createButton({
label: t("D04_Import_Btn"),
variant: "filled",
size: 24,
onClick: () => {
close();
void done(route.assignee_id);
},
}),
}),
);
}
B03_FileInput/B03_FileInput_UI_Style.css
+26 -140
View File
@@ -1,10 +1,6 @@
.b03-file {
min-height: calc(100dvh - var(--app-header-height, 0px));
background: linear-gradient(
180deg,
var(--color-canvas, #ffffff) 0%,
var(--color-mist-violet, #edecff) 100%
);
background: linear-gradient(180deg, var(--color-canvas) 0%, var(--color-accent-soft) 100%);
padding: 0 var(--spacing-24) var(--spacing-48) var(--spacing-24); /* 상단 여백은 main-layout 마진으로 조정하므로 padding-top은 0 */
}
@@ -27,31 +23,17 @@
display: flex;
flex-direction: column;
gap: var(--spacing-16);
background: var(--color-canvas, #ffffff);
/* 여백 32 → 16 (2026-09-03) — 고르는 자리만 남기고 안내를 좌측 패널로 뺐다.
`--spacing-20`은 테마에 없는 토큰이라 선언째 무효가 된다(패딩이 통째로 사라짐). */
padding: var(--spacing-16);
border-radius: var(--radius-large, 24px); /* Wiza 24px 대형 둥글기 */
border: 1px solid var(--color-mist, #e6e2e3);
box-shadow: var(--shadow-lg);
}
.b03-file__cards-container-panel {
margin-top: 0; /* 단일 layout gap에 의해 제어되도록 설정 */
}
.b03-file__subtitle {
font-size: var(--text-body-sm, 14px);
color: var(--color-slate, #615e6e);
margin: 0 0 var(--spacing-8) 0;
}
.b03-file__native-input,
.b03-file__slot-input {
display: none;
}
/* Wiza 스타일 가이드의 Lavender Glow 그라데이션 및 soft purple border hover */
/* 고르는 자리 한 줄 — [입력 파일 선택] · [임시 보관함] · [파일 업로드](2026-09-03).
좁아지면 아래로 접히되, 선택 영역이 남는 폭을 먹는다. */
/* 셋을 같은 폭·같은 높이로 나눈다 — 열 1:1:1(2026-09-03 사용자 지시).
@@ -80,9 +62,9 @@
패널로 갔으므로 여기는 「끌어 놓거나 눌러서 고르는 자리」 표시만 한다. */
.b03-file__dropzone {
padding: var(--spacing-12) var(--spacing-16);
border: 1px dashed var(--color-mist, #e6e2e3);
border-radius: var(--radius-cards, 8px);
background: var(--color-paper, #f6f7fa);
border: 1px dashed var(--color-border);
border-radius: var(--radius-cards);
background: var(--color-surface);
display: flex;
flex-direction: row;
flex-wrap: wrap;
@@ -92,100 +74,54 @@
cursor: pointer;
text-align: center;
transition:
background var(--transition-base, 0.2s),
border-color var(--transition-base, 0.2s),
box-shadow var(--transition-base, 0.2s);
background var(--transition-base),
border-color var(--transition-base),
box-shadow var(--transition-base);
}
.b03-file__dropzone:hover {
background: var(--color-mist-violet, #edecff);
border-color: var(--color-royal-amethyst, #3e0079);
background: var(--color-accent-soft);
border-color: var(--color-accent);
}
.b03-file__dropzone:focus-visible,
.b03-file__dropzone.is-dragging {
outline: none;
background: var(--color-mist-violet, #edecff);
border-color: var(--color-royal-amethyst, #3e0079);
box-shadow: 0 0 0 4px rgba(62, 0, 121, 0.15);
background: var(--color-accent-soft);
border-color: var(--color-accent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 15%, transparent);
}
.b03-file__dropzone strong {
color: var(--color-deep-iris, #26114a);
font-size: var(--text-body-sm, 14px);
font-weight: var(--font-weight-medium, 500);
color: var(--color-text);
font-size: var(--text-body-sm);
font-weight: var(--font-weight-medium);
}
.b03-file__dropzone span {
font-size: var(--text-body-sm, 14px);
color: var(--color-slate, #615e6e);
}
/* 빈 오류 줄이 자리를 잡고 있으면 토글 아래가 통째로 비어 보인다 — 글자가 있을 때만
자리를 차지한다(2026-09-03 사용자 지시). */
.b03-file__error {
color: var(--color-danger, #dc2626);
font-size: var(--text-body-sm, 14px);
margin: 0;
font-size: var(--text-body-sm);
color: var(--color-text-secondary);
}
/* 빈 오류 줄이 자리를 잡고 있으면 토글 아래가 통째로 비어 보인다 — 글자가 있을 때만 자리를 차지한다. */
.b03-file__error:empty {
display: none;
}
.b03-file__resume {
display: none;
align-items: center;
gap: var(--spacing-8);
flex-wrap: wrap;
padding: var(--spacing-12) var(--spacing-16);
border: 1px solid var(--color-mist, #e6e2e3);
border-radius: var(--radius-cards, 8px);
background: var(--color-paper, #f6f7fa);
color: var(--color-deep-iris, #26114a);
font-size: var(--text-body-sm, 14px);
margin-top: var(--spacing-8);
}
.b03-file__resume.is-visible {
display: flex;
}
/* 재접속 현황(서버 정본) 배너 — 완료 안내와 중단 세션 이어올리기 안내를 담는다. */
/* 띠 알림(부품)을 담는 자리 — 글이 있을 때(is-visible)만 선다. */
.b03-file__resume,
.b03-file__overview {
display: none;
flex-direction: column;
gap: var(--spacing-4);
margin-top: var(--spacing-8);
padding: var(--spacing-12) var(--spacing-16);
border: 1px solid var(--color-border);
border-radius: var(--radius-cards, 8px);
background: var(--color-surface);
font-size: var(--text-body-sm, 14px);
}
.b03-file__resume.is-visible,
.b03-file__overview.is-visible {
display: flex;
}
.b03-file__overview-complete {
margin: 0;
color: var(--color-success, #3fbb6f);
font-weight: 600;
}
.b03-file__overview-pending {
margin: 0;
color: var(--color-text-secondary);
}
/* 잠금 표시 — 지금 누가 올리는 중인지. 막힌 까닭이라 눈에 띄게 둔다. */
.b03-file__overview-lock {
margin: 0;
color: var(--color-warning, #d98324);
font-weight: 600;
}
/* 완료 슬롯 재업로드 확인 모달 — 페이지 위를 덮는 단순 확인창. */
.b03-file__modal-backdrop {
position: fixed;
@@ -194,7 +130,7 @@
display: flex;
align-items: center;
justify-content: center;
background: rgb(0 0 0 / 45%);
background: var(--color-scrim);
}
.b03-file__modal {
@@ -204,9 +140,9 @@
max-width: 420px;
padding: var(--spacing-24);
border: 1px solid var(--color-border);
border-radius: var(--radius-cards, 8px);
border-radius: var(--radius-cards);
background: var(--color-surface-raised);
box-shadow: 0 12px 32px rgb(0 0 0 / 30%);
box-shadow: var(--shadow-lg);
}
.b03-file__modal p {
@@ -221,12 +157,6 @@
justify-content: flex-end;
}
.b03-file__cards-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-32);
}
/* 계획노선 | 지형(LAS) — 컨테이너를 둘로 나눈다(2026-08-31 사용자 지시).
노선은 카드 5장(shapefile 한 벌), 지형은 4장이라 폭을 5:4 비슷하게 준다.
@@ -241,39 +171,9 @@
align-items: start;
}
/* LAS 없이 설계 토글 — 파일 입력 컨테이너의 스위치(2026-09-03 사용자 지시).
B04 좌측 패널의 체크 줄(`b04-surface__check`)과 같은 서식이다. */
/* LAS 없이 설계 — 켜기 부품(스위치) · 자리만 정함 */
.b03-file__lasfree {
display: flex;
align-items: center;
gap: var(--spacing-8);
align-self: flex-start;
padding: var(--spacing-8) var(--spacing-12);
border: 1px solid var(--color-mist, #e6e2e3);
border-radius: var(--radius-buttons, 8px);
font-size: var(--text-body-sm, 14px);
color: var(--color-deep-iris, #26114a);
cursor: pointer;
transition: border-color var(--transition-base, 0.2s);
}
.b03-file__lasfree:hover {
border-color: var(--color-royal-amethyst, #3e0079);
}
.b03-file__lasfree input {
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--color-royal-amethyst, #3e0079);
cursor: pointer;
}
/* 켜져 있으면 스위치 자신도 켜진 티를 낸다 — 지형 컨테이너가 왜 잠겼는지의 근거. */
.b03-file__lasfree:has(input:checked) {
border-color: var(--color-royal-amethyst, #3e0079);
background: var(--color-mist-violet, #edecff);
font-weight: var(--font-weight-medium, 500);
}
/* LAS 없이 설계를 켜면 지형 컨테이너는 받지 않는다 — 잠긴 것이 보이게 흐린다. */
@@ -282,7 +182,7 @@
}
.b03-file__card--disabled {
background: var(--color-paper, #f6f7fa);
background: var(--color-surface);
border-style: dashed;
}
@@ -324,20 +224,6 @@
gap: var(--spacing-12);
}
.b03-file__group-hint {
font-size: var(--text-body-sm, 14px);
color: var(--color-slate, #615e6e);
margin: calc(var(--spacing-8) * -1) 0 0 0;
}
/* 제목 24px → 본문 크기(2026-09-03) — 컨테이너가 둘뿐이라 큰 제목이 자리만 먹었다. */
.b03-file__group-title {
font-size: var(--text-body, 16px);
color: var(--color-deep-iris, #26114a);
font-family: var(--font-britti-sans, inherit);
margin: 0;
}
/* 카드가 좁아지면 한 줄에 제목·상태·[선택]이 못 들어가 제목이 글자 단위로 접힌다
(2026-09-03 실측: 안내 패널을 연 상태에서 카드 폭 210px). 폭이 모자라면 열을 줄인다. */
/* ⚠ `minmax(260px, …)` 는 **칸이 260px 보다 좁아질 수 없다**는 뜻이라, 컨테이너가
B03_FileInput/B03_FileInput_UI_Style_Card.css
+42 -116
View File
@@ -14,50 +14,34 @@
width: 14px;
height: 14px;
border-width: 2px;
border-color: rgb(255 255 255 / 40%);
border-color: color-mix(in srgb, var(--color-primary-text) 40%, transparent);
border-top-color: var(--color-primary-text);
}
/* Wiza 8px radius 카드 */
/* 카드 한 장 = 파일 한 칸. 빈 칸은 **한 줄**로 끝난다(2026-09-03 사용자 지시) —
파일이 붙거나 올라가는 중에만 아래 내용(파일명·진행바)이 펼쳐진다. */
/* 카드 한 장 = 파일 한 칸(카드 부품) · 빈 칸은 **한 줄**로 끝난다(2026-09-03 사용자 지시) —
파일이 붙거나 올라가는 중에만 아래 내용(파일명·진행바)이 펼쳐진다. 상태는 선 색으로 가른다. */
.b03-file__card {
padding: var(--spacing-12) var(--spacing-16);
border: 1px solid var(--color-mist, #e6e2e3);
border-radius: var(--radius-cards, 8px);
background: var(--color-canvas, #ffffff);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: var(--spacing-8);
transition:
transform var(--transition-base, 0.2s),
border-color var(--transition-base, 0.2s),
box-shadow var(--transition-base, 0.2s);
}
.b03-file__card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
border-color: var(--color-royal-amethyst, #3e0079);
}
.b03-file__card--selected {
border-color: var(--color-royal-amethyst, #3e0079);
background: var(--color-paper, #f6f7fa);
border-color: var(--color-accent);
background: var(--color-surface);
}
.b03-file__card--uploading {
border-color: var(--color-royal-amethyst, #3e0079);
box-shadow: var(--shadow-lg-2);
border-color: var(--color-accent);
box-shadow: var(--shadow-lg);
}
.b03-file__card--completed {
border-color: #10b981; /* Success Green */
border-color: var(--color-success);
}
.b03-file__card--error {
border-color: var(--color-danger, #dc2626);
border-color: var(--color-danger);
}
/* 카드가 좁아졌다(컨테이너 2열 × 카드 2열, 2026-08-31). 격자로 고정하면 제목이
@@ -83,13 +67,13 @@
flex: 0 0 auto;
width: 28px;
height: 28px;
border-radius: var(--radius-icons, 8px);
border-radius: var(--radius-icons);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-royal-amethyst, #3e0079);
background: var(--color-mist-violet, #edecff);
font-size: var(--text-body-sm, 14px);
color: var(--color-accent);
background: var(--color-accent-soft);
font-size: var(--text-body-sm);
margin-right: var(--spacing-8); /* 아이콘 우측 마진 추가 (아이콘 좌측 여유 확대 효과) */
}
@@ -102,9 +86,9 @@
}
.b03-file__card-label {
color: var(--color-deep-iris, #26114a);
font-size: var(--text-body-sm, 14px);
font-weight: var(--font-weight-medium, 500);
color: var(--color-text);
font-size: var(--text-body-sm);
font-weight: var(--font-weight-medium);
/* 제목은 한 줄로 두고 모자라면 말줄임 — 접히면 카드가 세로로 길어진다(2026-09-03). */
white-space: nowrap;
overflow: hidden;
@@ -114,8 +98,8 @@
.b03-file__card-ext,
.b03-file__file-size,
.b03-file__progress-info {
color: var(--color-slate, #615e6e);
font-size: var(--text-caption, 12px);
color: var(--color-text-secondary);
font-size: var(--text-caption);
}
.b03-file__card-badge-container {
@@ -125,28 +109,9 @@
margin-right: var(--spacing-4);
}
.b03-file__card-remove {
width: 24px;
height: 24px;
border: 1px solid var(--color-mist, #e6e2e3);
border-radius: var(--radius-buttons, 8px);
color: var(--color-slate, #615e6e);
background: var(--color-canvas, #ffffff);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-body-sm, 14px);
line-height: 1;
padding: 0;
margin-left: var(--spacing-8); /* 취소 버튼 좌측 여유 추가 (취소 버튼 우측 여유 확보) */
transition: all var(--transition-base, 0.2s);
}
.b03-file__card-remove:hover {
color: var(--color-danger, #dc2626);
border-color: var(--color-danger, #dc2626);
background: #fef2f2;
/* 파일 없는 칸에서는 지움 단추를 접는다(아이콘 단추 부품은 hidden 보다 display 가 앞섬) */
.b03-file__card-remove[hidden] {
display: none;
}
.b03-file__card-content {
@@ -160,24 +125,6 @@
display: none;
}
/* [선택]은 제목 줄 오른쪽 끝의 작은 버튼 — 종전 전폭 40px 버튼이 카드 높이를 키웠다. */
.b03-file__card-select {
flex: 0 0 auto;
min-height: 26px;
padding: 0 var(--spacing-8);
border: 1px solid var(--color-mist, #e6e2e3);
border-radius: var(--radius-buttons, 8px);
color: var(--color-deep-iris, #26114a);
background: var(--color-canvas, #ffffff);
font-weight: var(--font-weight-medium, 500);
font-size: var(--text-caption, 12px);
white-space: nowrap;
cursor: pointer;
transition:
background var(--transition-base, 0.2s),
border-color var(--transition-base, 0.2s);
}
.b03-file__file-info {
display: flex;
flex-direction: column;
@@ -186,9 +133,9 @@
}
.b03-file__file-name {
color: var(--color-deep-iris, #26114a);
font-size: var(--text-body-sm, 14px);
font-weight: var(--font-weight-medium, 500);
color: var(--color-text);
font-size: var(--text-body-sm);
font-weight: var(--font-weight-medium);
overflow-wrap: anywhere;
}
@@ -204,36 +151,15 @@
display: flex;
}
.b03-file__progress-bar-container {
width: 100%;
height: 6px;
overflow: hidden;
border-radius: var(--radius-pills, 1440px);
background: var(--color-mist, #e6e2e3);
}
.b03-file__progress-bar {
width: 0;
height: 100%;
border-radius: var(--radius-pills, 1440px);
background: var(--color-royal-amethyst, #3e0079);
transition: width var(--transition-base, 0.2s);
}
.b03-file__progress-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.b03-file__error-message {
/* 오류 띠(띠 알림 부품)는 오류 난 카드에서만 보인다 */
.b03-file__card .b03-file__error-message {
display: none;
padding: var(--spacing-8) var(--spacing-12);
border-radius: var(--radius-cards, 8px);
color: var(--color-danger, #dc2626);
background: #fef2f2;
font-size: var(--text-caption, 12px);
border: 1px solid rgba(220, 38, 38, 0.15);
}
.b03-file__card--empty .b03-file__file-info,
@@ -260,9 +186,9 @@
width: 100%;
height: 120px;
overflow: hidden;
border: 1px solid var(--color-border, #dcdce6);
border-radius: var(--radius-cards, 8px);
background: var(--color-surface, #fff);
border: 1px solid var(--color-border);
border-radius: var(--radius-cards);
background: var(--color-surface);
}
.b03-file__preview svg {
@@ -274,7 +200,7 @@
/* 라이다 탑뷰 점 그림 — 점이 5천 개라 선 하나로 묶어 그린다. */
.b03-file__preview-cloud {
fill: none;
stroke: var(--color-text-muted, #5a5a72);
stroke: var(--color-text-muted);
stroke-linecap: round;
stroke-opacity: 0.55;
stroke-width: 0.7;
@@ -286,7 +212,7 @@
.b03-file__preview-thumb {
max-width: 100%;
max-height: 100%;
border: 1px dashed var(--color-border, #9aa);
border: 1px dashed var(--color-border);
image-rendering: pixelated;
object-fit: contain;
}
@@ -302,24 +228,24 @@
}
.b03-file__preview-fact {
color: var(--color-text, #1c1c28);
color: var(--color-text);
font-size: var(--text-body, 15px);
font-weight: 600;
}
.b03-file__preview-fact-sub {
color: var(--color-text-muted, #5a5a72);
font-size: var(--text-caption, 12px);
color: var(--color-text-muted);
font-size: var(--text-caption);
}
.b03-file__preview-empty {
color: var(--color-text-muted, #8a8aa0);
font-size: var(--text-caption, 12px);
color: var(--color-text-muted);
font-size: var(--text-caption);
}
.b03-file__preview-extent {
fill: color-mix(in srgb, var(--color-border, #9aa) 12%, transparent);
stroke: var(--color-border, #9aa);
fill: color-mix(in srgb, var(--color-border) 12%, transparent);
stroke: var(--color-border);
stroke-dasharray: 4 3;
stroke-width: 1;
}
@@ -328,7 +254,7 @@
fill: none;
/* 계획노선 선 색 — 녹색(2026-09-04 사용자 지시). 지형 범위를 벗어나면 아래에서
붉은색으로 덮어써 경고로 쓴다. */
stroke: var(--color-success, #16a34a);
stroke: var(--color-success);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.5;
@@ -336,11 +262,11 @@
/* 계획노선이 지형 자료 범위를 벗어난 경우 — 눈으로 바로 잡히게 경고색. */
.b03-file__preview.is-warning .b03-file__preview-route {
stroke: var(--color-danger, #d33);
stroke: var(--color-danger);
}
.b03-file__preview.is-warning .b03-file__preview-extent {
stroke: var(--color-danger, #d33);
stroke: var(--color-danger);
stroke-dasharray: 3 2;
}
@@ -355,7 +281,7 @@
}
.b03-file__card--error .b03-file__error-message {
display: block;
display: flex;
}
.b03-file__card--error .b03-file__progress-section {
B03_FileInput/B03_FileInput_UI_Style_Temp.css
+1 -1
View File
@@ -68,7 +68,7 @@
.b03-file__temp-option.is-selected {
border-color: var(--color-primary);
background: var(--color-mist-violet);
background: var(--color-accent-soft);
}
.b03-file__temp-option-files {
B03_FileInput/B03_FileInput_UI_Support.ts
+5 -7
View File
@@ -227,7 +227,7 @@ export function createFileCardTemplate(): HTMLTemplateElement {
const template = document.createElement("template");
template.id = "file-card-template";
template.innerHTML = `
<article class="b03-file__card b03-file__card--empty">
<article class="ui-card b03-file__card b03-file__card--empty" data-pad="12">
<div class="b03-file__card-header">
<span class="b03-file__card-icon" aria-hidden="true"></span>
<div class="b03-file__card-heading">
@@ -235,8 +235,8 @@ export function createFileCardTemplate(): HTMLTemplateElement {
<span class="b03-file__card-ext"></span>
</div>
<div class="b03-file__card-badge-container"></div>
<button class="b03-file__card-select" type="button"></button>
<button class="b03-file__card-remove" type="button"></button>
<span data-slot="select"></span>
<span data-slot="remove"></span>
</div>
<div class="b03-file__card-content">
<input class="b03-file__slot-input" type="file" />
@@ -246,16 +246,14 @@ export function createFileCardTemplate(): HTMLTemplateElement {
</div>
<div class="b03-file__preview"></div>
<div class="b03-file__progress-section">
<div class="b03-file__progress-bar-container">
<div class="b03-file__progress-bar"></div>
</div>
<span data-slot="progress"></span>
<div class="b03-file__progress-info">
<span class="b03-file__progress-bytes"></span>
<span class="b03-file__progress-speed"></span>
<span class="b03-file__progress-eta"></span>
</div>
</div>
<div class="b03-file__error-message" role="alert"></div>
<span data-slot="error"></span>
</div>
</article>
`;
B10_Payment/B10_Payment_UI_Page.ts
+5 -5
View File
@@ -1,4 +1,6 @@
import { createButton, createTag } from "@ui/ui_template_elements";
import { createBadge } from "@ui/ui_template_badge";
import { createBanner } from "@ui/ui_template_banner";
import { createButton } from "@ui/ui_template_elements";
import { section, table, text } from "@ui/ui_template_general_blocks";
import { createGeneralLayout } from "@ui/ui_template_general_layout";
import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
@@ -13,15 +15,13 @@ export function renderB10Payment(root: HTMLElement): void {
invoiceBody.className = "b10-payment__summary";
const invoiceDescription = document.createElement("p");
invoiceDescription.textContent = L("B10_Payment_Invoice_Description");
invoiceBody.append(invoiceDescription, createTag(L("B10_Payment_Invoice_Status"), "neutral"));
invoiceBody.append(invoiceDescription, createBadge(L("B10_Payment_Invoice_Status"), "neutral"));
const invoiceSection = section(L("B10_Payment_Invoice_Title"), invoiceBody, true, [
createButton({ label: L("B10_Payment_Invoice_Request"), disabled: true }),
]);
const depositNote = document.createElement("p");
depositNote.className = "b10-payment__note";
depositNote.textContent = L("B10_Payment_Deposit_Note");
const depositNote = createBanner({ tone: "info", text: L("B10_Payment_Deposit_Note") });
const depositBody = document.createElement("div");
depositBody.className = "b10-payment__summary";
depositBody.append(
B10_Payment/B10_Payment_UI_Style.css
-8
View File
@@ -4,11 +4,3 @@
gap: var(--spacing-16);
color: var(--color-text-body);
}
.b10-payment__note {
padding: var(--spacing-16);
border-radius: var(--radius-cards);
background: var(--color-surface);
color: var(--color-text-secondary);
font-size: var(--text-body-sm);
}
B11_Status/B11_Status_UI_Page.ts
+10 -5
View File
@@ -1,4 +1,5 @@
import { createButton, createTag } from "@ui/ui_template_elements";
import { createBadge } from "@ui/ui_template_badge";
import { createButton, createCard } from "@ui/ui_template_elements";
import { section } from "@ui/ui_template_general_blocks";
import { createGeneralLayout } from "@ui/ui_template_general_layout";
import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
@@ -9,8 +10,9 @@ function L(key: keyof typeof ui_locales): string {
}
function buildStatusFlow(): HTMLElement {
const flow = document.createElement("ol");
const flow = document.createElement("div");
flow.className = "b11-status__flow";
flow.setAttribute("role", "list");
const steps = [
L("B11_Status_Step_Request"),
L("B11_Status_Step_Issue"),
@@ -18,11 +20,14 @@ function buildStatusFlow(): HTMLElement {
L("B11_Status_Step_Complete"),
];
for (const label of steps) {
const item = document.createElement("li");
item.className = "b11-status__step";
const title = document.createElement("strong");
title.textContent = label;
item.append(title, createTag(L("B11_Status_NotStarted"), "neutral"));
const item = createCard({
body: [title, createBadge(L("B11_Status_NotStarted"), "neutral")],
pad: 16,
});
item.classList.add("b11-status__step");
item.setAttribute("role", "listitem");
flow.append(item);
}
return flow;
B11_Status/B11_Status_UI_Style.css
+1 -11
View File
@@ -2,20 +2,10 @@
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--spacing-16);
margin: 0;
padding: 0;
list-style: none;
}
.b11-status__step {
display: flex;
flex-direction: column;
.b11-status__step > .ui-card__body {
gap: var(--spacing-12, var(--spacing-8));
padding: var(--spacing-16);
border: 1px solid var(--color-border);
border-radius: var(--radius-cards);
background: var(--color-surface);
color: var(--color-text-body);
}
.b11-status__download {
D01_PlanRegister/D01_PlanRegister_UI_Page.ts
+2 -2
View File
@@ -17,6 +17,7 @@ import {
} from "@ui/ui_template_elements";
import { createGeneralLayout } from "@ui/ui_template_general_layout";
import { createHelpButton } from "@ui/ui_template_help";
import { createText } from "@ui/ui_template_text";
import { t } from "@ui/ui_template_locale";
import { stationLabel } from "../common_util/common_util_station";
import { createGroupProject } from "../A00_Common/group_workflow";
@@ -70,8 +71,7 @@ export function renderD01PlanRegister(root: HTMLElement): void {
const endM = createInputField({ label: t("DE_Reg_EndM"), type: "number", min: 0 });
// 누가거리 칸 옆 즉시 측점 표기(저장값 · 서버 검사는 m 그대로)
for (const field of [startM, endM]) {
const shown = document.createElement("span");
shown.style.cssText = "font-size:12px;color:var(--color-text-muted)";
const shown = createText("", "muted");
shown.dataset.station = "";
field.root.insertBefore(shown, field.root.lastElementChild);
field.input.addEventListener("input", () => {
D02_PlanBase/D02_PlanBase_UI_Page.ts
+16 -12
View File
@@ -11,12 +11,14 @@ import "./D02_PlanBase_UI_Style.css";
import { API_BASE_URL, CURRENT_PROJECT_ID_KEY, ROUTES } from "@config/config_frontend";
import {
createButton,
createInputField,
el,
hideLoadingOverlay,
showLoadingOverlay,
showToast,
} from "@ui/ui_template_elements";
import { createPanelCard } from "@ui/ui_template_collapsible";
import { createText } from "@ui/ui_template_text";
import { editMap, type MapPin } from "@ui/ui_template_kakao_map";
import { t } from "@ui/ui_template_locale";
import { mountGroupStep } from "../A00_Common/group_workflow";
@@ -66,9 +68,11 @@ export async function renderD02PlanBase(root: HTMLElement): Promise<void> {
const projectId = localStorage.getItem(CURRENT_PROJECT_ID_KEY) ?? "";
const mapHost = el("div", { className: "d02-map" });
const table = el("div", { className: "d02-points" });
const info = el("p", { className: "d02-info" });
const info = createText("", "muted");
info.classList.add("d02-info");
const card = createPanelCard(t("D02_Points_Title"), false);
const pointsHint = el("p", { className: "d02-info", text: t("D02_Points_Hint") });
const pointsHint = createText(t("D02_Points_Hint"), "muted");
pointsHint.classList.add("d02-info");
card.append(pointsHint, table, info);
const save = createButton({
label: t("D02_Save"),
@@ -139,12 +143,11 @@ export async function renderD02PlanBase(root: HTMLElement): Promise<void> {
function drawTable(): void {
const rows = points.map((p, i) => {
const lon = el("input", { className: "d02-points__input" }) as HTMLInputElement;
const lat = el("input", { className: "d02-points__input" }) as HTMLInputElement;
lon.type = lat.type = "number";
const lon = createInputField({ type: "number", placeholder: t("D02_Lon"), size: 24 }).input;
const lat = createInputField({ type: "number", placeholder: t("D02_Lat"), size: 24 }).input;
lon.classList.add("d02-points__input");
lat.classList.add("d02-points__input");
lon.step = lat.step = "any";
lon.placeholder = t("D02_Lon");
lat.placeholder = t("D02_Lat");
lon.value = p ? String(p.lon) : "";
lat.value = p ? String(p.lat) : "";
lon.disabled = lat.disabled = !editable;
@@ -154,8 +157,11 @@ export async function renderD02PlanBase(root: HTMLElement): Promise<void> {
const typed = (): void => {
const at = { lon: Number.parseFloat(lon.value), lat: Number.parseFloat(lat.value) };
const ok = at.lon >= 120 && at.lon <= 135 && at.lat >= 30 && at.lat <= 45;
lon.classList.toggle("is-invalid", !ok);
lat.classList.toggle("is-invalid", !ok);
for (const box of [lon, lat]) {
box.classList.toggle("is-error", !ok);
if (ok) box.removeAttribute("aria-invalid");
else box.setAttribute("aria-invalid", "true");
}
if (ok) place(i, at);
};
lon.addEventListener("change", typed);
@@ -254,8 +260,6 @@ export async function renderD02PlanBase(root: HTMLElement): Promise<void> {
active = firstEmpty();
paint();
} catch (error) {
table.replaceChildren(
el("p", { className: "d02-info", text: error instanceof Error ? error.message : "" }),
);
table.replaceChildren(createText(error instanceof Error ? error.message : "", "muted"));
}
}
D02_PlanBase/D02_PlanBase_UI_Style.css
-12
View File
@@ -35,17 +35,5 @@
}
.d02-points__input {
width: 100%;
min-width: 0;
font-size: var(--text-caption);
}
.d02-points__input.is-invalid {
outline: 1px solid var(--color-danger, #d92d20);
}
.d02-info {
margin: 0;
color: var(--color-text-secondary);
font-size: var(--text-caption);
}
D03_PlanAnalysis/D03_PlanAnalysis_UI_3D.ts
+13 -9
View File
@@ -7,6 +7,8 @@
* ========================================================================== */
import "../B05_Profile/B05_Profile_UI_Style.css";
import { createCheckbox } from "@ui/ui_template_checkbox";
import { createSelectField } from "@ui/ui_template_input";
import { openModal } from "@ui/ui_template_modal";
import { createProgressCircle } from "@ui/ui_template_progress";
import { showToast } from "@ui/ui_template_elements";
@@ -51,17 +53,19 @@ function gridBounds(grid: DtmGrid): {
export function openPlan3d(projectId: string, years: Plan3dYear[], firstYear: number): void {
if (!years.length) return void showToast("3D 로 볼 연도 노선이 없습니다.", "warning");
let viewer: RouteViewer | null = createRouteViewer();
const pick = document.createElement("select");
pick.className = "d03-plan__3d-year";
for (const item of years)
pick.append(new Option(`${item.year}년`, String(item.year), false, item.year === firstYear));
const corridorBox = document.createElement("label");
corridorBox.className = "d03-plan__3d-corridor";
const corridorOn = Object.assign(document.createElement("input"), {
type: "checkbox",
const pick = createSelectField({
options: years.map((item) => ({ value: String(item.year), text: `${item.year}년` })),
value: String(firstYear),
size: 28,
ariaLabel: "연도",
}).select;
pick.classList.add("d03-plan__3d-year");
const corridor = createCheckbox(" 예상 코리도(표준 횡단 기본값 · 계획고 = 지반고)", {
checked: true,
});
corridorBox.append(corridorOn, " 예상 코리도(표준 횡단 기본값 · 계획고 = 지반고)");
const corridorBox = corridor.root;
corridorBox.classList.add("d03-plan__3d-corridor");
const corridorOn = corridor.input;
corridorOn.addEventListener("change", () => viewer?.setCorridorVisible(corridorOn.checked));
const top = document.createElement("div");
top.className = "d03-plan__3d-top";
D03_PlanAnalysis/D03_PlanAnalysis_UI_Cross.ts
+2 -1
View File
@@ -8,6 +8,7 @@
import "../B05_Profile/B05_Profile_UI_Style_RouteEdit.css";
import { CURRENT_PROJECT_ID_KEY } from "@config/config_frontend";
import { createWorkflowPanelHandle } from "@ui/ui_template_overlay";
import { createText } from "@ui/ui_template_text";
import { stationLabel } from "../common_util/common_util_station";
import type { DtmGrid } from "../common_util/common_util_surface_sampler";
import { buildCrossSvg } from "../B05_Profile/B05_Profile_UI_RouteEdit_Cross_Draw";
@@ -63,7 +64,7 @@ export function createPlanCross(): PlanCross {
const clear = (text: string): void => {
head.textContent = "";
body.replaceChildren(Object.assign(document.createElement("p"), { textContent: text }));
body.replaceChildren(createText(text, "muted", 14));
delete root.dataset.chainage;
};
clear("평면에서 측점을 누르면 그 자리 지반선 · 예상 횡단이 보입니다.");
D03_PlanAnalysis/D03_PlanAnalysis_UI_Page.ts
+35 -30
View File
@@ -15,7 +15,10 @@
import "./D03_PlanAnalysis_UI_Style.css";
import { CURRENT_PROJECT_ID_KEY, ROUTES } from "@config/config_frontend";
import { createCard } from "@ui/ui_template_card";
import { attachCollapsible, createPanelCard } from "@ui/ui_template_collapsible";
import { createProgressBar } from "@ui/ui_template_progress";
import { createText } from "@ui/ui_template_text";
import {
createButton,
hideLoadingOverlay,
@@ -118,12 +121,10 @@ export async function renderD03PlanAnalysis(root: HTMLElement): Promise<void> {
main.className = "d03-plan";
main.append(map.root, cross.root);
const terrainText = document.createElement("p");
terrainText.className = "d03-plan__hint";
const bar = document.createElement("progress");
bar.className = "d03-plan__bar";
bar.max = 100;
bar.hidden = true;
const terrainText = createText("", "muted");
terrainText.classList.add("d03-plan__hint");
const bar = createProgressBar();
bar.root.hidden = true;
const more = createButton({
label: "범위 밖 — 더 받기",
variant: "filled",
@@ -145,7 +146,7 @@ export async function renderD03PlanAnalysis(root: HTMLElement): Promise<void> {
actions.className = "ui-sidebar-actions";
actions.append(analyzeButton, saveButton, viewButton, undoButton);
const terrainCard = createPanelCard("지형", false);
terrainCard.append(terrainText, bar, more);
terrainCard.append(terrainText, bar.root, more);
const routeCard = createPanelCard("연도별 노선", false);
routeCard.append(yearList);
const panel = document.createElement("div");
@@ -334,29 +335,33 @@ export async function renderD03PlanAnalysis(root: HTMLElement): Promise<void> {
for (const mode of PLAN_MODES) {
const route = result.routes[mode];
if (!route) continue;
const card = document.createElement("button");
card.type = "button";
card.className = "d03-plan__mode" + (row.mode === mode ? " is-picked" : "");
card.dataset.mode = mode;
const metrics = route.metrics;
const values = createText(
!metrics
? "노선 없음"
: metrics.max_grade_pct === undefined
? `연장 ${metrics.length_m.toFixed(1)} m · 기울기 · 위반 = 저장 때 셈`
: `연장 ${metrics.length_m.toFixed(1)} m · 최대 ${metrics.max_grade_pct.toFixed(1)} % · 위반 ${metrics.over_limit?.total ?? 0}`,
"muted",
);
const card = createCard({
title: MODE_LABEL[mode],
body: [values],
pad: 12,
selected: row.mode === mode,
onSelect: () => {
if (row.mode === mode) return;
remember();
choices = { ...choices, [result.year]: mode };
keepDraft();
refresh();
},
});
card.classList.add("d03-plan__mode");
card.classList.toggle("is-picked", row.mode === mode);
card.dataset.mode = mode;
card.disabled = !!route.error || !metrics;
card.title = route.error ?? "";
const name = document.createElement("strong");
name.textContent = MODE_LABEL[mode];
const values = document.createElement("span");
values.textContent = !metrics
? "노선 없음"
: metrics.max_grade_pct === undefined
? `연장 ${metrics.length_m.toFixed(1)} m · 기울기 · 위반 = 저장 때 셈`
: `연장 ${metrics.length_m.toFixed(1)} m · 최대 ${metrics.max_grade_pct.toFixed(1)} % · 위반 ${metrics.over_limit?.total ?? 0}`;
card.append(name, values);
card.addEventListener("click", () => {
if (row.mode === mode) return;
remember();
choices = { ...choices, [result.year]: mode };
keepDraft();
refresh();
});
box.append(card);
}
return box;
@@ -526,13 +531,13 @@ export async function renderD03PlanAnalysis(root: HTMLElement): Promise<void> {
/** 뒤에서 도는 일을 끝날 때까지 지켜봄 — 진행은 지형 칸에. */
async function watch(kind: "terrain" | "analyze"): Promise<PlanJob | null> {
busy = kind;
bar.hidden = false;
bar.root.hidden = false;
refresh();
try {
for (;;) {
if (!root.isConnected) return null;
const job = (await fetchPlanProgress(projectId))[kind];
bar.value = job.percent;
bar.set(job.percent / 100);
terrainText.textContent = `${kind === "terrain" ? "지형 받기" : "분석"} ${job.percent}% · ${job.message ?? ""}`;
if (!job.running) {
if (job.error) showToast(job.error, "error");
@@ -546,7 +551,7 @@ export async function renderD03PlanAnalysis(root: HTMLElement): Promise<void> {
return null;
} finally {
busy = null;
bar.hidden = true;
bar.root.hidden = true;
refresh();
}
}
D03_PlanAnalysis/D03_PlanAnalysis_UI_Style.css
+2 -36
View File
@@ -63,17 +63,10 @@
.d03-plan__cross-body p {
margin: 12px 0;
color: var(--color-text-secondary);
}
.d03-plan__hint {
margin: 0 0 6px;
font-size: 0.85rem;
color: var(--color-text-secondary);
}
.d03-plan__bar {
width: 100%;
}
.d03-plan__years {
@@ -93,37 +86,10 @@
font-size: 0.85rem;
}
.d03-plan__mode {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 6px 8px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
font-size: 0.8rem;
text-align: left;
cursor: pointer;
}
.d03-plan__mode.is-picked {
border-color: var(--color-primary);
box-shadow: inset 0 0 0 1px var(--color-primary);
}
.d03-plan__mode:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.d03-plan__mode span {
color: var(--color-text-secondary);
}
.d03-plan__3d-top {
display: flex;
gap: var(--spacing-8);
align-items: center;
justify-content: flex-end;
margin-bottom: 6px;
}
D04_PlanConfirm/D04_PlanConfirm_UI_Page.ts
+16 -14
View File
@@ -14,6 +14,7 @@ import { API_BASE_URL, CURRENT_PROJECT_ID_KEY, ROUTES } from "@config/config_fro
import { kstText } from "../common_util/common_util_time_kst";
import {
createButton,
createInputField,
createTag,
el,
hideLoadingOverlay,
@@ -21,6 +22,8 @@ import {
showLoadingOverlay,
showToast,
} from "@ui/ui_template_elements";
import { createBanner } from "@ui/ui_template_banner";
import { createCheckbox } from "@ui/ui_template_checkbox";
import { createPanelCard } from "@ui/ui_template_collapsible";
import { t } from "@ui/ui_template_locale";
import { stationLabel } from "../common_util/common_util_station";
@@ -146,14 +149,11 @@ export async function renderD04PlanConfirm(root: HTMLElement): Promise<void> {
const listId = `d04-companies-${year}`;
const options = el("datalist", { attrs: { id: listId } });
const found = new Map<string, number>();
const firm = el("input", {
className: "d04-confirm__input",
attrs: { list: listId, placeholder: t("D04_Company") },
});
const mail = el("input", {
className: "d04-confirm__input",
attrs: { type: "email", placeholder: t("D04_Email") },
});
const firm = createInputField({ placeholder: t("D04_Company"), size: 28 }).input;
firm.setAttribute("list", listId);
const mail = createInputField({ type: "email", placeholder: t("D04_Email"), size: 28 }).input;
firm.classList.add("d04-confirm__input");
mail.classList.add("d04-confirm__input");
firm.addEventListener("input", () => {
const query = firm.value.trim();
if (!query) return;
@@ -245,18 +245,20 @@ export async function renderD04PlanConfirm(root: HTMLElement): Promise<void> {
className: "d04-confirm__table",
children: [el("thead", { children: [head] }), el("tbody", { children: rows })],
});
const notes = draft()
? [el("p", { className: "d04-confirm__dirty", text: t("D04_Dirty") })]
: [];
const notes = draft() ? [createBanner({ tone: "warning", text: t("D04_Dirty") })] : [];
notes[0]?.classList.add("d04-confirm__dirty");
main.replaceChildren(el("h2", { text: summary.name }), ...notes, table);
pickList.replaceChildren(
...summary.years
.filter((row) => row.saved)
.map((row) => {
const box = el("input", { attrs: { type: "checkbox", value: String(row.year) } });
box.checked = !row.confirmed_at;
return el("label", { className: "d04-confirm__pick", children: [box, ` ${row.year}`] });
const pick = createCheckbox(String(row.year), {
checked: !row.confirmed_at,
value: String(row.year),
});
pick.root.classList.add("d04-confirm__pick");
return pick.root;
}),
);
}
D04_PlanConfirm/D04_PlanConfirm_UI_Style.css
-9
View File
@@ -44,15 +44,6 @@
.d04-confirm__input {
min-width: 10rem;
padding: var(--spacing-4) var(--spacing-8);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-canvas);
color: var(--color-text-body);
}
.d04-confirm__dirty {
color: var(--color-warning, var(--color-text-secondary));
}
.d04-confirm__picks {
resources/tester/helper_130_b07_plan_manage.cjs
+1
View File
@@ -236,6 +236,7 @@ const { loadTs } = makeLoader({
openDrawing: (item) => API.fetchDesignDrawing("p1", item.id),
syncDrawings: (_, list) => calls.push(["sync", list.length]),
};
if (request.endsWith(".css")) return {}; // 부품 CSS(552-3) — 트랜스파일 안 함
if (request.startsWith(".")) return loadTs(path.join(path.dirname(full), `${request}.ts`));
throw new Error(`stub 없음: ${request}`);
},
resources/tester/helper_153_b07_cross_layout.cjs
+1
View File
@@ -94,6 +94,7 @@ const { loadTs } = makeLoader({
currentLanguageIndex: 0,
ui_locales: new Proxy({}, { get: (_, key) => [String(key)] }),
};
if (request.endsWith(".css")) return {}; // 부품 CSS(552-3) — 트랜스파일 안 함
if (request.startsWith(".")) {
const target = path.join(path.dirname(full), `${request}.ts`);
return fs.existsSync(target) ? loadTs(target) : {};
resources/tester/helper_280_5_b07_settings.cjs
+1
View File
@@ -206,6 +206,7 @@ const { loadTs } = makeLoader({
if (STUBS[request]) return STUBS[request];
if (request === "@ui/ui_template_collapsible")
return loadTs(path.join(UI, "ui_template_collapsible.ts"));
if (request.endsWith(".css")) return {}; // 부품 CSS(552-3) — 트랜스파일 안 함
if (request.startsWith(".")) {
const target = path.join(path.dirname(full), `${request}.ts`);
return fs.existsSync(target) ? loadTs(target) : {};
resources/tester/helper_311_panel_folded.cjs
+1
View File
@@ -140,6 +140,7 @@ const { loadTs } = makeLoader({
if (request === "@ui/ui_template_collapsible")
return loadTs(path.join(ROOT, "ui_template", "ui_template_collapsible.ts"));
if (request.endsWith(".css")) return {};
if (request.endsWith(".css")) return {}; // 부품 CSS(552-3) — 트랜스파일 안 함
if (request.startsWith(".")) return loadTs(`${path.resolve(path.dirname(full), request)}.ts`);
return require(request);
},
resources/tester/test_290_1_project_purge.py
+4 -2
View File
@@ -60,5 +60,7 @@ def test_빈_초안은_고침_아님_취향은_둠(out):
def test_공용_이동_한_곳에서_부름():
nav = (ROOT / "A00_Common/b_workflow_nav.ts").read_text(encoding="utf-8")
assert "return enterProject(" in nav and "./b_project_switch" in nav
ui = (ROOT / "ui_template/ui_template_elements.ts").read_text(encoding="utf-8")
assert 'cancelLabel = "취소"' in ui and "label: cancelLabel" in ui
ui = (ROOT / "ui_template/ui_template_modal.ts").read_text(
encoding="utf-8"
) # 확인창 = 부품(552-3)
assert 'cancelLabel = "취소"' in ui and "okLabel: confirmLabel, cancelLabel" in ui
resources/tester/test_505_2_save_pick.py
+2 -2
View File
@@ -82,8 +82,8 @@ def test_1_가림막_저장도_도중_고침_검사() -> None:
assert "const touched = !route && designSignature(ctx.projectId) !== sent;" in save
assert "if (touched && locked)" in save and "저장 중 고친 값은 아직 저장 안 됨" in save
assert "!locked && designSignature" not in save
elements = _read("ui_template/ui_template_elements.ts")
assert "keydown" not in elements[elements.index("function ensureOverlay") :][:1200]
toast = _read("ui_template/ui_template_toast.ts") # 가림막 = 부품 「알림」(552-3)
assert "keydown" not in toast[toast.index("function ensureOverlay") :][:1200]
def test_8_저장_중_초기화_막음() -> None:
resources/tester/test_552_3_banner.py
+1 -1
View File
@@ -22,4 +22,4 @@ def test_banner():
assert 'tone === "success" ? "✓ "' in ts # 색만으로 안 가름
for tone in ("warning", "danger", "success"):
assert f".ui-banner--{tone}" in css
assert '"aria-label": "닫기"' in ts
assert 'createIconButton({ icon: "x", title: "닫기", size: 20 })' in ts # 단추 부품(552-2)
resources/tester/test_552_3_drop.py
+20
View File
@@ -0,0 +1,20 @@
"""552-3 부품 「파일 놓기 칸」 지킴 시험 — 끌어 옴(.is-over) · 고르기 단추(단추 부품 28) · 진행 · 오류 · 막힘."""
from test_552_3_card import _text, check_part
def test_drop():
check_part(
"drop",
"ui_template_drop.ts",
["ui_template_drop.css"],
["createDrop"],
["ui-drop", "ui-drop__text", "ui-drop__hint", "ui-drop__error", "is-over"],
)
ts, css = _text("ui_template_drop.ts"), _text("ui_template_drop.css")
assert 'label: "파일 고르기"' in ts and "size: 28" in ts
assert 'input.value = ""' in ts # 같은 파일 다시 고름
assert "createProgressBar({ thick: 6 })" in ts
assert '.ui-drop:is(.is-over, [data-state="hover"])' in css
assert '.ui-drop:is(.is-error, [data-state="error"])' in css
assert "min-height: 48px" in css
resources/tester/test_552_3_modal.py
+32
View File
@@ -0,0 +1,32 @@
"""552-3 부품 「모달 · 확인창」 지킴 시험 — 폭 단 · 확인 · 위험 확인 · 글 묻기(prompt 대신) · 옛 부름 꼴 · 가림막 색."""
from test_552_3_card import _text, check_part
def test_modal():
check_part(
"modal",
"ui_template_modal.ts",
["ui_template_modal.css"],
["openModal", "buildModal", "confirmPanel", "askConfirm", "askText", "showConfirmDialog"],
[
"ui-modal",
"ui-modal__top",
"ui-modal__body",
"ui-modal--wide",
"ui-confirm",
"ui-confirm__input",
],
)
ts, css = _text("ui_template_modal.ts"), _text("ui_template_modal.css")
assert 'width?: "24rem" | "40rem" | "960px"' in ts
for w in ("24rem", "40rem", "960px"):
assert f'.ui-modal[data-width="{w}"]' in css
assert 'variant: opts.danger ? "danger" : "filled"' in ts
assert "r.ok ? r.text : null" in ts # 취소 = null(prompt 와 같음)
assert "background-color: var(--color-scrim);" in css and "rgba(" not in css
elements = _text("ui_template_elements.ts")
assert (
'export { askConfirm, askText, showConfirmDialog } from "./ui_template_modal";' in elements
)
assert "export function showConfirmDialog" not in elements # 한 벌
resources/tester/test_552_3_row_menu.py
+25
View File
@@ -0,0 +1,25 @@
"""552-3 부품 「⋯ · 오른쪽 메뉴」 지킴 시험 — 아이콘 단추 28 · 위험 = 확인창 · 한 번에 하나 장부 · 대시보드 rowMenu 가 부품을 씀."""
from test_552_3_card import ROOT, _text
def test_row_menu():
ts = _text("ui_template_context_menu.ts")
head = ts[ts.index("부품 「⋯ · 오른쪽 메뉴」") :].split("*/", 1)[0]
for word in ("꼴", "크기", "상태", "쓰는 법", "대신하는"):
assert word in head, word
assert "export function createRowMenu" in ts
assert 'createIconButton({ icon: "dots", title: "더 보기", size: 28 })' in ts
assert "if (open) enterMenu(entry);" in ts and "showConfirmDialog(" in ts
css = _text("ui_template_context_menu.css")
mine = css[css.index("(552-3)") :]
assert "rgb" not in mine and "#" not in mine and "--b01-" not in mine
assert '.ui-row-menu__item:is(:hover, [data-state="hover"]):not(:disabled)' in mine
assert ".ui-row-menu__item.is-danger" in mine and ".ui-row-menu__item:disabled" in mine
kit = (ROOT / "B01_Dashboard" / "B01_Dashboard_UI_PageKit.ts").read_text(encoding="utf-8")
assert "createRowMenu as rowMenu, type RowMenuItem" in kit
from test_552_3_card import kit_line
line = kit_line("row-menu")
assert 'file: "ui_template_context_menu.ts"' in line and "demo:" in line
assert "legacy: true" not in line
resources/tester/test_552_3_setting_row.py
+22
View File
@@ -0,0 +1,22 @@
"""552-3 부품 「설정 줄」 지킴 시험 — 줄 52 · 오른쪽 55 % · 빈 값 「-」 · 대시보드 settingRow 가 부품을 씀."""
from test_552_3_card import ROOT, _text, check_part
def test_setting_row():
check_part(
"setting-row",
"ui_template_setting_row.ts",
["ui_template_setting_row.css"],
["settingRow", "settingCard"],
["ui-setting-row", "ui-setting-row__text", "ui-setting-row__side", "ui-setting-card"],
)
css = _text("ui_template_setting_row.css")
assert "min-height: 52px" in css and "max-width: 55%" in css
b01 = ROOT / "B01_Dashboard"
kit = (b01 / "B01_Dashboard_UI_PageKit.ts").read_text(encoding="utf-8")
assert (
'export { settingCard, settingRow, valueText } from "@ui/ui_template_setting_row";' in kit
)
profile = (b01 / "B01_Dashboard_UI_Profile.ts").read_text(encoding="utf-8")
assert ".ui-setting-row__text" in profile and ".b01-pg-row" not in profile
resources/tester/test_552_3_table.py
+23
View File
@@ -0,0 +1,23 @@
"""552-3 부품 「표」 지킴 시험 — 일반 40 · 데이터 28 · ⋯ 칸 · 빈 줄 · 줄 상태 · 대시보드 dataTable 이 부품을 씀."""
from test_552_3_card import ROOT, _text, check_part
def test_table():
check_part(
"table",
"ui_template_table.ts",
["ui_template_table.css"],
["createTable", "tableShell", "tableRow", "emptyRow"],
["ui-table", "ui-table--data", "ui-table-wrap", "ui-table__menucell", "ui-table__empty"],
)
css = _text("ui_template_table.css")
assert "height: 40px" in css and "height: 28px" in css
for state in (".is-active", ".is-changed", ".is-removed", "tr.is-sub"):
assert state in css, state
kit = (ROOT / "B01_Dashboard" / "B01_Dashboard_UI_PageKit.ts").read_text(encoding="utf-8")
assert "createTable as dataTable," in kit # 한 벌 · 부름 꼴 그대로
pages = (ROOT / "B01_Dashboard" / "B01_Dashboard_UI_Style_Pages.css").read_text(
encoding="utf-8"
)
assert ".b01-pg-table" not in pages
resources/tester/test_553_1_pages.py
+59
View File
@@ -0,0 +1,59 @@
"""553-1 B02 · B03 · B04 · B07 페이지 부품 옮김 지킴 시험 — 자체 변종이 부품으로 바뀐 자리 · 가이드 촬영 선택자 · 날 색 없음."""
import json
import re
from pathlib import Path
ROOT = Path(__file__).resolve().parents[2]
OLD_ALIAS = re.compile(r"--color-(royal-amethyst|deep-iris|mist-violet|plum-velvet|lavender-wash)")
RAW_COLOR = re.compile(r"#[0-9a-fA-F]{3,8}\b|\brgba?\(")
def _src(folder: str, suffix: str) -> dict[str, str]:
return {p.name: p.read_text(encoding="utf-8") for p in (ROOT / folder).glob(f"*{suffix}")}
def _guide_selectors(page: str, prefix: str) -> set[str]:
text = (ROOT / f"A05_EduDetail/guide/{page}/_scenes.json").read_text(encoding="utf-8")
return set(re.findall(rf"\.{re.escape(prefix)}[a-z0-9_-]+", text))
def _defined(folder: str, name: str) -> bool:
body = "".join(_src(folder, ".ts").values()) + "".join(_src(folder, ".css").values())
return name.lstrip(".") in body
def test_b03_guide_selectors_alive():
"""가이드 촬영 장면이 잡는 B03 클래스는 소스에 살아 있어야 함."""
for sel in _guide_selectors("B03", "b03-file__"):
assert _defined("B03_FileInput", sel), f"가이드 선택자 {sel} 가 B03 소스에 없음"
def test_b03_uses_parts():
ts = "".join(_src("B03_FileInput", ".ts").values())
for part in (
"createBanner",
"createProgressBar",
"createToggle",
"createPanelHead",
"createIconButton",
"createText",
):
assert part in ts, f"B03 이 부품 {part} 를 안 씀"
support = _src("B03_FileInput", ".ts")["B03_FileInput_UI_Support.ts"]
assert "<button" not in support # 날 단추 없음 — 단추는 부품이 만듦
assert 'class="ui-card b03-file__card' in support # 파일 카드 = 카드 부품
def test_b03_css_common_values_only():
for name, css in _src("B03_FileInput", ".css").items():
assert not OLD_ALIAS.search(css), f"{name}: 옛 보라 별칭"
body = re.sub(r"/\*.*?\*/", "", css, flags=re.S)
assert not RAW_COLOR.search(body), f"{name}: 날 색"
def test_b02_no_dead_select_and_no_raw_widgets():
css = "".join(_src("B02_ProjRegister", ".css").values())
assert "b02-proj__select" not in css # 안 쓰던 고르기 화살표 CSS — 고르기 부품이 냄
ts = "".join(_src("B02_ProjRegister", ".ts").values())
assert "<button" not in ts and 'createElement("button")' not in ts
resources/tester/test_553_4_de_parts.py
+59
View File
@@ -0,0 +1,59 @@
"""553-4 예정노선(D01~D04) · 안정성평가(E01~E07) 부품 옮김 지킴 시험 — 서버 · 화면 없이 소스만 본다.
옮긴 페이지는 날 `<input>` · `<progress>` · 날 색 · 안 쓰는 변종 CSS 가 다시 생기면 안 됨."""
import re
from pathlib import Path
ROOT = Path(__file__).resolve().parents[2]
def _src(path: str) -> str:
return (ROOT / path).read_text(encoding="utf-8")
def _no_hex(path: str) -> None:
css = re.sub(r"/\*.*?\*/", "", _src(path), flags=re.S)
assert not re.search(r"#[0-9a-fA-F]{3,8}\b", css), f"{path}: 날 색"
def test_d01_station_label_is_text_part():
ts = _src("D01_PlanRegister/D01_PlanRegister_UI_Page.ts")
assert "style.cssText" not in ts
assert 'createText("", "muted")' in ts
assert 'dataset.station = ""' in ts # 시험 · 촬영이 잡음
def test_d02_parts():
ts = _src("D02_PlanBase/D02_PlanBase_UI_Page.ts")
css = _src("D02_PlanBase/D02_PlanBase_UI_Style.css")
assert 'el("input"' not in ts
assert 'createInputField({ type: "number"' in ts
assert 'classList.add("d02-info")' in ts # 촬영 장면이 `p.d02-info` 로 잡음
for dead in (".d02-info", "is-invalid", "font-size: var(--text-caption);\n}\n\n.d02-info"):
assert dead not in css
assert "data-axis" in ts or "dataset.axis" in ts
def test_d03_parts():
ts = _src("D03_PlanAnalysis/D03_PlanAnalysis_UI_Page.ts")
three = _src("D03_PlanAnalysis/D03_PlanAnalysis_UI_3D.ts")
css = _src("D03_PlanAnalysis/D03_PlanAnalysis_UI_Style.css")
assert 'createElement("progress")' not in ts and "createProgressBar()" in ts
assert "createCard({" in ts and "onSelect:" in ts
assert 'classList.toggle("is-picked"' in ts # 촬영 장면이 `.d03-plan__mode.is-picked` 로 잡음
assert "card.dataset.mode = mode" in ts
assert 'createElement("select")' not in three and "createSelectField" in three
assert 'createElement("input")' not in three and "createCheckbox" in three
for dead in (".d03-plan__bar", ".d03-plan__mode", "is-picked"):
assert dead not in css, dead
def test_d04_parts():
ts = _src("D04_PlanConfirm/D04_PlanConfirm_UI_Page.ts")
css = _src("D04_PlanConfirm/D04_PlanConfirm_UI_Style.css")
assert 'el("input"' not in ts
assert ts.count("createInputField(") == 2 and "createCheckbox(" in ts
assert 'createBanner({ tone: "warning"' in ts
assert "input:checked" in ts # [확정] 이 고른 연도를 읽는 길
assert "border:" not in css.split(".d04-confirm__input")[1].split("}")[0]
assert ".d04-confirm__dirty" not in css
resources/tester/test_553_7_public_pages.py
+117
View File
@@ -0,0 +1,117 @@
"""553-7 공개 화면(A01~A09) · 로그인 · B10 · B11 부품 옮김 지킴 시험 — 서버 · 화면 없이 소스로.
· A01~A05 = 공개 화면 틀(createPublicFrame) 한 벌 — 페이지마다 hero · section 복제 CSS 없음
· 카드 = createCard · 알림 = createBanner · 배지 = createBadge · 여러 줄 = createInputField(multiline)
· 페이지 CSS 에 날 색(#hex · rgb · 옛 보라 이름) 없음 · 죽은 A07_Register_UI_Page 없음
"""
from __future__ import annotations
import re
from pathlib import Path
import pytest
ROOT = Path(__file__).resolve().parents[2]
PUBLIC_PAGES = {
"A01_Home/A01_Home_UI_Page.ts": ("A01_Home/A01_Home_UI_Style.css", "a01"),
"A02_ProgDetail/A02_ProgDetail_UI_Page.ts": (
"A02_ProgDetail/A02_ProgDetail_UI_Style.css",
"a02",
),
"A03_CompDetail/A03_CompDetail_UI_Page.ts": (
"A03_CompDetail/A03_CompDetail_UI_Style.css",
"a03",
),
"A04_NewsHistory/A04_NewsHistory_UI_Page.ts": (
"A04_NewsHistory/A04_NewsHistory_UI_Style.css",
"a04",
),
"A05_EduDetail/A05_EduDetail_UI_Page.ts": ("A05_EduDetail/A05_EduDetail_UI_Style.css", "a05"),
}
CARD_PAGES = [
"A06_Login/A06_Login_UI_Auth_Page.ts",
"A07_Register/A07_Register_UI_Auth_Page.ts",
"A08_Support/A08_Support_UI_Page.ts",
"A09_Security/A09_Security_UI_Page.ts",
]
CSS_FILES = [css for css, _ in PUBLIC_PAGES.values()] + [
"A06_Login/A06_Login_UI_Style.css",
"A07_Register/A07_Register_UI_Style.css",
"A08_Support/A08_Support_UI_Style.css",
"A09_Security/A09_Security_UI_Style.css",
"B10_Payment/B10_Payment_UI_Style.css",
"B11_Status/B11_Status_UI_Style.css",
]
RAW_COLOR = re.compile(
r"#[0-9a-fA-F]{3,8}\b|rgba?\(|hsla?\(|var\(--(?:b01|draw)-|"
r"var\(--color-(?:deep-iris|mist-violet|slate|charcoal|ash|plum-velvet)\)"
)
def _text(rel: str) -> str:
return (ROOT / rel).read_text(encoding="utf-8")
def _no_comments(css: str) -> str:
return re.sub(r"/\*.*?\*/", "", css, flags=re.S)
@pytest.mark.parametrize("page", PUBLIC_PAGES)
def test_public_page_uses_frame(page: str) -> None:
src = _text(page)
assert "createPublicFrame" in src
for tag in ("hero", "__inner", "__subtitle", "__ctas"):
assert tag not in src, f"{page}: 손 hero 조각 {tag} 남음"
@pytest.mark.parametrize("page", PUBLIC_PAGES)
def test_public_css_has_no_hero_copy(page: str) -> None:
css = _no_comments(_text(PUBLIC_PAGES[page][0]))
prefix = PUBLIC_PAGES[page][1]
assert f".{prefix}-hero" not in css
assert f".{prefix}-section" not in css
@pytest.mark.parametrize("page", CARD_PAGES)
def test_card_pages_use_card_part(page: str) -> None:
assert "createCard" in _text(page)
@pytest.mark.parametrize("css", CSS_FILES)
def test_page_css_no_raw_color(css: str) -> None:
assert not RAW_COLOR.search(_no_comments(_text(css)))
def test_a07_agreement_uses_checkbox_and_collapsible() -> None:
src = _text("A07_Register/A07_Register_UI_Auth_Page.ts")
assert "createCheckbox" in src and "attachCollapsible" in src
assert "<details" not in src and 'createElement("details")' not in src
assert 'type = "checkbox"' not in src
def test_a08_uses_banner_and_multiline_input() -> None:
src = _text("A08_Support/A08_Support_UI_Page.ts")
assert "createBanner" in src and "multiline" in src
assert "createTextAreaField" not in src and 'createElement("textarea")' not in src
def test_b10_b11_use_parts() -> None:
b10 = _text("B10_Payment/B10_Payment_UI_Page.ts")
b11 = _text("B11_Status/B11_Status_UI_Page.ts")
assert "createBanner" in b10 and "createBadge" in b10 and "createTag" not in b10
assert "createCard" in b11 and "createBadge" in b11 and "createTag" not in b11
assert ".b10-payment__note" not in _text("B10_Payment/B10_Payment_UI_Style.css")
assert ".b11-status__step {" not in _text("B11_Status/B11_Status_UI_Style.css")
def test_dead_register_page_gone() -> None:
assert not (ROOT / "A07_Register/A07_Register_UI_Page.ts").exists()
def test_public_frame_wide_option() -> None:
ts = _text("ui_template/ui_template_public_layout.ts")
css = _text("ui_template/ui_template_public_layout.css")
assert "wide?: boolean" in ts
assert "[data-wide] .ui-public-frame__title" in css
ui_template/ui_template_banner.css
+3 -15
View File
@@ -14,6 +14,9 @@
font-size: 13px;
line-height: 1.45;
}
.ui-banner[hidden] {
display: none;
}
.ui-banner--warning {
--banner-tone: var(--color-warning);
}
@@ -51,19 +54,4 @@
}
.ui-banner__close {
flex: none;
width: 20px;
height: 20px;
padding: 0;
border: 0;
border-radius: var(--radius-sm);
background: none;
color: var(--color-text-muted);
font: inherit;
font-size: var(--text-caption);
line-height: 20px;
cursor: pointer;
}
.ui-banner__close:is(:hover, [data-state="hover"]) {
background: var(--color-hover);
color: var(--color-text);
}
ui_template/ui_template_banner.ts
+4 -6
View File
@@ -2,7 +2,7 @@
* ui_template_banner.ts
* 부품 「띠 알림」(552-3 · 목록 25) — 화면 안에 머무는 알림 줄(토스트처럼 사라지지 않음).
* 꼴 = 왼쪽 색 띠 + 옅은 바탕 · 갈래 넷(정보 · 경고 · 위험 · 성공 — 성공은 ✓ 같이) · 제목(굵게) · 펼침(`details` → 「자세히」)
* · 안 단추(`actions`) · 닫기(`onClose` → ✕)
* · 안 단추(`actions`) · 닫기(`onClose` → ✕ 아이콘 단추 20)
* 크기 = 글 13 · 줄 최소 32 · 여백 8 / 12
* 상태 = 기본만
* 쓰는 법 = `createBanner({ tone: "warning", text: "저장 안 한 고침이 있음", actions: [createButton(…)] })`
@@ -10,6 +10,7 @@
* · M01 `m01-master__notice` · `m01lab__warn` · M02 `m02-main__notice` · `m02-sod__banner` …(약 20 벌 · 목록 4장)
* ========================================================================== */
import { createIconButton } from "./ui_template_button";
import { el } from "./ui_template_elements_base";
import "./ui_template_banner.css";
@@ -50,11 +51,8 @@ export function createBanner(opts: BannerOptions): HTMLElement {
root.append(el("div", { className: "ui-banner__actions", children: opts.actions }));
if (opts.onClose) {
const onClose = opts.onClose;
const close = el("button", {
className: "ui-banner__close",
text: "✕",
attrs: { type: "button", title: "닫기", "aria-label": "닫기" },
});
const close = createIconButton({ icon: "x", title: "닫기", size: 20 });
close.classList.add("ui-banner__close");
close.addEventListener("click", () => {
root.remove();
onClose();
ui_template/ui_template_context_menu.css
+54
View File
@@ -62,3 +62,57 @@
margin: var(--spacing-4) 0;
background: var(--color-border);
}
/* ⋯ 줄 끝 메뉴(552-3) — 대시보드 꼴(단추 28 · 판 132 · 항목 줄 32) */
.ui-row-menu {
position: relative;
display: inline-block;
}
.ui-row-menu__btn {
display: grid;
--ui-size-icon: 18px;
}
.ui-row-menu.is-open .ui-row-menu__btn {
background: var(--color-hover);
color: var(--color-text);
}
.ui-row-menu__pop {
position: absolute;
right: 0;
top: 30px;
z-index: var(--z-dropdown);
min-width: 132px;
padding: var(--spacing-4);
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
text-align: left;
}
.ui-row-menu__item {
display: block;
width: 100%;
min-height: 32px;
padding: 7px 10px;
border: 0;
border-radius: 6px;
background: none;
color: var(--color-text);
font: inherit;
text-align: left;
cursor: pointer;
white-space: nowrap;
}
.ui-row-menu__item:is(:hover, [data-state="hover"]):not(:disabled) {
background: var(--color-hover);
}
.ui-row-menu__item:is(:active, [data-state="active"]):not(:disabled) {
background: var(--color-surface-sunken);
}
.ui-row-menu__item:disabled {
color: var(--color-text-muted);
cursor: not-allowed;
}
.ui-row-menu__item.is-danger {
color: var(--color-danger);
}
ui_template/ui_template_context_menu.ts
+73
View File
@@ -11,7 +11,9 @@
* 모양은 공용 CSS 한 벌(`ui_template_context_menu.css` · `.ui-ctx-menu`) — 나무 메뉴와 같음(계획서 39-9b).
* ========================================================================== */
import { createIconButton } from "./ui_template_button";
import "./ui_template_context_menu.css";
import { showConfirmDialog } from "./ui_template_modal";
/** 평면 항목 = [문구, 동작]. 하위 메뉴 항목 = {label, children} — 「글 ▸」 한 줄 · 올리거나 누르면
* 오른쪽 옆 새 판(하위 메뉴 · 화면 오른쪽 끝이면 왼쪽) · → 열기 · ← 닫기(PLAN 246-2).
@@ -223,3 +225,74 @@ export function createMapContextMenu(blockClass: string): MapContextMenu {
contains: (target) => target instanceof Node && element.contains(target),
};
}
/* =============================================================================
* 부품 「⋯ · 오른쪽 메뉴」(552-3 · 목록 20)
* 꼴 = 줄 끝 ⋯(`createRowMenu` · 아이콘 단추 28 → 아래 판) · 오른쪽 누름 메뉴(`createMapContextMenu` · 위 · 하위판 ▸ · 구분선)
* · 위험 항목(`danger` → 빨강 + 확인창 · `ownConfirm` 이면 확인창 없이)
* 크기 = ⋯ 단추 28(아이콘 18) · 항목 줄 32 · 판 최소 폭 132(⋯) / 160(오른쪽 누름)
* 상태 = 기본 · 마우스(항목 바탕) · 눌림(.is-open · 단추 바탕) · 막힘(항목 disabled)
* 쓰는 법 = `createRowMenu([{ label: "열기", onClick: open }, { label: "삭제", danger: true, onClick: drop }])`
* 대신하는 옛 변종 = B01 `rowMenu`(`.b01-pg-menu`) · `.b01-proj-menu__context-menu` · 시트 `.ss-toolbar__popover` · B06 `b06-design__more` · CAD `.cad-ribbon-overflow`
* 한 번에 하나 · 밖 누름 · Esc 로 닫힘 = 위 장부(enterMenu · leaveMenu)를 같이 씀
* ========================================================================== */
export interface RowMenuItem {
label: string;
onClick: () => void;
/** 삭제 · 빼기 = 빨강 + 확인창 */
danger?: boolean;
/** 확인창 글(danger 일 때) */
confirm?: string;
/** 누르면 열리는 모달이 확인을 맡음 — 빨강만 · 확인창 없음 */
ownConfirm?: boolean;
disabled?: boolean;
}
/** 줄 끝 ⋯ — 열면 항목 · 밖을 누르면 닫힘 · danger 는 확인 뒤 실행 */
export function createRowMenu(items: RowMenuItem[]): HTMLElement {
const wrap = document.createElement("div");
wrap.className = "ui-row-menu";
if (!items.length) return wrap;
const trigger = createIconButton({ icon: "dots", title: "더 보기", size: 28 });
trigger.classList.add("ui-row-menu__btn");
trigger.setAttribute("aria-haspopup", "menu");
trigger.setAttribute("aria-expanded", "false");
const pop = document.createElement("div");
pop.className = "ui-row-menu__pop";
pop.setAttribute("role", "menu");
pop.hidden = true;
const entry: MenuEntry = {
close: () => setOpen(false),
contains: (target) => target instanceof Node && wrap.contains(target),
};
function setOpen(open: boolean): void {
pop.hidden = !open;
trigger.setAttribute("aria-expanded", String(open));
wrap.classList.toggle("is-open", open);
if (open) enterMenu(entry);
else leaveMenu(entry);
}
for (const item of items) {
const b = document.createElement("button");
b.type = "button";
b.className = `ui-row-menu__item${item.danger ? " is-danger" : ""}`;
b.textContent = item.label;
b.disabled = !!item.disabled;
b.setAttribute("role", "menuitem");
b.addEventListener("click", () => {
setOpen(false);
if (!item.danger || item.ownConfirm) return item.onClick();
void showConfirmDialog(item.confirm ?? `${item.label} 하시겠습니까?`, item.label).then(
(ok) => ok && item.onClick(),
);
});
pop.append(b);
}
trigger.addEventListener("click", (e) => {
e.stopPropagation();
setOpen(pop.hidden === true);
});
wrap.append(trigger, pop);
return wrap;
}
ui_template/ui_template_drop.css
+52
View File
@@ -0,0 +1,52 @@
/* 파일 놓기 칸(552-3) — 점선 칸 · 끌어 오면 강조 · 오류 빨강 */
.ui-drop {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-8);
min-height: 48px;
padding: var(--spacing-16);
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-cards);
background: var(--color-surface-raised);
color: var(--color-text);
text-align: center;
transition:
border-color var(--transition-fast),
background-color var(--transition-fast);
}
.ui-drop__icon {
color: var(--color-text-muted);
}
.ui-drop__text,
.ui-drop__hint,
.ui-drop__error {
margin: 0;
}
.ui-drop__text {
font-size: var(--text-body-sm);
}
.ui-drop__hint {
font-size: var(--text-caption);
color: var(--color-text-muted);
}
.ui-drop .ui-progress {
align-self: stretch;
}
.ui-drop:is(.is-over, [data-state="hover"]) {
border-color: var(--color-accent);
background: var(--color-accent-soft);
}
.ui-drop:is(.is-over, [data-state="hover"]) .ui-drop__icon {
color: var(--color-accent);
}
.ui-drop[aria-disabled="true"] {
opacity: 0.5;
}
.ui-drop:is(.is-error, [data-state="error"]) {
border-color: var(--color-danger);
}
.ui-drop__error {
font-size: var(--text-caption);
color: var(--color-danger);
}
ui_template/ui_template_drop.ts
+104
View File
@@ -0,0 +1,104 @@
/* =============================================================================
* ui_template_drop.ts
* 부품 「파일 놓기 칸」(552-3 · 목록 34) — 파일을 끌어 놓거나 [파일 고르기]로 고르는 점선 칸.
* 꼴 = 점선 칸(올림 아이콘 · 한 줄 · 고르기 단추 · 받는 꼴 안내) · 진행(`setProgress` → 진행 막대) · 오류(`setError` → 빨간 글)
* 크기 = 칸 최소 48 · 단추 28
* 상태 = 기본 · 마우스(파일을 끌어 옴 = .is-over) · 막힘(`disabled`) · 오류(.is-error)
* 쓰는 법 = `const drop = createDrop({ accept: ".las,.laz", onFiles: (files) => upload(files) }); host.append(drop.root)`
* 대신하는 옛 변종 = B03 `b03-file__dropzone` · CAD `body.cad-file-dragging::after` · 숨은 file + 단추(B01 · B08 · M02 · cad_host · help_edit)
* ========================================================================== */
import { createButton } from "./ui_template_button";
import { el } from "./ui_template_elements_base";
import { icon } from "./ui_template_icons";
import { createProgressBar } from "./ui_template_progress";
import "./ui_template_drop.css";
export interface DropOptions {
onFiles: (files: File[]) => void;
/** input accept 글(`.las,.laz` · `image/*`) */
accept?: string;
multiple?: boolean;
text?: string;
/** 받는 꼴 · 크기 안내 */
hint?: string;
disabled?: boolean;
}
export interface DropHandle {
root: HTMLElement;
/** 진행 막대 — null 이면 숨김 */
setProgress: (ratio: number | null, label?: string) => void;
/** 오류 글 — null 이면 지움 */
setError: (message: string | null) => void;
setDisabled: (on: boolean) => void;
}
export function createDrop(opts: DropOptions): DropHandle {
const input = el("input", { attrs: { type: "file" } });
input.hidden = true;
if (opts.accept) input.accept = opts.accept;
input.multiple = !!opts.multiple;
const pick = createButton({
label: "파일 고르기",
variant: "ghost",
size: 28,
onClick: () => input.click(),
});
const bar = createProgressBar({ thick: 6 });
bar.root.hidden = true;
const error = el("p", { className: "ui-drop__error" });
error.hidden = true;
const root = el("div", {
className: "ui-drop",
children: [
el("span", { className: "ui-drop__icon", children: [icon("upload", 24)] }),
el("p", { className: "ui-drop__text", text: opts.text ?? "파일을 여기에 끌어 놓거나" }),
pick,
input,
],
});
if (opts.hint) root.append(el("p", { className: "ui-drop__hint", text: opts.hint }));
root.append(bar.root, error);
const give = (list: FileList | null | undefined): void => {
const files = [...(list ?? [])];
if (files.length && !pick.disabled) opts.onFiles(opts.multiple ? files : files.slice(0, 1));
};
input.addEventListener("change", () => {
give(input.files);
input.value = ""; // 같은 파일을 다시 골라도 change
});
const over = (on: boolean): boolean => root.classList.toggle("is-over", on && !pick.disabled);
root.addEventListener("dragover", (ev) => {
ev.preventDefault();
over(true);
});
root.addEventListener("dragleave", (ev) => {
if (!root.contains(ev.relatedTarget as Node | null)) over(false);
});
root.addEventListener("drop", (ev) => {
ev.preventDefault();
over(false);
give(ev.dataTransfer?.files);
});
const setDisabled = (on: boolean): void => {
pick.disabled = on;
root.setAttribute("aria-disabled", String(on));
};
setDisabled(!!opts.disabled);
return {
root,
setProgress: (ratio, label) => {
bar.root.hidden = ratio === null;
if (ratio !== null) bar.set(ratio, label);
},
setError: (message) => {
error.hidden = !message;
error.textContent = message ?? "";
root.classList.toggle("is-error", !!message);
},
setDisabled,
};
}
ui_template/ui_template_elements.ts
+2 -38
View File
@@ -10,7 +10,6 @@
* ========================================================================== */
import { el } from "./ui_template_elements_base";
import { createButton } from "./ui_template_button";
// 차트·기본 스타일 조각은 파일이 700줄을 넘어 떼어냈다(2026-09-04).
// 여기서 그대로 다시 내보내 호출부의 import 경로는 불변이다.
@@ -69,43 +68,8 @@ export {
* 확인을 받아 어느 실행 환경에서도 같은 동작을 보장한다.
* -------------------------------------------------------------------------- */
/** 확인/취소 모달 — 확인이면 true. 네이티브 confirm 대신 반드시 이것을 쓴다. */
export function showConfirmDialog(
message: string,
confirmLabel = "확인",
cancelLabel = "취소",
): Promise<boolean> {
return new Promise((resolve) => {
const overlay = el("div", { className: "ui-confirm" });
const panel = el("div", { className: "ui-confirm__panel" });
const text = el("p", { className: "ui-confirm__message", text: message });
const actions = el("div", { className: "ui-confirm__actions" });
const back = document.activeElement as HTMLElement | null; // 닫힐 때 초점을 돌려놓을 자리
const done = (result: boolean): void => {
overlay.remove();
if (back?.isConnected && back !== document.body) back.focus({ preventScroll: true });
resolve(result);
};
const cancel = createButton({
label: cancelLabel,
variant: "ghost",
onClick: () => done(false),
});
actions.append(
cancel,
createButton({ label: confirmLabel, variant: "danger", onClick: () => done(true) }),
);
overlay.addEventListener("keydown", (ev) => {
if (ev.key !== "Escape") return;
ev.stopPropagation(); // 뒤 창 · 페이지 Esc 까지 닫지 않음
done(false);
});
panel.append(text, actions);
overlay.append(panel);
document.body.append(overlay);
cancel.focus(); // 창에 초점 — 뒤 칸에 글이 들어가지 않고 Esc 가 먹음
});
}
// 부품 「모달 · 확인창」(552-3) = ui_template_modal.ts — 부름 꼴 그대로
export { askConfirm, askText, showConfirmDialog } from "./ui_template_modal";
/* -----------------------------------------------------------------------------
* 7. 워크플로우 3단 레이아웃 셸 (frontend.md §2)
ui_template/ui_template_modal.css
+24 -2
View File
@@ -1,11 +1,11 @@
.ui-modal__backdrop {
position: fixed;
inset: 0;
z-index: 1000;
z-index: var(--z-modal);
display: flex;
align-items: flex-start;
justify-content: center;
background-color: rgba(38, 17, 74, 0.35); /* 공용 확인 창(.ui-confirm)과 같이 뒤를 가림 */
background-color: var(--color-scrim); /* 공용 확인 창(.ui-confirm)과 같이 뒤를 가림 */
}
/* 위에서 고정 거리 — 최대 높이일 때 가운데 자리에 윗변을 붙이고 아래로만 늘고 줆(찾기 칸이 안 움직임).
@@ -64,3 +64,25 @@
flex-direction: column;
gap: var(--spacing-8);
}
/* 모달 · 확인창(552-3) — 폭 단 · 확인창 제목 · 글 묻기 칸 */
.ui-modal[data-width="24rem"] {
width: min(24rem, 92vw);
}
.ui-modal[data-width="40rem"] {
width: min(40rem, 92vw);
}
.ui-modal[data-width="960px"] {
width: min(960px, 92vw);
}
.ui-confirm__title {
margin: 0 0 var(--spacing-8);
font-size: var(--text-body);
font-weight: 700;
color: var(--color-text);
}
.ui-confirm__input {
box-sizing: border-box;
width: 100%;
margin-bottom: var(--spacing-16);
}
ui_template/ui_template_modal.ts
+131 -12
View File
@@ -1,14 +1,20 @@
/* =============================================================================
* ui_template_modal.ts
* 공용 모달 겉틀 — 배경 · 제목줄 · 닫기 · Esc · 포커스. 몸은 `mount` 가 채움.
* 바깥 누르기 = 누름 · 뗌 둘 다 배경일 때만 닫음(칸 끌기로 안 닫힘).
* M01 · M02 가 함께 씀 — `dialogClass` · `backdropClass` 로 화면별 겉모양을 덧붙임.
* 곁값 — `actions`(머리 [닫기] 바로 왼쪽 단추 · mount 셋째 인자 자리에 넣어도 됨) · `wide`(큰 창 96vw × 94vh).
* 안 넘긴 창은 지금 꼴 그대로.
* 부품 「모달 · 확인창」(552-3 · 목록 22) — 화면을 가리고 위에 뜨는 창.
* 꼴 = 모달(`openModal` · 제목줄 · 닫기 · 몸은 `mount`) · 넓음(`wide` · 96vw × 94vh) · 폭 단(`width`: 24rem · 40rem · 960px · 기본 720)
* · 확인창(`askConfirm`) · 위험 확인(`danger` · 확인 단추 빨강 = `showConfirmDialog`) · 글 묻기(`askText` · window.prompt 대신)
* 크기 = 모달 여백 16 · 둥글기 12 · 확인창 폭 300 ~ 420 · 단추 = 단추 부품 기본
* 상태 = 기본만 · Esc = 닫기(한글 조합 중 · 몸이 막은 Esc 는 안 닫음) · 바깥 누르기 = 누름 · 뗌 둘 다 배경일 때만
* 쓰는 법 = `openModal({ title: "구조물", closeLabel: "닫기", mount: (body) => body.append(form) })`
* · `if (await askConfirm({ message: "지울까요?", danger: true })) …` · `const name = await askText({ message: "블록 이름" })`
* 대신하는 옛 변종 = 시트 `.ss-dialog` · `.ss-fmtdlg` · B03 `b03-file__modal` · M01 `m01-logic__pick` · `m01lab__modal` · CAD `window.confirm` · `window.prompt`(갈아 끼우기 = 553)
* M01 · M02 가 함께 씀 — `dialogClass` · `backdropClass` 로 화면별 겉모양을 덧붙임 · 안 넘긴 창은 지금 꼴 그대로.
* 확인창 모양 `.ui-confirm*` = `ui_template_elements_styles.ts`(주입 차례가 페이지 CSS 뒤라 그대로 둠) · 덧붙임 = 이 파일 CSS.
* ========================================================================== */
import "./ui_template_modal.css";
import { createButton, el } from "./ui_template_elements";
import { createButton } from "./ui_template_button";
import { el } from "./ui_template_elements_base";
export interface ModalOptions {
title: string;
@@ -20,32 +26,44 @@ export interface ModalOptions {
actions?: HTMLElement[];
/** 큰 창 — 96vw × 94vh · 몸 넘침만 스크롤 */
wide?: boolean;
/** 폭 단 — 없으면 720 */
width?: "24rem" | "40rem" | "960px";
backdropClass?: string;
/** 닫기 단추 · Esc · 바깥 누르기 전에 물음 — false 면 안 닫음(몸의 `close` 는 묻지 않고 닫음) */
beforeClose?: () => boolean | Promise<boolean>;
}
export function openModal(opts: ModalOptions): { close: () => void } {
/** 모달 판 — 뒤 가림막 없이 판만(부품 모음 견본도 씀) · 머리 단추는 mount 뒤에 붙임 */
export function buildModal(
opts: Pick<ModalOptions, "title" | "closeLabel" | "actions" | "wide" | "width" | "dialogClass">,
onClose: () => void,
): { dialog: HTMLElement; body: HTMLElement; actions: HTMLElement; closeButton: HTMLElement } {
const body = el("div", { className: "ui-modal__body" });
const actions = el("div", { className: "ui-modal__actions", children: opts.actions ?? [] });
const closeButton = createButton({
label: opts.closeLabel,
variant: "ghost",
onClick: () => void ask(),
onClick: onClose,
});
const top = el("div", {
className: "ui-modal__top",
children: [el("h3", { text: opts.title }), closeButton],
});
const close = (): void => backdrop.remove();
const ask = async (): Promise<void> => {
if (!opts.beforeClose || (await opts.beforeClose())) close();
};
const dialog = el("div", {
className: `ui-modal ${opts.wide ? "ui-modal--wide " : ""}${opts.dialogClass ?? ""}`.trim(),
attrs: { role: "dialog", "aria-label": opts.title },
children: [top, body],
});
if (opts.width) dialog.dataset.width = opts.width;
return { dialog, body, actions, closeButton };
}
export function openModal(opts: ModalOptions): { close: () => void } {
const { dialog, body, actions, closeButton } = buildModal(opts, () => void ask());
const close = (): void => backdrop.remove();
const ask = async (): Promise<void> => {
if (!opts.beforeClose || (await opts.beforeClose())) close();
};
const backdrop = el("div", {
className: `ui-modal__backdrop ${opts.backdropClass ?? ""}`.trim(),
children: [dialog],
@@ -69,3 +87,104 @@ export function openModal(opts: ModalOptions): { close: () => void } {
(body.querySelector<HTMLElement>("input, textarea, select") ?? dialog).focus();
return { close };
}
/* -----------------------------------------------------------------------------
* 확인창 · 글 묻기 — window.confirm · window.prompt 대신
*
* 공용 헤드 브라우저(playwright 연결)는 네이티브 confirm/alert를 자동 취소해
* 버려 [초기화] 같은 버튼이 죽은 것처럼 보였다(2026-08-19 진단). 화면 안 창으로
* 확인을 받아 어느 실행 환경에서도 같은 동작을 보장한다.
* -------------------------------------------------------------------------- */
export interface AskOptions {
message: string;
title?: string;
okLabel?: string;
cancelLabel?: string;
/** 위험 확인 — 확인 단추 빨강 */
danger?: boolean;
}
export interface AskField {
value?: string;
placeholder?: string;
}
/** 확인창 판 — 가림막(.ui-confirm) 없이 판만(부품 모음 견본도 씀) · `field` = 글 묻기 칸 */
export function confirmPanel(
opts: AskOptions & { field?: AskField },
done: (ok: boolean, text: string) => void = () => {},
): { panel: HTMLElement; first: HTMLElement } {
const panel = el("div", { className: "ui-confirm__panel", attrs: { role: "dialog" } });
if (opts.title) panel.append(el("h3", { className: "ui-confirm__title", text: opts.title }));
panel.append(el("p", { className: "ui-confirm__message", text: opts.message }));
let input: HTMLInputElement | null = null;
if (opts.field) {
const box = el("input", {
className: "ui-input ui-confirm__input",
attrs: { type: "text", placeholder: opts.field.placeholder ?? "" },
});
box.value = opts.field.value ?? "";
box.addEventListener("keydown", (ev) => {
if (ev.key !== "Enter" || ev.isComposing) return;
ev.preventDefault();
done(true, box.value);
});
panel.append(box);
input = box;
}
const cancel = createButton({
label: opts.cancelLabel ?? "취소",
variant: "ghost",
onClick: () => done(false, ""),
});
const ok = createButton({
label: opts.okLabel ?? "확인",
variant: opts.danger ? "danger" : "filled",
onClick: () => done(true, input?.value ?? ""),
});
panel.append(el("div", { className: "ui-confirm__actions", children: [cancel, ok] }));
return { panel, first: input ?? cancel };
}
function ask(opts: AskOptions, field?: AskField): Promise<{ ok: boolean; text: string }> {
return new Promise((resolve) => {
const overlay = el("div", { className: "ui-confirm" });
const back = document.activeElement as HTMLElement | null; // 닫힐 때 초점을 돌려놓을 자리
const done = (ok: boolean, text: string): void => {
overlay.remove();
if (back?.isConnected && back !== document.body) back.focus({ preventScroll: true });
resolve({ ok, text });
};
const { panel, first } = confirmPanel({ ...opts, field }, done);
overlay.addEventListener("keydown", (ev) => {
if (ev.key !== "Escape" || ev.isComposing) return;
ev.stopPropagation(); // 뒤 창 · 페이지 Esc 까지 닫지 않음
done(false, "");
});
overlay.append(panel);
document.body.append(overlay);
first.focus(); // 창에 초점 — 뒤 칸에 글이 들어가지 않고 Esc 가 먹음
});
}
/** 확인창 — 확인이면 true */
export function askConfirm(opts: AskOptions): Promise<boolean> {
return ask(opts).then((r) => r.ok);
}
/** 글 묻기 — 확인이면 칸 글 · 취소면 null */
export function askText(opts: AskOptions & AskField): Promise<string | null> {
return ask(opts, { value: opts.value, placeholder: opts.placeholder }).then((r) =>
r.ok ? r.text : null,
);
}
/** 위험 확인(옛 부름 꼴) — 확인이면 true. 네이티브 confirm 대신 반드시 이것을 쓴다. */
export function showConfirmDialog(
message: string,
confirmLabel = "확인",
cancelLabel = "취소",
): Promise<boolean> {
return askConfirm({ message, okLabel: confirmLabel, cancelLabel, danger: true });
}
ui_template/ui_template_public_layout.css
+10 -1
View File
@@ -8,7 +8,7 @@
.ui-public-frame__hero {
padding: var(--spacing-96) var(--spacing-32);
border-bottom: 1px solid var(--color-border);
box-shadow: inset 0 -1px 0 var(--color-border);
background: linear-gradient(to bottom, var(--color-accent-soft), var(--color-canvas));
}
@@ -35,6 +35,14 @@
line-height: var(--leading-heading-lg);
}
.ui-public-frame__hero[data-wide] .ui-public-frame__title {
max-width: 18ch;
}
.ui-public-frame__hero[data-wide] .ui-public-frame__lead {
max-width: 56ch;
}
.ui-public-frame__lead {
max-width: 52ch;
margin: 0;
@@ -66,6 +74,7 @@
color: var(--color-text);
font-size: var(--text-heading-sm);
line-height: var(--leading-heading-sm);
text-align: center;
}
.ui-public-frame__section-body {
ui_template/ui_template_public_layout.ts
+4 -1
View File
@@ -3,7 +3,7 @@
* 공개 화면 틀 `public-frame`(552-4 틀) — 로그인 전 공개 페이지(A01 ~ A09) 몸통: 머리 띠(hero) · 구역 · 본문.
* 꼴 = 머리 띠(제목 · 설명 · 주 단추 줄 · 가운데 / 왼쪽 맞춤) · 구역(제목 + 몸) 여럿
* 공개 머리(로고 · 메뉴)와 바닥글(`.app-footer`)은 앱 셸 몫 — 이 틀은 그 사이 본문만
* 크기 = 폭 = --page-max-width · 제목 = --text-heading-lg(좁으면 --text-heading) · 구역 제목 = --text-heading-sm
* 크기 = 폭 = --page-max-width · 제목 = --text-heading-lg(좁으면 --text-heading · `wide` = 18 자) · 구역 제목 = --text-heading-sm(가운데)
* 상태 = 없음
* 쓰는 법 = const f = createPublicFrame({ title: "임도 설계", lead: "…", actions: [btn] }); f.addSection("기능").append(grid)
* 대신하는 옛 변종 = A01 ~ A05 `.a0N-hero` · `__inner` · `__title` · `__subtitle` · `__ctas` 다섯 벌 · `.a0N-section(__title)`
@@ -17,6 +17,8 @@ export interface PublicFrameOptions {
actions?: HTMLElement[];
/** 머리 띠 맞춤 — 기본 가운데 */
align?: "center" | "start";
/** 제목 18 자 · 설명 56 자 폭(기본 14 · 52) */
wide?: boolean;
}
export interface PublicFrame {
@@ -41,6 +43,7 @@ export function createPublicFrame(opts: PublicFrameOptions): PublicFrame {
const root = node("div", "ui-public-frame");
const hero = node("section", "ui-public-frame__hero");
hero.dataset.align = opts.align ?? "center";
if (opts.wide) hero.dataset.wide = "";
const inner = node("div", "ui-public-frame__hero-inner");
inner.append(node("h1", "ui-public-frame__title", opts.title));
if (opts.lead) inner.append(node("p", "ui-public-frame__lead", opts.lead));
ui_template/ui_template_setting_row.css
+42
View File
@@ -0,0 +1,42 @@
/* 설정 줄(552-3) — 대시보드 꼴(줄 52 · 아래 선 · 카드 하나) */
.ui-setting-card {
overflow: hidden;
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: var(--radius-cards);
}
.ui-setting-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-16);
min-height: 52px;
padding: var(--spacing-8) var(--spacing-16);
border-bottom: 1px solid var(--color-border);
}
.ui-setting-row:last-child {
border-bottom: 0;
}
.ui-setting-row__text {
display: flex;
flex-direction: column;
min-width: 0;
}
.ui-setting-row__desc {
font-size: var(--text-caption);
color: var(--color-text-muted);
}
.ui-setting-row__side {
display: flex;
align-items: center;
gap: var(--spacing-8);
flex: none;
max-width: 55%;
}
.ui-setting-row__side .ui-field__label:empty {
display: none;
}
.ui-setting-row__value {
text-align: right;
overflow-wrap: anywhere;
}
ui_template/ui_template_setting_row.ts
+36
View File
@@ -0,0 +1,36 @@
/* =============================================================================
* ui_template_setting_row.ts
* 부품 「설정 줄」(552-3 · 목록 33) — 왼쪽 제목 · 설명 / 오른쪽 값 · 조작 한 줄(Linear 꼴) · 여러 줄은 둥근 상자 하나에.
* 꼴 = 값 줄(`valueText` · 없으면 「-」) · 조작 줄(오른쪽에 입력 · 고르기 · 켜기 · 단추) · 설명 없는 줄
* 크기 = 줄 최소 52 · 여백 8 / 16 · 오른쪽 칸 최대 55 %
* 상태 = 기본만(조작 부품이 저마다 상태를 가짐)
* 쓰는 법 = `settingCard([settingRow("회사 이름", "보고서 머리에 들어감", valueText("산림설계"))])`
* 대신하는 옛 변종 = B01 `settingRow` · `settingCard`(`.b01-pg-row` · `.b01-pg-settings`) · `.b01-dashboard__setting-card` · E02 `e02-field` · E06 `e06-setting` · B08 `b08-hydro__row`
* ========================================================================== */
import { el } from "./ui_template_elements_base";
import "./ui_template_setting_row.css";
/** 한 줄 — 제목 · 설명 왼쪽 · 값 · 조작 오른쪽 */
export function settingRow(title: string, desc: string, right: Node): HTMLElement {
const left = el("div", {
className: "ui-setting-row__text",
children: [el("strong", { text: title })],
});
if (desc) left.append(el("span", { className: "ui-setting-row__desc", text: desc }));
const side = el("div", { className: "ui-setting-row__side" });
side.append(right);
return el("div", { className: "ui-setting-row", children: [left, side] });
}
/** 값 글 — 없으면 「-」 */
export const valueText = (v: string | number | null | undefined): HTMLElement =>
el("span", {
className: "ui-setting-row__value",
text: v === null || v === undefined || v === "" ? "-" : String(v),
});
/** 설정 줄 묶음 — 둥근 상자 한 개 */
export function settingCard(rows: HTMLElement[]): HTMLElement {
return el("div", { className: "ui-setting-card", children: rows });
}
ui_template/ui_template_table.css
+83
View File
@@ -0,0 +1,83 @@
/* 표(552-3) — 대시보드 꼴(줄 40 · 세로선 없음 · 카드 테두리) · 데이터표 = 줄 28 */
.ui-table-wrap {
overflow-x: auto;
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: var(--radius-cards);
}
.ui-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
color: var(--color-text);
}
.ui-table th {
height: 36px;
padding: 0 12px;
text-align: left;
font-weight: 600;
font-size: 12px;
color: var(--color-text-muted);
border-bottom: 1px solid var(--color-border);
white-space: nowrap;
}
.ui-table td {
height: 40px;
padding: 0 12px;
border-bottom: 1px solid var(--color-border);
vertical-align: middle;
}
.ui-table tbody tr:last-child td {
border-bottom: 0;
}
.ui-table tbody tr:is(:hover, [data-state="hover"]) {
background: var(--color-hover);
}
.ui-table .is-end {
text-align: right;
}
.ui-table td.ui-table__menucell {
width: 44px;
padding: 0 8px;
text-align: right;
}
/* 데이터표 — 줄 28 · 글 12 */
.ui-table--data {
font-size: var(--text-caption);
}
.ui-table--data th {
height: 28px;
padding: 0 8px;
}
.ui-table--data td {
height: 28px;
padding: 0 8px;
}
/* 줄 상태 — 고름 · 바뀜 · 지움 */
.ui-table tbody tr:is(.is-active, [aria-selected="true"]) {
background: var(--color-accent-soft);
}
.ui-table tbody tr.is-changed > td:first-child {
box-shadow: inset 3px 0 0 var(--color-warning);
}
.ui-table tbody tr.is-removed {
color: var(--color-text-muted);
text-decoration: line-through;
}
/* 빈 줄 · 펼침 줄 */
.ui-table td.ui-table__empty {
height: 64px;
color: var(--color-text-muted);
text-align: center;
}
.ui-table tr.is-sub > td {
height: auto;
padding: 0;
background: var(--color-bg);
}
.ui-table tbody tr.is-sub:is(:hover, [data-state="hover"]) {
background: var(--color-bg);
}
ui_template/ui_template_table.ts
+81
View File
@@ -0,0 +1,81 @@
/* =============================================================================
* ui_template_table.ts
* 부품 「표」(552-3 · 목록 18) — 머리 줄 + 줄들 · 세로선 없음 · 카드 테두리 · 넘치면 가로 스크롤.
* 꼴 = 일반표(줄 40 · 기본) · 데이터표(`density: "data"` · 줄 28 · 글 12) · ⋯ 칸(columns 의 label "" — 줄 끝 `createRowMenu`)
* · 한글 배지 칸(칸에 배지 요소) · 오른쪽 맞춤 칸(`align: "end"` · 수) · 빈 줄(`emptyRow`) · 펼침 줄(tr.is-sub)
* 크기 = 줄 40 / 28 · 머리 36 / 28
* 상태 = 줄 마우스(옅은 바탕) · 고름(tr.is-active / aria-selected) · 바뀜(tr.is-changed) · 지움(tr.is-removed · 줄 그음)
* 쓰는 법 = `createTable([{ label: "이름" }, { label: "", width: "44px" }], [["임도 1", createRowMenu([…])]])`
* · 줄을 나중에 채우면 `const { root, tbody } = tableShell(columns); tbody.append(tableRow(columns, cells))`
* 대신하는 옛 변종 = B01 `dataTable` · `tableShell`(`.b01-pg-table`) · `.b01-proj-table` · `.ui-general-block__table` · D04 · E02 · E03 · E06 · E07 손 표 · M01 · M02 표(목록 4장)
* 옛 `.ui-data-table`(끌어 고치는 큰 표 · `ui_template_data_table.ts`)은 따로 그대로.
* ========================================================================== */
import { el } from "./ui_template_elements_base";
import "./ui_template_table.css";
export type Cell = string | Node;
export interface Column {
label: string;
/** 칸 너비(CSS) — 없으면 나눠 가짐 */
width?: string;
align?: "end";
}
export interface TableOptions {
/** 데이터표(줄 28 · 글 12) */
density?: "data";
}
/** 표 껍데기 — 머리 + 빈 tbody (줄은 호출 쪽이 채움 · 펼침 줄 같은 것을 끼우려고 떼어 둠) */
export function tableShell(
columns: Column[],
opts: TableOptions = {},
): { root: HTMLElement; tbody: HTMLElement } {
const table = el("table", {
className: `ui-table${opts.density === "data" ? " ui-table--data" : ""}`,
});
const hr = el("tr");
for (const col of columns) {
const th = el("th", { className: col.align ? "is-end" : "", text: col.label });
if (col.width) th.style.width = col.width;
hr.append(th);
}
const tbody = el("tbody");
table.append(el("thead", { children: [hr] }), tbody);
return { root: el("div", { className: "ui-table-wrap", children: [table] }), tbody };
}
/** 한 줄 — 칸 수는 columns 와 같게 · label "" 인 칸 = ⋯ 칸 */
export function tableRow(columns: Column[], cells: Cell[]): HTMLTableRowElement {
const tr = el("tr");
cells.forEach((cell, i) => {
const col = columns[i];
const td = el("td", {
className: col?.align ? "is-end" : col?.label === "" ? "ui-table__menucell" : "",
});
td.append(cell);
tr.append(td);
});
return tr;
}
/** 빈 줄 — 칸을 다 합쳐 한 줄 안내 */
export function emptyRow(columns: Column[], text: string): HTMLTableRowElement {
const td = el("td", { className: "ui-table__empty", text });
td.colSpan = columns.length;
return el("tr", { children: [td] });
}
/** 표 — 줄이 없으면 `empty` 글 한 줄 */
export function createTable(
columns: Column[],
rows: Cell[][],
opts: TableOptions & { empty?: string } = {},
): HTMLElement {
const { root, tbody } = tableShell(columns, opts);
tbody.append(...rows.map((cells) => tableRow(columns, cells)));
if (!rows.length && opts.empty) tbody.append(emptyRow(columns, opts.empty));
return root;
}
ui_template/ui_template_ui_kit_parts.ts
+47 -16
View File
@@ -28,16 +28,13 @@ import { createSegment } from "./ui_template_segment";
import { createTabs } from "./ui_template_tabs";
import { createText } from "./ui_template_text";
import { createToggle } from "./ui_template_toggle";
import {
badge,
dataTable,
rowMenu,
settingCard,
settingRow,
valueText,
} from "../B01_Dashboard/B01_Dashboard_UI_PageKit";
// 552-3 묶음 부품
import { createBanner } from "./ui_template_banner";
import { createRowMenu, type RowMenuItem } from "./ui_template_context_menu";
import { createDrop } from "./ui_template_drop";
import { buildModal, confirmPanel } from "./ui_template_modal";
import { settingCard, settingRow, valueText } from "./ui_template_setting_row";
import { createTable, type Column } from "./ui_template_table";
import { createCard } from "./ui_template_card";
import { createPanelCard } from "./ui_template_collapsible";
import { createBarChart, createDonut, createLineChart } from "./ui_template_elements_chart";
@@ -110,6 +107,31 @@ const row = (...children: HTMLElement[]): HTMLElement => {
const noop = (): void => {};
/** 552-3 견본 — 표 칸 · 줄 · ⋯ 메뉴 항목 · 펼친 ⋯ 판 */
const KIT_COLS: Column[] = [{ label: "노선" }, { label: "", width: "44px" }];
const KIT_DATA: Column[] = [{ label: "노선" }, { label: "연장", align: "end" }];
const KIT_MENU: RowMenuItem[] = [
{ label: "이름 바꾸기", onClick: noop },
{ label: "삭제", danger: true, onClick: noop },
];
const kitRows = (): (string | HTMLElement)[][] => [
["1", createRowMenu(KIT_MENU)],
["2", createRowMenu(KIT_MENU)],
];
const dataRows = [
["1", "1,080"],
["2", "640"],
];
const openMenu = (s: KitState, items = KIT_MENU): HTMLElement => {
const menu = createRowMenu(items);
menu.classList.add("is-open");
const pop = menu.querySelector<HTMLElement>(".ui-row-menu__pop")!;
pop.hidden = false;
pop.style.position = "static";
markState(pop.querySelector<HTMLElement>(".ui-row-menu__item")!, s);
return menu;
};
/** 세로로 쌓기(552-3 견본) */
const col = (...children: HTMLElement[]): HTMLElement => {
const box = row(...children);
@@ -230,13 +252,19 @@ export const KIT_PARTS: KitPart[] = [
{ key: "collapsible", name: "접이 카드", group: "compound", kinds: "패널 카드 · 구역 · 캐럿 ▾ ▸ · ⚙ 곁값", file: "ui_template_collapsible.ts",
demo: (s) => { if (s !== "default" && s !== "hover") return null; const open = createPanelCard("구조물 배치", false, noop); open.append(row(createInputField({ placeholder: "측점" }).root));
if (s === "hover") { markState(open.querySelector<HTMLElement>(".ui-collapsible__title")!, s); return open; } return col(open, createPanelCard("접힌 카드")); } },
{ key: "table", name: "표", group: "compound", kinds: "데이터표(28 · 밀도) · 일반표(40) · ⋯ 칸 · 한글 배지 · 빈 줄", file: "ui_template_table.ts", legacy: true,
demo: (s) => (s === "default" ? dataTable([{ label: "이름" }, { label: "상태", width: "90px" }, { label: "연장", width: "80px", align: "end" }, { label: "", width: "44px" }], [["임도 1 노선", badge("진행 중", "accent"), "1,080 m", rowMenu([{ label: "열기", onClick: noop }])], ["임도 2 노선", badge("완료", "success"), "640 m", rowMenu([{ label: "열기", onClick: noop }])]]) : null) },
{ key: "row-menu", name: "⋯ · 오른쪽 메뉴", group: "compound", kinds: "줄 끝 ⋯ · 오른쪽 누름 메뉴 · 위험 항목", file: "ui_template_context_menu.ts", legacy: true,
demo: (s) => (s === "default" ? rowMenu([{ label: "이름 바꾸기", onClick: noop }, { label: "삭제", danger: true, onClick: noop }]) : null) },
{ key: "table", name: "표", group: "compound", kinds: "일반표(줄 40) · 데이터표(줄 28) · ⋯ 칸 · 한글 배지 · 빈 줄 · 줄 고름 · 바뀜 · 지움", file: "ui_template_table.ts",
demo: (s) => { if (s === "disabled" || s === "error") return null; const t = s === "default" ? createTable(KIT_COLS, kitRows()) : createTable(KIT_DATA, dataRows, { density: "data" });
const first = t.querySelector<HTMLElement>("tbody tr")!; if (s === "hover") markState(first, s); if (s === "active") first.classList.add("is-active");
if (s !== "default") return t; const data = createTable(KIT_DATA, dataRows, { density: "data" }); const rows = data.querySelectorAll("tbody tr"); rows[0].classList.add("is-changed"); rows[1].classList.add("is-removed");
return col(t, data, createTable(KIT_DATA, [], { empty: "노선 없음" })); } },
{ key: "row-menu", name: "⋯ · 오른쪽 메뉴", group: "compound", kinds: "줄 끝 ⋯(28) · 펼친 판 · 위험 항목(빨강 + 확인창) · 막힌 항목", file: "ui_template_context_menu.ts",
demo: (s) => { if (s === "error") return null; if (s === "default") return createRowMenu(KIT_MENU); if (s === "hover") { const m = createRowMenu(KIT_MENU); markState(m.querySelector<HTMLElement>(".ui-row-menu__btn")!, s); return m; }
return openMenu(s, s === "disabled" ? [{ label: "내보내기", onClick: noop, disabled: true }, ...KIT_MENU] : KIT_MENU); } },
{ key: "empty", name: "빈 상태", group: "compound", kinds: "선 아이콘 · 한 줄 · 주 단추 · 사용법 · 작은 꼴", file: "ui_template_empty.ts",
demo: (s) => (s === "default" ? col(createEmpty({ icon: "folder", text: "아직 프로젝트가 없음", hint: "새 프로젝트를 만들어 시작", action: createButton({ label: "새 프로젝트", onClick: noop }), onGuide: noop }), createEmpty({ text: "고른 측점 없음", small: true })) : null) },
{ key: "modal", name: "모달 · 확인창", group: "compound", kinds: "보통 · 넓음 · 확인 · 위험 확인", file: "ui_template_modal.ts" },
{ key: "modal", name: "모달 · 확인창", group: "compound", kinds: "보통(720) · 넓음 · 폭 단 24rem · 40rem · 960 · 확인 · 위험 확인 · 글 묻기(prompt 대신)", file: "ui_template_modal.ts",
demo: (s) => { if (s !== "default") return null; const m = buildModal({ title: "구조물 고르기", closeLabel: "닫기", width: "40rem" }, noop); m.body.append("몸 — 표 · 양식이 들어감"); m.dialog.style.margin = "0";
return col(m.dialog, confirmPanel({ message: "노선을 저장할까요?" }).panel, confirmPanel({ title: "삭제", message: "임도 2 노선을 지울까요? 되돌릴 수 없음", okLabel: "삭제", danger: true }).panel, confirmPanel({ message: "블록 이름", field: { placeholder: "예: 배수관" } }).panel); } },
{ key: "toast", name: "알림", group: "compound", kinds: "토스트 4꼴(성공 · 오류 · 정보 · 경고) · 로딩 가림막 · 진행 가림막", file: "ui_template_toast.ts",
demo: (s) => (s === "default" ? col(toastNode("저장됨", "success"), toastNode("저장 못 함 — 다시 시도", "error"), toastNode("노선을 불러옴", "info"), toastNode("측점 간격이 넓음", "warning")) : null) },
{ key: "banner", name: "띠 알림", group: "compound", kinds: "왼쪽 띠 · 정보 · 경고 · 위험 · 성공(✓) · 펼침 · 안 단추 · 닫기", file: "ui_template_banner.ts",
@@ -252,9 +280,12 @@ export const KIT_PARTS: KitPart[] = [
demo: (s) => (s === "default" ? col(createBarChart([{ label: "산림설계", value: 12 }, { label: "녹색기술", value: 7 }, { label: "그 밖 3 곳", value: 4 }]), createDonut([{ label: "임도", value: 5 }, { label: "예정노선", value: 3 }, { label: "안정성", value: 2 }]), createLineChart({ series: [{ name: "CPU", values: [20, 35, 30, 50, 42, 60], colorIndex: 0 }], height: 120 })) : null) },
{ key: "legend", name: "범례", group: "compound", kinds: "색 칩 · 선 · 점선 · 점 · 꺼짐 · 세로", file: "ui_template_flow_legend.ts",
demo: (s) => (s === "default" ? col(createLegend([{ label: "임도", color: "var(--color-chart-0)" }, { label: "설계선", color: "var(--color-chart-2)", kind: "line" }, { label: "원지반선", color: "var(--color-chart-1)", kind: "dash" }, { label: "관", color: "var(--color-chart-3)", kind: "dot" }, { label: "꺼진 층", color: "var(--color-chart-0)", off: true }], { onToggle: noop }), createLegend([{ label: "절토", color: "var(--color-danger)" }, { label: "성토", color: "var(--color-info)" }], { vertical: true })) : null) },
{ key: "setting-row", name: "설정 줄", group: "compound", kinds: "제목 · 설명 · 오른쪽 값 · 조작", file: "ui_template_setting_row.ts", legacy: true,
demo: (s) => (s === "default" ? settingCard([settingRow("회사 이름", "보고서 머리에 들어감", valueText("산림설계")), settingRow("단위", "", valueText(null))]) : null) },
{ key: "drop", name: "파일 놓기 칸", group: "compound", kinds: "끌어 놓기 · 고르기 단추 · 진행", file: "ui_template_drop.ts" },
{ key: "setting-row", name: "설정 줄", group: "compound", kinds: "제목 · 설명 왼쪽 · 오른쪽 값 · 조작 · 줄 52", file: "ui_template_setting_row.ts",
demo: (s) => (s === "default" ? settingCard([settingRow("회사 이름", "보고서 머리에 들어감", valueText("산림설계")), settingRow("단위", "", valueText(null)), settingRow("기본 노폭", "새 노선에 먼저 들어감", createInputField({ placeholder: "3.0 m" }).root), settingRow("글꼴 파일", "", createButton({ label: "바꾸기", variant: "ghost", size: 28, onClick: noop }))]) : null) },
{ key: "drop", name: "파일 놓기 칸", group: "compound", kinds: "끌어 놓기 · 고르기 단추 · 받는 꼴 안내 · 진행 · 오류", file: "ui_template_drop.ts",
demo: (s) => { if (s === "active") return null; const d = createDrop({ accept: ".las,.laz", hint: "LAS · LAZ · 2 GB 까지", onFiles: noop, disabled: s === "disabled" });
if (s === "error") d.setError("LAS · LAZ 파일만 받음"); if (s === "hover" || s === "error") markState(d.root, s);
if (s !== "default") return d.root; const busy = createDrop({ onFiles: noop }); busy.setProgress(0.4, "40 %"); return col(d.root, busy.root); } },
// ── 552-4 틀 ───────────────────────────────────────────────
{ key: "work-frame", name: "작업 화면 틀", group: "frame", kinds: "왼쪽 패널(흰 판 · 1 px 선) · 본문 · 아래 단추 줄 · [?][<][>] · 머리 줄 없음 · ☰ 서랍", file: "ui_template_overlay.ts",
demo: FRAME_DEMOS["work-frame"] },