[apps/cs] feat: 권한맵핑 다이얼로그 내 검색 기능 추가

apps/cs/src/pages/role/ui/mapping-role-dialog.tsx

@@ -1,5 +1,6 @@
-import { getCoreRowModel, type ColumnDef } from "@tanstack/react-table";
+import { useState, useRef } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { getCoreRowModel, type ColumnDef } from "@tanstack/react-table";
 import {
   Dialog,
   DialogTrigger,
@@ -8,6 +9,7 @@ import {
   DialogTitle,
   Button,
   Switch,
+  Input,
 } from "@common/components";
 import {
   RoleAuthorizationsApi,
@@ -31,12 +33,18 @@ function MappingRoleDialog({
 }: MappingRoleDialogProps) {
   const queryClient = useQueryClient();
   const alert = useAlertStore((state) => state.setMessage);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [searchParams, setSearchParams] = useState({
+    keyword: "",
+    keywordType: "authorizationName",
+  });
 
   const query = useQuery({
-    queryKey: [ENDPOINT.USER_SERVICE.AUTHORIZATIONS],
+    queryKey: [ENDPOINT.USER_SERVICE.ROLE_AUTHORIZATIONS, searchParams],
     queryFn: () =>
       RoleAuthorizationsApi.getRoleAuthorizationsListByRoleId({
         roleId,
+        ...searchParams,
       }),
     enabled: open,
   });
@@ -46,7 +54,7 @@ function MappingRoleDialog({
       RoleAuthorizationsApi.createRoleAuthorizations(data),
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: [ENDPOINT.USER_SERVICE.AUTHORIZATIONS],
+        queryKey: [ENDPOINT.USER_SERVICE.ROLE_AUTHORIZATIONS],
       });
       alert("권한 맵핑이 완료되었습니다.");
     },
@@ -66,6 +74,26 @@ function MappingRoleDialog({
     );
   };
 
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.target as HTMLFormElement);
+    const keyword = formData.get("keyword") as string;
+    setSearchParams({
+      ...searchParams,
+      keyword,
+    });
+  };
+
+  const handleReset = () => {
+    if (inputRef.current) {
+      inputRef.current.value = "";
+    }
+    setSearchParams({
+      ...searchParams,
+      keyword: "",
+    });
+  };
+
   const { tableComponent } = useDataTable({
     query,
     tableOptions: {
@@ -79,21 +107,31 @@ function MappingRoleDialog({
       <DialogTrigger asChild>
         <Button size="sm">권한맵핑</Button>
       </DialogTrigger>
-      <DialogContent className="max-w-[60rem]" aria-describedby={undefined}>
+      <DialogContent className="max-w-[80rem]" aria-describedby={undefined}>
         <DialogHeader>
           <DialogTitle>모듈 목록</DialogTitle>
         </DialogHeader>
-        <div className="max-h-[40rem] overflow-y-auto">
-          <div className="mb-4 flex justify-end gap-2">
-            <Button size="sm" onClick={() => handleApplyAll("Y")}>
-              일괄적용
+        <div className="flex items-center justify-between">
+          <form onSubmit={handleSubmit} className="flex items-center gap-2">
+            <Input
+              ref={inputRef}
+              type="text"
+              name="keyword"
+              className="w-[32rem]"
+            />
+            <Button type="submit">검색</Button>
+            <Button type="button" color="white" onClick={handleReset}>
+              초기화
             </Button>
-            <Button size="sm" color="gray" onClick={() => handleApplyAll("N")}>
+          </form>
+          <div className="flex items-center justify-end gap-2">
+            <Button onClick={() => handleApplyAll("Y")}>일괄적용</Button>
+            <Button color="gray" onClick={() => handleApplyAll("N")}>
               일괄해제
             </Button>
           </div>
-          {tableComponent}
         </div>
+        <div className="max-h-[60rem] overflow-y-auto">{tableComponent}</div>
       </DialogContent>
     </Dialog>
   );