fix: 모바일 햄버거 버튼 메뉴 수정, 디자인 시스템 css 파일 추가

assets/css/color.scss

@@ -0,0 +1,27 @@
+$white: #ffffff;
+$grey01: #f6f6f6;
+$grey02: #dddddd;
+$grey03: #777777;
+$grey04: #3b3b3b;
+$black: #000000;
+$primary: #6b68f7;
+$accent: #ff4853;
+
+$background-default: $white;
+$background-sub: $grey01;
+$background-inverse: $black;
+$background-primary: $primary;
+$background-accent: $accent;
+
+$text-default: $black;
+$text-sub: $grey03;
+$text-inverse: $white;
+$text-disable: $grey02;
+
+$icon-default: $black;
+$icon-sub: $grey03;
+$icon-inverse: $black;
+$icon-disable: $grey02;
+
+$border-default: $grey02;
+$border-inverse: $grey04;

assets/css/typography.scss

@@ -0,0 +1,77 @@
+$regular-weight: 400;
+$medium-weight: 500;
+$bold-weight: 700;
+
+* {
+  font-family: Spoqa Han Sans Neo;
+}
+
+h1.m {
+  font-weight: $bold-weight;
+  font-size: 40px;
+  line-height: 60px;
+  letter-spacing: -0.02em;
+}
+
+h1.d {
+  font-weight: $bold-weight;
+  font-size: 100px;
+  line-height: 150px;
+  letter-spacing: -0.02em;
+}
+
+h2.m {
+  font-weight: $bold-weight;
+  font-size: 32px;
+  line-height: 48px;
+  letter-spacing: -0.02em;
+}
+
+h2.d {
+  font-weight: $bold-weight;
+  font-size: 60px;
+  line-height: 90px;
+  letter-spacing: -0.02em;
+}
+
+h3.m {
+  font-weight: $bold-weight;
+  font-size: 24px;
+  line-height: 36px;
+  letter-spacing: -0.02em;
+}
+
+h3.d {
+  font-weight: $bold-weight;
+  font-size: 32px;
+  line-height: 48px;
+  letter-spacing: -0.02em;
+}
+
+p.m {
+  font-weight: $bold-weight;
+  font-size: 14px;
+  line-height: 21px;
+  letter-spacing: -0.02em;
+}
+
+p.d {
+  font-weight: $bold-weight;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: -0.02em;
+}
+
+caption.m {
+  font-weight: $bold-weight;
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: -0.02em;
+}
+
+caption.d {
+  font-weight: $bold-weight;
+  font-size: 14px;
+  line-height: 21px;
+  letter-spacing: -0.02em;
+}

components/header.vue

@@ -107,8 +107,11 @@ nav {
     }
     .menu-items {
       width: 100%;
-      position: absolute;
+      position: fixed;
       top: 73px;
+      left: 0;
+      right: 0;
+      bottom: 0;
       padding-top: 32px;
       display: flex;
       flex-direction: column;

components/project/project/detail.vue

@@ -72,7 +72,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import "~/assets/css/_device.scss";
 * {
   font-family: Spoqa Han Sans Neo;

nuxt.config.ts

@@ -29,6 +29,8 @@ const config: NuxtConfig = {
     "~/assets/css/reset.css",
     "~/assets/css/webfont.css",
     "~/assets/css/_device.scss",
+    "~/assets/css/color.scss",
+    "~/assets/css/typography.scss",
   ],
   loading: "~/components/loading-bar.vue",
   router: {

store/index.js

@@ -8,10 +8,23 @@ export const getters = {
 
 export const mutations = {
   toggleMenu(state) {
+    if (state.isMenuOpen) {
+      document.documentElement.style.getPropertyValue("--scroll-y");
+      const { body } = document;
+      body.style.overflowY = "";
+    } else {
+      document.documentElement.style.getPropertyValue("--scroll-y");
+      const { body } = document;
+      body.style.height = "100vh";
+      body.style.overflowY = "hidden";
+    }
     state.isMenuOpen = !state.isMenuOpen;
   },
   init(state) {
     state.isMenuOpen = false;
+    document.documentElement.style.getPropertyValue("--scroll-y");
+    const { body } = document;
+    body.style.overflowY = "";
   },
 };