diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml index c2b541e..c1f2728 100644 --- a/.github/workflows/ci.yaml +++ b/.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 diff --git a/public/fonts/Pretendard-Black.subset.woff b/public/fonts/Pretendard-Black.subset.woff new file mode 100644 index 0000000..f20e5a9 Binary files /dev/null and b/public/fonts/Pretendard-Black.subset.woff differ diff --git a/public/fonts/Pretendard-Black.subset.woff2 b/public/fonts/Pretendard-Black.subset.woff2 new file mode 100644 index 0000000..5f98353 Binary files /dev/null and b/public/fonts/Pretendard-Black.subset.woff2 differ diff --git a/public/fonts/Pretendard-Black.woff2 b/public/fonts/Pretendard-Black.woff2 new file mode 100644 index 0000000..eafe683 Binary files /dev/null and b/public/fonts/Pretendard-Black.woff2 differ diff --git a/public/fonts/Pretendard-Bold.subset.woff b/public/fonts/Pretendard-Bold.subset.woff new file mode 100644 index 0000000..06ba102 Binary files /dev/null and b/public/fonts/Pretendard-Bold.subset.woff differ diff --git a/public/fonts/Pretendard-Bold.subset.woff2 b/public/fonts/Pretendard-Bold.subset.woff2 new file mode 100644 index 0000000..f80bdb7 Binary files /dev/null and b/public/fonts/Pretendard-Bold.subset.woff2 differ diff --git a/public/fonts/Pretendard-Bold.woff2 b/public/fonts/Pretendard-Bold.woff2 new file mode 100644 index 0000000..4d40a1a Binary files /dev/null and b/public/fonts/Pretendard-Bold.woff2 differ diff --git a/public/fonts/Pretendard-ExtraBold.subset.woff b/public/fonts/Pretendard-ExtraBold.subset.woff new file mode 100644 index 0000000..ec3b1c8 Binary files /dev/null and b/public/fonts/Pretendard-ExtraBold.subset.woff differ diff --git a/public/fonts/Pretendard-ExtraBold.subset.woff2 b/public/fonts/Pretendard-ExtraBold.subset.woff2 new file mode 100644 index 0000000..b67ca48 Binary files /dev/null and b/public/fonts/Pretendard-ExtraBold.subset.woff2 differ diff --git a/public/fonts/Pretendard-ExtraBold.woff2 b/public/fonts/Pretendard-ExtraBold.woff2 new file mode 100644 index 0000000..dcd57e7 Binary files /dev/null and b/public/fonts/Pretendard-ExtraBold.woff2 differ diff --git a/public/fonts/Pretendard-ExtraLight.subset.woff b/public/fonts/Pretendard-ExtraLight.subset.woff new file mode 100644 index 0000000..b33dec3 Binary files /dev/null and b/public/fonts/Pretendard-ExtraLight.subset.woff differ diff --git a/public/fonts/Pretendard-ExtraLight.subset.woff2 b/public/fonts/Pretendard-ExtraLight.subset.woff2 new file mode 100644 index 0000000..d9f065f Binary files /dev/null and b/public/fonts/Pretendard-ExtraLight.subset.woff2 differ diff --git a/public/fonts/Pretendard-ExtraLight.woff2 b/public/fonts/Pretendard-ExtraLight.woff2 new file mode 100644 index 0000000..e510402 Binary files /dev/null and b/public/fonts/Pretendard-ExtraLight.woff2 differ diff --git a/public/fonts/Pretendard-Light.subset.woff b/public/fonts/Pretendard-Light.subset.woff new file mode 100644 index 0000000..8a48667 Binary files /dev/null and b/public/fonts/Pretendard-Light.subset.woff differ diff --git a/public/fonts/Pretendard-Light.subset.woff2 b/public/fonts/Pretendard-Light.subset.woff2 new file mode 100644 index 0000000..5d4fa6c Binary files /dev/null and b/public/fonts/Pretendard-Light.subset.woff2 differ diff --git a/public/fonts/Pretendard-Light.woff2 b/public/fonts/Pretendard-Light.woff2 new file mode 100644 index 0000000..7f82fe8 Binary files /dev/null and b/public/fonts/Pretendard-Light.woff2 differ diff --git a/public/fonts/Pretendard-Medium.subset.woff b/public/fonts/Pretendard-Medium.subset.woff new file mode 100644 index 0000000..f97a78f Binary files /dev/null and b/public/fonts/Pretendard-Medium.subset.woff differ diff --git a/public/fonts/Pretendard-Medium.subset.woff2 b/public/fonts/Pretendard-Medium.subset.woff2 new file mode 100644 index 0000000..9419980 Binary files /dev/null and b/public/fonts/Pretendard-Medium.subset.woff2 differ diff --git a/public/fonts/Pretendard-Medium.woff2 b/public/fonts/Pretendard-Medium.woff2 new file mode 100644 index 0000000..f8c743d Binary files /dev/null and b/public/fonts/Pretendard-Medium.woff2 differ diff --git a/public/fonts/Pretendard-Regular.subset.woff b/public/fonts/Pretendard-Regular.subset.woff new file mode 100644 index 0000000..174736a Binary files /dev/null and b/public/fonts/Pretendard-Regular.subset.woff differ diff --git a/public/fonts/Pretendard-Regular.subset.woff2 b/public/fonts/Pretendard-Regular.subset.woff2 new file mode 100644 index 0000000..6fc8ec4 Binary files /dev/null and b/public/fonts/Pretendard-Regular.subset.woff2 differ diff --git a/public/fonts/Pretendard-Regular.woff2 b/public/fonts/Pretendard-Regular.woff2 new file mode 100644 index 0000000..a9f6231 Binary files /dev/null and b/public/fonts/Pretendard-Regular.woff2 differ diff --git a/public/fonts/Pretendard-SemiBold.subset.woff b/public/fonts/Pretendard-SemiBold.subset.woff new file mode 100644 index 0000000..ee2fa3d Binary files /dev/null and b/public/fonts/Pretendard-SemiBold.subset.woff differ diff --git a/public/fonts/Pretendard-SemiBold.subset.woff2 b/public/fonts/Pretendard-SemiBold.subset.woff2 new file mode 100644 index 0000000..38175ff Binary files /dev/null and b/public/fonts/Pretendard-SemiBold.subset.woff2 differ diff --git a/public/fonts/Pretendard-SemiBold.woff2 b/public/fonts/Pretendard-SemiBold.woff2 new file mode 100644 index 0000000..4c6a32d Binary files /dev/null and b/public/fonts/Pretendard-SemiBold.woff2 differ diff --git a/public/fonts/Pretendard-Thin.subset.woff b/public/fonts/Pretendard-Thin.subset.woff new file mode 100644 index 0000000..b26f02f Binary files /dev/null and b/public/fonts/Pretendard-Thin.subset.woff differ diff --git a/public/fonts/Pretendard-Thin.subset.woff2 b/public/fonts/Pretendard-Thin.subset.woff2 new file mode 100644 index 0000000..c92f5b0 Binary files /dev/null and b/public/fonts/Pretendard-Thin.subset.woff2 differ diff --git a/public/fonts/Pretendard-Thin.woff2 b/public/fonts/Pretendard-Thin.woff2 new file mode 100644 index 0000000..6c9bc96 Binary files /dev/null and b/public/fonts/Pretendard-Thin.woff2 differ diff --git a/public/fonts/Pretendard.woff2 b/public/fonts/Pretendard.woff2 deleted file mode 100644 index 49c54b5..0000000 Binary files a/public/fonts/Pretendard.woff2 and /dev/null differ diff --git a/src/app/styles/app.css b/src/app/styles/app.css index 9466032..6568524 100644 --- a/src/app/styles/app.css +++ b/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 { -} diff --git a/src/pages/root/ui/header.module.css b/src/pages/root/ui/header.module.css new file mode 100644 index 0000000..74cc5cc --- /dev/null +++ b/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); +} diff --git a/src/pages/root/ui/header.tsx b/src/pages/root/ui/header.tsx index 3ccfc27..63c1457 100644 --- a/src/pages/root/ui/header.tsx +++ b/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 ( -
- -

- Joosum -

- - -
+
+
+ +

+ Joosum +

+ + +
+ {createPortal( +
+ +
, + document.body, + )} +
); }; @@ -44,7 +81,7 @@ interface NavLinkProps extends PropsWithChildren { const NavLink = ({ className, children, href }: NavLinkProps) => { return ( { + return ( + + ); +}; diff --git a/src/pages/root/ui/page.tsx b/src/pages/root/ui/page.tsx index 98378cc..b10ee92 100644 --- a/src/pages/root/ui/page.tsx +++ b/src/pages/root/ui/page.tsx @@ -12,10 +12,10 @@ export const Page = () => {
-

+

간편한 링크 아카이빙
- + 지금 바로 경험하세요!

@@ -28,7 +28,7 @@ export const Page = () => {
- 한 눈에 살펴보는 + 한 눈에 살펴보는
주섬 사용법 diff --git a/src/pages/root/ui/section.tsx b/src/pages/root/ui/section.tsx index d07ca90..bf01351 100644 --- a/src/pages/root/ui/section.tsx +++ b/src/pages/root/ui/section.tsx @@ -12,7 +12,7 @@ export const Section = ({ return (
diff --git a/src/pages/root/ui/usage-swiper.tsx b/src/pages/root/ui/usage-swiper.tsx index e6399d6..9d1ef54 100644 --- a/src/pages/root/ui/usage-swiper.tsx +++ b/src/pages/root/ui/usage-swiper.tsx @@ -128,7 +128,7 @@ const UsageItem = ({