feat: setup font & add nav menu

.github/workflows/ci.yaml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18.16.1
+          node-version: 18.18.0
       - name: Install
         run: yarn install --immutable
       - name: Check Spells

src/app/styles/app.css

@@ -11,27 +11,91 @@
     src: url("https://fonts.googleapis.com/css2?family=PT+Sans+Caption:wght@400;700&display=swap");
   }
   @font-face {
-    font-family:
-      "Pretendard Variable",
-      Pretendard,
-      -apple-system,
-      BlinkMacSystemFont,
-      system-ui,
-      Roboto,
-      "Helvetica Neue",
-      "Segoe UI",
-      "Apple SD Gothic Neo",
-      "Noto Sans KR",
-      "Malgun Gothic",
-      "Apple Color Emoji",
-      "Segoe UI Emoji",
-      "Segoe UI Symbol",
-      sans-serif;
-    src: url(/fonts/Pretendard.woff2) format("woff2");
+    font-family: "Pretendard";
+    font-weight: 900;
+    font-display: swap;
+    src:
+      url(/fonts/Pretendard-Black.subset.woff2) format("woff2"),
+      url(/fonts/Pretendard-Black.subset.woff) format("woff");
   }
+
+  @font-face {
+    font-family: "Pretendard";
+    font-weight: 800;
+    font-display: swap;
+    src:
+      url(/fonts/Pretendard-ExtraBold.subset.woff2) format("woff2"),
+      url(/fonts/Pretendard-ExtraBold.subset.woff) format("woff");
+  }
+
+  @font-face {
+    font-family: "Pretendard";
+    font-weight: 700;
+    font-display: swap;
+    src:
+      url(/fonts/Pretendard-Bold.subset.woff2) format("woff2"),
+      url(/fonts/Pretendard-Bold.subset.woff) format("woff");
+  }
+
+  @font-face {
+    font-family: "Pretendard";
+    font-weight: 600;
+    font-display: swap;
+    src:
+      url(/fonts/Pretendard-SemiBold.woff2) format("woff2"),
+      url(/fonts/Pretendard-SemiBold.woff) format("woff");
+  }
+
+  @font-face {
+    font-family: "Pretendard";
+    font-weight: 500;
+    font-display: swap;
+    src:
+      url("/fonts/Pretendard-Medium.subset.woff2") format("woff2"),
+      url("/fonts/Pretendard-Medium.subset.woff") format("woff");
+  }
+
+  @font-face {
+    font-family: "Pretendard";
+    font-weight: 400;
+    font-display: swap;
+    src:
+      url("/fonts/Pretendard-Regular.woff2") format("woff2"),
+      url("/fonts/Pretendard-Regular.woff") format("woff");
+  }
+
+  @font-face {
+    font-family: "Pretendard";
+    font-weight: 300;
+    font-display: swap;
+    src:
+      url("/fonts/Pretendard-Light.subset.woff2") format("woff2"),
+      url("/fonts/Pretendard-Light.subset.woff") format("woff");
+  }
+
+  @font-face {
+    font-family: "Pretendard";
+    font-weight: 200;
+    font-display: swap;
+    src:
+      url("/fonts/Pretendard-ExtraLight.subset.woff2") format("woff2"),
+      url("/fonts/Pretendard-ExtraLight.subset.woff") format("woff");
+  }
+
+  @font-face {
+    font-family: "Pretendard";
+    font-weight: 100;
+    font-display: swap;
+    src:
+      url("/fonts/Pretendard-Thin.subset.woff2") format("woff2"),
+      url("/fonts/Pretendard-Thin.subset.woff") format("woff");
+  }
+
+  html {
+    font-family: "Pretendard";
+  }
+
   #root {
     overflow-x: hidden;
   }
 }
-@layer base {
-}

src/pages/root/ui/header.module.css

@@ -0,0 +1,15 @@
+.menu > div {
+  height: 2px;
+  transition: 0.3s ease-out;
+  z-index: 999;
+}
+
+.menu.open > div:nth-child(1) {
+  transform: translateY(5px) rotate(45deg);
+}
+.menu.open > div:nth-child(2) {
+  opacity: 0;
+}
+.menu.open > div:nth-child(3) {
+  transform: translateY(-5px) rotate(-45deg);
+}

src/pages/root/ui/header.tsx

@@ -1,38 +1,75 @@
 import { Logo } from "@/shared/ui/logo";
-import classnames from "classnames";
-import { PropsWithChildren } from "react";
+import cn from "classnames";
+import { PropsWithChildren, useEffect } from "react";
+import styles from "./header.module.css";
+import { useDisclosure } from "@/shared/hook/useDisclosure";
+import { NavMenu } from "./nav-menu";
+import { createPortal } from "react-dom";
+import { Breakpoint, useBreakpoint } from "@/shared/hook/useBreakpoint";
 
 export const Header = () => {
+  const { isOpen, toggle, close } = useDisclosure();
+  const breakpoint = useBreakpoint();
+
+  useEffect(() => {
+    document.body.style.overflow = isOpen ? "hidden" : "auto";
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (breakpoint !== Breakpoint.BASE) {
+      close();
+    }
+  }, [breakpoint, close]);
+
   return (
-    <header className="flex w-full flex-row items-center px-5 py-2 sm:py-3">
-      <Logo />
-      <h1 className="text-[24px] font-['PT_Sans_Caption'] font-bold text-primary-500 ml-[8px] leading-[31px]">
-        Joosum
-      </h1>
-      <button className="flex flex-col h-[24px] gap-[3px] w-[24px] mr-0 ml-auto items-center justify-center">
-        <span className="sr-only">버튼</span>
-        <div className="bg-gray-800 w-[18px] h-[2px]" />
-        <div className="bg-gray-800 w-[18px] h-[2px]" />
-        <div className="bg-gray-800 w-[18px] h-[2px]" />
-      </button>
-      <nav className="ml-auto hidden sm:flex">
-        <ul className="flex h-full items-center gap-4 text-[18px]">
-          <li>
-            <NavLink className="font-normal text-[#5D5C5D]">문의하기</NavLink>
-          </li>
-          <li>
-            <NavLink className="bg-primary-400 font-semibold text-white">
-              앱 다운로드
-            </NavLink>
-          </li>
-          <li>
-            <NavLink className="bg-primary-500 font-semibold text-white">
-              주섬 시작하기
-            </NavLink>
-          </li>
-        </ul>
-      </nav>
-    </header>
+    <div>
+      <header className="flex w-full flex-row items-center px-5 py-2 sm:py-3 fixed bg-white z-10">
+        <Logo />
+        <h1 className="text-[24px] font-['PT_Sans_Caption'] font-bold text-primary-500 ml-[8px] leading-[31px]">
+          Joosum
+        </h1>
+        <button
+          className={cn(
+            `${styles.menu} flex flex-col h-[24px] gap-[3px] w-[24px] mr-0 ml-auto items-center justify-center sm:hidden`,
+            isOpen && styles.open,
+          )}
+          onClick={toggle}
+        >
+          <div className="bg-gray-800 w-[18px] h-[2px]" />
+          <div className="bg-gray-800 w-[18px] h-[2px]" />
+          <div className="bg-gray-800 w-[18px] h-[2px]" />
+        </button>
+        <nav className="ml-auto hidden sm:flex">
+          <ul className="flex h-full items-center gap-4 text-[18px]">
+            <li>
+              <NavLink className="font-normal text-[#5D5C5D]">문의하기</NavLink>
+            </li>
+            <li>
+              <NavLink className="bg-primary-400 font-semibold text-white">
+                앱 다운로드
+              </NavLink>
+            </li>
+            <li>
+              <NavLink className="bg-primary-500 font-semibold text-white">
+                주섬 시작하기
+              </NavLink>
+            </li>
+          </ul>
+        </nav>
+      </header>
+      {createPortal(
+        <div
+          className={cn(
+            "fixed left-0 bg-white w-full h-[100vh] transition-all ease-in delay-150 sm:hidden top-[47px]",
+            isOpen ? "visible" : "invisible",
+            isOpen ? "opacity-100" : "opacity-0",
+          )}
+        >
+          <NavMenu />
+        </div>,
+        document.body,
+      )}
+    </div>
   );
 };
 
@@ -44,7 +81,7 @@ interface NavLinkProps extends PropsWithChildren {
 const NavLink = ({ className, children, href }: NavLinkProps) => {
   return (
     <a
-      className={classnames(
+      className={cn(
         "rounded-[8px] p-[12px]  leading-[18px] sm:p-2 sm:text-[16px]",
         className,
       )}

src/pages/root/ui/nav-menu.tsx

@@ -0,0 +1,15 @@
+export const NavMenu = () => {
+  return (
+    <ul className="text-center text-[28px] font-extrabold text-text-80">
+      <li>
+        <a className="my-[20px] inline-block px-[20px]">문의하기</a>
+      </li>
+      <li>
+        <a className="my-[20px] inline-block px-[20px]">주섬 시작하기</a>
+      </li>
+      <li>
+        <a className="my-[20px] inline-block px-[20px]">앱 시작하기</a>
+      </li>
+    </ul>
+  );
+};

src/pages/root/ui/page.tsx

@@ -12,10 +12,10 @@ export const Page = () => {
     <div className="flex flex-col">
       <Header />
       <Section color="primary-500" className="items-center sm:px-20">
-        <h1 className="text-white font-extrabold text-[24px] leading-[28px] text-center">
+        <h1 className="text-white font-extrabold text-[24px] leading-[28px] text-center sm:text-[36px] sm:leading-[42px]">
           <span>간편한 링크 아카이빙</span>
           <br />
-          <span className="text-[32px] leading-[38px]">
+          <span className="text-[32px] leading-[38px] sm:text-[48px] sm:leading-[57px]">
             지금 바로 경험하세요!
           </span>
         </h1>
@@ -28,7 +28,7 @@ export const Page = () => {
       </Section>
       <Section color="white" className="items-start">
         <Section.Title className="ml-6 sm:ml-20">
-          <Section.TitleSub>한 눈에 살펴보는</Section.TitleSub>
+          <Section.TitleSub>한 눈에 살펴보는 </Section.TitleSub>
           <br className="sm:hidden" />
           <Section.TitleMain className="sm:text-[32px]">
             주섬 사용법

src/pages/root/ui/section.tsx

@@ -12,7 +12,7 @@ export const Section = ({
   return (
     <section
       className={classnames(
-        "flex flex-col py-[60px]",
+        "flex flex-col py-[60px] sm:py-[100px]",
         color === "primary-500" && "bg-primary-500 text-white",
         color === "primary-100" && "bg-primary-100",
         color === "white" && "bg-white",
@@ -67,7 +67,7 @@ Section.TitleMain = ({
   return (
     <span
       className={classnames(
-        "text-[28px] leading-[33px] text-primary-500 sm:text-[48px] sm:leading-[57px]",
+        "text-[28px] leading-[33px] text-primary-500 sm:text-[36px] sm:leading-[57px]",
         className,
       )}
     >

src/pages/root/ui/usage-swiper.tsx

@@ -128,7 +128,7 @@ const UsageItem = ({
     <li
       className={classnames(
         active ? "bg-primary-500 text-white" : "bg-gray-200 text-gray-700",
-        "mb-3 mr-3 inline-block rounded-[50px] px-3 py-2 font-semibold leading-[19px] sm:px-4 sm:py-3 sm:leading-[24px]",
+        "mb-3 mr-3 inline-block rounded-[50px] px-3 py-2 font-semibold leading-[19px] sm:px-5 sm:py-3 sm:leading-[24px] sm:mr-6 sm:mb-6",
       )}
     >
       <button

src/shared/hook/useBreakpoint.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+
+export enum Breakpoint {
+  BASE = "BASE",
+  SM = "SM",
+}
+
+const BREAKPOINTS = [0, 822];
+
+export const useBreakpoint = (): Breakpoint => {
+  const [width, setWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const onResize = () => setWidth(window.innerWidth);
+
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
+  let breakpoint = Breakpoint.BASE;
+
+  if (width >= BREAKPOINTS[1]) {
+    breakpoint = Breakpoint.SM;
+  }
+  return breakpoint;
+};

src/shared/hook/useDisclosure.ts

@@ -0,0 +1,18 @@
+import { useCallback, useMemo, useState } from "react";
+
+export const useDisclosure = () => {
+  const [isOpen, setOpen] = useState(false);
+
+  const toggle = useCallback(() => setOpen((prev) => !prev), [setOpen]);
+  const close = useCallback(() => setOpen(false), []);
+  const value = useMemo(
+    () => ({
+      isOpen,
+      toggle,
+      close,
+    }),
+    [isOpen, toggle, close],
+  );
+
+  return value;
+};

tailwind.config.js

@@ -22,9 +22,6 @@ export default {
         },
       },
     },
-    fontFamily: {
-      body: ["PretendardRegular"],
-    },
     screens: {
       sm: "822px",
     },