@team-monolith/cds 0.1.0

package/src/cds/foundation/color.ts

@@ -0,0 +1,83 @@
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  blue10: "#1C3D73",
+  priamry09: "#234E91",
+  blue08: "#2C61B5",
+  blue07: "#3574D9",
+  blue06: "#3E88FF",
+  blue05: "#619DFF",
+  blue04: "#85B4FF",
+  blue03: "#ACCCFF",
+  blue02: "#D1E2FF",
+  blue01: "#ECF3FF",
+
+  orange10: "#6B421A",
+  orange09: "#8C5622",
+  orange08: "#B56F2C",
+  orange07: "#E88F38",
+  orange06: "#FF9D3E",
+  orange05: "#FFB165",
+  orange04: "#FFBD7E",
+  orange03: "#FFD2A6",
+  orange02: "#FFE1C3",
+  orange01: "#FFF5EC",
+
+  teal10: "#1C6069",
+  teal09: "#257D89",
+  teal08: "#30A2B1",
+  teal07: "#3DCFE3",
+  teal06: "#43E4F9",
+  teal05: "#69E9FA",
+  teal04: "#81EDFB",
+  teal03: "#A9F3FC",
+  teal02: "#C5F7FD",
+  teal01: "#ECFCFE",
+
+  yellow10: "#6B5402",
+  yellow09: "#8C6F03",
+  yellow08: "#B58F04",
+  yellow07: "#E8B705",
+  yellow06: "#FFC905",
+  yellow05: "#FFD437",
+  yellow04: "#FFDB58",
+  yellow03: "#FFE68C",
+  yellow02: "#FFEEB2",
+  yellow01: "#FFFAE6",
+
+  green10: "#3F580C",
+  green09: "#527310",
+  green08: "#6A9415",
+  green07: "#88BE1A",
+  green06: "#95D11D",
+  green05: "#AADA4A",
+  green04: "#B8E068",
+  green03: "#CEEA97",
+  green02: "#DEF1B9",
+  green01: "#F4FAE8",
+
+  red10: "#6B2013",
+  red09: "#8C2A19",
+  red08: "#B53720",
+  red07: "#E84629",
+  red06: "#FF4D2D",
+  red05: "#FF7157",
+  red04: "#FF8872",
+  red03: "#FFAD9E",
+  red02: "#FFC8BE",
+  red01: "#FFEDEA",
+
+  black: "#363636",
+
+  grey10: "#3E3E3E",
+  grey09: "#454545",
+  grey08: "#5F5F5F",
+  grey07: "#717171",
+  grey06: "#9C9C9C",
+  grey05: "#C8C8C8",
+  grey04: "#DEDEDE",
+  grey03: "#F2F2F2",
+  grey02: "#F6F6F6",
+  grey01: "#FDFDFD",
+
+  white: "#FFFFFF",
+};

package/src/cds/foundation/shadows.ts

@@ -0,0 +1,17 @@
+// https://www.figma.com/file/wefLB6cN0oM2VZjwYmBA6B/Codle-PD-Kit---Foundation?type=design&node-id=1-14238&t=Jg9tQ0vSRG6mw1RZ-0
+const shadows = {
+  shadow02: `0px 0.15px 0.45px rgba(0, 0, 0, 0.11), 
+  0px 0.8px 1.8px rgba(0, 0, 0, 0.13)`,
+  shadow04: `0px 0.3px 0.9px rgba(0, 0, 0, 0.07),
+  0px 1.6px 3.6px rgba(0, 0, 0, 0.11);`,
+  shadow08: `0px 0.6px 1.8px rgba(0, 0, 0, 0.11),
+  0px 3.2px 7.2px rgba(0, 0, 0, 0.13)`,
+  shadow16: `0px 1.2px 3.6px rgba(0, 0, 0, 0.11),
+  0px 6.4px 14.4px rgba(0, 0, 0, 0.13)`,
+  shadow32: `0px 2.4px 7.4px rgba(0, 0, 0, 0.18),
+  0px 12.8px 28.8px rgba(0, 0, 0, 0.22)`,
+  shadow64: `0px 4.8px 14.4px rgba(0, 0, 0, 0.18),
+  0px 25.6px 57.6px rgba(0, 0, 0, 0.22)`,
+};
+
+export default shadows;

package/src/cds/icons/arrows.tsx

@@ -0,0 +1,61 @@
+export const ArrowDropDownFillIcon = (props: { className?: string }) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path fill="currentColor" d="m12 14l-4-4h8l-4 4Z" />
+  </svg>
+);
+export const ExpandUpDownIcon = (props: { className?: string }) => (
+  <svg
+    {...props}
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M18 9L12 3L6 9H18ZM18 15L12 21L6 15H18Z" fill="currentColor" />
+  </svg>
+);
+export const ArrowDownFillIcon = (props: { className?: string }) => (
+  <svg
+    {...props}
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M13 12H20L12 20L4 12H11V4H13V12Z" fill="currentColor" />
+  </svg>
+);
+export const ArrowUpFillIcon = (props: { className?: string }) => (
+  <svg
+    {...props}
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M13 12V20H11V12H4L12 4L20 12H13Z" fill="currentColor" />
+  </svg>
+);
+export const ArrowRightSLineIcon = (props: { className?: string }) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M13.1714 12.0007L8.22168 7.05093L9.63589 5.63672L15.9999 12.0007L9.63589 18.3646L8.22168 16.9504L13.1714 12.0007Z"
+      fill="currentColor"
+    />
+  </svg>
+);

package/src/cds/icons/brand.tsx

@@ -0,0 +1,13 @@
+export const SymbolIcon = (props: { className?: string }) => (
+  <svg
+    {...props}
+    viewBox="-3 -2 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.89269 0C3.98164 0 0 3.80096 0 8.49034C0 12.0308 2.26988 15.0622 5.4957 16.336C6.05262 16.5557 6.36122 17.1512 6.19366 17.7238L5.83323 18.9592C5.66206 19.5427 6.17196 20.1009 6.76987 19.9845C8.47801 19.6495 11.564 18.7587 14.0701 16.4644C16.9898 13.7908 17.7854 10.9527 17.7854 8.49154C17.7854 3.80337 13.8037 0.00120173 8.89269 0.00120173V0Z"
+      fill="currentColor"
+    />
+  </svg>
+);

package/src/cds/icons/map.tsx

@@ -0,0 +1,14 @@
+export const EarthFillIcon = (props: { className?: string }) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM16.0043 12.8777C15.6589 12.3533 15.4097 11.9746 14.4622 12.1248C12.6717 12.409 12.4732 12.7224 12.3877 13.2375L12.3636 13.3943L12.3393 13.5597C12.2416 14.2428 12.2453 14.5012 12.5589 14.8308C13.8241 16.1582 14.582 17.115 14.8116 17.6746C14.9237 17.9484 15.2119 18.7751 15.0136 19.5927C16.2372 19.1066 17.3156 18.3332 18.1653 17.3559C18.2755 16.9821 18.3551 16.5166 18.3551 15.9518V15.8472C18.3551 14.9247 18.3551 14.504 17.7031 14.1314C17.428 13.9751 17.2227 13.881 17.0582 13.8064C16.691 13.6394 16.4479 13.5297 16.1198 13.0499C16.0807 12.9928 16.0425 12.9358 16.0043 12.8777ZM12 3.83333C9.68259 3.83333 7.59062 4.79858 6.1042 6.34896C6.28116 6.47186 6.43537 6.64453 6.54129 6.88256C6.74529 7.34029 6.74529 7.8112 6.74529 8.22764C6.74488 8.55621 6.74442 8.8672 6.84992 9.09302C6.99443 9.40134 7.6164 9.53227 8.16548 9.64736C8.36166 9.68867 8.56395 9.73083 8.74797 9.78176C9.25405 9.92233 9.64554 10.3765 9.95938 10.7412C10.0896 10.8931 10.2819 11.1163 10.3783 11.1717C10.4286 11.1356 10.59 10.9608 10.6699 10.6735C10.7307 10.4547 10.7134 10.2597 10.6239 10.1543C10.0648 9.49445 10.0952 8.2232 10.268 7.75495C10.5402 7.01606 11.3905 7.07058 12.012 7.11097C12.2438 7.12589 12.4626 7.14023 12.6257 7.11976C13.2482 7.04166 13.4396 6.09538 13.575 5.91C13.8671 5.50981 14.7607 4.9071 15.3158 4.53454C14.3025 4.08382 13.1805 3.83333 12 3.83333Z"
+      fill="currentColor"
+    />
+  </svg>
+);

package/src/cds/icons/system.tsx

@@ -0,0 +1,113 @@
+export const CloseFillIcon = (props: { className?: string }) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="m12 10.586l4.95-4.95l1.415 1.415l-4.95 4.95l4.95 4.95l-1.415 1.414l-4.95-4.95l-4.95 4.95l-1.413-1.415l4.95-4.95l-4.95-4.95L7.05 5.638l4.95 4.95Z"
+    />
+  </svg>
+);
+export const CloseCircleFillIcon = (props: { className?: string }) => (
+  <svg
+    {...props}
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 10.5858L9.17157 7.75736L7.75736 9.17157L10.5858 12L7.75736 14.8284L9.17157 16.2426L12 13.4142L14.8284 16.2426L16.2426 14.8284L13.4142 12L16.2426 9.17157L14.8284 7.75736L12 10.5858Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export const ErrorWarningFillIcon = (props: { className?: string }) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10Zm-1-7v2h2v-2h-2Zm0-8v6h2V7h-2Z"
+    />
+  </svg>
+);
+export const AlertFillIcon = (props: { className?: string }) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="m12.865 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.473a1 1 0 0 1-.866-1.5L11.133 3a1 1 0 0 1 1.732 0Zm-1.866 13v2h2v-2h-2Zm0-7v5h2V9h-2Z"
+    />
+  </svg>
+);
+export const CheckboxCircleFillIcon = (props: { className?: string }) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10Zm-.997-6l7.07-7.071l-1.413-1.414l-5.657 5.657l-2.829-2.829l-1.414 1.414L11.003 16Z"
+    />
+  </svg>
+);
+export const EyeFillIcon = (props: { className?: string }) => (
+  <svg
+    {...props}
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12ZM12.0003 17C14.7617 17 17.0003 14.7614 17.0003 12C17.0003 9.23858 14.7617 7 12.0003 7C9.23884 7 7.00026 9.23858 7.00026 12C7.00026 14.7614 9.23884 17 12.0003 17ZM12.0003 15C10.3434 15 9.00026 13.6569 9.00026 12C9.00026 10.3431 10.3434 9 12.0003 9C13.6571 9 15.0003 10.3431 15.0003 12C15.0003 13.6569 13.6571 15 12.0003 15Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export const InformationFillIcon = (props: { className?: string }) => (
+  <svg
+    {...props}
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11 11V17H13V11H11ZM11 7V9H13V7H11Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export const FilterFillIcon = (props: { className?: string }) => (
+  <svg
+    {...props}
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M21 4V6H20L14 15V22H10V15L4 6H3V4H21Z" fill="currentColor" />
+  </svg>
+);

package/src/cds/index.ts

@@ -0,0 +1,3 @@
+import Button from "./components/Button";
+
+export { Button };

package/src/cds/patterns/Dropdown/Dropdown.tsx

@@ -0,0 +1,111 @@
+import React, { useRef, useState } from "react";
+import Button, { ButtonColor, ButtonSize } from "../../components/Button";
+import DropdownMenu, { DropdownMenuProps } from "./DropdownMenu";
+import { ArrowDropDownFillIcon } from "../../icons/arrows";
+
+/* 드롭다운 패턴은 버튼 컴포넌트와 드롭다운 메뉴 컴포넌트를 합쳐서 사용합니다.
+드롭다운 메뉴 컴포넌트는 MUI의 Menu 컴포넌트를 사용하며, 드롭다운 아이템의 리스트 형태로 구성됩니다.
+
+<DropdownMenu>
+드롭다운 메뉴는 기본값으로 Mui Modal의 성질을 갖고 있어서 클릭 이벤트가 발생하면 메뉴가 열리고,
+생성된 메뉴 외부 영역을 클릭하면 메뉴가 닫힙니다.
+그런데, 중첩된 드롭다운 메뉴를 구현할 때 이러한 성질이 문제가 됩니다.
+이 생성된 메뉴 외부 영역이 상위 드롭다운 메뉴를 가려서 클릭이 되지 않기 때문입니다.
+그래서 중첩된 메뉴(isNestedMenu)의 경우 이 모달의 position을 적절히 이동시켜 상위 메뉴와 상호작용 할 수 있게 만들었습니다.
+또한 메뉴에서 열려있는 서브메뉴가 최대 하나만 존재하게 하기 위해 selectedIndex 상태를 추가했습니다.
+handleClick을 통해 아이템이 아닌 다른 곳을 클릭하면 메뉴가 닫히도록 했습니다.
+
+<DropdownItem>
+드롭다운 아이템의 서브메뉴가 열리는 조건은 복잡합니다.
+1. 서브메뉴가 존재해야 하고,(isSubMenuExist)
+2. 드롭다운 아이템이 클릭되어 내부 상태(isSubMenuOpen)가 true가 되어야 하며,
+3. 서브메뉴 노출이 허용되어 있어야 합니다.(shouldSubMenuOpen)
+
+드롭다운 메뉴의 handleClick은 드롭다운 메뉴를 닫는 역할을 하므로, 
+드롭다운 아이템의 handleClick은 e.stopPropagation()을 통해 이벤트 전파를 막습니다.
+그리고 드롭다운 아이템을 클릭하면 내부 상태(isSubMenuOpen)를 true로 만들고,
+onClick을 통해 전달된 함수를 통해 드롭다운 메뉴의 selectedIndex 상태를 변경합니다.
+이 selectedIndex 상태를 이용해서 서브메뉴 노출 허용여부(shouldSubMenuOpen)를 전달했습니다.
+이를 통해 서브메뉴는 최대 하나만 열리도록 구현했습니다.
+*/
+
+export interface DropdownProps {
+  className?: string;
+  component?: React.ElementType;
+
+  /** 버튼 비활성화 여부 */
+  disabled?: boolean;
+
+  /** 버튼 컴포넌트 색상 */
+  color?: ButtonColor;
+
+  /** 버튼 컴포넌트 크기 */
+  size?: ButtonSize;
+
+  /** 버튼 컴포넌트 내 좌측에 표기될 아이콘 */
+  startIcon?: React.ReactNode;
+
+  /** 버튼 컴포넌트 내 우측에 표기될 아이콘 */
+  endIcon?: React.ReactNode;
+
+  /** 버튼 컴포넌트 내 표기될 문자열 */
+  label: string;
+
+  /** 버튼 클릭 시 호출될 콜백 함수 */
+  onClick?: () => void;
+
+  /** 드롭다운 메뉴의 props */
+  menuProps: DropdownMenuProps;
+}
+
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=203-95329&t=FwczLZ1IVvskUVbT-0)
+ */
+export default function Dropdown(props: DropdownProps) {
+  const {
+    className,
+    component: Component = "div",
+    disabled,
+    color = "primary",
+    size = "medium",
+    startIcon,
+    endIcon = <ArrowDropDownFillIcon />,
+    label,
+    onClick,
+    menuProps,
+  } = props;
+  const buttonProps = {
+    disabled,
+    color,
+    size,
+    startIcon,
+    endIcon,
+  };
+  const menuRef = useRef<HTMLButtonElement | null>(null);
+  const [open, setOpen] = useState(false);
+
+  const handleClick = () => {
+    onClick?.();
+    setOpen(true);
+  };
+  const handleClose = (e: React.MouseEvent<HTMLElement>) => {
+    menuProps.onClose?.(e);
+    setOpen(false);
+  };
+  return (
+    <Component className={className}>
+      <Button
+        ref={menuRef}
+        {...buttonProps}
+        label={label}
+        onClick={handleClick}
+      />
+      <DropdownMenu
+        {...menuProps}
+        open={open}
+        onClose={handleClose}
+        anchorEl={menuRef.current}
+      />
+    </Component>
+  );
+}

package/src/cds/patterns/Dropdown/DropdownItem.tsx

@@ -0,0 +1,203 @@
+/** @jsxImportSource @emotion/react */
+import { css, Theme } from "@emotion/react";
+import * as React from "react";
+import styled from "@emotion/styled";
+import { MenuItem } from "@mui/material";
+import { HOVER } from "../../utils/hover";
+import CheckboxInput, {
+  CheckboxInputProps,
+} from "../../components/CheckboxInput";
+import { useRef, useState } from "react";
+import DropdownMenu, { DropdownMenuProps } from "./DropdownMenu";
+import { ArrowRightSLineIcon } from "../../icons/arrows";
+
+export type DropdownItemType = "default" | "danger";
+
+export const DROPDOWN_ITEM_WIDTH = 116;
+
+const TYPE_TO_COLOR = (theme: Theme, type: DropdownItemType): string => {
+  return {
+    default: theme.color.foreground.neutralBase,
+    danger: theme.color.foreground.danger,
+  }[type];
+};
+
+export interface DropdownItemProps {
+  className?: string;
+  component?: React.ElementType;
+
+  /** 드롭다운 아이템의 타입 */
+  type?: DropdownItemType;
+  /** 체크박스 노출여부 */
+  checkbox?: boolean;
+  /** 체크박스 설정 props. 초기 체크여부 및 체크박스 값 변경시 호출되는 함수 등을 지정합니다. */
+  checkboxProps?: CheckboxInputProps;
+  /** 시작 아이콘 설정 */
+  startIcon?: React.ReactNode;
+  /** 드롭다운 아이템의 라벨 */
+  label?: string;
+  /** 끝 아이콘 설정. subMenuProps가 없으면 노출되지 않습니다. */
+  endIcon?: React.ReactNode;
+  /** 비활성화 여부 */
+  disabled?: boolean;
+  /** 드롭다운 아이템의 활성화 여부. 서브 메뉴가 노출될 때 true가 됩니다. */
+  active?: boolean;
+  /** 드롭다운 아이템 마우스 호버 시 호출될 콜백 함수 */
+  onMouseEnter?: (e: React.MouseEvent<HTMLElement>) => void;
+  /** 드롭다운 아이템 마우스 아웃 시 호출될 콜백 함수 */
+  onMouseLeave?: (e: React.MouseEvent<HTMLElement>) => void;
+  /** 드롭다운 아이템 클릭 시 호출될 콜백 함수 */
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+  /** 드롭다운 아이템의 서브 메뉴가 열려야 하는지 여부 */
+  shouldSubMenuOpen?: boolean;
+  /** 아이템이 가지는 드롭다운 메뉴 props. 주어지지 않으면 서브메뉴가 없습니다. */
+  subMenuProps?: DropdownMenuProps;
+  /** 드롭다운 아이템의 서브 메뉴가 닫힐 때 실행할 콜백함수 */
+  onSubMenuClose?: (e: React.MouseEvent<HTMLElement>) => void;
+}
+
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=106-1900&t=FwczLZ1IVvskUVbT-0)
+ */
+const DropdownItem = React.forwardRef<any, DropdownItemProps>(
+  (props, ref): React.ReactElement => {
+    const {
+      className,
+      component: Component = "div",
+      type = "default",
+      checkbox,
+      checkboxProps = { checked: false },
+      startIcon,
+      label,
+      endIcon = <ArrowRightSLineIcon />,
+      disabled,
+      active,
+      onMouseEnter,
+      onMouseLeave,
+      onClick,
+      shouldSubMenuOpen = false,
+      subMenuProps = {
+        itemsProps: [],
+      },
+      onSubMenuClose,
+      ...other
+    } = props;
+    const itemRef = useRef<HTMLLIElement | null>(null);
+    const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);
+    const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+      e.stopPropagation();
+      setIsSubMenuOpen(true);
+      onClick?.(e);
+    };
+    const handleClose = (e: React.MouseEvent<HTMLElement>) => {
+      setIsSubMenuOpen(false);
+      onSubMenuClose?.(e);
+    };
+    const isSubMenuExist = subMenuProps.itemsProps.length > 0;
+    const isSubMenuShowed =
+      isSubMenuExist && isSubMenuOpen && shouldSubMenuOpen;
+
+    return (
+      <Component
+        className={className}
+        ref={ref}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        onClick={handleClick}
+        {...other}
+      >
+        <StyledMenuItem
+          ref={itemRef}
+          disabled={disabled}
+          selected={isSubMenuShowed || active}
+        >
+          <LeftWrapper>
+            {checkbox && (
+              <StyledCheckboxInput
+                {...checkboxProps}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  checkboxProps.onClick?.(e);
+                }}
+              />
+            )}
+            {startIcon && <IconDiv type={type}>{startIcon}</IconDiv>}
+            <LabelDiv type={type}>{label}</LabelDiv>
+          </LeftWrapper>
+          {isSubMenuExist && <IconDiv type={type}>{endIcon}</IconDiv>}
+        </StyledMenuItem>
+        {isSubMenuExist && (
+          <DropdownMenu
+            {...subMenuProps}
+            open={isSubMenuShowed}
+            anchorEl={itemRef.current}
+            isNestedMenu={true}
+            onClose={handleClose}
+            anchorOrigin={{
+              vertical: "top",
+              horizontal: "right",
+            }}
+          />
+        )}
+      </Component>
+    );
+  }
+);
+
+const StyledCheckboxInput = styled(CheckboxInput)`
+  margin: 4px;
+`;
+
+const IconDiv = styled.div<{ type: DropdownItemType }>(
+  ({ theme, type }) => css`
+    width: 14px;
+    height: 14px;
+    svg {
+      width: 14px;
+      height: 14px;
+      path {
+        fill: ${TYPE_TO_COLOR(theme, type)};
+      }
+    }
+  `
+);
+
+const LabelDiv = styled.div<{ type: DropdownItemType }>`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  color: ${({ theme, type }) => TYPE_TO_COLOR(theme, type)};
+`;
+
+const LeftWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  white-space: nowrap;
+  gap: 4px;
+`;
+
+const StyledMenuItem = styled(MenuItem)(
+  ({ theme }) => css`
+    &.MuiMenuItem-root {
+      background-color: ${theme.color.background.neutralBase};
+      width: ${DROPDOWN_ITEM_WIDTH}px;
+      height: 32px;
+      border-radius: 6px;
+      padding: 4px 8px 4px 8px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      line-height: 14px;
+      ${HOVER(css`
+        background-color: ${theme.color.background.neutralAlt};
+      `)}
+      &.Mui-selected {
+        background-color: ${theme.color.background.neutralAlt};
+      }
+    }
+  `
+);
+
+export default DropdownItem;