feat: split seatmap admin and readonly flows

frontend/public/app.js

@@ -11,34 +11,100 @@ const currentViewTitle = document.getElementById("current-view-title");
 const navButtons = Array.from(document.querySelectorAll(".header-center [data-view]"));
 const organizationFrame = document.getElementById("organization-frame");
 const organizationStage = document.getElementById("organization-stage");
-const seatMapStage = document.getElementById("seatmap-stage");
+const seatMapAdminStage = document.getElementById("seatmap-admin-stage");
+const seatMapReadonlyStage = document.getElementById("seatmap-readonly-stage");
 const emptyStage = document.getElementById("empty-stage");
 
-const seatMapName = document.getElementById("seatmap-name");
-const seatMapStatus = document.getElementById("seatmap-status");
-const seatMapSaveBtn = document.getElementById("seatmap-save-btn");
-const seatMapCancelBtn = document.getElementById("seatmap-cancel-btn");
-const seatMapBoardWrap = document.getElementById("seatmap-board-wrap");
-const seatMapBoard = document.getElementById("seatmap-board");
-const seatMapEmpty = document.getElementById("seatmap-empty");
-const seatMapSettingsPanel = document.getElementById("seatmap-settings-panel");
-const seatMapSettingsForm = document.getElementById("seatmap-settings-form");
-const seatMapFormName = document.getElementById("seatmap-form-name");
-const seatMapFileName = document.getElementById("seatmap-file-name");
-const seatMapFormRows = document.getElementById("seatmap-form-rows");
-const seatMapFormCols = document.getElementById("seatmap-form-cols");
-const seatMapFormGap = document.getElementById("seatmap-form-gap");
-const seatMapFormImage = document.getElementById("seatmap-form-image");
-const seatMapSearch = document.getElementById("seatmap-search");
-const seatMapUnassigned = document.getElementById("seatmap-unassigned");
+const seatMapDom = {
+  admin: {
+    stage: seatMapAdminStage,
+    name: document.getElementById("seatmap-admin-name"),
+    status: document.getElementById("seatmap-admin-status"),
+    saveBtn: document.getElementById("seatmap-admin-save-btn"),
+    cancelBtn: null,
+    exitBtn: document.getElementById("seatmap-admin-exit-btn"),
+    actions: document.getElementById("seatmap-admin-actions"),
+    boardWrap: document.getElementById("seatmap-admin-board-wrap"),
+    board: document.getElementById("seatmap-admin-board"),
+    empty: document.getElementById("seatmap-admin-empty"),
+    settingsPanel: document.getElementById("seatmap-admin-settings-panel"),
+    settingsForm: document.getElementById("seatmap-admin-settings-form"),
+    formName: document.getElementById("seatmap-admin-form-name"),
+    fileName: document.getElementById("seatmap-admin-file-name"),
+    formRows: null,
+    formCols: null,
+    formGap: null,
+    formImage: document.getElementById("seatmap-admin-form-image"),
+    search: document.getElementById("seatmap-admin-search"),
+    unassigned: document.getElementById("seatmap-admin-unassigned"),
+    officeTabs: document.getElementById("seatmap-admin-office-tabs"),
+    sidebarTitle: document.getElementById("seatmap-admin-sidebar-title"),
+    sidebarDesc: document.getElementById("seatmap-admin-sidebar-desc"),
+  },
+  readonly: {
+    stage: seatMapReadonlyStage,
+    name: document.getElementById("seatmap-readonly-name"),
+    status: document.getElementById("seatmap-readonly-status"),
+    saveBtn: null,
+    cancelBtn: null,
+    exitBtn: document.getElementById("seatmap-readonly-exit-btn"),
+    actions: document.getElementById("seatmap-readonly-actions"),
+    boardWrap: document.getElementById("seatmap-readonly-board-wrap"),
+    board: document.getElementById("seatmap-readonly-board"),
+    empty: document.getElementById("seatmap-readonly-empty"),
+    settingsPanel: null,
+    settingsForm: null,
+    formName: null,
+    fileName: null,
+    formRows: null,
+    formCols: null,
+    formGap: null,
+    formImage: null,
+    search: document.getElementById("seatmap-readonly-search"),
+    unassigned: document.getElementById("seatmap-readonly-unassigned"),
+    officeTabs: document.getElementById("seatmap-readonly-office-tabs"),
+    sidebarTitle: document.getElementById("seatmap-readonly-sidebar-title"),
+    sidebarDesc: document.getElementById("seatmap-readonly-sidebar-desc"),
+  },
+};
+
+let seatMapName = seatMapDom.admin.name;
+let seatMapStatus = seatMapDom.admin.status;
+let seatMapSaveBtn = seatMapDom.admin.saveBtn;
+let seatMapCancelBtn = seatMapDom.admin.cancelBtn;
+let seatMapExitBtn = seatMapDom.admin.exitBtn;
+let seatMapActions = seatMapDom.admin.actions;
+let seatMapBoardWrap = seatMapDom.admin.boardWrap;
+let seatMapBoard = seatMapDom.admin.board;
+let seatMapEmpty = seatMapDom.admin.empty;
+let seatMapSettingsPanel = seatMapDom.admin.settingsPanel;
+let seatMapSettingsForm = seatMapDom.admin.settingsForm;
+let seatMapFormName = seatMapDom.admin.formName;
+let seatMapFileName = seatMapDom.admin.fileName;
+let seatMapFormRows = seatMapDom.admin.formRows;
+let seatMapFormCols = seatMapDom.admin.formCols;
+let seatMapFormGap = seatMapDom.admin.formGap;
+let seatMapFormImage = seatMapDom.admin.formImage;
+let seatMapSearch = seatMapDom.admin.search;
+let seatMapUnassigned = seatMapDom.admin.unassigned;
+let seatMapOfficeTabs = seatMapDom.admin.officeTabs;
+let seatMapSidebarTitle = seatMapDom.admin.sidebarTitle;
+let seatMapSidebarDesc = seatMapDom.admin.sidebarDesc;
 const APP_BASE_URL = String(window.__MH_BASE_URL || "").replace(/\/$/, "");
 
+const seatMapOffices = [
+  { key: "technical-development-center", label: "기술개발센터", ready: true },
+  { key: "hanmac-building-7f", label: "한맥빌딩 7층", ready: false },
+  { key: "hanmac-building-6f", label: "한맥빌딩 6층", ready: false },
+];
+
 const viewLabels = {
   ledger: "사업관리대장",
   project: "프로젝트별 분석",
   team: "팀/개인별 분석",
   organization: "조직 현황",
-  seatmap: "조직 현황",
+  "seatmap-admin": "자리배치도",
+  "seatmap-readonly": "자리배치도",
 };
 
 const seatMapState = {
@@ -71,6 +137,8 @@ const seatMapState = {
   viewerDragStartY: 0,
   viewerDragOffsetX: 0,
   viewerDragOffsetY: 0,
+  officeKey: "technical-development-center",
+  forceReadOnly: false,
 };
 
 let currentView = "organization";
@@ -107,6 +175,48 @@ function isSlotBasedSeatMap() {
   return seatMapState.seatMap?.source_type === "dxf" || seatMapState.seatMap?.source_type === "fixed_html";
 }
 
+function canEditSeatMap() {
+  return isAdmin() && !seatMapState.forceReadOnly;
+}
+
+function getSeatMapScreenMode() {
+  return canEditSeatMap() ? "admin" : "readonly";
+}
+
+function isSeatMapAdminMode() {
+  return getSeatMapScreenMode() === "admin";
+}
+
+function syncSeatMapDomRefs() {
+  const dom = currentView === "seatmap-readonly" ? seatMapDom.readonly : seatMapDom.admin;
+  seatMapName = dom.name;
+  seatMapStatus = dom.status;
+  seatMapSaveBtn = dom.saveBtn;
+  seatMapCancelBtn = dom.cancelBtn;
+  seatMapExitBtn = dom.exitBtn;
+  seatMapActions = dom.actions;
+  seatMapBoardWrap = dom.boardWrap;
+  seatMapBoard = dom.board;
+  seatMapEmpty = dom.empty;
+  seatMapSettingsPanel = dom.settingsPanel;
+  seatMapSettingsForm = dom.settingsForm;
+  seatMapFormName = dom.formName;
+  seatMapFileName = dom.fileName;
+  seatMapFormRows = dom.formRows;
+  seatMapFormCols = dom.formCols;
+  seatMapFormGap = dom.formGap;
+  seatMapFormImage = dom.formImage;
+  seatMapSearch = dom.search;
+  seatMapUnassigned = dom.unassigned;
+  seatMapOfficeTabs = dom.officeTabs;
+  seatMapSidebarTitle = dom.sidebarTitle;
+  seatMapSidebarDesc = dom.sidebarDesc;
+}
+
+function getCurrentSeatMapOffice() {
+  return seatMapOffices.find((item) => item.key === seatMapState.officeKey) || seatMapOffices[0];
+}
+
 function escapeHtml(value) {
   return String(value ?? "")
     .replaceAll("&", "&")
@@ -443,14 +553,72 @@ function getMemberMap() {
   return new Map(seatMapState.members.map((member) => [Number(member.id), member]));
 }
 
+function getPlacementForMember(memberId) {
+  return getPlacementSource().find((item) => Number(item.member_id) === Number(memberId)) || null;
+}
+
+function memberMatchesSeatMapSearch(member) {
+  const keyword = seatMapState.search.trim().toLowerCase();
+  if (!keyword) return true;
+  const haystack = `${member.name || ""} ${member.department || ""} ${member.team || ""} ${member.rank || ""}`.toLowerCase();
+  return haystack.includes(keyword);
+}
+
+function getSidebarMembers() {
+  const members = isSeatMapAdminMode()
+    ? getUnassignedMembers()
+    : seatMapState.members.filter((member) => Boolean(getPlacementForMember(Number(member.id))));
+  return members.filter(memberMatchesSeatMapSearch);
+}
+
+function focusSeatMapMember(memberId) {
+  const placement = getPlacementForMember(memberId);
+  const member = getMemberMap().get(Number(memberId));
+  if (!placement) {
+    setSeatMapStatus("해당 인원은 아직 배치되지 않았습니다.", "info");
+    return;
+  }
+  const slot = getSeatSlotMap().get(Number(placement.seat_slot_id));
+  if (!slot) {
+    setSeatMapStatus("좌석 정보를 찾지 못했습니다.", "error");
+    return;
+  }
+  const frame = seatMapBoard?.querySelector("#seatmap-dxf-frame");
+  if (!frame?.contentWindow) {
+    setSeatMapStatus("현재 선택한 사무실 도면에서는 좌석을 표시할 수 없습니다.", "info");
+    return;
+  }
+  frame.contentWindow.postMessage(
+    { type: "seatmap-focus-chair", key: String(slot.slot_key), padding: 2600 },
+    window.location.origin,
+  );
+  setSeatMapStatus(`${member?.name || "구성원"} 좌석으로 이동했습니다.`, "info");
+}
+
+function renderSeatMapOfficeTabs() {
+  if (!seatMapOfficeTabs) return;
+  seatMapOfficeTabs.innerHTML = seatMapOffices.map((office) => `
+    <button
+      class="seatmap-office-tab${seatMapState.officeKey === office.key ? " active" : ""}"
+      type="button"
+      data-seatmap-office="${office.key}"
+    >${escapeHtml(office.label)}</button>
+  `).join("");
+}
+
 function getUnassignedMembers() {
   const placedIds = new Set(getPlacementSource().map((item) => Number(item.member_id)));
-  const keyword = seatMapState.search.trim().toLowerCase();
   return seatMapState.members.filter((member) => {
     if (placedIds.has(Number(member.id))) return false;
-    if (!keyword) return true;
-    const haystack = `${member.name || ""} ${member.department || ""} ${member.team || ""}`.toLowerCase();
-    return haystack.includes(keyword);
+    return memberMatchesSeatMapSearch(member);
+  });
+}
+
+function getPlacedMembers() {
+  const placedIds = new Set(getPlacementSource().map((item) => Number(item.member_id)));
+  return seatMapState.members.filter((member) => {
+    if (!placedIds.has(Number(member.id))) return false;
+    return memberMatchesSeatMapSearch(member);
   });
 }
 
@@ -553,6 +721,21 @@ function renderUnassignedMemberCard(member, draggable) {
   `;
 }
 
+function renderSeatMapSearchCard(member) {
+  const placement = getPlacementForMember(Number(member.id));
+  if (!placement) return "";
+  const badge = `<span class="seatmap-member-badge occupied">${escapeHtml(placement.seat_label || "배치완료")}</span>`;
+  return `
+    <button class="seatmap-member-search-card" type="button" data-member-id="${Number(member.id)}">
+      <span class="seatmap-member-text seatmap-member-text-inline">
+        <strong>${escapeHtml(member.name || "-")}</strong>
+        <em>${escapeHtml(member.rank || member.department || "-")}</em>
+      </span>
+      ${badge}
+    </button>
+  `;
+}
+
 function renderSeatMapBoard() {
   if (!seatMapBoard || !seatMapState.seatMap) return;
 
@@ -643,6 +826,10 @@ function getSeatAssignmentPayload() {
 function syncSeatMapViewerFrame() {
   const frame = seatMapBoard?.querySelector("#seatmap-dxf-frame");
   if (!frame?.contentWindow) return;
+  frame.contentWindow.postMessage(
+    { type: "seatmap-set-mode", mode: isSeatMapAdminMode() ? "default" : "readonly" },
+    window.location.origin,
+  );
   frame.contentWindow.postMessage(
     { type: "seatmap-set-placed", keys: getDraftPlacedSlotKeys() },
     window.location.origin,
@@ -653,14 +840,23 @@ function syncSeatMapViewerFrame() {
   );
 }
 
-function updateSeatMapDraftUi() {
+function renderSeatMapActions() {
+  const hasSeatMap = Boolean(seatMapState.seatMap);
+  const adminMode = isSeatMapAdminMode();
   if (seatMapSaveBtn) {
-    seatMapSaveBtn.hidden = !isAdmin() || !seatMapState.seatMap;
+    seatMapSaveBtn.hidden = !adminMode || !hasSeatMap;
     seatMapSaveBtn.disabled = !seatMapState.dirty;
   }
-  if (seatMapCancelBtn) {
-    seatMapCancelBtn.hidden = !seatMapState.seatMap;
+  if (seatMapExitBtn) {
+    seatMapExitBtn.hidden = !hasSeatMap;
   }
+  if (seatMapActions) {
+    seatMapActions.hidden = !hasSeatMap;
+  }
+}
+
+function updateSeatMapDraftUi() {
+  renderSeatMapActions();
   renderUnassignedMembers();
   syncSeatMapViewerFrame();
 }
@@ -700,25 +896,80 @@ function setupSeatMapViewerFrame() {
   }, { once: true });
 }
 
-function renderUnassignedMembers() {
-  if (!seatMapUnassigned) return;
-  const editable = seatMapState.editMode && isAdmin();
-  const members = getUnassignedMembers();
-
-  if (!members.length) {
+function renderAdminSeatMapSidebar() {
+  const unassignedMembers = getUnassignedMembers();
+  const placedMembers = getPlacedMembers();
+  if (seatMapSidebarTitle) {
+    seatMapSidebarTitle.textContent = "전체 인원";
+  }
+  if (seatMapSidebarDesc) {
+    seatMapSidebarDesc.textContent = "미배치 인원은 상단, 배치 완료 인원은 하단에 표시됩니다.";
+  }
+  if (!unassignedMembers.length && !placedMembers.length) {
     seatMapUnassigned.innerHTML = `
       <div class="seatmap-list-empty">
-        ${seatMapState.search ? "검색 결과가 없습니다." : "미배치 인원이 없습니다."}
+        ${seatMapState.search ? "검색 결과가 없습니다." : "표시할 인원이 없습니다."}
       </div>
     `;
     return;
   }
+  seatMapUnassigned.innerHTML = `
+    <section class="seatmap-member-section">
+      <div class="seatmap-member-section-head">
+        <strong>미배치 인원</strong>
+        <span>${unassignedMembers.length}명</span>
+      </div>
+      <div class="seatmap-member-section-list">
+        ${unassignedMembers.length
+          ? unassignedMembers.map((member) => renderUnassignedMemberCard(member, true)).join("")
+          : '<div class="seatmap-list-empty seatmap-list-empty-inline">미배치 인원이 없습니다.</div>'}
+      </div>
+    </section>
+    <section class="seatmap-member-section">
+      <div class="seatmap-member-section-head">
+        <strong>배치 완료</strong>
+        <span>${placedMembers.length}명</span>
+      </div>
+      <div class="seatmap-member-section-list">
+        ${placedMembers.length
+          ? placedMembers.map((member) => renderSeatMapSearchCard(member)).join("")
+          : '<div class="seatmap-list-empty seatmap-list-empty-inline">배치된 인원이 없습니다.</div>'}
+      </div>
+    </section>
+  `;
+}
 
-  seatMapUnassigned.innerHTML = members.map((member) => renderUnassignedMemberCard(member, editable)).join("");
+function renderReadonlySeatMapSidebar() {
+  const members = getSidebarMembers();
+  if (seatMapSidebarTitle) {
+    seatMapSidebarTitle.textContent = "배치 인원 검색";
+  }
+  if (seatMapSidebarDesc) {
+    seatMapSidebarDesc.textContent = "이름이나 부서를 검색하고 클릭하면 해당 좌석으로 바로 확대 이동합니다.";
+  }
+  if (!members.length) {
+    seatMapUnassigned.innerHTML = `
+      <div class="seatmap-list-empty">
+        ${seatMapState.search ? "검색 결과가 없습니다." : "배치된 인원이 없습니다."}
+      </div>
+    `;
+    return;
+  }
+  seatMapUnassigned.innerHTML = members.map((member) => renderSeatMapSearchCard(member)).join("");
+}
+
+function renderUnassignedMembers() {
+  if (!seatMapUnassigned) return;
+  if (isSeatMapAdminMode()) {
+    renderAdminSeatMapSidebar();
+    return;
+  }
+  renderReadonlySeatMapSidebar();
 }
 
 function renderSeatMapEmpty() {
   if (!seatMapEmpty) return;
+  const office = getCurrentSeatMapOffice();
   if (seatMapState.seatMap) {
     seatMapEmpty.classList.add("hidden");
     seatMapEmpty.innerHTML = "";
@@ -728,8 +979,8 @@ function renderSeatMapEmpty() {
   seatMapEmpty.classList.remove("hidden");
   seatMapEmpty.innerHTML = `
     <div class="seatmap-empty-card">
-      <strong>등록된 자리배치도가 없습니다.</strong>
-      <p>${isAdmin() ? "오른쪽 설정 패널에서 이미지와 그리드를 등록하세요." : "관리자에게 자리배치도 등록을 요청하세요."}</p>
+      <strong>${escapeHtml(office.label)} 도면이 아직 준비되지 않았습니다.</strong>
+      <p>${office.ready ? (canEditSeatMap() ? "오른쪽 설정 패널에서 이미지와 그리드를 등록하세요." : "관리자에게 자리배치도 등록을 요청하세요.") : "도면 파일을 추후 연결하면 여기서 바로 전환해 볼 수 있습니다."}</p>
     </div>
   `;
 }
@@ -758,11 +1009,12 @@ function syncSeatMapSettingsForm() {
 
 function renderSeatMap() {
   const hasSeatMap = Boolean(seatMapState.seatMap);
-  const admin = isAdmin();
+  const admin = isSeatMapAdminMode();
   const fixedViewerMap = seatMapState.seatMap?.source_type === "fixed_html";
+  const office = getCurrentSeatMapOffice();
 
   if (seatMapName) {
-    seatMapName.textContent = hasSeatMap ? seatMapState.seatMap.name : "자리배치도";
+    seatMapName.textContent = hasSeatMap ? seatMapState.seatMap.name : office.label;
   }
   if (seatMapStatus) {
     seatMapStatus.textContent = seatMapState.status;
@@ -771,16 +1023,11 @@ function renderSeatMap() {
   if (seatMapSettingsPanel) {
     seatMapSettingsPanel.classList.toggle("hidden", !admin || fixedViewerMap);
   }
-  if (seatMapSaveBtn) {
-    seatMapSaveBtn.hidden = !admin || !hasSeatMap;
-    seatMapSaveBtn.disabled = !seatMapState.dirty;
-  }
-  if (seatMapCancelBtn) {
-    seatMapCancelBtn.hidden = !hasSeatMap;
-  }
+  renderSeatMapActions();
   if (seatMapSettingsForm) {
     seatMapSettingsForm.querySelector("button[type='submit']").textContent = hasSeatMap ? "배치도 저장" : "배치도 생성";
   }
+  renderSeatMapOfficeTabs();
 
   renderSeatMapEmpty();
   if (seatMapBoardWrap) {
@@ -797,15 +1044,16 @@ function renderSeatMap() {
 function handleEmbeddedNavigationMessage(event) {
   const data = event.data;
   if (!data || typeof data !== "object") return;
-  if (data.type === "open-seatmap" && isAdmin()) {
+  if (data.type === "open-seatmap") {
     hideUserPopover();
-    setActiveView("seatmap");
+    seatMapState.forceReadOnly = Boolean(data.readOnly);
+    setActiveView(data.readOnly ? "seatmap-readonly" : "seatmap-admin");
   }
   if (data.type === "open-organization") {
     hideUserPopover();
     setActiveView("organization");
   }
-  if (data.type === "seatmap-clear-slot" && isAdmin()) {
+  if (data.type === "seatmap-clear-slot" && canEditSeatMap()) {
     const cleared = clearDraftPlacementBySlotKey(String(data.key || ""));
     if (cleared) {
       setSeatMapStatus("구성원을 공석으로 이동했습니다. 저장 버튼으로 반영하세요.", "info");
@@ -838,6 +1086,22 @@ async function loadSeatMapData(force = false) {
   renderSeatMap();
 
   try {
+    const office = getCurrentSeatMapOffice();
+    if (!office.ready) {
+      const membersPayload = await fetchJson("/api/members");
+      seatMapState.seatMap = null;
+      seatMapState.members = Array.isArray(membersPayload.items) ? membersPayload.items : [];
+      seatMapState.slots = [];
+      seatMapState.placements = [];
+      seatMapState.zoom = 1;
+      seatMapState.hoveredSlotId = null;
+      seatMapState.editMode = canEditSeatMap();
+      resetSeatMapDraft();
+      seatMapState.loaded = true;
+      setSeatMapStatus(`${office.label} 도면은 아직 등록 전입니다.`, "info");
+      renderSeatMap();
+      return;
+    }
     const activePayload = await fetchJson("/api/seat-maps/active");
     const activeSeatMap = activePayload.item;
     const layoutPayload = await fetchJson(`/api/seat-maps/${activeSeatMap.id}/layout`);
@@ -850,10 +1114,10 @@ async function loadSeatMapData(force = false) {
     seatMapState.placements = clonePlacements(layoutPayload.placements || []);
     seatMapState.zoom = 1;
     seatMapState.hoveredSlotId = null;
-    seatMapState.editMode = isAdmin();
+    seatMapState.editMode = canEditSeatMap();
     resetSeatMapDraft();
     seatMapState.loaded = true;
-    setSeatMapStatus(isAdmin() ? "구성원을 바로 드래그해서 배치한 뒤 저장하세요." : "자리배치도를 불러왔습니다.", "success");
+    setSeatMapStatus(canEditSeatMap() ? "구성원을 바로 드래그해서 배치한 뒤 저장하세요." : "자리배치도를 불러왔습니다.", "success");
     syncSeatMapSettingsForm();
   } catch (error) {
     if (error.status === 404) {
@@ -863,7 +1127,7 @@ async function loadSeatMapData(force = false) {
       seatMapState.placements = [];
       seatMapState.zoom = 1;
       seatMapState.hoveredSlotId = null;
-      seatMapState.editMode = isAdmin();
+      seatMapState.editMode = canEditSeatMap();
       resetSeatMapDraft();
       seatMapState.loaded = true;
       setSeatMapStatus("활성화된 자리배치도가 없습니다.", "info");
@@ -914,7 +1178,7 @@ async function uploadSeatMapImage(file, name) {
 
 async function submitSeatMapSettings(event) {
   event.preventDefault();
-  if (!isAdmin()) return;
+  if (!canEditSeatMap()) return;
 
   const name = seatMapFormName?.value?.trim() || "";
   const imageFile = seatMapFormImage?.files?.[0] || null;
@@ -965,8 +1229,8 @@ async function saveSeatLayout() {
 
 function cancelSeatMapEdit() {
   resetSeatMapDraft();
-  setSeatMapStatus("", "info");
-  setActiveView("organization");
+  setSeatMapStatus("현재까지 수정한 배치를 취소했습니다.", "info");
+  renderSeatMap();
 }
 
 function getDraggedMemberId(event) {
@@ -1017,6 +1281,7 @@ function handleSeatMapListDrop(event) {
 function setActiveView(view) {
   const previousView = currentView;
   currentView = view in viewLabels ? view : "organization";
+  syncSeatMapDomRefs();
   if (currentViewTitle) {
     currentViewTitle.textContent = viewLabels[currentView];
   }
@@ -1028,17 +1293,22 @@ function setActiveView(view) {
   });
 
   const isOrganization = currentView === "organization";
-  const isSeatMap = currentView === "seatmap";
+  const isSeatMapAdmin = currentView === "seatmap-admin";
+  const isSeatMapReadonly = currentView === "seatmap-readonly";
   if (organizationStage) {
     organizationStage.hidden = !isOrganization;
     organizationStage.style.display = isOrganization ? "flex" : "none";
   }
-  if (seatMapStage) {
-    seatMapStage.hidden = !isSeatMap;
-    seatMapStage.style.display = isSeatMap ? "flex" : "none";
+  if (seatMapAdminStage) {
+    seatMapAdminStage.hidden = !isSeatMapAdmin;
+    seatMapAdminStage.style.display = isSeatMapAdmin ? "flex" : "none";
+  }
+  if (seatMapReadonlyStage) {
+    seatMapReadonlyStage.hidden = !isSeatMapReadonly;
+    seatMapReadonlyStage.style.display = isSeatMapReadonly ? "flex" : "none";
   }
   if (emptyStage) {
-    const showEmpty = !isOrganization && !isSeatMap;
+    const showEmpty = !isOrganization && !isSeatMapAdmin && !isSeatMapReadonly;
     emptyStage.hidden = !showEmpty;
     emptyStage.style.display = showEmpty ? "flex" : "none";
   }
@@ -1047,7 +1317,7 @@ function setActiveView(view) {
     const frameSrc = organizationFrame.dataset.src || organizationFrame.src;
     organizationFrame.src = resolveAppUrl(frameSrc);
   }
-  if (isSeatMap) {
+  if (isSeatMapAdmin || isSeatMapReadonly) {
     loadSeatMapData();
   }
 }
@@ -1101,7 +1371,7 @@ if (loginForm) {
       loginForm.reset();
       loginMessage.textContent = "";
       renderAuth();
-      if (currentView === "seatmap") {
+      if (currentView === "seatmap-admin" || currentView === "seatmap-readonly") {
         await loadSeatMapData(true);
       }
     } catch (error) {
@@ -1133,45 +1403,77 @@ navButtons.forEach((button) => {
   });
 });
 
-if (seatMapSettingsForm) {
-  seatMapSettingsForm.addEventListener("submit", submitSeatMapSettings);
-}
-
-if (seatMapSaveBtn) {
-  seatMapSaveBtn.addEventListener("click", saveSeatLayout);
-}
-
-if (seatMapCancelBtn) {
-  seatMapCancelBtn.addEventListener("click", cancelSeatMapEdit);
-}
-
-if (seatMapSearch) {
-  seatMapSearch.addEventListener("input", () => {
-    seatMapState.search = seatMapSearch.value || "";
-    renderSeatMap();
+Object.values(seatMapDom).forEach((dom) => {
+  dom.officeTabs?.addEventListener("click", (event) => {
+    const button = event.target.closest("[data-seatmap-office]");
+    if (!button) return;
+    const officeKey = button.dataset.seatmapOffice || "";
+    if (!officeKey || officeKey === seatMapState.officeKey) return;
+    seatMapState.officeKey = officeKey;
+    seatMapState.loaded = false;
+    seatMapState.search = "";
+    Object.values(seatMapDom).forEach((item) => {
+      if (item.search) item.search.value = "";
+    });
+    loadSeatMapData(true);
   });
-}
 
-if (seatMapFormImage) {
-  seatMapFormImage.addEventListener("change", () => {
-    if (seatMapFileName) {
-      seatMapFileName.textContent = seatMapFormImage.files?.[0]?.name || "선택된 파일 없음";
+  dom.settingsForm?.addEventListener("submit", submitSeatMapSettings);
+  dom.saveBtn?.addEventListener("click", saveSeatLayout);
+  dom.exitBtn?.addEventListener("click", () => {
+    if (dom === seatMapDom.admin && seatMapState.dirty) {
+      const confirmed = window.confirm("저장하지 않고 나가면 저장하지 않은 내용은 사라집니다. 나가시겠습니까?");
+      if (!confirmed) return;
+      resetSeatMapDraft();
+    }
+    hideUserPopover();
+    setActiveView("organization");
+  });
+  dom.search?.addEventListener("input", () => {
+    seatMapState.search = dom.search.value || "";
+    const otherMode = dom === seatMapDom.admin ? seatMapDom.readonly : seatMapDom.admin;
+    if (otherMode.search) otherMode.search.value = seatMapState.search;
+    renderUnassignedMembers();
+  });
+
+  dom.unassigned?.addEventListener("click", (event) => {
+    const button = event.target.closest("[data-member-id]");
+    if (!button) return;
+    if (button.classList.contains("seatmap-member-search-card")) {
+      focusSeatMapMember(Number(button.dataset.memberId));
+      return;
+    }
+    if (canEditSeatMap()) return;
+    focusSeatMapMember(Number(button.dataset.memberId));
+  });
+  dom.unassigned?.addEventListener("dragover", (event) => {
+    if (!seatMapState.editMode) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+  });
+  dom.unassigned?.addEventListener("drop", handleSeatMapListDrop);
+});
+
+Object.values(seatMapDom).forEach((dom) => {
+  dom.formImage?.addEventListener("change", () => {
+    if (dom.fileName) {
+      dom.fileName.textContent = dom.formImage.files?.[0]?.name || "선택된 파일 없음";
     }
   });
-}
+});
 
-if (seatMapBoard) {
-  seatMapBoard.addEventListener("wheel", (event) => {
+Object.values(seatMapDom).forEach((dom) => {
+  dom.board?.addEventListener("wheel", (event) => {
     if (!isSlotBasedSeatMap()) return;
     event.preventDefault();
     zoomDxfSeatMapAtPoint(event.clientX, event.clientY, event.deltaY < 0 ? 1.08 : 0.92);
   }, { passive: false });
-  seatMapBoard.addEventListener("click", (event) => {
+  dom.board?.addEventListener("click", (event) => {
     const fitButton = event.target.closest("[data-seatmap-action='fit']");
     if (!fitButton) return;
     fitDxfSeatMapBoard();
   });
-  seatMapBoard.addEventListener("dragover", (event) => {
+  dom.board?.addEventListener("dragover", (event) => {
     if (!seatMapState.editMode) return;
     const target = isSlotBasedSeatMap()
       ? (event.target.closest(".seatmap-slot") || event.target.closest("#seatmap-dxf-canvas"))
@@ -1180,11 +1482,9 @@ if (seatMapBoard) {
     event.preventDefault();
     event.dataTransfer.dropEffect = "move";
   });
-  seatMapBoard.addEventListener("drop", handleSeatMapCellDrop);
-}
+  dom.board?.addEventListener("drop", handleSeatMapCellDrop);
 
-if (seatMapBoardWrap) {
-  seatMapBoardWrap.addEventListener("mousedown", (event) => {
+  dom.boardWrap?.addEventListener("mousedown", (event) => {
     if (!isSlotBasedSeatMap()) return;
     if (seatMapBoard?.querySelector("#seatmap-dxf-canvas")) return;
     if (event.button !== 0) return;
@@ -1197,13 +1497,13 @@ if (seatMapBoardWrap) {
     seatMapState.panScrollTop = seatMapBoardWrap.scrollTop;
     seatMapBoardWrap.classList.add("is-panning");
   });
-  seatMapBoardWrap.addEventListener("mouseleave", () => {
+  dom.boardWrap?.addEventListener("mouseleave", () => {
     if (seatMapBoard?.querySelector("#seatmap-dxf-canvas")) return;
     if (seatMapState.hoveredSlotId == null) return;
     seatMapState.hoveredSlotId = null;
     updateSeatMapViewerHoverChip();
   });
-  seatMapBoardWrap.addEventListener("mousemove", (event) => {
+  dom.boardWrap?.addEventListener("mousemove", (event) => {
     if (!isSlotBasedSeatMap()) return;
     if (seatMapBoard?.querySelector("#seatmap-dxf-canvas")) return;
     const slot = event.target.closest(".seatmap-slot");
@@ -1212,7 +1512,7 @@ if (seatMapBoardWrap) {
     seatMapState.hoveredSlotId = nextSlotId;
     updateSeatMapViewerHoverChip();
   });
-}
+});
 
 document.addEventListener("mousemove", (event) => {
   if (!seatMapState.panning || !seatMapBoardWrap) return;
@@ -1228,14 +1528,6 @@ document.addEventListener("mouseup", () => {
   seatMapBoardWrap.classList.remove("is-panning");
 });
 
-if (seatMapUnassigned) {
-  seatMapUnassigned.addEventListener("dragover", (event) => {
-    if (!seatMapState.editMode) return;
-    event.preventDefault();
-    event.dataTransfer.dropEffect = "move";
-  });
-  seatMapUnassigned.addEventListener("drop", handleSeatMapListDrop);
-}
 
 document.addEventListener("dragstart", (event) => {
   const card = event.target.closest(".seatmap-member-card");
@@ -1261,7 +1553,7 @@ setActiveView(currentView);
 renderAuth();
 
 window.addEventListener("resize", () => {
-  if (!isSlotBasedSeatMap() || currentView !== "seatmap") return;
+  if (!isSlotBasedSeatMap() || (currentView !== "seatmap-admin" && currentView !== "seatmap-readonly")) return;
   requestAnimationFrame(() => {
     if (seatMapState.zoom === 1) {
       centerSeatMapBoard();