34 lines
1.4 KiB
Markdown
34 lines
1.4 KiB
Markdown
---
|
|
status: stable
|
|
page_id: A02_ProgDetail
|
|
related_pages: ["[[A01_Home/A01_frontend]]", "[[a00_app_shell_framework]]", "[[ui_templates]]", "[[A02_ProgDetail/A02_components]]"]
|
|
last_updated: 2026-07-12
|
|
---
|
|
|
|
# A02_ProgDetail — Frontend
|
|
|
|
로그인 전 프로그램 상세 페이지. 6단계 워크플로우 시각화 + 핵심 기술 소개.
|
|
|
|
## 구조
|
|
- **경로**: `A02_ProgDetail/A02_ProgDetail_UI_Page.ts` (146줄)
|
|
- **스타일**: `A02_ProgDetail/A02_ProgDetail_UI_Style.css` (127줄)
|
|
|
|
## 컴포넌트 분석
|
|
|
|
| 컴포넌트 | 역할 | 로케일 키 |
|
|
|---|---|---|
|
|
| `buildHero()` | 히어로 섹션(제목+부제+CTA) | `A02_ProgDetail_Title`, `A02_ProgDetail_Hero_Subtitle`, `A02_ProgDetail_Hero_Cta` |
|
|
| `buildWorkflow()` | 6단계 워크플로우 리스트(배지+텍스트) | `A02_ProgDetail_Workflow_SectionTitle`, `A02_ProgDetail_Step[1-6]_Title`, `A02_ProgDetail_Step[1-6]_Desc` |
|
|
| `buildTech()` | 기술 3종 카드 그리드 | `A02_ProgDetail_Tech_SectionTitle`, `A02_ProgDetail_Tech[1-3]_Title`, `A02_ProgDetail_Tech[1-3]_Desc` |
|
|
|
|
## 제약 준수
|
|
|
|
- ✅ 모든 문구 `ui_template_locale.ts` 참조
|
|
- ✅ 색상/간격 `theme.css` 변수만 사용
|
|
- ✅ 공통 컴포넌트 `createButton`/`createCard` 사용
|
|
- ✅ 이벤트 핸들러 명명 `on[페이지]_[기능]_[액션]`
|
|
|
|
## 세부 구현
|
|
|
|
스타일 구조·의존성·데이터 흐름·특이사항은 [[A02_ProgDetail/A02_components]]에 분리했다.
|