[apps/cs] chore: 그룹관리 내 사용자 추가 팝업 수정 (CS_UT05020103)

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<UserSearchParams>({
+  const [userName, setUserName] = useState("");
+  const [searchParam, setSearchParam] = useState<UserSearchParams>({
     userName: "",
   });
   const [pagination, setPagination] = useState<PaginationState>({
@@ -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<HTMLFormElement>) => {
+    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 (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
@@ -157,20 +182,31 @@ function AddUserDialog({ groupId }: AdditionalUserDialogProps) {
         <DialogHeader>
           <DialogTitle>사용자 추가</DialogTitle>
         </DialogHeader>
-        <div className="mb-4 flex items-end gap-2">
-          <Input
-            value={userSearchQuery.userName}
-            onChange={(e) =>
-              setUserSearchQuery({
-                ...userSearchQuery,
-                userName: e.target.value,
-              })
-            }
-            className="!text-[1.3rem]"
-            placeholder="사용자 이름으로 검색"
-          />
-          <Button onClick={handleSearch}>검색</Button>
-        </div>
+        <form onSubmit={handleSearch} className="mb-4 flex items-end gap-2">
+          <div className="flex items-center gap-2">
+            <Label htmlFor="userName" className="mr-2 text-label">
+              사용자 이름
+            </Label>
+            <Input
+              id="userName"
+              className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
+              value={userName}
+              onChange={(e) => setUserName(e.target.value)}
+              placeholder="사용자 이름으로 검색"
+            />
+          </div>
+          <Button className="h-[3.2rem]" type="submit">
+            조회
+          </Button>
+          <Button
+            type="button"
+            color="white"
+            className="h-[3.2rem]"
+            onClick={resetSearch}
+          >
+            초기화
+          </Button>
+        </form>
         {tableComponent}
         <DialogFooter>
           <Button color="white" onClick={() => setOpen(false)}>