117 lines
4.2 KiB
TypeScript
117 lines
4.2 KiB
TypeScript
/* =============================================================================
|
|
* A04_NewsHistory_UI_Page.ts
|
|
* 로그인 전 04: 최신소식 및 개선 이력 (타임라인 목록)
|
|
*
|
|
* 제약 준수:
|
|
* - 모든 문구는 ui_template_locale.ts 참조 (하드코딩 금지).
|
|
* - 색상/간격은 A04_NewsHistory_UI_Style.css + theme.css 변수만 사용.
|
|
* - 공통 컴포넌트(createTag) 우선 사용.
|
|
* - Mock 데이터는 나중에 GET /api/a04/history로 교체.
|
|
* ========================================================================== */
|
|
|
|
import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
|
|
import { createTag, type TagVariant } from "@ui/ui_template_elements";
|
|
import "./A04_NewsHistory_UI_Style.css";
|
|
|
|
/** locale 헬퍼 */
|
|
function L(key: keyof typeof ui_locales): string {
|
|
return ui_locales[key][currentLanguageIndex];
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
* Mock 데이터 (백엔드 연결 전) — 나중에 GET /api/a04/history로 교체
|
|
* -------------------------------------------------------------------------- */
|
|
type HistoryKind = "feature" | "fix" | "notice";
|
|
|
|
interface HistoryItem {
|
|
id: number;
|
|
kind: HistoryKind;
|
|
title: string;
|
|
date: string;
|
|
}
|
|
|
|
const MOCK_HISTORY: HistoryItem[] = [
|
|
{ id: 1, kind: "feature", title: "회사 소개 및 교육 안내 페이지 추가", date: "2026-07-05" },
|
|
{ id: 2, kind: "feature", title: "프로그램 상세 6단계 워크플로우 소개 공개", date: "2026-07-04" },
|
|
{ id: 3, kind: "fix", title: "다크 모드 색상 대비 개선", date: "2026-07-03" },
|
|
{ id: 4, kind: "notice", title: "베타 서비스 오픈 안내", date: "2026-07-01" },
|
|
];
|
|
|
|
/** 이력 종류별 태그 변형/라벨 매핑 */
|
|
const KIND_META: Record<HistoryKind, { variant: TagVariant; 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" },
|
|
};
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
* 섹션 빌더
|
|
* -------------------------------------------------------------------------- */
|
|
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";
|
|
|
|
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 titleEl = document.createElement("span");
|
|
titleEl.className = "a04-timeline-row__title";
|
|
titleEl.textContent = item.title;
|
|
|
|
const dateEl = document.createElement("span");
|
|
dateEl.className = "a04-timeline-row__date";
|
|
dateEl.textContent = item.date;
|
|
|
|
row.append(tag, titleEl, dateEl);
|
|
list.append(row);
|
|
}
|
|
|
|
section.append(list);
|
|
return section;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
* 페이지 진입점
|
|
* -------------------------------------------------------------------------- */
|
|
export function renderA04NewsHistory(root: HTMLElement): void {
|
|
const page = document.createElement("div");
|
|
page.className = "a04-news-history";
|
|
page.append(buildHero(), buildTimeline());
|
|
root.append(page);
|
|
}
|