70 lines
2.7 KiB
Markdown
70 lines
2.7 KiB
Markdown
---
|
|
status: stable
|
|
page_id: A05_EduDetail
|
|
related_pages: ["[[a00_app_shell_framework]]", "[[ui_templates]]"]
|
|
last_updated: 2026-07-12
|
|
---
|
|
|
|
# A05_EduDetail — Frontend
|
|
|
|
로그인 전 교육 상세 페이지. 교육 과정 소개 + 문의 CTA.
|
|
|
|
## 파일 구조
|
|
|
|
| 파일 | 위치 | 역할 |
|
|
|---|---|---|
|
|
| `A05_EduDetail_UI_Page.ts` | `A05_EduDetail/A05_EduDetail_UI_Page.ts:1-106` | 페이지 렌더링 로직 |
|
|
| `A05_EduDetail_UI_Style.css` | `A05_EduDetail/A05_EduDetail_UI_Style.css:1-87` | 스타일 (theme.css 변수만 사용) |
|
|
|
|
## 컴포넌트 (섹션 빌더)
|
|
|
|
| 함수 | 위치 | 역할 |
|
|
|---|---|---|
|
|
| `buildHero()` | `A05_EduDetail/A05_EduDetail_UI_Page.ts:33-51` | Hero(제목+부제목), mist-violet→canvas 그라디언트 |
|
|
| `buildCourses()` | `A05_EduDetail/A05_EduDetail_UI_Page.ts:53-81` | 교육과정 3열 카드그리드(createCard 3개) |
|
|
| `buildCta()` | `A05_EduDetail/A05_EduDetail_UI_Page.ts:83-95` | 문의 CTA 버튼(variant: filled) |
|
|
| `renderA05EduDetail()` | `A05_EduDetail/A05_EduDetail_UI_Page.ts:100-105` | 페이지 진입점(3개 섹션 조립) |
|
|
|
|
## 로컬라이제이션
|
|
|
|
모든 텍스트는 `ui_locales[key][currentLanguageIndex]` 형식으로 [[ui_templates]]에서 로드.
|
|
하드코딩 금지.
|
|
|
|
| UI 요소 | 로케일 키 |
|
|
|---|---|
|
|
| 제목 | `A05_EduDetail_Title` |
|
|
| 히어로 부제목 | `A05_EduDetail_Hero_Subtitle` |
|
|
| 과정 섹션 제목 | `A05_EduDetail_Course_SectionTitle` |
|
|
| 과정 1~3 | `A05_EduDetail_Course{1..3}_Title`, `A05_EduDetail_Course{1..3}_Desc` |
|
|
| CTA 버튼 라벨 | `A05_EduDetail_Cta` |
|
|
|
|
## 스타일 (CSS)
|
|
|
|
### CSS 클래스 구조
|
|
- `.a05-edu-detail` — 페이지 래퍼 (flex column, gap: section-gap)
|
|
- `.a05-hero` — 그래디언트 배경
|
|
- `.a05-hero__inner` — 중앙 정렬 컨테이너
|
|
- `.a05-hero__title` — heading-lg, deep-iris, max 18자
|
|
- `.a05-hero__subtitle` — body 텍스트, slate, max 56자
|
|
- `.a05-section` — 공통 섹션 (max-width: page-max-width, padding: spacing-32)
|
|
- `.a05-section__title` — heading-sm, deep-iris, 중앙 정렬
|
|
- `.a05-course-grid` — 3열 그리드 (gap: spacing-24)
|
|
- `.a05-course-card` — 카드 (min-height: 140px)
|
|
- `.a05-course__desc` — body-sm, slate
|
|
- `.a05-cta` — align-items: center (버튼 중앙 정렬)
|
|
|
|
### 반응형
|
|
- **900px 이하:** 과정 그리드 1열, 히어로 제목 폰트 축소
|
|
|
|
## 이벤트 핸들러
|
|
|
|
| 함수 | 위치 | 동작 |
|
|
|---|---|---|
|
|
| `onA05_EduDetail_Inquiry_Click()` | A05_EduDetail_UI_Page.ts:26-28 | A08_SUPPORT로 이동 |
|
|
|
|
## 의존성
|
|
|
|
- [[a00_app_shell_framework]] — `navigateTo()` 라우팅
|
|
- `config_frontend.ts` — `ROUTES` 상수 (A08_SUPPORT)
|
|
- [[ui_templates]] — `createButton()`, `createCard()` 공통 컴포넌트 + 다국어
|