[feat] 어드민 유저 검색 관련

packages/adminPage/src/App.jsx

@@ -30,8 +30,8 @@ function App() {
           <Route exact path="/events/:eventId/edit" element={<EventsEditPage />} />
           <Route path="/events/:eventId" element={<EventsDetailPage />} />
           <Route path="/events" element={<EventsPage />} />
-          <Route path="/comments/:eventId" element={<CommentsIDPage />} />
           <Route path="/comments" element={<CommentsPage />} />
+          <Route path="/comments/:eventId" element={<CommentsIDPage />} />
           <Route path="/users" element={<UsersPage />} />
         </Route>
         <Route path="/login" element={<LoginPage />} />

packages/adminPage/src/features/users/Users.jsx

@@ -3,23 +3,23 @@ import { fetchServer } from "@common/dataFetch/fetchServer.js";
 import Pagination from "@admin/components/Pagination";
 import { useState } from "react";
 
-export default function Comments({ searchString, category }) {
-  searchString;
+export default function Comments({ searchParams }) {
   const [page, setPage] = useState(1);
   const data = useQuery(
     "admin-users",
     () =>
-      fetchServer(`/api/v1/admin/event-users?page=${page - 1}&search=${searchString}&size=15`)
+      fetchServer(
+        `/api/v1/admin/event-users?page=${page - 1}&search=${searchParams.get("search") ?? ""}&field=${searchParams.get("field") ?? "userName"}&size=15`,
+      )
         .then((res) => {
-          console.log(category);
           return res;
         })
         .catch((e) => {
           alert("통신 오류로 유저 목록 로드 실패.");
           console.log(e);
           return { users: [] };
         }),
-    [page, searchString],
+    [page, searchParams],
   );
 
   return (

packages/adminPage/src/features/users/index.jsx

@@ -2,15 +2,19 @@ import Suspense from "@common/components/Suspense";
 import Loading from "./Loading.jsx";
 import Users from "./Users.jsx";
 import { useState } from "react";
+import { useSearchParams } from "react-router-dom";
 
 export default function AdminCommentID() {
   const [formString, setFormString] = useState("");
   const [searchString, setSearchString] = useState("");
-  const [category, setCategory] = useState("name");
+  const [category, setCategory] = useState("userName");
+
+  const [searchParams, setSearchParams] = useSearchParams();
 
   function searchComment(e) {
     e.preventDefault();
     setSearchString(formString);
+    setSearchParams({ search: formString, field: category });
   }
 
   return (
@@ -37,7 +41,7 @@ export default function AdminCommentID() {
             onChange={(e) => setCategory(e.target.value)}
             className="bg-transparent text-neutral-600"
           >
-            <option value="name">성명</option>
+            <option value="userName">성명</option>
             <option value="phoneNumber">전화번호</option>
             <option value="frameId">FrameId</option>
           </select>
@@ -58,7 +62,7 @@ export default function AdminCommentID() {
       </div>
 
       <Suspense fallback={<Loading />}>
-        <Users searchString={searchString} category={category} />
+        <Users searchParams={searchParams} setSearchParams={setSearchParams} />
       </Suspense>
     </div>
   );