Files
Aislo/A03_CompDetail/A03_CompDetail_UI_Page.ts
T
eomsangdonandClaude Sonnet 5.5 25adc2f0e7 refactor(공개화면): A01~A09 · B10 · B11 을 공개 화면 틀 · 카드 · 알림 · 배지 · 체크 · 접이 부품으로 (PLAN 553-7)
- 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>
2026-10-26 21:56:42 +09:00

71 lines
2.7 KiB
TypeScript

/* =============================================================================
* A03_CompDetail_UI_Page.ts
* 로그인 전 03: 회사 상세 (미션 + 핵심 가치 + 연락처)
*
* 제약 준수:
* - 모든 문구는 ui_template_locale.ts 참조 (하드코딩 금지).
* - 색상/간격은 A03_CompDetail_UI_Style.css + theme.css 변수만 사용.
* - 공통 부품(createPublicFrame/createCard) 우선 사용.
* ========================================================================== */
import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
import { createCard } from "@ui/ui_template_elements";
import { createPublicFrame } from "@ui/ui_template_public_layout";
import { createText } from "@ui/ui_template_text";
import "./A03_CompDetail_UI_Style.css";
/** locale 헬퍼 */
function L(key: keyof typeof ui_locales): string {
return ui_locales[key][currentLanguageIndex];
}
/* -----------------------------------------------------------------------------
* 섹션 빌더
* -------------------------------------------------------------------------- */
function buildMission(): HTMLElement {
const body = document.createElement("p");
body.className = "a03-mission__body";
body.textContent = L("A03_CompDetail_Mission_Body");
return body;
}
function buildValues(): HTMLElement {
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 card = createCard({ title: L(titleKey), body: [createText(L(descKey), "muted", 14)] });
card.classList.add("a03-value-card");
grid.append(card);
}
return grid;
}
function buildContact(): HTMLElement {
const email = document.createElement("p");
email.className = "a03-contact__email";
email.textContent = L("A03_CompDetail_Contact_Email");
return email;
}
/* -----------------------------------------------------------------------------
* 페이지 진입점
* -------------------------------------------------------------------------- */
export function renderA03CompDetail(root: HTMLElement): void {
const frame = createPublicFrame({
title: L("A03_CompDetail_Title"),
lead: L("A03_CompDetail_Hero_Subtitle"),
wide: true,
});
frame.addSection(L("A03_CompDetail_Mission_SectionTitle")).append(buildMission());
frame.addSection(L("A03_CompDetail_Value_SectionTitle")).append(buildValues());
frame.addSection(L("A03_CompDetail_Contact_SectionTitle")).append(buildContact());
root.append(frame.root);
}