114 lines
3.9 KiB
TypeScript
114 lines
3.9 KiB
TypeScript
/* =============================================================================
|
|
* A03_CompDetail_UI_Page.ts
|
|
* 로그인 전 03: 회사 상세 (미션 + 핵심 가치 + 연락처)
|
|
*
|
|
* 제약 준수:
|
|
* - 모든 문구는 ui_template_locale.ts 참조 (하드코딩 금지).
|
|
* - 색상/간격은 A03_CompDetail_UI_Style.css + theme.css 변수만 사용.
|
|
* - 공통 컴포넌트(createCard) 우선 사용.
|
|
* ========================================================================== */
|
|
|
|
import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
|
|
import { createCard } from "@ui/ui_template_elements";
|
|
import "./A03_CompDetail_UI_Style.css";
|
|
|
|
/** locale 헬퍼 */
|
|
function L(key: keyof typeof ui_locales): string {
|
|
return ui_locales[key][currentLanguageIndex];
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
* 섹션 빌더
|
|
* -------------------------------------------------------------------------- */
|
|
function buildHero(): HTMLElement {
|
|
const hero = document.createElement("section");
|
|
hero.className = "a03-hero";
|
|
|
|
const inner = document.createElement("div");
|
|
inner.className = "a03-hero__inner";
|
|
|
|
const title = document.createElement("h1");
|
|
title.className = "a03-hero__title";
|
|
title.textContent = L("A03_CompDetail_Title");
|
|
|
|
const subtitle = document.createElement("p");
|
|
subtitle.className = "a03-hero__subtitle";
|
|
subtitle.textContent = L("A03_CompDetail_Hero_Subtitle");
|
|
|
|
inner.append(title, subtitle);
|
|
hero.append(inner);
|
|
return hero;
|
|
}
|
|
|
|
function buildMission(): HTMLElement {
|
|
const section = document.createElement("section");
|
|
section.className = "a03-section";
|
|
|
|
const heading = document.createElement("h2");
|
|
heading.className = "a03-section__title";
|
|
heading.textContent = L("A03_CompDetail_Mission_SectionTitle");
|
|
|
|
const body = document.createElement("p");
|
|
body.className = "a03-mission__body";
|
|
body.textContent = L("A03_CompDetail_Mission_Body");
|
|
|
|
section.append(heading, body);
|
|
return section;
|
|
}
|
|
|
|
function buildValues(): HTMLElement {
|
|
const section = document.createElement("section");
|
|
section.className = "a03-section";
|
|
|
|
const heading = document.createElement("h2");
|
|
heading.className = "a03-section__title";
|
|
heading.textContent = L("A03_CompDetail_Value_SectionTitle");
|
|
|
|
const grid = document.createElement("div");
|
|
grid.className = "a03-value-grid";
|
|
|
|
const values: [keyof typeof ui_locales, keyof typeof ui_locales][] = [
|
|
["A03_CompDetail_Value1_Title", "A03_CompDetail_Value1_Desc"],
|
|
["A03_CompDetail_Value2_Title", "A03_CompDetail_Value2_Desc"],
|
|
["A03_CompDetail_Value3_Title", "A03_CompDetail_Value3_Desc"],
|
|
];
|
|
|
|
for (const [titleKey, descKey] of values) {
|
|
const desc = document.createElement("p");
|
|
desc.className = "a03-value__desc";
|
|
desc.textContent = L(descKey);
|
|
const card = createCard({ title: L(titleKey), body: [desc] });
|
|
card.classList.add("a03-value-card");
|
|
grid.append(card);
|
|
}
|
|
|
|
section.append(heading, grid);
|
|
return section;
|
|
}
|
|
|
|
function buildContact(): HTMLElement {
|
|
const section = document.createElement("section");
|
|
section.className = "a03-section";
|
|
|
|
const heading = document.createElement("h2");
|
|
heading.className = "a03-section__title";
|
|
heading.textContent = L("A03_CompDetail_Contact_SectionTitle");
|
|
|
|
const email = document.createElement("p");
|
|
email.className = "a03-contact__email";
|
|
email.textContent = L("A03_CompDetail_Contact_Email");
|
|
|
|
section.append(heading, email);
|
|
return section;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
* 페이지 진입점
|
|
* -------------------------------------------------------------------------- */
|
|
export function renderA03CompDetail(root: HTMLElement): void {
|
|
const page = document.createElement("div");
|
|
page.className = "a03-comp-detail";
|
|
page.append(buildHero(), buildMission(), buildValues(), buildContact());
|
|
root.append(page);
|
|
}
|