feat: add use-search-params-utils

Author: geonhwiii

src/pages/home/index.ts

@@ -1,3 +1,2 @@
 export * from './ui';
 export * from './model';
-export * from './lib';

src/pages/home/lib/index.ts

@@ -1,2 +1 @@
-export * from './useInitialQueryParams';
 export * from './useTags';

src/pages/home/lib/updateUrl.ts

@@ -1,8 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Plus } from 'lucide-react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { useInitialQueryParams } from '../model/useInitialQueryParams';
-import { updateUrl } from '../lib/updateUrl';
+import { useSearchParams } from 'react-router-dom';
 import { Button, Card } from '@/shared/ui';
 import { PostTable } from '@/features/(post)/list-posts';
 import { usePosts } from '@/features/(post)/list-posts';
@@ -28,33 +26,31 @@ import { useTags } from '../model';
 import type { Post } from '@/entities/post';
 import type { Comment } from '@/entities/comment';
 import type { User } from '@/entities/user';
+import { useSearchParamsUtils } from '@/shared/lib/router';
 
 export function PostsManagerPage() {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const queryParams = new URLSearchParams(location.search);
-  const initial = useInitialQueryParams();
+  const [searchParams] = useSearchParams();
+  const initialSkip = parseInt(searchParams.get('skip') || '0');
+  const initialLimit = parseInt(searchParams.get('limit') || '10');
+  const initialSearch = searchParams.get('search') || '';
+  const initialSortBy = (searchParams.get('sortBy') as any) || 'none';
+  const initialSortOrder = (searchParams.get('sortOrder') as any) || 'asc';
+  const initialTag = searchParams.get('tag') || '';
 
   // 상태 관리
-  const { limit, skip, next, prev, setPageSize, setSkip } = usePagination(
-    initial.limit,
-    initial.skip,
-  );
-  const { searchQuery, setQuery } = usePostSearch(initial.searchQuery);
+  const { limit, skip, setPageSize, setSkip } = usePagination(initialLimit, initialSkip);
+  const { searchQuery, setQuery } = usePostSearch(initialSearch);
   const [selectedPost, setSelectedPost] = useState<Post | null>(null);
   const {
     sortBy,
     sortOrder,
     setBy: setSortBy,
     setOrder: setSortOrder,
-  } = usePostSort(
-    (queryParams.get('sortBy') as any) || 'none',
-    (queryParams.get('sortOrder') as any) || 'asc',
-  );
+  } = usePostSort(initialSortBy, initialSortOrder);
   const [showAddDialog, setShowAddDialog] = useState(false);
   const [showEditDialog, setShowEditDialog] = useState(false);
   const { tags } = useTags();
-  const { selectedTag, setTag: setSelectedTag } = useTagFilter(queryParams.get('tag') || '');
+  const { selectedTag, setTag: setSelectedTag } = useTagFilter(initialTag);
   const [selectedComment, setSelectedComment] = useState<Comment | null>(null);
 
   const [showAddCommentDialog, setShowAddCommentDialog] = useState(false);
@@ -71,9 +67,7 @@ export function PostsManagerPage() {
     sortOrder: (sortOrder as any) || 'asc',
   });
 
-  const updateURL = () => {
-    updateUrl(navigate, { skip, limit, search: searchQuery, sortBy, sortOrder, tag: selectedTag });
-  };
+  const { update: updateParams } = useSearchParamsUtils();
 
   const onPostDeleted = async (_id: number) => {
     void refetch();
@@ -107,33 +101,23 @@ export function PostsManagerPage() {
     await userModal.show(user.id);
   };
 
-  useEffect(() => {
-    updateURL();
-  }, [skip, limit, sortBy, sortOrder, selectedTag, searchQuery]);
+  // URL → 상태 동기화만 유지. 상태 → URL은 이벤트 핸들러에서 부분 업데이트로 처리
 
   useEffect(() => {
-    const params = new URLSearchParams(location.search);
-    setSkip(parseInt(params.get('skip') || String(initial.skip)));
-    setPageSize(parseInt(params.get('limit') || String(initial.limit)));
-    setQuery(params.get('search') || initial.searchQuery);
-    setSortBy((params.get('sortBy') as any) || initial.sortBy);
-    setSortOrder((params.get('sortOrder') as any) || initial.sortOrder);
-    setSelectedTag(params.get('tag') || initial.selectedTag);
-  }, [
-    location.search,
-    setQuery,
-    setSortBy,
-    setSortOrder,
-    setSelectedTag,
-    initial.skip,
-    initial.limit,
-    initial.searchQuery,
-    initial.sortBy,
-    initial.sortOrder,
-    initial.selectedTag,
-    setPageSize,
-    setSkip,
-  ]);
+    const s = parseInt(searchParams.get('skip') || String(initialSkip));
+    const l = parseInt(searchParams.get('limit') || String(initialLimit));
+    const q = searchParams.get('search') || initialSearch;
+    const sb = (searchParams.get('sortBy') as any) || initialSortBy;
+    const so = (searchParams.get('sortOrder') as any) || initialSortOrder;
+    const t = searchParams.get('tag') || initialTag;
+
+    if (s !== skip) setSkip(s);
+    if (l !== limit) setPageSize(l);
+    if (q !== searchQuery) setQuery(q);
+    if (sb !== sortBy) setSortBy(sb as any);
+    if (so !== sortOrder) setSortOrder(so as any);
+    if (t !== selectedTag) setSelectedTag(t);
+  }, [searchParams]);
 
   const renderPostTable = () => (
     <PostTable
@@ -143,7 +127,7 @@ export function PostsManagerPage() {
       selectedTag={selectedTag}
       onClickTag={(tag) => {
         setSelectedTag(tag);
-        updateURL();
+        updateParams({ tag }, { push: true });
       }}
       onOpenDetail={(post) => openPostDetail(post)}
       onOpenUser={(userId) => openUserModal({ id: userId } as User)}
@@ -203,14 +187,20 @@ export function PostsManagerPage() {
               tags={tags}
               onChange={(value) => {
                 setSelectedTag(value);
-                updateURL();
+                updateParams({ tag: value, skip: 0 }, { push: true });
               }}
             />
             <SortSelect
               sortBy={sortBy as any}
               sortOrder={sortOrder as any}
-              onChangeBy={(v) => setSortBy(v as any)}
-              onChangeOrder={(v) => setSortOrder(v as any)}
+              onChangeBy={(v) => {
+                setSortBy(v as any);
+                updateParams({ sortBy: v as any, skip: 0 }, { push: true });
+              }}
+              onChangeOrder={(v) => {
+                setSortOrder(v as any);
+                updateParams({ sortOrder: v as any, skip: 0 }, { push: true });
+              }}
             />
           </div>
 
@@ -220,9 +210,9 @@ export function PostsManagerPage() {
             limit={limit}
             skip={skip}
             total={total}
-            onPrev={prev}
-            onNext={next}
-            onChangeLimit={(v) => setPageSize(v)}
+            onPrev={() => updateParams({ skip: Math.max(0, skip - limit) }, { push: true })}
+            onNext={() => updateParams({ skip: Math.min(total, skip + limit) }, { push: true })}
+            onChangeLimit={(v) => updateParams({ limit: v, skip: 0 }, { push: true })}
           />
         </div>
       </Card.Content>

src/pages/home/model/index.ts

@@ -0,0 +1 @@
+export * from './router';

src/pages/home/model/useInitialQueryParams.ts

@@ -0,0 +1 @@
+export * from './use-search-params';

src/pages/home/ui/post-manager-page.tsx

@@ -0,0 +1,55 @@
+import { useSearchParams } from 'react-router-dom';
+
+type Primitive = string | number | boolean;
+export type ParamsPatch = Record<string, Primitive | null | undefined>;
+
+export type UpdateParamsOptions = {
+  push?: boolean; // default: false (replace)
+  skipNull?: boolean; // default: true (null/undefined 시 삭제)
+};
+
+export function useSearchParamsUtils() {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const update = (patch: ParamsPatch, options?: UpdateParamsOptions) => {
+    const { push = false, skipNull = true } = options ?? {};
+    const next = new URLSearchParams(searchParams);
+
+    Object.entries(patch).forEach(([key, value]) => {
+      if (value === null || value === undefined) {
+        if (skipNull) next.delete(key);
+        else next.set(key, '');
+        return;
+      }
+      next.set(key, String(value));
+    });
+
+    const currentStr = searchParams.toString();
+    const nextStr = next.toString();
+    if (currentStr !== nextStr) setSearchParams(next, { replace: !push });
+  };
+
+  const set = (key: string, value: Primitive | null | undefined, options?: UpdateParamsOptions) => {
+    return update({ [key]: value as any }, options);
+  };
+
+  const remove = (key: string, options?: UpdateParamsOptions) => {
+    const next = new URLSearchParams(searchParams);
+    next.delete(key);
+    const currentStr = searchParams.toString();
+    const nextStr = next.toString();
+    if (currentStr !== nextStr) setSearchParams(next, { replace: !(options?.push ?? false) });
+  };
+
+  const toObject = () => {
+    const obj: Record<string, string> = {};
+    searchParams.forEach((value, key) => {
+      obj[key] = value;
+    });
+    return obj;
+  };
+
+  const get = (key: string) => searchParams.get(key);
+
+  return { params: searchParams, update, set, remove, get, toObject } as const;
+}