feat: 레이아웃 구현

Author: jeonghwanJay

src/layouts/AuthLayout.tsx

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

src/layouts/Footer.tsx

@@ -0,0 +1,30 @@
+import EmailIcon from "../assets/logo/envelope.svg";
+import FacebookIcon from "../assets/logo/facebook.svg";
+import InstagramIcon from "../assets/logo/instagram.svg";
+
+function Footer() {
+  return (
+    <footer className="w-full bg-[var(--color-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-[var(--color-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" />
+          <img src={FacebookIcon} alt="facebook" className="w-5 h-5" />
+          <img src={InstagramIcon} alt="instagram" className="w-5 h-5" />
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;

src/layouts/Header.tsx

@@ -0,0 +1,67 @@
+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?: string; // "내 가게" or "내 프로필"
+  hasAlarm?: boolean;
+  onLogout?: () => void;
+  onToggleAlarm?: () => void;
+}
+
+function Header({
+  isLoggedIn,
+  userNavLabel,
+  hasAlarm,
+  onLogout,
+  onToggleAlarm,
+}: HeaderProps) {
+  const userPath = userNavLabel === "내 가게" ? "/shop" : "/profile";
+  const alarmIcon = hasAlarm ? ActiveAlarmIcon : InActiveAlarmIcon;
+
+  return (
+    <header className="w-full flex  justify-between items-center h-[4.375rem] bg-[var(--color-white)]] sm:py-0">
+      <div className="flex items-center gap-[3.125rem]">
+        <Link to="/">
+          <img src={Logo} alt="thejulge" />
+        </Link>
+        <div className="relative w-full sm:w-[28.125rem] order-1 sm:order-none bg-[var(--color-gray-10)] border border-transparent rounded-[0.625rem]">
+          <img
+            src={SearchIcon}
+            alt="SearchIcon"
+            className="absolute inset-y-2.5 left-3 flex items-center"
+          />
+          <input
+            type="text"
+            placeholder="가게 이름으로 찾아보세요"
+            className="pl-10 w-[28.125rem] h-[2.5rem] gap-[0.625rem] rounded-[0.625rem] p-[0.625rem] bg-[var(--color-gray-10)] placeholder:font-normal placeholder:text-[0.875rem] placeholder:leading-[1.375rem] placeholder:tracking-[0%] placeholder:align-middle placeholder:text-[var(--color-gray-40)]"
+          />
+        </div>
+      </div>
+
+      <div className="w-[13.1875rem] h-[1.5rem] flex items-center gap-[2.5rem] font-bold text-[1rem] leading-[1.25rem] tracking-[0%] text-right align-middle text-[var(--color-black)]]">
+        {isLoggedIn ? (
+          <>
+            <Link to={userPath}>{userNavLabel}</Link>
+            <button onClick={onLogout} className="cursor-pointer">
+              로그아웃
+            </button>
+            <button className="cursor-pointer" onClick={onToggleAlarm}>
+              <img src={alarmIcon} alt="AlertIcon" />
+            </button>
+          </>
+        ) : (
+          <>
+            <Link to="/signin">로그인</Link>
+            <Link to="/signup">회원가입</Link>
+          </>
+        )}
+      </div>
+    </header>
+  );
+}
+
+export default Header;

src/layouts/MainLayout.tsx

@@ -0,0 +1,41 @@
+import { Outlet } from "react-router-dom";
+
+import Footer from "./Footer";
+import Header from "./Header";
+interface MainLayoutProps {
+  isLoggedIn: boolean;
+  userNavLabel?: string; // "내 가게" or "내 프로필"
+  hasAlarm?: boolean;
+  onLogout?: () => void;
+  onToggleAlarm?: () => void;
+}
+
+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 sm:px-6 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>
+  );
+}
+
+export default MainLayout;

src/layouts/index.ts

@@ -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: [],
 };