---
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와의 연동이 필요 없는 완전한 정적 소개 페이지임 |