Merge pull request #2 from prgrms-web-devcourse-final-project/design/…

…1-header

[design] 헤더 컴포넌트 / 레이아웃 잡기

src/App.tsx

@@ -1,11 +1,16 @@
+import LandingLayout from "@/layouts/LandingLayout";
 import Home from "@/pages/home/Home";
+import Landing from "@/pages/landing/Landing";
 import { Route, Routes } from "react-router";
 
 function App() {
   return (
     <>
       <Routes>
-        <Route index element={<Home />} />
+        {/* <Route index element={<Home />} /> */}
+        <Route path="/" element={<LandingLayout />}>
+          <Route index element={<Landing />} />
+        </Route>
       </Routes>
     </>
   );

src/layouts/Header.tsx

@@ -0,0 +1,38 @@
+import logo from "@assets/icons/logo.png";
+import notificationIcon from "@assets/icons/notification.svg";
+import ellipsisButton from "@/assets/icons/ellipsisButton.svg";
+import { Link } from "react-router";
+
+interface HeaderProps {
+  showNotification?: boolean; // 알림 아이콘을 표시할지 여부
+  showMoreOptions?: boolean; // 더보기 메뉴를 표시할지 여부
+}
+
+function Header({ showNotification, showMoreOptions }: HeaderProps) {
+  console.log(showNotification);
+  return (
+    <header className="h-[44px] bg-[#FBF5FF]/90 backdrop-blur-sm px-3 flex items-center justify-between">
+      <Link to="/">
+        <img src={logo} alt="logo" />
+      </Link>
+
+      {/* 알림 아이콘, 더보기 메뉴 아이콘 표시 */}
+      <div className="flex gap-1">
+        {/* 알림 */}
+        {showNotification && (
+          <div className="px-2 py-3 flex justify-center items-center">
+            <img src={notificationIcon} alt="알림" />
+          </div>
+        )}
+        {/* 더보기 메뉴 */}
+        {showMoreOptions && (
+          <div className="px-2 py-3 flex justify-center items-center">
+            <img src={ellipsisButton} alt="더보기" />
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}
+
+export default Header;

src/layouts/LandingLayout.tsx

@@ -0,0 +1,15 @@
+import Header from "@/layouts/Header";
+import { Outlet } from "react-router";
+
+function LandingLayout() {
+  return (
+    <div className="max-w-[700px] w-full h-screen mx-auto flex flex-col border border-red-500">
+      <Header showNotification showMoreOptions />
+      <div className="flex-1 border border-blue-500">
+        <Outlet />
+      </div>
+    </div>
+  );
+}
+
+export default LandingLayout;

src/pages/home/Home.tsx

@@ -1,4 +1,3 @@
-
 import { twMerge } from "tailwind-merge";
 
 function Home() {

src/pages/landing/Landing.tsx

@@ -0,0 +1,5 @@
+function Landing() {
+  return <div>렌딩페이지</div>;
+}
+
+export default Landing;