chore: consolidate local integration changes

orgfront/src/features/orgchart/routes/OrgChartPage.tsx

@@ -2,10 +2,10 @@ import { useQuery } from "@tanstack/react-query";
 import type { Node as ReactFlowNode } from "@xyflow/react";
 import * as React from "react";
 import { useLocation, useParams } from "react-router-dom";
+import { Switch } from "../../../components/ui/switch";
 import {
-  fetchAllTenants,
+  fetchOrgChartSnapshot,
   fetchPublicOrgChart,
-  fetchUsers,
   type TenantSummary,
   type UserSummary,
 } from "../../../lib/adminApi";
@@ -1122,9 +1122,21 @@ function getOrgSelectionLabel(
     ?.name;
 }
 
+export function resolveOrgChartFamilyRoot(rootNodes: TenantNode[]) {
+  return (
+    rootNodes.find(
+      (node) =>
+        node.slug.toLowerCase() === "hanmac-family" || node.name === "한맥가족",
+    ) ??
+    rootNodes.find((node) => node.type === "COMPANY_GROUP") ??
+    rootNodes[0] ??
+    null
+  );
+}
+
 export function filterSystemGlobalTenants(
   tenants: TenantSummary[],
-  _visibilityMode: "internal" | "public" = "public",
+  visibilityMode: "internal" | "public" = "public",
 ) {
   const excludedIds = new Set(
     tenants.filter(isSystemGlobalTenant).map((tenant) => tenant.id),
@@ -1148,7 +1160,7 @@ export function filterSystemGlobalTenants(
   const filtered = tenants.filter(
     (tenant) => !excludedIds.has(tenant.id) && isOrgFrontTenantType(tenant),
   );
-  return filterTenantsByVisibility(filtered, "public");
+  return filterTenantsByVisibility(filtered, visibilityMode);
 }
 
 function filterOrgChartMembershipTenants(tenants: TenantSummary[]) {
@@ -1359,8 +1371,10 @@ export function TenantOrgChartPage() {
   const location = useLocation();
   const searchParams = new URLSearchParams(location.search);
   const shareToken = searchParams.get("token");
-  const visibilityMode =
-    searchParams.get("includeInternal") === "true" ? "internal" : "public";
+  const [includeInternalTenants, setIncludeInternalTenants] = React.useState(
+    () => !shareToken && searchParams.get("includeInternal") === "true",
+  );
+  const visibilityMode = includeInternalTenants ? "internal" : "public";
   const [selectedTenantFilter, setSelectedTenantFilter] =
     React.useState(FAMILY_FILTER_ID);
   const [collapsedIds, setCollapsedIds] = React.useState<Set<string>>(
@@ -1387,15 +1401,9 @@ export function TenantOrgChartPage() {
     enabled: !!shareToken,
   });
 
-  const tenantsQuery = useQuery({
-    queryKey: ["tenants-full-tree-v2"],
-    queryFn: () => fetchAllTenants(),
-    enabled: !shareToken,
-  });
-
-  const usersQuery = useQuery({
-    queryKey: ["users", { limit: 5000, offset: 0 }],
-    queryFn: () => fetchUsers(5000, 0),
+  const orgChartSnapshotQuery = useQuery({
+    queryKey: ["orgchart-snapshot", { cache: "redis" }],
+    queryFn: () => fetchOrgChartSnapshot(),
     enabled: !shareToken,
   });
 
@@ -1426,7 +1434,7 @@ export function TenantOrgChartPage() {
       };
     }
 
-    if (!tenantsQuery.data?.items || !usersQuery.data?.items) {
+    if (!orgChartSnapshotQuery.data) {
       return {
         rootNodes: [],
         usersMap: new Map<string, UserSummary[]>(),
@@ -1435,15 +1443,15 @@ export function TenantOrgChartPage() {
     }
 
     const rootNodes = buildTenantFullTree(
-      filterSystemGlobalTenants(tenantsQuery.data.items, visibilityMode),
+      filterSystemGlobalTenants(orgChartSnapshotQuery.data.tenants, visibilityMode),
     ).subTree;
     const membershipRootNodes = buildTenantFullTree(
-      filterOrgChartMembershipTenants(tenantsQuery.data.items),
+      filterOrgChartMembershipTenants(orgChartSnapshotQuery.data.tenants),
     ).subTree;
 
     return {
       rootNodes,
-      usersMap: buildUsersMap(usersQuery.data.items, rootNodes, {
+      usersMap: buildUsersMap(orgChartSnapshotQuery.data.users, rootNodes, {
         activeOnly: true,
         membershipRootNodes,
       }),
@@ -1452,17 +1460,12 @@ export function TenantOrgChartPage() {
   }, [
     publicQuery.data,
     shareToken,
-    tenantsQuery.data,
-    usersQuery.data,
+    orgChartSnapshotQuery.data,
     visibilityMode,
   ]);
 
   const familyRoot = React.useMemo(() => {
-    return (
-      rootNodes.find((node) => node.type === "COMPANY_GROUP") ??
-      rootNodes[0] ??
-      null
-    );
+    return resolveOrgChartFamilyRoot(rootNodes);
   }, [rootNodes]);
 
   const orgSelectionOptions = React.useMemo(
@@ -1594,10 +1597,10 @@ export function TenantOrgChartPage() {
 
   const isLoading = shareToken
     ? publicQuery.isLoading
-    : tenantsQuery.isLoading || usersQuery.isLoading;
+    : orgChartSnapshotQuery.isLoading;
   const isError = shareToken
     ? publicQuery.isError
-    : tenantsQuery.isError || usersQuery.isError;
+    : orgChartSnapshotQuery.isError;
 
   const totalUsers = React.useMemo(() => {
     const ids = new Set<string>();
@@ -1635,6 +1638,14 @@ export function TenantOrgChartPage() {
     setHasUserMovedCanvas(false);
   };
 
+  const updateInternalTenantVisibility = (checked: boolean) => {
+    setIncludeInternalTenants(checked);
+    setSelectedTenantFilter(FAMILY_FILTER_ID);
+    setCollapsedIds(new Set());
+    setHoveredNodeId(null);
+    setHasUserMovedCanvas(false);
+  };
+
   return (
     <div
       className="flex h-full min-h-0 w-full flex-col overflow-hidden border-[#e0d5c1] bg-[#f6efe6]"
@@ -1665,9 +1676,12 @@ export function TenantOrgChartPage() {
             testId="orgchart-layout-mode-option"
             value={childLayoutMode}
           />
-          <div className="ml-2 whitespace-nowrap rounded-full border border-[#f2c484]/30 bg-[#f2c484]/10 px-4 py-2 text-xs font-black text-[#f2c484] shadow-sm">
-            총 {totalUsers}명
-          </div>
+          <TotalUsersControl
+            canToggleInternal={!shareToken}
+            includeInternal={includeInternalTenants}
+            onIncludeInternalChange={updateInternalTenantVisibility}
+            totalUsers={totalUsers}
+          />
         </div>
       </header>
 
@@ -1750,6 +1764,53 @@ export function TenantOrgChartPage() {
   );
 }
 
+function TotalUsersControl({
+  canToggleInternal,
+  includeInternal,
+  onIncludeInternalChange,
+  totalUsers,
+}: {
+  canToggleInternal: boolean;
+  includeInternal: boolean;
+  onIncludeInternalChange: (checked: boolean) => void;
+  totalUsers: number;
+}) {
+  if (!canToggleInternal) {
+    return (
+      <div
+        className="ml-2 whitespace-nowrap rounded-full border border-[#f2c484]/30 bg-[#f2c484]/10 px-4 py-2 text-xs font-black text-[#f2c484] shadow-sm"
+        data-testid="orgchart-total-users-control"
+      >
+        총 {totalUsers}명
+      </div>
+    );
+  }
+
+  return (
+    <div className="group/total relative ml-2">
+      <button
+        aria-label={`전체 인원: 총 ${totalUsers}명`}
+        className="whitespace-nowrap rounded-full border border-[#f2c484]/30 bg-[#f2c484]/10 px-4 py-2 text-xs font-black text-[#f2c484] shadow-sm transition-colors hover:border-[#f2c484]/60 hover:bg-[#f2c484]/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#f2c484]/70"
+        data-testid="orgchart-total-users-control"
+        type="button"
+      >
+        총 {totalUsers}명
+      </button>
+      <div className="absolute right-0 top-full z-40 mt-2 hidden w-[220px] rounded-md border border-[#8bd3b2]/35 bg-[#0d3d33] p-3 text-[#e1fff1] shadow-xl group-hover/total:block group-focus-within/total:block">
+        <label className="flex items-center justify-between gap-3">
+          <span className="text-xs font-bold">내부조직 보기</span>
+          <Switch
+            aria-label="내부조직 보기"
+            checked={includeInternal}
+            className="data-[state=checked]:bg-[#f2c484]"
+            onCheckedChange={onIncludeInternalChange}
+          />
+        </label>
+      </div>
+    </div>
+  );
+}
+
 function LayoutOptionPicker<T extends string>({
   label,
   onChange,