Aislo/A00_Common/main.ts

/* =============================================================================
 * main.ts
 * 프론트엔드 애플리케이션 진입점
 *
 * - 공통 컴포넌트/셸 스타일 주입
 * - 테마/언어 복원
 * - 앱 셸(헤더/푸터) 렌더 후 라우터 시작
 * - hashchange 1회 구독: 셸 chrome 갱신 + 현재 라우트 렌더
 * ========================================================================== */

import "@ui/ui_template_theme.css";
import { injectBaseStyles } from "@ui/ui_template_elements";
import { ROUTES, type RoutePath } from "@config/config_frontend";
import { initThemeAndLang, injectShellStyles, renderShell } from "./app_shell";
import { currentRoute, renderCurrentRoute, ensureInitialHash } from "./router";

const FOOTERLESS_ROUTES: readonly RoutePath[] = [
  ROUTES.B01_ACCOUNT,
  ROUTES.B02_PROJ_REGISTER,
  ROUTES.B03_FILE_INPUT,
  ROUTES.B04_PREPROCESS,
  ROUTES.B05_PROFILE,
  ROUTES.B06_SECTION,
  ROUTES.B07_QUANTITY,
  ROUTES.B08_DESIGN_DETAIL,
  ROUTES.B09_WF6_ESTIMATION,
  ROUTES.B10_PAYMENT,
  ROUTES.B11_STATUS,
];

function bootstrap(): void {
  const appRoot = document.getElementById("app");
  if (!appRoot) {
    throw new Error("[main] #app 루트 요소를 찾을 수 없습니다.");
  }

  // 1. 스타일 주입 (공통 컴포넌트 + 셸)
  injectBaseStyles();
  injectShellStyles();

  // 2. 테마/언어 복원
  initThemeAndLang();

  // 3. 셸 렌더 + 현재 라우트 렌더를 함께 수행하는 헬퍼
  const renderAll = (): void => {
    const showFooter = !FOOTERLESS_ROUTES.includes(currentRoute());
    const outlet = renderShell(appRoot, showFooter); // 헤더/푸터(로그인·언어 반영) 갱신
    void renderCurrentRoute(outlet); // 아울렛에 페이지 렌더
  };

  // 4. hashchange 1회 구독 (리스너 누적 방지)
  window.addEventListener("hashchange", renderAll);

  // 5. 최초 진입
  ensureInitialHash();
  renderAll();
}

bootstrap();