Aislo/docs/wiki/pages/A02_ProgDetail/A02_frontend.md

status, page_id, related_pages, last_updated

status	page_id	related_pages	last_updated
stable	A02_ProgDetail	A01_Home/A01_frontend a00_app_shell_framework ui_templates A02_ProgDetail/A02_components	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에 분리했다.