[Feat] 모임 목록 페이지 모임 검색 기능 추가

src/app/page.tsx

@@ -7,8 +7,18 @@ import { GetGroupsResponse } from '@/types/service/group';
 
 export const dynamic = 'force-dynamic';
 
-export default async function HomePage() {
-  const response = await API.groupService.getGroups({ size: GROUP_LIST_PAGE_SIZE });
+interface HomePageProps {
+  searchParams: Promise<{ keyword?: string }>;
+}
+
+export default async function HomePage({ searchParams }: HomePageProps) {
+  const params = await searchParams;
+  const keyword = params.keyword;
+
+  const response = await API.groupService.getGroups({
+    size: GROUP_LIST_PAGE_SIZE,
+    keyword,
+  });
 
   // React Query의 useInfiniteQuery에 맞는 initialData 형태로 변환
   const initialData: InfiniteData<GetGroupsResponse, number | undefined> = {
@@ -17,5 +27,5 @@ export default async function HomePage() {
   };
 
   // 초기 데이터를 전달해서 무한 스크롤 시작
-  return <GroupList initialData={initialData} />;
+  return <GroupList initialData={initialData} initialKeyword={keyword} />;
 }

src/components/layout/header/index.tsx

@@ -1,18 +1,30 @@
+'use client';
+
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 
 import { Icon } from '@/components/icon';
 
-export const Header = () => {
+type HeaderProps = {
+  heightClass?: string;
+  searchBar?: React.ReactNode;
+};
+
+export const Header = ({ heightClass = 'h-14', searchBar }: HeaderProps) => {
+  const pathname = usePathname();
+  const isRootPage = pathname === '/';
+
   return (
-    <header className='sticky top-0 z-100 h-14 w-full bg-white px-4 py-2'>
-      <nav className='flex-between'>
+    <header className={`sticky top-0 z-100 ${heightClass} w-full bg-white`}>
+      <nav className='flex-between px-4 py-2'>
         <Link href={'/'}>
           <Icon id='wego-logo' width={92} height={40} />
         </Link>
         <Link href={'/notification'} className='flex-center h-10 w-10'>
           <Icon id='bell-read' className='size-10 text-gray-700' />
         </Link>
       </nav>
+      {isRootPage && searchBar && <div className='px-4 pb-2'>{searchBar}</div>}
     </header>
   );
 };

src/components/layout/layout-wrapper/index.tsx

@@ -1,15 +1,36 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+
+import { useMemo } from 'react';
+
 import { GNB } from '@/components/layout/gnb';
 import { Header } from '@/components/layout/header';
+import { GroupSearch } from '@/components/pages/group-search';
 
 interface Props {
   children: React.ReactNode;
 }
 
 export const LayoutWrapper = ({ children }: Props) => {
+  const pathname = usePathname();
+  const { headerHeightClass, headerHeightPx, isRoot } = useMemo(() => {
+    const isRootPage = pathname === '/';
+    return {
+      headerHeightClass: isRootPage ? 'h-28' : 'h-14', // 루트: 112px, 그 외: 56px
+      headerHeightPx: isRootPage ? 112 : 56,
+      isRoot: isRootPage,
+    };
+  }, [pathname]);
+
+  const mainMinHeight = `calc(100vh - ${headerHeightPx + 56}px)`;
+
   return (
     <div className='relative mx-auto max-w-110 bg-gray-100'>
-      <Header />
-      <main className='min-h-[calc(100vh-112px)]'>{children}</main>
+      <Header heightClass={headerHeightClass} searchBar={isRoot ? <GroupSearch /> : undefined} />
+      <main className='min-h-[calc(100vh-112px)]' style={{ minHeight: mainMinHeight }}>
+        {children}
+      </main>
       <GNB />
     </div>
   );

src/components/pages/group-list/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 
 import { InfiniteData } from '@tanstack/react-query';
 
@@ -19,10 +19,14 @@ interface GroupListProps {
 
 export default function GroupList({ initialData, initialKeyword }: GroupListProps) {
   const router = useRouter();
+  const searchParams = useSearchParams();
+  const keywordFromUrl = searchParams.get('keyword') || undefined;
+  const keyword = initialKeyword ?? keywordFromUrl;
+
   const { items, error, fetchNextPage, hasNextPage, isFetchingNextPage, completedMessage } =
     useInfiniteGroupList({
       initialData,
-      initialKeyword,
+      initialKeyword: keyword,
     });
 
   // IntersectionObserver를 통한 무한 스크롤 감지

src/components/pages/group-search/index.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+
+import { SearchBar } from '@/components/shared';
+
+export const GroupSearch = () => {
+  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 (
+    <SearchBar
+      className='h-11'
+      defaultValue={currentKeyword}
+      placeholder='원하는 모임을 검색해보세요'
+      onSearch={handleSearch}
+    />
+  );
+};

src/components/shared/search-bar/index.tsx

@@ -59,7 +59,7 @@ export const SearchBar = ({
       )}
       iconButton={
         <button
-          className='absolute top-4 right-5 h-6 w-6'
+          className='absolute top-1/2 right-5 h-6 w-6 -translate-y-1/2'
           aria-label='검색 실행'
           type='button'
           onClick={handleSearch}