refactor: promote 8081 design system and served app structure

frontend/public/app.js

@@ -15,6 +15,8 @@ const organizationHistoryControls = document.getElementById("organization-histor
 const organizationMonthSelect = document.getElementById("organization-month-select");
 const organizationCompareBtn = document.getElementById("organization-compare-btn");
 const navButtons = Array.from(document.querySelectorAll(".header-center [data-view]"));
+const ledgerFrame = document.getElementById("ledger-frame");
+const ledgerStage = document.getElementById("ledger-stage");
 const organizationFrame = document.getElementById("organization-frame");
 const organizationStage = document.getElementById("organization-stage");
 const projectFrame = document.getElementById("project-frame");
@@ -151,7 +153,7 @@ const seatMapState = {
   forceReadOnly: false,
 };
 
-let currentView = "project";
+let currentView = "ledger";
 const globalDateState = {
   loaded: false,
   startDate: "",
@@ -364,6 +366,10 @@ function buildSeatMapAsOfQuery() {
 }
 
 function notifyEmbeddedTabActivated() {
+  if (currentView === "ledger" && ledgerFrame?.contentWindow) {
+    ledgerFrame.contentWindow.postMessage({ source: "total-control", type: "embedded-host" }, window.location.origin);
+    ledgerFrame.contentWindow.postMessage({ source: "total-control", type: "tab-activated", tab: "business" }, window.location.origin);
+  }
   if (currentView === "project" && projectFrame?.contentWindow) {
     projectFrame.contentWindow.postMessage({ source: "total-control", type: "tab-activated", tab: "project" }, window.location.origin);
   }
@@ -372,6 +378,49 @@ function notifyEmbeddedTabActivated() {
   }
 }
 
+let ledgerDefaultSourcePromise = null;
+
+async function fetchDefaultLedgerSource() {
+  if (!ledgerDefaultSourcePromise) {
+    ledgerDefaultSourcePromise = fetch("/api/integration/business-ledger-default")
+      .then(async (response) => {
+        if (!response.ok) {
+          throw new Error("기본 사업관리대장 원본을 불러오지 못했습니다.");
+        }
+        const fileName = response.headers.get("x-source-filename") || "사업관리대장-1.xlsx";
+        const buffer = await response.arrayBuffer();
+        if (!buffer || !buffer.byteLength) {
+          throw new Error("기본 사업관리대장 원본 데이터가 비어 있습니다.");
+        }
+        return { fileName, buffer };
+      })
+      .catch((error) => {
+        ledgerDefaultSourcePromise = null;
+        throw error;
+      });
+  }
+  return ledgerDefaultSourcePromise;
+}
+
+async function pushDefaultLedgerSourceToFrame(force = false) {
+  if (!ledgerFrame?.contentWindow) return;
+  if (ledgerFrame.dataset.defaultLedgerLoaded === "true" && !force) return;
+  try {
+    const { fileName, buffer } = await fetchDefaultLedgerSource();
+    ledgerFrame.contentWindow.postMessage(
+      { source: "total-control", type: "embedded-host" },
+      window.location.origin,
+    );
+    ledgerFrame.contentWindow.postMessage(
+      { source: "total-upload", type: "business", fileName, buffer },
+      window.location.origin,
+    );
+    ledgerFrame.dataset.defaultLedgerLoaded = "true";
+  } catch (error) {
+    console.error("사업관리대장 기본 원본 전달에 실패했습니다.", error);
+  }
+}
+
 async function ensureGlobalDateRangeLoaded() {
   if (globalDateState.loaded) return;
   try {
@@ -1571,10 +1620,15 @@ function setActiveView(view) {
   });
 
   const isOrganization = currentView === "organization";
+  const isLedger = currentView === "ledger";
   const isProject = currentView === "project";
   const isTeam = currentView === "team";
   const isSeatMapAdmin = currentView === "seatmap-admin";
   const isSeatMapReadonly = currentView === "seatmap-readonly";
+  if (ledgerStage) {
+    ledgerStage.hidden = !isLedger;
+    ledgerStage.style.display = isLedger ? "flex" : "none";
+  }
   if (organizationStage) {
     organizationStage.hidden = !isOrganization;
     organizationStage.style.display = isOrganization ? "flex" : "none";
@@ -1596,11 +1650,15 @@ function setActiveView(view) {
     seatMapReadonlyStage.style.display = isSeatMapReadonly ? "flex" : "none";
   }
   if (emptyStage) {
-    const showEmpty = !isOrganization && !isProject && !isTeam && !isSeatMapAdmin && !isSeatMapReadonly;
+    const showEmpty = !isLedger && !isOrganization && !isProject && !isTeam && !isSeatMapAdmin && !isSeatMapReadonly;
     emptyStage.hidden = !showEmpty;
     emptyStage.style.display = showEmpty ? "flex" : "none";
   }
 
+  if (isLedger && previousView !== "ledger" && ledgerFrame) {
+    const frameSrc = ledgerFrame.dataset.src || ledgerFrame.src;
+    ledgerFrame.src = resolveAppUrl(frameSrc);
+  }
   if (isOrganization && previousView !== "organization" && organizationFrame) {
     const frameSrc = organizationFrame.dataset.src || organizationFrame.src;
     organizationFrame.src = resolveAppUrl(frameSrc);
@@ -1671,7 +1729,7 @@ if (loginForm) {
         body: formData,
       });
       setSession(payload);
-      setActiveView("project");
+      setActiveView("ledger");
       loginForm.reset();
       loginMessage.textContent = "";
       renderAuth();
@@ -1728,6 +1786,13 @@ organizationFrame?.addEventListener("load", () => {
   postOrganizationHistoryState();
 });
 
+ledgerFrame?.addEventListener("load", () => {
+  if (currentView === "ledger") {
+    notifyEmbeddedTabActivated();
+  }
+  void pushDefaultLedgerSourceToFrame(true);
+});
+
 projectFrame?.addEventListener("load", () => {
   postGlobalDateRangeToFrame(projectFrame);
   if (currentView === "project") {