[Refactor] header, GNB 리펙토링

src/app/page.tsx

@@ -2,6 +2,7 @@ import { InfiniteData } from '@tanstack/react-query';
 
 import { API } from '@/api';
 import GroupList from '@/components/pages/group-list';
+import { GroupSearchBar } from '@/components/pages/group-list/group-search-bar';
 import { GROUP_LIST_PAGE_SIZE } from '@/lib/constants/group-list';
 import { GetGroupsResponse } from '@/types/service/group';
 
@@ -27,5 +28,10 @@ export default async function HomePage({ searchParams }: HomePageProps) {
   };
 
   // 초기 데이터를 전달해서 무한 스크롤 시작
-  return <GroupList initialData={initialData} initialKeyword={keyword} />;
+  return (
+    <>
+      <GroupSearchBar />
+      <GroupList initialData={initialData} initialKeyword={keyword} />;
+    </>
+  );
 }

src/components/layout/gnb/index.tsx

@@ -1,15 +1,20 @@
+'use client';
+
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 
 import { Icon } from '@/components/icon';
 
 export const GNB = () => {
+  const pathname = usePathname();
+
   return (
     <nav className='sticky bottom-0 z-100 h-14 border-t-1 border-gray-200 bg-white py-2'>
       <ul className='flex w-full justify-evenly gap-4'>
         {NAV_MENU.map(({ path, svgId }) => (
           <li key={path}>
             <Link href={path} className='flex-center h-10 w-10'>
-              <Icon id={svgId} className='text-gray-600' />
+              <Icon id={svgId} className={pathname === path ? 'text-mint-500' : 'text-gray-500'} />
             </Link>
           </li>
         ))}

src/components/layout/header/index.tsx

@@ -1,21 +1,10 @@
-'use client';
-
 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
 
 import { Icon } from '@/components/icon';
 
-type HeaderProps = {
-  heightClass?: string;
-  searchBar?: React.ReactNode;
-};
-
-export const Header = ({ heightClass = 'h-14', searchBar }: HeaderProps) => {
-  const pathname = usePathname();
-  const isRootPage = pathname === '/';
-
+export const Header = () => {
   return (
-    <header className={`sticky top-0 z-100 ${heightClass} w-full bg-white`}>
+    <header className={`sticky top-0 z-100 w-full bg-white`}>
       <nav className='flex-between px-4 py-2'>
         <Link href={'/'}>
           <Icon id='wego-logo' width={92} height={40} />
@@ -24,7 +13,6 @@ export const Header = ({ heightClass = 'h-14', searchBar }: HeaderProps) => {
           <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,36 +1,15 @@
-'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 heightClass={headerHeightClass} searchBar={isRoot ? <GroupSearch /> : undefined} />
-      <main className='min-h-[calc(100vh-112px)]' style={{ minHeight: mainMinHeight }}>
-        {children}
-      </main>
+    <div className='relative mx-auto max-w-110 min-w-70 bg-gray-100'>
+      <Header />
+      <main className='min-h-[calc(100vh-112px)]'>{children}</main>
       <GNB />
     </div>
   );

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

@@ -4,7 +4,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
 
 import { SearchBar } from '@/components/shared';
 
-export const GroupSearch = () => {
+export const GroupSearchBar = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
   const currentKeyword = searchParams.get('keyword') || '';
@@ -20,11 +20,13 @@ export const GroupSearch = () => {
   };
 
   return (
-    <SearchBar
-      className='h-11'
-      defaultValue={currentKeyword}
-      placeholder='원하는 모임을 검색해보세요'
-      onSearch={handleSearch}
-    />
+    <div className='sticky top-14 z-100 bg-white px-5 pb-3'>
+      <SearchBar
+        className='h-11'
+        defaultValue={currentKeyword}
+        placeholder='원하는 모임을 검색해보세요'
+        onSearch={handleSearch}
+      />
+    </div>
   );
 };