feat: relocate HamburgerMenu atom from WEB

src/components/atoms/HamburgerMenu/HamburgerMenu.styles.module.scss

@@ -0,0 +1,54 @@
+@import 'src/scss/mixins';
+
+.hamburger-menu {
+  height: 25px;
+  width: 25px;
+  cursor: pointer;
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+
+  &:hover {
+    color: $color-light;
+  }
+}
+
+.line {
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  height: 5px;
+  background-color: $color-base;
+
+  &:nth-of-type(2) {
+    top: calc(44% - 6px);
+  }
+
+  &:nth-of-type(3) {
+    top: calc(63% + 5px);
+  }
+}
+
+.transition {
+  @include devices {
+    .line {
+      transition: all 1s;
+
+      &:nth-of-type(1) {
+        top: 50%;
+        transform: rotate(45deg);
+      }
+
+      &:nth-of-type(2) {
+        display: none;
+      }
+
+      &:nth-of-type(3) {
+        top: 50%;
+        transform: rotate(-45deg);
+      }
+    }
+  }
+}

src/components/atoms/HamburgerMenu/HamburgerMenu.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import cx from 'classnames'
+
+import css from './HamburgerMenu.styles.module.scss'
+
+export type HamburgerMenuProps = {
+  isHamburger: boolean
+  className?: string
+  onClick: () => void
+}
+
+export const HamburgerMenu = ({ className, onClick, isHamburger }: HamburgerMenuProps) => {
+  return (
+    <div
+      onClick={onClick}
+      className={cx(css.hamburgerMenu, className, {
+        [css.transition]: isHamburger
+      })}
+    >
+      <div className={css.line} />
+      <div className={css.line} />
+      <div className={css.line} />
+    </div>
+  )
+}

src/components/atoms/HamburgerMenu/index.ts

@@ -0,0 +1 @@
+export * from './HamburgerMenu'