260715_0

docs/wiki/pages/A02_ProgDetail/A02_components.md

@@ -0,0 +1,38 @@
+---
+type: page-frontend-detail
+status: stable
+page_id: A02_ProgDetail
+related_pages: ["[[A02_ProgDetail/A02_frontend]]", "[[ui_templates]]", "[[a00_app_shell_framework]]"]
+last_updated: 2026-07-12
+source: A02_ProgDetail 코드 인제스트 보완 및 구조화 일관성 적용
+---
+
+# A02_ProgDetail — 세부 구현
+
+## 스타일 (CSS)
+| 항목 | 역할 |
+|---|---|
+| `.a02-prog-detail` | 페이지 루트 컨테이너 (gap: section-gap, padding-bottom: spacing-64) |
+| `.a02-hero`, `.a02-hero__inner` | 히어로 영역 배경(라벤더 그라디언트) 및 콘텐츠 중앙 정렬 |
+| `.a02-workflow-list`, `.a02-workflow-row` | 6단계 워크플로우 리스트(flex 열) 및 배지+텍스트 행 레이아웃 |
+| `.a02-workflow-row__badge` | 40×40px 원형 배지 (primary 배경) |
+| `.a02-tech-grid`, `.a02-tech-card` | 핵심 기술 소개 3열 카드 그리드 (900px 이하 대응) |
+
+## 의존성
+| 항목 | 역할 |
+|---|---|
+| [[a00_app_shell_framework]] | `navigateTo()` 라우팅 기능 활용 |
+| `config_frontend.ts` | `ROUTES` 경로 상수 참조 |
+| [[ui_templates]] | 공통 버튼(`createButton`) 및 카드(`createCard`) 엘리먼트 활용 |
+| `ui_template_locale.ts` | 다국어 문구(`ui_locales`) 적용 |
+
+## 데이터 흐름
+| 단계 | 흐름 |
+|---|---|
+| 1 | `renderA02ProgDetail(root)` ➡️ `buildHero()` ➡️ `buildWorkflow()` ➡️ `buildTech()` 순서로 구성 요소를 렌더링하고 `root`에 추가 |
+| 2 | 사용자가 히어로의 CTA 버튼 클릭 시 `onA02_ProgDetail_Start_Click()` 핸들러가 작동하여 `navigateTo(ROUTES.A07_REGISTER)` 호출 |
+
+## 미해결 / 특이사항
+| 항목 | 상태 |
+|---|---|
+| 정적 페이지 | 백엔드 API와의 연동이 필요 없는 완전한 정적 소개 페이지임 |