RP 테넌트 제한을 orgfront picker로 전환

2026-06-15 11:52:01 +09:00
parent 7ca0db5a4c
commit c07fcb2e94
3 changed files with 253 additions and 113 deletions
--- a/devfront/src/features/clients/components/TenantAccessPicker.tsx
+++ b/devfront/src/features/clients/components/TenantAccessPicker.tsx
@@ -0,0 +1,146 @@
+import { Building2 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { Button } from "../../../components/ui/button";
+import { t } from "../../../lib/i18n";
+import {
+  buildAuthenticatedOrgChartTenantPickerUrl,
+  type OrgChartTenantSelection,
+  parseOrgChartTenantSelection,
+} from "../orgChartPicker";
+
+type TenantAccessPickerProps = {
+  disabled?: boolean;
+  selectedCount: number;
+  onSelectTenant: (selection: OrgChartTenantSelection) => void;
+};
+
+function resolveOrgFrontBaseUrl() {
+  return (
+    import.meta.env.VITE_ORGFRONT_PUBLIC_URL ||
+    import.meta.env.ORGFRONT_URL ||
+    "http://localhost:5175"
+  );
+}
+
+export function TenantAccessPicker({
+  disabled = false,
+  selectedCount,
+  onSelectTenant,
+}: TenantAccessPickerProps) {
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const pickerUrl = useMemo(
+    () => buildAuthenticatedOrgChartTenantPickerUrl(resolveOrgFrontBaseUrl()),
+    [],
+  );
+
+  useEffect(() => {
+    if (!pickerOpen) return;
+
+    const onMessage = (event: MessageEvent) => {
+      const selection = parseOrgChartTenantSelection(event.data);
+      if (!selection) return;
+      onSelectTenant(selection);
+      setPickerOpen(false);
+    };
+
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [onSelectTenant, pickerOpen]);
+
+  const pickerDialog =
+    pickerOpen && typeof document !== "undefined"
+      ? createPortal(
+          <div
+            className="fixed inset-0 z-[1000] flex items-start justify-center overflow-y-auto bg-black/50 p-4 md:items-center"
+            role="dialog"
+            aria-modal="true"
+            aria-label={t(
+              "ui.dev.clients.general.tenant_access.picker_title",
+              "테넌트 선택",
+            )}
+          >
+            <div className="flex h-[92vh] w-[min(96vw,1200px)] flex-col overflow-hidden rounded-2xl border border-border bg-background p-4 shadow-2xl">
+              <div className="flex items-start justify-between gap-3">
+                <div className="space-y-1">
+                  <h2 className="text-lg font-semibold">
+                    {t(
+                      "ui.dev.clients.general.tenant_access.picker_title",
+                      "테넌트 선택",
+                    )}
+                  </h2>
+                  <p className="text-sm text-muted-foreground">
+                    {t(
+                      "msg.dev.clients.general.tenant_access.picker_description",
+                      "orgfront 조직도에서 허용할 테넌트를 선택하면 목록에 추가됩니다.",
+                    )}
+                  </p>
+                </div>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="shrink-0"
+                  onClick={() => setPickerOpen(false)}
+                >
+                  {t("ui.common.close", "닫기")}
+                </Button>
+              </div>
+              <div className="mt-4 min-h-0 flex-1 overflow-hidden rounded-md border">
+                <iframe
+                  title={t(
+                    "ui.dev.clients.general.tenant_access.picker_title",
+                    "테넌트 선택",
+                  )}
+                  src={pickerUrl}
+                  className="h-full w-full"
+                />
+              </div>
+              <div className="mt-4 flex shrink-0 justify-end">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => setPickerOpen(false)}
+                >
+                  {t("ui.common.close", "닫기")}
+                </Button>
+              </div>
+            </div>
+          </div>,
+          document.body,
+        )
+      : null;
+
+  return (
+    <div className="space-y-3">
+      <Button
+        type="button"
+        variant="outline"
+        className="h-10 gap-2"
+        disabled={disabled}
+        onClick={() => setPickerOpen(true)}
+      >
+        <Building2 className="h-4 w-4" />
+        {t(
+          "ui.dev.clients.general.tenant_access.open_picker",
+          "테넌트 선택기 열기",
+        )}
+      </Button>
+
+      {pickerDialog}
+
+      <div className="rounded-xl border border-dashed border-border bg-muted/20 px-4 py-3 text-sm text-muted-foreground">
+        {selectedCount > 0
+          ? t(
+              "msg.dev.clients.general.tenant_access.picker_hint_with_count",
+              "선택기를 열어 허용 테넌트를 추가하세요. 현재 {{count}}개가 선택되어 있습니다.",
+              { count: selectedCount },
+            )
+          : t(
+              "msg.dev.clients.general.tenant_access.picker_hint",
+              "선택기를 열어 허용 테넌트를 추가하세요.",
+            )}
+      </div>
+    </div>
+  );
+}