---
status: stable
page_id: A04_NewsHistory
related_pages: ["[[A01_Home/A01_frontend]]", "[[a00_app_shell_framework]]", "[[ui_templates]]"]
last_updated: 2026-07-12
---

# A04_NewsHistory — Frontend

로그인 전 최신 소식 및 개선 이력 페이지. 타임라인 목록 형태.

## 파일 구조

| 파일 | 위치 | 역할 |
|---|---|---|
| `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 데이터 구조

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

**태그 변형 매핑** (KIND_META):
- `"feature"` → variant: "accent" → `A04_NewsHistory_Tag_Feature`
- `"fix"` → variant: "success" → `A04_NewsHistory_Tag_Fix`
- `"notice"` → variant: "neutral" → `A04_NewsHistory_Tag_Notice`

## 로컬라이제이션

모든 텍스트는 `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` |

## 스타일 (CSS)

### CSS 클래스 구조
- `.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

### 반응형
- **900px 이하:** 히어로 제목 폰트 축소

## 의존성

- [[a00_app_shell_framework]] — 공통 헤더·푸터
- [[ui_templates]] — `createTag()` 공통 컴포넌트 + 다국어

## 미해결 사항

- MOCK_HISTORY 데이터: 현재 하드코딩 (4개 항목)
- 백엔드 API 미구현: `GET /api/a04/history` 코드 주석에 언급됨