All files / src/components/pages/group-list/group-search-bar index.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client';

import { useRouter, useSearchParams } from 'next/navigation';

import { SearchBar } from '@/components/shared';

export const GroupSearchBar = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const currentKeyword = searchParams.get('keyword') || '';

  const handleSearch = (keyword: string) => {
    const params = new URLSearchParams(searchParams.toString());
    if (keyword.trim()) {
      params.set('keyword', keyword.trim());
    } else {
      params.delete('keyword');
    }
    router.push(`/?${params.toString()}`);
  };

  return (
    <div className='sticky top-14 z-100 bg-white px-5 pb-3'>
      <SearchBar
        className='h-11'
        defaultValue={currentKeyword}
        placeholder='원하는 모임을 검색해보세요'
        onSearch={handleSearch}
      />
    </div>
  );
};