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 }) => ( +
{getValue() as string}
+ ), }, { 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(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) => { + 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 ( @@ -82,10 +124,42 @@ function MenuAuthorityDialog({ groupId }: MenuAuthorityDialogProps) { 메뉴권한 - + 그룹별 메뉴 권한 +
+
+ setSiteId(value)} + enabledAllSite + className="w-[24rem]" + /> + + + + + +
{tableComponent}