[feat] 레이아웃 구현

src/layouts/AuthLayout.tsx

@@ -0,0 +1,11 @@
+import { Outlet } from "react-router-dom";
+
+export default function AuthLayout() {
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <div className="w-[21.875rem]">
+        <Outlet />
+      </div>
+    </div>
+  );
+}

src/layouts/Footer.tsx

@@ -0,0 +1,32 @@
+import EmailIcon from "../assets/logo/envelope.svg";
+import FacebookIcon from "../assets/logo/facebook.svg";
+import InstagramIcon from "../assets/logo/instagram.svg";
+
+export default function Footer() {
+  return (
+    <footer className="w-full bg-gray-10 py-6 px-4 gap-2">
+      <div className="max-w-screen-xl mx-auto flex flex-col sm:flex-row items-center justify-between text-gray-50 text-base">
+        <span>©codeit - 2023</span>
+
+        <div className="flex gap-6">
+          <a href="/privacy-policy" className="hover:underline">
+            Privacy Policy
+          </a>
+          <a href="/faq" className="hover:underline">
+            FAQ
+          </a>
+        </div>
+
+        <div className="flex gap-4">
+          <img src={EmailIcon} alt="email" className="w-5 h-5" />
+          <a href="https://www.facebook.com/">
+            <img src={FacebookIcon} alt="facebook" className="w-5 h-5" />
+          </a>
+          <a href="https://www.instagram.com/">
+            <img src={InstagramIcon} alt="instagram" className="w-5 h-5" />
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+}

src/layouts/Header.tsx

@@ -0,0 +1,106 @@
+import { Link } from "react-router-dom";
+
+import ActiveAlarmIcon from "../assets/icon/active.svg";
+import InActiveAlarmIcon from "../assets/icon/inactive.svg";
+import SearchIcon from "../assets/icon/search.svg";
+import Logo from "../assets/logo/thejulge.svg";
+interface HeaderProps {
+  isLoggedIn: boolean;
+  userNavLabel?: "내 가게" | "내 프로필";
+  hasAlarm?: boolean;
+  onLogout?: () => void;
+  onToggleAlarm?: () => void;
+}
+
+export default function Header({
+  isLoggedIn,
+  userNavLabel,
+  hasAlarm,
+  onLogout,
+  onToggleAlarm,
+}: HeaderProps) {
+  const userPath = userNavLabel === "내 가게" ? "/shop" : "/profile";
+  const alarmIcon = hasAlarm ? ActiveAlarmIcon : InActiveAlarmIcon;
+
+  return (
+    <header className="w-full px-4 py-2">
+      <div className="hidden md:flex max-w-screen-xl mx-auto w-full items-center justify-between">
+        <div className="flex items-center gap-[1.5rem]">
+          <Link to="/">
+            <img src={Logo} alt="thejulge" className="w-[7rem] h-[2.625rem]" />
+          </Link>
+          <div className="relative w-[28.125rem]">
+            <img
+              src={SearchIcon}
+              alt="SearchIcon"
+              className="absolute inset-y-2.5 left-3 flex items-center"
+            />
+            <input
+              type="text"
+              placeholder="가게 이름으로 찾아보세요"
+              className="pl-10 w-full h-[2.5rem] rounded-[0.625rem] p-[0.625rem] bg-gray-10 border border-transparent placeholder:text-gray-40 placeholder:text-sm"
+            />
+          </div>
+        </div>
+
+        <div className="flex items-center gap-8 text-sm font-bold">
+          {isLoggedIn ? (
+            <>
+              <Link to={userPath}>{userNavLabel}</Link>
+              <button onClick={onLogout} className="cursor-pointer">
+                로그아웃
+              </button>
+              <button className="cursor-pointer" onClick={onToggleAlarm}>
+                <img src={alarmIcon} alt="AlertIcon" className="h-4" />
+              </button>
+            </>
+          ) : (
+            <>
+              <Link to="/signin">로그인</Link>
+              <Link to="/signup">회원가입</Link>
+            </>
+          )}
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-2 md:hidden max-w-screen-xl mx-auto w-full">
+        <div className="flex items-center justify-between">
+          <Link to="/">
+            <img src={Logo} alt="thejulge" className="w-[7rem] h-[2.625rem]" />
+          </Link>
+          <div className="flex items-center gap-4 text-sm font-bold">
+            {isLoggedIn ? (
+              <>
+                <Link to={userPath}>{userNavLabel}</Link>
+                <button onClick={onLogout} className="cursor-pointer">
+                  로그아웃
+                </button>
+                <button className="cursor-pointer" onClick={onToggleAlarm}>
+                  <img src={alarmIcon} alt="AlertIcon" className="h-4" />
+                </button>
+              </>
+            ) : (
+              <>
+                <Link to="/signin">로그인</Link>
+                <Link to="/signup">회원가입</Link>
+              </>
+            )}
+          </div>
+        </div>
+
+        <div className="relative w-full">
+          <img
+            src={SearchIcon}
+            alt="SearchIcon"
+            className="absolute inset-y-2.5 left-3 flex items-center"
+          />
+          <input
+            type="text"
+            placeholder="가게 이름으로 찾아보세요"
+            className="pl-10 w-full h-[2.5rem] rounded-[0.625rem] p-[0.625rem] bg-gray-10 border border-transparent placeholder:text-gray-40 placeholder:text-sm"
+          />
+        </div>
+      </div>
+    </header>
+  );
+}

src/layouts/MainLayout.tsx

@@ -0,0 +1,39 @@
+import { Outlet } from "react-router-dom";
+
+import Footer from "./Footer";
+import Header from "./Header";
+interface MainLayoutProps {
+  isLoggedIn: boolean;
+  userNavLabel?: "내 가게" | "내 프로필";
+  hasAlarm?: boolean;
+  onLogout?: () => void;
+  onToggleAlarm?: () => void;
+}
+
+export default function MainLayout({
+  isLoggedIn,
+  userNavLabel,
+  hasAlarm,
+  onLogout,
+  onToggleAlarm,
+}: MainLayoutProps) {
+  return (
+    <div className="w-full min-h-screen flex flex-col">
+      <div className="w-full max-w-[90rem] mx-auto flex-1 px-4 tablet:px-10 pc:px-20">
+        <Header
+          isLoggedIn={isLoggedIn}
+          userNavLabel={userNavLabel}
+          hasAlarm={hasAlarm}
+          onLogout={onLogout}
+          onToggleAlarm={onToggleAlarm}
+        />
+
+        <main className="flex-1">
+          <Outlet />
+        </main>
+      </div>
+
+      <Footer />
+    </div>
+  );
+}

tailwind.config.js

@@ -5,7 +5,17 @@ export default {
     "./src/**/*.{js,ts,jsx,tsx}", // 모든 소스 코드 대상
   ],
   theme: {
-    extend: {},
+    extend: {
+      maxWidth: {
+        "screen-1440": "1440px",
+      },
+      screens: {
+        mobile: { max: "375px" },
+        tablet: "744px",
+        pc: "1440px",
+      },
+    },
   },
+
   plugins: [],
 };