조직현황 구조변경. 총괄센터삼안 실 조직 삽입확인

adminfront/src/features/tenants/components/ParentTenantSelector.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+import type { TenantSummary } from "../../../lib/adminApi";
+import { filterParentTenants } 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: "",
+  },
+  {
+    id: "org-1",
+    type: "ORGANIZATION",
+    name: "기획부",
+    slug: "planning",
+    description: "",
+    status: "active",
+    memberCount: 0,
+    createdAt: "",
+    updatedAt: "",
+  },
+];
+
+describe("filterParentTenants", () => {
+  it("searches parent candidates by name and slug", () => {
+    expect(
+      filterParentTenants(tenants, "saman", false).map((t) => t.id),
+    ).toEqual(["company-1"]);
+    expect(
+      filterParentTenants(tenants, "family", false).map((t) => t.id),
+    ).toEqual(["group-1"]);
+  });
+
+  it("can limit parent candidates to company and company group tenants", () => {
+    expect(filterParentTenants(tenants, "", true).map((t) => t.id)).toEqual([
+      "company-1",
+      "group-1",
+    ]);
+  });
+});

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

@@ -0,0 +1,114 @@
+import { Search } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Input } from "../../../components/ui/input";
+import { Label } from "../../../components/ui/label";
+import type { TenantSummary } from "../../../lib/adminApi";
+import { t } from "../../../lib/i18n";
+
+type ParentTenantSelectorProps = {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  tenants: TenantSummary[];
+  noneLabel: string;
+  helpText?: string;
+  excludeTenantId?: string;
+};
+
+const companyParentTypes = new Set(["COMPANY", "COMPANY_GROUP"]);
+
+export function filterParentTenants(
+  tenants: TenantSummary[],
+  search: string,
+  companyOnly: boolean,
+  excludeTenantId = "",
+) {
+  const normalizedSearch = search.trim().toLowerCase();
+  return tenants.filter((tenant) => {
+    if (excludeTenantId && tenant.id === excludeTenantId) return false;
+    if (companyOnly && !companyParentTypes.has(tenant.type)) return false;
+    if (!normalizedSearch) return true;
+
+    return [tenant.name, tenant.slug, tenant.type]
+      .filter(Boolean)
+      .some((value) => value.toLowerCase().includes(normalizedSearch));
+  });
+}
+
+export function ParentTenantSelector({
+  id,
+  label,
+  value,
+  onChange,
+  tenants,
+  noneLabel,
+  helpText,
+  excludeTenantId,
+}: ParentTenantSelectorProps) {
+  const [search, setSearch] = useState("");
+  const [companyOnly, setCompanyOnly] = useState(false);
+  const filteredTenants = useMemo(
+    () => filterParentTenants(tenants, search, companyOnly, excludeTenantId),
+    [tenants, search, companyOnly, excludeTenantId],
+  );
+  const selectedTenant = tenants.find((tenant) => tenant.id === value);
+  const optionTenants =
+    selectedTenant &&
+    !filteredTenants.some((tenant) => tenant.id === selectedTenant.id)
+      ? [selectedTenant, ...filteredTenants]
+      : filteredTenants;
+
+  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>
+      <select
+        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"
+        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>
+      {helpText && (
+        <p className="mt-1 text-xs text-muted-foreground">{helpText}</p>
+      )}
+    </div>
+  );
+}