Feat/45 메인페이지 상단 배너, 검색 UI 구현 및 아이콘 페이지 루트 이동

public/assets/svg/bed.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const IconBed = ({ size = 24, color = '#112211', ...props })  => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    fill={color}
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill={color}
+      d="M20.25 10.814a3.7 3.7 0 0 0-1.5-.314H5.25a3.754 3.754 0 0 0-3.75 3.75v5.25a.75.75 0 1 0 1.5 0v-.375a.38.38 0 0 1 .375-.375h17.25a.38.38 0 0 1 .375.375v.375a.75.75 0 1 0 1.5 0v-5.25a3.75 3.75 0 0 0-2.25-3.436M17.625 3.75H6.375A2.625 2.625 0 0 0 3.75 6.375V9.75a.187.187 0 0 0 .24.18c.409-.12.833-.18 1.26-.18h.198a.19.19 0 0 0 .188-.166A1.5 1.5 0 0 1 7.125 8.25H9.75a1.5 1.5 0 0 1 1.49 1.334.19.19 0 0 0 .188.166h1.147a.187.187 0 0 0 .187-.166A1.5 1.5 0 0 1 14.25 8.25h2.625a1.5 1.5 0 0 1 1.49 1.334.19.19 0 0 0 .188.166h.197c.427 0 .851.06 1.26.18a.188.188 0 0 0 .24-.18V6.375a2.625 2.625 0 0 0-2.625-2.625"
+    ></path>
+  </svg>
+);
+
+export default IconBed;

src/app/(with-header)/components/BannerSection.tsx

@@ -0,0 +1,34 @@
+import Image from 'next/image';
+import SearchBar from './SearchBar';
+
+export default function BannerSection() {
+  return (
+    <section className='relative w-full h-240 md:h-550 mb-93'>
+      {/* 배경 이미지 */}
+      <Image
+        src='/test/image1.png'
+        alt='스트릿 댄스'
+        fill
+        className='object-cover'
+        priority
+      />
+
+      {/* 어두운 오버레이 */}
+      <div className='absolute inset-0 bg-gradient-to-r from-black to-transparent' />
+
+      {/* 텍스트 콘텐츠 */}
+      <div className='relative z-10 flex flex-col items-start w-220 max-w-1152 md:w-440 lg:w-full pl-24 pt-74 md:pl-32 lg:pl-0 md:pt-144 lg:pt-159 lg:ml-auto lg:mr-auto gap-8 lg:gap-20 h-full text-white font-bold break-keep'>
+        <h2 className='text-2xl md:text-[54px] md:leading-[64px] lg:text-[68px] lg:leading-[78px]'>
+          함께 배우면 즐거운<br />
+          스트릿 댄스
+        </h2>
+        <p className='text-md md:text-xl lg:text-2xl'>
+          1월의 인기 경험 BEST 🔥
+        </p>
+      </div>
+      <div className='absolute -bottom-100 left-0 right-0'>
+        <SearchBar />
+      </div>
+    </section>
+  );
+}

src/app/(with-header)/components/SearchBar.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { useState, FormEvent } from 'react';
+import Input from '@components/Input';
+import Button from '@components/Button';
+
+export default function SearchBar() {
+  const [searchValue, setSearchValue] = useState('');
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    console.log('검색어:', searchValue); // 검색 로직은 추후 API 연동
+  };
+
+  return (
+    <section className='flex lg:w-full lg:max-w-1152 lg:ml-auto lg:mr-auto justify-center px-16 lg:px-0'>
+      <div className='flex flex-col w-full gap-15 md:gap-32 px-24 py-16 md:px-24 md:py-32 rounded-[16px] bg-white shadow-md'>
+        <div className='flex items-start gap-2 mb-4'>
+          <h3 className='text-lg md:text-xl font-bold text-left'>
+            무엇을 체험하고 싶으신가요?
+          </h3>
+        </div>
+        <div className='text-center mb-6'>
+          <form
+            onSubmit={handleSubmit}
+            className='flex flex-row gap-12 h-56'
+          >
+            <div className='relative flex-1'>
+              <Input
+                type='text'
+                value={searchValue}
+                onChange={(e) => setSearchValue(e.target.value)}
+                placeholder='내가 원하는 체험은'
+              />
+            </div>
+            <Button
+              type='submit'
+              variant='primary'
+              className='w-96 h-56 rounded-[4px] md:w-136 md:h-56'
+            >
+              검색하기
+            </Button>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+}

src/app/(with-header)/layout.tsx

@@ -1,16 +1,15 @@
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
 
-export default function Layout({ children }: { children: React.ReactNode }) {
+export default function WithHeaderLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <>
-      {/* 공통 헤더 */}
       <Header />
-
-      {/* 메인 콘텐츠 */}
-      <main className='min-h-screen pt-70'>{children}</main>
-
-      {/* 공통 푸터 */}
+      <main className='pt-70'>{children}</main>
       <Footer />
     </>
   );

src/app/(with-header)/page.tsx

@@ -0,0 +1,9 @@
+import BannerSection from '@/app/(with-header)/components/BannerSection';
+
+export default function HomePage() {
+  return (
+    <main>
+      <BannerSection />
+    </main>
+  );
+}

src/app/page.tsx → src/app/icons/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import BedIcon from '@assets/svg/bed';
 import BellIcon from '@assets/svg/bell';
 import CheckIcon from '@assets/svg/check';
 import ChevronIcon from '@assets/svg/chevron';
@@ -18,6 +19,7 @@ import IconYoutube from '@assets/svg/youtube';
 
 export default function Home() {
   const icons = [
+    { name: 'BedIcon', component: <BedIcon size={32} /> },
     { name: 'BellIcon', component: <BellIcon size={32} /> },
     { name: 'CheckIcon', component: <CheckIcon size={32} /> },
     {

src/app/layout.tsx

@@ -1,6 +1,11 @@
 import './globals.css';
 import QueryProvider from '@/lib/queryProvider';
 
+export const metadata = {
+  title: 'GlobalNomad',
+  description: '글로벌 노마드 체험 플랫폼',
+};
+
 export default function RootLayout({
   children,
 }: {
@@ -12,7 +17,6 @@ export default function RootLayout({
         <QueryProvider>
           <main>{children}</main>
         </QueryProvider>
-
         <div id='modal-root' />
       </body>
     </html>