feat: 콘텐츠 검색 기능 추가

apps/cs/src/pages/menu/model/content-interface.ts

@@ -1,9 +1,8 @@
 import type { PageableList, PageableParams } from "@/shared/model";
 
 export interface ContentParams extends PageableParams {
-  siteId?: string;
-  menuKornNm?: string;
-  urlPath?: string;
+  contsTtl?: string;
+  aprvContsVer?: number;
   useYn?: string;
 }
 

apps/cs/src/pages/menu/ui/dialog/content-dialog.tsx

@@ -13,6 +13,7 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
+  Input,
 } from "@common/components/ui";
 import { ENDPOINT } from "@/shared/config";
 import { ContentApi } from "../../api/content-service";
@@ -25,11 +26,13 @@ type ContentDialogProps = {
 
 function ContentDialog({ handleContentSelect, ...props }: ContentDialogProps) {
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [contsTtl, setContsTtl] = useState("");
 
-  const { data: contentList } = useQuery({
+  const { data: contentList, refetch } = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.CONTENTS],
     queryFn: () =>
-      ContentApi.getContentList({ useYn: "Y", page: 0, size: 100 }),
+      ContentApi.getContentList({ contsTtl, useYn: "Y", page: 0, size: 100 }),
+    enabled: false,
   });
 
   const table = useReactTable({
@@ -50,6 +53,10 @@ function ContentDialog({ handleContentSelect, ...props }: ContentDialogProps) {
     handleContentSelect(contentData);
   }, [table.getSelectedRowModel().rows]);
 
+  useEffect(() => {
+    refetch();
+  }, []);
+
   return (
     <Dialog {...props}>
       <DialogTrigger asChild>
@@ -60,10 +67,24 @@ function ContentDialog({ handleContentSelect, ...props }: ContentDialogProps) {
       </DialogTrigger>
       <DialogContent className="max-w-[60rem]" aria-describedby={undefined}>
         <DialogHeader>
-          <DialogTitle>콘텐츠 선택</DialogTitle>
+          <DialogTitle>콘텐츠 조회</DialogTitle>
         </DialogHeader>
-        <div className="mt-4 h-[40rem] overflow-y-auto">
-          <DataTable table={table} />
+        <div className="flex flex-col gap-4">
+          <div className="card card-border !m-0 flex w-full items-center gap-2">
+            <Input
+              placeholder="검색어를 입력하세요."
+              className="!text-[1.3rem]"
+              value={contsTtl}
+              onChange={(e) => setContsTtl(e.target.value)}
+            />
+            <Button onClick={() => refetch()}>
+              <i className="diveicon di-search" />
+              조회
+            </Button>
+          </div>
+          <div className="h-[40rem] w-full overflow-y-auto">
+            <DataTable table={table} />
+          </div>
         </div>
       </DialogContent>
     </Dialog>

apps/cs/src/pages/menu/ui/menu-page.tsx

@@ -27,7 +27,7 @@ import {
   type MenuFormData,
 } from "../model/menu-interface";
 import { MenuTree } from "./menu-tree";
-import { MenuForm } from "./menu-form";
+import { MenuForm } from "./form/menu-form";
 import { generateTreeData } from "../lib/utils";
 
 function MenuPage() {
@@ -119,10 +119,10 @@ function MenuPage() {
       sortSeq: menuInfo?.sortSeq ?? 1,
       menuKornNm: menuInfo?.menuKornNm ?? "",
       menuLnkgTypeCd: menuInfo?.menuLnkgTypeCd ?? MENU_TYPE.EMPTY,
+      iconNm: menuInfo?.iconName,
       otptYn: menuInfo?.otptYn ?? "Y",
       evlUseYn: menuInfo?.evlUseYn ?? "Y",
       useYn: menuInfo?.useYn ?? "Y",
-      iconNm: menuInfo?.iconName,
     },
   });