[groups] 그룹관리 상단에 조회 조건 축가함

apps/cs/src/entities/group-user/model/group-user-interface.ts

@@ -3,6 +3,7 @@ import type { PageableList, PageableParams } from "@/shared/model";
 // 그룹 사용자 검색 파라미터 인터페이스
 export interface GroupUserSearchParams extends PageableParams {
   keyword?: string;
+  userNm?: string;
 }
 
 // 그룹 사용자 목록 응답 인터페이스

apps/cs/src/entities/group/index.ts

@@ -3,4 +3,5 @@ export {
   groupFormSchema,
   type GroupFormData,
   type GroupListResponseDto,
+  type GroupSearchParams,
 } from "./model/group-interface";

apps/cs/src/pages/groups/ui/group-users-section.tsx

@@ -12,7 +12,7 @@ import {
   type RowSelectionState,
 } from "@tanstack/react-table";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
-import { Button } from "@common/components";
+import { Button,Input, Label  } from "@common/components";
 import { GroupUsersApi } from "@/entities/group-user";
 import { ENDPOINT } from "@/shared/config";
 import { useAlertStore, useDataTable } from "@/shared/lib";
@@ -32,13 +32,17 @@ function GroupUsersSection({ groupId }: GroupUsersSectionProps) {
     pageIndex: 0,
     pageSize: 10,
   });
+
+    const [userNm, setUserNm] = useState("");
+    
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
 
   const query = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.GROUP_USERS, groupId, pagination],
+    queryKey: [ENDPOINT.CMS_SERVICE.GROUP_USERS, groupId, pagination, userNm],
     queryFn: () =>
       GroupUsersApi.findPageGroupUser({
         keyword: groupId,
+        userNm: userNm,
         page: pagination.pageIndex,
         size: pagination.pageSize,
       }),
@@ -46,6 +50,20 @@ function GroupUsersSection({ groupId }: GroupUsersSectionProps) {
     placeholderData: keepPreviousData,
   });
 
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setPagination({
+      ...pagination,
+      pageIndex: 0,
+    });
+    // userNm이 이미 state에 반영되어 있으므로 별도 처리 불필요
+    // 쿼리키에 userNm이 포함되어 있어 자동 refetch됨
+  };
+
+  const handleReset = () => {
+    setUserNm("");
+  };
+
   const { tableComponent, tableInstance: table } = useDataTable({
     query,
     tableOptions: {
@@ -97,6 +115,29 @@ function GroupUsersSection({ groupId }: GroupUsersSectionProps) {
 
   return (
     <div className="flex-1">
+      <div className="card card-border">
+      <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
+        <Label htmlFor="" className="mr-2 text-label">
+          이름
+        </Label>
+        <Input
+          className="h-[3.2rem] w-[20rem] rounded-sm !text-[1.3rem]"
+          value={userNm}
+          onChange={(e) => setUserNm(e.target.value)}
+        />
+        <Button className="h-[3.2rem]" type="submit">
+          조회
+        </Button>
+        <Button
+          type="button"
+          color="white"
+          className="h-[3.2rem]"
+          onClick={handleReset}
+        >
+          초기화
+        </Button>
+      </form>
+      </div>
       <div className="card card-border">
         <div className="card-header">
           <h3 className="text-2xl font-medium text-label">그룹 사용자 목록</h3>

apps/cs/src/pages/groups/ui/groups-section.tsx

@@ -3,14 +3,14 @@
 import { useState } from "react";
 import { keepPreviousData, useQuery, useQueryClient } from "@tanstack/react-query";
 import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
-import { Button } from "@common/components";
-import { GroupApi } from "@/entities/group";
+import { Button, Input, Label } from "@common/components";
+import { GroupApi , type GroupSearchParams} from "@/entities/group";
 import { ENDPOINT } from "@/shared/config";
 import { useDataTable } from "@/shared/lib";
 import { columns } from "../model/groups-table-columns";
 import { GroupsDialog } from "./groups-dialog";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
-import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib"; 
 
 type GroupsSectionProps = {
   handleSelectedGroup: (groupId: string) => void;
@@ -22,10 +22,20 @@ function GroupsSection({ handleSelectedGroup }: GroupsSectionProps) {
     pageSize: 10,
   });
 
+  const [groupNm, setGroupNm] = useState("");
+  const [searchParams, setSearchParams] = useState<GroupSearchParams>({
+    groupNm: "",
+    delYn  :"N",
+    sort   : "groupId,desc",
+  });
+
+
+
   const query = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.GROUPS, pagination],
+    queryKey: [ENDPOINT.CMS_SERVICE.GROUPS,searchParams,  pagination],
     queryFn: () =>
       GroupApi.findPageGroup({
+        ...searchParams,
         page: pagination.pageIndex,
         size: pagination.pageSize,
       }),
@@ -49,6 +59,27 @@ function GroupsSection({ handleSelectedGroup }: GroupsSectionProps) {
       await deleteGroup(groupId);
     }
   };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setPagination({
+      ...pagination,
+      pageIndex: 0,
+    });
+    setSearchParams({
+      ...searchParams,
+      groupNm,
+    });
+  };
+
+  const handleReset = () => {
+    setGroupNm("");
+    setSearchParams({
+      ...searchParams,
+      groupNm: "",
+      delYn:"N"
+    });
+  };
   const handleRowClick = (row: { groupId: string }) => {
     table.setRowSelection({ [row.groupId]: true });
     handleSelectedGroup(row.groupId);  // 1. 리스트에서 선택된 groupId 저장
@@ -76,6 +107,43 @@ function GroupsSection({ handleSelectedGroup }: GroupsSectionProps) {
 
   return (
     <div className="flex-1">
+      <div className="card card-border">
+      <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
+        <Label htmlFor="" className="mr-2 text-label">
+          그룹명
+        </Label>
+        <Input
+          className="h-[3.2rem] w-[20rem] rounded-sm !text-[1.3rem]"
+          value={groupNm}
+          onChange={(e) => setGroupNm(e.target.value)}
+        />
+        <Button className="h-[3.2rem]" type="submit">
+          조회
+        </Button>
+        <Button
+          type="button"
+          color="white"
+          className="h-[3.2rem]"
+          onClick={handleReset}
+        >
+          초기화
+        </Button>
+      <Label htmlFor="delYn" className="ml-4 mr-2 text-label">
+        삭제여부
+      </Label>
+      <input
+        id="delYn"
+        type="checkbox"
+        checked={searchParams.delYn === "Y"}
+        onChange={(e) =>
+          setSearchParams({
+            ...searchParams,
+            delYn: e.target.checked ? "Y" : "N",
+          })
+        }
+      /> 
+      </form>
+      </div>
       <div className="card card-border">
         <div className="card-header">
           <h3 className="text-2xl font-medium text-label">그룹 목록</h3>

apps/cs/src/types/tanstack-table.d.ts

@@ -0,0 +1,11 @@
+import '@tanstack/react-table';
+
+// 오류가 표시되는 이유는 TypeScript가 meta 객체 안에 onDelete라는 속성이 존재한다는 것을 모르기 때문입니다
+declare module '@tanstack/react-table' {
+  // TData는 테이블의 row 데이터 타입을 의미합니다.
+  // interface TableMeta에 우리 프로젝트에서 사용할 커스텀 속성의 타입을 정의합니다.
+  interface TableMeta<TData extends RowData> {
+    // handleDelete 함수가 string 타입의 인자를 받으므로, 타입을 명시해줍니다.
+    onDelete: (groupId: string) => void;
+  }
+}