260715_0

2026-07-15 18:33:33 +09:00
parent 6b1583103f
commit f533082537
201 changed files with 19776 additions and 563 deletions
@@ -0,0 +1,86 @@
+---
+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` 코드 주석에 언급됨