Refactor: 검색페이지 searchParams 사용으로 변경

next.config.ts

@@ -17,7 +17,7 @@ const nextConfig: NextConfig = {
     remotePatterns: [
       {
         protocol: 'https',
-        hostname: 'slid-todo.s3.ap-northeast-2.amazonaws.com',
+        hostname: 'zzikzzik-bucket.s3.ap-northeast-2.amazonaws.com',
       },
     ],
   },

src/app/(route)/search/layout.tsx

@@ -0,0 +1,9 @@
+import { Suspense } from 'react';
+
+export default function SearchLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <Suspense>{children}</Suspense>;
+}

src/app/(route)/search/page.tsx

@@ -2,25 +2,39 @@
 
 import { useEffect } from 'react';
 
+import { useSearchParams, useRouter } from 'next/navigation';
 import { PageContainer } from '@/components/common/PageContainer';
 import { SearchContent } from '@/components/Search/SearchContent';
 import { SearchHeader } from '@/components/Search/SearchHeader';
 import { SearchInput } from '@/components/Search/SearchInput';
-import { useSearchStore } from '@/store/useSearchStore';
 
 export default function SearchPage() {
-  const { setSearchFilter, setSearchKeyword } = useSearchStore();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const searchFilter = searchParams.get('filter') || '유저명';
+  const searchKeyword = searchParams.get('keyword') || '';
 
   useEffect(() => {
-    setSearchFilter('유저명');
-    setSearchKeyword('');
-  }, [setSearchFilter, setSearchKeyword]);
+    if (!searchParams.has('filter') || !searchParams.has('keyword')) {
+      const newParams = new URLSearchParams(searchParams);
+      newParams.set('filter', '유저명');
+      newParams.set('keyword', '');
+      router.push(`?${newParams.toString()}`);
+    }
+  }, [router, searchParams]);
 
   return (
     <PageContainer>
       <SearchHeader />
-      <SearchInput />
-      <SearchContent />
+      <SearchInput
+        currentFilter={searchFilter}
+        currentKeyword={searchKeyword}
+      />
+      <SearchContent
+        currentFilter={searchFilter}
+        currentKeyword={searchKeyword}
+      />
     </PageContainer>
   );
 }

src/components/Search/SearchContent/index.tsx

@@ -1,46 +1,51 @@
 'use client';
 
 import { useEffect } from 'react';
-
-import { useSearchStore } from '@/store/useSearchStore';
 import { useSearchQuery } from '@/hooks/apis/Search/useSearchQuery';
 
 import { SearchUserList } from './SearchUserList';
 import { SearchGoalList } from './SearchGoalList';
 
-export const SearchContent = () => {
-  const { searchFilter, searchKeyword } = useSearchStore();
+interface SearchContentProps {
+  currentFilter: string;
+  currentKeyword: string;
+}
+
+export const SearchContent = ({
+  currentFilter,
+  currentKeyword,
+}: SearchContentProps) => {
   const {
     data: searchData,
     refetch,
     isError,
     error,
   } = useSearchQuery({
-    searchField: searchFilter,
-    keyword: searchKeyword,
+    searchField: currentFilter,
+    keyword: currentKeyword,
   });
 
   useEffect(() => {
-    if (searchKeyword || searchFilter) {
+    if (currentFilter || currentKeyword) {
       refetch();
     }
-  }, [searchKeyword, searchFilter, refetch]);
+  }, [currentFilter, currentKeyword, refetch]);
 
   return (
-    <div>
-      {searchFilter === '유저명' ? (
+    <div className="overflow-y-auto">
+      {currentFilter === '유저명' ? (
         <SearchUserList
           isError={isError}
           error={error}
           searchData={searchData}
-          keyword={searchKeyword}
+          keyword={currentKeyword}
         />
       ) : (
         <SearchGoalList
           isError={isError}
           error={error}
           searchData={searchData}
-          keyword={searchKeyword}
+          keyword={currentKeyword}
         />
       )}
     </div>

src/components/Search/SearchInput/index.tsx

@@ -2,29 +2,40 @@
 
 import { ChangeEvent, KeyboardEvent, useState } from 'react';
 import { FaSearch } from 'react-icons/fa';
+import { useRouter } from 'next/navigation';
 import { Input } from '@/components/common/Input';
 import { PLACEHOLDERS } from '@/constants/Placeholders';
-import { useSearchStore } from '@/store/useSearchStore';
 import { SearchFilterDropdown } from './SearchFilterDropdown';
 
-export const SearchInput = () => {
-  const [localKeyword, setLocalKeyword] = useState('');
-  const [localFilter, setLocalFilter] = useState('유저명');
-  const { setSearchKeyword, setSearchFilter } = useSearchStore();
+interface SearchInputProps {
+  currentFilter: string;
+  currentKeyword: string;
+}
+
+export const SearchInput = ({
+  currentFilter,
+  currentKeyword,
+}: SearchInputProps) => {
+  const router = useRouter();
+
+  const [localKeyword, setLocalKeyword] = useState(currentKeyword);
+  const [localFilter, setLocalFilter] = useState(currentFilter);
 
   const handleKeyword = (e: ChangeEvent<HTMLInputElement>) => {
     setLocalKeyword(e.target.value);
   };
 
   const handleKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
-      handleClick();
+      updateSearchParams();
     }
   };
 
-  const handleClick = () => {
-    setSearchKeyword(localKeyword);
-    setSearchFilter(localFilter);
+  const updateSearchParams = () => {
+    const newParams = new URLSearchParams();
+    newParams.set('filter', localFilter);
+    newParams.set('keyword', localKeyword);
+    router.push(`?${newParams.toString()}`);
   };
 
   return (
@@ -44,7 +55,7 @@ export const SearchInput = () => {
       </div>
       <FaSearch
         className="size-18 cursor-pointer text-custom-gray-100"
-        onClick={handleClick}
+        onClick={updateSearchParams}
       />
     </div>
   );