diff --git a/src/layouts/AuthLayout.tsx b/src/layouts/AuthLayout.tsx new file mode 100644 index 0000000..4769b3f --- /dev/null +++ b/src/layouts/AuthLayout.tsx @@ -0,0 +1,11 @@ +import { Outlet } from "react-router-dom"; + +export default function AuthLayout() { + return ( +
+
+ +
+
+ ); +} diff --git a/src/layouts/Footer.tsx b/src/layouts/Footer.tsx new file mode 100644 index 0000000..45f7d06 --- /dev/null +++ b/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 ( + + ); +} diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx new file mode 100644 index 0000000..dbf95d5 --- /dev/null +++ b/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 ( +
+
+
+ + thejulge + +
+ SearchIcon + +
+
+ +
+ {isLoggedIn ? ( + <> + {userNavLabel} + + + + ) : ( + <> + 로그인 + 회원가입 + + )} +
+
+ +
+
+ + thejulge + +
+ {isLoggedIn ? ( + <> + {userNavLabel} + + + + ) : ( + <> + 로그인 + 회원가입 + + )} +
+
+ +
+ SearchIcon + +
+
+
+ ); +} diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx new file mode 100644 index 0000000..5467e7b --- /dev/null +++ b/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 ( +
+
+
+ +
+ +
+
+ +
+ ); +} diff --git a/src/layouts/index.ts b/src/layouts/index.ts deleted file mode 100644 index e69de29..0000000 diff --git a/tailwind.config.js b/tailwind.config.js index 3e1f18a..0ed7391 100644 --- a/tailwind.config.js +++ b/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: [], };