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,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와의 연동이 필요 없는 완전한 정적 소개 페이지임 |
@@ -0,0 +1,33 @@
+---
+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]]에 분리했다.