Create Menu component

src/design-system/components/menu-item/MenuItem.constants.ts

@@ -0,0 +1,10 @@
+export enum MenuItemColorVariant {
+  Default = 'default',
+  Danger = 'danger',
+  Secondary = 'secondary'
+}
+
+export enum MenuItemVariant {
+  Default = 'default',
+  Nested = 'nested'
+}

src/design-system/components/menu-item/MenuItem.scss

@@ -0,0 +1,106 @@
+@use '~scss/utilities' as *;
+
+.#{$prefix}item {
+  background-color: $neutral-0;
+  width: 100%;
+  padding: 16px 8px;
+  display: flex;
+  justify-content: space-between;
+
+  &:disabled {
+    color: $blue-gray-700;
+  }
+
+  &:hover {
+    background-color: $blue-gray-100;
+  }
+
+  &.selected {
+    background-color: $blue-gray-50;
+  }
+
+  &--align-center {
+    justify-content: center;
+  }
+
+  &--align-right {
+    justify-content: flex-end;
+  }
+
+  &--density-1 {
+    height: 48px;
+  }
+
+  &--density-2 {
+    height: 64px;
+    padding-top: 30px;
+  }
+
+  &--density-2 &-title {
+    font-weight: $font-weight-medium;
+  }
+
+  &--density-2 &-additional-info {
+    line-height: $line-height-sm;
+  }
+
+  &--variant-nested {
+    background-color: $neutral-50;
+  }
+
+  &--toggled {
+    background-color: $blue-gray-50;
+  }
+
+  &--default {
+    color: $blue-gray-700;
+  }
+
+  &--color-danger {
+    color: $red-500;
+  }
+
+  &--color-secondary {
+    color: $blue-gray-500;
+  }
+
+  &--disabled {
+    color: $blue-gray-700;
+  }
+
+  &--bottom-border {
+    border-bottom: 1px solid $blue-gray-100;
+  }
+
+  &__graphics {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+  }
+
+  &__text-box {
+    margin-left: 12px;
+    display: flex;
+    flex-direction: column;
+    padding-right: 8px;
+  }
+
+  &__additional-info {
+    font-size: $font-size-xs;
+    color: $blue-gray-500;
+    line-height: $line-height-sm;
+  }
+
+  &__main-info-box {
+    display: flex;
+    align-items: center;
+  }
+
+  &__close {
+    font-size: $font-size-sm;
+  }
+}

src/design-system/components/menu-item/MenuItem.tsx

@@ -0,0 +1,107 @@
+import { FC, useRef } from 'react'
+import { MenuItem as MuiMenuItem } from '@mui/material'
+import { ArrowDropDown, ArrowDropUp, CloseRounded } from '@mui/icons-material'
+
+import { MenuItemProps as CommonMenuItemProps } from './MenuItem.types'
+import { MenuItemColorVariant, MenuItemVariant } from './MenuItem.constants'
+import { cn } from '~/utils/cn'
+
+import '~scss-components/menu-item/MenuItem.scss'
+
+interface MenuItemProps extends CommonMenuItemProps {
+  isDropdown?: boolean
+  density?: 1 | 2
+  isToggled?: boolean
+  onRemove?: () => void
+  variant?: MenuItemVariant
+}
+
+const MenuItem: FC<MenuItemProps> = ({
+  title,
+  additionalInfo,
+  alignVariant = 'left',
+  colorVariant = MenuItemColorVariant.Default,
+  density = 1,
+  graphics,
+  isDropdown = false,
+  isToggled = false,
+  isBottomBorder = false,
+  isDisabled = false,
+  onClick,
+  onRemove,
+  variant = MenuItemVariant.Default
+}) => {
+  const graphicsRef = useRef<HTMLButtonElement | null>(null)
+
+  const handleClick = () => {
+    if (graphicsRef.current) {
+      const interactiveElement =
+        graphicsRef.current.querySelector<HTMLInputElement>(
+          'input[type="radio"], input[type="checkbox"], [role="radio"], [role="checkbox"]'
+        )
+
+      if (interactiveElement) {
+        interactiveElement.click()
+        return
+      }
+    }
+
+    onClick?.()
+  }
+
+  const handleGraphicsClick = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    onClick?.()
+  }
+
+  const handleRemoveItem = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    onRemove?.()
+  }
+
+  return (
+    <MuiMenuItem
+      className={cn(
+        's2s-item',
+        `s2s-item--density-${density}`,
+        `s2s-item--variant-${variant}`,
+        `s2s-item--color-${colorVariant}`,
+        `s2s-item--align-${alignVariant}`,
+        isToggled && 's2s-item--toggled',
+        isBottomBorder && 's2s-item--bottom-border',
+        isDisabled && 's2s-item--disabled'
+      )}
+      disabled={isDisabled}
+      key={title}
+      onClick={handleClick}
+    >
+      <div className='s2s-item__main-info-box'>
+        {graphics && (
+          <button
+            className='s2s-item__graphics'
+            onClick={handleGraphicsClick}
+            ref={graphicsRef}
+          >
+            {graphics}
+          </button>
+        )}
+        <div className='s2s-item__text-box'>
+          <span className='s2s-item__additional-info'>{additionalInfo}</span>
+          <span className='s2s-item__title'>{title}</span>
+        </div>
+      </div>
+      {isDropdown && (
+        <div className='s2s-item__graphics'>
+          {isToggled ? <ArrowDropUp /> : <ArrowDropDown />}
+        </div>
+      )}
+      {onRemove && !isDropdown && !isDisabled && (
+        <button className='s2s-item__graphics' onClick={handleRemoveItem}>
+          <CloseRounded className='s2s-item__close' />
+        </button>
+      )}
+    </MuiMenuItem>
+  )
+}
+
+export default MenuItem

src/design-system/components/menu-item/MenuItem.types.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react'
+import { MenuItemColorVariant } from './MenuItem.constants'
+
+export type OnItemClickArgs = Record<string, string | Event>
+
+export interface MenuItemProps {
+  title: string
+  additionalInfo?: string
+  alignVariant?: 'left' | 'center' | 'right'
+  colorVariant?: MenuItemColorVariant
+  isDisabled?: boolean
+  graphics?: ReactNode
+  isBottomBorder?: boolean
+  onClick?: () => void
+}

src/design-system/components/menu/Menu.scss

@@ -0,0 +1,8 @@
+@use '~scss/utilities' as *;
+
+.#{$prefix}menu {
+  border-radius: 6px;
+  box-shadow:
+    0 0 8px 0 rgba(0, 0, 0, 0.08),
+    0 10px 12px 0 rgba(0, 0, 0, 0.1);
+}