status, page_id, related_pages, last_updated
| status |
page_id |
related_pages |
last_updated |
| stable |
A05_EduDetail |
|
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로 이동 |
의존성
