diff --git a/apps/cs/src/pages/groups/ui/add-user-dialog.tsx b/apps/cs/src/pages/groups/ui/add-user-dialog.tsx index aafba70db..4f8a205ff 100644 --- a/apps/cs/src/pages/groups/ui/add-user-dialog.tsx +++ b/apps/cs/src/pages/groups/ui/add-user-dialog.tsx @@ -1,6 +1,6 @@ "use client"; -import { useState } from "react"; +import { useState, useEffect } from "react"; import { keepPreviousData, useQuery, @@ -22,6 +22,7 @@ import { DialogFooter, Input, Checkbox, + Label, } from "@common/components"; import { UserApi, @@ -41,7 +42,8 @@ function AddUserDialog({ groupId }: AdditionalUserDialogProps) { const alert = useAlertStore((state) => state.setMessage); const [open, setOpen] = useState(false); - const [userSearchQuery, setUserSearchQuery] = useState({ + const [userName, setUserName] = useState(""); + const [searchParam, setSearchParam] = useState({ userName: "", }); const [pagination, setPagination] = useState({ @@ -53,10 +55,10 @@ function AddUserDialog({ groupId }: AdditionalUserDialogProps) { ); const query = useQuery({ - queryKey: [ENDPOINT.USER_SERVICE.USERS, userSearchQuery, pagination], + queryKey: [ENDPOINT.USER_SERVICE.USERS, searchParam, pagination], queryFn: () => UserApi.findPageUser({ - ...userSearchQuery, + ...searchParam, page: pagination.pageIndex, size: pagination.pageSize, }), @@ -118,6 +120,9 @@ function AddUserDialog({ groupId }: AdditionalUserDialogProps) { onRowSelectionChange: setUserRowSelection, getRowId: (row) => row.userUnqId, }, + dataTableOptions: { + viewPagination: true, + }, }); const handleAddUsers = async () => { @@ -144,10 +149,30 @@ function AddUserDialog({ groupId }: AdditionalUserDialogProps) { } }; - const handleSearch = () => { - setPagination({ pageIndex: 0, pageSize: 10 }); + const handleSearch = (e: React.FormEvent) => { + e.preventDefault(); + e.stopPropagation(); + setPagination({ + ...pagination, + pageIndex: 0, + }); + setSearchParam({ userName }); }; + const resetSearch = () => { + setPagination({ + pageIndex: 0, + pageSize: 10, + }); + setUserName(""); + setSearchParam({ userName: "" }); + setUserRowSelection({}); + }; + + useEffect(() => { + if (open) resetSearch(); + }, [open]); + return ( @@ -157,20 +182,31 @@ function AddUserDialog({ groupId }: AdditionalUserDialogProps) { 사용자 추가 -
- - setUserSearchQuery({ - ...userSearchQuery, - userName: e.target.value, - }) - } - className="!text-[1.3rem]" - placeholder="사용자 이름으로 검색" - /> - -
+
+
+ + setUserName(e.target.value)} + placeholder="사용자 이름으로 검색" + /> +
+ + +
{tableComponent}