Eatsfine · jjjsun · Jan 20, 2026 · Jan 20, 2026 · Jan 20, 2026 · Jan 20, 2026
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/public/잇츠파인로고.webp" />
+    <link rel="icon" type="image/svg+xml" href="/eatsfineLogo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Eatsfine</title>
     <meta
@@ -13,7 +13,7 @@
       property="og:description"
       content="자리 자체를 예약하는 새로운 식문화 플랫폼 웹 애플리케이션 서비스"
     />
-    <meta property="og:image" content="/public/잇츠파인로고.webp" />
+    <meta property="og:image" content="/eatsfineLogo.png" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/EatsfineLogo.png b/public/EatsfineLogo.png
diff --git a/public/잇츠파인로고.webp b/public/잇츠파인로고.webp
diff --git a/src/App.tsx b/src/App.tsx
@@ -9,25 +9,32 @@ import NotFound from "./pages/NotFound";
 import Intro from "./pages/Intro";
 import SearchPage from "./pages/SearchPage";
 import CustomerSupportPage from "./pages/CustomerSupportPage";
+import PublicLayout from "./layouts/PublicLayout";
 
 export const queryClient = new QueryClient();
 
 const routes: RouteObject[] = [
   {
-    path: "/",
-    element: <Intro />,
+    element: (
+      <PublicLayout
+        title="잇츠파인"
+        subtitle="원하는 자리를 직접 선택하는 스마트 식당 예약"
+      />
+    ),
     errorElement: <NotFound />,
+    children: [{ path: "/search", element: <SearchPage /> }],
   },
   {
-    path: "/search",
-    element: <SearchPage />,
+    path: "/",
+    element: <Intro />,
     errorElement: <NotFound />,
   },
+
   {
     path: "/customer-support",
     element: <CustomerSupportPage />,
     errorElement: <NotFound />,
-  }
+  },
 ];
 
 const router = createBrowserRouter(routes);

diff --git a/src/layouts/PublicLayout.tsx b/src/layouts/PublicLayout.tsx
@@ -0,0 +1,36 @@
+import { Link, Outlet } from "react-router-dom";
+
+type PublicLayoutProps = {
+  title?: string;
+  subtitle?: string;
+};
+
+export default function PublicLayout({
+  title = "잇츠파인",
+  subtitle,
+}: PublicLayoutProps) {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <header className="bg-white shadow-sm border-b sticky p-1 top-0 z-40">
+        <div className="max-w-7xl mx-auto px-4 py-4 flex items-center gap-3">
+          <Link to="/">
+            <img
+              src="/eatsfineLogo.png"
+              alt="잇츠파인 로고"
+              className="h-14 w-14 rounded hover:scale-110 transition"
+            />
+          </Link>
+          <div className="p-1">
+            <h1 className="text-blue-600 text-xl font-semibold">{title}</h1>
+            {subtitle ? (
+              <p className="text-gray-600 text-sm">{subtitle}</p>
+            ) : null}
+          </div>
+        </div>
+      </header>
+      <main className="max-w-7xl mx-auto px-4 py-8">
+        <Outlet />
+      </main>
+    </div>
+  );
+}
diff --git a/src/pages/SearchPage.tsx b/src/pages/SearchPage.tsx
@@ -64,6 +64,7 @@ export default function SearchPage() {
     setConfirmOpen(false);
     setSelected(null);
     setCompleteOpen(false);
+    setPaymentOpen(false);
   };
 
   const results = useMemo(() => {
@@ -83,64 +84,53 @@ export default function SearchPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <header className="bg-white shadow-sm border-b sticky top-0 z-40">
-        <div className="max-w-7xl mx-auto px-4 py-4">
-          <h1 className="text-blue-600">잇츠파인</h1>
-          <p className="text-gray-600">
-            원하는 자리를 직접 선택하는 스마트 식당 예약
-          </p>
+    <>
+      {/* 검색창 */}
+      <div className="w-full max-w-2xl mx-auto mb-6">
+        <div className="relative">
+          <input
+            type="text"
+            placeholder="식당 이름, 지역, 음식 종류로 검색해보세요"
+            className="w-full px-5 py-4 pr-14 border-2 border-gray-300 rounded-xl focus:border-blue-500 focus:outline-none"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+          />
+          <button
+            type="button"
+            className="absolute right-3 top-1/2 -translate-y-1/2 p-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors cursor-pointer"
+            aria-label="검색"
+            onClick={() => {}} //버튼은 지금 UI용으로
+          >
+            <Search className="size-5" />
+          </button>
         </div>
-      </header>
-
-      <main className="max-w-7xl mx-auto px-4 py-8">
-        {/* 검색창 */}
-        <div className="w-full max-w-2xl mx-auto mb-6">
-          <div className="relative">
-            <input
-              type="text"
-              placeholder="식당 이름, 지역, 음식 종류로 검색해보세요"
-              className="w-full px-5 py-4 pr-14 border-2 border-gray-300 rounded-xl focus:border-blue-500 focus:outline-none"
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-            />
-            <button
-              type="button"
-              className="absolute right-3 top-1/2 -translate-y-1/2 p-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors cursor-pointer"
-              aria-label="검색"
-              onClick={() => {}} //버튼은 지금 UI용으로
-            >
-              <Search className="size-5" />
-            </button>
-          </div>
-        </div>
-
-        {/* 지도는 API연동을 위해 지금 비워둠 */}
-        <div className="relative w-full h-125 bg-gray-100 rounded-xl overflow-hidden">
-          <div className="absolute inset-0 bg-linear-to-br from-gray-200 to-gray-300">
-            <div className="absolute inset-0 flex items-center justify-center text-gray-400">
-              <div className="text-center">
-                <p>카카오맵 API 연동 영역</p>
-              </div>
+      </div>
+
+      {/* 지도는 API연동을 위해 지금 비워둠 */}
+      <div className="relative w-full h-125 bg-gray-100 rounded-xl overflow-hidden">
+        <div className="absolute inset-0 bg-linear-to-br from-gray-200 to-gray-300">
+          <div className="absolute inset-0 flex items-center justify-center text-gray-400">
+            <div className="text-center">
+              <p>카카오맵 API 연동 영역</p>
             </div>
           </div>
-          <div className="absolute inset-0 z-10">
-            {results.map((r) => (
-              <RestaurantMarker
-                key={r.id}
-                restaurant={r}
-                onSelect={handleSelect}
-              />
-            ))}
-          </div>
         </div>
-
-        <div className="mt-6 w-full max-w-2xl mx-auto">
-          {query.trim() ? (
-            <RestaurantList restaurants={results} onSelect={handleSelect} />
-          ) : null}
+        <div className="absolute inset-0 z-10">
+          {results.map((r) => (
+            <RestaurantMarker
+              key={r.id}
+              restaurant={r}
+              onSelect={handleSelect}
+            />
+          ))}
         </div>
-      </main>
+      </div>
+
+      <div className="mt-6 w-full max-w-2xl mx-auto">
+        {query.trim() ? (
+          <RestaurantList restaurants={results} onSelect={handleSelect} />
+        ) : null}
+      </div>
       {/* 상세 페이지 모달 */}
       {selected && (
         <RestaurantDetailModal
@@ -203,6 +193,6 @@ export default function SearchPage() {
           autoCloseMs={5000}
         />
       )}
-    </div>
+    </>
   );
 }