devfront 관계 탭 사용자 검색·다중선택 UX 개선

devfront/src/features/clients/ClientRelationsPage.tsx

@@ -1,7 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
 import { ArrowLeft, Link2, Plus, Trash2 } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useDeferredValue, useMemo, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
@@ -24,9 +24,11 @@ import {
 } from "../../components/ui/table";
 import { toast } from "../../components/ui/use-toast";
 import {
+  type DevAssignableUser,
   addClientRelation,
   fetchClient,
   fetchClientRelations,
+  fetchDevUsers,
   removeClientRelation,
 } from "../../lib/devApi";
 import { t } from "../../lib/i18n";
@@ -45,13 +47,37 @@ const relationOptions = [
   "status_operator",
 ] as const;
 
+type RelationOption = (typeof relationOptions)[number];
+
+function relationLabel(relation: RelationOption) {
+  return t(`ui.dev.clients.relationships.option.${relation}.label`, relation);
+}
+
+function relationDescription(relation: RelationOption) {
+  return t(
+    `ui.dev.clients.relationships.option.${relation}.description`,
+    relation,
+  );
+}
+
+function formatUserLabel(user: DevAssignableUser) {
+  const primary = user.name.trim() || user.email.trim();
+  return `${primary} (${user.email.trim()})`;
+}
+
 function ClientRelationsPage() {
   const params = useParams();
   const queryClient = useQueryClient();
   const clientId = params.id ?? "";
-  const [relation, setRelation] =
-    useState<(typeof relationOptions)[number]>("config_editor");
-  const [userId, setUserId] = useState("");
+  const [selectedRelations, setSelectedRelations] = useState<RelationOption[]>(
+    [],
+  );
+  const [userSearch, setUserSearch] = useState("");
+  const deferredUserSearch = useDeferredValue(userSearch.trim());
+  const [selectedUser, setSelectedUser] = useState<DevAssignableUser | null>(
+    null,
+  );
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
 
   const { data: clientData } = useQuery({
     queryKey: ["client", clientId],
@@ -69,6 +95,15 @@ function ClientRelationsPage() {
     enabled: clientId.length > 0,
   });
 
+  const { data: userSearchData, isFetching: isUserSearchLoading } = useQuery({
+    queryKey: ["dev-users", deferredUserSearch],
+    queryFn: () => fetchDevUsers(deferredUserSearch),
+    enabled:
+      clientId.length > 0 &&
+      deferredUserSearch.length > 0 &&
+      selectedUser == null,
+  });
+
   const sortedItems = useMemo(() => {
     return [...(relationData?.items ?? [])].sort((a, b) => {
       const relationCompare = a.relation.localeCompare(b.relation);
@@ -79,17 +114,47 @@ function ClientRelationsPage() {
     });
   }, [relationData?.items]);
 
+  const selectedUserExistingRelations = useMemo(() => {
+    if (!selectedUser) {
+      return new Set<string>();
+    }
+
+    return new Set(
+      sortedItems
+        .filter((item) => item.subjectId === selectedUser.id)
+        .map((item) => item.relation),
+    );
+  }, [selectedUser, sortedItems]);
+
   const addMutation = useMutation({
-    mutationFn: () =>
-      addClientRelation(clientId, {
-        relation,
-        userId: userId.trim(),
-      }),
+    mutationFn: async () => {
+      if (!selectedUser) {
+        throw new Error(
+          t(
+            "msg.dev.clients.relationships.user_required",
+            "추가할 사용자를 선택하세요.",
+          ),
+        );
+      }
+
+      const pendingRelations = selectedRelations.filter(
+        (relation) => !selectedUserExistingRelations.has(relation),
+      );
+      for (const relation of pendingRelations) {
+        await addClientRelation(clientId, {
+          relation,
+          userId: selectedUser.id,
+        });
+      }
+    },
     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: ["client-relations", clientId],
       });
-      setUserId("");
+      setSelectedRelations([]);
+      setSelectedUser(null);
+      setUserSearch("");
+      setIsSearchOpen(false);
       toast(
         t(
           "msg.dev.clients.relationships.added",
@@ -144,19 +209,48 @@ function ClientRelationsPage() {
   });
 
   const handleAdd = () => {
-    if (!userId.trim()) {
+    if (!selectedUser) {
       toast(
         t(
           "msg.dev.clients.relationships.user_required",
-          "추가할 User ID를 입력하세요.",
+          "추가할 사용자를 선택하세요.",
         ),
         "error",
       );
       return;
     }
+
+    const pendingRelations = selectedRelations.filter(
+      (relation) => !selectedUserExistingRelations.has(relation),
+    );
+    if (pendingRelations.length === 0) {
+      toast(
+        t(
+          "msg.dev.clients.relationships.relation_required",
+          "추가할 관계를 하나 이상 선택하세요.",
+        ),
+        "error",
+      );
+      return;
+    }
+
     addMutation.mutate();
   };
 
+  const handleRelationToggle = (relation: RelationOption) => {
+    setSelectedRelations((current) =>
+      current.includes(relation)
+        ? current.filter((item) => item !== relation)
+        : [...current, relation],
+    );
+  };
+
+  const handleSelectUser = (user: DevAssignableUser) => {
+    setSelectedUser(user);
+    setUserSearch(formatUserLabel(user));
+    setIsSearchOpen(false);
+  };
+
   const handleRemove = (targetRelation: string, subject: string) => {
     if (
       window.confirm(
@@ -243,54 +337,152 @@ function ClientRelationsPage() {
           <CardDescription>
             {t(
               "msg.dev.clients.relationships.add_description",
-              "현재는 direct User assignment만 지원합니다. subject는 자동으로 User:<id> 형식으로 전송됩니다.",
+              "사용자를 검색해 선택하고, 하나 이상의 운영 관계를 한 번에 부여할 수 있습니다.",
             )}
           </CardDescription>
         </CardHeader>
-        <CardContent className="grid gap-4 md:grid-cols-[220px_minmax(0,1fr)_auto] md:items-end">
+        <CardContent className="space-y-6">
           <div className="space-y-2">
-            <Label htmlFor="relation-select">
+            <Label htmlFor="user-search-input">
+              {t("ui.dev.clients.relationships.user_search", "사용자")}
+            </Label>
+            <div className="relative">
+              <Input
+                id="user-search-input"
+                value={userSearch}
+                onFocus={() => {
+                  if (!selectedUser && userSearch.trim() !== "") {
+                    setIsSearchOpen(true);
+                  }
+                }}
+                onChange={(event) => {
+                  setSelectedUser(null);
+                  setUserSearch(event.target.value);
+                  setIsSearchOpen(true);
+                }}
+                placeholder={t(
+                  "ui.dev.clients.relationships.user_search_placeholder",
+                  "이름 또는 이메일 검색...",
+                )}
+              />
+              {isSearchOpen &&
+                selectedUser == null &&
+                userSearch.trim() !== "" && (
+                  <div className="absolute z-20 mt-2 max-h-64 w-full overflow-y-auto rounded-md border border-border bg-background shadow-lg">
+                    {isUserSearchLoading ? (
+                      <div className="px-3 py-2 text-sm text-muted-foreground">
+                        {t(
+                          "msg.dev.clients.relationships.search_loading",
+                          "사용자를 찾는 중입니다...",
+                        )}
+                      </div>
+                    ) : (userSearchData?.items ?? []).length > 0 ? (
+                      (userSearchData?.items ?? []).map((user) => (
+                        <button
+                          key={user.id}
+                          type="button"
+                          className="flex w-full flex-col gap-1 px-3 py-2 text-left hover:bg-muted/40"
+                          onMouseDown={(event) => {
+                            event.preventDefault();
+                            handleSelectUser(user);
+                          }}
+                        >
+                          <span className="text-sm font-semibold">
+                            {user.name || user.email}
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            {user.email}
+                            {user.loginId ? ` · ${user.loginId}` : ""}
+                          </span>
+                        </button>
+                      ))
+                    ) : (
+                      <div className="px-3 py-2 text-sm text-muted-foreground">
+                        {t(
+                          "msg.dev.clients.relationships.search_empty",
+                          "검색 결과가 없습니다.",
+                        )}
+                      </div>
+                    )}
+                  </div>
+                )}
+            </div>
+            {selectedUser && (
+              <p className="text-xs text-muted-foreground">
+                {t(
+                  "msg.dev.clients.relationships.selected_user",
+                  "선택된 사용자: {{user}}",
+                  { user: formatUserLabel(selectedUser) },
+                )}
+              </p>
+            )}
+          </div>
+
+          <div className="space-y-3">
+            <Label>
               {t("ui.dev.clients.relationships.relation", "Relation")}
             </Label>
-            <select
-              id="relation-select"
-              value={relation}
-              onChange={(e) =>
-                setRelation(e.target.value as (typeof relationOptions)[number])
-              }
-              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+            <div className="grid gap-3 md:grid-cols-2">
+              {relationOptions.map((relation) => {
+                const disabled = selectedUserExistingRelations.has(relation);
+                const isSelected = selectedRelations.includes(relation);
+                return (
+                  <label
+                    key={relation}
+                    className={`flex gap-3 rounded-xl border p-4 transition-all ${
+                      disabled
+                        ? "border-border/60 bg-muted/30 opacity-60"
+                        : isSelected
+                          ? "border-primary bg-primary/10 shadow-[0_0_0_1px_rgba(59,130,246,0.35)] ring-1 ring-primary/30"
+                          : "border-border bg-background hover:border-primary/40 hover:bg-muted/20"
+                    }`}
+                  >
+                    <input
+                      type="checkbox"
+                      className="mt-1 h-4 w-4 accent-primary"
+                      checked={isSelected || disabled}
+                      disabled={disabled}
+                      onChange={() => handleRelationToggle(relation)}
+                    />
+                    <div className="space-y-1">
+                      <div
+                        className={`text-sm font-semibold ${
+                          isSelected && !disabled ? "text-primary" : ""
+                        }`}
+                      >
+                        {relationLabel(relation)}
+                      </div>
+                      <div className="text-xs text-muted-foreground">
+                        {relationDescription(relation)}
+                      </div>
+                      <div
+                        className={`text-[11px] uppercase tracking-wide ${
+                          isSelected && !disabled
+                            ? "text-primary/80"
+                            : "text-muted-foreground/80"
+                        }`}
+                      >
+                        {relation}
+                      </div>
+                    </div>
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+
+          <div className="flex justify-end">
+            <Button
+              onClick={handleAdd}
+              disabled={addMutation.isPending}
+              className="gap-2"
             >
-              {relationOptions.map((option) => (
-                <option key={option} value={option}>
-                  {option}
-                </option>
-              ))}
-            </select>
+              <Plus className="h-4 w-4" />
+              {addMutation.isPending
+                ? t("msg.common.loading", "Loading...")
+                : t("ui.dev.clients.relationships.add", "Add")}
+            </Button>
           </div>
-          <div className="space-y-2">
-            <Label htmlFor="user-id-input">
-              {t("ui.dev.clients.relationships.user_id", "User ID")}
-            </Label>
-            <Input
-              id="user-id-input"
-              value={userId}
-              onChange={(e) => setUserId(e.target.value)}
-              placeholder={t(
-                "ui.dev.clients.relationships.user_id_placeholder",
-                "kratos user id",
-              )}
-            />
-          </div>
-          <Button
-            onClick={handleAdd}
-            disabled={addMutation.isPending}
-            className="gap-2"
-          >
-            <Plus className="h-4 w-4" />
-            {addMutation.isPending
-              ? t("msg.common.loading", "Loading...")
-              : t("ui.dev.clients.relationships.add", "Add")}
-          </Button>
         </CardContent>
       </Card>
 
@@ -358,12 +550,31 @@ function ClientRelationsPage() {
               <TableBody>
                 {sortedItems.map((item) => (
                   <TableRow key={`${item.relation}:${item.subject}`}>
-                    <TableCell className="font-mono text-xs">
-                      {item.relation}
+                    <TableCell>
+                      <div className="space-y-1">
+                        <div className="font-medium">
+                          {relationLabel(item.relation as RelationOption)}
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                          {relationDescription(item.relation as RelationOption)}
+                        </div>
+                      </div>
                     </TableCell>
                     <TableCell>
                       <div className="space-y-1">
-                        <div className="font-mono text-xs">{item.subject}</div>
+                        <div className="font-medium">
+                          {item.userName || item.userEmail || item.subject}
+                        </div>
+                        {(item.userEmail || item.userLoginId) && (
+                          <div className="text-xs text-muted-foreground">
+                            {[item.userEmail, item.userLoginId]
+                              .filter(Boolean)
+                              .join(" · ")}
+                          </div>
+                        )}
+                        <div className="font-mono text-xs text-muted-foreground">
+                          {item.subject}
+                        </div>
                         {item.subjectId && (
                           <div className="text-xs text-muted-foreground">
                             ID: {item.subjectId}