eomsangdonandClaude Sonnet 5.5
25adc2f0e7
- A01~A05 hero 다섯 벌 · 구역 제목 복제 CSS 걷고 공개 화면 틀 한 벌(wide 옵션 · 구역 제목 가운데 · 머리 아랫줄은 자리 안 먹는 그림자) - 카드 = 카드 부품(로그인 · 가입 · 지원 · 약관 · 기능 카드 · 소식 줄 · B11 단계 카드) · 지원 성공 · B10 안내 = 띠 알림 · 태그 = 배지 - A07 약관 날 체크 · 날 details = 체크 + 접이 부품 · A08 날 textarea = 입력 여러 줄 · 빈 소식 = 빈 상태 - 죽은 A07_Register_UI_Page · 쓰이지 않는 CSS 걷음 · 띠 알림 hidden 받음 - 지킴 시험 test_553_7_public_pages Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
74 lines
2.9 KiB
TypeScript
74 lines
2.9 KiB
TypeScript
/* =============================================================================
|
|
* A05_EduDetail_UI_Page.ts
|
|
* 로그인 전 05: 교육 상세 (교육 과정 소개 + 문의 CTA)
|
|
*
|
|
* 제약 준수:
|
|
* - 모든 문구는 ui_template_locale.ts 참조 (하드코딩 금지).
|
|
* - 색상/간격은 A05_EduDetail_UI_Style.css + theme.css 변수만 사용.
|
|
* - 공통 부품(createPublicFrame/createCard/createButton) 우선 사용.
|
|
* - 이벤트 핸들러는 on[페이지]_[기능]_[액션] 명명.
|
|
* ========================================================================== */
|
|
|
|
import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
|
|
import { createButton, createCard } from "@ui/ui_template_elements";
|
|
import { createPublicFrame } from "@ui/ui_template_public_layout";
|
|
import { createText } from "@ui/ui_template_text";
|
|
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 buildCourses(): HTMLElement {
|
|
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 card = createCard({ title: L(titleKey), body: [createText(L(descKey), "muted", 14)] });
|
|
card.classList.add("a05-course-card");
|
|
grid.append(card);
|
|
}
|
|
return grid;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
* 페이지 진입점
|
|
* -------------------------------------------------------------------------- */
|
|
export function renderA05EduDetail(root: HTMLElement): void {
|
|
const frame = createPublicFrame({
|
|
title: L("A05_EduDetail_Title"),
|
|
lead: L("A05_EduDetail_Hero_Subtitle"),
|
|
wide: true,
|
|
});
|
|
frame.addSection(L("A05_EduDetail_Course_SectionTitle")).append(buildCourses());
|
|
const cta = frame.addSection();
|
|
cta.classList.add("a05-cta");
|
|
cta.append(
|
|
createButton({
|
|
label: L("A05_EduDetail_Cta"),
|
|
variant: "filled",
|
|
onClick: onA05_EduDetail_Inquiry_Click,
|
|
}),
|
|
);
|
|
root.append(frame.root);
|
|
}
|