From 2171bc021f30e9dabd1ecd288226ab026394df60 Mon Sep 17 00:00:00 2001
From: Evan Moon <bboydart91@gmail.com>
Date: Sat, 21 Aug 2021 17:39:43 +0900
Subject: [PATCH] =?UTF-8?q?chore:=20legacy=20=EB=94=94=EB=A0=89=ED=86=A0?=
 =?UTF-8?q?=EB=A6=AC=20=EC=A0=9C=EA=B1=B0=20[skip=20ci]=20(#122)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 legacy/components/Accordion/index.tsx         |  85 ---
 legacy/components/Alert/index.tsx             |  71 ---
 legacy/components/Button/index.tsx            |  50 --
 legacy/components/Card/CardContent.tsx        |  20 -
 legacy/components/Card/CardFooter.tsx         |  33 --
 legacy/components/Card/CardHeader.tsx         |  20 -
 legacy/components/Card/CardImageContent.tsx   |  20 -
 legacy/components/Card/index.tsx              |  32 --
 legacy/components/Checkbox/index.tsx          |  53 --
 legacy/components/Container/index.tsx         |  27 -
 legacy/components/Grid/Column.tsx             |  42 --
 legacy/components/Grid/Row.tsx                |  42 --
 legacy/components/Grid/index.ts               |   2 -
 legacy/components/Grid/types.ts               |   5 -
 legacy/components/Icon/index.tsx              |  98 ----
 legacy/components/Icon/utils.ts               |  31 --
 legacy/components/Input/index.tsx             | 101 ----
 legacy/components/List/ListItem.tsx           |  60 --
 legacy/components/List/ListItemImage.tsx      |  22 -
 legacy/components/List/index.tsx              |  18 -
 .../components/LubyconUIKitProvider/index.tsx |  20 -
 legacy/components/Modal/ModalBackdrop.tsx     |  23 -
 legacy/components/Modal/ModalContent.tsx      |  25 -
 legacy/components/Modal/ModalFooter.tsx       |  20 -
 legacy/components/Modal/ModalHeader.tsx       |  25 -
 legacy/components/Modal/ModalWindow.tsx       |  24 -
 legacy/components/Modal/index.tsx             | 101 ----
 legacy/components/ProgressBar/index.tsx       |  54 --
 legacy/components/Radio/index.tsx             |  47 --
 legacy/components/Selection/index.tsx         |  69 ---
 legacy/components/Shadow/index.tsx            |  14 -
 legacy/components/Snackbar/SnackbarBody.tsx   |  29 -
 legacy/components/Snackbar/index.tsx          | 109 ----
 legacy/components/Snackbar/utils.ts           |  21 -
 legacy/components/Spacing/index.tsx           |  10 -
 legacy/components/Switch/index.tsx            |  32 --
 legacy/components/Table/TableBody.tsx         |  16 -
 legacy/components/Table/TableCell.tsx         |  29 -
 legacy/components/Table/TableHead.tsx         |  21 -
 legacy/components/Table/TableRow.tsx          |  13 -
 legacy/components/Table/index.tsx             |  17 -
 legacy/components/Table/props.ts              |   9 -
 legacy/components/Tabs/TabsContext.ts         |  22 -
 legacy/components/Tabs/TabsIndicator.tsx      |  23 -
 legacy/components/Tabs/TabsItem.tsx           |  75 ---
 legacy/components/Tabs/index.tsx              |  77 ---
 legacy/components/Tag/index.tsx               |  53 --
 legacy/components/Text/index.tsx              |  34 --
 legacy/components/Text/types.ts               |  18 -
 legacy/components/Tooltip/TooltipBody.tsx     |  43 --
 legacy/components/Tooltip/index.tsx           |  69 ---
 legacy/components/Tooltip/types.ts            |  19 -
 legacy/components/Tooltip/utils.ts            |  96 ----
 legacy/constants/colors.ts                    |  32 --
 legacy/contexts/Modal.tsx                     |  86 ---
 legacy/contexts/Portal.tsx                    |  36 --
 legacy/contexts/Snackbar.tsx                  | 112 ----
 legacy/hooks/useCombinedRefs.ts               |  18 -
 legacy/hooks/useResizeObserver.ts             |  23 -
 legacy/index.ts                               |  33 --
 legacy/sass/components/_Accordion.scss        |  42 --
 legacy/sass/components/_Alert.scss            |  29 -
 legacy/sass/components/_Button.scss           |  60 --
 legacy/sass/components/_Card.scss             |  40 --
 legacy/sass/components/_Checkbox.scss         |  74 ---
 legacy/sass/components/_Column.scss           |  27 -
 legacy/sass/components/_Container.scss        |  11 -
 legacy/sass/components/_Icon.scss             |  29 -
 legacy/sass/components/_Input.scss            |  81 ---
 legacy/sass/components/_List.scss             |  69 ---
 legacy/sass/components/_Modal.scss            |  46 --
 legacy/sass/components/_ProgressBar.scss      |  48 --
 legacy/sass/components/_Radio.scss            |  75 ---
 legacy/sass/components/_Row.scss              |  42 --
 legacy/sass/components/_Selection.scss        |  57 --
 legacy/sass/components/_Snackbar.scss         |  96 ----
 legacy/sass/components/_Spacing.scss          |   4 -
 legacy/sass/components/_Switch.scss           |  49 --
 legacy/sass/components/_Table.scss            |  30 -
 legacy/sass/components/_Tabs.scss             |  58 --
 legacy/sass/components/_Tag.scss              |  64 ---
 legacy/sass/components/_Text.scss             |   7 -
 legacy/sass/components/_Tooltip.scss          |  93 ----
 legacy/sass/components/_index.scss            |  23 -
 legacy/sass/functions/_index.scss             |   1 -
 legacy/sass/functions/_strip-unit.scss        |   9 -
 legacy/sass/index.scss                        |   7 -
 legacy/sass/utils/_breakpoints.scss           |  13 -
 legacy/sass/utils/_colors.scss                |  40 --
 legacy/sass/utils/_font-weights.scss          |  24 -
 legacy/sass/utils/_font.scss                  |   5 -
 legacy/sass/utils/_grid.scss                  |   2 -
 legacy/sass/utils/_index.scss                 |   8 -
 legacy/sass/utils/_scrollbar.scss             |   7 -
 legacy/sass/utils/_shadows.scss               |  18 -
 legacy/sass/utils/_typography.scss            |  30 -
 .../Components/Accordion/index.stories.mdx    |  81 ---
 legacy/stories/Components/Alert/data.ts       |  20 -
 .../Components/Alert/index.stories.mdx        |  39 --
 legacy/stories/Components/Button/data.ts      |   5 -
 .../Components/Button/index.stories.mdx       |  72 ---
 .../stories/Components/Card/index.stories.mdx |  78 ---
 .../Components/Checkbox/Components.tsx        |  22 -
 .../Components/Checkbox/index.stories.mdx     |  95 ----
 legacy/stories/Components/Grid/data.ts        |  13 -
 .../stories/Components/Grid/index.stories.mdx | 125 -----
 legacy/stories/Components/Icons/data.ts       | 516 ------------------
 .../Components/Icons/index.stories.mdx        |  71 ---
 .../stories/Components/Input/Components.tsx   |  33 --
 legacy/stories/Components/Input/data.ts       |  13 -
 .../Components/Input/index.stories.mdx        | 148 -----
 legacy/stories/Components/List/Components.tsx |  18 -
 .../stories/Components/List/index.stories.mdx | 148 -----
 .../stories/Components/Modal/Components.tsx   | 234 --------
 .../Components/Modal/index.stories.mdx        |  33 --
 .../Components/ProgressBar/Components.tsx     |  79 ---
 legacy/stories/Components/ProgressBar/data.ts |   4 -
 .../Components/ProgressBar/index.stories.mdx  |  39 --
 .../Components/Radio/index.stories.mdx        |  63 ---
 .../Components/Selection/Components.tsx       |  17 -
 .../Components/Selection/index.stories.mdx    |  58 --
 .../Components/Snackbar/Components.tsx        | 155 ------
 .../Components/Snackbar/index.stories.mdx     |  94 ----
 .../Components/Switch/index.stories.mdx       |  28 -
 legacy/stories/Components/Table/data.ts       |   3 -
 .../Components/Table/index.stories.mdx        |  36 --
 legacy/stories/Components/Tabs/Components.tsx |  28 -
 legacy/stories/Components/Tabs/data.ts        |  27 -
 .../stories/Components/Tabs/index.stories.mdx |  15 -
 legacy/stories/Components/Tag/data.ts         |  24 -
 .../stories/Components/Tag/index.stories.mdx  |  46 --
 .../stories/Components/Text/index.stories.mdx | 103 ----
 .../stories/Components/Tooltip/Components.tsx |  53 --
 legacy/stories/Components/Tooltip/data.ts     |  12 -
 .../Components/Tooltip/index.stories.mdx      |  31 --
 legacy/stories/Styles/Colors/data.ts          |  33 --
 .../stories/Styles/Colors/index.stories.mdx   | 116 ----
 legacy/stories/Styles/Shadows/components.tsx  |  19 -
 .../stories/Styles/Shadows/index.stories.mdx  |  56 --
 legacy/stories/Styles/Typography/data.ts      |  21 -
 .../Styles/Typography/index.stories.mdx       |  36 --
 legacy/stories/getting-started.stories.mdx    |  34 --
 legacy/stories/intro.stories.mdx              |  13 -
 legacy/stories/usage.stories.mdx              |  28 -
 legacy/template/codesandbox/package.json      |  27 -
 legacy/template/codesandbox/public/index.html |  47 --
 legacy/template/codesandbox/src/App.tsx       |   5 -
 legacy/template/codesandbox/src/index.tsx     |   7 -
 legacy/template/codesandbox/tsconfig.json     |   9 -
 legacy/types/OverridableProps.ts              |   9 -
 legacy/types/icon.ts                          | 509 -----------------
 legacy/types/utils.ts                         |  13 -
 legacy/utils/dom.ts                           |  15 -
 legacy/utils/generateID.ts                    |   6 -
 legacy/utils/index.ts                         |   1 -
 legacy/utils/mediaQuery.ts                    |  35 --
 legacy/utils/sleep.ts                         |   5 -
 157 files changed, 7470 deletions(-)
 delete mode 100644 legacy/components/Accordion/index.tsx
 delete mode 100644 legacy/components/Alert/index.tsx
 delete mode 100644 legacy/components/Button/index.tsx
 delete mode 100644 legacy/components/Card/CardContent.tsx
 delete mode 100644 legacy/components/Card/CardFooter.tsx
 delete mode 100644 legacy/components/Card/CardHeader.tsx
 delete mode 100644 legacy/components/Card/CardImageContent.tsx
 delete mode 100644 legacy/components/Card/index.tsx
 delete mode 100644 legacy/components/Checkbox/index.tsx
 delete mode 100644 legacy/components/Container/index.tsx
 delete mode 100644 legacy/components/Grid/Column.tsx
 delete mode 100644 legacy/components/Grid/Row.tsx
 delete mode 100644 legacy/components/Grid/index.ts
 delete mode 100644 legacy/components/Grid/types.ts
 delete mode 100644 legacy/components/Icon/index.tsx
 delete mode 100644 legacy/components/Icon/utils.ts
 delete mode 100644 legacy/components/Input/index.tsx
 delete mode 100644 legacy/components/List/ListItem.tsx
 delete mode 100644 legacy/components/List/ListItemImage.tsx
 delete mode 100644 legacy/components/List/index.tsx
 delete mode 100644 legacy/components/LubyconUIKitProvider/index.tsx
 delete mode 100644 legacy/components/Modal/ModalBackdrop.tsx
 delete mode 100644 legacy/components/Modal/ModalContent.tsx
 delete mode 100644 legacy/components/Modal/ModalFooter.tsx
 delete mode 100644 legacy/components/Modal/ModalHeader.tsx
 delete mode 100644 legacy/components/Modal/ModalWindow.tsx
 delete mode 100644 legacy/components/Modal/index.tsx
 delete mode 100644 legacy/components/ProgressBar/index.tsx
 delete mode 100644 legacy/components/Radio/index.tsx
 delete mode 100644 legacy/components/Selection/index.tsx
 delete mode 100644 legacy/components/Shadow/index.tsx
 delete mode 100644 legacy/components/Snackbar/SnackbarBody.tsx
 delete mode 100644 legacy/components/Snackbar/index.tsx
 delete mode 100644 legacy/components/Snackbar/utils.ts
 delete mode 100644 legacy/components/Spacing/index.tsx
 delete mode 100644 legacy/components/Switch/index.tsx
 delete mode 100644 legacy/components/Table/TableBody.tsx
 delete mode 100644 legacy/components/Table/TableCell.tsx
 delete mode 100644 legacy/components/Table/TableHead.tsx
 delete mode 100644 legacy/components/Table/TableRow.tsx
 delete mode 100644 legacy/components/Table/index.tsx
 delete mode 100644 legacy/components/Table/props.ts
 delete mode 100644 legacy/components/Tabs/TabsContext.ts
 delete mode 100644 legacy/components/Tabs/TabsIndicator.tsx
 delete mode 100644 legacy/components/Tabs/TabsItem.tsx
 delete mode 100644 legacy/components/Tabs/index.tsx
 delete mode 100644 legacy/components/Tag/index.tsx
 delete mode 100644 legacy/components/Text/index.tsx
 delete mode 100644 legacy/components/Text/types.ts
 delete mode 100644 legacy/components/Tooltip/TooltipBody.tsx
 delete mode 100644 legacy/components/Tooltip/index.tsx
 delete mode 100644 legacy/components/Tooltip/types.ts
 delete mode 100644 legacy/components/Tooltip/utils.ts
 delete mode 100644 legacy/constants/colors.ts
 delete mode 100644 legacy/contexts/Modal.tsx
 delete mode 100644 legacy/contexts/Portal.tsx
 delete mode 100644 legacy/contexts/Snackbar.tsx
 delete mode 100644 legacy/hooks/useCombinedRefs.ts
 delete mode 100644 legacy/hooks/useResizeObserver.ts
 delete mode 100644 legacy/index.ts
 delete mode 100644 legacy/sass/components/_Accordion.scss
 delete mode 100644 legacy/sass/components/_Alert.scss
 delete mode 100644 legacy/sass/components/_Button.scss
 delete mode 100644 legacy/sass/components/_Card.scss
 delete mode 100644 legacy/sass/components/_Checkbox.scss
 delete mode 100644 legacy/sass/components/_Column.scss
 delete mode 100644 legacy/sass/components/_Container.scss
 delete mode 100644 legacy/sass/components/_Icon.scss
 delete mode 100644 legacy/sass/components/_Input.scss
 delete mode 100644 legacy/sass/components/_List.scss
 delete mode 100644 legacy/sass/components/_Modal.scss
 delete mode 100644 legacy/sass/components/_ProgressBar.scss
 delete mode 100644 legacy/sass/components/_Radio.scss
 delete mode 100644 legacy/sass/components/_Row.scss
 delete mode 100644 legacy/sass/components/_Selection.scss
 delete mode 100644 legacy/sass/components/_Snackbar.scss
 delete mode 100644 legacy/sass/components/_Spacing.scss
 delete mode 100644 legacy/sass/components/_Switch.scss
 delete mode 100644 legacy/sass/components/_Table.scss
 delete mode 100644 legacy/sass/components/_Tabs.scss
 delete mode 100644 legacy/sass/components/_Tag.scss
 delete mode 100644 legacy/sass/components/_Text.scss
 delete mode 100644 legacy/sass/components/_Tooltip.scss
 delete mode 100644 legacy/sass/components/_index.scss
 delete mode 100644 legacy/sass/functions/_index.scss
 delete mode 100644 legacy/sass/functions/_strip-unit.scss
 delete mode 100644 legacy/sass/index.scss
 delete mode 100644 legacy/sass/utils/_breakpoints.scss
 delete mode 100644 legacy/sass/utils/_colors.scss
 delete mode 100644 legacy/sass/utils/_font-weights.scss
 delete mode 100644 legacy/sass/utils/_font.scss
 delete mode 100644 legacy/sass/utils/_grid.scss
 delete mode 100644 legacy/sass/utils/_index.scss
 delete mode 100644 legacy/sass/utils/_scrollbar.scss
 delete mode 100644 legacy/sass/utils/_shadows.scss
 delete mode 100644 legacy/sass/utils/_typography.scss
 delete mode 100644 legacy/stories/Components/Accordion/index.stories.mdx
 delete mode 100644 legacy/stories/Components/Alert/data.ts
 delete mode 100644 legacy/stories/Components/Alert/index.stories.mdx
 delete mode 100644 legacy/stories/Components/Button/data.ts
 delete mode 100644 legacy/stories/Components/Button/index.stories.mdx
 delete mode 100644 legacy/stories/Components/Card/index.stories.mdx
 delete mode 100644 legacy/stories/Components/Checkbox/Components.tsx
 delete mode 100644 legacy/stories/Components/Checkbox/index.stories.mdx
 delete mode 100644 legacy/stories/Components/Grid/data.ts
 delete mode 100644 legacy/stories/Components/Grid/index.stories.mdx
 delete mode 100644 legacy/stories/Components/Icons/data.ts
 delete mode 100644 legacy/stories/Components/Icons/index.stories.mdx
 delete mode 100644 legacy/stories/Components/Input/Components.tsx
 delete mode 100644 legacy/stories/Components/Input/data.ts
 delete mode 100644 legacy/stories/Components/Input/index.stories.mdx
 delete mode 100644 legacy/stories/Components/List/Components.tsx
 delete mode 100644 legacy/stories/Components/List/index.stories.mdx
 delete mode 100644 legacy/stories/Components/Modal/Components.tsx
 delete mode 100644 legacy/stories/Components/Modal/index.stories.mdx
 delete mode 100644 legacy/stories/Components/ProgressBar/Components.tsx
 delete mode 100644 legacy/stories/Components/ProgressBar/data.ts
 delete mode 100644 legacy/stories/Components/ProgressBar/index.stories.mdx
 delete mode 100644 legacy/stories/Components/Radio/index.stories.mdx
 delete mode 100644 legacy/stories/Components/Selection/Components.tsx
 delete mode 100644 legacy/stories/Components/Selection/index.stories.mdx
 delete mode 100644 legacy/stories/Components/Snackbar/Components.tsx
 delete mode 100644 legacy/stories/Components/Snackbar/index.stories.mdx
 delete mode 100644 legacy/stories/Components/Switch/index.stories.mdx
 delete mode 100644 legacy/stories/Components/Table/data.ts
 delete mode 100644 legacy/stories/Components/Table/index.stories.mdx
 delete mode 100644 legacy/stories/Components/Tabs/Components.tsx
 delete mode 100644 legacy/stories/Components/Tabs/data.ts
 delete mode 100644 legacy/stories/Components/Tabs/index.stories.mdx
 delete mode 100644 legacy/stories/Components/Tag/data.ts
 delete mode 100644 legacy/stories/Components/Tag/index.stories.mdx
 delete mode 100644 legacy/stories/Components/Text/index.stories.mdx
 delete mode 100644 legacy/stories/Components/Tooltip/Components.tsx
 delete mode 100644 legacy/stories/Components/Tooltip/data.ts
 delete mode 100644 legacy/stories/Components/Tooltip/index.stories.mdx
 delete mode 100644 legacy/stories/Styles/Colors/data.ts
 delete mode 100644 legacy/stories/Styles/Colors/index.stories.mdx
 delete mode 100644 legacy/stories/Styles/Shadows/components.tsx
 delete mode 100644 legacy/stories/Styles/Shadows/index.stories.mdx
 delete mode 100644 legacy/stories/Styles/Typography/data.ts
 delete mode 100644 legacy/stories/Styles/Typography/index.stories.mdx
 delete mode 100644 legacy/stories/getting-started.stories.mdx
 delete mode 100644 legacy/stories/intro.stories.mdx
 delete mode 100644 legacy/stories/usage.stories.mdx
 delete mode 100644 legacy/template/codesandbox/package.json
 delete mode 100644 legacy/template/codesandbox/public/index.html
 delete mode 100644 legacy/template/codesandbox/src/App.tsx
 delete mode 100644 legacy/template/codesandbox/src/index.tsx
 delete mode 100644 legacy/template/codesandbox/tsconfig.json
 delete mode 100644 legacy/types/OverridableProps.ts
 delete mode 100644 legacy/types/icon.ts
 delete mode 100644 legacy/types/utils.ts
 delete mode 100644 legacy/utils/dom.ts
 delete mode 100644 legacy/utils/generateID.ts
 delete mode 100644 legacy/utils/index.ts
 delete mode 100644 legacy/utils/mediaQuery.ts
 delete mode 100644 legacy/utils/sleep.ts

diff --git a/legacy/components/Accordion/index.tsx b/legacy/components/Accordion/index.tsx
deleted file mode 100644
index eb7b400b..00000000
--- a/legacy/components/Accordion/index.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
-import { CombineElementProps } from 'src/types/utils';
-import classnames from 'classnames';
-import Icon from '../Icon';
-import Text from '../Text';
-import { useResizeObserver } from 'src/hooks/useResizeObserver';
-import { colors } from 'src/constants/colors';
-
-type Props = CombineElementProps<
-  'div',
-  {
-    label: string;
-    defaultOpen?: boolean;
-    onChange?: (state: boolean) => void;
-    onOpen?: () => void;
-    onClose?: () => void;
-  }
->;
-const Accordion = forwardRef<HTMLDivElement, Props>(function Accordion(
-  { label, className, children, defaultOpen = false, onChange, onOpen, onClose, ...props },
-  ref
-) {
-  const [open, setOpen] = useState(defaultOpen);
-  const contentRef = useRef<HTMLDivElement>(null);
-  const [bodyHeight, setBodyHeight] = useState(0);
-
-  const toggleContentOpen = () => {
-    setOpen((state) => !state);
-  };
-
-  const updateContentHeight = () =>
-    setBodyHeight(contentRef.current?.getBoundingClientRect().height ?? 0);
-
-  useResizeObserver(contentRef, updateContentHeight);
-
-  useEffect(() => {
-    onChange?.(open);
-  }, [open]);
-
-  useEffect(() => {
-    if (open === true) {
-      onOpen?.();
-    } else {
-      onClose?.();
-    }
-  }, [open]);
-
-  return (
-    <div
-      ref={ref}
-      className={classnames(
-        'lubycon-accordion',
-        {
-          'lubycon-accordion--opened': open,
-        },
-        className
-      )}
-      {...props}
-    >
-      <div className="lubycon-accordion__label" onClick={toggleContentOpen} role="button">
-        <Icon
-          name="chevron-down"
-          type="outline"
-          size={20}
-          className="lubycon-accordion__label__icon"
-          color={colors.gray90}
-        />
-        <Text typography="subtitle" className="lubycon-accordion__label__text">
-          {label}
-        </Text>
-      </div>
-      <div className="lubycon-accordion__cover" style={{ height: open ? bodyHeight : 0 }}>
-        <div
-          className="lubycon-accordion__cover__content"
-          style={{ opacity: open ? 1 : 0 }}
-          ref={contentRef}
-        >
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-});
-
-export default Accordion;
diff --git a/legacy/components/Alert/index.tsx b/legacy/components/Alert/index.tsx
deleted file mode 100644
index 37183623..00000000
--- a/legacy/components/Alert/index.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, { forwardRef } from 'react';
-import { colors, SemanticColor } from 'src/constants/colors';
-import classnames from 'classnames';
-import Text from '../Text';
-import Icon from '../Icon';
-import { CombineElementProps } from 'src/types/utils';
-import { IconName } from 'src/types/icon';
-
-interface AlertIcon {
-  icon: IconName;
-  color: string;
-}
-const alertIconMap: {
-  [key in SemanticColor]: AlertIcon;
-} = {
-  negative: {
-    icon: 'close-circle',
-    color: colors.red50,
-  },
-  notice: {
-    icon: 'alert-circle',
-    color: colors.yellow50,
-  },
-  informative: {
-    icon: 'information-circle',
-    color: colors.blue50,
-  },
-  positive: {
-    icon: 'checkmark-circle',
-    color: colors.green50,
-  },
-};
-
-type AlertProps = CombineElementProps<
-  'div',
-  {
-    type?: SemanticColor;
-    title?: string;
-  }
->;
-
-const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
-  { type = 'informative', title, children, className, ...props },
-  ref
-) {
-  const { icon: iconName, color: iconColor } = alertIconMap[type];
-
-  return (
-    <div
-      ref={ref}
-      className={classnames('lubycon-alert', `lubycon-alert--type-${type}`, className)}
-      {...props}
-    >
-      <Icon
-        className="lubycon-alert__icon"
-        name={iconName}
-        type="filled"
-        size={19}
-        color={iconColor}
-      ></Icon>
-      {title ? (
-        <Text fontWeight="bold" className="lubycon-alert__title">
-          {title}
-        </Text>
-      ) : null}
-      <Text className="lubycon-alert__description">{children}</Text>
-    </div>
-  );
-});
-
-export default Alert;
diff --git a/legacy/components/Button/index.tsx b/legacy/components/Button/index.tsx
deleted file mode 100644
index c0708999..00000000
--- a/legacy/components/Button/index.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React, { Ref, forwardRef } from 'react';
-import classnames from 'classnames';
-import { CombineElementProps } from 'src/types/utils';
-import Text from '../Text';
-import { SemanticColor } from 'src/constants/colors';
-
-interface ButtonBaseProps {
-  size?: 'small' | 'medium' | 'large';
-  type?: SemanticColor;
-  htmlType?: 'button' | 'submit' | 'reset';
-}
-type ButtonProps = CombineElementProps<'button', ButtonBaseProps>;
-
-const Button = (
-  {
-    size = 'small',
-    disabled,
-    style,
-    type,
-    htmlType,
-    onClick,
-    children,
-    className,
-    ...props
-  }: ButtonProps,
-  ref: Ref<HTMLButtonElement>
-) => {
-  return (
-    <button
-      className={classnames(
-        'lubycon-button',
-        `lubycon-button--${size}`,
-        `lubycon-button--type-${type ?? 'default'}`,
-        className
-      )}
-      disabled={disabled}
-      style={{ ...style }}
-      ref={ref}
-      onClick={onClick}
-      type={htmlType}
-      {...props}
-    >
-      <Text typography={size === 'large' ? 'p1' : 'p2'} fontWeight="bold">
-        {children}
-      </Text>
-    </button>
-  );
-};
-
-export default forwardRef(Button) as typeof Button;
diff --git a/legacy/components/Card/CardContent.tsx b/legacy/components/Card/CardContent.tsx
deleted file mode 100644
index 5db9e701..00000000
--- a/legacy/components/Card/CardContent.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import { ReactNode } from 'react';
-import classnames from 'classnames';
-import { CombineElementProps } from 'src/types/utils';
-
-type CardContentProps = CombineElementProps<
-  'div',
-  {
-    children?: ReactNode;
-  }
->;
-const CardContent = ({ children, className, ...props }: CardContentProps) => {
-  return (
-    <div className={classnames('lubycon-card__content', className)} {...props}>
-      {children}
-    </div>
-  );
-};
-
-export default CardContent;
diff --git a/legacy/components/Card/CardFooter.tsx b/legacy/components/Card/CardFooter.tsx
deleted file mode 100644
index e15313ec..00000000
--- a/legacy/components/Card/CardFooter.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import { ReactNode } from 'react';
-import classnames from 'classnames';
-import { CombineElementProps } from 'src/types/utils';
-
-type CardFooterProps = CombineElementProps<
-  'div',
-  {
-    children?: ReactNode;
-    justifyContent?: 'flex-start' | 'center' | 'flex-end';
-  }
->;
-const CardFooter = ({
-  children,
-  justifyContent = 'flex-start',
-  className,
-  ...props
-}: CardFooterProps) => {
-  return (
-    <div
-      className={classnames(
-        'lubycon-card__footer',
-        `lubycon-card__footer--align-${justifyContent}`,
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default CardFooter;
diff --git a/legacy/components/Card/CardHeader.tsx b/legacy/components/Card/CardHeader.tsx
deleted file mode 100644
index be64bfcf..00000000
--- a/legacy/components/Card/CardHeader.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { ReactNode, isValidElement } from 'react';
-import classnames from 'classnames';
-import Text from '../Text';
-import { CombineElementProps } from 'src/types/utils';
-
-type CardHeaderProps = CombineElementProps<
-  'div',
-  {
-    children?: ReactNode;
-  }
->;
-const CardHeader = ({ children, className, ...props }: CardHeaderProps) => {
-  return (
-    <div className={classnames('lubycon-card__header', className)} {...props}>
-      {isValidElement(children) ? children : <Text typography="h6">{children}</Text>}
-    </div>
-  );
-};
-
-export default CardHeader;
diff --git a/legacy/components/Card/CardImageContent.tsx b/legacy/components/Card/CardImageContent.tsx
deleted file mode 100644
index af2ebe12..00000000
--- a/legacy/components/Card/CardImageContent.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import { CombineElementProps } from 'src/types/utils';
-
-type CardImageContentProps = CombineElementProps<
-  'img',
-  {
-    src: string;
-    alt: string;
-  }
->;
-const CardImageContent = ({ className, ...props }: CardImageContentProps) => {
-  return (
-    <div className={classnames('lubycon-card__image-content', className)}>
-      <img {...props} />
-    </div>
-  );
-};
-
-export default CardImageContent;
diff --git a/legacy/components/Card/index.tsx b/legacy/components/Card/index.tsx
deleted file mode 100644
index 65aa0f41..00000000
--- a/legacy/components/Card/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, { forwardRef } from 'react';
-import { ReactNode } from 'react';
-import classnames from 'classnames';
-import { CombineElementProps } from 'src/types/utils';
-
-type Props = CombineElementProps<
-  'div',
-  {
-    children: ReactNode;
-  }
->;
-
-const Card = forwardRef<HTMLDivElement, Props>(function Card(
-  { children, className, ...props },
-  ref
-) {
-  return (
-    <div
-      ref={ref}
-      className={classnames('lubycon-card', 'lubycon-shadow--2', className)}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
-
-export default Card;
-export { default as CardHeader } from './CardHeader';
-export { default as CardContent } from './CardContent';
-export { default as CardImageContent } from './CardImageContent';
-export { default as CardFooter } from './CardFooter';
diff --git a/legacy/components/Checkbox/index.tsx b/legacy/components/Checkbox/index.tsx
deleted file mode 100644
index dfac6255..00000000
--- a/legacy/components/Checkbox/index.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, { forwardRef, Ref } from 'react';
-import { CombineElementProps } from 'src/types/utils';
-import classnames from 'classnames';
-import { generateID } from 'utils/index';
-import Text from '../Text';
-
-interface CheckboxBaseProps {
-  label?: string;
-  display?: 'block' | 'inline';
-}
-type CheckboxProps = Omit<CombineElementProps<'input', CheckboxBaseProps>, 'type'>;
-
-const Checkbox = (
-  { label, display = 'block', style, disabled, className, ...props }: CheckboxProps,
-  ref: Ref<HTMLInputElement>
-) => {
-  const id = generateID('checkbox');
-
-  return (
-    <label
-      role="checkbox"
-      className={classnames(
-        'lubycon-checkbox',
-        `lubycon-checkbox--display-${display}`,
-        {
-          'lubycon-checkbox--disabled': disabled,
-        },
-        className
-      )}
-      style={style}
-    >
-      <span className="lubycon-checkbox__input">
-        <input id={id} name="checkbox" ref={ref} type="checkbox" {...props} disabled={disabled} />
-        <span className="lubycon-checkbox__control">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="12"
-            height="10"
-            viewBox="0 0 12 10"
-            fill="none"
-            aria-hidden="true"
-            focusable="false"
-          >
-            <path fill="none" stroke="#ffffff" strokeWidth="2" d="M1 4.2 L4.51852 8 L11 1" />
-          </svg>
-        </span>
-      </span>
-      {label ? <Text>{label}</Text> : null}
-    </label>
-  );
-};
-
-export default forwardRef(Checkbox) as typeof Checkbox;
diff --git a/legacy/components/Container/index.tsx b/legacy/components/Container/index.tsx
deleted file mode 100644
index b1b264e4..00000000
--- a/legacy/components/Container/index.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-import classnames from 'classnames';
-interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
-  fluid?: boolean;
-}
-
-export default function Container({
-  children,
-  fluid = false,
-  className,
-  ...props
-}: ContainerProps): JSX.Element {
-  return (
-    <div
-      className={classnames(
-        'lubycon-container',
-        {
-          'lubycon-container--fluid': fluid === true,
-        },
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}
diff --git a/legacy/components/Grid/Column.tsx b/legacy/components/Grid/Column.tsx
deleted file mode 100644
index 121f145d..00000000
--- a/legacy/components/Grid/Column.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { ElementType, useMemo } from 'react';
-import { ColumnSize, ColumnResponsive, DEFAULT_ELEMENT } from './types';
-import { OverridableProps } from 'types/OverridableProps';
-import classNames from 'classnames';
-
-const sizes: ColumnResponsive[] = ['xl', 'lg', 'md', 'sm', 'xs'];
-
-type ColumnBaseProps = {
-  [key in ColumnResponsive]?: ColumnSize;
-};
-
-type ColumnProps<T extends ElementType = typeof DEFAULT_ELEMENT> = OverridableProps<
-  T,
-  ColumnBaseProps
->;
-
-const Column = <T extends React.ElementType = typeof DEFAULT_ELEMENT>(
-  { as, className, ...props }: ColumnProps<T>,
-  ref: React.Ref<any>
-) => {
-  const spanClasses = useMemo(
-    () =>
-      sizes.map((size) => {
-        const { [size]: sizeValue } = props;
-        return sizeValue ? `lubycon-grid__column--${size}--${sizeValue}` : '';
-      }),
-    []
-  );
-
-  const target = as ?? DEFAULT_ELEMENT;
-  const Component = target;
-
-  return (
-    <Component
-      ref={ref}
-      className={classNames(`lubycon-grid__column`, className, ...spanClasses)}
-      {...props}
-    />
-  );
-};
-
-export default React.forwardRef(Column) as typeof Column;
diff --git a/legacy/components/Grid/Row.tsx b/legacy/components/Grid/Row.tsx
deleted file mode 100644
index 8334ab26..00000000
--- a/legacy/components/Grid/Row.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { ElementType, Ref, forwardRef } from 'react';
-import { DEFAULT_ELEMENT } from './types';
-import classnames from 'classnames';
-import { OverridableProps } from 'src/types/OverridableProps';
-
-type BaseAlign = 'flex-start' | 'center' | 'flex-end';
-interface RowBaseProps {
-  direction?: 'column' | 'row' | 'row-reverse' | 'column-reverse';
-  justify?: BaseAlign | 'space-between' | 'space-around' | 'space-evenly';
-  alignItems?: BaseAlign | 'stretch' | 'baseline';
-}
-type RowProps<T extends ElementType = typeof DEFAULT_ELEMENT> = OverridableProps<T, RowBaseProps>;
-
-const Row = <T extends ElementType = typeof DEFAULT_ELEMENT>(
-  {
-    as,
-    direction = 'row',
-    justify = 'flex-start',
-    alignItems = 'flex-start',
-    className,
-    ...props
-  }: RowProps<T>,
-  ref: Ref<any>
-) => {
-  const Component = as ?? DEFAULT_ELEMENT;
-
-  return (
-    <Component
-      ref={ref}
-      className={classnames(
-        'lubycon-grid__row',
-        `lubycon-grid__row--direction-${direction}`,
-        `lubycon-grid__row--justify-${justify}`,
-        `lubycon-grid__row--align-items-${alignItems}`,
-        className
-      )}
-      {...props}
-    />
-  );
-};
-
-export default forwardRef(Row) as typeof Row;
diff --git a/legacy/components/Grid/index.ts b/legacy/components/Grid/index.ts
deleted file mode 100644
index 54468411..00000000
--- a/legacy/components/Grid/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as Row } from './Row';
-export { default as Column } from './Column';
diff --git a/legacy/components/Grid/types.ts b/legacy/components/Grid/types.ts
deleted file mode 100644
index d408b490..00000000
--- a/legacy/components/Grid/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const DEFAULT_ELEMENT = 'div' as const;
-
-type ColumnNumberSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-export type ColumnSize = 'auto' | ColumnNumberSize;
-export type ColumnResponsive = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
diff --git a/legacy/components/Icon/index.tsx b/legacy/components/Icon/index.tsx
deleted file mode 100644
index e8bc0aac..00000000
--- a/legacy/components/Icon/index.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import classnames from 'classnames';
-import { colors } from 'src/constants/colors';
-import { CombineElementProps } from 'src/types/utils';
-import { IconName } from 'src/types/icon';
-import { fetchIcon, getIconName, getIconType, getIconUrl } from './utils';
-
-const iconCache: Record<string, string> = {};
-
-export type IconType = 'outline' | 'filled' | 'sharp';
-type Props = CombineElementProps<
-  'span',
-  {
-    name: IconName;
-    size?: number;
-    type?: IconType;
-    color?: string;
-    className?: string;
-  }
->;
-
-/** ionicons의 아이콘을 사용합니다
- *  https://ionicons.com/
- */
-const Icon = ({
-  name,
-  size = 16,
-  type: propsType = 'outline',
-  color = colors.gray100,
-  className,
-  ...rest
-}: Props) => {
-  const type = getIconType(name, propsType);
-  const targetAttr = type === 'outline' ? 'stroke' : 'fill';
-  const iconName = getIconName(name, type);
-
-  const [iconHTML, setIconHTML] = useState<string | undefined>(iconCache[iconName]);
-  const [showFallbackIcon, setShowFallbackIcon] = useState(false);
-
-  useEffect(() => {
-    if (iconHTML != null) {
-      return;
-    }
-
-    let ignore = false;
-
-    (async function () {
-      try {
-        const data = await fetchIcon(iconName);
-        if (!ignore) {
-          setIconHTML(data);
-          iconCache[iconName] = data;
-        }
-      } catch {
-        setShowFallbackIcon(true);
-      }
-    })();
-
-    return () => {
-      ignore = true;
-    };
-  }, []);
-
-  return (
-    <span
-      className={classnames(
-        'lubycon-icon',
-        {
-          'lubycon-icon--outline': type === 'outline',
-          'lubycon-icon--filled': type === 'filled',
-        },
-        className
-      )}
-      style={{ width: size, height: size }}
-      {...rest}
-    >
-      <span
-        style={{ width: size, height: size, [targetAttr]: color, color }}
-        className={classnames('lubycon-icon__icon-body', {
-          'lubycon-icon__icon-body--hide-origin-icon': showFallbackIcon,
-        })}
-        aria-label={name}
-        aria-hidden={iconHTML == null}
-        dangerouslySetInnerHTML={iconHTML ? { __html: iconHTML } : undefined}
-        role="img"
-      />
-      <img
-        src={getIconUrl(iconName)}
-        className={classnames('lubycon-icon__fallback-icon', {
-          'lubycon-icon__fallback-icon--show-fallback-icon': showFallbackIcon,
-        })}
-        alt={name}
-      />
-    </span>
-  );
-};
-
-export default Icon;
diff --git a/legacy/components/Icon/utils.ts b/legacy/components/Icon/utils.ts
deleted file mode 100644
index 3d0fae74..00000000
--- a/legacy/components/Icon/utils.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { IconType } from '.';
-
-export async function fetchIcon(name: string) {
-  const response = await fetch(getIconUrl(name));
-  const body = await response.text();
-  if (response.ok) {
-    return body;
-  } else {
-    throw new Error(body);
-  }
-}
-
-export const getIconType = (iconName: string, iconType: IconType) => {
-  if (iconName === 'logo-apple-ar') {
-    return 'outline';
-  } else {
-    return /^logo-.+/.test(iconName) ? 'filled' : iconType;
-  }
-};
-
-export function getIconName(name: string, type: IconType) {
-  if (name === 'logo-apple-ar') {
-    return name;
-  }
-
-  return type === 'filled' ? name : `${name}-${type}`;
-}
-
-export function getIconUrl(name: string) {
-  return `https://icons.lubycon.io/${name}.svg`;
-}
diff --git a/legacy/components/Input/index.tsx b/legacy/components/Input/index.tsx
deleted file mode 100644
index 22716bb5..00000000
--- a/legacy/components/Input/index.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import React, { forwardRef, isValidElement, ReactNode, useMemo, useState } from 'react';
-import classnames from 'classnames';
-import { CombineElementProps } from 'src/types/utils';
-import Text from '../Text';
-
-export type TextInputType = 'text' | 'tel' | 'url' | 'email' | 'number' | 'password' | 'search';
-type Props = CombineElementProps<
-  'input',
-  {
-    label?: ReactNode;
-    type?: TextInputType;
-    left?: ReactNode;
-    right?: ReactNode;
-    hasError?: boolean;
-    description?: string;
-  }
->;
-const Input = forwardRef<HTMLInputElement, Props>(function Input(
-  {
-    style,
-    label,
-    className,
-    disabled,
-    type = 'text',
-    left,
-    right,
-    hasError,
-    description,
-    onFocus,
-    onBlur,
-    ...props
-  },
-  ref
-) {
-  const [isFocused, setFocus] = useState(false);
-  const hasLabel = label != null;
-  const hasDescription = description != null;
-  const hasLeftArea = left != null;
-  const hasRightArea = right != null;
-
-  const labelElement = useMemo(() => {
-    if (hasLabel) {
-      return (
-        <span className="lubycon-input__label">
-          {isValidElement(label) ? label : <Text>{label}</Text>}
-        </span>
-      );
-    }
-    return null;
-  }, [label]);
-
-  return (
-    <label
-      className={classnames(
-        'lubycon-input',
-        {
-          'lubycon-input--disabled': disabled,
-          'lubycon-input--focused': isFocused,
-          'lubycon-input--with-label': hasLabel,
-          'lubycon-input--with-description': hasDescription,
-          'lubycon-input--has-error': hasError,
-        },
-        className
-      )}
-      style={style}
-    >
-      {labelElement}
-      <div
-        className={classnames('lubycon-input__form', {
-          'lubycon-input__form--with-left-area': hasLeftArea,
-          'lubycon-input__form--with-right-area': hasRightArea,
-        })}
-      >
-        {left != null ? <span className="lubycon-input__form__left">{left}</span> : null}
-        <input
-          ref={ref}
-          className={classnames('lubycon-input__form__input-element', 'lubycon-typography-p1')}
-          type={type}
-          disabled={disabled}
-          onFocus={(e) => {
-            setFocus(true);
-            onFocus?.(e);
-          }}
-          onBlur={(e) => {
-            setFocus(false);
-            onBlur?.(e);
-          }}
-          {...props}
-        />
-        {right != null ? <span className="lubycon-input__form__right">{right}</span> : null}
-      </div>
-      {description ? (
-        <Text className="lubycon-input__description" typography="caption">
-          {description}
-        </Text>
-      ) : null}
-    </label>
-  );
-});
-
-export default Input;
diff --git a/legacy/components/List/ListItem.tsx b/legacy/components/List/ListItem.tsx
deleted file mode 100644
index 9b619197..00000000
--- a/legacy/components/List/ListItem.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { forwardRef, ReactNode } from 'react';
-import classnames from 'classnames';
-import { CombineElementProps } from 'src/types/utils';
-import Text from '../Text';
-
-type Props = Omit<
-  CombineElementProps<
-    'li',
-    {
-      left?: ReactNode;
-      right?: ReactNode;
-      title?: string;
-      content: string;
-      caption?: string;
-    }
-  >,
-  'children' | 'role'
->;
-const ListItem = forwardRef<HTMLLIElement, Props>(function ListItem(
-  { className, left, right, title, content, caption, onClick, ...props },
-  ref
-) {
-  const isClickable = onClick != null;
-
-  return (
-    <li
-      ref={ref}
-      className={classnames(
-        'lubycon-list__item',
-        {
-          'lubycon-list__item--clickable': isClickable,
-        },
-        className
-      )}
-      onClick={onClick}
-      role="listitem"
-      {...props}
-    >
-      {left ? <div className="lubycon-list__item__left">{left}</div> : null}
-      <div className="lubycon-list__item__center">
-        {title ? (
-          <Text className="lubycon-list__item__center__title" fontWeight="bold">
-            {title}
-          </Text>
-        ) : null}
-        <Text className="lubycon-list__item__center__content" typography="p2">
-          {content}
-        </Text>
-        {caption ? (
-          <Text className="lubycon-list__item__center__caption" typography="caption">
-            {caption}
-          </Text>
-        ) : null}
-      </div>
-      {right ? <div className="lubycon-list__item__right">{right}</div> : null}
-    </li>
-  );
-});
-
-export default ListItem;
diff --git a/legacy/components/List/ListItemImage.tsx b/legacy/components/List/ListItemImage.tsx
deleted file mode 100644
index a036214d..00000000
--- a/legacy/components/List/ListItemImage.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { ImgHTMLAttributes } from 'react';
-import classnames from 'classnames';
-
-const ListItemImage = ({
-  className,
-  src,
-  alt,
-  tabIndex,
-  ...props
-}: ImgHTMLAttributes<HTMLImageElement>) => (
-  <div
-    className={classnames('lubycon-list__item__image', className)}
-    style={{ backgroundImage: `url(${src})` }}
-    role="img"
-    aria-label={alt}
-    tabIndex={tabIndex}
-  >
-    <img src={src} alt={alt} tabIndex={-1} {...props} />
-  </div>
-);
-
-export default ListItemImage;
diff --git a/legacy/components/List/index.tsx b/legacy/components/List/index.tsx
deleted file mode 100644
index d7dd1f17..00000000
--- a/legacy/components/List/index.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, { HTMLAttributes, forwardRef } from 'react';
-import classnames from 'classnames';
-
-type Props = Omit<HTMLAttributes<HTMLUListElement>, 'role'>;
-const List = forwardRef<HTMLUListElement, Props>(function List(
-  { children, className, ...props },
-  ref
-) {
-  return (
-    <ul ref={ref} className={classnames('lubycon-list', className)} role="list" {...props}>
-      {children}
-    </ul>
-  );
-});
-
-export default List;
-export { default as ListItem } from './ListItem';
-export { default as ListItemImage } from './ListItemImage';
diff --git a/legacy/components/LubyconUIKitProvider/index.tsx b/legacy/components/LubyconUIKitProvider/index.tsx
deleted file mode 100644
index e08fea1e..00000000
--- a/legacy/components/LubyconUIKitProvider/index.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { ReactNode } from 'react';
-import { PortalProvider } from 'contexts/Portal';
-import { SnackbarProvider } from 'src/contexts/Snackbar';
-import { ModalProvider } from 'src/contexts/Modal';
-
-interface Props {
-  children: ReactNode;
-}
-
-function LubyconUIKitProvider({ children }: Props) {
-  return (
-    <PortalProvider>
-      <ModalProvider>
-        <SnackbarProvider>{children}</SnackbarProvider>
-      </ModalProvider>
-    </PortalProvider>
-  );
-}
-
-export default LubyconUIKitProvider;
diff --git a/legacy/components/Modal/ModalBackdrop.tsx b/legacy/components/Modal/ModalBackdrop.tsx
deleted file mode 100644
index 83397573..00000000
--- a/legacy/components/Modal/ModalBackdrop.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, { forwardRef } from 'react';
-import classnames from 'classnames';
-
-interface ModalBackdropProps {
-  onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
-}
-
-const ModalBackdrop = forwardRef<HTMLDivElement, ModalBackdropProps>(function ModalBackdrop(
-  { onClick },
-  ref
-) {
-  return (
-    <div
-      ref={ref}
-      className={classnames('lubycon-modal', 'lubycon-modal__overlay')}
-      aria-hidden={true}
-      tabIndex={-1}
-      onClick={onClick}
-    />
-  );
-});
-
-export default ModalBackdrop;
diff --git a/legacy/components/Modal/ModalContent.tsx b/legacy/components/Modal/ModalContent.tsx
deleted file mode 100644
index 077b31fc..00000000
--- a/legacy/components/Modal/ModalContent.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React, { ReactNode, isValidElement } from 'react';
-import classnames from 'classnames';
-import Text from 'components/Text';
-import { Typographys } from 'components/Text/types';
-import { CombineElementProps } from 'types/utils';
-
-type ModalContentProps = CombineElementProps<
-  'div',
-  {
-    size?: 'small' | 'medium';
-    children?: ReactNode;
-  }
->;
-
-const ModalContent = ({ children, size, className, ...props }: ModalContentProps) => {
-  const typography: Typographys = size === 'small' ? 'p2' : 'p1';
-
-  return (
-    <div className={classnames('lubycon-modal__content', className)} {...props}>
-      {isValidElement(children) ? children : <Text typography={typography}>{children}</Text>}
-    </div>
-  );
-};
-
-export default ModalContent;
diff --git a/legacy/components/Modal/ModalFooter.tsx b/legacy/components/Modal/ModalFooter.tsx
deleted file mode 100644
index 858f6ed2..00000000
--- a/legacy/components/Modal/ModalFooter.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { ReactNode } from 'react';
-import { CombineElementProps } from 'src/types/utils';
-import classnames from 'classnames';
-
-type ModalFooterProps = CombineElementProps<
-  'div',
-  {
-    children?: ReactNode;
-  }
->;
-
-const ModalFooter = ({ children, className, ...props }: ModalFooterProps) => {
-  return (
-    <div className={classnames('lubycon-modal__footer', className)} {...props}>
-      {children}
-    </div>
-  );
-};
-
-export default ModalFooter;
diff --git a/legacy/components/Modal/ModalHeader.tsx b/legacy/components/Modal/ModalHeader.tsx
deleted file mode 100644
index 0cda3d4c..00000000
--- a/legacy/components/Modal/ModalHeader.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React, { ReactNode, isValidElement } from 'react';
-import Text from 'components/Text';
-import { Typographys } from 'components/Text/types';
-import { CombineElementProps } from 'src/types/utils';
-import classnames from 'classnames';
-
-type ModalHeaderProps = CombineElementProps<
-  'div',
-  {
-    size?: 'small' | 'medium';
-    children?: ReactNode;
-  }
->;
-
-const ModalHeader = ({ size, children, className, ...props }: ModalHeaderProps) => {
-  const typography: Typographys = size === 'small' ? 'subtitle' : 'h6';
-
-  return (
-    <header className={classnames('lubycon-modal__title', className)} {...props}>
-      {isValidElement(children) ? children : <Text typography={typography}>{children}</Text>}
-    </header>
-  );
-};
-
-export default ModalHeader;
diff --git a/legacy/components/Modal/ModalWindow.tsx b/legacy/components/Modal/ModalWindow.tsx
deleted file mode 100644
index 1600507e..00000000
--- a/legacy/components/Modal/ModalWindow.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, { ReactNode } from 'react';
-import classnames from 'classnames';
-import { CombineElementProps } from 'src/types/utils';
-
-type ModalWindowProps = CombineElementProps<
-  'div',
-  {
-    children: ReactNode;
-    size: 'small' | 'medium';
-  }
->;
-
-const ModalWindow = ({ children, size, className, ...props }: ModalWindowProps) => {
-  return (
-    <div
-      className={classnames('lubycon-modal__window', `lubycon-modal__window--${size}`, className)}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default ModalWindow;
diff --git a/legacy/components/Modal/index.tsx b/legacy/components/Modal/index.tsx
deleted file mode 100644
index dd69a7cb..00000000
--- a/legacy/components/Modal/index.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import React, { ReactElement, cloneElement, useRef, useCallback, useEffect, Children } from 'react';
-import ModalBackdrop from './ModalBackdrop';
-import ModalWindow from './ModalWindow';
-import { generateID } from 'utils/index';
-import { animated, useTransition } from 'react-spring';
-import { CombineElementProps } from 'src/types/utils';
-
-export type ModalProps = CombineElementProps<
-  'div',
-  {
-    show: boolean;
-    size?: 'small' | 'medium';
-    children: ReactElement | ReactElement[];
-    onClose: () => void;
-    onCloseTransitionEnd?: () => void;
-  }
->;
-
-const Modal = ({
-  show,
-  size = 'small',
-  children,
-  onClose,
-  onCloseTransitionEnd,
-  className,
-  ...props
-}: ModalProps) => {
-  const backdropRef = useRef(null);
-  const backdropTransition = useTransition(show, null, {
-    from: { opacity: 0 },
-    enter: { opacity: 1 },
-    leave: { opacity: 0 },
-  });
-  const modalTransition = useTransition(show, null, {
-    from: { transform: 'translate(-50%, 100%)', opacity: 0 },
-    enter: { transform: 'translate(-50%, -50%)', opacity: 1 },
-    leave: { transform: 'translate(-50%, 100%)', opacity: 0 },
-    onDestroyed: () => onCloseTransitionEnd?.(),
-  });
-
-  const handleBackdropClick = useCallback(
-    (event: React.MouseEvent<HTMLDivElement>) => {
-      if (backdropRef.current == null) {
-        return;
-      } else if (event.target === backdropRef.current) {
-        onClose();
-      }
-    },
-    [onClose]
-  );
-
-  const onKeydown = (event: KeyboardEvent) => {
-    if (event.key === 'Escape') {
-      onClose();
-    }
-  };
-
-  useEffect(() => {
-    window.addEventListener('keydown', onKeydown);
-    return () => {
-      window.removeEventListener('keydown', onKeydown);
-    };
-  }, []);
-
-  return (
-    <div className="lubycon-modal" tabIndex={-1} aria-hidden={true}>
-      {backdropTransition.map(
-        ({ item: show, key, props }) =>
-          show && (
-            <animated.div key={key} style={props}>
-              <ModalBackdrop onClick={handleBackdropClick} ref={backdropRef} />
-            </animated.div>
-          )
-      )}
-      {modalTransition.map(
-        ({ item: show, key, props: animationProps }) =>
-          show && (
-            <animated.div
-              key={key}
-              style={animationProps}
-              className="lubycon-modal__window-wrapper"
-            >
-              <ModalWindow size={size} className={className} {...props}>
-                {Children.map(children, (child) => {
-                  return cloneElement(child, {
-                    key: generateID('lubycon-modal__children'),
-                    size: size,
-                  });
-                })}
-              </ModalWindow>
-            </animated.div>
-          )
-      )}
-    </div>
-  );
-};
-
-export default Modal;
-export { default as ModalHeader } from './ModalHeader';
-export { default as ModalContent } from './ModalContent';
-export { default as ModalFooter } from './ModalFooter';
diff --git a/legacy/components/ProgressBar/index.tsx b/legacy/components/ProgressBar/index.tsx
deleted file mode 100644
index e1efbfa3..00000000
--- a/legacy/components/ProgressBar/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { forwardRef } from 'react';
-import classnames from 'classnames';
-import { CombineElementProps } from 'src/types/utils';
-import Text from '../Text';
-
-const noop = (value: number) => value;
-
-export type ProgressBarLabelPosition = 'top' | 'bottom' | 'left' | 'right';
-type Props = CombineElementProps<
-  'div',
-  {
-    value: number;
-    max: number;
-    showLabel?: boolean;
-    labelPosition?: ProgressBarLabelPosition;
-    labelFormatter?: (value: number) => string;
-  }
->;
-const ProgressBar = forwardRef<HTMLDivElement, Props>(function ProgressBar(
-  { value, max, className, labelFormatter = noop, showLabel, labelPosition = 'top', ...props },
-  ref
-) {
-  const layoutDirection = ['top', 'bottom'].includes(labelPosition) ? 'column' : 'row';
-  const ratio = (value / max) * 100;
-
-  return (
-    <div
-      ref={ref}
-      className={classnames(
-        'lubycon-progress-bar',
-        `lubycon-progress-bar--direction-${layoutDirection}`,
-        className
-      )}
-      {...props}
-    >
-      {showLabel === true ? (
-        <Text
-          className={classnames(
-            'lubycon-progress-bar__label',
-            `lubycon-progress-bar__label--position-${labelPosition}`
-          )}
-          typography="caption"
-        >
-          {labelFormatter(value)}
-        </Text>
-      ) : null}
-      <div className="lubycon-progress-bar__bar">
-        <div className="lubycon-progress-bar__bar__fill" style={{ width: `${ratio}%` }} />
-      </div>
-    </div>
-  );
-});
-
-export default ProgressBar;
diff --git a/legacy/components/Radio/index.tsx b/legacy/components/Radio/index.tsx
deleted file mode 100644
index 9db0853a..00000000
--- a/legacy/components/Radio/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { forwardRef, Ref } from 'react';
-import { CombineElementProps } from 'src/types/utils';
-import classnames from 'classnames';
-import { generateID } from 'src/utils/generateID';
-import Text from '../Text';
-
-interface RadioBaseProps {
-  label?: string;
-  display?: 'block' | 'inline';
-}
-type RadioProps = Omit<CombineElementProps<'input', RadioBaseProps>, 'type'>;
-
-const Radio = (
-  { label, display = 'block', style, disabled, className, ...props }: RadioProps,
-  ref: Ref<HTMLInputElement>
-) => {
-  const id = generateID('radio');
-
-  return (
-    <span
-      className={classnames(
-        'lubycon-radio',
-        `lubycon-radio--display-${display}`,
-        {
-          'lubycon-radio--disabled': disabled,
-        },
-        className
-      )}
-      style={style}
-    >
-      <label htmlFor={id} className="lubycon-radio__label">
-        <input
-          className="lubycon-radio__input"
-          ref={ref}
-          type="radio"
-          disabled={disabled}
-          {...props}
-          id={id}
-        />
-        <div className="lubycon-radio__indicator"></div>
-        {label ? <Text>{label}</Text> : null}
-      </label>
-    </span>
-  );
-};
-
-export default forwardRef(Radio) as typeof Radio;
diff --git a/legacy/components/Selection/index.tsx b/legacy/components/Selection/index.tsx
deleted file mode 100644
index 0e68c52b..00000000
--- a/legacy/components/Selection/index.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, { forwardRef, Ref } from 'react';
-import { CombineElementProps } from 'src/types/utils';
-import classnames from 'classnames';
-import Icon from 'components/Icon';
-import { colors } from 'src/constants/colors';
-import { useState } from 'react';
-import { useEffect } from 'react';
-import { Typographys } from '../Text/types';
-
-interface SelectionBaseProps {
-  placeholder?: string;
-  size?: 'small' | 'medium' | 'large';
-}
-type SelectionProps = Omit<CombineElementProps<'select', SelectionBaseProps>, 'multiple'>;
-
-const Selection = (
-  {
-    placeholder = '옵션을 선택하세요',
-    disabled,
-    children,
-    value,
-    onChange,
-    size = 'medium',
-    className,
-    ...props
-  }: SelectionProps,
-  ref: Ref<HTMLSelectElement>
-) => {
-  const [innerValue, setInnerValue] = useState(value ?? '');
-  const iconColor = disabled ? colors.gray60 : colors.gray40;
-  const typography: Typographys = size === 'large' ? 'p1' : 'p2';
-
-  useEffect(() => setInnerValue(value ?? ''), [value]);
-
-  return (
-    <div
-      className={classnames(
-        'lubycon-selection',
-        `lubycon-selection--size-${size}`,
-        {
-          'lubycon-selection--disabled': disabled,
-          'lubycon-selection--empty': innerValue === '',
-        },
-        className
-      )}
-    >
-      <select
-        ref={ref}
-        multiple={false}
-        {...props}
-        value={innerValue}
-        className={classnames('lubycon-selection__select', `lubycon-typography--${typography}`)}
-        onChange={(e) => {
-          onChange?.(e);
-          setInnerValue(e.target.value ?? '');
-        }}
-        disabled={disabled}
-      >
-        <option value="" hidden={true} className="lubycon-selection__placeholder">
-          {placeholder}
-        </option>
-        {children}
-      </select>
-      <Icon name="chevron-down" type="outline" color={iconColor} />
-    </div>
-  );
-};
-
-export default forwardRef(Selection) as typeof Selection;
diff --git a/legacy/components/Shadow/index.tsx b/legacy/components/Shadow/index.tsx
deleted file mode 100644
index 8d54c2e9..00000000
--- a/legacy/components/Shadow/index.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import classnames from 'classnames';
-import { cloneElement, ReactElement } from 'react';
-
-interface Props {
-  level: 1 | 2 | 3 | 4 | 5;
-  children: ReactElement;
-}
-const Shadow = ({ level, children }: Props) => {
-  return cloneElement(children, {
-    className: classnames(children.props.classNames ?? '', `lubycon-shadow--${level}`),
-  });
-};
-
-export default Shadow;
diff --git a/legacy/components/Snackbar/SnackbarBody.tsx b/legacy/components/Snackbar/SnackbarBody.tsx
deleted file mode 100644
index 6a58db72..00000000
--- a/legacy/components/Snackbar/SnackbarBody.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { ReactNode, isValidElement, useMemo } from 'react';
-import classnames from 'classnames';
-import Text from 'components/Text';
-import Button from '../Button';
-
-interface Props {
-  message: string;
-  button?: ReactNode;
-  onClick?: () => void;
-}
-
-const SnackbarBody = ({ message, button: buttonProp, onClick }: Props) => {
-  const button = useMemo(
-    () =>
-      isValidElement(buttonProp) ? buttonProp : <Button onClick={onClick}>{buttonProp}</Button>,
-    [buttonProp]
-  );
-
-  return (
-    <div className={classnames('lubycon-snackbar__body', 'lubycon-shadow--3')}>
-      <Text typography="p2" className="lubycon-snackbar__text">
-        {message}
-      </Text>
-      <div className="lubycon-snackbar__body__buttons">{buttonProp == null ? null : button}</div>
-    </div>
-  );
-};
-
-export default SnackbarBody;
diff --git a/legacy/components/Snackbar/index.tsx b/legacy/components/Snackbar/index.tsx
deleted file mode 100644
index 47b852ce..00000000
--- a/legacy/components/Snackbar/index.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import React, { useEffect, ReactNode, useMemo } from 'react';
-import { animated, useTransition } from 'react-spring';
-import classnames from 'classnames';
-import SnackbarBody from './SnackbarBody';
-import { CombineElementProps } from 'src/types/utils';
-import { getTranslateAnimation } from './utils';
-
-export type SnackbarAlign = 'left' | 'center' | 'right';
-
-export type SnackbarProps = Omit<
-  CombineElementProps<
-    'div',
-    {
-      show: boolean;
-      message: string;
-      button?: ReactNode;
-      autoHideDuration?: number;
-      onClose?: () => void;
-      onShow?: () => void;
-      onHide?: () => void;
-      onClick?: () => void;
-      align?: SnackbarAlign;
-    }
-  >,
-  'children'
->;
-
-const Snackbar = ({
-  show,
-  message,
-  button,
-  autoHideDuration,
-  onClose,
-  onShow,
-  onHide,
-  onClick,
-  className,
-  style,
-  align = 'left',
-  ...rest
-}: SnackbarProps) => {
-  const translateAnimation = useMemo(() => getTranslateAnimation(align), [align]);
-  const transition = useTransition(show, null, {
-    from: {
-      opacity: 0,
-      transform: translateAnimation.from,
-      height: 60,
-    },
-    enter: [
-      { height: 60 },
-      {
-        opacity: 1,
-        transform: translateAnimation.to,
-      },
-    ],
-    leave: [
-      {
-        opacity: 0,
-        transform: translateAnimation.from,
-      },
-      { height: 0 },
-    ],
-    onStart: () => {
-      onShow?.();
-    },
-    onDestroyed: () => {
-      onHide?.();
-    },
-  });
-
-  useEffect(() => {
-    if (autoHideDuration && onClose == undefined) {
-      throw Error('autoHideDuration prop은 onClose prop을 함께 제공해야만 합니다.');
-    }
-  }, [autoHideDuration]);
-
-  useEffect(() => {
-    let timer: NodeJS.Timeout;
-    if (autoHideDuration != null && show === true) {
-      timer = setTimeout(() => {
-        onClose?.();
-      }, autoHideDuration);
-    }
-
-    return () => clearTimeout(timer);
-  }, []);
-
-  return (
-    <>
-      {transition.map(({ item, key, props }) => {
-        return item ? (
-          <animated.div
-            key={key}
-            className={classnames('lubycon-snackbar', className)}
-            style={{
-              ...style,
-              ...props,
-            }}
-            {...rest}
-          >
-            <SnackbarBody message={message} button={button} onClick={onClick} />
-          </animated.div>
-        ) : null;
-      })}
-    </>
-  );
-};
-
-export default Snackbar;
diff --git a/legacy/components/Snackbar/utils.ts b/legacy/components/Snackbar/utils.ts
deleted file mode 100644
index 1c48ba27..00000000
--- a/legacy/components/Snackbar/utils.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { SnackbarAlign } from '.';
-
-export const getTranslateAnimation = (align: SnackbarAlign) => {
-  switch (align) {
-    case 'left':
-      return {
-        from: 'translateX(-100%)',
-        to: 'translateX(0)',
-      };
-    case 'center':
-      return {
-        from: 'translateY(100%)',
-        to: 'translateY(0)',
-      };
-    case 'right':
-      return {
-        from: 'translateX(100%)',
-        to: 'translateX(0)',
-      };
-  }
-};
diff --git a/legacy/components/Spacing/index.tsx b/legacy/components/Spacing/index.tsx
deleted file mode 100644
index 94b2ed46..00000000
--- a/legacy/components/Spacing/index.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-
-interface Props {
-  size: number;
-}
-const Spacing = ({ size }: Props) => {
-  return <div className="lubycon-spacing" style={{ height: size }} />;
-};
-
-export default Spacing;
diff --git a/legacy/components/Switch/index.tsx b/legacy/components/Switch/index.tsx
deleted file mode 100644
index a8e24401..00000000
--- a/legacy/components/Switch/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, { forwardRef, Ref } from 'react';
-import { CombineElementProps } from 'src/types/utils';
-import classnames from 'classnames';
-import { generateID } from 'src/utils/generateID';
-import Text from '../Text';
-
-interface SwitchBaseProps {
-  label?: string;
-  display?: 'block' | 'inline';
-}
-type SwitchProps = Omit<CombineElementProps<'input', SwitchBaseProps>, 'type'>;
-
-const Switch = (
-  { label, display = 'block', style, className, ...props }: SwitchProps,
-  ref: Ref<HTMLInputElement>
-) => {
-  const id = generateID('switch');
-
-  return (
-    <label
-      role="switch"
-      className={classnames('lubycon-switch', `lubycon-switch--display-${display}`, className)}
-      style={style}
-    >
-      <input className="lubycon-switch__input" ref={ref} type="checkbox" {...props} id={id} />
-      <span className="lubycon-switch__slider" />
-      <span className="lubycon-switch__label">{label ? <Text as="span">{label}</Text> : null}</span>
-    </label>
-  );
-};
-
-export default forwardRef(Switch) as typeof Switch;
diff --git a/legacy/components/Table/TableBody.tsx b/legacy/components/Table/TableBody.tsx
deleted file mode 100644
index 7846867f..00000000
--- a/legacy/components/Table/TableBody.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import { TableProps } from './props';
-
-const TableBody = ({ children, className, ...props }: TableProps<HTMLTableSectionElement>) => {
-  return (
-    <tbody
-      className={classnames('lubycon-table__body', 'lubycon-font-weight--regular', className)}
-      {...props}
-    >
-      {children}
-    </tbody>
-  );
-};
-
-export default TableBody;
diff --git a/legacy/components/Table/TableCell.tsx b/legacy/components/Table/TableCell.tsx
deleted file mode 100644
index 39690481..00000000
--- a/legacy/components/Table/TableCell.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import { TableProps } from './props';
-import { useTableHeadContext } from './TableHead';
-import { Combine } from 'src/types/utils';
-
-type TableCellProps = Combine<
-  TableProps<HTMLTableHeaderCellElement | HTMLTableDataCellElement>,
-  {
-    as?: 'th' | 'td';
-  }
->;
-
-const TableCell = ({ children, align = 'left', className, as, ...props }: TableCellProps) => {
-  const { variant } = useTableHeadContext();
-  const isHeadCell = variant === 'head' ? 'th' : 'td';
-  const Component = as ?? isHeadCell;
-
-  return (
-    <Component
-      className={classnames('lubycon-table__cell', `lubycon-table--align-${align}`, className)}
-      {...props}
-    >
-      {children}
-    </Component>
-  );
-};
-
-export default TableCell;
diff --git a/legacy/components/Table/TableHead.tsx b/legacy/components/Table/TableHead.tsx
deleted file mode 100644
index 08688b6f..00000000
--- a/legacy/components/Table/TableHead.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React, { createContext, useContext } from 'react';
-import classnames from 'classnames';
-import { TableProps } from './props';
-
-const TableHeadContext = createContext({ variant: '' });
-
-const TableHead = ({ children, className, ...props }: TableProps<HTMLTableSectionElement>) => {
-  return (
-    <TableHeadContext.Provider value={{ variant: 'head' }}>
-      <thead className={classnames('lubycon-table__head', className)} {...props}>
-        {children}
-      </thead>
-    </TableHeadContext.Provider>
-  );
-};
-
-export function useTableHeadContext() {
-  return useContext(TableHeadContext);
-}
-
-export default TableHead;
diff --git a/legacy/components/Table/TableRow.tsx b/legacy/components/Table/TableRow.tsx
deleted file mode 100644
index 4812ae8e..00000000
--- a/legacy/components/Table/TableRow.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import { TableProps } from './props';
-
-const TableRow = ({ children, className, ...props }: TableProps<HTMLTableRowElement>) => {
-  return (
-    <tr className={classnames('lubycon-table__row', className)} {...props}>
-      {children}
-    </tr>
-  );
-};
-
-export default TableRow;
diff --git a/legacy/components/Table/index.tsx b/legacy/components/Table/index.tsx
deleted file mode 100644
index cd2224cc..00000000
--- a/legacy/components/Table/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import { TableProps } from './props';
-
-const Table = ({ children, className, ...props }: TableProps<HTMLTableElement>) => {
-  return (
-    <table className={classnames('lubycon-table', 'lubycon-shadow--2', className)} {...props}>
-      {children}
-    </table>
-  );
-};
-
-export default Table;
-export { default as TableHead } from './TableHead';
-export { default as TableBody } from './TableBody';
-export { default as TableRow } from './TableRow';
-export { default as TableCell } from './TableCell';
diff --git a/legacy/components/Table/props.ts b/legacy/components/Table/props.ts
deleted file mode 100644
index a2a8116d..00000000
--- a/legacy/components/Table/props.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { Combine } from 'src/types/utils';
-
-export type TableProps<T> = Combine<
-  Omit<HTMLAttributes<T>, 'align' | 'bgcolor'>,
-  {
-    align?: 'left' | 'center' | 'right';
-  }
->;
diff --git a/legacy/components/Tabs/TabsContext.ts b/legacy/components/Tabs/TabsContext.ts
deleted file mode 100644
index 3ffd7bb1..00000000
--- a/legacy/components/Tabs/TabsContext.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { createContext } from 'react';
-
-export interface TabsIndicatorPosition {
-  width: number;
-  left: number;
-}
-
-export interface TabsContextValue {
-  onSelect: (value: string) => void;
-  indicatorPosition: TabsIndicatorPosition | null;
-  setIndicatorPosition: (indicator: TabsIndicatorPosition) => void;
-  selectedValue: string;
-}
-
-const TabsContext = createContext<TabsContextValue>({
-  selectedValue: '',
-  onSelect: () => null,
-  indicatorPosition: null,
-  setIndicatorPosition: () => null,
-});
-
-export default TabsContext;
diff --git a/legacy/components/Tabs/TabsIndicator.tsx b/legacy/components/Tabs/TabsIndicator.tsx
deleted file mode 100644
index 9d3d01ec..00000000
--- a/legacy/components/Tabs/TabsIndicator.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, { memo } from 'react';
-import { animated, useSpring, config } from 'react-spring';
-import { TabsIndicatorPosition } from './TabsContext';
-
-const TabsIndicator = memo(({ width, left }: TabsIndicatorPosition) => {
-  const animation = useSpring({
-    width,
-    left,
-    config: config.gentle,
-  });
-
-  return (
-    <animated.div
-      className="lubycon-tabs__indicator"
-      style={{
-        width: animation.width,
-        transform: animation.left.interpolate((value) => `translateX(${value}px)`),
-      }}
-    />
-  );
-});
-
-export default TabsIndicator;
diff --git a/legacy/components/Tabs/TabsItem.tsx b/legacy/components/Tabs/TabsItem.tsx
deleted file mode 100644
index 0f220c3d..00000000
--- a/legacy/components/Tabs/TabsItem.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { ReactNode, useRef, HTMLProps, Ref, forwardRef, useContext, useEffect } from 'react';
-import classnames from 'classnames';
-import useCombinedRefs from 'src/hooks/useCombinedRefs';
-import TabsContext from './TabsContext';
-import Text from 'components/Text';
-
-export interface Props
-  extends Omit<HTMLProps<HTMLDivElement>, 'role' | 'aria-disabled' | 'aria-selected'> {
-  children: ReactNode;
-  disabled?: boolean;
-  value?: string;
-}
-
-function TabItem(
-  { children, disabled = false, value = String(children), className, onClick, ...props }: Props,
-  forwardedRef: Ref<HTMLDivElement>
-) {
-  const { selectedValue, onSelect, indicatorPosition, setIndicatorPosition } = useContext(
-    TabsContext
-  );
-  const isSelected = selectedValue === value;
-  const internalRef = useRef<HTMLDivElement | null>(null);
-
-  const ref = useCombinedRefs(internalRef, forwardedRef);
-
-  useEffect(() => {
-    if (isSelected) {
-      const width = internalRef.current!.clientWidth;
-      const left = internalRef.current!.offsetLeft;
-      setIndicatorPosition({ width, left });
-    }
-  }, [isSelected, value, setIndicatorPosition]);
-
-  return (
-    <div
-      ref={(element) => {
-        ref(element);
-
-        if (indicatorPosition == null && element != null && isSelected) {
-          const width = element.clientWidth;
-          const left = element.offsetLeft;
-
-          setIndicatorPosition({ width, left });
-        }
-      }}
-      className={classnames(
-        'lubycon-tabs__item',
-        {
-          'lubycon-tabs__item--selected': isSelected,
-          'lubycon-tabs__item--disabled': disabled,
-        },
-        className
-      )}
-      role="tab"
-      aria-disabled={disabled}
-      aria-selected={isSelected}
-      {...props}
-      onClick={(event) => {
-        if (disabled) {
-          event.preventDefault();
-          return;
-        }
-
-        onClick?.(event);
-        onSelect(value);
-      }}
-    >
-      <Text className="lubycon-tabs__item__text" typography="p2">
-        {children}
-      </Text>
-    </div>
-  );
-}
-
-export default forwardRef(TabItem);
diff --git a/legacy/components/Tabs/index.tsx b/legacy/components/Tabs/index.tsx
deleted file mode 100644
index 4ff56145..00000000
--- a/legacy/components/Tabs/index.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React, { HTMLProps, ReactElement, useEffect, useRef, useState } from 'react';
-import classnames from 'classnames';
-import TabsContext, { TabsIndicatorPosition } from './TabsContext';
-import TabsIndicator from './TabsIndicator';
-import { useSpring, config } from 'react-spring';
-
-interface Props extends Omit<HTMLProps<HTMLDivElement>, 'onChange' | 'role'> {
-  children: ReactElement | ReactElement[];
-  onChange?: (value: string) => void;
-  selectedValue: string;
-}
-
-const Tabs = ({ selectedValue, onChange, children, className, ...props }: Props) => {
-  const [indicatorPosition, setIndicatorPosition] = useState<TabsIndicatorPosition | null>(null);
-  const tabRef = useRef<HTMLDivElement>(null);
-
-  const [, setScrollLeft] = useSpring(() => {
-    return {
-      scrollLeft: tabRef.current?.scrollLeft ?? 0,
-      config: config.gentle,
-      onFrame: ({ scrollLeft }: { scrollLeft: number }) => {
-        if (tabRef.current == null) {
-          return;
-        }
-
-        tabRef.current.scrollTo({
-          left: scrollLeft,
-        });
-      },
-    };
-  });
-
-  useEffect(() => {
-    if (indicatorPosition == null || tabRef.current == null) {
-      return;
-    }
-
-    setScrollLeft({
-      immediate: true,
-      scrollLeft: tabRef.current.scrollLeft,
-    });
-
-    const scrollLeft = Math.min(
-      Math.max(
-        indicatorPosition.left + indicatorPosition.width / 2 - tabRef.current.clientWidth / 2,
-        0
-      ),
-      tabRef.current.scrollWidth - window.innerWidth
-    );
-
-    setScrollLeft({
-      immediate: false,
-      scrollLeft,
-    });
-  }, [indicatorPosition, setScrollLeft]);
-
-  return (
-    <TabsContext.Provider
-      value={{
-        selectedValue,
-        onSelect: (value) => {
-          onChange?.(value);
-        },
-        indicatorPosition,
-        setIndicatorPosition,
-      }}
-    >
-      <div className={classnames('lubycon-tabs', className)} {...props}>
-        {children}
-        {indicatorPosition != null ? <TabsIndicator {...indicatorPosition} /> : null}
-      </div>
-    </TabsContext.Provider>
-  );
-};
-
-export default Tabs;
-export { default as TabsItem } from './TabsItem';
diff --git a/legacy/components/Tag/index.tsx b/legacy/components/Tag/index.tsx
deleted file mode 100644
index b4af16b1..00000000
--- a/legacy/components/Tag/index.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, { isValidElement, ReactText } from 'react';
-import { colors, SemanticColor } from 'src/constants/colors';
-import { CombineElementProps } from 'src/types/utils';
-import classnames from 'classnames';
-import Text from '../Text';
-import Icon from '../Icon';
-
-export type TagType = SemanticColor | 'default';
-
-type Props = CombineElementProps<
-  'div',
-  {
-    type?: TagType;
-    onDelete?: (label: ReactText) => void;
-    children: ReactText;
-  }
->;
-
-const Tag = ({
-  type = 'default',
-  className,
-  children: label,
-  onClick,
-  onDelete,
-  ...props
-}: Props) => {
-  const isClickable = onClick != null || onDelete != null;
-  return (
-    <div
-      className={classnames(
-        'lubycon-tag',
-        `lubycon-tag--type-${type}`,
-        {
-          'lubycon-tag--clickable': isClickable,
-        },
-        className
-      )}
-      onClick={onClick}
-      {...props}
-    >
-      <span className="lubycon-tag__label">
-        {isValidElement(label) ? label : <Text typography="p2">{label}</Text>}
-      </span>
-      {onDelete != null ? (
-        <a className="lubycon-tag__delete-button" onClick={() => onDelete?.(label)}>
-          <Icon name="close" type="filled" color={colors.gray70} />
-        </a>
-      ) : null}
-    </div>
-  );
-};
-
-export default Tag;
diff --git a/legacy/components/Text/index.tsx b/legacy/components/Text/index.tsx
deleted file mode 100644
index 14e33530..00000000
--- a/legacy/components/Text/index.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { ElementType, Ref, forwardRef } from 'react';
-import { DEFAULT_ELEMENT, FontWeights, Typographys } from './types';
-import { OverridableProps } from 'types/OverridableProps';
-import classnames from 'classnames';
-
-interface TextBaseProps {
-  typography?: Typographys;
-  fontWeight?: FontWeights;
-}
-type TextProps<T extends ElementType = typeof DEFAULT_ELEMENT> = OverridableProps<T, TextBaseProps>;
-
-const Text = <T extends ElementType = typeof DEFAULT_ELEMENT>(
-  { typography = 'p1', fontWeight = 'regular', as, className, ...props }: TextProps<T>,
-  ref: Ref<any>
-) => {
-  const target = as ?? DEFAULT_ELEMENT;
-  const Component = target;
-  return (
-    <Component
-      ref={ref}
-      className={classnames(
-        'lubycon-text',
-        {
-          [`lubycon-typography-${typography}`]: typography != null,
-          [`lubycon-text--font-weight-${fontWeight}`]: fontWeight != null,
-        },
-        className
-      )}
-      {...props}
-    />
-  );
-};
-
-export default forwardRef(Text) as typeof Text;
diff --git a/legacy/components/Text/types.ts b/legacy/components/Text/types.ts
deleted file mode 100644
index 51269a77..00000000
--- a/legacy/components/Text/types.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export const typographys = [
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'subtitle',
-  'p1',
-  'p2',
-  'caption',
-] as const;
-export type Typographys = typeof typographys[number];
-
-export const fontWeights = ['light', 'regular', 'bold', 'black'] as const;
-export type FontWeights = typeof fontWeights[number];
-
-export const DEFAULT_ELEMENT = 'span' as const;
diff --git a/legacy/components/Tooltip/TooltipBody.tsx b/legacy/components/Tooltip/TooltipBody.tsx
deleted file mode 100644
index 74d440bc..00000000
--- a/legacy/components/Tooltip/TooltipBody.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, { forwardRef, Ref } from 'react';
-import classnames from 'classnames';
-import Text from '../Text';
-import { CombineElementProps } from 'src/types/utils';
-
-export type TooltipArrowDirection =
-  | 'top-left'
-  | 'top-center'
-  | 'top-right'
-  | 'left'
-  | 'right'
-  | 'bottom-left'
-  | 'bottom-center'
-  | 'bottom-right';
-
-type Props = CombineElementProps<
-  'div',
-  {
-    children: string;
-    arrowDirection: TooltipArrowDirection;
-  }
->;
-const TooltipBody = forwardRef(function TooltipBody(
-  { children, arrowDirection, className, ...props }: Props,
-  forwardedRef: Ref<HTMLDivElement>
-) {
-  return (
-    <div
-      ref={forwardedRef}
-      className={classnames(
-        'lubycon-tooltip__body',
-        `lubycon-tooltip__body--arrow-${arrowDirection}`,
-        className
-      )}
-      tabIndex={-1}
-      {...props}
-    >
-      <Text typography="caption">{children}</Text>
-    </div>
-  );
-});
-
-export default TooltipBody;
diff --git a/legacy/components/Tooltip/index.tsx b/legacy/components/Tooltip/index.tsx
deleted file mode 100644
index 3822d807..00000000
--- a/legacy/components/Tooltip/index.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, { cloneElement, ReactElement, useState, useMemo, useCallback } from 'react';
-import { animated, useSpring } from 'react-spring';
-import { Portal } from 'src/contexts/Portal';
-import { CombineElementProps } from 'src/types/utils';
-import TooltipBody from './TooltipBody';
-import { OffsetPosition, TooltipElementSize, TooltipPosition } from './types';
-import { getArrowDirection, getTooltipPosition } from './utils';
-
-type Props = CombineElementProps<
-  'div',
-  {
-    show: boolean;
-    children: ReactElement;
-    message: string;
-    position?: TooltipPosition;
-  }
->;
-
-const Tooltip = ({ show, children, message, position = 'top-center', ...props }: Props) => {
-  const [tooltipSize, setTooltipSize] = useState<TooltipElementSize>({ width: 0, height: 0 });
-  const [tooltipOffset, setTooltipOffset] = useState<OffsetPosition>({
-    top: -1,
-    left: -1,
-  });
-  const arrowDirection = useMemo(() => getArrowDirection(position), [position]);
-
-  const childRef = useCallback(
-    (childElement: HTMLElement | null) => {
-      if (childElement !== null) {
-        setTooltipOffset(getTooltipPosition(childElement, tooltipSize, position));
-      }
-    },
-    [tooltipSize, position]
-  );
-
-  const tooltipRef = useCallback((node: HTMLDivElement | null) => {
-    if (node !== null) {
-      setTooltipSize({
-        width: node.clientWidth,
-        height: node.clientHeight,
-      });
-    }
-  }, []);
-
-  const animation = useSpring({
-    visibility: show ? 'visible' : 'hidden',
-    opacity: show ? 1 : 0,
-  });
-
-  return (
-    <>
-      {cloneElement(children, {
-        ref: childRef,
-      })}
-      <Portal>
-        <animated.div
-          className="lubycon-tooltip__positioner"
-          style={{ ...tooltipOffset, ...animation }}
-        >
-          <TooltipBody ref={tooltipRef} arrowDirection={arrowDirection} {...props}>
-            {message}
-          </TooltipBody>
-        </animated.div>
-      </Portal>
-    </>
-  );
-};
-
-export default Tooltip;
diff --git a/legacy/components/Tooltip/types.ts b/legacy/components/Tooltip/types.ts
deleted file mode 100644
index 02173e8b..00000000
--- a/legacy/components/Tooltip/types.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export type TooltipPosition =
-  | 'top-left'
-  | 'top-center'
-  | 'top-right'
-  | 'left'
-  | 'right'
-  | 'bottom-left'
-  | 'bottom-center'
-  | 'bottom-right';
-
-export interface OffsetPosition {
-  top: number;
-  left: number;
-}
-
-export interface TooltipElementSize {
-  width: number;
-  height: number;
-}
diff --git a/legacy/components/Tooltip/utils.ts b/legacy/components/Tooltip/utils.ts
deleted file mode 100644
index 6c6b0007..00000000
--- a/legacy/components/Tooltip/utils.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import { getAbsoluteOffset } from 'utils/dom';
-import { TooltipArrowDirection } from './TooltipBody';
-import { OffsetPosition, TooltipElementSize, TooltipPosition } from './types';
-
-export function getArrowDirection(position: TooltipPosition): TooltipArrowDirection {
-  switch (position) {
-    case 'top-left':
-      return 'bottom-left';
-    case 'top-center':
-      return 'bottom-center';
-    case 'top-right':
-      return 'bottom-right';
-    case 'bottom-left':
-      return 'top-left';
-    case 'bottom-center':
-      return 'top-center';
-    case 'bottom-right':
-      return 'top-right';
-    case 'left':
-      return 'right';
-    case 'right':
-      return 'left';
-    default:
-      return position;
-  }
-}
-
-export function getTooltipPosition(
-  childElement: HTMLElement,
-  tooltipSize: TooltipElementSize,
-  position: TooltipPosition
-): OffsetPosition {
-  const arrowHeight = 8;
-  const spacing = 8;
-  const { clientWidth, clientHeight } = childElement;
-
-  const { top: offsetTop, left: offsetLeft } = getAbsoluteOffset(childElement);
-  const offsetRight = offsetLeft + clientWidth;
-  const offsetBottom = offsetTop + clientHeight;
-
-  const { width: tooltipWidth, height: tooltipHeight } = tooltipSize;
-
-  const topPosition = offsetTop - tooltipHeight - arrowHeight - spacing;
-  const bottomPosition = offsetBottom + arrowHeight + spacing;
-  const horizontalCenterOfChildren = offsetLeft + clientWidth / 2 - tooltipWidth / 2;
-  const verticalCenterOfChildren = offsetTop + clientHeight / 2 - tooltipHeight / 2;
-
-  switch (position) {
-    case 'top-left':
-      return {
-        top: topPosition,
-        left: offsetLeft,
-      };
-    case 'top-center':
-      return {
-        top: topPosition,
-        left: horizontalCenterOfChildren,
-      };
-    case 'top-right':
-      return {
-        top: topPosition,
-        left: offsetRight - tooltipWidth,
-      };
-    case 'bottom-left':
-      return {
-        top: bottomPosition,
-        left: offsetLeft,
-      };
-    case 'bottom-center':
-      return {
-        top: bottomPosition,
-        left: horizontalCenterOfChildren,
-      };
-    case 'bottom-right':
-      return {
-        top: bottomPosition,
-        left: offsetLeft + clientWidth - tooltipWidth,
-      };
-    case 'left':
-      return {
-        top: verticalCenterOfChildren,
-        left: offsetLeft - tooltipWidth - arrowHeight - spacing,
-      };
-    case 'right':
-      return {
-        top: verticalCenterOfChildren,
-        left: offsetRight + arrowHeight + spacing,
-      };
-
-    default:
-      return {
-        top: offsetTop - arrowHeight - spacing,
-        left: offsetLeft,
-      };
-  }
-}
diff --git a/legacy/constants/colors.ts b/legacy/constants/colors.ts
deleted file mode 100644
index 7dbcbe2b..00000000
--- a/legacy/constants/colors.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-export const colors = {
-  green40: '#dff6e7',
-  green50: '#13bc4c',
-  green60: '#00a438',
-  blue40: '#e6effe',
-  blue50: '#135ce9',
-  blue60: '#013cad',
-  red40: '#fae7e8',
-  red50: '#cb121c',
-  red60: '#9b0b13',
-  yellow40: '#fdf5ce',
-  yellow50: '#f0ca08',
-  yellow60: '#aa8f00',
-  gray100: '#1b1b1c',
-  gray90: '#2a2a2c',
-  gray80: '#4c4d53',
-  gray70: '#76777d',
-  gray60: '#8e9095',
-  gray50: '#b5b6b9',
-  gray40: '#d0d1d3',
-  gray30: '#e3e4e5',
-  gray20: '#f3f4f5',
-  gray10: '#fcfcfd',
-  white: '#ffffff',
-  black: '#000000',
-} as const;
-
-export type SemanticColor = 'positive' | 'informative' | 'negative' | 'notice';
-
-export type ColorProperty = keyof typeof colors;
-
-export type Colors = typeof colors[keyof typeof colors];
diff --git a/legacy/contexts/Modal.tsx b/legacy/contexts/Modal.tsx
deleted file mode 100644
index 2cb84f12..00000000
--- a/legacy/contexts/Modal.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React, { useContext, ReactNode, createContext, useState, useCallback } from 'react';
-import Modal, { ModalContent, ModalFooter, ModalHeader, ModalProps } from 'components/Modal';
-import { generateID } from 'src/utils';
-import { Portal } from './Portal';
-
-interface ModalHookOption {
-  header?: ReactNode;
-  content?: ReactNode;
-  footer?: ReactNode;
-}
-
-type ModalOptions = ModalHookOption & Omit<ModalProps, 'show' | 'children' | 'onClose'>;
-type ModalStackOptions = ModalHookOption & Omit<ModalProps, 'children' | 'onClose'>;
-
-interface ModalGlobalState {
-  openModal: (option: ModalOptions) => string;
-  closeModal: (modalId: string) => void;
-}
-interface ModalProviderProps {
-  children: ReactNode;
-}
-
-const ModalContext = createContext<ModalGlobalState>({
-  openModal: () => '',
-  closeModal: () => {},
-});
-
-export function ModalProvider({ children }: ModalProviderProps) {
-  const [openedModalStack, setOpenedModalStack] = useState<ModalStackOptions[]>([]);
-
-  const openModal = useCallback(
-    ({ id = generateID('lubycon-modal'), ...option }: ModalOptions) => {
-      const modal = { id, show: true, ...option };
-      setOpenedModalStack([...openedModalStack, modal]);
-      return id;
-    },
-    [openedModalStack]
-  );
-
-  const closeModal = useCallback((closedModalId: string) => {
-    setOpenedModalStack((stack) =>
-      stack.map((modal) => {
-        return modal.id === closedModalId
-          ? {
-              ...modal,
-              show: false,
-            }
-          : modal;
-      })
-    );
-  }, []);
-
-  const removeModalFromStack = (closedModalId: string) => {
-    setOpenedModalStack((stack) => stack.filter((modal) => modal.id !== closedModalId));
-  };
-
-  return (
-    <ModalContext.Provider
-      value={{
-        openModal,
-        closeModal,
-      }}
-    >
-      {children}
-      <Portal>
-        {openedModalStack.map(({ id, show, title, content, footer, ...modalProps }) => (
-          <Modal
-            show={show}
-            key={id}
-            onClose={() => closeModal(id ?? '')}
-            onCloseTransitionEnd={() => removeModalFromStack(id ?? '')}
-            {...modalProps}
-          >
-            <ModalHeader>{title}</ModalHeader>
-            <ModalContent>{content}</ModalContent>
-            <ModalFooter>{footer}</ModalFooter>
-          </Modal>
-        ))}
-      </Portal>
-    </ModalContext.Provider>
-  );
-}
-
-export function useModal() {
-  return useContext(ModalContext);
-}
diff --git a/legacy/contexts/Portal.tsx b/legacy/contexts/Portal.tsx
deleted file mode 100644
index d4cb704e..00000000
--- a/legacy/contexts/Portal.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { createContext, ReactNode, useContext, useState } from 'react';
-import { createPortal } from 'react-dom';
-
-export const PortalContext = createContext<HTMLDivElement | null>(null);
-
-interface PortalProviderProps {
-  children: ReactNode;
-}
-
-export function PortalProvider({ children }: PortalProviderProps) {
-  const [portalRef, setPortalRef] = useState<HTMLDivElement | null>(null);
-
-  return (
-    <PortalContext.Provider value={portalRef}>
-      {children}
-      <div
-        id="lubycon-portal-container"
-        ref={(element) => {
-          if (portalRef !== null || element === null) {
-            return;
-          }
-
-          setPortalRef(element);
-        }}
-      />
-    </PortalContext.Provider>
-  );
-}
-
-interface PortalConsumerProps {
-  children: ReactNode;
-}
-export function Portal({ children }: PortalConsumerProps) {
-  const portalRef = useContext(PortalContext);
-  return portalRef == null ? null : createPortal(children, portalRef);
-}
diff --git a/legacy/contexts/Snackbar.tsx b/legacy/contexts/Snackbar.tsx
deleted file mode 100644
index c7d829f2..00000000
--- a/legacy/contexts/Snackbar.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import React, { ReactNode, createContext, useState, useCallback, useContext } from 'react';
-import classnames from 'classnames';
-import Snackbar, { SnackbarAlign, SnackbarProps } from 'components/Snackbar';
-import { generateID } from 'src/utils';
-import { Portal } from './Portal';
-import { isMatchedSM } from 'src/utils/mediaQuery';
-
-type SnackbarOptions = Omit<SnackbarProps, 'show'>;
-
-const aligns: SnackbarAlign[] = ['left', 'center', 'right'];
-
-interface SnackbarGlobalState {
-  openSnackbar: (option: SnackbarOptions) => string;
-  closeSnackbar: (toastId: string) => void;
-}
-const SnackbarContext = createContext<SnackbarGlobalState>({
-  openSnackbar: () => '',
-  closeSnackbar: () => {},
-});
-
-interface SnackbarProviderProps {
-  children: ReactNode;
-  maxStack?: number;
-}
-export function SnackbarProvider({ children, maxStack = 3 }: SnackbarProviderProps) {
-  const [openedSnackbarQueue, setOpenedSnackbarQueue] = useState<SnackbarProps[]>([]);
-
-  const openSnackbar = useCallback(
-    ({
-      id = generateID('lubycon-snackbar'),
-      align: rawAlign = 'left',
-      ...option
-    }: SnackbarOptions) => {
-      const align = isMatchedSM() ? 'center' : rawAlign;
-      const snackbar = { id, align, show: true, ...option };
-      const [, ...rest] = openedSnackbarQueue;
-
-      if (openedSnackbarQueue.length >= maxStack) {
-        setOpenedSnackbarQueue([...rest, snackbar]);
-      } else {
-        setOpenedSnackbarQueue([...openedSnackbarQueue, snackbar]);
-      }
-      return id;
-    },
-    [openedSnackbarQueue]
-  );
-
-  const closeSnackbar = useCallback((closeSnackbarId?: string) => {
-    setOpenedSnackbarQueue((queue) =>
-      queue.map((snackbar) => {
-        return snackbar.id === closeSnackbarId
-          ? {
-              ...snackbar,
-              show: false,
-            }
-          : snackbar;
-      })
-    );
-  }, []);
-
-  const removeSnackbarFromQueue = useCallback(
-    (closedSnackbarId: string) => {
-      setOpenedSnackbarQueue(
-        openedSnackbarQueue.filter((snackbar) => snackbar.id !== closedSnackbarId)
-      );
-    },
-    [openedSnackbarQueue]
-  );
-
-  return (
-    <SnackbarContext.Provider
-      value={{
-        openSnackbar,
-        closeSnackbar,
-      }}
-    >
-      {children}
-      <Portal>
-        {aligns.map((align) => (
-          <div
-            key={align}
-            className={classnames(
-              'lubycon-snackbar__context-container',
-              `lubycon-snackbar__context-container--align-${align}`
-            )}
-          >
-            {openedSnackbarQueue
-              .filter((snackbar) => snackbar.align === align)
-              .map(({ id, show, onHide, autoHideDuration = 3000, ...snackbarProps }) => (
-                <Snackbar
-                  key={id}
-                  show={show}
-                  autoHideDuration={autoHideDuration}
-                  onHide={() => {
-                    removeSnackbarFromQueue(id ?? '');
-                    onHide?.();
-                  }}
-                  align={align}
-                  onClose={() => closeSnackbar(id ?? '')}
-                  {...snackbarProps}
-                />
-              ))}
-          </div>
-        ))}
-      </Portal>
-    </SnackbarContext.Provider>
-  );
-}
-
-export function useSnackbar() {
-  return useContext(SnackbarContext);
-}
diff --git a/legacy/hooks/useCombinedRefs.ts b/legacy/hooks/useCombinedRefs.ts
deleted file mode 100644
index 14f529e9..00000000
--- a/legacy/hooks/useCombinedRefs.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Ref, useCallback, MutableRefObject, RefCallback } from 'react';
-
-export default function useCombinedRefs<T>(
-  ...refs: Array<Ref<T> | RefCallback<T>>
-): RefCallback<T> {
-  return useCallback(
-    (value: T) => {
-      for (const ref of refs) {
-        if (typeof ref === 'function') {
-          ref(value);
-        } else if (ref != null) {
-          (ref as MutableRefObject<T>).current = value;
-        }
-      }
-    },
-    [refs]
-  );
-}
diff --git a/legacy/hooks/useResizeObserver.ts b/legacy/hooks/useResizeObserver.ts
deleted file mode 100644
index c24bbbb5..00000000
--- a/legacy/hooks/useResizeObserver.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { RefObject, useEffect, useRef } from 'react';
-import ResizeObserver from 'resize-observer-polyfill';
-
-export function useResizeObserver(
-  ref: RefObject<HTMLElement>,
-  resizeCallback: (arg: ResizeObserverEntry['contentRect']) => void
-) {
-  const resizeObsesrverRef = useRef<ResizeObserver | null>(null);
-  const onResize = useRef(resizeCallback);
-
-  useEffect(() => {
-    if (ref.current === null) {
-      return;
-    }
-
-    resizeObsesrverRef.current = new ResizeObserver((entries) => {
-      onResize.current(entries[0].contentRect);
-    });
-    resizeObsesrverRef.current.observe(ref.current);
-
-    return () => resizeObsesrverRef.current?.disconnect();
-  }, [ref]);
-}
diff --git a/legacy/index.ts b/legacy/index.ts
deleted file mode 100644
index 08b972a1..00000000
--- a/legacy/index.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-export { default as Alert } from './components/Alert';
-export { default as Button } from './components/Button';
-export { default as Checkbox } from './components/Checkbox';
-export { Row, Column } from './components/Grid';
-export { default as Container } from './components/Container';
-export { default as Radio } from './components/Radio';
-export { default as Selection } from './components/Selection';
-export { default as Switch } from './components/Switch';
-export { default as Text } from './components/Text';
-export { default as LubyconUIKitProvider } from './components/LubyconUIKitProvider';
-export { default as Tooltip } from './components/Tooltip';
-export { default as Tabs, TabsItem } from './components/Tabs';
-export {
-  default as Card,
-  CardHeader,
-  CardContent,
-  CardImageContent,
-  CardFooter,
-} from './components/Card';
-export { default as Snackbar } from './components/Snackbar';
-export { default as List, ListItem, ListItemImage } from './components/List';
-export { default as Input } from './components/Input';
-export { default as ProgressBar } from './components/ProgressBar';
-export { default as Accordion } from './components/Accordion';
-export { default as Tag } from './components/Tag';
-export { default as Modal, ModalHeader, ModalContent, ModalFooter } from './components/Modal';
-export { default as Table, TableHead, TableBody, TableRow, TableCell } from './components/Table';
-export { Portal } from './contexts/Portal';
-export { useSnackbar } from './contexts/Snackbar';
-export { colors } from './constants/colors';
-export { default as Icon } from './components/Icon';
-export { default as Shadow } from './components/Shadow';
-export { default as Spacing } from './components/Spacing';
diff --git a/legacy/sass/components/_Accordion.scss b/legacy/sass/components/_Accordion.scss
deleted file mode 100644
index b31ac4f3..00000000
--- a/legacy/sass/components/_Accordion.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-$animation-duration: 0.3s ease-in-out;
-
-.lubycon-accordion {
-  border: {
-    top: 1px solid get-color('gray20');
-    bottom: 1px solid get-color('gray20');
-  }
-  & + & {
-    border-top: none;
-  }
-  &--opened {
-    .lubycon-accordion__label__icon {
-      transform: rotate(180deg);
-    }
-  }
-  &__label {
-    display: flex;
-    align-items: center;
-    padding: 16px;
-    user-select: none;
-    cursor: pointer;
-    transition: background-color 0.1s ease-in-out;
-    &:hover {
-      background-color: get-color('gray10');
-    }
-    &__icon {
-      margin-right: 16px;
-      transition: transform $animation-duration;
-    }
-    &__text {
-      color: get-color('gray90');
-    }
-  }
-  &__cover {
-    transition: height $animation-duration;
-    overflow: hidden;
-    &__content {
-      padding: 8px 16px 16px 50px;
-      transition: opacity $animation-duration;
-    }
-  }
-}
diff --git a/legacy/sass/components/_Alert.scss b/legacy/sass/components/_Alert.scss
deleted file mode 100644
index 09b9e091..00000000
--- a/legacy/sass/components/_Alert.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-$alert-horizental-padding: 14px;
-
-.lubycon-alert {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  border-radius: 4px;
-  padding: 10px $alert-horizental-padding;
-
-  &--type-negative {
-    background-color: get-color('red40');
-  }
-  &--type-notice {
-    background-color: get-color('yellow40');
-  }
-  &--type-informative {
-    background-color: get-color('blue40');
-  }
-  &--type-positive {
-    background-color: get-color('green40');
-  }
-
-  &__title {
-    margin-right: 8px;
-  }
-  &__icon {
-    margin-right: $alert-horizental-padding;
-  }
-}
diff --git a/legacy/sass/components/_Button.scss b/legacy/sass/components/_Button.scss
deleted file mode 100644
index 0bddbafc..00000000
--- a/legacy/sass/components/_Button.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@mixin hoverAndActiveStyle($color) {
-  &:hover,
-  &:active {
-    background-color: get-color($color);
-  }
-}
-
-.lubycon-button {
-  font: inherit;
-  text-align: inherit;
-  outline: none;
-  border: 0;
-  margin: 0;
-  background-color: transparent;
-  border-radius: 4px;
-  color: get-color('gray90');
-  cursor: pointer;
-  -webkit-font-smoothing: antialiased;
-  transition: background-color 0.2s ease-in-out;
-
-  @include hoverAndActiveStyle('gray20');
-
-  &--small {
-    padding: 4px 16px;
-  }
-  &--medium {
-    padding: 8px 16px;
-  }
-  &--large {
-    padding: 12px 32px;
-    border-radius: 8px;
-  }
-
-  &--type-informative {
-    background-color: get-color('blue50');
-    color: get-color('white');
-    @include hoverAndActiveStyle('blue60');
-  }
-  &--type-positive {
-    background-color: get-color('green50');
-    color: get-color('white');
-    @include hoverAndActiveStyle('green60');
-  }
-  &--type-notice {
-    background-color: get-color('yellow50');
-    color: get-color('white');
-    @include hoverAndActiveStyle('yellow60');
-  }
-  &--type-negative {
-    background-color: get-color('red50');
-    color: get-color('white');
-    @include hoverAndActiveStyle('red60');
-  }
-
-  &:disabled {
-    color: get-color('gray60');
-    background-color: get-color('gray40');
-    cursor: not-allowed;
-  }
-}
diff --git a/legacy/sass/components/_Card.scss b/legacy/sass/components/_Card.scss
deleted file mode 100644
index fd35c694..00000000
--- a/legacy/sass/components/_Card.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-$card-padding: 16px 20px;
-$default-radius: 4px;
-
-.lubycon-card {
-  display: flex;
-  flex-direction: column;
-  border-radius: $default-radius;
-  overflow: hidden;
-  background-color: get-color('white');
-  &__header {
-    order: 0;
-    padding: $card-padding;
-    border-bottom: 1px solid get-color('gray30');
-    overflow: hidden;
-  }
-  &__content {
-    order: 1;
-    padding: $card-padding;
-  }
-  &__image-content {
-    img {
-      width: 100%;
-      vertical-align: top;
-    }
-  }
-  &__footer {
-    display: flex;
-    order: 2;
-    padding: $card-padding;
-    &--align-flex-start {
-      justify-content: flex-start;
-    }
-    &--align-center {
-      justify-content: center;
-    }
-    &--align-flex-end {
-      justify-content: flex-end;
-    }
-  }
-}
diff --git a/legacy/sass/components/_Checkbox.scss b/legacy/sass/components/_Checkbox.scss
deleted file mode 100644
index d6886e69..00000000
--- a/legacy/sass/components/_Checkbox.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-$box-size: 16px;
-
-.lubycon-checkbox {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-
-  &:hover:not(&--disabled) {
-    .lubycon-checkbox__control {
-      border-color: get-color('green50');
-    }
-  }
-
-  &__input {
-    display: grid;
-    grid-template-areas: 'checkbox';
-
-    > input,
-    > span {
-      grid-area: checkbox;
-    }
-    > input {
-      opacity: 0;
-      width: $box-size;
-      height: $box-size;
-      padding: 0;
-      margin: 0;
-      cursor: pointer;
-    }
-  }
-
-  &__control {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: $box-size;
-    height: $box-size;
-    border-radius: 2px;
-    box-sizing: border-box;
-    border: 1px solid get-color('gray40');
-    margin-right: 8px;
-
-    > svg {
-      transition: transform 0.1s;
-      transform: scale(0);
-    }
-  }
-
-  &__input input:checked + &__control svg {
-    transform: scale(1);
-  }
-  &__input input:checked + &__control {
-    background-color: get-color('green50');
-    border-color: get-color('green50');
-  }
-
-  &--display-inline {
-    display: inline-flex;
-  }
-
-  &--disabled {
-    cursor: not-allowed;
-    color: get-color('gray50');
-
-    input {
-      cursor: not-allowed;
-    }
-
-    .lubycon-checkbox__input > input:checked + .lubycon-checkbox__control {
-      border-color: get-color('gray40');
-      background-color: get-color('gray40');
-    }
-  }
-}
diff --git a/legacy/sass/components/_Column.scss b/legacy/sass/components/_Column.scss
deleted file mode 100644
index 69919308..00000000
--- a/legacy/sass/components/_Column.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@use 'sass:math';
-
-.lubycon-grid__column {
-  position: relative;
-  padding-right: math.div($grid-gutter, 2);
-  padding-left: math.div($grid-gutter, 2);
-  flex-basis: 0;
-  flex-grow: 1;
-  min-width: 0;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-@each $breakpoint, $size in $breakpoints {
-  .lubycon-grid__column--#{$breakpoint}--auto {
-    flex: 0 0 auto;
-  }
-
-  @for $i from 1 through $max-columns {
-    .lubycon-grid__column--#{$breakpoint}--#{$i} {
-      @include media-breakpoint($breakpoint) {
-        flex: 0 0 percentage(math.div($i, $max-columns));
-        width: percentage(math.div($i, $max-columns));
-      }
-    }
-  }
-}
diff --git a/legacy/sass/components/_Container.scss b/legacy/sass/components/_Container.scss
deleted file mode 100644
index 4e7deb91..00000000
--- a/legacy/sass/components/_Container.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.lubycon-container {
-  width: 100%;
-  max-width: none;
-  margin: 0 auto;
-  &--fluid {
-    max-width: auto;
-  }
-  @include media-breakpoint(sm) {
-    max-width: 1200px;
-  }
-}
diff --git a/legacy/sass/components/_Icon.scss b/legacy/sass/components/_Icon.scss
deleted file mode 100644
index fb346a53..00000000
--- a/legacy/sass/components/_Icon.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.lubycon-icon {
-  display: inline-block;
-  &--outline {
-    path {
-      fill: transparent;
-    }
-  }
-  &--filled {
-    path {
-      stroke: transparent;
-    }
-  }
-  &__icon-body {
-    &--hide-origin-icon {
-      display: none;
-    }
-  }
-  &__fallback-icon {
-    display: none;
-    vertical-align: top;
-    &--show-fallback-icon {
-      display: inline-block;
-    }
-  }
-  svg {
-    width: 100%;
-    vertical-align: top;
-  }
-}
diff --git a/legacy/sass/components/_Input.scss b/legacy/sass/components/_Input.scss
deleted file mode 100644
index bbf66222..00000000
--- a/legacy/sass/components/_Input.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-$label-position: 34px;
-$description-position: 30px;
-
-.lubycon-input {
-  position: relative;
-  display: inline-block;
-  background-color: get-color('gray20');
-  padding: 10px;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  transition: border 0.1s ease-in-out, background-color 0.1s ease-in-out;
-  box-sizing: border-box;
-
-  &--disabled {
-    background-color: get-color('gray30');
-    .lubycon-input__form__input-element {
-      cursor: not-allowed;
-      &::placeholder {
-        color: get-color('gray60');
-      }
-    }
-    .lubycon-input__label {
-      color: get-color('gray60');
-    }
-  }
-
-  &--focused {
-    border-color: get-color('gray100');
-    background-color: get-color('gray10');
-  }
-
-  &--with-label {
-    margin-top: $label-position;
-  }
-  &--with-description {
-    margin-bottom: $description-position;
-  }
-  &--has-error {
-    border-color: get-color('red50');
-    .lubycon-input__label {
-      color: get-color('red50');
-    }
-    .lubycon-input__description {
-      color: get-color('red50');
-    }
-  }
-
-  &__label {
-    position: absolute;
-    left: 0;
-    top: -$label-position;
-    transition: color 0.1s ease-in-out;
-  }
-
-  &__form {
-    display: flex;
-    align-items: center;
-    &__input-element {
-      flex-grow: 1;
-      background-color: transparent;
-      border: none;
-      outline: none;
-      line-height: 16px;
-      margin-top: 3px;
-      &::placeholder {
-        color: get-color('gray70');
-      }
-    }
-    &__left,
-    &__right {
-      display: inline-flex;
-    }
-  }
-
-  &__description {
-    position: absolute;
-    left: 0;
-    bottom: -$description-position;
-    color: get-color('gray70');
-  }
-}
diff --git a/legacy/sass/components/_List.scss b/legacy/sass/components/_List.scss
deleted file mode 100644
index 76cd2a37..00000000
--- a/legacy/sass/components/_List.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-.lubycon-list {
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.lubycon-list__item {
-  display: flex;
-  align-items: center;
-  list-style: none;
-  margin: 0;
-  padding: 13px 0;
-  & + & {
-    border-top: 1px solid get-color('gray20');
-  }
-  &--clickable {
-    transition: background-color 0.1s ease-in-out;
-    cursor: pointer;
-    &:hover {
-      background-color: get-color('gray10');
-    }
-    &:active {
-      background-color: get-color('gray20');
-    }
-  }
-
-  &__left {
-    padding-left: 12px;
-    width: auto;
-    flex: 0 0 auto;
-  }
-  &__center {
-    padding: 0 16px;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    &__title {
-      color: get-color('gray90');
-    }
-    &__content {
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
-      display: -webkit-box;
-      overflow: hidden;
-    }
-    &__caption {
-      margin-top: 4px;
-      color: get-color('gray60');
-    }
-  }
-  &__right {
-    padding-right: 8px;
-  }
-
-  &__image {
-    position: relative;
-    width: 48px;
-    height: 48px;
-    border-radius: 4px;
-    overflow: hidden;
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: 50% 50%;
-    > img {
-      display: none;
-    }
-  }
-}
diff --git a/legacy/sass/components/_Modal.scss b/legacy/sass/components/_Modal.scss
deleted file mode 100644
index 16cd0476..00000000
--- a/legacy/sass/components/_Modal.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-.lubycon-modal {
-  &__overlay {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: get-color('gray100');
-    opacity: 0.5;
-    z-index: 1000;
-  }
-  &__window-wrapper {
-    position: fixed;
-    left: 50%;
-    top: 50%;
-    z-index: 1001;
-  }
-  &__window {
-    background-color: get-color('gray10');
-    border-radius: 4px;
-    box-sizing: border-box;
-    &--small {
-      width: 280px;
-      padding: 16px 20px;
-    }
-    &--medium {
-      width: 400px;
-      padding: 20px 24px;
-    }
-  }
-  &__title {
-    color: get-color('gray100');
-    margin-top: 0;
-    margin-bottom: 12px;
-  }
-  &__content {
-    color: get-color('gray70');
-    margin-bottom: 24px;
-    white-space: pre-wrap;
-  }
-  &__footer {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-}
diff --git a/legacy/sass/components/_ProgressBar.scss b/legacy/sass/components/_ProgressBar.scss
deleted file mode 100644
index 9a524ea9..00000000
--- a/legacy/sass/components/_ProgressBar.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-$label-vertical-space: 4px;
-$label-horizontal-space: 12px;
-
-.lubycon-progress-bar {
-  display: flex;
-
-  &--direction-row {
-    flex-direction: row;
-    align-items: center;
-  }
-  &--direction-column {
-    flex-direction: column;
-  }
-
-  &__label {
-    text-align: center;
-    &--position-top {
-      margin-bottom: $label-vertical-space;
-      order: 0;
-    }
-    &--position-bottom {
-      margin-top: $label-vertical-space;
-      order: 2;
-    }
-    &--position-right {
-      margin-left: $label-horizontal-space;
-      order: 2;
-    }
-    &--position-left {
-      margin-right: $label-horizontal-space;
-      order: 0;
-    }
-  }
-  &__bar {
-    display: flex;
-    flex-grow: 1;
-    order: 1;
-    width: 100%;
-    background-color: get-color('gray30');
-    height: 4px;
-    border-radius: 100px;
-    overflow: hidden;
-    &__fill {
-      transition: width 0.3s ease-out;
-      background-color: get-color('blue50');
-    }
-  }
-}
diff --git a/legacy/sass/components/_Radio.scss b/legacy/sass/components/_Radio.scss
deleted file mode 100644
index ebf64ab8..00000000
--- a/legacy/sass/components/_Radio.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-$indicator-size: 16px;
-
-.lubycon-radio {
-  position: relative;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-
-  label {
-    cursor: pointer;
-  }
-
-  .lubycon-radio__indicator {
-    position: relative;
-    width: $indicator-size;
-    height: $indicator-size;
-    border: 1px solid get-color('gray40');
-    margin-right: 10px;
-    border-radius: 50%;
-    overflow: hidden;
-    &::before {
-      content: '';
-      width: $indicator-size / 2;
-      height: $indicator-size / 2;
-      position: absolute;
-      background-color: #ffffff;
-      border-radius: 50%;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%) scale(0);
-      transition: transform 0.3s ease-in-out;
-    }
-  }
-
-  .lubycon-radio__label {
-    display: flex;
-    align-items: center;
-  }
-
-  .lubycon-radio__input {
-    position: absolute;
-    visibility: hidden;
-    appearance: none;
-    &:checked + .lubycon-radio__indicator {
-      border-color: get-color('green50');
-      background-color: get-color('green50');
-      &::before {
-        transform: translate(-50%, -50%) scale(1);
-      }
-    }
-  }
-
-  &:hover:not(&--disabled) {
-    .lubycon-radio__indicator {
-      border-color: get-color('green50');
-    }
-  }
-
-  &--display-inline {
-    display: inline-flex;
-  }
-
-  &--disabled {
-    cursor: not-allowed;
-    label {
-      color: get-color('gray40');
-      cursor: not-allowed;
-    }
-    .lubycon-radio__input:checked + .lubycon-radio__indicator {
-      border-color: get-color('gray40');
-      background-color: get-color('gray40');
-    }
-  }
-}
diff --git a/legacy/sass/components/_Row.scss b/legacy/sass/components/_Row.scss
deleted file mode 100644
index 8201683a..00000000
--- a/legacy/sass/components/_Row.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@use 'sass:math';
-
-@mixin direction($direction) {
-  &--direction-#{$direction} {
-    flex-direction: $direction;
-  }
-}
-@mixin justify($align) {
-  &--justify-#{$align} {
-    justify-content: $align;
-  }
-}
-@mixin alignItems($align) {
-  &--align-items-#{$align} {
-    align-items: $align;
-  }
-}
-
-.lubycon-grid__row {
-  display: flex;
-  margin: 0 #{math.div(-$grid-gutter, 2)};
-  flex-wrap: wrap;
-  box-sizing: border-box;
-
-  @include direction(row);
-  @include direction(column);
-  @include direction(row-reverse);
-  @include direction(column-reverse);
-
-  @include justify(flex-start);
-  @include justify(center);
-  @include justify(flex-end);
-  @include justify(space-between);
-  @include justify(space-around);
-  @include justify(space-evenly);
-
-  @include alignItems(flex-start);
-  @include alignItems(center);
-  @include alignItems(flex-end);
-  @include alignItems(stretch);
-  @include alignItems(baseline);
-}
diff --git a/legacy/sass/components/_Selection.scss b/legacy/sass/components/_Selection.scss
deleted file mode 100644
index 192af8b2..00000000
--- a/legacy/sass/components/_Selection.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-.lubycon-selection {
-  position: relative;
-  display: inline-block;
-  background-color: white;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background-color 0.2s ease-in-out;
-
-  &:hover {
-    background-color: get-color('gray20');
-  }
-
-  &--disabled {
-    background-color: get-color('gray40');
-    cursor: not-allowed;
-    &:hover {
-      background-color: get-color('gray40');
-    }
-  }
-
-  &--empty select.lubycon-selection__select {
-    color: get-color('gray50');
-  }
-
-  &--size-small {
-    .lubycon-selection__select {
-      padding: 4px 32px 4px 16px;
-    }
-  }
-  &--size-medium {
-    .lubycon-selection__select {
-      padding: 8px 36px 8px 16px;
-    }
-  }
-  &--size-large {
-    .lubycon-selection__select {
-      padding: 12px 60px 12px 20px;
-    }
-  }
-
-  .lubycon-selection__select {
-    width: 100%;
-    background-color: transparent;
-    appearance: none;
-    outline: none;
-    border: none;
-    cursor: inherit;
-  }
-
-  .lubycon-icon {
-    position: absolute;
-    right: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    stroke: get-color('grey40');
-  }
-}
diff --git a/legacy/sass/components/_Snackbar.scss b/legacy/sass/components/_Snackbar.scss
deleted file mode 100644
index ac00ef7b..00000000
--- a/legacy/sass/components/_Snackbar.scss
+++ /dev/null
@@ -1,96 +0,0 @@
-$snackbar-margin: 12px;
-$snackbar-container-padding: 48px;
-$snackbar-container-mobile-padding: 12px;
-
-.lubycon-snackbar {
-  overflow: visible;
-  & + & {
-    padding-bottom: $snackbar-margin;
-  }
-
-  .lubycon-snackbar__body {
-    display: inline-flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 12px 8px 12px 16px;
-    width: 100%;
-    border-radius: 4px;
-    -webkit-font-smoothing: antialiased;
-    box-sizing: border-box;
-    background-color: get-color('gray90');
-    color: get-color('white');
-    @include media-breakpoint(sm) {
-      width: 400px;
-    }
-  }
-
-  .lubycon-snackbar__text {
-    white-space: pre-line;
-  }
-
-  .lubycon-snackbar__body__buttons {
-    margin-left: 16px;
-    .lubycon-button {
-      color: get-color('blue40');
-      white-space: pre;
-      &:hover {
-        background-color: get-color('gray100');
-      }
-      & + & {
-        margin-left: 8px;
-      }
-    }
-  }
-}
-
-%context-container {
-  position: fixed;
-  display: flex;
-  flex-direction: column-reverse;
-  top: auto;
-  bottom: 0;
-  margin-bottom: $snackbar-container-mobile-padding;
-  z-index: 5000;
-  box-sizing: border-box;
-  @include media-breakpoint(sm) {
-    margin-bottom: $snackbar-container-padding;
-  }
-}
-
-.lubycon-snackbar__context-container {
-  &--align-left {
-    @extend %context-container;
-    left: 0;
-    right: auto;
-    margin-left: $snackbar-container-mobile-padding;
-    @include media-breakpoint(sm) {
-      margin-left: $snackbar-container-padding;
-    }
-  }
-  &--align-center {
-    @extend %context-container;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 100%;
-    padding: {
-      left: $snackbar-container-mobile-padding;
-      right: $snackbar-container-mobile-padding;
-    }
-    @include media-breakpoint(sm) {
-      width: auto;
-      padding: {
-        left: 0;
-        right: 0;
-      }
-    }
-  }
-  &--align-right {
-    @extend %context-container;
-    left: auto;
-    right: 0;
-    margin-right: $snackbar-container-mobile-padding;
-    @include media-breakpoint(sm) {
-      margin-right: $snackbar-container-padding;
-    }
-  }
-}
diff --git a/legacy/sass/components/_Spacing.scss b/legacy/sass/components/_Spacing.scss
deleted file mode 100644
index 68c46318..00000000
--- a/legacy/sass/components/_Spacing.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.lubycon-spacing {
-  width: 0;
-  display: inline-block;
-}
diff --git a/legacy/sass/components/_Switch.scss b/legacy/sass/components/_Switch.scss
deleted file mode 100644
index 805a9693..00000000
--- a/legacy/sass/components/_Switch.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-.lubycon-switch {
-  border-radius: 32px;
-  display: flex;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-
-  &__input {
-    display: none;
-  }
-
-  &__slider {
-    position: relative;
-    width: 40px;
-    height: 22px;
-    margin-right: 8px;
-    border-radius: 32px;
-    background-color: get-color('gray40');
-    transition: background-color 0.3s;
-
-    &::before {
-      content: '';
-      position: absolute;
-      width: 15px;
-      height: 15px;
-      left: 4px;
-      top: 50%;
-      transform: translateY(-50%);
-      background-color: #ffffff;
-      border-radius: 50%;
-      transition: transform 0.3s;
-    }
-  }
-
-  &__input:checked + &__slider {
-    background-color: get-color('green50');
-  }
-
-  &__input:checked + &__slider::before {
-    transform: translate(17px, -50%);
-  }
-
-  &--display-inline {
-    display: inline-flex;
-  }
-  &__label {
-    margin-top: -2px;
-  }
-}
diff --git a/legacy/sass/components/_Table.scss b/legacy/sass/components/_Table.scss
deleted file mode 100644
index 67177956..00000000
--- a/legacy/sass/components/_Table.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.lubycon-table {
-  word-break: break-all;
-	border-collapse: collapse;
-  color: get-color('gray100');
-
-  &__head {
-    background-color: get-color('gray20');
-  }
-  &__body {
-    background-color: get-color('gray10');
-    .lubycon-table__row:not(:last-child) {
-      border-bottom: 1px solid get-color('gray20');
-    }
-  }
-  &__cell {
-    padding: 8px 20px;
-  }
-
-  &--align {
-    &-left {
-      text-align: left;
-    }
-    &-center {
-      text-align: center;
-    }
-    &-right {
-      text-align: right;
-    }
-  }
-}
diff --git a/legacy/sass/components/_Tabs.scss b/legacy/sass/components/_Tabs.scss
deleted file mode 100644
index 0bed04f0..00000000
--- a/legacy/sass/components/_Tabs.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@mixin tab-indicator-position {
-  content: '';
-  position: absolute;
-  width: 100%;
-  left: 0;
-  bottom: 0;
-}
-
-.lubycon-tabs {
-  display: flex;
-  position: relative;
-  max-width: 100%;
-  overflow-x: auto;
-  @include remove-scroll-bar;
-
-  &__item {
-    position: relative;
-    padding: 12px 24px;
-    transition: color 0.2s ease-out;
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    cursor: pointer;
-    white-space: nowrap;
-
-    &__text {
-      color: get-color('gray80');
-    }
-
-    &--selected .lubycon-tabs__item__text {
-      font-weight: bold;
-      color: get-color('gray100');
-    }
-
-    &--disabled .lubycon-tabs__item__text {
-      cursor: not-allowed;
-      color: get-color('gray40');
-    }
-
-    &::after {
-      @include tab-indicator-position;
-      background-color: get-color('gray30');
-      height: 1px;
-      transition: background-color 0.2s ease-out;
-    }
-
-    &:not([aria-disabled='true']):hover::after {
-      background-color: get-color('gray80');
-    }
-  }
-
-  &__indicator {
-    @include tab-indicator-position;
-    background-color: get-color('blue50');
-    border-radius: 1px;
-    height: 2px;
-  }
-}
diff --git a/legacy/sass/components/_Tag.scss b/legacy/sass/components/_Tag.scss
deleted file mode 100644
index faedc77e..00000000
--- a/legacy/sass/components/_Tag.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-@mixin tagColor($color, $hover-color) {
-  background-color: $color;
-  &:hover {
-    background-color: $hover-color;
-  }
-}
-
-.lubycon-tag {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 4px 0 4px 12px;
-  border-radius: 4px;
-  transition: background-color 0.1s ease-in-out;
-
-  &--type {
-    &-default {
-      background-color: get-color('gray30');
-    }
-    &-positive {
-      background-color: get-color('green40');
-    }
-    &-informative {
-      background-color: get-color('blue40');
-    }
-    &-notice {
-      background-color: get-color('yellow40');
-    }
-    &-negative {
-      background-color: get-color('red40');
-    }
-  }
-
-  &--clickable {
-    cursor: pointer;
-    &.lubycon-tag--type-default:hover {
-      background-color: get-color('gray40');
-    }
-    &.lubycon-tag--type-positive:hover {
-      background-color: #c9f5d8;
-    }
-    &.lubycon-tag--type-informative:hover {
-      background-color: #d0e1fe;
-    }
-    &.lubycon-tag--type-notice:hover {
-      background-color: #fdf1b6;
-    }
-    &.lubycon-tag--type-negative:hover {
-      background-color: #fad2d4;
-    }
-  }
-
-  &__label {
-    margin-right: 12px;
-    color: get-color('gray90');
-    user-select: none;
-  }
-
-  &__delete-button {
-    cursor: pointer;
-    display: flex;
-    margin-right: 8px;
-  }
-}
diff --git a/legacy/sass/components/_Text.scss b/legacy/sass/components/_Text.scss
deleted file mode 100644
index 8a8de41b..00000000
--- a/legacy/sass/components/_Text.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.lubycon-text {
-  @each $name, $value in $font-weights {
-    &.lubycon-text--font-weight-#{$name} {
-      @include font-weight($name, map-get($font-weights, $name));
-    }
-  }
-}
diff --git a/legacy/sass/components/_Tooltip.scss b/legacy/sass/components/_Tooltip.scss
deleted file mode 100644
index 1d0d43fa..00000000
--- a/legacy/sass/components/_Tooltip.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-$tooltip-h-padding: 12px;
-
-.lubycon-tooltip__positioner {
-  position: absolute;
-}
-
-.lubycon-tooltip__body {
-  position: relative;
-  display: inline-flex;
-  background-color: get-color('gray100');
-  color: #ffffff;
-  padding: 4px $tooltip-h-padding;
-  border-radius: 4px;
-  -webkit-font-smoothing: antialiased;
-}
-
-%tooltip-arrow-position {
-  position: absolute;
-  width: 0;
-  height: 0;
-  content: '';
-}
-%tooltip-bottom-arrow {
-  @extend %tooltip-arrow-position;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 8px solid get-color('gray100');
-}
-%tooltip-left-arrow {
-  @extend %tooltip-arrow-position;
-  border-bottom: 6px solid transparent;
-  border-right: 8px solid get-color('gray100');
-  border-top: 6px solid transparent;
-}
-%tooltip-right-arrow {
-  @extend %tooltip-arrow-position;
-  border-left: 8px solid get-color('gray100');
-  border-bottom: 6px solid transparent;
-  border-top: 6px solid transparent;
-}
-%tooltip-top-arrow {
-  @extend %tooltip-arrow-position;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 8px solid get-color('gray100');
-}
-
-.lubycon-tooltip__body--arrow {
-  &-bottom-center::before {
-    @extend %tooltip-bottom-arrow;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-  &-bottom-left::before {
-    @extend %tooltip-bottom-arrow;
-    top: 100%;
-    left: $tooltip-h-padding;
-  }
-  &-bottom-right::before {
-    @extend %tooltip-bottom-arrow;
-    top: 100%;
-    right: $tooltip-h-padding;
-  }
-  &-right::before {
-    @extend %tooltip-right-arrow;
-    top: 50%;
-    transform: translateY(-50%);
-    left: 100%;
-  }
-  &-left::before {
-    @extend %tooltip-left-arrow;
-    top: 50%;
-    transform: translateY(-50%);
-    right: 100%;
-  }
-  &-top-center::before {
-    @extend %tooltip-top-arrow;
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-  &-top-left::before {
-    @extend %tooltip-top-arrow;
-    bottom: 100%;
-    left: $tooltip-h-padding;
-  }
-  &-top-right::before {
-    @extend %tooltip-top-arrow;
-    bottom: 100%;
-    right: $tooltip-h-padding;
-  }
-}
diff --git a/legacy/sass/components/_index.scss b/legacy/sass/components/_index.scss
deleted file mode 100644
index a8d42ff4..00000000
--- a/legacy/sass/components/_index.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@import './Accordion';
-@import './Alert';
-@import './Button';
-@import './Text';
-@import './Radio';
-@import './Row';
-@import './Column';
-@import './Checkbox';
-@import './Switch';
-@import './Selection';
-@import './Icon';
-@import './Tooltip';
-@import './Tabs';
-@import './Card';
-@import './Snackbar';
-@import './Container';
-@import './List';
-@import './Input';
-@import './ProgressBar';
-@import './Tag';
-@import './Modal';
-@import './Table';
-@import './Spacing';
diff --git a/legacy/sass/functions/_index.scss b/legacy/sass/functions/_index.scss
deleted file mode 100644
index 0e8d1292..00000000
--- a/legacy/sass/functions/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import './strip-unit';
diff --git a/legacy/sass/functions/_strip-unit.scss b/legacy/sass/functions/_strip-unit.scss
deleted file mode 100644
index 3b451967..00000000
--- a/legacy/sass/functions/_strip-unit.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@use 'sass:math';
-
-@function strip-unit($number) {
-  @if type-of($number) == 'number' and not unitless($number) {
-    @return math.div($number, $number * 0 + 1);
-  }
-
-  @return $number;
-}
diff --git a/legacy/sass/index.scss b/legacy/sass/index.scss
deleted file mode 100644
index 6ea120ee..00000000
--- a/legacy/sass/index.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import './functions/index';
-@import './utils/index';
-@import './components/index.scss';
-
-body {
-  font-size: 16px;
-}
diff --git a/legacy/sass/utils/_breakpoints.scss b/legacy/sass/utils/_breakpoints.scss
deleted file mode 100644
index 11389afb..00000000
--- a/legacy/sass/utils/_breakpoints.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-$breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-) !default;
-
-@mixin media-breakpoint($size) {
-  @media screen and (min-width: map-get($breakpoints, $size)) {
-    @content;
-  }
-}
diff --git a/legacy/sass/utils/_colors.scss b/legacy/sass/utils/_colors.scss
deleted file mode 100644
index 875f92a2..00000000
--- a/legacy/sass/utils/_colors.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-$colors: (
-  'green40': #dff6e7,
-  'green50': #13bc4c,
-  'green60': #00a438,
-  'blue50': #135ce9,
-  'blue40': #e6effe,
-  'blue60': #013cad,
-  'red50': #cb121c,
-  'red40': #fae7e8,
-  'red60': #9b0b13,
-  'yellow50': #f0ca08,
-  'yellow40': #fdf5ce,
-  'yellow60': #aa8f00,
-  'gray100': #1b1b1c,
-  'gray90': #2a2a2c,
-  'gray80': #4c4d53,
-  'gray70': #76777d,
-  'gray60': #8e9095,
-  'gray50': #b5b6b9,
-  'gray40': #d0d1d3,
-  'gray30': #e3e4e5,
-  'gray20': #f3f4f5,
-  'gray10': #fcfcfd,
-  'white': #ffffff,
-  'black': #000000,
-);
-
-@mixin color($name, $value) {
-  :root {
-    --lubycon-#{$name}: #{$value};
-  }
-}
-
-@each $name, $value in $colors {
-  @include color($name, $value);
-}
-
-@function get-color($name) {
-  @return map-get($colors, $name);
-}
diff --git a/legacy/sass/utils/_font-weights.scss b/legacy/sass/utils/_font-weights.scss
deleted file mode 100644
index ab1a9530..00000000
--- a/legacy/sass/utils/_font-weights.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-$font-weights: (
-  'light': 300,
-  'regular': 400,
-  'bold': 700,
-  'black': 900,
-);
-
-@mixin font-weight($name, $value) {
-  font-weight: $value;
-  font-weight: var(--lubycon-font-weight-#{$name});
-}
-
-@mixin global-font-weight($name, $value) {
-  :root {
-    --lubycon-font-weight-#{$name}: #{$value};
-  }
-  .lubycon-font-weight--#{$name} {
-    @include font-weight($name, $value);
-  }
-}
-
-@each $name, $value in $font-weights {
-  @include global-font-weight($name, $value);
-}
diff --git a/legacy/sass/utils/_font.scss b/legacy/sass/utils/_font.scss
deleted file mode 100644
index 43685e6e..00000000
--- a/legacy/sass/utils/_font.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700;900&display=swap');
-
-html {
-  font-family: 'Noto Sans KR', sans-serif;
-}
diff --git a/legacy/sass/utils/_grid.scss b/legacy/sass/utils/_grid.scss
deleted file mode 100644
index 22e1b4fc..00000000
--- a/legacy/sass/utils/_grid.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$max-columns: 12;
-$grid-gutter: 12px;
diff --git a/legacy/sass/utils/_index.scss b/legacy/sass/utils/_index.scss
deleted file mode 100644
index 5d061da7..00000000
--- a/legacy/sass/utils/_index.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import './breakpoints';
-@import './grid';
-@import './font';
-@import './font-weights';
-@import './typography';
-@import './shadows';
-@import './colors';
-@import './scrollbar';
diff --git a/legacy/sass/utils/_scrollbar.scss b/legacy/sass/utils/_scrollbar.scss
deleted file mode 100644
index c36ca4a1..00000000
--- a/legacy/sass/utils/_scrollbar.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@mixin remove-scroll-bar {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
diff --git a/legacy/sass/utils/_shadows.scss b/legacy/sass/utils/_shadows.scss
deleted file mode 100644
index f82dd662..00000000
--- a/legacy/sass/utils/_shadows.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@mixin shadow($shadow-level, $offset-y, $blur-radius) {
-  $shadow: '0px #{$offset-y} #{$blur-radius} rgba(0, 0, 0, 0.1)';
-
-  :root {
-    --lubycon-shadow-#{$shadow-level}: #{$shadow};
-  }
-
-  .lubycon-shadow--#{$shadow-level} {
-    box-shadow: #{$shadow};
-    box-shadow: var(--lubycon-shadow-#{$shadow-level});
-  }
-}
-
-@include shadow(1, 2px, 5px);
-@include shadow(2, 3px, 5px);
-@include shadow(3, 6px, 10px);
-@include shadow(4, 8px, 12px);
-@include shadow(5, 24px, 48px);
diff --git a/legacy/sass/utils/_typography.scss b/legacy/sass/utils/_typography.scss
deleted file mode 100644
index 88a79674..00000000
--- a/legacy/sass/utils/_typography.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-@mixin _typography($name, $font-size, $line-height) {
-  $font-size-number: strip-unit($font-size);
-
-  :root {
-    --lubycon-font-size-#{$name}: #{$font-size};
-    --lubycon-line-height-#{$name}: #{$line-height};
-  }
-
-  .lubycon-font-size-#{$name} {
-    font-size: $font-size;
-    font-size: var(--lubycon-font-size-#{$name});
-    line-height: $line-height;
-    line-height: var(--lubycon-line-height-#{$name});
-  }
-
-  .lubycon-typography-#{$name} {
-    @extend .lubycon-font-size-#{$name};
-  }
-}
-
-@include _typography('h1', 2.625rem, 1.5);
-@include _typography('h2', 2rem, 1.5);
-@include _typography('h3', 1.75rem, 1.5);
-@include _typography('h4', 1.625rem, 1.5);
-@include _typography('h5', 1.5rem, 1.5);
-@include _typography('h6', 1.25rem, 1.5);
-@include _typography('subtitle', 1.125rem, 1.7);
-@include _typography('p1', 1rem, 2);
-@include _typography('p2', 0.9375rem, 1.7);
-@include _typography('caption', 0.75rem, 1.6);
diff --git a/legacy/stories/Components/Accordion/index.stories.mdx b/legacy/stories/Components/Accordion/index.stories.mdx
deleted file mode 100644
index bb459c04..00000000
--- a/legacy/stories/Components/Accordion/index.stories.mdx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Accordion } from 'src';
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-
-<Meta title="Components/Accordion" components={Accordion} />
-
-# Accordion
-
-아코디언은 펼치거나 접을 수 있는 패널 컴포넌트 입니다. 펼침 상태를 활용하여 추가적인 정보를 사용자에게 제공할 수 있습니다. 기본적으로 접힌 상태이며, 사용자가 해당 패널을 클릭하면 펼침 상태로 변경됩니다.
-
-## Preview
-
-라벨은 펼쳐지기 전에 아코디언에 보여지는 텍스트 영역을 가리킵니다. 펼쳐진 부분의 텍스트 영역은 아코디언 컴포넌트의 내부에 기입한 내용으로 나타납니다.
-
-<Canvas>
-  <Story name="Preview">
-    <Accordion
-      label="👀 텍스트가 숨겨져 있어요"
-      onChange={(v) => console.log(`onChange: ${v}`)}
-      onOpen={() => console.log('handleOpen')}
-      onClose={() => console.log('handleClose')}
-    >
-      아코디언이 펼쳐지면 아래에 내용이 나옵니다.
-      <br />
-      아코디언이 펼쳐지면 아래에 내용이 나옵니다.
-      <br />
-      아코디언이 펼쳐지면 아래에 내용이 나옵니다.
-      <br />
-    </Accordion>
-    <Accordion label="🔥 이미지가 숨겨져 있어요">
-      <img
-        src="http://cogulmars.cafe24.com/img/04about_img01.png"
-        alt="귀여운 에비츄"
-        width="300"
-      />
-    </Accordion>
-    <Accordion label="제목을 입력하세요">
-      아코디언이 펼쳐지면 아래에 내용이 나옵니다.
-      <br />
-      아코디언이 펼쳐지면 아래에 내용이 나옵니다.
-      <br />
-      아코디언이 펼쳐지면 아래에 내용이 나옵니다.
-      <br />
-    </Accordion>
-  </Story>
-</Canvas>
-
-## Default Open
-
-아코디언 컴포넌트가 처음 렌더될 때의 펼침여부를 결정할 수 있습니다.
-
-<Canvas>
-  <Story name="Default Open">
-    <Accordion label="👀 텍스트가 숨겨져 있어요" defaultOpen={true}>
-      아코디언이 펼쳐지면 아래에 내용이 나옵니다.
-      <br />
-      아코디언이 펼쳐지면 아래에 내용이 나옵니다.
-      <br />
-      아코디언이 펼쳐지면 아래에 내용이 나옵니다.
-      <br />
-    </Accordion>
-  </Story>
-</Canvas>
-
-## 이벤트 핸들러
-
-Lubycon UI Kit에서는 아코디언 컴포넌트의 상태에 따라 호출되는 함수 props를 제공하고 있습니다.
-
-`onChange`는 아코디언 패널의 펼침 접힘 상태가 변경되었을 때, `onOpen`은 아코디언 패널이 펼쳐졌을 때, `onClose`는 아코디언 패널이 접혀졌을 때 호출됩니다.
-
-<Canvas>
-  <Story name="Event Handler">
-    <Accordion label="👀 텍스트가 숨겨져 있어요">
-      아코디언이 펼쳐지면 아래에 내용이 나옵니다.
-      <br />
-      아코디언이 펼쳐지면 아래에 내용이 나옵니다.
-      <br />
-      아코디언이 펼쳐지면 아래에 내용이 나옵니다.
-      <br />
-    </Accordion>
-  </Story>
-</Canvas>
diff --git a/legacy/stories/Components/Alert/data.ts b/legacy/stories/Components/Alert/data.ts
deleted file mode 100644
index 14c9a89f..00000000
--- a/legacy/stories/Components/Alert/data.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { SemanticColor } from 'src/constants/colors';
-
-export const alerts: Array<{ type: SemanticColor; title: string }> = [
-  {
-    type: 'negative',
-    title: '오류',
-  },
-  {
-    type: 'notice',
-    title: '경고',
-  },
-  {
-    type: 'informative',
-    title: '정보',
-  },
-  {
-    type: 'positive',
-    title: '완료',
-  },
-];
diff --git a/legacy/stories/Components/Alert/index.stories.mdx b/legacy/stories/Components/Alert/index.stories.mdx
deleted file mode 100644
index e84616d5..00000000
--- a/legacy/stories/Components/Alert/index.stories.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-import Alert from 'components/Alert';
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Column, Row } from 'src/components/Grid';
-import { alerts } from './data';
-
-<Meta title="Components/Alert" components={Alert} />
-
-# Alert
-
-## Preview
-
-<Canvas>
-  <Story name="Preview">
-    <Alert type="positive">메세지를 넣어주세요</Alert>
-  </Story>
-</Canvas>
-
-### Title
-
-특별히 강조하고 싶은 메세지가 있는 경우에는 `title` 프로퍼티를 사용할 수 있습니다. `title` 프로퍼티에 입력된 값은 `Alert` 의 왼쪽 부분에 진한 글씨로 강조되어 렌더됩니다.
-
-### Type
-
-`Alert` 컴포넌트는 Lubycon UI Kit에서 제공하는 4가지 시맨틱 컬러를 기반으로 한 타입을 가지고 있습니다. 기본적으로 아무 타입도 주지 않았을 때 `Alert` 컴포넌트는 `informative` 타입으로 렌더됩니다.
-
-<Canvas>
-  <Story name="Type">
-    <Row style={{ width: 1200 }}>
-      {alerts.map(({ type, title }) => (
-        <Column xs={6} key={type} style={{ marginBottom: 32 }}>
-          <Alert style={{ marginBottom: 16 }} type={type} title={`${title} 메세지`}>
-            서브 타이틀을 넣어주세요
-          </Alert>
-          <Alert type={type}>{title} 메세지를 넣어주세요</Alert>
-        </Column>
-      ))}
-    </Row>
-  </Story>
-</Canvas>
diff --git a/legacy/stories/Components/Button/data.ts b/legacy/stories/Components/Button/data.ts
deleted file mode 100644
index 8ff2439d..00000000
--- a/legacy/stories/Components/Button/data.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { SemanticColor } from 'src/constants/colors';
-
-export const sizeList = ['small', 'medium', 'large'] as const;
-export const buttonText = '버튼 텍스트';
-export const semanticColors: SemanticColor[] = ['informative', 'negative', 'notice', 'positive'];
diff --git a/legacy/stories/Components/Button/index.stories.mdx b/legacy/stories/Components/Button/index.stories.mdx
deleted file mode 100644
index 40235b84..00000000
--- a/legacy/stories/Components/Button/index.stories.mdx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Button, Text, Column, Row } from 'src';
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { SemanticColor } from 'src/constants/colors';
-import { sizeList, buttonText, semanticColors } from './data';
-
-<Meta title="Components/Button" components={Button} />
-
-# Button
-
-버튼 컴포넌트는 HTML의 button 엘리먼트를 기반으로 만들어졌기 때문에, Lubycon UI Kit이 제공하는 인터페이스 외에 기존 HTML의 button 엘리먼트가 제공하고 있던 기능도 모두 사용 가능합니다.
-
-## Preview
-
-<Canvas>
-  <Story name="Preview">
-    <Button>버튼입니다</Button>
-  </Story>
-</Canvas>
-
-### Size
-
-`Button` 컴포넌트는 `small` `medium` `large` 3가지의 사이즈를 가지고 있습니다.
-
-<Canvas>
-  <Story name="Size">
-    <Row direction="column">
-      <Column style={{ marginBottom: 8 }}>
-        <Button size="small" type="informative">
-          버튼 텍스트
-        </Button>
-      </Column>
-      <Column style={{ marginBottom: 8 }}>
-        <Button size="medium" type="informative">
-          버튼 텍스트
-        </Button>
-      </Column>
-      <Column style={{ marginBottom: 8 }}>
-        <Button size="large" type="informative">
-          버튼 텍스트
-        </Button>
-      </Column>
-    </Row>
-  </Story>
-</Canvas>
-
-### Types
-
-`Button` 컴포넌트는 Lubycon UI Kit에서 제공하는 4가지 시맨틱 컬러를 기반으로 한 타입을 가지고 있습니다.
-
-기본적으로 아무 타입도 주지 않았을 때 `Button` 컴포넌트는 배경색이 없는 투명 상태로 렌더됩니다.
-
-<Canvas>
-  <Story name="Types">
-    <Row direction="column">
-      <Column style={{ marginBottom: 8 }}>
-        <Button>기본 버튼</Button>
-      </Column>
-      <Column style={{ marginBottom: 8 }}>
-        <Button type="informative">Informative</Button>
-      </Column>
-      <Column style={{ marginBottom: 8 }}>
-        <Button type="positive">Positive</Button>
-      </Column>
-      <Column style={{ marginBottom: 8 }}>
-        <Button type="negative">Negative</Button>
-      </Column>
-      <Column style={{ marginBottom: 8 }}>
-        <Button type="notice">Notice</Button>
-      </Column>
-    </Row>
-  </Story>
-</Canvas>
diff --git a/legacy/stories/Components/Card/index.stories.mdx b/legacy/stories/Components/Card/index.stories.mdx
deleted file mode 100644
index 1c586ad4..00000000
--- a/legacy/stories/Components/Card/index.stories.mdx
+++ /dev/null
@@ -1,78 +0,0 @@
-import {
-  Text,
-  Button,
-  Row,
-  Column,
-  Card,
-  CardHeader,
-  CardContent,
-  CardImageContent,
-  CardFooter,
-  Icon,
-  colors,
-} from 'src';
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-
-<Meta title="Components/Card" components={Card} />
-
-# Card
-
-- Card는 단일 주제에 대한 정보 전달을 목적으로 하는 컴포넌트입니다.
-- Card는 상세하고 디테일한 문서 내용을 전달하기에 앞서 진입점으로 사용되는 컴포넌트입니다.
-- 카드의 내용에 따라 자율적인 UI 변경이 가능합니다. Icon, UI controls, text를 추가할 수 있습니다.
-- 표현하고자 하는 내용에 따라 header/text/footer 레이아웃을 변경해 사용할 수 있습니다.
-- Default와 Image card 두 가지 형태를 제공합니다.
-
-## Default Card
-
-가장 기본적인 text type 카드입니다. 필요에 따라 커스텀해 사용할 수 있습니다.
-
-<Canvas>
-  <Story name="Default Card">
-    <Card style={{ width: 240 }}>
-      <CardHeader>제목</CardHeader>
-      <CardContent>
-        <Text
-          style={{
-            color: colors.gray70,
-          }}
-        >
-          내용을 입력하세요.
-          <br />
-          내용을 입력하세요.
-          <br />
-          내용을 입력하세요.
-          <br />
-          내용을 입력하세요.
-        </Text>
-      </CardContent>
-      <CardFooter>
-        <span style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} role="button">
-          <Text typography="caption" style={{ color: colors.gray60, marginRight: 5 }}>
-            더보기
-          </Text>
-          <Icon name="arrow-forward" type="outline" color={colors.gray60} />
-        </span>
-      </CardFooter>
-    </Card>
-  </Story>
-</Canvas>
-
-## Image Card
-
-<Canvas>
-  <Story name="Image Card">
-    <Card style={{ width: 240 }}>
-      <CardHeader>제목</CardHeader>
-      <CardImageContent src="http://cogulmars.cafe24.com/img/04about_img01.png" alt="에비츄" />
-      <CardFooter>
-        <span style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} role="button">
-          <Text typography="caption" style={{ color: colors.gray60, marginRight: 5 }}>
-            더보기
-          </Text>
-          <Icon name="arrow-forward" type="outline" color={colors.gray60} />
-        </span>
-      </CardFooter>
-    </Card>
-  </Story>
-</Canvas>
diff --git a/legacy/stories/Components/Checkbox/Components.tsx b/legacy/stories/Components/Checkbox/Components.tsx
deleted file mode 100644
index 8332db91..00000000
--- a/legacy/stories/Components/Checkbox/Components.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { useState } from 'react';
-import { Checkbox, Text } from 'src';
-
-export const Controlled = () => {
-  const [state, setState] = useState(false);
-  return (
-    <div>
-      <Text>Controlled state: {`${state}`}</Text>
-      <Checkbox label={'체크박스'} onChange={(e) => setState(e.target.checked)} checked={state} />
-    </div>
-  );
-};
-
-export const Uncontrolled = () => {
-  const [state, setState] = useState(false);
-  return (
-    <div>
-      <Text>Uncontrolled state: {`${state}`}</Text>
-      <Checkbox label={'체크박스'} onChange={(e) => setState(e.target.checked)} />
-    </div>
-  );
-};
diff --git a/legacy/stories/Components/Checkbox/index.stories.mdx b/legacy/stories/Components/Checkbox/index.stories.mdx
deleted file mode 100644
index da120e89..00000000
--- a/legacy/stories/Components/Checkbox/index.stories.mdx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Checkbox } from 'src';
-import { Controlled, Uncontrolled } from './Components';
-
-<Meta title="Components/Checkbox" components={Checkbox} />
-
-# Checkbox
-
-하나의 아이템이나 여러 개의 아이템을 선택하는 상황을 표현하는데 사용할 수 있습니다.
-
-`label`과 `display` 속성을 제공합니다.
-
-## Preview
-
-간단한 라벨 정의만으로 체크박스 컴포넌트를 사용할 수 있습니다.
-
-<Canvas>
-  <Story name="Preview">
-    <Checkbox label={'체크박스1'} />
-  </Story>
-</Canvas>
-
-## Inline
-
-필요에 따라 display 설정을 props로 조정할 수 있습니다.
-
-<Canvas>
-  <Story name="Inline">
-    <Checkbox label={'체크박스'} display="inline" style={{ marginRight: '20px' }} />
-    <Checkbox label={'체크박스2'} display="inline" />
-  </Story>
-</Canvas>
-
-## Block
-
-<Canvas>
-  <Story name="Block">
-    <Checkbox label={'체크박스'} display="block" />
-    <Checkbox label={'체크박스2'} display="block" />
-  </Story>
-</Canvas>
-
-## Disabled
-
-<Canvas>
-  <Story name="Disabled">
-    <Checkbox label={'체크박스'} />
-    <Checkbox label={'체크박스2'} />
-    <Checkbox label={'체크박스3'} disabled />
-    <Checkbox label={'체크박스4'} disabled defaultChecked={true} />
-  </Story>
-</Canvas>
-
-## Controlled vs Uncontrolled
-
-사용자의 의도에 따라 체크박스의 상태를 직접 관리할 수도 있고, DOM에게 맡길 수도 있습니다.
-
-<Canvas>
-  <Story name="Controlled vs Uncontrolled">
-    <Controlled />
-    <Uncontrolled />
-  </Story>
-</Canvas>
-
-```tsx
-import React, { useState } from 'react';
-import { Checkbox, Text } from '@lubycon/ui-kit';
-
-function Diff() {
-  const [state, setState] = useState(false);
-  return (
-    <Checkbox label={'Controlled'} onChange={(e) => setState(e.target.checked)} checked={state} />
-    <Checkbox label={'Uncontrolled'} onChange={(e) => setState(e.target.checked)}  />
-    /* checked 상태의 관리 방법을 결정할 수 있습니다 */
-  );
-}
-```
-
-## Demo
-
-```tsx codesandbox=lubycon
-import '@lubycon/ui-kit/css/lubycon-ui-kit.min.css';
-import React from 'react';
-import { Checkbox } from '@lubycon/ui-kit';
-
-function App() {
-  return (
-    <div>
-      <Checkbox label={'체크박스'} />
-    </div>
-  );
-}
-
-export default App;
-```
diff --git a/legacy/stories/Components/Grid/data.ts b/legacy/stories/Components/Grid/data.ts
deleted file mode 100644
index 2c45905b..00000000
--- a/legacy/stories/Components/Grid/data.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { CSSProperties } from 'react';
-import { colors } from 'src';
-
-export const columns = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-export const columnStyle: CSSProperties = {
-  border: `1px solid ${colors.blue50}`,
-  backgroundColor: colors.blue40,
-  height: 100,
-  color: colors.gray10,
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-};
diff --git a/legacy/stories/Components/Grid/index.stories.mdx b/legacy/stories/Components/Grid/index.stories.mdx
deleted file mode 100644
index 77eceea9..00000000
--- a/legacy/stories/Components/Grid/index.stories.mdx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { Column, Row, Text, colors } from 'src';
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { columns, columnStyle } from './data';
-
-<Meta title="Components/Grid" components={{ Column, Row }} />
-
-# Grid
-
-그리드는 유연하게 레이아웃을 정의하면서도 시각적인 일관성을 만들어줍니다. Lubycon UI Kit 의 그리드는 12개의 컬럼을 기반으로 구성되어있습니다.
-
-## Preview
-
-<Canvas>
-  <Story name="Preview">
-    <Row>
-      {columns.map((column) => (
-        <Column key={column} style={columnStyle} xs={1}>
-          <Text style={{ width: '100%', textAlign: 'center', backgroundColor: colors.blue60 }}>
-            Column{column}
-          </Text>
-        </Column>
-      ))}
-    </Row>
-  </Story>
-</Canvas>
-
-## Stretched
-
-<Canvas>
-  <Story name="Stretched">
-    <Row>
-      {columns
-        .filter((v) => v % 2 === 0)
-        .map((column) => (
-          <Column key={column} style={columnStyle}>
-            <Text style={{ width: '100%', textAlign: 'center', backgroundColor: colors.blue60 }}>
-              Column{column}
-            </Text>
-          </Column>
-        ))}
-    </Row>
-  </Story>
-</Canvas>
-
-## Direction
-
-### Row
-
-<Canvas>
-  <Story name="Direction/Row">
-    <Row direction="row">
-      {columns.map((column) => (
-        <Column key={column} style={columnStyle}>
-          <Text style={{ width: '100%', textAlign: 'center', backgroundColor: colors.blue60 }}>
-            Column{column}
-          </Text>
-        </Column>
-      ))}
-    </Row>
-  </Story>
-</Canvas>
-
-### Column
-
-<Canvas>
-  <Story name="Direction/Column">
-    <Row direction="column">
-      {columns.map((column) => (
-        <Column key={column} style={columnStyle}>
-          <Text style={{ width: '100%', textAlign: 'center', backgroundColor: colors.blue60 }}>
-            Column{column}
-          </Text>
-        </Column>
-      ))}
-    </Row>
-  </Story>
-</Canvas>
-
-## Responsive
-
-<Canvas>
-  <Story name="Responsive">
-    <Row>
-      <Column lg={8} md={4} xs={2} style={columnStyle}>
-        <Text style={{ width: '100%', textAlign: 'center', backgroundColor: colors.blue60 }}>
-          lg=8 md=4, xs=2
-        </Text>
-      </Column>
-      <Column style={columnStyle}>
-        <Text style={{ width: '100%', textAlign: 'center', backgroundColor: colors.blue60 }}>
-          auto
-        </Text>
-      </Column>
-      <Column lg={1} md={5} xs={8} style={columnStyle}>
-        <Text style={{ width: '100%', textAlign: 'center', backgroundColor: colors.blue60 }}>
-          lg=1, md=5, xs=8
-        </Text>
-      </Column>
-    </Row>
-  </Story>
-</Canvas>
-
-## VariableWidth
-
-<Canvas>
-  <Story name="Variable Width">
-    <Row>
-      <Column lg="auto" style={{ ...columnStyle, width: 40 }}>
-        <Text style={{ width: '100%', textAlign: 'center', backgroundColor: colors.blue60 }}>
-          width: 40px
-        </Text>
-      </Column>
-      <Column style={columnStyle}>
-        <Text style={{ width: '100%', textAlign: 'center', backgroundColor: colors.blue60 }}>
-          Column
-        </Text>
-      </Column>
-      <Column style={columnStyle}>
-        <Text style={{ width: '100%', textAlign: 'center', backgroundColor: colors.blue60 }}>
-          Column
-        </Text>
-      </Column>
-    </Row>
-  </Story>
-</Canvas>
diff --git a/legacy/stories/Components/Icons/data.ts b/legacy/stories/Components/Icons/data.ts
deleted file mode 100644
index 91e2880f..00000000
--- a/legacy/stories/Components/Icons/data.ts
+++ /dev/null
@@ -1,516 +0,0 @@
-import { colors } from 'src';
-import { IconName, LogoIconName } from 'src/types/icon';
-import { IconType } from 'src/components/Icon';
-
-export const commonIcons: IconName[] = [
-  'accessibility',
-  'add',
-  'add-circle',
-  'airplane',
-  'alarm',
-  'albums',
-  'alert',
-  'alert-circle',
-  'american-football',
-  'analytics',
-  'aperture',
-  'apps',
-  'archive',
-  'arrow-back',
-  'arrow-back-circle',
-  'arrow-down',
-  'arrow-down-circle',
-  'arrow-forward',
-  'arrow-forward-circle',
-  'arrow-redo',
-  'arrow-redo-circle',
-  'arrow-undo',
-  'arrow-undo-circle',
-  'arrow-up',
-  'arrow-up-circle',
-  'at',
-  'at-circle',
-  'attach',
-  'backspace',
-  'bag',
-  'bag-add',
-  'bag-check',
-  'bag-handle',
-  'bag-remove',
-  'balloon',
-  'ban',
-  'bandage',
-  'bar-chart',
-  'barbell',
-  'barcode',
-  'baseball',
-  'basket',
-  'basketball',
-  'battery-charging',
-  'battery-dead',
-  'battery-full',
-  'battery-half',
-  'beaker',
-  'bed',
-  'beer',
-  'bicycle',
-  'bluetooth',
-  'boat',
-  'body',
-  'bonfire',
-  'book',
-  'bookmark',
-  'bookmarks',
-  'bowling-ball',
-  'briefcase',
-  'browsers',
-  'brush',
-  'bug',
-  'build',
-  'bulb',
-  'bus',
-  'business',
-  'cafe',
-  'calculator',
-  'calendar',
-  'calendar-clear',
-  'calendar-number',
-  'call',
-  'camera',
-  'camera-reverse',
-  'car',
-  'car-sport',
-  'card',
-  'caret-back',
-  'caret-back-circle',
-  'caret-down',
-  'caret-down-circle',
-  'caret-forward',
-  'caret-forward-circle',
-  'caret-up',
-  'caret-up-circle',
-  'cart',
-  'cash',
-  'cellular',
-  'chatbox',
-  'chatbox-ellipses',
-  'chatbubble',
-  'chatbubble-ellipses',
-  'chatbubbles',
-  'checkbox',
-  'checkmark',
-  'checkmark-circle',
-  'checkmark-done',
-  'checkmark-done-circle',
-  'chevron-back',
-  'chevron-back-circle',
-  'chevron-down',
-  'chevron-down-circle',
-  'chevron-forward',
-  'chevron-forward-circle',
-  'chevron-up',
-  'chevron-up-circle',
-  'clipboard',
-  'close',
-  'close-circle',
-  'cloud',
-  'cloud-circle',
-  'cloud-done',
-  'cloud-download',
-  'cloud-offline',
-  'cloud-upload',
-  'cloudy',
-  'cloudy-night',
-  'code',
-  'code-download',
-  'code-slash',
-  'code-working',
-  'cog',
-  'color-fill',
-  'color-filter',
-  'color-palette',
-  'color-wand',
-  'compass',
-  'construct',
-  'contract',
-  'contrast',
-  'copy',
-  'create',
-  'crop',
-  'cube',
-  'cut',
-  'desktop',
-  'diamond',
-  'dice',
-  'disc',
-  'document',
-  'document-attach',
-  'document-lock',
-  'document-text',
-  'documents',
-  'download',
-  'duplicate',
-  'ear',
-  'earth',
-  'easel',
-  'egg',
-  'ellipse',
-  'ellipsis-horizontal',
-  'ellipsis-horizontal-circle',
-  'ellipsis-vertical',
-  'ellipsis-vertical-circle',
-  'enter',
-  'exit',
-  'expand',
-  'extension-puzzle',
-  'eye',
-  'eye-off',
-  'eyedrop',
-  'fast-food',
-  'female',
-  'file-tray',
-  'file-tray-full',
-  'file-tray-stacked',
-  'film',
-  'filter',
-  'filter-circle',
-  'finger-print',
-  'fish',
-  'fitness',
-  'flag',
-  'flame',
-  'flash',
-  'flash-off',
-  'flashlight',
-  'flask',
-  'flower',
-  'folder',
-  'folder-open',
-  'football',
-  'footsteps',
-  'funnel',
-  'game-controller',
-  'gift',
-  'git-branch',
-  'git-commit',
-  'git-compare',
-  'git-merge',
-  'git-network',
-  'git-pull-request',
-  'glasses',
-  'globe',
-  'golf',
-  'grid',
-  'hammer',
-  'hand-left',
-  'hand-right',
-  'happy',
-  'hardware-chip',
-  'headset',
-  'heart',
-  'heart-circle',
-  'heart-dislike',
-  'heart-dislike-circle',
-  'heart-half',
-  'help',
-  'help-buoy',
-  'help-circle',
-  'home',
-  'hourglass',
-  'ice-cream',
-  'id-card',
-  'image',
-  'images',
-  'infinite',
-  'information',
-  'information-circle',
-  'invert-mode',
-  'journal',
-  'key',
-  'keypad',
-  'language',
-  'laptop',
-  'layers',
-  'leaf',
-  'library',
-  'link',
-  'list',
-  'list-circle',
-  'locate',
-  'location',
-  'lock-closed',
-  'lock-open',
-  'log-in',
-  'log-out',
-  'magnet',
-  'mail',
-  'mail-open',
-  'mail-unread',
-  'male',
-  'male-female',
-  'man',
-  'map',
-  'medal',
-  'medical',
-  'medkit',
-  'megaphone',
-  'menu',
-  'mic',
-  'mic-circle',
-  'mic-off',
-  'mic-off-circle',
-  'moon',
-  'move',
-  'musical-note',
-  'musical-notes',
-  'navigate',
-  'navigate-circle',
-  'newspaper',
-  'notifications',
-  'notifications-circle',
-  'notifications-off',
-  'notifications-off-circle',
-  'nuclear',
-  'nutrition',
-  'open',
-  'options',
-  'paper-plane',
-  'partly-sunny',
-  'pause',
-  'pause-circle',
-  'paw',
-  'pencil',
-  'people',
-  'people-circle',
-  'person',
-  'person-add',
-  'person-circle',
-  'person-remove',
-  'phone-landscape',
-  'phone-portrait',
-  'pie-chart',
-  'pin',
-  'pint',
-  'pizza',
-  'planet',
-  'play',
-  'play-back',
-  'play-back-circle',
-  'play-circle',
-  'play-forward',
-  'play-forward-circle',
-  'play-skip-back',
-  'play-skip-back-circle',
-  'play-skip-forward',
-  'play-skip-forward-circle',
-  'podium',
-  'power',
-  'pricetag',
-  'pricetags',
-  'print',
-  'prism',
-  'pulse',
-  'push',
-  'qr-code',
-  'radio',
-  'radio-button-off',
-  'radio-button-on',
-  'rainy',
-  'reader',
-  'receipt',
-  'recording',
-  'refresh',
-  'refresh-circle',
-  'reload',
-  'reload-circle',
-  'remove',
-  'remove-circle',
-  'reorder-four',
-  'reorder-three',
-  'reorder-two',
-  'repeat',
-  'resize',
-  'restaurant',
-  'return-down-back',
-  'return-down-forward',
-  'return-up-back',
-  'return-up-forward',
-  'ribbon',
-  'rocket',
-  'rose',
-  'sad',
-  'save',
-  'scale',
-  'scan',
-  'scan-circle',
-  'school',
-  'search',
-  'search-circle',
-  'send',
-  'server',
-  'settings',
-  'shapes',
-  'share',
-  'share-social',
-  'shield',
-  'shield-checkmark',
-  'shield-half',
-  'shirt',
-  'shuffle',
-  'skull',
-  'snow',
-  'sparkles',
-  'speedometer',
-  'square',
-  'star',
-  'star-half',
-  'stats-chart',
-  'stop',
-  'stop-circle',
-  'stopwatch',
-  'storefront',
-  'subway',
-  'sunny',
-  'swap-horizontal',
-  'swap-vertical',
-  'sync',
-  'sync-circle',
-  'tablet-landscape',
-  'tablet-portrait',
-  'telescope',
-  'tennisball',
-  'terminal',
-  'text',
-  'thermometer',
-  'thumbs-down',
-  'thumbs-up',
-  'thunderstorm',
-  'ticket',
-  'time',
-  'timer',
-  'today',
-  'toggle',
-  'trail-sign',
-  'train',
-  'transgender',
-  'trash',
-  'trash-bin',
-  'trending-down',
-  'trending-up',
-  'triangle',
-  'trophy',
-  'tv',
-  'umbrella',
-  'unlink',
-  'videocam',
-  'videocam-off',
-  'volume-high',
-  'volume-low',
-  'volume-medium',
-  'volume-mute',
-  'volume-off',
-  'walk',
-  'wallet',
-  'warning',
-  'watch',
-  'water',
-  'wifi',
-  'wine',
-  'woman',
-];
-
-export const logoIcons: LogoIconName[] = [
-  'logo-alipay',
-  'logo-amazon',
-  'logo-amplify',
-  'logo-android',
-  'logo-angular',
-  'logo-apple',
-  'logo-apple-appstore',
-  'logo-apple-ar',
-  'logo-behance',
-  'logo-bitbucket',
-  'logo-bitcoin',
-  'logo-buffer',
-  'logo-capacitor',
-  'logo-chrome',
-  'logo-closed-captioning',
-  'logo-codepen',
-  'logo-css3',
-  'logo-designernews',
-  'logo-deviantart',
-  'logo-discord',
-  'logo-docker',
-  'logo-dribbble',
-  'logo-dropbox',
-  'logo-edge',
-  'logo-electron',
-  'logo-euro',
-  'logo-facebook',
-  'logo-figma',
-  'logo-firebase',
-  'logo-firefox',
-  'logo-flickr',
-  'logo-foursquare',
-  'logo-github',
-  'logo-gitlab',
-  'logo-google',
-  'logo-google-playstore',
-  'logo-hackernews',
-  'logo-html5',
-  'logo-instagram',
-  'logo-ionic',
-  'logo-ionitron',
-  'logo-javascript',
-  'logo-laravel',
-  'logo-linkedin',
-  'logo-markdown',
-  'logo-mastodon',
-  'logo-medium',
-  'logo-microsoft',
-  'logo-no-smoking',
-  'logo-nodejs',
-  'logo-npm',
-  'logo-octocat',
-  'logo-paypal',
-  'logo-pinterest',
-  'logo-playstation',
-  'logo-pwa',
-  'logo-python',
-  'logo-react',
-  'logo-reddit',
-  'logo-rss',
-  'logo-sass',
-  'logo-skype',
-  'logo-slack',
-  'logo-snapchat',
-  'logo-soundcloud',
-  'logo-stackoverflow',
-  'logo-steam',
-  'logo-stencil',
-  'logo-tableau',
-  'logo-tiktok',
-  'logo-tumblr',
-  'logo-tux',
-  'logo-twitch',
-  'logo-twitter',
-  'logo-usd',
-  'logo-venmo',
-  'logo-vercel',
-  'logo-vimeo',
-  'logo-vk',
-  'logo-vue',
-  'logo-web-component',
-  'logo-wechat',
-  'logo-whatsapp',
-  'logo-windows',
-  'logo-wordpress',
-  'logo-xbox',
-  'logo-xing',
-  'logo-yahoo',
-  'logo-yen',
-  'logo-youtube',
-];
-
-export const colorKeys = Object.keys(colors);
-export const iconTypes: IconType[] = ['filled', 'outline', 'sharp'];
diff --git a/legacy/stories/Components/Icons/index.stories.mdx b/legacy/stories/Components/Icons/index.stories.mdx
deleted file mode 100644
index 26c9a67d..00000000
--- a/legacy/stories/Components/Icons/index.stories.mdx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Icon, Text, colors, Row, Column } from 'src';
-import { IconType } from 'src/components/Icon';
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { ColorProperty } from 'src/constants/colors';
-import { Fragment } from 'react';
-
-<Meta title="Components/Icon" components={Icon} />
-
-# Icon
-
-Lubycon UI Kit은 ionicons를 기반으로 하는 `Icon` 컴포넌트를 제공하고 있습니다.
-
-이 아이콘 에셋들은 루비콘 팀의 CDN을 통해 서비스되고 있기 때문에 Lubycon UI Kit의 디펜던시에도 포함되어 있지 않고, 소스코드에는 포함되어있지 않아 최종 번들의 용량을 줄이는데 효과적입니다.
-
-## Preview
-
-`Icon` 컴포넌트에는 크기, 색상, 타입 3가지를 지정할 수 있습니다. 이 중 타입은 ionicons에서 제공하는 outline, filled, sharp 3가지 타입이 그대로 제공됩니다.
-아이콘에 따라 존재하지 않는 타입도 있을 수 있으니 <a href="https://ionic.io/ionicons" target="_blank" rel="noreferrer">ionicons 공식 홈페이지</a>를 참고하세요.
-
-`Icon` 컴포넌트는 기본적으로 SVG 포맷의 아이콘을 렌더하며, SVG를 사용할 수 없는 경우라면 자동으로 PNG 포맷의 아이콘을 Fallback으로 렌더합니다.
-이렇게 Fallback PNG 아이콘이 렌더된 경우에는 아이콘의 색상을 변경할 수 없기 때문에 `Black(#000000)` 색상으로 렌더됩니다.
-
-<Canvas>
-  <Story name="Preview">
-    <Icon name="add-circle" size={50} />
-    <Icon name="airplane" size={50} />
-    <Icon name="battery-charging" type="filled" size={50} />
-    <Icon name="logo-octocat" size={50} />
-    <Icon name="logo-npm" size={50} />
-  </Story>
-</Canvas>
-
-## Types
-
-ionicons는 `filled`, `outline`, `sharp` 총 3가지의 아이콘 타입을 제공하고 있습니다.
-
-단, `logo-*` 패턴의 이름을 가진 로고 아이콘의 경우 `filled` 타입밖에 존재하지 않기 때문에, 어떤 속성을 넘기더라도 `Icon` 컴포넌트 내부에서 타입이 `filled`로 치환됩니다.
-
-<Canvas>
-  <Story name="Icon Types">
-    <Icon name="accessibility" type="filled" size={50} />
-    <Icon name="accessibility" type="outline" size={50} />
-    <Icon name="accessibility" type="sharp" size={50} />
-  </Story>
-</Canvas>
-
-## Colors
-
-`color` 프로퍼티는 아이콘의 색상을 정할 수 있습니다. 만약 아이콘의 타입이 `outline` 이라면 여러분이 입력한 색상 값은 `stroke` CSS 속성으로 치환되며, 아이콘이 `filled`나 `sharp` 타입이라면 `fill` CSS 속성으로 치환됩니다.
-
-<Canvas>
-  <Story name="Icon Colors">
-    <Icon name="accessibility" color="#000000" size={50} />
-    <Icon name="accessibility" color="#ff0000" size={50} />
-    <Icon name="accessibility" color="#48cfad" size={50} />
-    <Icon name="accessibility" color={colors.blue50} size={50} />
-  </Story>
-</Canvas>
-
-## Sizes
-
-`size` 프로퍼티로는 아이콘의 크기를 정할 수 있습니다. 단위는 `px`이며 여러분이 입력한 사이즈는 아이콘 SVG, 또는 PNG파일의 `width`와 `height`로 치환됩니다.
-
-<Canvas>
-  <Story name="Icon Sizes">
-    <Icon name="accessibility" />
-    <Icon name="accessibility" size={24} />
-    <Icon name="accessibility" size={36} />
-    <Icon name="accessibility" size={52} />
-  </Story>
-</Canvas>
diff --git a/legacy/stories/Components/Input/Components.tsx b/legacy/stories/Components/Input/Components.tsx
deleted file mode 100644
index 1a3156f1..00000000
--- a/legacy/stories/Components/Input/Components.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { useState } from 'react';
-import { Text, Input, Icon, colors } from 'src';
-
-export const Preview = () => {
-  const [state, setState] = useState('');
-  return (
-    <div>
-      <Text style={{ marginBottom: 16, display: 'block' }}>입력된 값: {state}</Text>
-      <Input value={state} onChange={(e) => setState(e.target.value)} />
-    </div>
-  );
-};
-
-export const Error = () => {
-  const [value, setValue] = useState('');
-  const isError = value === '';
-
-  return (
-    <Input
-      style={{ width: 300 }}
-      label="라벨이에요"
-      placeholder="텍스트를 입력하세요"
-      hasError={isError}
-      description={isError ? '빈 문자열은 허용되지 않습니다' : undefined}
-      onChange={(e) => setValue(e.target.value)}
-      right={
-        isError ? null : (
-          <Icon name="checkmark-circle" type="filled" color={colors.green50} size={20} />
-        )
-      }
-    />
-  );
-};
diff --git a/legacy/stories/Components/Input/data.ts b/legacy/stories/Components/Input/data.ts
deleted file mode 100644
index 718cc723..00000000
--- a/legacy/stories/Components/Input/data.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { TextInputType } from 'src/components/Input';
-
-export const types: TextInputType[] = [
-  'text',
-  'email',
-  'number',
-  'password',
-  'search',
-  'tel',
-  'url',
-];
-export const covertToTitlecase = (s: string) =>
-  `${s.charAt(0).toUpperCase()}${s.slice(1, s.length)}`;
diff --git a/legacy/stories/Components/Input/index.stories.mdx b/legacy/stories/Components/Input/index.stories.mdx
deleted file mode 100644
index 3f2b0798..00000000
--- a/legacy/stories/Components/Input/index.stories.mdx
+++ /dev/null
@@ -1,148 +0,0 @@
-import { Input, Text, colors, Icon } from 'src';
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import { TextInputType } from 'components/Input';
-import { types, covertToTitlecase } from './data';
-import { Preview, Error } from './Components';
-
-<Meta title="Components/Input" components={Input} />
-
-# Input Field
-
-- 사용자에게 텍스트 입력 및 수정을 가능케 하는 컴포넌트입니다
-- 아이콘을 추가해 사용자의 의도에 부합하는 정보를 제공할 수 있습니다
-- Default/Label/Placeholder/Disabled/Error/Types/Icon을 제공합니다
-
-<br />
-
-## Quick Start
-
-Input 컴포넌트의 가장 기본 형태는 아래의 예시처럼 간단하게 사용해볼 수 있습니다.
-
-```tsx
-import React, { useState } from 'react';
-import { Text, Input } from '@lubycon/ui-kit';
-
-function Preview() {
-  const [state, setState] = useState('');
-  return (
-    <div>
-      <Text style={{ marginBottom: 16, display: 'block' }}>입력된 값: {state}</Text>
-      <Input value={state} onChange={(e) => setState(e.target.value)} />
-    </div>
-  );
-}
-```
-
-## Preview
-
-가장 기본적인 형태의 Input 입니다.
-
-<Canvas>
-  <Story name="Preview">
-    <Preview />
-  </Story>
-</Canvas>
-
-## Label
-
-input에 대한 설명 및 정의를 label로 전달할 필요가 있을 경우 사용합니다.
-
-<Canvas>
-  <Story name="Label">
-    <Input label="라벨이에요" />
-  </Story>
-</Canvas>
-
-## Placeholder
-
-Input filed 내에 placeholder를 배치해 어떤 텍스트를 입력해야되는지 정보를 제공할 수 있습니다.
-
-<Canvas>
-  <Story name="Placeholder">
-    <Input label="라벨이에요" placeholder="텍스트를 입력하세요" />
-  </Story>
-</Canvas>
-
-## Disabled
-
-텍스트 입력이 불가하거나 제한된 input일 경우 사용합니다.
-
-<Canvas>
-  <Story name="Disabled">
-    <Input label="라벨이에요" placeholder="텍스트를 입력하세요" disabled={true} />
-  </Story>
-</Canvas>
-
-## Error
-
-허용되지 않는 텍스트 내용이 Input내에 입력됐을 경우 사용자에게 알려줄 수 있습니다.
-
-<Canvas>
-  <Story name="Error">
-    <Error />
-  </Story>
-</Canvas>
-
-## Types
-
-가장 빈번하게 사용되는 대표 Input types를 제공합니다. (예: text, email, number, password, search, tel, url)
-
-<Canvas>
-  <Story name="InputTypes">
-    <Text>
-      모바일에서는 인풋의 타입에 따라 다른 키보드가 노출되니, 모바일 환경에서 확인해보시는 것을
-      추천합니다.
-    </Text>
-    <ul>
-      {types.map((type) => (
-        <li key={type}>
-          <Input label={covertToTitlecase(type)} type={type} />
-        </li>
-      ))}
-    </ul>
-  </Story>
-</Canvas>
-
-## Left and Right
-
-Input에 들어갈 내용의 성격을 아이콘을 이용해 강조 표현할 때 사용합니다.
-
-<Canvas>
-  <Story name="LeftAndRight">
-    <div style={{ display: 'flex', flexDirection: 'column', maxWidth: 300 }}>
-      <Input label={'Left Area'} left={<Icon name="musical-note" type="filled" />} />
-      <Input label={'Right Area'} right={<Icon name="close-circle" type="filled" />} />
-      <Input
-        label={'Left And Right'}
-        left={<Icon name="musical-note" type="filled" />}
-        right={<Icon name="close-circle" type="filled" />}
-      />
-    </div>
-  </Story>
-</Canvas>
-
-## API
-
-### [Input](https://github.com/Lubycon/lubycon-ui-kit/blob/master/ui-kit/src/components/Input/index.tsx)
-
-<ArgsTable of={Input} />
-
-## Demo
-
-```tsx codesandbox=lubycon
-import '@lubycon/ui-kit/css/lubycon-ui-kit.min.css';
-import React, { useState } from 'react';
-import { Text, Input } from '@lubycon/ui-kit';
-
-function App() {
-  const [state, setState] = useState('');
-  return (
-    <div>
-      <Text style={{ marginBottom: 16, display: 'block' }}>입력된 값: {state}</Text>
-      <Input value={state} onChange={(e) => setState(e.target.value)} />
-    </div>
-  );
-}
-
-export default App;
-```
diff --git a/legacy/stories/Components/List/Components.tsx b/legacy/stories/Components/List/Components.tsx
deleted file mode 100644
index fb838613..00000000
--- a/legacy/stories/Components/List/Components.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { ListItem } from 'src';
-
-export const DummyItem = ({ onClick }: { onClick?: () => void }) => (
-  <ListItem
-    title="리스트 제목"
-    content="여기에 내용이 들어갑니다"
-    caption="캡션입니다"
-    onClick={onClick}
-  />
-);
-export const DummyItemWithoutCaption = () => (
-  <ListItem title="리스트 제목" content="여기에 내용이 들어갑니다" />
-);
-export const DummyItemWithoutTitle = () => (
-  <ListItem content="여기에 내용이 들어갑니다" caption="캡션입니다" />
-);
-export const noop = () => {};
diff --git a/legacy/stories/Components/List/index.stories.mdx b/legacy/stories/Components/List/index.stories.mdx
deleted file mode 100644
index 8f6620aa..00000000
--- a/legacy/stories/Components/List/index.stories.mdx
+++ /dev/null
@@ -1,148 +0,0 @@
-import { Button, List, ListItem, ListItemImage, colors, Icon } from 'src';
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { DummyItem, DummyItemWithoutCaption, DummyItemWithoutTitle, noop } from './Components';
-
-<Meta title="Components/List" components={List} />
-
-# List
-
-리스트는 세로 방향으로 순차적으로 나열하고 싶은 데이터를 표현할 수 있는 컴포넌트입니다.
-
-리스트는 컴포지션보다는 프로퍼티를 통해 데이터를 받는 형태로 작성되어있는데, 이는 많은 정보가 좁은 공간 안에 표현되는 리스트 컴포넌트의 특성 상 각 정보의 위계를 고정하고 높은 가독성을 유지하기 위해서 입니다.
-
-## Preview
-
-리스트 컴포넌트는 기본적으로 `title`, `content`, `caption` 3가지의 위계를 사용하여 정보를 표현하며, `List`는 HTML의 `ul` 태그와, `ListItem`은 `li` 태그와 대응됩니다.
-
-<Canvas>
-  <Story name="Preview">
-    <List>
-      <ListItem title="루비콘 UI Kit" content="리스트 컴포넌트" caption="5일전" />
-      <DummyItem />
-      <DummyItem />
-      <DummyItem />
-      <DummyItem />
-    </List>
-  </Story>
-</Canvas>
-
-## Without Caption
-
-<Canvas>
-  <Story name="WithoutCaption">
-    <List>
-      <ListItem title="루비콘 UI Kit" content="리스트 컴포넌트" />
-      <DummyItemWithoutCaption />
-      <DummyItemWithoutCaption />
-      <DummyItemWithoutCaption />
-      <DummyItemWithoutCaption />
-    </List>
-  </Story>
-</Canvas>
-
-## Without Title
-
-<Canvas>
-  <Story name="WithoutTitle">
-    <List>
-      <ListItem content="리스트 컴포넌트" caption="5일전" />
-      <DummyItemWithoutTitle />
-      <DummyItemWithoutTitle />
-      <DummyItemWithoutTitle />
-      <DummyItemWithoutTitle />
-    </List>
-  </Story>
-</Canvas>
-
-## Left and Right
-
-리스트 컴포넌트를 사용하다보면 사용자의 프로필 사진과 같은 이미지를 사용하거나 클릭이 가능한 요소라는 것을 표현하기 위해 아이콘을 사용하고 싶을 수 있습니다.
-
-그런 상황에서는 리스트 컴포넌트의 `left`나 `right` 프로퍼티를 통해 원하는 `ReactNode` 타입의 값을 주입하여 컴포넌트를 합성하면 됩니다.
-
-<Canvas>
-  <Story name="LeftAndRight">
-    <List>
-      <ListItem
-        left={<ListItemImage src="http://cogulmars.cafe24.com/img/04about_img01.png" />}
-        title="썸네일 조합형"
-        content="UI Kit에서 제공되는 이미지 컴포넌트를 사용한 예시입니다"
-      />
-      <ListItem
-        left={<ListItemImage src="http://cogulmars.cafe24.com/img/04about_img01.png" />}
-        title="썸네일 조합형"
-        content="UI Kit에서 제공되는 이미지 컴포넌트를 사용한 예시입니다"
-        caption="5일전"
-      />
-      <ListItem
-        left={
-          <img
-            src="http://cogulmars.cafe24.com/img/04about_img01.png"
-            style={{ width: 48, borderRadius: 4 }}
-          />
-        }
-        title="썸네일 조합형"
-        content="일반 img 태그를 사용한 예시입니다"
-        caption="5일전"
-      />
-      <ListItem
-        title="버튼 조합형"
-        content="자세히 보려면 클릭하세요"
-        right={<Icon name="chevron-forward" type="outline" size={24} color={colors.gray60} />}
-        onClick={noop}
-      />
-      <ListItem
-        title="버튼 조합형 자유"
-        content="자세히 보려면 클릭하세요"
-        right={<Button size="small">보러가기</Button>}
-      />
-      <ListItem
-        left={<ListItemImage src="http://cogulmars.cafe24.com/img/04about_img01.png" />}
-        title="썸네일 + 버튼 조합형"
-        content="자세히 보려면 클릭하세요"
-        right={<Icon name="chevron-forward" type="outline" size={24} color={colors.gray60} />}
-        onClick={noop}
-      />
-    </List>
-  </Story>
-</Canvas>
-
-## Clickable
-
-리스트 컴포넌트에 `onClick` 이벤트 핸들러를 주입하게 되면 리스트 컴포넌트는 스스로 클릭이 가능한 요소의 UX를 표현합니다.
-
-`onClick` 이벤트 핸들러를 사용하면 리스트 컴포넌트에 마우스가 위치했을 때 `cursor: pointer` 스타일이 적용되고, 스타일을 변경하여 사용자에게 이 요소가 클릭이 가능하다는 UX를 전달합니다.
-
-<Canvas>
-  <Story name="Clickable">
-    <List>
-      <ListItem title="루비콘 UI Kit" content="리스트 컴포넌트" caption="5일전" onClick={noop} />
-      <DummyItem onClick={noop} />
-      <DummyItem onClick={noop} />
-      <DummyItem onClick={noop} />
-      <DummyItem onClick={noop} />
-    </List>
-  </Story>
-</Canvas>
-
-## Multiline
-
-기본적으로 리스트 컴포넌트는 많은 양의 정보를 표현하도록 설계되지 않았기 때문에, `content` 영역에 두 줄 이상의 텍스트가 표현된다면 자동으로 말줄임표를 삽압합니다.
-
-좁은 공간에 많은 정보가 표현되는 리스트 컴포넌트의 특성 상 긴 텍스트를 모두 보여주면 정보의 위계가 흩트려 질 수도 있기 때문에, 이런 경우에는 리스트에서 모든 정보를 보여주기 보다는 사용자가 리스트를 클릭했을 때 더 자세한 정보를 볼 수 있도록 만들어주세요.
-
-<Canvas>
-  <Story name="Multiline">
-    <List style={{ maxWidth: 375 }}>
-      <ListItem
-        title="루비콘 UI Kit"
-        content="리스트 컴포넌트의 내용이 두 줄이 넘어가면 말줄임으로 처리됩니다. 루비콘 UI kit 은 오픈소스로 배포되는 한국형 라이브러리입니다"
-        caption="5일전"
-      />
-      <DummyItem />
-      <DummyItem />
-      <DummyItem />
-      <DummyItem />
-    </List>
-  </Story>
-</Canvas>
diff --git a/legacy/stories/Components/Modal/Components.tsx b/legacy/stories/Components/Modal/Components.tsx
deleted file mode 100644
index ce0ae4ae..00000000
--- a/legacy/stories/Components/Modal/Components.tsx
+++ /dev/null
@@ -1,234 +0,0 @@
-import React, { useState } from 'react';
-import { Modal, ModalHeader, ModalContent, ModalFooter } from 'src';
-import Button from 'components/Button';
-import { useModal } from 'contexts/Modal';
-import { Column, Row } from 'src/components/Grid';
-
-interface FooterProps {
-  size: 'small' | 'medium';
-  showCancelBtn?: boolean;
-  closeModal: () => void;
-}
-type ModalFn = (state: boolean) => void;
-
-const DefaultModalHeader = () => <ModalHeader>타이틀입니다</ModalHeader>;
-const DefaultModdalFooter = ({ size, showCancelBtn = true, closeModal }: FooterProps) => {
-  return (
-    <ModalFooter>
-      {showCancelBtn ? (
-        <Button size={size} onClick={closeModal}>
-          취소
-        </Button>
-      ) : null}
-      <Button size={size} type="informative" onClick={closeModal}>
-        저장하기
-      </Button>
-    </ModalFooter>
-  );
-};
-
-const margin = {
-  marginRight: 16,
-  marginBottom: 32,
-};
-
-export const Preview = () => {
-  const [showSmallModal, setShowSmallModal] = useState(false);
-  const [showMediumModal, setShowMediumModal] = useState(false);
-
-  const handleOpen = (msg: string, openModalFn: ModalFn) => {
-    console.info(msg);
-    openModalFn(true);
-  };
-  const handleClose = (msg: string, closeModalFn: ModalFn) => {
-    console.info(msg);
-    closeModalFn(false);
-  };
-
-  return (
-    <Column xs={6} style={{ marginBottom: 32 }}>
-      <Button
-        type="informative"
-        onClick={() => handleOpen('Open small modal', setShowSmallModal)}
-        style={margin}
-      >
-        Small 사이즈 모달 열기
-      </Button>
-      <Modal
-        show={showSmallModal}
-        onClose={() => handleClose('Close small modal', setShowSmallModal)}
-      >
-        <DefaultModalHeader />
-        <ModalContent>
-          <div>여기에 본문 텍스트가 들어갑니다</div>
-          <div>여기에 본문 텍스트가 들어갑니다</div>
-        </ModalContent>
-        <DefaultModdalFooter
-          size="small"
-          closeModal={() => handleClose('Close small modal', setShowSmallModal)}
-        />
-      </Modal>
-
-      <Button
-        size="medium"
-        type="informative"
-        onClick={() => handleOpen('Open medium modal', setShowMediumModal)}
-      >
-        Medium 사이즈 모달 열기
-      </Button>
-      <Modal
-        size="medium"
-        show={showMediumModal}
-        onClose={() => handleClose('Close medium modal', setShowMediumModal)}
-      >
-        <DefaultModalHeader />
-        <ModalContent>
-          텍스트 내용이 많을 경우에는 중간 크기의 모달 사용을 권장합니다. 여기에 본문 텍스트를
-          입력해 주세요.
-        </ModalContent>
-        <DefaultModdalFooter
-          size="medium"
-          closeModal={() => handleClose('Close medium modal', setShowMediumModal)}
-        />
-      </Modal>
-    </Column>
-  );
-};
-
-export const ModalHooks = () => {
-  const { openModal, closeModal } = useModal();
-
-  return (
-    <Row>
-      <Column xs={8} style={{ marginBottom: 32 }}>
-        <Button
-          style={margin}
-          onClick={() => {
-            const modalId = openModal({
-              content: (
-                <ModalContent>
-                  본문 텍스트와 타이틀은 용도에 따라 별도로 구성이 가능합니다
-                </ModalContent>
-              ),
-              footer: <DefaultModdalFooter size="small" closeModal={() => closeModal(modalId)} />,
-            });
-          }}
-        >
-          small 타이틀 제외
-        </Button>
-        <Button
-          style={margin}
-          onClick={() => {
-            const modalId = openModal({
-              header: <DefaultModalHeader />,
-              content: (
-                <ModalContent>
-                  <div>여기에 본문 텍스트가 들어갑니다</div>
-                  <div>여기에 본문 텍스트가 들어갑니다</div>
-                </ModalContent>
-              ),
-              footer: (
-                <DefaultModdalFooter
-                  size="small"
-                  showCancelBtn={false}
-                  closeModal={() => closeModal(modalId)}
-                />
-              ),
-            });
-          }}
-        >
-          small 취소 버튼 제외
-        </Button>
-        <Button
-          style={margin}
-          onClick={() => {
-            const modalId = openModal({
-              content: (
-                <ModalContent>
-                  본문 텍스트와 타이틀은 용도에 따라 별도로 구성이 가능합니다
-                </ModalContent>
-              ),
-              footer: (
-                <DefaultModdalFooter
-                  size="small"
-                  showCancelBtn={false}
-                  closeModal={() => closeModal(modalId)}
-                />
-              ),
-            });
-          }}
-        >
-          small 타이틀, 취소 버튼 제외
-        </Button>
-        <Button
-          style={margin}
-          onClick={() => {
-            const modalId = openModal({
-              content: (
-                <ModalContent>
-                  텍스트 내용이 많을 경우에는 중간 크기의 모달 사용을 권장합니다. 여기에 본문
-                  텍스트를 입력해주세요.
-                </ModalContent>
-              ),
-              footer: (
-                <DefaultModdalFooter
-                  size="medium"
-                  showCancelBtn={true}
-                  closeModal={() => closeModal(modalId)}
-                />
-              ),
-              size: 'medium',
-            });
-          }}
-        >
-          medium 타이틀 제외
-        </Button>
-        <Button
-          style={margin}
-          onClick={() => {
-            const modalId = openModal({
-              header: <DefaultModalHeader />,
-              content: (
-                <ModalContent>
-                  텍스트 내용이 많을 경우에는 중간 크기의 모달 사용을 권장합니다. 여기에 본문
-                  텍스트를 입력해주세요.
-                </ModalContent>
-              ),
-              footer: (
-                <DefaultModdalFooter
-                  size="medium"
-                  showCancelBtn={false}
-                  closeModal={() => closeModal(modalId)}
-                />
-              ),
-              size: 'medium',
-            });
-          }}
-        >
-          medium 취소 버튼 제외
-        </Button>
-        <Button
-          style={margin}
-          onClick={() => {
-            const modalId = openModal({
-              content: (
-                <ModalContent>
-                  본문 텍스트와 타이틀은 용도에 따라 별도로 구성이 가능합니다
-                </ModalContent>
-              ),
-              footer: (
-                <DefaultModdalFooter
-                  size="small"
-                  showCancelBtn={false}
-                  closeModal={() => closeModal(modalId)}
-                />
-              ),
-            });
-          }}
-        >
-          medium 타이틀, 취소 버튼 제외
-        </Button>
-      </Column>
-    </Row>
-  );
-};
diff --git a/legacy/stories/Components/Modal/index.stories.mdx b/legacy/stories/Components/Modal/index.stories.mdx
deleted file mode 100644
index 1ed42df8..00000000
--- a/legacy/stories/Components/Modal/index.stories.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Modal, ModalHeader, ModalContent, ModalFooter } from 'src';
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Preview, ModalHooks } from './Components';
-
-<Meta title="Components/Modal" components={Modal} />
-
-# Modal
-
-모달 컴포넌트는 사용자 화면 위에 나타나는 또 다른 UI 입니다. 모달 컴포넌트가 열리게 되면, 모달 영역 내의 콘텐츠만 조작이 가능합니다. 현재 페이지 영역 내에서 더 자세한 정보를 보여주고 싶을 때 사용할 수 있습니다.
-
-> **주의사항**
->
-> Modal 컴포넌트는 컴포넌트 합성 방식으로 사용이 가능합니다. Lubycon UI Kit에서 지정한 헤더와 푸터같은 특정 영역은 별도의 컴포넌트로 분리되어 있습니다
-
-## Preview
-
-기본 모달 컴포넌트 형태입니다. `Modal` 컴포넌트 내부를 사용자의 임의로 구성하여 사용할 수 있습니다. 모달 내부에는 적어도 한 개 이상의 컴포넌트가 들어가야 합니다. size나 모달의 상태에 따른 여러가지 이벤트 핸들러를 등록할 수 있습니다.
-
-<Canvas>
-  <Story name="Preview">
-    <Preview />
-  </Story>
-</Canvas>
-
-## With Hooks
-
-모달 컴포넌트를 명령형으로 사용하는 방법입니다. openModal 함수의 인자로 컴포넌트를 정의해서 사용할 수 있습니다. 해당 함수는 모달의 ID 값을 반환하며, 이 ID 값을 closeModl 함수의 인자로 넘겨서 해당 모달이 닫히도록 만들 수 있습니다.
-
-<Canvas>
-  <Story name="With Hooks">
-    <ModalHooks />
-  </Story>
-</Canvas>
diff --git a/legacy/stories/Components/ProgressBar/Components.tsx b/legacy/stories/Components/ProgressBar/Components.tsx
deleted file mode 100644
index 1b8d3ea8..00000000
--- a/legacy/stories/Components/ProgressBar/Components.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { ProgressBar, Text } from 'src';
-import { MAX_VALUE, labelPosition } from './data';
-
-const getProgressValue = (value: number) => (value === MAX_VALUE ? 0 : value + 1);
-
-export const Preview = () => {
-  const [value, setValue] = useState(0);
-
-  useEffect(() => {
-    const interval = setInterval(() => setValue(getProgressValue), 100);
-    return () => {
-      clearInterval(interval);
-    };
-  }, []);
-
-  return <ProgressBar value={value} max={MAX_VALUE} />;
-};
-
-export const Label = () => {
-  const [value, setValue] = useState(0);
-
-  useEffect(() => {
-    const interval = setInterval(() => setValue(getProgressValue), 100);
-    return () => {
-      clearInterval(interval);
-    };
-  }, []);
-
-  return (
-    <ul style={{ margin: 0, padding: 0 }}>
-      {labelPosition.map((position) => (
-        <li style={{ listStyle: 'none', marginBottom: 16 }} key={position}>
-          <Text fontWeight="bold">{position}</Text>
-          <ProgressBar value={value} max={MAX_VALUE} showLabel={true} labelPosition={position} />
-        </li>
-      ))}
-    </ul>
-  );
-};
-
-export const LabelFormatter = () => {
-  const [value, setValue] = useState(0);
-
-  useEffect(() => {
-    const interval = setInterval(() => setValue(getProgressValue), 100);
-    return () => {
-      clearInterval(interval);
-    };
-  }, []);
-
-  return (
-    <>
-      <ProgressBar
-        style={{ marginBottom: 16 }}
-        value={value}
-        max={MAX_VALUE}
-        showLabel={true}
-        labelFormatter={(value) => `${value}/${100}`}
-      />
-      <ProgressBar
-        style={{ marginBottom: 16 }}
-        value={value}
-        max={MAX_VALUE}
-        showLabel={true}
-        labelFormatter={(value) =>
-          value > MAX_VALUE * 0.5 ? '거의 다 왔어요!' : `현재 값은 ${value}입니다`
-        }
-      />
-      <ProgressBar
-        style={{ marginBottom: 16 }}
-        value={value}
-        max={MAX_VALUE}
-        showLabel={true}
-        labelFormatter={(value) => `${Math.floor((value / MAX_VALUE) * 100)}%`}
-      />
-    </>
-  );
-};
diff --git a/legacy/stories/Components/ProgressBar/data.ts b/legacy/stories/Components/ProgressBar/data.ts
deleted file mode 100644
index 0266838e..00000000
--- a/legacy/stories/Components/ProgressBar/data.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { ProgressBarLabelPosition } from 'src/components/ProgressBar';
-
-export const MAX_VALUE = 100;
-export const labelPosition: ProgressBarLabelPosition[] = ['top', 'bottom', 'left', 'right'];
diff --git a/legacy/stories/Components/ProgressBar/index.stories.mdx b/legacy/stories/Components/ProgressBar/index.stories.mdx
deleted file mode 100644
index 7afd077a..00000000
--- a/legacy/stories/Components/ProgressBar/index.stories.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { ProgressBar } from 'src';
-import { Preview, Label, LabelFormatter } from './Components';
-
-<Meta title="Components/ProgressBar" components={ProgressBar} />
-
-# ProgressBar
-
-ProgressBar 컴포넌트는 진행 상태를 시각적으로 나타내는 컴포넌트 입니다. Lubycon UI Kit에서는 현재 긴 막대 모양의 디자인만 제공하고 있습니다.
-
-## Preview
-
-가장 기본적인 형태의 ProgressBar 입니다. 별도의 텍스트 없이 ProgressBar만 렌더링 됩니다.
-
-<Canvas>
-  <Story name="Preview">
-    <Preview />
-  </Story>
-</Canvas>
-
-## Label
-
-Label을 함께 노출합니다. 기본으로 지정된 위치는 ProgressBar의 상단이며, 값은 현재 진행 정도를 나타내는 숫자입니다. `top`, `bottom`, `left`, `right` 값을 통해 변경할 수 있습니다.
-
-<Canvas>
-  <Story name="Label">
-    <Label />
-  </Story>
-</Canvas>
-
-## Label Formatter
-
-Label의 형식을 지정합니다. 현재 진행 값 / 최대값 등 다양한 형태로 Label을 활용할 수 있습니다.
-
-<Canvas>
-  <Story name="Label Formatter">
-    <LabelFormatter />
-  </Story>
-</Canvas>
diff --git a/legacy/stories/Components/Radio/index.stories.mdx b/legacy/stories/Components/Radio/index.stories.mdx
deleted file mode 100644
index 1a7f3dce..00000000
--- a/legacy/stories/Components/Radio/index.stories.mdx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { Radio } from 'src';
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-
-<Meta title="Components/Radio" components={Radio} />
-
-# Radio
-
-Radio 컴포넌트는 연관성이 있는 옵션 중 한 개를 선택해야 하는 상황에서 사용합니다.
-동일한 그룹 내에서 한 가지만 선택 표시 됩니다.
-
-## Preview
-
-<Canvas>
-  <Story name="Preview">
-    <Radio label="라디오1" name="radio" />
-    <Radio label="라디오2" name="radio" />
-  </Story>
-</Canvas>
-
-## Button Status
-
-Radio 타입 input 엘리먼트에서 제공하고 있는 기본 속성을 통해서,
-Radio 버튼의 상태를 사용자의 의도대로 조정할 수 있습니다.
-
-<Canvas>
-  <Story name="Disabled">
-    <Radio label="라디오1" name="radio" />
-    <Radio label="라디오2" name="radio" />
-    <Radio label="라디오3" name="radio" disabled />
-    <Radio label="라디오4" name="radio" defaultChecked={true} disabled />
-  </Story>
-</Canvas>
-
-## Inline
-
-기본적으로 Radio 컴포넌트는 `display: block`으로 동작하지만,
-`display` 속성을 통해서 `inline`으로 적용 가능합니다.
-
-<Canvas>
-  <Story name="Inline">
-    <Radio display="inline" label="라디오1" name="radio" style={{ marginRight: 16 }} />
-    <Radio display="inline" label="라디오2" name="radio" />
-  </Story>
-</Canvas>
-
-## Demo
-
-```tsx codesandbox=lubycon
-import '@lubycon/ui-kit/css/lubycon-ui-kit.min.css';
-import React from 'react';
-import { Radio } from '@lubycon/ui-kit';
-
-function App() {
-  return (
-    <div>
-      <Radio label="라디오1" name="radio" />
-      <Radio label="라디오2" name="radio" />
-    </div>
-  );
-}
-
-export default App;
-```
diff --git a/legacy/stories/Components/Selection/Components.tsx b/legacy/stories/Components/Selection/Components.tsx
deleted file mode 100644
index 063ead9e..00000000
--- a/legacy/stories/Components/Selection/Components.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React, { useState } from 'react';
-import { Selection, Text } from 'src';
-
-export const Preview = () => {
-  const [state, setState] = useState('');
-
-  return (
-    <div>
-      <Selection onChange={(e) => setState(e.target.value)}>
-        <option>옵션1</option>
-        <option>옵션2</option>
-        <option>옵션3</option>
-      </Selection>
-      <Text style={{ display: 'block' }}>선택된 값은 {state}입니다.</Text>
-    </div>
-  );
-};
diff --git a/legacy/stories/Components/Selection/index.stories.mdx b/legacy/stories/Components/Selection/index.stories.mdx
deleted file mode 100644
index 00031fec..00000000
--- a/legacy/stories/Components/Selection/index.stories.mdx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Selection, Text } from 'src';
-import { Preview } from './Components';
-
-<Meta title="Components/Selection" components={Selection} />
-
-# Selection
-
-## Preview
-
-<Canvas>
-  <Story name="Preview">
-    <Preview />
-  </Story>
-</Canvas>
-
-## Sizes
-
-<Canvas>
-  <Story name="Sizes">
-    <ul>
-      {['small', 'medium', 'large'].map((size) => (
-        <li key={size} style={{ marginBottom: 16, listStyle: ' none' }}>
-          <Selection placeholder={size} size={size}>
-            <option>옵션1</option>
-            <option>옵션2</option>
-            <option>옵션3</option>
-          </Selection>
-        </li>
-      ))}
-    </ul>
-  </Story>
-</Canvas>
-
-## Disabled
-
-<Canvas>
-  <Story name="Disabled">
-    <Selection disabled>
-      <option>옵션1</option>
-      <option>옵션2</option>
-      <option>옵션3</option>
-    </Selection>
-  </Story>
-</Canvas>
-
-## Placeholder
-
-<Canvas>
-  <Story name="Placeholder">
-    <Selection placeholder="어느 곳에 사시나요?">
-      <option>서울</option>
-      <option>경기</option>
-      <option>인천</option>
-      <option>충남</option>
-    </Selection>
-  </Story>
-</Canvas>
diff --git a/legacy/stories/Components/Snackbar/Components.tsx b/legacy/stories/Components/Snackbar/Components.tsx
deleted file mode 100644
index 68c91878..00000000
--- a/legacy/stories/Components/Snackbar/Components.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import React, { useState } from 'react';
-import { Snackbar, Button, useSnackbar } from 'src';
-import { SnackbarAlign } from 'src/components/Snackbar';
-
-export const OpenSnackbar = () => {
-  const [show, setShow] = useState(false);
-  const handleClose = () => setShow(false);
-
-  return (
-    <div>
-      <Button onClick={() => setShow(true)} style={{ marginBottom: 8 }}>
-        스낵바 열기
-      </Button>
-      <Snackbar
-        show={show}
-        message={`16개의 이미지가\n“동물" 폴더에 추가되었습니다.`}
-        button="실행취소"
-        onClick={handleClose}
-      />
-    </div>
-  );
-};
-
-export const LongText = () => {
-  const [show, setShow] = useState(false);
-  const handleClose = () => setShow(false);
-
-  return (
-    <div>
-      <Button onClick={() => setShow(true)} style={{ marginBottom: 8 }}>
-        텍스트 메시지가 긴 스낵바 열기
-      </Button>
-      <Snackbar
-        show={show}
-        message={`동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리나라 만세\n무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세`}
-        button="애국가 더 부르기"
-        onClick={handleClose}
-      />
-    </div>
-  );
-};
-
-export const AutoHide = () => {
-  const [show, setShow] = useState(true);
-  const handleClose = () => setShow(false);
-
-  return (
-    <div>
-      <Snackbar show={true} message="데이터 전송이 완료되었습니다." button="실행취소" />
-      <Snackbar
-        show={show}
-        autoHideDuration={3000}
-        onHide={() => setShow(true)}
-        onClose={() => setShow(false)}
-        message={`16개의 이미지가\n“동물" 폴더에 추가되었습니다.`}
-        button="실행취소"
-        onClick={handleClose}
-      />
-    </div>
-  );
-};
-
-export const SnackbarHooks = () => {
-  const { openSnackbar, closeSnackbar } = useSnackbar();
-
-  return (
-    <div>
-      <Button
-        onClick={() => {
-          const id = openSnackbar({
-            message: `파일이 휴지통으로 이동되었습니다.`,
-            button: '실행취소',
-            onClick: () => closeSnackbar(id),
-          });
-        }}
-      >
-        스낵바 열기
-      </Button>
-    </div>
-  );
-};
-
-const aligns: SnackbarAlign[] = ['left', 'center', 'right'];
-export const Aligns = () => {
-  const { openSnackbar, closeSnackbar } = useSnackbar();
-  return (
-    <div>
-      {aligns.map((align) => (
-        <Button
-          key={align}
-          onClick={() => {
-            const id = openSnackbar({
-              message: `파일이 휴지통으로 이동되었습니다.`,
-              button: '실행취소',
-              align,
-              onClick: () => closeSnackbar(id),
-            });
-          }}
-        >
-          {align.toUpperCase()}
-        </Button>
-      ))}
-    </div>
-  );
-};
-
-export const onClick = () => {
-  const { openSnackbar, closeSnackbar } = useSnackbar();
-  const cancelExecution = (id: string) => {
-    alert('실행 취소 완료');
-    closeSnackbar(id);
-  };
-  return (
-    <div>
-      <Button
-        onClick={() => {
-          const id = openSnackbar({
-            message: `파일이 휴지통으로 이동되었습니다.`,
-            button: '실행취소',
-            onClick: () => cancelExecution(id),
-          });
-        }}
-      >
-        스낵바 열기
-      </Button>
-    </div>
-  );
-};
-
-export const MultipleButton = () => {
-  const { openSnackbar, closeSnackbar } = useSnackbar();
-  const cancelExecution = (id: string) => {
-    alert('실행 취소 완료');
-    closeSnackbar(id);
-  };
-  return (
-    <div>
-      <Button
-        onClick={() => {
-          const id = openSnackbar({
-            message: '메세지가 전송되었습니다.',
-            button: (
-              <>
-                <Button onClick={() => cancelExecution(id)}>실행취소</Button>
-                <Button onClick={() => alert('메세지 보기 클릭')}>메세지 보기</Button>
-              </>
-            ),
-          });
-        }}
-      >
-        스낵바 열기
-      </Button>
-    </div>
-  );
-};
diff --git a/legacy/stories/Components/Snackbar/index.stories.mdx b/legacy/stories/Components/Snackbar/index.stories.mdx
deleted file mode 100644
index 10da0c65..00000000
--- a/legacy/stories/Components/Snackbar/index.stories.mdx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Snackbar, Button } from 'src';
-import {
-  OpenSnackbar,
-  LongText,
-  AutoHide,
-  SnackbarHooks,
-  Aligns,
-  MultipleButton,
-} from './Components';
-
-<Meta title="Components/Snackbar" components={Snackbar} />
-
-# Snackbar
-
-스낵바는 일종의 가이드 팝업입니다. 사용자에게 수행된 작업이 무엇인지 알려주거나, 어떤 것을 수행해야 하는지 알려주는데 활용할 수 있습니다.
-
-> 주의사항
->
-> - '닫기' 또는 '취소'의 구현은 사용자의 선택 사항입니다
-> - 한 번에 하나의 스낵바만 표현됩니다
-> - 스낵바는 모달보다 우선순위가 낮습니다. 따라서 사용자의 경험을 방해하지 않는다는 원칙 하에 배치되며, 시간의 경과에 따라 자동으로 사라집니다
-> - 모바일에서 텍스트는 최대 두 줄까지 입력 가능합니다
-
-## Preview
-
-기본 형태입니다. 또한 스낵바 컴포넌트의 버튼에 이벤트를 할당할 수 있습니다. 해당 버튼 클릭시 별도의 가이드 팝업이 나오는 등 사용자가 원하는 인터렉션을 추가할 수 있습니다.
-
-<Canvas>
-  <Story name="Preview">
-    <Snackbar show={true} message="데이터 전송이 완료되었습니다." button="닫기" />
-    <Snackbar
-      show={true}
-      message="데이터 전송이 완료되었습니다."
-      button={<Button onClick={() => console.log('버튼이 클릭되었습니다')}>닫기</Button>}
-    />
-  </Story>
-</Canvas>
-
-## Open
-
-<Canvas>
-  <Story name="Open Snackbar">
-    <OpenSnackbar />
-  </Story>
-</Canvas>
-
-## Long Text
-
-<Canvas>
-  <Story name="Long Text">
-    <LongText />
-  </Story>
-</Canvas>
-
-## Auto Hide
-
-정해진 시간이 지나면 스낵바가 자동으로 사라지도록 만듭니다.
-
-<Canvas>
-  <Story name="Auto Hide">
-    <AutoHide />
-  </Story>
-</Canvas>
-
-## With Hooks
-
-스낵바 컴포넌트는 명령형으로 렌더하는 방법이 있습니다. 별도의 컨텍스트를 제공합니다. 명령형으로 렌더된 스낵바는 3초 뒤 자동으로 사라집니다
-
-<Canvas>
-  <Story name="With Hooks">
-    <SnackbarHooks />
-  </Story>
-</Canvas>
-
-## Aligns
-
-스낵바가 나타나는 위치를 결정할 수 있습니다. 기본적으로는 뷰포트의 왼쪽에 렌더됩니다
-
-<Canvas>
-  <Story name="Aligns">
-    <Aligns />
-  </Story>
-</Canvas>
-
-## Multiple Buttons
-
-스낵바 컴포넌트에 여러 개의 버튼을 할당할 수 있습니다
-
-<Canvas>
-  <Story name="Multiple Buttons">
-    <MultipleButton />
-  </Story>
-</Canvas>
diff --git a/legacy/stories/Components/Switch/index.stories.mdx b/legacy/stories/Components/Switch/index.stories.mdx
deleted file mode 100644
index 40802db1..00000000
--- a/legacy/stories/Components/Switch/index.stories.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Text, Switch, colors } from 'src';
-
-<Meta title="Components/Switch" components={Switch} />
-
-# Switch
-
-## Preview
-
-항목을 켜거나 끄는 등 독립적으로 제어 할 수 있는 경우 라디오 버튼 대신 스위치를 사용해야합니다.
-
-<Canvas>
-  <Story name="Preview">
-    <div style={{ padding: 0 }}>
-      <Switch label={'Off'} style={{ marginBottom: '23.17px' }} />
-      <Switch defaultChecked={true} label={'On'} />
-    </div>
-  </Story>
-</Canvas>
-
-## Inline
-
-<Canvas>
-  <Story name="Inline">
-    <Switch display="inline" label="Off" style={{ marginRight: '20px' }} />
-    <Switch defaultChecked={true} display="inline" label="On" />
-  </Story>
-</Canvas>
diff --git a/legacy/stories/Components/Table/data.ts b/legacy/stories/Components/Table/data.ts
deleted file mode 100644
index bff868cc..00000000
--- a/legacy/stories/Components/Table/data.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const header = ['제목', '제목', '제목', '제목', '제목'];
-export const contents = ['내용', '내용을 입력하세요', '내용', '내용을 입력하세요', '내용'];
-export const iterator = [undefined, undefined, undefined, undefined, undefined, undefined];
diff --git a/legacy/stories/Components/Table/index.stories.mdx b/legacy/stories/Components/Table/index.stories.mdx
deleted file mode 100644
index 4924baa5..00000000
--- a/legacy/stories/Components/Table/index.stories.mdx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Table, TableHead, TableBody, TableRow, TableCell } from 'src';
-import { header, contents, iterator } from './data';
-
-<Meta title="Components/Table" components={{ Table, TableHead, TableBody, TableRow, TableCell }} />
-
-# Table
-
-테이블 태그를 사용한 기본적인 테이블 컴포넌트를 제공합니다. 현재 별도의 기능은 추가되지 않은 상태입니다.
-
-## Preview
-
-column과 row 영역이 정의된 기본적인 테이블 형태입니다.
-
-<Canvas>
-  <Story name="Preview">
-    <Table>
-      <TableHead>
-        <TableRow>
-          {header.map((name, i) => (
-            <TableCell key={`th-${i}`}>{name}</TableCell>
-          ))}
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {iterator.map((_, rowIdx) => (
-          <TableRow key={`tbody-row-${rowIdx}`}>
-            {contents.map((content, contentIdx) => (
-              <TableCell key={`td-${contentIdx}`}>{content}</TableCell>
-            ))}
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  </Story>
-</Canvas>
diff --git a/legacy/stories/Components/Tabs/Components.tsx b/legacy/stories/Components/Tabs/Components.tsx
deleted file mode 100644
index 01caa788..00000000
--- a/legacy/stories/Components/Tabs/Components.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { PropsWithChildren, useState } from 'react';
-import { TabsItem, Tabs } from 'src';
-import { tabs } from './data';
-
-const TabContent = ({ children }: PropsWithChildren<unknown>) => {
-  return <div style={{ padding: 20 }}>{children}</div>;
-};
-
-export const Preview = () => {
-  const [selectedTab, selectTab] = useState(tabs[0].value);
-
-  return (
-    <div>
-      <Tabs selectedValue={selectedTab} onChange={selectTab}>
-        {tabs.map((item) => (
-          <TabsItem key={item.value} value={item.value} disabled={item.disabled}>
-            {item.text}
-          </TabsItem>
-        ))}
-      </Tabs>
-      {tabs.map((item) => {
-        return item.value === selectedTab ? (
-          <TabContent key={item.value}>{item.text}이 선택되었습니다!</TabContent>
-        ) : null;
-      })}
-    </div>
-  );
-};
diff --git a/legacy/stories/Components/Tabs/data.ts b/legacy/stories/Components/Tabs/data.ts
deleted file mode 100644
index fa6b4e36..00000000
--- a/legacy/stories/Components/Tabs/data.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export const tabs = [
-  {
-    value: 'first',
-    text: '첫번째 탭',
-    disabled: false,
-  },
-  {
-    value: 'second',
-    text: '두번째 태애애애애앱',
-    disabled: false,
-  },
-  {
-    value: 'third',
-    text: '세번째 탭',
-    disabled: false,
-  },
-  {
-    value: 'forth',
-    text: '네번째 탭',
-    disabled: true,
-  },
-  {
-    value: 'fifth',
-    text: '다섯번째 탭',
-    disabled: false,
-  },
-];
diff --git a/legacy/stories/Components/Tabs/index.stories.mdx b/legacy/stories/Components/Tabs/index.stories.mdx
deleted file mode 100644
index 85bd0b6b..00000000
--- a/legacy/stories/Components/Tabs/index.stories.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Tabs } from 'src';
-import { Preview } from './Components';
-
-<Meta title="Components/Tabs" components={Tabs} />
-
-# Tabs
-
-## Preview
-
-<Canvas>
-  <Story name="Preview">
-    <Preview />
-  </Story>
-</Canvas>
diff --git a/legacy/stories/Components/Tag/data.ts b/legacy/stories/Components/Tag/data.ts
deleted file mode 100644
index 1207afec..00000000
--- a/legacy/stories/Components/Tag/data.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { SemanticColor } from 'src/constants/colors';
-
-export const samples: Array<{ label: string; type?: SemanticColor }> = [
-  {
-    label: 'chore',
-    type: undefined,
-  },
-  {
-    label: '디자인 챕터',
-    type: 'positive',
-  },
-  {
-    label: '프론트엔드 챕터',
-    type: 'informative',
-  },
-  {
-    label: 'MVP',
-    type: 'negative',
-  },
-  {
-    label: 'feature',
-    type: 'notice',
-  },
-];
diff --git a/legacy/stories/Components/Tag/index.stories.mdx b/legacy/stories/Components/Tag/index.stories.mdx
deleted file mode 100644
index 0e4ee935..00000000
--- a/legacy/stories/Components/Tag/index.stories.mdx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Tag } from 'src';
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { samples } from './data';
-
-<Meta title="Components/Tag" components={Tag} />
-
-# Tag
-
-태그는 콘텐츠를 정렬하기 쉽게 만들어야합니다.
-
-## Preview
-
-기본 상태의 태그는 지정된 내용을 선택하는데 사용합니다.
-
-<Canvas>
-  <Story name="Preview">
-    <div style={{ display: 'flex' }}>
-      {samples.map(({ label, type }, index) => (
-        <Tag style={{ marginRight: 8 }} key={index} type={type}>
-          {label}
-        </Tag>
-      ))}
-    </div>
-  </Story>
-</Canvas>
-
-## With Delete Button
-
-태그에는 삭제 버튼을 추가할 수도 있습니다. 이 경우 태그는 호버 스타일을 가지게 됩니다.
-
-<Canvas>
-  <Story name="With Delete Button">
-    <div style={{ display: 'flex' }}>
-      {samples.map(({ label, type }, index) => (
-        <Tag
-          style={{ marginRight: 8 }}
-          key={index}
-          type={type}
-          onDelete={(label) => console.log(`${label} is deleted`)}
-        >
-          {label}
-        </Tag>
-      ))}
-    </div>
-  </Story>
-</Canvas>
diff --git a/legacy/stories/Components/Text/index.stories.mdx b/legacy/stories/Components/Text/index.stories.mdx
deleted file mode 100644
index 0f4a1c17..00000000
--- a/legacy/stories/Components/Text/index.stories.mdx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { Text } from 'src';
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-
-<Meta title="components/Text" components={Text} />
-
-# Text
-
-Text 컴포넌트는 사용자가 텍스트를 입력해야 하는 곳이라면 어디든지 편리하게 사용할 수 있는 컴포넌트입니다.
-
-## Quick Start
-
-Text 컴포넌트는 별도의 속성 설정 없이 간단하게 사용해볼 수 있습니다. <br />
-별도의 설정이 없는 경우
-`typography`는 `p1`, `fontWeight`는 `regular`가 기본적으로 적용되며
-`span` 엘리먼트로 렌더됩니다.
-
-```tsx
-import React from 'react';
-import { Text } from '@lubycon/ui-kit';
-
-function Preview() {
-  return <Text>내용을 입력해주세요.</Text>;
-}
-```
-
-## Typography
-
-Text 컴포넌트는 Lubycon UI Kit의 Typography 속성을 기반으로 만들어져 있습니다.<br />
-Lubycon UI Kit의 디자인 가이드를 바탕으로 폰트 사이즈를 지정할 수 있습니다.
-
-<Canvas>
-  <Story name="Typography">
-    <Text typography="h1">타이포그래피를 사용해보세요</Text>
-    <Text typography="subtitle" as="p">
-      타이포그래피 subtitle
-    </Text>
-    <Text typography="caption" as="p">
-      타이포그래피 caption
-    </Text>
-  </Story>
-</Canvas>
-
-## Font Weight
-
-`fontWeight`는 `regular`가 기본입니다. 사용자는 4가지 속성을 의도에 따라 적용할 수 있습니다.
-
-<Canvas>
-  <Story name="Font Weight">
-    <Text as="p" fontWeight="light">
-      폰트 굵기 얇게
-    </Text>
-    <Text as="p">폰트 굵기 보통</Text>
-    <Text as="p" fontWeight="bold">
-      폰트 굵기 굵게
-    </Text>
-    <Text as="p" fontWeight="black">
-      폰트 굵기 매우 굵게
-    </Text>
-  </Story>
-</Canvas>
-
-## As
-
-Text 컴포넌트는 기본적으로 `span` 태그로 렌더되지만,
-사용자의 의도에 따라 다양한 엘리먼트로 렌더하는게 가능합니다.
-
-<Canvas>
-  <Story name="As">
-    <Text as="a" href="https://github.com" target="blank">
-      앵커 태그입니다
-    </Text>
-    <Text as="h1">
-      h1 태그로 렌더해도 typography 속성을 별도 지정해주지 않으면 typography는 p1이 적용됩니다
-    </Text>
-    <Text as="button">버튼으로 렌더하는 것도 가능하기는 합니다</Text>
-  </Story>
-</Canvas>
-
-## Block
-
-각 엘리먼트는 고유의 속성을 그대로 상속받습니다. block 레벨 엘리먼트는 `block` 속성을 가지고 있습니다.
-
-<Canvas>
-  <Story name="Block">
-    <Text as="div">이 텍스트는 div태그로 렌더되며, display: block이 적용됩니다</Text>
-    <Text as="p">이 텍스트는 p태그로 렌더되며, display: block이 적용됩니다</Text>
-    <Text>이 텍스트는 span태그로 렌더되며, display: inline이 적용됩니다</Text>
-  </Story>
-</Canvas>
-
-## Demo
-
-```tsx codesandbox=lubycon
-import '@lubycon/ui-kit/css/lubycon-ui-kit.min.css';
-import React from 'react';
-import { Text } from '@lubycon/ui-kit';
-
-function App() {
-  return <Text>내용을 입력해주세요.</Text>;
-}
-
-export default App;
-```
diff --git a/legacy/stories/Components/Tooltip/Components.tsx b/legacy/stories/Components/Tooltip/Components.tsx
deleted file mode 100644
index e8cf881c..00000000
--- a/legacy/stories/Components/Tooltip/Components.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, { useState } from 'react';
-import { Tooltip, Button } from 'src';
-import { TooltipPosition } from 'src/components/Tooltip/types';
-import { positions } from './data';
-
-const TooltipButton = ({ children }: { children: TooltipPosition }) => {
-  const [show, setShow] = useState(false);
-  return (
-    <Tooltip show={show} message="툴팁입니다." position={children}>
-      <Button
-        type="informative"
-        onMouseEnter={() => setShow(true)}
-        onMouseLeave={() => setShow(false)}
-      >
-        {children}
-      </Button>
-    </Tooltip>
-  );
-};
-
-export const Preview = () => {
-  return (
-    <div style={{ paddingTop: 40 }}>
-      <Tooltip show={true} message="툴팁입니다.">
-        <Button type="informative">버튼입니다</Button>
-      </Tooltip>
-    </div>
-  );
-};
-
-export const Positions = () => {
-  return (
-    <ul style={{ padding: 100, margin: 0 }}>
-      {positions.map((p) => (
-        <li key={p} style={{ listStyle: 'none', marginBottom: 60 }}>
-          <TooltipButton>{p}</TooltipButton>
-        </li>
-      ))}
-    </ul>
-  );
-};
-
-export const AbsolutePositionTest = () => {
-  return (
-    <div style={{ position: 'absolute', top: 500, left: 500 }}>
-      <div style={{ position: 'relative' }}>
-        <Tooltip show={true} message="툴팁입니다.">
-          <Button>버튼입니다</Button>
-        </Tooltip>
-      </div>
-    </div>
-  );
-};
diff --git a/legacy/stories/Components/Tooltip/data.ts b/legacy/stories/Components/Tooltip/data.ts
deleted file mode 100644
index 657a6f75..00000000
--- a/legacy/stories/Components/Tooltip/data.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { TooltipPosition } from 'src/components/Tooltip/types';
-
-export const positions: TooltipPosition[] = [
-  'top-left',
-  'top-center',
-  'top-right',
-  'left',
-  'right',
-  'bottom-left',
-  'bottom-center',
-  'bottom-right',
-];
diff --git a/legacy/stories/Components/Tooltip/index.stories.mdx b/legacy/stories/Components/Tooltip/index.stories.mdx
deleted file mode 100644
index 30084d8c..00000000
--- a/legacy/stories/Components/Tooltip/index.stories.mdx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Tooltip } from 'src';
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Preview, Positions, AbsolutePositionTest } from './Components';
-
-<Meta title="Components/Tooltip" />
-
-# Tooltip
-
-## Preview
-
-<Canvas>
-  <Story name="Preview">
-    <Preview />
-  </Story>
-</Canvas>
-
-## Positions
-
-<Canvas>
-  <Story name="Positions">
-    <Positions />
-  </Story>
-</Canvas>
-
-## Position with Absolute
-
-<Canvas>
-  <Story name="Position with Absolute">
-    <AbsolutePositionTest />
-  </Story>
-</Canvas>
diff --git a/legacy/stories/Styles/Colors/data.ts b/legacy/stories/Styles/Colors/data.ts
deleted file mode 100644
index 2ab204fe..00000000
--- a/legacy/stories/Styles/Colors/data.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { ColorProperty, SemanticColor } from 'src/constants/colors';
-
-export const grayScaleNames = [
-  'gray100',
-  'gray90',
-  'gray80',
-  'gray70',
-  'gray60',
-  'gray50',
-  'gray40',
-  'gray30',
-  'gray20',
-  'gray10',
-] as const;
-
-type SemanticColorMap = {
-  [key in SemanticColor]: Array<ColorProperty>;
-};
-export const semanticColorNames: SemanticColorMap = {
-  positive: ['green50', 'green40', 'green60'],
-  informative: ['blue50', 'blue40', 'blue60'],
-  negative: ['red50', 'red40', 'red60'],
-  notice: ['yellow50', 'yellow40', 'yellow60'],
-};
-
-type IndexMap = {
-  [key: number]: 'a' | 'b' | 'c';
-};
-export const indexMap: IndexMap = {
-  0: 'a',
-  1: 'b',
-  2: 'c',
-};
diff --git a/legacy/stories/Styles/Colors/index.stories.mdx b/legacy/stories/Styles/Colors/index.stories.mdx
deleted file mode 100644
index 36046828..00000000
--- a/legacy/stories/Styles/Colors/index.stories.mdx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { Meta, Story } from '@storybook/addon-docs/blocks';
-import { colors, Text } from 'src';
-import { ColorProperty, SemanticColor } from 'src/constants/colors';
-import { grayScaleNames, semanticColorNames, indexMap } from './data';
-
-<Meta title="Styles/Colors" />
-
-# 컬러 팔레트
-
-컬러는 보편적으로 사용하는 시멘틱 컬러와 그레이 스케일로 나뉘어집니다. 각 컬러는 시각 장애가 있는 사람들도 명확하게 컬러를 인지할 수 있는 웹 접근성(WCAG 2.0)을 준수하기 위한 W3C AA 등급을 충족합니다.
-
-## 그레이 스케일(Gray Scale)
-
-그레이 스케일은 총 10단계로 나뉘어지며 텍스트 컬러와 배경색에 적절하게 사용합니다.
-
-<Story name="Grey Scale">
-  <ul
-    style={{
-      margin: '0 0 120px 0',
-      padding: 0,
-      display: 'grid',
-      gap: '10px',
-      gridTemplateColumns: 'repeat(5, 246px)',
-    }}
-  >
-    {grayScaleNames.map((name, index) => (
-      <li key={index} style={{ listStyle: 'none' }}>
-        <div
-          style={{
-            width: '246px',
-            height: '160px',
-            backgroundColor: `var(--lubycon-${name})`,
-            borderRadius: '8px',
-            padding: '14px',
-            boxSizing: 'border-box',
-          }}
-        >
-          <Text
-            typography="subtitle"
-            style={{ color: `var(--lubycon-gray${index > 4 ? '100' : '10'})` }}
-          >
-            {name.replace(/gray/g, 'gray ')}
-          </Text>
-        </div>
-      </li>
-    ))}
-  </ul>
-</Story>
-
-## 의미론적 색상(Semantic Color)
-
-시멘틱 컬러는 사용자에게 피드백을 주고 상태를 식별하거나 도움말을 찾는 등의 역할을 하며 상황에 맞는 적절한 컬러를 사용합니다.
-
-<Story name="Semantic Colors">
-  <div style={{ display: 'grid', gap: '40px', gridTemplateColumns: 'repeat(2, 615px)' }}>
-    {Object.keys(semanticColorNames).map((name, index) => (
-      <ul
-        key={index}
-        style={{
-          margin: 0,
-          padding: 0,
-          display: 'grid',
-          gap: '10px',
-          gridTemplateColumns: '302px 302px',
-          gridTemplateRows: '75px 75px',
-          gridTemplateAreas: `
-            'a b'
-            'a c'
-          `,
-        }}
-      >
-        {semanticColorNames[name].map((colorName, colorIndex) => (
-          <li
-            key={colorIndex}
-            style={{
-              listStyle: 'none',
-              width: '302px',
-              height: `${/50/g.test(colorName) ? '160px' : '75px'}`,
-              backgroundColor: `var(--lubycon-${colorName})`,
-              borderRadius: '8px',
-              padding: '14px',
-              boxSizing: 'border-box',
-              gridArea: `${indexMap[colorIndex]}`,
-            }}
-          >
-            <Text as="div" typography="subtitle" style={{ color: 'var(--lubycon-gray10' }}>
-              {/50/g.test(colorName) ? name[0].toUpperCase() + name.slice(1) : ''}
-            </Text>
-            <Text
-              typography="caption"
-              style={{ color: `${/40/g.test(colorName) ? colors.gray100 : colors.gray10}` }}
-            >
-              {colorName}
-            </Text>
-          </li>
-        ))}
-      </ul>
-    ))}
-  </div>
-</Story>
-
-### Positive
-
-확인, 성공과 같은 긍정적인 메세지를 명확하게 보여줄 때 사용합니다.
-
-### Informative
-
-사용자에게 정보를 제공할 때 사용합니다.
-
-### Negative
-
-오류, 주의, 실패와 같은 부정적인 메시지에 사용합니다.
-
-### Notice
-
-주의사항이나 진행이 지연되는 것을 알릴 때 사용합니다.
diff --git a/legacy/stories/Styles/Shadows/components.tsx b/legacy/stories/Styles/Shadows/components.tsx
deleted file mode 100644
index 93cc2715..00000000
--- a/legacy/stories/Styles/Shadows/components.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { ComponentProps } from 'react';
-
-export const Box = ({ children, ...rest }: ComponentProps<'div'>) => {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'flex-end',
-        height: 80,
-        borderRadius: 8,
-        backgroundColor: '#fcfcfd',
-        padding: 34,
-      }}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-};
diff --git a/legacy/stories/Styles/Shadows/index.stories.mdx b/legacy/stories/Styles/Shadows/index.stories.mdx
deleted file mode 100644
index 7060ea70..00000000
--- a/legacy/stories/Styles/Shadows/index.stories.mdx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import classnames from 'classnames';
-import { Text, Shadow, Spacing } from 'src';
-import { Box } from './components';
-
-<Meta title="Styles/Shadows" />
-
-# 그림자 (Shadows)
-
-각 컴포넌트에는 높이값이 있습니다. 특정 컴포넌트는 다른 컴포넌트보다 높은 고도에 배치되어 모든 화면에서 일관된 위계를 설정합니다.
-
-예를 들어, 모달 팝업은 항상 가장 위에 배치됩니다. 높이값은 표면과의 거리를 나타냅니다. 한 표면의 앞면에서 다른 표면의 앞면까지의 거리는 피그마 Drop Shadow의 Y값으로 측정되며 픽셀을 사용합니다.
-
-# Preview
-
-그림자는 컴포넌트 간의 높이 차이를 감지 할 수 있게 합니다. 작고 선명한 그림자는 더 크고 부드러운 그림자보다 높이가 낮음을 나타냅니다. 크고 부드러운 그림자는 더 중요한 콘텐츠를 포함하거나 팝업과 같은 주의 집중을 위해 사용합니다.
-
-<Canvas>
-  <Story name="Shadows">
-    <Box className="lubycon-shadow--0">0px</Box>
-    <Spacing size={30} />
-    <Box className="lubycon-shadow--1">2px 드랍다운</Box>
-    <Spacing size={30} />
-    <Box className="lubycon-shadow--2">3px 버튼, 카드</Box>
-    <Spacing size={30} />
-    <Box className="lubycon-shadow--3">6px 토스트</Box>
-    <Spacing size={30} />
-    <Box className="lubycon-shadow--4">8px 탭</Box>
-    <Spacing size={30} />
-    <Box className="lubycon-shadow--5">24px 모달 팝업</Box>
-  </Story>
-</Canvas>
-
-# Shadow With Class
-
-기본적인 루비콘의 그림자 시스템은 별도의 컴포넌트가 아니기 때문에, 클래스를 직접 입력하여 사용하게 됩니다.
-
-<Canvas>
-  <Story name="Shadow Class">
-    <div class="lubycon-shadow--1" style={{ padding: 8 }}>
-      1단계 그림자입니다
-    </div>
-  </Story>
-</Canvas>
-
-# Shadow With Component
-
-이렇게 클래스를 사용하여 그림자를 정의하는 것이 여러분의 어플리케이션 규칙에 맞지 않다면, Lubycon UI Kit이 제공하고 있는 `Shadow` 컴포넌트를 사용할 수도 있습니다.
-
-<Canvas>
-  <Story name="Shadow With Component">
-    <Shadow level={1}>
-      <div>test</div>
-    </Shadow>
-  </Story>
-</Canvas>
diff --git a/legacy/stories/Styles/Typography/data.ts b/legacy/stories/Styles/Typography/data.ts
deleted file mode 100644
index c4e7cc57..00000000
--- a/legacy/stories/Styles/Typography/data.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Typographys, FontWeights } from 'components/Text/types';
-
-export const typographyNames: { [key in Typographys]: string } = {
-  h1: '머릿말 1',
-  h2: '머릿말 2',
-  h3: '머릿말 3',
-  h4: '머릿말 4',
-  h5: '머릿말 5',
-  h6: '머릿말 6',
-  subtitle: '부제',
-  p1: '본문 1',
-  p2: '본문 2',
-  caption: '캡션',
-};
-
-export const fontWeightNames: { [key in FontWeights]: string } = {
-  light: '노토 산스 KR Light',
-  regular: '노토 산스 KR Regular',
-  bold: '노토 산스 KR Bold',
-  black: '노토 산스 KR Black',
-};
diff --git a/legacy/stories/Styles/Typography/index.stories.mdx b/legacy/stories/Styles/Typography/index.stories.mdx
deleted file mode 100644
index 84baffe9..00000000
--- a/legacy/stories/Styles/Typography/index.stories.mdx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Text } from 'src';
-import { Meta, Story } from '@storybook/addon-docs/blocks';
-import { typographys, Typographys, FontWeights, fontWeights } from 'components/Text/types';
-import { typographyNames, fontWeightNames } from './data';
-
-<Meta title="Styles/Typography" components={Text} />
-
-# 타이포그래피
-
-PC와 모바일의 rem 기준 서체 크기는 16px을 사용합니다. 서체는 보편성을 위해 노토 산스를 사용합니다. 위계는 글자의 두께, 크기, 글줄 간격의 차이를 통해 전달합니다.
-
-헤딩은 화면에서 가장 큰 글자로, 짧고 중요한 문장에 사용합니다. 본문은 작은 글자 크기로, 긴 글쓰기에 사용합니다. 캡션은 가장 작은 글자입니다. 이미지에 주석을 달거나 footer 영역에서 사용됩니다.
-
-## 헤딩 (Heading)
-
-<Story name="Headings">
-  <ul>
-    {typographys.map((typography) => (
-      <li style={{ listStyle: 'none' }} key={typography}>
-        <Text typography={typography}>{typographyNames[typography]}</Text>
-      </li>
-    ))}
-  </ul>
-</Story>
-
-## 폰트 웨이트 (Font Weight)
-
-<Story name="Font Weight">
-  <ul>
-    {fontWeights.map((fontWeight) => (
-      <li style={{ listStyle: 'none' }} key={fontWeight}>
-        <Text fontWeight={fontWeight}>{fontWeightNames[fontWeight]}</Text>
-      </li>
-    ))}
-  </ul>
-</Story>
diff --git a/legacy/stories/getting-started.stories.mdx b/legacy/stories/getting-started.stories.mdx
deleted file mode 100644
index 67a13c81..00000000
--- a/legacy/stories/getting-started.stories.mdx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Lubycon UI Kit/Getting Started" />
-
-# Getting Started
-
-## **Installation**
-
-Lubycon UI Kit은 [npm 레지스트리](https://www.npmjs.com/package/@lubycon/ui-kit)를 통해 제공되고 있습니다. `npm` 또는 `yarn` 을 사용해서 패키지를 설치해주세요.
-
-```bash
-$ npm install @lubycon/ui-kit
-
-// or
-
-$ yarn add @lubycon/ui-kit
-```
-
-### Peer Dependencies
-
-- `node >= 10.15`
-- `react >= 17.0.1`
-- `react-dom >= 16.9.0`
-- (TypeScript 사용 시) `typescript >= 4.0.0`
-
-## Design resources
-
-Lubycon UI Kit은 피그마의 컴포넌트를 기반으로 만들어졌으며, 해당 링크에서 피그마 컴포넌트를 다운로드 받을 수 있습니다
-
-피그마 컴포넌트는 아래와 같은 상황에서 활용 가능합니다.
-
-- Lubycon UI Kit을 바탕으로 수정한 컴포넌트 정의가 필요한 경우
-- 기획자 혹은 개발자 혼자 제품의 디자인적인 느낌을 고려하여 와이어프레임을 작성할 때
-- 그 외 여러분이 필요한 모든 경우 😄
diff --git a/legacy/stories/intro.stories.mdx b/legacy/stories/intro.stories.mdx
deleted file mode 100644
index 6b76f210..00000000
--- a/legacy/stories/intro.stories.mdx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Lubycon UI Kit/Welcome" />
-
-# Lubycon UI Kit
-
-루비콘 UI Kit은 한글 타이포그래피를 바탕으로 만들어진 UI KIT으로 총 16개의 컴포넌트를 한글에 최적화된 형태로 제공합니다.
-
-### Lubycon UI kit Design Principle
-
-- **보편적인 디자인:** 어느 플랫폼에서도 보편적으로 사용할 수 있으며 사용자가 자신의 것으로 만들 수 있도록 기본에 충실합니다.
-- **실용적인 디자인:** 한글의 특성을 반영한 컴포넌트를 통해 개발자와 디자이너가 소통하면서 불필요한 리소스를 줄일 수 있습니다.
-- **명확한 디자인:** 다양한 해상도를 고려한 4px 그리드와 웹 접근성을 준수하는 명확한 컬러, 아토믹 컴포넌트로 명확한 시각적 위계를 만들어냅니다.
diff --git a/legacy/stories/usage.stories.mdx b/legacy/stories/usage.stories.mdx
deleted file mode 100644
index 1b2da281..00000000
--- a/legacy/stories/usage.stories.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Lubycon UI Kit/Usage" />
-
-# Usage
-
-Lubycon UI Kit은 사용자의 어플리케이션에 이미 구현되어있는 그 어떤 것에도 영향을 끼치지 않는 독립적인 라이브러리입니다.
-
-UI Kit 라이브러리는 라이브러리가 제공하고자 하는 UI 기능에 대한 관심사만을 가져야하기 때문에, Lubycon UI Kit은 `normalize.css` 나 `reset.css` 와 같이 브라우저 벤더들의 스타일을 정규화 및 초기화하는 기능을 포함하고 있지 않습니다.
-
-## Quick Start
-
-어플리케이션의 루트에 `LubyconUIKitProvider` 를 추가해주기만 하면 Lubycon UI Kit을 사용하기 위한 모든 준비가 끝납니다.
-
-```tsx
-// App.tsx
-
-import React, { PropsWithChildren } from 'react';
-import { LubyconUIKitProvider } from '@lubycon/ui-kit';
-
-function App({ children }: PropsWithChildren<{}>) {
-  return <LubyconUIKitProvider>{children}</LubyconUIKitProvider>;
-}
-```
-
-> 🤔 왜 UI Kit 라이브러리가 Context를 사용하나요?
->
-> Modal이나 Snackbar와 같이 어플리케이션 내부에서 전역적인 상태를 공유할 필요가 있는 컴포넌트들은 어플리케이션의 컴포넌트 렌더 트리에 영향을 주지 않도록 별도의 렌더 트리를 구성해야 하기 때문입니다.
diff --git a/legacy/template/codesandbox/package.json b/legacy/template/codesandbox/package.json
deleted file mode 100644
index 06ad4f6f..00000000
--- a/legacy/template/codesandbox/package.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "name": "lubycon-ui-kit-codesandbox-template",
-  "version": "0.0.0",
-  "description": "",
-  "main": "src/index.tsx",
-  "dependencies": {
-    "react": "latest",
-    "react-dom": "latest",
-    "react-scripts": "4.0.0",
-    "@lubycon/ui-kit": "latest"
-  },
-  "devDependencies": {
-    "typescript": "latest"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
-}
diff --git a/legacy/template/codesandbox/public/index.html b/legacy/template/codesandbox/public/index.html
deleted file mode 100644
index 6bdc53c5..00000000
--- a/legacy/template/codesandbox/public/index.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-    <meta name="theme-color" content="#000000" />
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <style>
-      body {
-        margin: 0;
-        padding: 30px;
-      }
-    </style>
-    <title>Lubycon UI Kit</title>
-  </head>
-
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>
diff --git a/legacy/template/codesandbox/src/App.tsx b/legacy/template/codesandbox/src/App.tsx
deleted file mode 100644
index 7193f5ef..00000000
--- a/legacy/template/codesandbox/src/App.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function App() {
-  return <h1>Lubycon UI Kit Codesandbox template</h1>;
-}
-
-export default App;
diff --git a/legacy/template/codesandbox/src/index.tsx b/legacy/template/codesandbox/src/index.tsx
deleted file mode 100644
index 49c6e0b0..00000000
--- a/legacy/template/codesandbox/src/index.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-import { render } from 'react-dom';
-
-import App from './App';
-
-const rootElement = document.getElementById('root');
-render(<App />, rootElement);
diff --git a/legacy/template/codesandbox/tsconfig.json b/legacy/template/codesandbox/tsconfig.json
deleted file mode 100644
index 41b91bbb..00000000
--- a/legacy/template/codesandbox/tsconfig.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "include": ["./src/**/*"],
-  "compilerOptions": {
-    "strict": true,
-    "esModuleInterop": true,
-    "lib": ["dom", "es2015"],
-    "jsx": "react-jsx"
-  }
-}
diff --git a/legacy/types/OverridableProps.ts b/legacy/types/OverridableProps.ts
deleted file mode 100644
index 90d6c8a9..00000000
--- a/legacy/types/OverridableProps.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ElementType } from 'react';
-import { CombineElementProps } from './utils';
-
-/**
- * @desc 원하는 엘리먼트로 렌더링할 수 있는 as 프로퍼티와 커스텀 Props를 병합합니다.
- */
-export type OverridableProps<E extends ElementType, P = unknown> = {
-  as?: E;
-} & CombineElementProps<E, P>;
diff --git a/legacy/types/icon.ts b/legacy/types/icon.ts
deleted file mode 100644
index 5784a2d2..00000000
--- a/legacy/types/icon.ts
+++ /dev/null
@@ -1,509 +0,0 @@
-export type CommonIconName =
-  | 'accessibility'
-  | 'add'
-  | 'add-circle'
-  | 'airplane'
-  | 'alarm'
-  | 'albums'
-  | 'alert'
-  | 'alert-circle'
-  | 'american-football'
-  | 'analytics'
-  | 'aperture'
-  | 'apps'
-  | 'archive'
-  | 'arrow-back'
-  | 'arrow-back-circle'
-  | 'arrow-down'
-  | 'arrow-down-circle'
-  | 'arrow-forward'
-  | 'arrow-forward-circle'
-  | 'arrow-redo'
-  | 'arrow-redo-circle'
-  | 'arrow-undo'
-  | 'arrow-undo-circle'
-  | 'arrow-up'
-  | 'arrow-up-circle'
-  | 'at'
-  | 'at-circle'
-  | 'attach'
-  | 'backspace'
-  | 'bag'
-  | 'bag-add'
-  | 'bag-check'
-  | 'bag-handle'
-  | 'bag-remove'
-  | 'balloon'
-  | 'ban'
-  | 'bandage'
-  | 'bar-chart'
-  | 'barbell'
-  | 'barcode'
-  | 'baseball'
-  | 'basket'
-  | 'basketball'
-  | 'battery-charging'
-  | 'battery-dead'
-  | 'battery-full'
-  | 'battery-half'
-  | 'beaker'
-  | 'bed'
-  | 'beer'
-  | 'bicycle'
-  | 'bluetooth'
-  | 'boat'
-  | 'body'
-  | 'bonfire'
-  | 'book'
-  | 'bookmark'
-  | 'bookmarks'
-  | 'bowling-ball'
-  | 'briefcase'
-  | 'browsers'
-  | 'brush'
-  | 'bug'
-  | 'build'
-  | 'bulb'
-  | 'bus'
-  | 'business'
-  | 'cafe'
-  | 'calculator'
-  | 'calendar'
-  | 'calendar-clear'
-  | 'calendar-number'
-  | 'call'
-  | 'camera'
-  | 'camera-reverse'
-  | 'car'
-  | 'car-sport'
-  | 'card'
-  | 'caret-back'
-  | 'caret-back-circle'
-  | 'caret-down'
-  | 'caret-down-circle'
-  | 'caret-forward'
-  | 'caret-forward-circle'
-  | 'caret-up'
-  | 'caret-up-circle'
-  | 'cart'
-  | 'cash'
-  | 'cellular'
-  | 'chatbox'
-  | 'chatbox-ellipses'
-  | 'chatbubble'
-  | 'chatbubble-ellipses'
-  | 'chatbubbles'
-  | 'checkbox'
-  | 'checkmark'
-  | 'checkmark-circle'
-  | 'checkmark-done'
-  | 'checkmark-done-circle'
-  | 'chevron-back'
-  | 'chevron-back-circle'
-  | 'chevron-down'
-  | 'chevron-down-circle'
-  | 'chevron-forward'
-  | 'chevron-forward-circle'
-  | 'chevron-up'
-  | 'chevron-up-circle'
-  | 'clipboard'
-  | 'close'
-  | 'close-circle'
-  | 'cloud'
-  | 'cloud-circle'
-  | 'cloud-done'
-  | 'cloud-download'
-  | 'cloud-offline'
-  | 'cloud-upload'
-  | 'cloudy'
-  | 'cloudy-night'
-  | 'code'
-  | 'code-download'
-  | 'code-slash'
-  | 'code-working'
-  | 'cog'
-  | 'color-fill'
-  | 'color-filter'
-  | 'color-palette'
-  | 'color-wand'
-  | 'compass'
-  | 'construct'
-  | 'contract'
-  | 'contrast'
-  | 'copy'
-  | 'create'
-  | 'crop'
-  | 'cube'
-  | 'cut'
-  | 'desktop'
-  | 'diamond'
-  | 'dice'
-  | 'disc'
-  | 'document'
-  | 'document-attach'
-  | 'document-lock'
-  | 'document-text'
-  | 'documents'
-  | 'download'
-  | 'duplicate'
-  | 'ear'
-  | 'earth'
-  | 'easel'
-  | 'egg'
-  | 'ellipse'
-  | 'ellipsis-horizontal'
-  | 'ellipsis-horizontal-circle'
-  | 'ellipsis-vertical'
-  | 'ellipsis-vertical-circle'
-  | 'enter'
-  | 'exit'
-  | 'expand'
-  | 'extension-puzzle'
-  | 'eye'
-  | 'eye-off'
-  | 'eyedrop'
-  | 'fast-food'
-  | 'female'
-  | 'file-tray'
-  | 'file-tray-full'
-  | 'file-tray-stacked'
-  | 'film'
-  | 'filter'
-  | 'filter-circle'
-  | 'finger-print'
-  | 'fish'
-  | 'fitness'
-  | 'flag'
-  | 'flame'
-  | 'flash'
-  | 'flash-off'
-  | 'flashlight'
-  | 'flask'
-  | 'flower'
-  | 'folder'
-  | 'folder-open'
-  | 'football'
-  | 'footsteps'
-  | 'funnel'
-  | 'game-controller'
-  | 'gift'
-  | 'git-branch'
-  | 'git-commit'
-  | 'git-compare'
-  | 'git-merge'
-  | 'git-network'
-  | 'git-pull-request'
-  | 'glasses'
-  | 'globe'
-  | 'golf'
-  | 'grid'
-  | 'hammer'
-  | 'hand-left'
-  | 'hand-right'
-  | 'happy'
-  | 'hardware-chip'
-  | 'headset'
-  | 'heart'
-  | 'heart-circle'
-  | 'heart-dislike'
-  | 'heart-dislike-circle'
-  | 'heart-half'
-  | 'help'
-  | 'help-buoy'
-  | 'help-circle'
-  | 'home'
-  | 'hourglass'
-  | 'ice-cream'
-  | 'id-card'
-  | 'image'
-  | 'images'
-  | 'infinite'
-  | 'information'
-  | 'information-circle'
-  | 'invert-mode'
-  | 'journal'
-  | 'key'
-  | 'keypad'
-  | 'language'
-  | 'laptop'
-  | 'layers'
-  | 'leaf'
-  | 'library'
-  | 'link'
-  | 'list'
-  | 'list-circle'
-  | 'locate'
-  | 'location'
-  | 'lock-closed'
-  | 'lock-open'
-  | 'log-in'
-  | 'log-out'
-  | 'magnet'
-  | 'mail'
-  | 'mail-open'
-  | 'mail-unread'
-  | 'male'
-  | 'male-female'
-  | 'man'
-  | 'map'
-  | 'medal'
-  | 'medical'
-  | 'medkit'
-  | 'megaphone'
-  | 'menu'
-  | 'mic'
-  | 'mic-circle'
-  | 'mic-off'
-  | 'mic-off-circle'
-  | 'moon'
-  | 'move'
-  | 'musical-note'
-  | 'musical-notes'
-  | 'navigate'
-  | 'navigate-circle'
-  | 'newspaper'
-  | 'notifications'
-  | 'notifications-circle'
-  | 'notifications-off'
-  | 'notifications-off-circle'
-  | 'nuclear'
-  | 'nutrition'
-  | 'open'
-  | 'options'
-  | 'paper-plane'
-  | 'partly-sunny'
-  | 'pause'
-  | 'pause-circle'
-  | 'paw'
-  | 'pencil'
-  | 'people'
-  | 'people-circle'
-  | 'person'
-  | 'person-add'
-  | 'person-circle'
-  | 'person-remove'
-  | 'phone-landscape'
-  | 'phone-portrait'
-  | 'pie-chart'
-  | 'pin'
-  | 'pint'
-  | 'pizza'
-  | 'planet'
-  | 'play'
-  | 'play-back'
-  | 'play-back-circle'
-  | 'play-circle'
-  | 'play-forward'
-  | 'play-forward-circle'
-  | 'play-skip-back'
-  | 'play-skip-back-circle'
-  | 'play-skip-forward'
-  | 'play-skip-forward-circle'
-  | 'podium'
-  | 'power'
-  | 'pricetag'
-  | 'pricetags'
-  | 'print'
-  | 'prism'
-  | 'pulse'
-  | 'push'
-  | 'qr-code'
-  | 'radio'
-  | 'radio-button-off'
-  | 'radio-button-on'
-  | 'rainy'
-  | 'reader'
-  | 'receipt'
-  | 'recording'
-  | 'refresh'
-  | 'refresh-circle'
-  | 'reload'
-  | 'reload-circle'
-  | 'remove'
-  | 'remove-circle'
-  | 'reorder-four'
-  | 'reorder-three'
-  | 'reorder-two'
-  | 'repeat'
-  | 'resize'
-  | 'restaurant'
-  | 'return-down-back'
-  | 'return-down-forward'
-  | 'return-up-back'
-  | 'return-up-forward'
-  | 'ribbon'
-  | 'rocket'
-  | 'rose'
-  | 'sad'
-  | 'save'
-  | 'scale'
-  | 'scan'
-  | 'scan-circle'
-  | 'school'
-  | 'search'
-  | 'search-circle'
-  | 'send'
-  | 'server'
-  | 'settings'
-  | 'shapes'
-  | 'share'
-  | 'share-social'
-  | 'shield'
-  | 'shield-checkmark'
-  | 'shield-half'
-  | 'shirt'
-  | 'shuffle'
-  | 'skull'
-  | 'snow'
-  | 'sparkles'
-  | 'speedometer'
-  | 'square'
-  | 'star'
-  | 'star-half'
-  | 'stats-chart'
-  | 'stop'
-  | 'stop-circle'
-  | 'stopwatch'
-  | 'storefront'
-  | 'subway'
-  | 'sunny'
-  | 'swap-horizontal'
-  | 'swap-vertical'
-  | 'sync'
-  | 'sync-circle'
-  | 'tablet-landscape'
-  | 'tablet-portrait'
-  | 'telescope'
-  | 'tennisball'
-  | 'terminal'
-  | 'text'
-  | 'thermometer'
-  | 'thumbs-down'
-  | 'thumbs-up'
-  | 'thunderstorm'
-  | 'ticket'
-  | 'time'
-  | 'timer'
-  | 'today'
-  | 'toggle'
-  | 'trail-sign'
-  | 'train'
-  | 'transgender'
-  | 'trash'
-  | 'trash-bin'
-  | 'trending-down'
-  | 'trending-up'
-  | 'triangle'
-  | 'trophy'
-  | 'tv'
-  | 'umbrella'
-  | 'unlink'
-  | 'videocam'
-  | 'videocam-off'
-  | 'volume-high'
-  | 'volume-low'
-  | 'volume-medium'
-  | 'volume-mute'
-  | 'volume-off'
-  | 'walk'
-  | 'wallet'
-  | 'warning'
-  | 'watch'
-  | 'water'
-  | 'wifi'
-  | 'wine'
-  | 'woman';
-
-export type LogoIconName =
-  | 'logo-alipay'
-  | 'logo-amazon'
-  | 'logo-amplify'
-  | 'logo-android'
-  | 'logo-angular'
-  | 'logo-apple'
-  | 'logo-apple-appstore'
-  | 'logo-apple-ar'
-  | 'logo-behance'
-  | 'logo-bitbucket'
-  | 'logo-bitcoin'
-  | 'logo-buffer'
-  | 'logo-capacitor'
-  | 'logo-chrome'
-  | 'logo-closed-captioning'
-  | 'logo-codepen'
-  | 'logo-css3'
-  | 'logo-designernews'
-  | 'logo-deviantart'
-  | 'logo-discord'
-  | 'logo-docker'
-  | 'logo-dribbble'
-  | 'logo-dropbox'
-  | 'logo-edge'
-  | 'logo-electron'
-  | 'logo-euro'
-  | 'logo-facebook'
-  | 'logo-figma'
-  | 'logo-firebase'
-  | 'logo-firefox'
-  | 'logo-flickr'
-  | 'logo-foursquare'
-  | 'logo-github'
-  | 'logo-gitlab'
-  | 'logo-google'
-  | 'logo-google-playstore'
-  | 'logo-hackernews'
-  | 'logo-html5'
-  | 'logo-instagram'
-  | 'logo-ionic'
-  | 'logo-ionitron'
-  | 'logo-javascript'
-  | 'logo-laravel'
-  | 'logo-linkedin'
-  | 'logo-markdown'
-  | 'logo-mastodon'
-  | 'logo-medium'
-  | 'logo-microsoft'
-  | 'logo-no-smoking'
-  | 'logo-nodejs'
-  | 'logo-npm'
-  | 'logo-octocat'
-  | 'logo-paypal'
-  | 'logo-pinterest'
-  | 'logo-playstation'
-  | 'logo-pwa'
-  | 'logo-python'
-  | 'logo-react'
-  | 'logo-reddit'
-  | 'logo-rss'
-  | 'logo-sass'
-  | 'logo-skype'
-  | 'logo-slack'
-  | 'logo-snapchat'
-  | 'logo-soundcloud'
-  | 'logo-stackoverflow'
-  | 'logo-steam'
-  | 'logo-stencil'
-  | 'logo-tableau'
-  | 'logo-tiktok'
-  | 'logo-tumblr'
-  | 'logo-tux'
-  | 'logo-twitch'
-  | 'logo-twitter'
-  | 'logo-usd'
-  | 'logo-venmo'
-  | 'logo-vercel'
-  | 'logo-vimeo'
-  | 'logo-vk'
-  | 'logo-vue'
-  | 'logo-web-component'
-  | 'logo-wechat'
-  | 'logo-whatsapp'
-  | 'logo-windows'
-  | 'logo-wordpress'
-  | 'logo-xbox'
-  | 'logo-xing'
-  | 'logo-yahoo'
-  | 'logo-yen'
-  | 'logo-youtube';
-
-export type IconName = CommonIconName | LogoIconName;
diff --git a/legacy/types/utils.ts b/legacy/types/utils.ts
deleted file mode 100644
index db867b3b..00000000
--- a/legacy/types/utils.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ComponentPropsWithoutRef, ComponentType, ElementType, ReactElement } from 'react';
-
-/**
- * @description T와 K에서 T의 프로퍼티를 제거한 타입을 병합합니다.
- */
-export type Combine<T, K> = T & Omit<K, keyof T>;
-
-export type CombineElementProps<E extends ElementType, P = unknown> = Combine<
-  P,
-  ComponentPropsWithoutRef<E>
->;
-
-export type ComponentElementType<T> = ReactElement<ComponentType<T>>;
diff --git a/legacy/utils/dom.ts b/legacy/utils/dom.ts
deleted file mode 100644
index 8d53b3e8..00000000
--- a/legacy/utils/dom.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export function getAbsoluteOffset(el: HTMLElement) {
-  if (document?.body == null) {
-    return {
-      top: -1,
-      left: -1,
-    };
-  }
-  const bodyRect = document.body.getBoundingClientRect();
-  const elRect = el.getBoundingClientRect();
-
-  return {
-    top: elRect.top - bodyRect.top,
-    left: elRect.left - bodyRect.left,
-  };
-}
diff --git a/legacy/utils/generateID.ts b/legacy/utils/generateID.ts
deleted file mode 100644
index 79854cf4..00000000
--- a/legacy/utils/generateID.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-let idIndex = 0;
-
-export function generateID(prefix: string) {
-  idIndex++;
-  return `${prefix}-${idIndex}`;
-}
diff --git a/legacy/utils/index.ts b/legacy/utils/index.ts
deleted file mode 100644
index 14be0d6d..00000000
--- a/legacy/utils/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { generateID } from './generateID';
diff --git a/legacy/utils/mediaQuery.ts b/legacy/utils/mediaQuery.ts
deleted file mode 100644
index f3cf9ba7..00000000
--- a/legacy/utils/mediaQuery.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-const breakpoints = {
-  xs: 0,
-  sm: 576,
-  md: 768,
-  lg: 992,
-  xl: 1200,
-};
-type MediaQueryKeys = keyof typeof breakpoints;
-
-/**
- * 미디어쿼리가 주어진 쿼리 키에 지정된 width보다 클 경우 true를 반환한다.
- **/
-function isMatchMinWidth(key: MediaQueryKeys) {
-  if (window == null) {
-    return null;
-  }
-
-  return window.matchMedia(`screen and (min-width: ${breakpoints[key]}px)`).matches;
-}
-
-export function isMatchedXS() {
-  return !isMatchMinWidth('xs');
-}
-export function isMatchedSM() {
-  return !isMatchMinWidth('sm');
-}
-export function isMatchedMD() {
-  return !isMatchMinWidth('md');
-}
-export function isMatchedLG() {
-  return !isMatchMinWidth('lg');
-}
-export function isMatchedXL() {
-  return !isMatchMinWidth('xs');
-}
diff --git a/legacy/utils/sleep.ts b/legacy/utils/sleep.ts
deleted file mode 100644
index 8b27999e..00000000
--- a/legacy/utils/sleep.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export function sleep(ms: number) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, ms);
-  });
-}