From 950355717c5e1d4e0b3465c0522ac789068e87b7 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Fri, 18 Jul 2025 18:47:24 +0900
Subject: [PATCH] =?UTF-8?q?[apps/cs]=20feat:=20=EA=B6=8C=ED=95=9C=EB=A7=B5?=
 =?UTF-8?q?=ED=95=91=20=EB=8B=A4=EC=9D=B4=EC=96=BC=EB=A1=9C=EA=B7=B8=20?=
 =?UTF-8?q?=EB=82=B4=20=EA=B2=80=EC=83=89=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/role/ui/mapping-role-dialog.tsx | 58 +++++++++++++++----
 1 file changed, 48 insertions(+), 10 deletions(-)

diff --git a/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx b/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx
index c7f8cdcdb..46f3d45f0 100644
--- a/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx
+++ b/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>
   );