[feat] 어드민 유저 검색 쿼리를 라우팅

softeerbootcamp4th · Aug 23, 2024 · b74cb3e · b74cb3e
1 parent 0b7cded
commit b74cb3e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/packages/adminPage/src/App.jsx b/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 />} />

diff --git a/packages/adminPage/src/features/users/Users.jsx b/packages/adminPage/src/features/users/Users.jsx
@@ -3,14 +3,13 @@ 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}&field=${category}&size=15`,
+        `/api/v1/admin/event-users?page=${page - 1}&search=${searchParams.get("search") ?? ""}&field=${searchParams.get("field") ?? "userName"}&size=15`,
       )
         .then((res) => {
           return res;
@@ -20,7 +19,7 @@ export default function Comments({ searchString, category }) {
           console.log(e);
           return { users: [] };
         }),
-    [page, searchString],
+    [page, searchParams],
   );
 
   return (

diff --git a/packages/adminPage/src/features/users/index.jsx b/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("userName");
 
+  const [searchParams, setSearchParams] = useSearchParams();
+
   function searchComment(e) {
     e.preventDefault();
     setSearchString(formString);
+    setSearchParams({ search: formString, field: category });
   }
 
   return (
@@ -58,7 +62,7 @@ export default function AdminCommentID() {
       </div>
 
       <Suspense fallback={<Loading />}>
-        <Users searchString={searchString} category={category} />
+        <Users searchParams={searchParams} setSearchParams={setSearchParams} />
       </Suspense>
     </div>
   );