diff --git a/apps/cs/src/entities/group-user/model/group-user-interface.ts b/apps/cs/src/entities/group-user/model/group-user-interface.ts index 8935bfacc..52fa97fce 100644 --- a/apps/cs/src/entities/group-user/model/group-user-interface.ts +++ b/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; } // 그룹 사용자 목록 응답 인터페이스 diff --git a/apps/cs/src/entities/group/index.ts b/apps/cs/src/entities/group/index.ts index da1d72a41..30dc07714 100644 --- a/apps/cs/src/entities/group/index.ts +++ b/apps/cs/src/entities/group/index.ts @@ -3,4 +3,5 @@ export { groupFormSchema, type GroupFormData, type GroupListResponseDto, + type GroupSearchParams, } from "./model/group-interface"; diff --git a/apps/cs/src/pages/groups/ui/group-users-section.tsx b/apps/cs/src/pages/groups/ui/group-users-section.tsx index dc16fda60..4b7170e3a 100644 --- a/apps/cs/src/pages/groups/ui/group-users-section.tsx +++ b/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({}); 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) => { + 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 (
+
+
+ + setUserNm(e.target.value)} + /> + + +
+

그룹 사용자 목록

diff --git a/apps/cs/src/pages/groups/ui/groups-section.tsx b/apps/cs/src/pages/groups/ui/groups-section.tsx index 2130a94c0..c316283b7 100644 --- a/apps/cs/src/pages/groups/ui/groups-section.tsx +++ b/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({ + 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) => { + 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 (
+
+
+ + setGroupNm(e.target.value)} + /> + + + + + setSearchParams({ + ...searchParams, + delYn: e.target.checked ? "Y" : "N", + }) + } + /> +
+

그룹 목록

diff --git a/apps/cs/src/types/tanstack-table.d.ts b/apps/cs/src/types/tanstack-table.d.ts new file mode 100644 index 000000000..9cd9838a2 --- /dev/null +++ b/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 { + // handleDelete 함수가 string 타입의 인자를 받으므로, 타입을 명시해줍니다. + onDelete: (groupId: string) => void; + } +} \ No newline at end of file