모바일 메뉴 기능 추가

package.json

@@ -11,6 +11,7 @@
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "framer-motion": "^10.17.12",
+    "gh-pages": "^6.1.1",
     "i18next": "^23.7.16",
     "lz-string": "^1.5.0",
     "react": "^18.2.0",

src/assets/css/components/mobileMenu.scss

@@ -1,9 +1,51 @@
 .mobileMenu {
-  position: absolute;
+  position: fixed;
   z-index: 15;
   height: 100%;
   right: 0;
   width: 80%;
-  background-color: red;
+  background-color: $colorWhite;
   @include dropLeft();
+  box-shadow: -9px 7px 8.6px 0px rgba(0, 0, 0, 0.35);
+  display: flex;
+  flex-direction: column;
+  .close-btn-wrapper {
+    display: flex;
+    justify-content: flex-end;
+    img {
+      padding: 5rem;
+      width: 5rem;
+      cursor: pointer;
+    }
+  }
+  .logo-wrapper {
+    padding: 13rem 0 0 10rem;
+    img {
+      width: 56rem;
+    }
+  }
+  .menu-wrapper {
+    padding: 10rem 8rem;
+    .menu {
+      text-decoration: none;
+      display: flex;
+      padding: 0 2rem;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 0.25rem solid $colorGray200;
+      height: 12rem;
+      margin: 5rem 0;
+      .menu-text {
+        font-size: 4.5rem;
+        color: $colorGray200;
+      }
+      img {
+        width: 3rem;
+      }
+    }
+  }
+}
+
+.mobileMenu-active {
+  @include dropRight();
 }