eomsangdonandClaude Sonnet 5.5
25adc2f0e7
- A01~A05 hero 다섯 벌 · 구역 제목 복제 CSS 걷고 공개 화면 틀 한 벌(wide 옵션 · 구역 제목 가운데 · 머리 아랫줄은 자리 안 먹는 그림자) - 카드 = 카드 부품(로그인 · 가입 · 지원 · 약관 · 기능 카드 · 소식 줄 · B11 단계 카드) · 지원 성공 · B10 안내 = 띠 알림 · 태그 = 배지 - A07 약관 날 체크 · 날 details = 체크 + 접이 부품 · A08 날 textarea = 입력 여러 줄 · 빈 소식 = 빈 상태 - 죽은 A07_Register_UI_Page · 쓰이지 않는 CSS 걷음 · 띠 알림 hidden 받음 - 지킴 시험 test_553_7_public_pages Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
89 lines
3.6 KiB
TypeScript
89 lines
3.6 KiB
TypeScript
/* =============================================================================
|
|
* A04_NewsHistory_UI_Page.ts
|
|
* 로그인 전 04: 최신소식 및 개선 이력 (타임라인 목록)
|
|
*
|
|
* 제약 준수:
|
|
* - 모든 문구는 ui_template_locale.ts 참조 (하드코딩 금지).
|
|
* - 색상/간격은 A04_NewsHistory_UI_Style.css + theme.css 변수만 사용.
|
|
* - 공통 부품(createPublicFrame/createCard/createBadge) 우선 사용.
|
|
* - Mock 데이터는 나중에 GET /api/a04/history로 교체.
|
|
* ========================================================================== */
|
|
|
|
import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
|
|
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 헬퍼 */
|
|
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: 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" },
|
|
};
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
* 섹션 빌더
|
|
* -------------------------------------------------------------------------- */
|
|
function buildTimeline(): HTMLElement {
|
|
if (MOCK_HISTORY.length === 0) return createEmpty({ text: L("A04_NewsHistory_Empty") });
|
|
|
|
const list = document.createElement("div");
|
|
list.className = "a04-timeline";
|
|
for (const item of MOCK_HISTORY) {
|
|
const meta = KIND_META[item.kind];
|
|
const tag = createBadge(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;
|
|
|
|
const row = createCard({ body: [tag, titleEl, dateEl] });
|
|
row.classList.add("a04-timeline-row");
|
|
list.append(row);
|
|
}
|
|
return list;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
* 페이지 진입점
|
|
* -------------------------------------------------------------------------- */
|
|
export function renderA04NewsHistory(root: HTMLElement): void {
|
|
const frame = createPublicFrame({
|
|
title: L("A04_NewsHistory_Title"),
|
|
lead: L("A04_NewsHistory_Hero_Subtitle"),
|
|
wide: true,
|
|
});
|
|
frame.addSection().append(buildTimeline());
|
|
root.append(frame.root);
|
|
}
|