feat: split seatmap admin and readonly flows

2026-03-26 11:32:33 +09:00
parent 8efb5da65f
commit 69a14fab51
7 changed files with 852 additions and 182 deletions
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -986,7 +986,13 @@ def build_center_chair_viewer_html(layout: dict[str, object]) -> str:
        for slot in layout.get("slots", [])
        if slot.get("id") is not None and slot.get("slot_key") is not None
    }
+    members_by_id = {
+        int(member["id"]): member
+        for member in layout.get("members", [])
+        if member.get("id") is not None
+    }
    placed_keys: list[str] = []
+    assignment_items: list[dict[str, object]] = []
    for placement in layout.get("placements", []):
        slot_id = placement.get("seat_slot_id")
        if slot_id is None:
@@ -994,9 +1000,20 @@ def build_center_chair_viewer_html(layout: dict[str, object]) -> str:
        slot_key = slot_key_by_id.get(int(slot_id))
        if slot_key:
            placed_keys.append(slot_key)
+            member = members_by_id.get(int(placement.get("member_id") or 0))
+            if member:
+                assignment_items.append(
+                    {
+                        "key": slot_key,
+                        "member_id": int(member["id"]),
+                        "name": str(member.get("name") or "-"),
+                        "rank": str(member.get("rank") or "-"),
+                    }
+                )

    seat_map = layout.get("seat_map") or {}
    placed_literal = json.dumps(sorted(set(placed_keys)), ensure_ascii=False, separators=(",", ":"))
+    assignments_literal = json.dumps(assignment_items, ensure_ascii=False, separators=(",", ":"))
    if seat_map.get("source_type") == "fixed_html":
        html = parse_fixed_office_template()["html"]
    else:
@@ -1080,6 +1097,7 @@ def build_center_chair_viewer_html(layout: dict[str, object]) -> str:
    )
    bridge_script = """
  <style>
+    #fit-btn { display: none !important; }
    #clear-btn { display: none !important; }
    .seat-popup {
      position: absolute;
@@ -1126,12 +1144,12 @@ def build_center_chair_viewer_html(layout: dict[str, object]) -> str:
    }

    function setViewerMode(mode) {
-      viewerMode = mode === "compact" ? "compact" : "default";
+      viewerMode = mode === "compact" || mode === "readonly" ? mode : "default";
      const head = document.querySelector(".viewer-head");
      const actions = document.querySelector(".viewer-actions");
      if (head) head.style.display = viewerMode === "compact" ? "none" : "";
-      if (actions) actions.style.display = viewerMode === "compact" ? "none" : "";
-      if (viewerMode === "compact") {
+      if (actions) actions.style.display = viewerMode !== "default" ? "none" : "";
+      if (viewerMode !== "default") {
        hideSeatPopup();
        selectedChairKey = null;
      }
@@ -1147,7 +1165,7 @@ def build_center_chair_viewer_html(layout: dict[str, object]) -> str:
        <strong>${assignment.name}</strong>
        <div>직급: ${assignment.rank || "-"}</div>
        <div>상태: 배치완료</div>
-        <button type="button" data-seatmap-delete="${chairKey}">자리 비우기</button>
+        ${viewerMode === "default" ? `<button type="button" data-seatmap-delete="${chairKey}">자리 비우기</button>` : ""}
      `;
      popup.style.left = `${x + 18}px`;
      popup.style.top = `${y + 18}px`;
@@ -1219,6 +1237,44 @@ def build_center_chair_viewer_html(layout: dict[str, object]) -> str:
      tooltip.classList.add("visible");
    };

+    const originalDraw = draw;
+    draw = function drawWithAssignments() {
+      originalDraw();
+      if (!seatAssignments.size) return;
+      const rect = canvas.getBoundingClientRect();
+      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+      ctx.textBaseline = "middle";
+      for (const chair of chairGeometry) {
+        const assignment = getAssignment(chair.key);
+        if (!assignment) continue;
+        const center = worldToScreen((chair.minX + chair.maxX) / 2, (chair.minY + chair.maxY) / 2);
+        if (center.x < -120 || center.x > rect.width + 120 || center.y < -50 || center.y > rect.height + 50) continue;
+        const primary = `${assignment.name}`;
+        const secondary = `${assignment.rank || "-"}`;
+        ctx.font = "700 12px Pretendard, sans-serif";
+        const primaryWidth = ctx.measureText(primary).width;
+        ctx.font = "600 10px Pretendard, sans-serif";
+        const secondaryWidth = ctx.measureText(secondary).width;
+        const boxWidth = Math.max(primaryWidth, secondaryWidth) + 20;
+        const boxHeight = 34;
+        const boxX = center.x - boxWidth / 2;
+        const boxY = center.y - 46;
+        ctx.fillStyle = "rgba(255,255,255,0.96)";
+        ctx.strokeStyle = "rgba(220,38,38,0.18)";
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.roundRect(boxX, boxY, boxWidth, boxHeight, 10);
+        ctx.fill();
+        ctx.stroke();
+        ctx.fillStyle = "#111827";
+        ctx.font = "700 12px Pretendard, sans-serif";
+        ctx.fillText(primary, boxX + 10, boxY + 12);
+        ctx.fillStyle = "#6b7280";
+        ctx.font = "600 10px Pretendard, sans-serif";
+        ctx.fillText(secondary, boxX + 10, boxY + 25);
+      }
+    };
+
    window.__mhSeatmap = {
      getCanvas() { return document.getElementById("canvas"); },
      pickChairAt(x, y) { return typeof pickChair === "function" ? pickChair(x, y) : null; },
@@ -1232,6 +1288,8 @@ def build_center_chair_viewer_html(layout: dict[str, object]) -> str:
      setViewerMode,
    };

+    setAssignments(__INITIAL_ASSIGNMENTS__);
+
    canvas.addEventListener("click", (event) => {
      if (viewerMode === "compact") return;
      const rect = canvas.getBoundingClientRect();
@@ -1283,6 +1341,7 @@ def build_center_chair_viewer_html(layout: dict[str, object]) -> str:
    });
  </script>
 """
+    bridge_script = bridge_script.replace("__INITIAL_ASSIGNMENTS__", assignments_literal, 1)
    html = html.replace("</body>", f"{bridge_script}\n</body>", 1)
    return html

@@ -1381,11 +1440,73 @@ def get_member_count() -> int:
            return int(cur.fetchone()["count"])


+def merge_import_member(item: MemberPayload, existing: dict[str, object] | None) -> MemberPayload:
+    if existing is None:
+        return item
+
+    payload = item.model_copy(deep=True)
+    if not payload.photo_url.strip():
+        payload.photo_url = str(existing.get("photo_url") or "")
+    if not payload.seat_label.strip():
+        payload.seat_label = str(existing.get("seat_label") or "")
+    return payload
+
+
+def pick_existing_member(
+    item: MemberPayload,
+    existing_by_employee_id: dict[str, list[dict[str, object]]],
+    existing_by_name: dict[str, list[dict[str, object]]],
+    matched_ids: set[int],
+) -> dict[str, object] | None:
+    employee_id = item.employee_id.strip()
+    if employee_id:
+        for candidate in existing_by_employee_id.get(employee_id, []):
+            candidate_id = int(candidate["id"])
+            if candidate_id not in matched_ids:
+                return candidate
+
+    name = item.name.strip()
+    if name:
+        available = [
+            candidate
+            for candidate in existing_by_name.get(name, [])
+            if int(candidate["id"]) not in matched_ids
+        ]
+        if len(available) == 1:
+            return available[0]
+
+    return None
+
+
 def replace_members(items: list[MemberPayload]) -> list[dict[str, object]]:
    with get_conn() as conn:
        with conn.cursor() as cur:
-            cur.execute("TRUNCATE TABLE members RESTART IDENTITY CASCADE")
+            cur.execute(
+                """
+                SELECT id, name, employee_id, company, rank, role, department, grp, division, team, cell,
+                       work_status, work_time, phone, email, seat_label, photo_url,
+                       sort_order, created_at, updated_at
+                FROM members
+                ORDER BY id ASC
+                """
+            )
+            existing_members = cur.fetchall()
+
+            existing_by_employee_id: dict[str, list[dict[str, object]]] = {}
+            existing_by_name: dict[str, list[dict[str, object]]] = {}
+            for member in existing_members:
+                employee_id = str(member.get("employee_id") or "").strip()
+                name = str(member.get("name") or "").strip()
+                if employee_id:
+                    existing_by_employee_id.setdefault(employee_id, []).append(member)
+                if name:
+                    existing_by_name.setdefault(name, []).append(member)
+
+            matched_ids: set[int] = set()
            for index, item in enumerate(items):
+                existing = pick_existing_member(item, existing_by_employee_id, existing_by_name, matched_ids)
+                merged_item = merge_import_member(item, existing)
+                if existing is None:
                    cur.execute(
                        """
                        INSERT INTO members (
@@ -1394,8 +1515,39 @@ def replace_members(items: list[MemberPayload]) -> list[dict[str, object]]:
                        )
                        VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s)
                        """,
-                    serialize_member_payload(item, index),
+                        serialize_member_payload(merged_item, index),
                    )
+                    continue
+
+                matched_ids.add(int(existing["id"]))
+                cur.execute(
+                    """
+                    UPDATE members
+                    SET name = %s,
+                        employee_id = %s,
+                        company = %s,
+                        rank = %s,
+                        role = %s,
+                        department = %s,
+                        grp = %s,
+                        division = %s,
+                        team = %s,
+                        cell = %s,
+                        work_status = %s,
+                        work_time = %s,
+                        phone = %s,
+                        email = %s,
+                        seat_label = %s,
+                        photo_url = %s,
+                        sort_order = %s,
+                        updated_at = NOW()
+                    WHERE id = %s
+                    """,
+                    (*serialize_member_payload(merged_item, index), int(existing["id"])),
+                )
+            stale_ids = [int(member["id"]) for member in existing_members if int(member["id"]) not in matched_ids]
+            if stale_ids:
+                cur.execute("DELETE FROM members WHERE id = ANY(%s)", (stale_ids,))
        conn.commit()
    return fetch_members()

--- a/frontend/public/app.js
+++ b/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("&", "&amp;")
@@ -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();
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -68,62 +68,102 @@
          <iframe id="organization-frame" src="/legacy/organization?v=20260325-11" data-src="/legacy/organization?v=20260325-11" title="조직도 메인 화면"></iframe>
        </div>
      </section>
-      <section id="seatmap-stage" class="main-stage" hidden>
+      <section id="seatmap-admin-stage" class="main-stage" hidden>
        <div class="seatmap-layout">
          <div class="seatmap-topbar">
            <div>
              <p class="eyebrow">Seat Layout</p>
-              <h3 id="seatmap-name">자리배치도</h3>
+              <h3 id="seatmap-admin-name">자리배치도</h3>
            </div>
-            <div class="seatmap-actions">
-              <button id="seatmap-save-btn" class="ghost-button" type="button" hidden disabled>저장</button>
-              <button id="seatmap-cancel-btn" class="ghost-button ghost-button-soft" type="button" hidden>취소</button>
+            <div id="seatmap-admin-office-tabs" class="seatmap-office-tabs"></div>
+            <div class="seatmap-actions" id="seatmap-admin-actions">
+              <button id="seatmap-admin-exit-btn" class="ghost-button ghost-button-soft" type="button" hidden>나가기</button>
+              <button id="seatmap-admin-save-btn" class="ghost-button" type="button" hidden disabled>저장</button>
            </div>
          </div>

-          <p id="seatmap-status" class="seatmap-status" role="status"></p>
+          <p id="seatmap-admin-status" class="seatmap-status" role="status"></p>

          <div class="seatmap-content">
            <div class="seatmap-board-panel">
-              <div id="seatmap-empty" class="seatmap-empty hidden"></div>
-              <div id="seatmap-board-wrap" class="seatmap-board-wrap hidden">
-                <div id="seatmap-board" class="seatmap-board"></div>
+              <div id="seatmap-admin-empty" class="seatmap-empty hidden"></div>
+              <div id="seatmap-admin-board-wrap" class="seatmap-board-wrap hidden">
+                <div id="seatmap-admin-board" class="seatmap-board"></div>
              </div>
            </div>

            <aside class="seatmap-sidebar">
-              <section id="seatmap-settings-panel" class="seatmap-panel hidden">
+              <section id="seatmap-admin-settings-panel" class="seatmap-panel hidden">
                <div class="seatmap-panel-head">
                  <h4>도면 설정</h4>
                  <p>현재는 기술개발센터 고정 도면을 사용합니다.</p>
                </div>
-                <form id="seatmap-settings-form" class="seatmap-form">
+                <form id="seatmap-admin-settings-form" class="seatmap-form">
                  <label>
                    <span>도면 이름</span>
-                    <input id="seatmap-form-name" name="name" type="text" placeholder="예: 기술개발센터" required>
+                    <input id="seatmap-admin-form-name" name="name" type="text" placeholder="예: 기술개발센터" required>
                  </label>
                  <div>
                    <span>DXF 파일</span>
-                    <label class="seatmap-file-input" for="seatmap-form-image">
-                      <input id="seatmap-form-image" name="image" type="file" accept=".dxf" required>
+                    <label class="seatmap-file-input" for="seatmap-admin-form-image">
+                      <input id="seatmap-admin-form-image" name="image" type="file" accept=".dxf" required>
                      <span class="seatmap-file-button">DXF 선택</span>
-                      <strong id="seatmap-file-name" class="seatmap-file-name">선택된 파일 없음</strong>
+                      <strong id="seatmap-admin-file-name" class="seatmap-file-name">선택된 파일 없음</strong>
                    </label>
                  </div>
-                  <button id="seatmap-settings-submit" type="submit">DXF 업로드</button>
+                  <button id="seatmap-admin-settings-submit" type="submit">DXF 업로드</button>
                </form>
              </section>

              <section class="seatmap-panel">
                <div class="seatmap-panel-head">
-                  <h4>미배치 인원</h4>
-                  <p>이름을 검색하고 자리배치도에 바로 드래그하세요.</p>
+                  <h4 id="seatmap-admin-sidebar-title">전체 인원</h4>
+                  <p id="seatmap-admin-sidebar-desc">미배치 인원은 상단, 배치 완료 인원은 하단에 표시됩니다.</p>
                </div>
                <label class="seatmap-search">
                  <span class="hidden">구성원 검색</span>
-                  <input id="seatmap-search" type="search" placeholder="이름 또는 부서 검색">
+                  <input id="seatmap-admin-search" type="search" placeholder="이름 또는 부서 검색">
                </label>
-                <div id="seatmap-unassigned" class="seatmap-member-list"></div>
+                <div id="seatmap-admin-unassigned" class="seatmap-member-list"></div>
+              </section>
+            </aside>
+          </div>
+        </div>
+      </section>
+      <section id="seatmap-readonly-stage" class="main-stage" hidden>
+        <div class="seatmap-layout">
+          <div class="seatmap-topbar">
+            <div>
+              <p class="eyebrow">Seat Layout</p>
+              <h3 id="seatmap-readonly-name">자리배치도</h3>
+            </div>
+            <div id="seatmap-readonly-office-tabs" class="seatmap-office-tabs"></div>
+            <div class="seatmap-actions" id="seatmap-readonly-actions">
+              <button id="seatmap-readonly-exit-btn" class="ghost-button ghost-button-soft" type="button" hidden>나가기</button>
+            </div>
+          </div>
+
+          <p id="seatmap-readonly-status" class="seatmap-status" role="status"></p>
+
+          <div class="seatmap-content">
+            <div class="seatmap-board-panel">
+              <div id="seatmap-readonly-empty" class="seatmap-empty hidden"></div>
+              <div id="seatmap-readonly-board-wrap" class="seatmap-board-wrap hidden">
+                <div id="seatmap-readonly-board" class="seatmap-board"></div>
+              </div>
+            </div>
+
+            <aside class="seatmap-sidebar">
+              <section class="seatmap-panel">
+                <div class="seatmap-panel-head">
+                  <h4 id="seatmap-readonly-sidebar-title">배치 인원 검색</h4>
+                  <p id="seatmap-readonly-sidebar-desc">이름이나 부서를 검색하고 클릭하면 해당 좌석으로 바로 확대 이동합니다.</p>
+                </div>
+                <label class="seatmap-search">
+                  <span class="hidden">구성원 검색</span>
+                  <input id="seatmap-readonly-search" type="search" placeholder="이름 또는 부서 검색">
+                </label>
+                <div id="seatmap-readonly-unassigned" class="seatmap-member-list"></div>
              </section>
            </aside>
          </div>
--- a/frontend/public/styles.css
+++ b/frontend/public/styles.css
@@ -1,3 +1,19 @@
+.dashboard-shell,
+.dashboard-main,
+.main-stage,
+.seatmap-layout,
+.seatmap-content,
+.seatmap-board-panel,
+.seatmap-sidebar {
+  min-height: 0;
+}
+
+html,
+body {
+  height: 100%;
+  overflow: hidden;
+}
+
 .hidden {
  display: none !important;
 }
@@ -143,9 +159,10 @@
 }

 .dashboard-shell {
-  min-height: 100vh;
+  height: 100dvh;
  display: flex;
  flex-direction: column;
+  overflow: hidden;
 }

 .dashboard-header {
@@ -371,14 +388,16 @@

 .dashboard-main {
  flex: 1;
-  min-height: calc(100vh - 68px);
+  height: calc(100dvh - 68px);
  padding: 0;
+  overflow: hidden;
 }

 .main-stage {
-  height: calc(100vh - 68px);
+  height: calc(100dvh - 68px);
  display: flex;
  flex-direction: column;
+  overflow: hidden;
 }

 .stage-frame {
@@ -407,18 +426,45 @@
  flex-direction: column;
  gap: 12px;
  padding: 18px;
+  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.94), rgba(241, 245, 249, 0.92)),
    radial-gradient(circle at top left, rgba(14, 165, 233, 0.1), transparent 32%);
 }

 .seatmap-topbar {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
+  align-items: end;
  gap: 16px;
 }

+.seatmap-office-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+  grid-column: 2;
+}
+
+.seatmap-office-tab {
+  min-height: 38px;
+  padding: 0 14px;
+  border-radius: 999px;
+  border: 1px solid rgba(148, 163, 184, 0.26);
+  background: rgba(255, 255, 255, 0.92);
+  color: #475569;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.seatmap-office-tab.active {
+  border-color: rgba(15, 118, 110, 0.22);
+  background: rgba(15, 118, 110, 0.1);
+  color: #0f766e;
+}
+
 .seatmap-topbar h3,
 .seatmap-panel-head h4 {
  margin: 0;
@@ -432,6 +478,12 @@
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
+  justify-content: flex-end;
+  grid-column: 3;
+}
+
+.seatmap-actions[hidden] {
+  display: none !important;
 }

 .seatmap-status {
@@ -456,6 +508,7 @@
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
+  overflow: hidden;
 }

 .seatmap-board-panel,
@@ -468,6 +521,7 @@

 .seatmap-board-panel {
  min-height: 0;
+  height: 100%;
  overflow: hidden;
  padding: 0;
 }
@@ -475,7 +529,7 @@
 .seatmap-board-wrap {
  width: 100%;
  height: 100%;
-  overflow: auto;
+  overflow: hidden;
  border-radius: 24px;
  background: #ffffff;
  padding: 0;
@@ -490,6 +544,7 @@
 .seatmap-board {
  min-width: 100%;
  height: 100%;
+  overflow: hidden;
 }

 .seatmap-dxf-canvas {
@@ -506,15 +561,16 @@
 .seatmap-dxf-frame-shell {
  width: 100%;
  height: 100%;
-  min-height: 720px;
+  min-height: 0;
  background: #ffffff;
+  overflow: hidden;
 }

 .seatmap-dxf-frame {
  display: block;
  width: 100%;
  height: 100%;
-  min-height: 720px;
+  min-height: 0;
  border: 0;
  background: #ffffff;
 }
@@ -924,11 +980,78 @@
  padding-right: 4px;
 }

+.seatmap-member-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.seatmap-member-section + .seatmap-member-section {
+  margin-top: 6px;
+}
+
+.seatmap-member-section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.seatmap-member-section-head strong {
+  font-size: 12px;
+  font-weight: 900;
+  color: #0f172a;
+}
+
+.seatmap-member-section-head span {
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.seatmap-member-section-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
 .seatmap-member-list .seatmap-member-card {
  position: relative;
  inset: auto;
 }

+.seatmap-member-search-card {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1px solid rgba(226, 232, 240, 0.9);
+  border-radius: 16px;
+  background: #fff;
+  cursor: pointer;
+  text-align: left;
+}
+
+.seatmap-member-badge {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  background: #e2e8f0;
+  color: #475569;
+  font-size: 11px;
+  font-weight: 900;
+}
+
+.seatmap-member-badge.occupied {
+  background: rgba(220, 38, 38, 0.12);
+  color: #b91c1c;
+}
+
 .seatmap-member-card-compact {
  position: relative;
  inset: auto;
@@ -1005,6 +1128,11 @@
  margin-bottom: 8px;
 }

+.seatmap-list-empty-inline {
+  min-height: 64px;
+  padding: 12px;
+}
+
@media (max-width: 1180px) {
  .dashboard-header {
    flex-wrap: wrap;
@@ -1062,8 +1190,13 @@
  }

  .seatmap-topbar {
+    grid-template-columns: 1fr;
    align-items: flex-start;
-    flex-direction: column;
+  }
+
+  .seatmap-office-tabs {
+    grid-column: 1;
+    justify-content: center;
  }

  .seatmap-dxf-canvas {
@@ -1076,7 +1209,7 @@

  .seatmap-dxf-frame-shell,
  .seatmap-dxf-frame {
-    min-height: 620px;
+    min-height: 0;
  }
 }

--- a/legacy/static/common.css
+++ b/legacy/static/common.css
@@ -42,6 +42,7 @@
 html,
 body {
  margin: 0;
+  height: 100%;
  min-height: 100%;
  font-family: var(--font-sans);
  color: var(--color-text);
@@ -53,6 +54,7 @@ body {

 body {
  min-height: 100vh;
+  overflow: hidden;
 }

 button,
--- a/legacy/static/organization.css
+++ b/legacy/static/organization.css
@@ -1,5 +1,6 @@
 body {
  overflow-x: hidden;
+  overflow-y: hidden;
 }

 .org-canvas {
@@ -332,6 +333,29 @@ body {
  align-items: stretch;
 }

+.member-edit-layout {
+  display: grid;
+  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
+  gap: 16px;
+  align-items: stretch;
+}
+
+.member-edit-left-pane,
+.member-edit-right-pane {
+  min-width: 0;
+}
+
+.member-edit-left-pane {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.member-seat-field {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
 .member-detail-top-row {
  width: 100%;
  display: grid;
@@ -577,6 +601,10 @@ body {
    grid-template-columns: 1fr;
  }

+  .member-edit-layout {
+    grid-template-columns: 1fr;
+  }
+
  .member-detail-top-row,
  .member-inline-info-grid {
    grid-template-columns: 1fr;
--- a/legacy/static/organization.js
+++ b/legacy/static/organization.js
@@ -593,8 +593,8 @@ function updateFabMenu() {
  const menu = document.getElementById('fab-menu');
  let html = '<button class="fab-sub shadow-xl" data-label="리스트" onclick="openListViewModal(event)">📋</button>';
  html += '<button class="fab-sub shadow-xl" data-label="조직도 인쇄(A3)" onclick="printA3()">🖨️</button>';
-  if (isAdmin) {
  html += '<button class="fab-sub shadow-xl" data-label="자리배치도" onclick="openSeatMapView(event)">🪑</button>';
+  if (isAdmin) {
    html += '<button class="fab-sub shadow-xl" data-label="조직현황 업로드" onclick="triggerUpload(event)">⬆️</button>';
    html += '<button class="fab-sub shadow-xl" data-label="신규 구성원" onclick="openAddModal(event)">👤</button>';
    html += '<button class="fab-sub shadow-xl" data-label="신규 팀/그룹/셀" onclick="openUnitAddModal(event)">🏢</button>';
@@ -606,7 +606,7 @@ function openSeatMapView(event) {
  event.stopPropagation();
  document.getElementById('fab-container').classList.remove('active');
  if (window.parent && window.parent !== window) {
-    window.parent.postMessage({ type: 'open-seatmap' }, '*');
+    window.parent.postMessage({ type: 'open-seatmap', readOnly: !isAdmin }, '*');
  }
 }

@@ -960,6 +960,22 @@ async function hydrateMemberSeatPreview(member) {
    if (!frame.contentWindow) {
      return;
    }
+    frame.contentWindow.postMessage({
+      type: 'seatmap-set-assignments',
+      items: Array.isArray(layout?.placements) && Array.isArray(layout?.members) && Array.isArray(layout?.slots)
+        ? layout.placements.map((placement) => {
+          const slot = layout.slots.find((item) => Number(item.id) === Number(placement.seat_slot_id));
+          const memberItem = layout.members.find((item) => Number(item.id) === Number(placement.member_id));
+          if (!slot || !memberItem) return null;
+          return {
+            key: String(slot.slot_key || ''),
+            member_id: Number(memberItem.id),
+            name: memberItem.name || '-',
+            rank: memberItem.rank || '-',
+          };
+        }).filter(Boolean)
+        : [],
+    }, window.location.origin);
    frame.contentWindow.postMessage({ type: 'seatmap-set-mode', mode: 'compact' }, window.location.origin);
    frame.contentWindow.postMessage({ type: 'seatmap-focus-chair', key: seatInfo.slotKey, padding: 2600 }, window.location.origin);
  }, { once: true });
@@ -1023,6 +1039,7 @@ function openModal(id) {
  }

  document.getElementById('modal-title').innerText = id ? '구성원 정보 수정' : '신규 구성원 추가';
+  modal.querySelector('.modal-content').classList.add('wide');
  fieldsArea.className = 'flex flex-col w-full';
  fieldsArea.style.maxHeight = 'none';
  fieldsArea.style.overflowY = 'visible';
@@ -1078,7 +1095,8 @@ function openModal(id) {
      <input type="hidden" id="m-id" value="${id || ''}">
      <input type="hidden" id="m-photo-hidden" value="${member['사진'] || ''}">
      <input type="hidden" id="m-seat-hidden" value="${member['자리위치'] || ''}">
-      <div class="col-span-2 member-basic-top-row">
+      <div class="col-span-2 member-edit-layout">
+        <div class="member-edit-left-pane">
          <div class="member-photo-field">
            <label class="text-[11px] font-black text-slate-600 block">프로필 사진</label>
            <div class="member-photo-upload-card member-photo-upload-card-compact">
@@ -1094,6 +1112,11 @@ function openModal(id) {
              </div>
            </div>
          </div>
+          <div class="member-seat-field">
+            <div id="member-seat-preview">${renderSeatPreviewCard({ assigned: false, seatLabel: member['자리위치'] || '', seatMapName: '자리배치도', slotKey: '' })}</div>
+          </div>
+        </div>
+        <div class="member-edit-right-pane">
          <div class="member-name-field">
            <label class="text-[11px] font-black text-slate-600 block">이름 (필수)</label>
            <input id="m-name" value="${member['이름'] || ''}" oninput="syncPhotoPreviewFromUrl()" class="w-full bg-slate-50 p-3 rounded-xl border font-bold text-sm outline-none">
@@ -1113,9 +1136,6 @@ function openModal(id) {
            </div>
          </div>
        </div>
-      <div class="col-span-2">
-        <label class="text-[11px] font-black text-slate-600 block mb-2">자리 위치</label>
-        ${renderSeatPreviewCard(member['자리위치'] || '')}
      </div>
    </div>
    ${orgFields}
@@ -1130,6 +1150,9 @@ function openModal(id) {
    <button onclick="saveMember()" class="flex-1 bg-indigo-600 text-white py-3.5 rounded-xl font-bold text-sm">저장</button>
  `;
  modal.style.display = 'flex';
+  if (id) {
+    hydrateMemberSeatPreview(member);
+  }
 }

 function closeModal() {