106 lines
3.6 KiB
TypeScript
106 lines
3.6 KiB
TypeScript
/* =============================================================================
|
|
* A05_EduDetail_UI_Page.ts
|
|
* 로그인 전 05: 교육 상세 (교육 과정 소개 + 문의 CTA)
|
|
*
|
|
* 제약 준수:
|
|
* - 모든 문구는 ui_template_locale.ts 참조 (하드코딩 금지).
|
|
* - 색상/간격은 A05_EduDetail_UI_Style.css + theme.css 변수만 사용.
|
|
* - 공통 컴포넌트(createButton/createCard) 우선 사용.
|
|
* - 이벤트 핸들러는 on[페이지]_[기능]_[액션] 명명.
|
|
* ========================================================================== */
|
|
|
|
import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
|
|
import { createButton, createCard } from "@ui/ui_template_elements";
|
|
import { navigateTo } from "../A00_Common/router";
|
|
import { ROUTES } from "@config/config_frontend";
|
|
import "./A05_EduDetail_UI_Style.css";
|
|
|
|
/** locale 헬퍼 */
|
|
function L(key: keyof typeof ui_locales): string {
|
|
return ui_locales[key][currentLanguageIndex];
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
* 이벤트 핸들러
|
|
* -------------------------------------------------------------------------- */
|
|
function onA05_EduDetail_Inquiry_Click(): void {
|
|
navigateTo(ROUTES.A08_SUPPORT);
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
* 섹션 빌더
|
|
* -------------------------------------------------------------------------- */
|
|
function buildHero(): HTMLElement {
|
|
const hero = document.createElement("section");
|
|
hero.className = "a05-hero";
|
|
|
|
const inner = document.createElement("div");
|
|
inner.className = "a05-hero__inner";
|
|
|
|
const title = document.createElement("h1");
|
|
title.className = "a05-hero__title";
|
|
title.textContent = L("A05_EduDetail_Title");
|
|
|
|
const subtitle = document.createElement("p");
|
|
subtitle.className = "a05-hero__subtitle";
|
|
subtitle.textContent = L("A05_EduDetail_Hero_Subtitle");
|
|
|
|
inner.append(title, subtitle);
|
|
hero.append(inner);
|
|
return hero;
|
|
}
|
|
|
|
function buildCourses(): HTMLElement {
|
|
const section = document.createElement("section");
|
|
section.className = "a05-section";
|
|
|
|
const heading = document.createElement("h2");
|
|
heading.className = "a05-section__title";
|
|
heading.textContent = L("A05_EduDetail_Course_SectionTitle");
|
|
|
|
const grid = document.createElement("div");
|
|
grid.className = "a05-course-grid";
|
|
|
|
const courses: [keyof typeof ui_locales, keyof typeof ui_locales][] = [
|
|
["A05_EduDetail_Course1_Title", "A05_EduDetail_Course1_Desc"],
|
|
["A05_EduDetail_Course2_Title", "A05_EduDetail_Course2_Desc"],
|
|
["A05_EduDetail_Course3_Title", "A05_EduDetail_Course3_Desc"],
|
|
];
|
|
|
|
for (const [titleKey, descKey] of courses) {
|
|
const desc = document.createElement("p");
|
|
desc.className = "a05-course__desc";
|
|
desc.textContent = L(descKey);
|
|
const card = createCard({ title: L(titleKey), body: [desc] });
|
|
card.classList.add("a05-course-card");
|
|
grid.append(card);
|
|
}
|
|
|
|
section.append(heading, grid);
|
|
return section;
|
|
}
|
|
|
|
function buildCta(): HTMLElement {
|
|
const section = document.createElement("section");
|
|
section.className = "a05-section a05-cta";
|
|
|
|
section.append(
|
|
createButton({
|
|
label: L("A05_EduDetail_Cta"),
|
|
variant: "filled",
|
|
onClick: onA05_EduDetail_Inquiry_Click,
|
|
}),
|
|
);
|
|
return section;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
* 페이지 진입점
|
|
* -------------------------------------------------------------------------- */
|
|
export function renderA05EduDetail(root: HTMLElement): void {
|
|
const page = document.createElement("div");
|
|
page.className = "a05-edu-detail";
|
|
page.append(buildHero(), buildCourses(), buildCta());
|
|
root.append(page);
|
|
}
|