From f7f954a2a60600920191bcb0b6672e1139277c5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B5=9C=EC=A7=80=EC=B2=A0?= <jcchoi@onasys.co.kr>
Date: Wed, 27 Aug 2025 12:30:20 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B7=B8=EB=A3=B9=EA=B4=80=EB=A6=AC=20?=
 =?UTF-8?q?=EB=A9=94=EB=89=B4=EA=B6=8C=ED=95=9C=20=EB=AA=A8=EB=8B=AC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../group-menu-authority-table-columns.tsx    |  3 +
 .../pages/groups/ui/menu-authority-dialog.tsx | 82 ++++++++++++++++++-
 2 files changed, 81 insertions(+), 4 deletions(-)

diff --git a/apps/cs/src/pages/groups/model/group-menu-authority-table-columns.tsx b/apps/cs/src/pages/groups/model/group-menu-authority-table-columns.tsx
index 3e26e1106..c4cc50590 100644
--- a/apps/cs/src/pages/groups/model/group-menu-authority-table-columns.tsx
+++ b/apps/cs/src/pages/groups/model/group-menu-authority-table-columns.tsx
@@ -38,6 +38,9 @@ export const createColumns = (
     {
       accessorKey: "menuNm",
       header: "메뉴명",
+      cell: ({ getValue }) => (
+        <div className="text-left">{getValue() as string}</div>
+      ),
     },
     {
       accessorKey: "mngAuthrtYn",
diff --git a/apps/cs/src/pages/groups/ui/menu-authority-dialog.tsx b/apps/cs/src/pages/groups/ui/menu-authority-dialog.tsx
index 287edb23b..38c6597fc 100644
--- a/apps/cs/src/pages/groups/ui/menu-authority-dialog.tsx
+++ b/apps/cs/src/pages/groups/ui/menu-authority-dialog.tsx
@@ -1,10 +1,16 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery } from "@tanstack/react-query";
 import { getCoreRowModel } from "@tanstack/react-table";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  Input,
   Button,
   Dialog,
   DialogClose,
@@ -23,6 +29,7 @@ import {
 import { ENDPOINT } from "@/shared/config";
 import { useAlertStore, useDataTable, useMutationWrapper } from "@/shared/lib";
 import { createColumns } from "../model/group-menu-authority-table-columns";
+import { SiteSelect } from "@/entities/site";
 
 type MenuAuthorityDialogProps = {
   groupId: string;
@@ -33,9 +40,33 @@ function MenuAuthorityDialog({ groupId }: MenuAuthorityDialogProps) {
   const alert = useAlertStore((state) => state.setMessage);
   const [open, setOpen] = useState(false);
 
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [siteId, setSiteId] = useState("");
+  const [keywordType, setKeywordType] = useState("");
+  const [searchParams, setSearchParams] = useState({
+    keyword: "",
+    keywordType: "",
+    siteId: "",
+  });
+  
+  const handleReset = () => {
+    if (inputRef.current) inputRef.current.value = "";
+    setKeywordType("");
+    setSiteId("");
+    setSearchParams({
+      keyword: "",
+      keywordType: "",
+      siteId: "",
+    });
+  };
+
+
   const query = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.MENU_AUTHRTS, groupId],
-    queryFn: () => MenuAuthorityApi.getGroupMenuAuthorityList({ groupId, useYn: "Y" }),
+    queryKey: [ENDPOINT.CMS_SERVICE.MENU_AUTHRTS, groupId, searchParams],
+    queryFn: () => MenuAuthorityApi.getGroupMenuAuthorityList({ 
+      groupId, 
+      ...searchParams 
+    }),
     enabled: open && !!groupId,
   });
 
@@ -75,6 +106,17 @@ function MenuAuthorityDialog({ groupId }: MenuAuthorityDialogProps) {
     }
   };
 
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.target as HTMLFormElement);
+    const keyword = formData.get("keyword") as string;
+    setSearchParams({
+      keyword,
+      keywordType,
+      siteId: siteId === "ALL" ? "" : siteId,
+    });
+  };
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
@@ -82,10 +124,42 @@ function MenuAuthorityDialog({ groupId }: MenuAuthorityDialogProps) {
           메뉴권한
         </Button>
       </DialogTrigger>
-      <DialogContent className="max-w-[80rem]" aria-describedby={undefined}>
+      <DialogContent className="max-w-[120rem]" aria-describedby={undefined}>
         <DialogHeader>
           <DialogTitle>그룹별 메뉴 권한</DialogTitle>
         </DialogHeader>
+        <div className="flex items-center justify-between">
+          <form onSubmit={handleSubmit} className="flex items-center gap-2">
+            <SiteSelect
+              value={siteId}
+              onValueChange={(value) => setSiteId(value)}
+              enabledAllSite
+              className="w-[24rem]"
+            />
+            <Select
+              value={keywordType}
+              onValueChange={(value) => setKeywordType(value)}
+            >
+              <SelectTrigger className="w-[12rem]">
+                <SelectValue placeholder="선택" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="menuNm">메뉴명</SelectItem>
+                <SelectItem value="menuUrl">메뉴URL</SelectItem>
+              </SelectContent>
+            </Select>
+            <Input
+              ref={inputRef}
+              type="text"
+              name="keyword"
+              className="w-[12rem]"
+            />
+            <Button type="submit">검색</Button>
+            <Button type="button" color="white" onClick={handleReset}>
+              초기화
+            </Button>
+          </form>
+        </div>
         <div className="max-h-[40rem] overflow-auto">{tableComponent}</div>
         <DialogFooter className="!justify-center">
           <Button size="lg" onClick={handleSave}>