사용자 검색 수정

apps/cs/src/pages/groups/ui/add-user-dialog.tsx

@@ -23,6 +23,11 @@ import {
   Input,
   Checkbox,
   Label,
+  Select,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
 } from "@common/components";
 import {
   UserApi,
@@ -42,9 +47,11 @@ function AddUserDialog({ groupId }: AdditionalUserDialogProps) {
   const alert = useAlertStore((state) => state.setMessage);
 
   const [open, setOpen] = useState(false);
-  const [userName, setUserName] = useState("");
+  const [keywordType, setKeywordType] = useState("all");
+  const [keyword, setKeyword] = useState("");
   const [searchParam, setSearchParam] = useState<UserSearchParams>({
-    userName: "",
+    keywordType: "all",
+    keyword: "",
   });
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
@@ -156,7 +163,7 @@ function AddUserDialog({ groupId }: AdditionalUserDialogProps) {
       ...pagination,
       pageIndex: 0,
     });
-    setSearchParam({ userName });
+    setSearchParam({ keywordType, keyword });
   };
 
   const resetSearch = () => {
@@ -164,8 +171,8 @@ function AddUserDialog({ groupId }: AdditionalUserDialogProps) {
       pageIndex: 0,
       pageSize: 10,
     });
-    setUserName("");
-    setSearchParam({ userName: "" });
+    setKeyword("");
+    setSearchParam({ keywordType: "all", keyword: "" });
     setUserRowSelection({});
   };
 
@@ -184,15 +191,26 @@ function AddUserDialog({ groupId }: AdditionalUserDialogProps) {
         </DialogHeader>
         <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>
+            <Select
+              value={keywordType}
+              onValueChange={(value) => setKeywordType(value)}
+            >
+              <SelectTrigger className="w-[18rem]">
+                <SelectValue placeholder="선택" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">전체</SelectItem>
+                <SelectItem value="userId">아이디</SelectItem>
+                <SelectItem value="userName">이름</SelectItem>
+                <SelectItem value="email">이메일</SelectItem>
+                <SelectItem value="mphn">휴대폰번호</SelectItem>
+              </SelectContent>
+            </Select>
             <Input
-              id="userName"
-              className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
-              value={userName}
-              onChange={(e) => setUserName(e.target.value)}
-              placeholder="사용자 이름으로 검색"
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+              className="!text-[1.3rem]"
+              placeholder="검색어를 입력하세요"
             />
           </div>
           <Button className="h-[3.2rem]" type="submit">