파일	위치	역할
`A04_NewsHistory_UI_Page.ts`	`A04_NewsHistory/A04_NewsHistory_UI_Page.ts:1-117`	페이지 렌더링 로직 + Mock 데이터
`A04_NewsHistory_UI_Style.css`	`A04_NewsHistory/A04_NewsHistory_UI_Style.css:1-87`	스타일 (theme.css 변수만 사용)

컴포넌트 (섹션 빌더)

함수	위치	역할
`buildHero()`	`A04_NewsHistory/A04_NewsHistory_UI_Page.ts:50-68`	Hero(제목+부제목), mist-violet→canvas 그라디언트
`buildTimeline()`	`A04_NewsHistory/A04_NewsHistory_UI_Page.ts:70-106`	타임라인(태그+제목+날짜 행), 빈 상태 처리
`renderA04NewsHistory()`	`A04_NewsHistory/A04_NewsHistory_UI_Page.ts:111-116`	페이지 진입점(Hero+타임라인 조립)

데이터: MOCK_HISTORY 배열 (A04_NewsHistory_UI_Page.ts:33-38, 백엔드 연결 전) — 추후 GET /api/a04/history로 교체 예정
빈 상태: MOCK_HISTORY.length === 0이면 A04_NewsHistory_Empty 로케일 키 표시

Mock 데이터 구조

타입:

type HistoryKind = "feature" | "fix" | "notice";
interface HistoryItem {
  id: number;
  kind: HistoryKind;
  title: string;
  date: string;
}

태그 변형 매핑 (KIND_META):

모든 텍스트는 ui_locales[key][currentLanguageIndex] 형식으로 ui_templates에서 로드. 하드코딩 금지.

UI 요소	로케일 키
제목	`A04_NewsHistory_Title`
히어로 부제목	`A04_NewsHistory_Hero_Subtitle`
태그 라벨 (feature/fix/notice)	`A04_NewsHistory_Tag_Feature`, `A04_NewsHistory_Tag_Fix`, `A04_NewsHistory_Tag_Notice`
빈 상태 메시지	`A04_NewsHistory_Empty`

.a04-news-history — 페이지 래퍼 (flex column, gap: section-gap)
.a04-hero — 그래디언트 배경
.a04-hero__inner — 중앙 정렬 컨테이너
.a04-hero__title — heading-lg, deep-iris, max 18자
.a04-hero__subtitle — body 텍스트, slate, max 56자
.a04-section — 공통 섹션 (max-width: page-max-width, padding: spacing-32)
.a04-timeline — flex 열 (gap: spacing-8)
.a04-timeline-row — flex row, 태그+제목+날짜 (gap: spacing-16, padding: spacing-16 spacing-24)
.a04-timeline-row__title — flex: 1, body-sm, charcoal
.a04-timeline-row__date — caption, ash
.a04-timeline__empty — 중앙 정렬, slate, body