동기화 기초구조 마련

adminfront/src/features/tenants/components/ParentTenantSelector.picker.test.tsx

@@ -0,0 +1,137 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { TenantSummary } from "../../../lib/adminApi";
+import { ParentTenantSelector } from "./ParentTenantSelector";
+
+const tenants: TenantSummary[] = [
+  {
+    id: "company-1",
+    type: "COMPANY",
+    name: "Saman Engineering",
+    slug: "saman",
+    description: "",
+    status: "active",
+    memberCount: 0,
+    createdAt: "",
+    updatedAt: "",
+  },
+  {
+    id: "group-1",
+    type: "COMPANY_GROUP",
+    name: "Hanmac Family",
+    slug: "hanmac-family",
+    description: "",
+    status: "active",
+    memberCount: 0,
+    createdAt: "",
+    updatedAt: "",
+  },
+];
+
+describe("ParentTenantSelector picker", () => {
+  it("opens an org-chart picker modal and applies tenant selection messages", async () => {
+    const onChange = vi.fn();
+
+    render(
+      <ParentTenantSelector
+        id="parentId"
+        label="상위 테넌트"
+        value=""
+        onChange={onChange}
+        tenants={tenants}
+        noneLabel="없음"
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /테넌트 선택/ }));
+
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    const pickerSrc = screen.getByTitle("테넌트 선택").getAttribute("src");
+    expect(pickerSrc).toContain("/login");
+    expect(decodeURIComponent(pickerSrc ?? "")).toContain("/embed/picker");
+
+    fireEvent(
+      window,
+      new MessageEvent("message", {
+        data: {
+          type: "orgfront:picker:confirm",
+          payload: {
+            selections: [
+              {
+                type: "tenant",
+                id: "company-1",
+                name: "Saman Engineering",
+              },
+            ],
+          },
+        },
+      }),
+    );
+
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith("company-1"));
+  });
+
+  it("keeps the current tenant out of picker message selections", async () => {
+    const onChange = vi.fn();
+
+    render(
+      <ParentTenantSelector
+        id="parentId"
+        label="상위 테넌트"
+        value=""
+        onChange={onChange}
+        tenants={tenants}
+        noneLabel="없음"
+        excludeTenantId="company-1"
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /테넌트 선택/ }));
+    fireEvent(
+      window,
+      new MessageEvent("message", {
+        data: {
+          type: "orgfront:picker:confirm",
+          payload: {
+            selections: [
+              {
+                type: "tenant",
+                id: "company-1",
+                name: "Saman Engineering",
+              },
+            ],
+          },
+        },
+      }),
+    );
+
+    await waitFor(() => expect(onChange).not.toHaveBeenCalled());
+  });
+
+  it("selects a non-hanmac parent from the local tenant picker", async () => {
+    const onChange = vi.fn();
+
+    render(
+      <ParentTenantSelector
+        id="parentId"
+        label="상위 테넌트"
+        value=""
+        onChange={onChange}
+        tenants={tenants}
+        noneLabel="없음"
+        orgChartPickerLabel="한맥가족에서 선택"
+        localPickerLabel="다른 테넌트 선택"
+        localTenantFilter={(tenant) => tenant.slug !== "hanmac-family"}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "다른 테넌트 선택" }));
+    fireEvent.change(
+      screen.getByPlaceholderText("테넌트 이름 또는 슬러그 검색"),
+      { target: { value: "saman" } },
+    );
+    fireEvent.click(screen.getByRole("button", { name: /Saman Engineering/ }));
+
+    expect(onChange).toHaveBeenCalledWith("company-1");
+  });
+});

adminfront/src/features/tenants/components/ParentTenantSelector.tsx

@@ -1,9 +1,21 @@
-import { Search } from "lucide-react";
-import { useMemo, useState } from "react";
-import { Input } from "../../../components/ui/input";
+import { Building2, X } from "lucide-react";
+import type { ReactNode } from "react";
+import { useEffect, useState } from "react";
+import { Button } from "../../../components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../../../components/ui/dialog";
 import { Label } from "../../../components/ui/label";
 import type { TenantSummary } from "../../../lib/adminApi";
 import { t } from "../../../lib/i18n";
+import {
+  buildAuthenticatedOrgChartTenantPickerUrl,
+  parseOrgChartTenantSelection,
+} from "../../users/orgChartPicker";
 
 type ParentTenantSelectorProps = {
   id: string;
@@ -14,6 +26,11 @@ type ParentTenantSelectorProps = {
   noneLabel: string;
   helpText?: string;
   excludeTenantId?: string;
+  labelAction?: ReactNode;
+  contextLabel?: string;
+  orgChartPickerLabel?: string;
+  localPickerLabel?: string;
+  localTenantFilter?: (tenant: TenantSummary) => boolean;
 };
 
 const companyParentTypes = new Set(["COMPANY", "COMPANY_GROUP"]);
@@ -45,70 +62,187 @@ export function ParentTenantSelector({
   noneLabel,
   helpText,
   excludeTenantId,
+  labelAction,
+  contextLabel,
+  orgChartPickerLabel,
+  localPickerLabel,
+  localTenantFilter,
 }: ParentTenantSelectorProps) {
-  const [search, setSearch] = useState("");
-  const [companyOnly, setCompanyOnly] = useState(false);
-  const filteredTenants = useMemo(
-    () => filterParentTenants(tenants, search, companyOnly, excludeTenantId),
-    [tenants, search, companyOnly, excludeTenantId],
-  );
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [localPickerOpen, setLocalPickerOpen] = useState(false);
+  const [localSearch, setLocalSearch] = useState("");
   const selectedTenant = tenants.find((tenant) => tenant.id === value);
-  const optionTenants =
-    selectedTenant &&
-    !filteredTenants.some((tenant) => tenant.id === selectedTenant.id)
-      ? [selectedTenant, ...filteredTenants]
-      : filteredTenants;
+  const localCandidates = filterParentTenants(
+    localTenantFilter ? tenants.filter(localTenantFilter) : tenants,
+    localSearch,
+    false,
+    excludeTenantId,
+  );
+  const pickerUrl = buildAuthenticatedOrgChartTenantPickerUrl(
+    import.meta.env.ORGFRONT_URL,
+  );
+
+  useEffect(() => {
+    if (!pickerOpen) return;
+
+    const onMessage = (event: MessageEvent) => {
+      const selection = parseOrgChartTenantSelection(event.data);
+      if (!selection) return;
+      if (excludeTenantId && selection.id === excludeTenantId) return;
+
+      onChange(selection.id);
+      setPickerOpen(false);
+    };
+
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [excludeTenantId, onChange, pickerOpen]);
 
   return (
     <div className="space-y-2">
-      <Label htmlFor={id} className="text-sm font-semibold">
-        {label}
-      </Label>
-      <div className="grid gap-2 md:grid-cols-[minmax(0,1fr)_auto]">
-        <label className="relative block">
-          <Search
-            aria-hidden="true"
-            size={16}
-            className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
-          />
-          <Input
-            id={`${id}-search`}
-            value={search}
-            onChange={(event) => setSearch(event.target.value)}
-            className="pl-9"
-            placeholder={t(
-              "ui.admin.tenants.parent.search_placeholder",
-              "이름 또는 slug 검색",
-            )}
-          />
-        </label>
-        <label className="flex h-9 items-center gap-2 rounded-md border border-input px-3 text-sm">
-          <input
-            type="checkbox"
-            checked={companyOnly}
-            onChange={(event) => setCompanyOnly(event.target.checked)}
-            className="h-4 w-4"
-          />
-          {t("ui.admin.tenants.parent.company_only", "회사/그룹사만 표시")}
-        </label>
+      <div className="flex min-h-8 flex-wrap items-center justify-between gap-2">
+        <Label className="text-sm font-semibold">
+          {label}
+        </Label>
+        {labelAction}
       </div>
-      <select
+      <input
         id={id}
         name={id}
-        className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        type="hidden"
         value={value}
-        onChange={(event) => onChange(event.target.value)}
-      >
-        <option value="">{noneLabel}</option>
-        {optionTenants.map((tenant) => (
-          <option key={tenant.id} value={tenant.id}>
-            {tenant.name} ({tenant.slug}) - {tenant.type}
-          </option>
-        ))}
-      </select>
+        readOnly
+      />
+      <div className="flex min-h-10 flex-wrap items-center gap-2 rounded-md border border-input bg-background px-3 py-2">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => setPickerOpen(true)}
+        >
+          <Building2 className="h-4 w-4" />
+          {orgChartPickerLabel ??
+            selectedTenant?.name ??
+            t("ui.admin.tenants.parent.pick_tenant", "테넌트 선택")}
+        </Button>
+        {localPickerLabel && (
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => setLocalPickerOpen(true)}
+          >
+            <Building2 className="h-4 w-4" />
+            {localPickerLabel}
+          </Button>
+        )}
+        {selectedTenant ? (
+          <>
+            <span className="text-xs text-muted-foreground">
+              {selectedTenant.slug} · {selectedTenant.type}
+            </span>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={() => onChange("")}
+              aria-label={noneLabel}
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </>
+        ) : (
+          <span className="text-xs text-muted-foreground">{noneLabel}</span>
+        )}
+        {contextLabel && (
+          <span className="rounded-md border px-2 py-1 text-xs font-medium text-muted-foreground">
+            {contextLabel}
+          </span>
+        )}
+      </div>
       {helpText && (
         <p className="mt-1 text-xs text-muted-foreground">{helpText}</p>
       )}
+      <Dialog open={pickerOpen} onOpenChange={setPickerOpen}>
+        <DialogContent className="max-w-[460px] p-4">
+          <DialogHeader>
+            <DialogTitle>
+              {t("ui.admin.tenants.parent.pick_tenant", "테넌트 선택")}
+            </DialogTitle>
+            <DialogDescription>
+              {t(
+                "msg.admin.tenants.parent.picker_description",
+                "org-chart에서 테넌트를 선택하면 상위 테넌트에 반영됩니다.",
+              )}
+            </DialogDescription>
+          </DialogHeader>
+          <iframe
+            title={t("ui.admin.tenants.parent.pick_tenant", "테넌트 선택")}
+            src={pickerUrl}
+            className="h-[600px] w-full rounded-md border"
+          />
+        </DialogContent>
+      </Dialog>
+      <Dialog open={localPickerOpen} onOpenChange={setLocalPickerOpen}>
+        <DialogContent className="max-w-[460px] p-4">
+          <DialogHeader>
+            <DialogTitle>
+              {localPickerLabel ??
+                t("ui.admin.tenants.parent.pick_tenant", "테넌트 선택")}
+            </DialogTitle>
+            <DialogDescription>
+              {t(
+                "msg.admin.tenants.parent.local_picker_description",
+                "테넌트 목록에서 상위 테넌트로 사용할 항목을 선택합니다.",
+              )}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <input
+              className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              value={localSearch}
+              onChange={(event) => setLocalSearch(event.target.value)}
+              placeholder={t(
+                "ui.admin.tenants.parent.local_search_placeholder",
+                "테넌트 이름 또는 슬러그 검색",
+              )}
+            />
+            <div className="max-h-[360px] space-y-2 overflow-y-auto">
+              {localCandidates.map((tenant) => (
+                <Button
+                  key={tenant.id}
+                  type="button"
+                  variant="outline"
+                  className="h-auto w-full justify-start px-3 py-2 text-left"
+                  onClick={() => {
+                    onChange(tenant.id);
+                    setLocalPickerOpen(false);
+                    setLocalSearch("");
+                  }}
+                >
+                  <span>
+                    <span className="block text-sm font-medium">
+                      {tenant.name}
+                    </span>
+                    <span className="block text-xs text-muted-foreground">
+                      {tenant.slug} · {tenant.type}
+                    </span>
+                  </span>
+                </Button>
+              ))}
+              {localCandidates.length === 0 && (
+                <p className="rounded-md border border-dashed px-3 py-4 text-sm text-muted-foreground">
+                  {t(
+                    "msg.admin.tenants.parent.local_picker_empty",
+                    "선택할 수 있는 테넌트가 없습니다.",
+                  )}
+                </p>
+              )}
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }