DESIGN-15 Menu, InfoPopover Component 추가

src/core/components/Avatar/index.tsx

@@ -23,7 +23,7 @@ import { AvatarProps } from '@/core/components/Avatar/types';
 import { getFirstLetter } from '@/utilities/letter';
 import Icon from '@/core/components/Icon';
 import getAvatarColorTheme from '@/core/components/Avatar/utils/getAvatarColorTheme';
-import Popover from '@/core/components/Popover';
+import Popover from '@/core/components/Popover/PopoverBase';
 
 const Avatar = ({
   src,

src/core/components/Avatar/types/index.ts

@@ -3,7 +3,7 @@ import { HTMLAttributes } from 'react';
 import { AVATAR_SIZE_VARIANTS } from '@/core/components/Avatar/constants';
 import { RoundedType } from '@/core/components/Button/ButtonBase/types';
 import { ColorThemeType } from '@/types';
-import { PopoverProps } from '@/core/components/Popover/types';
+import { PopoverProps } from '@/core/components/Popover/PopoverBase/types';
 
 export type AvatarSizeVariants =
   (typeof AVATAR_SIZE_VARIANTS)[keyof typeof AVATAR_SIZE_VARIANTS];

src/core/components/Button/ButtonBase/constants/index.ts

@@ -23,6 +23,8 @@ export const GAP = {
   GAP_12: 'gap-12',
   GAP_10: 'gap-10',
   GAP_8: 'gap-8',
+  GAP_6: 'gap-6',
+  GAP_4: 'gap-4',
 } as const;
 
 export const BUTTON_SIZE: Record<SizeType, string> = {
@@ -48,4 +50,6 @@ export const BUTTON_GAP: Record<GapType, string> = {
   [GAP['GAP_12']]: 'gap-x-3',
   [GAP['GAP_10']]: 'gap-x-2.5',
   [GAP['GAP_8']]: 'gap-x-2',
+  [GAP['GAP_6']]: 'gap-x-1.5',
+  [GAP['GAP_4']]: 'gap-x-1',
 };

src/core/components/Menu/Menu.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta } from '@storybook/react';
+
+import IconButton from '@/core/components/Button/IconButton';
+import Icon from '@/core/components/Icon';
+import Menu from '@/core/components/Menu';
+
+const meta = {
+  title: 'core/Menu',
+  component: Menu,
+} satisfies Meta<typeof Menu>;
+
+export default meta;
+
+export const Default = () => {
+  return (
+    <Menu
+      trigger={
+        <IconButton
+          colorTheme={'secondary'}
+          icon={<Icon iconKey={'gear'} weight={'fill'} className={'text-lg'} />}
+          size={'h-40'}
+        />
+      }
+      items={[
+        <Menu.Item key={'update'} content={'수정'} />,
+        <Menu.Item
+          key={'delete'}
+          content={'삭제'}
+          colorTheme={'error'}
+          rightIcon={<Icon iconKey={'trash'} weight={'bold'} />}
+        />,
+      ]}
+      popoverOptions={{ className: 'w-20' }}
+    />
+  );
+};

src/core/components/Menu/MenuItem.tsx

@@ -0,0 +1,60 @@
+import { ComponentPropsWithoutRef, ElementType, MouseEvent } from 'react';
+import clsx from 'clsx';
+
+import { LIGHT_COLOR_THEME } from '@/constants/theme';
+import { MENU_ITEM_THEME } from './constants';
+import { BUTTON_GAP, GAP } from '@/core/components/Button/ButtonBase/constants';
+import { MenuItemProps } from './types';
+
+const MenuItem = <T extends ElementType = 'button'>({
+  element: Element,
+  content,
+  leftIcon,
+  rightIcon,
+  className,
+  disabled,
+  onClick,
+  gap = GAP['GAP_6'],
+  colorTheme = LIGHT_COLOR_THEME['SECONDARY'],
+  ...props
+}: MenuItemProps<T> & ComponentPropsWithoutRef<T>) => {
+  const Component: ElementType = Element || 'button';
+  const defaultProps =
+    Component === 'button' ? { disabled, type: 'button' } : {};
+
+  const handleClick = (e: MouseEvent<T>) => {
+    e.preventDefault();
+
+    if (!disabled) {
+      onClick?.(e);
+    }
+  };
+
+  return (
+    <li
+      className={clsx(
+        'text-body-02-medium',
+        !disabled && 'rounded-md transition-all',
+        MENU_ITEM_THEME[colorTheme],
+      )}
+    >
+      <Component
+        className={clsx(
+          'flex w-full items-center p-2 text-start',
+          disabled && 'cursor-not-allowed text-gray-04',
+          (leftIcon || rightIcon) && gap && BUTTON_GAP[gap],
+          className,
+        )}
+        onClick={handleClick}
+        {...defaultProps}
+        {...props}
+      >
+        {leftIcon && leftIcon}
+        {content}
+        {rightIcon && rightIcon}
+      </Component>
+    </li>
+  );
+};
+
+export default MenuItem;

src/core/components/Menu/constants/index.ts

@@ -0,0 +1,7 @@
+import { LIGHT_COLOR_THEME } from '@/constants/theme';
+import { MenuItemColorTheme } from '@/core/components/Menu/types';
+
+export const MENU_ITEM_THEME: Record<MenuItemColorTheme, string> = {
+  [LIGHT_COLOR_THEME['ERROR']]: 'text-rose-600 hover:bg-[#FFEDEF]',
+  [LIGHT_COLOR_THEME['SECONDARY']]: 'hover:bg-gray-00 hover:text-primary-03',
+} as const;

src/core/components/Menu/index.tsx

@@ -0,0 +1,27 @@
+import clsx from 'clsx';
+
+import { MenuProps, MenuReturnType } from '@/core/components/Menu/types';
+import Popover from '@/core/components/Popover/PopoverBase';
+import MenuPopoverItem from '@/core/components/Menu/MenuItem';
+
+const Menu = ({ items, popoverOptions = {}, ...props }: MenuProps) => {
+  const { className, ...rest } = popoverOptions;
+
+  return (
+    <Popover
+      popover={<ul className={'flex-v-stack gap-y-1'}>{items}</ul>}
+      popoverOptions={{
+        backgroundColor: 'white',
+        hasShadow: true,
+        className: clsx('p-1.5', className),
+        ...rest,
+      }}
+      {...props}
+    />
+  );
+};
+
+export default Menu as unknown as MenuReturnType;
+
+Menu.displayName = 'Menu';
+Menu.Item = MenuPopoverItem;

src/core/components/Menu/types/index.ts

@@ -0,0 +1,31 @@
+import { ElementType, ReactElement, ReactNode } from 'react';
+
+import { ButtonProps } from '@/core/components/Button/Button/types';
+import { LightColorThemeType } from '@/types';
+import { PopoverProps } from '@/core/components/Popover/PopoverBase/types';
+import MenuPopoverItem from '@/core/components/Menu/MenuItem';
+
+export interface MenuProps extends Omit<PopoverProps, 'popover'> {
+  items: ReactNode[];
+}
+
+export type MenuItemColorTheme = Extract<
+  LightColorThemeType,
+  'error' | 'secondary'
+>;
+
+export interface MenuItemProps<T extends ElementType>
+  extends Pick<
+    ButtonProps,
+    'content' | 'leftIcon' | 'rightIcon' | 'disabled' | 'gap'
+  > {
+  element?: T;
+  colorTheme?: MenuItemColorTheme;
+}
+
+type Menu = (props: MenuProps) => ReactElement;
+
+export type MenuReturnType = Menu & {
+  displayName: string;
+  Item: typeof MenuPopoverItem;
+};

src/core/components/Popover/InfoPopover/InfoPopover.stories.tsx

@@ -0,0 +1,53 @@
+import { Meta } from '@storybook/react';
+
+import IconButton from '@/core/components/Button/IconButton';
+import Icon from '@/core/components/Icon';
+import InfoPopover from '@/core/components/Popover/InfoPopover/index';
+
+const meta = {
+  title: 'core/InfoPopover',
+  component: InfoPopover,
+  argTypes: {
+    heading: {
+      control: 'text',
+      description: 'Information Popover Heading',
+    },
+    items: {
+      control: 'object',
+      description: 'Information Popover Items',
+    },
+  },
+} satisfies Meta<typeof InfoPopover>;
+
+export default meta;
+
+export const Default = () => {
+  const data = [
+    {
+      title: '제목1',
+      description: '설명',
+    },
+    {
+      title: '제목2',
+      description: '설명',
+    },
+  ];
+
+  return (
+    <InfoPopover
+      heading={'정보 설명'}
+      trigger={
+        <IconButton
+          colorTheme={'warning'}
+          rounded={'rounded-full'}
+          icon={
+            <Icon iconKey={'question'} weight={'bold'} className={'text-lg'} />
+          }
+          size={'h-40'}
+        />
+      }
+      items={data}
+      popoverOptions={{ className: 'w-32' }}
+    />
+  );
+};

src/core/components/Popover/InfoPopover/index.tsx

@@ -0,0 +1,67 @@
+import { InfoPopoverProps } from '@/core/components/Popover/InfoPopover/types';
+import Typography from '@/core/components/Typography';
+import Icon from '@/core/components/Icon';
+import Popover from '@/core/components/Popover/PopoverBase';
+
+const InfoPopover = ({
+  trigger,
+  heading,
+  items,
+  popoverOptions = {},
+  ...props
+}: InfoPopoverProps) => {
+  const ITEMS = () => {
+    return items.map(({ title, description }) => (
+      <li key={title + description}>
+        <div className={'flex gap-x-1'}>
+          <Typography
+            theme={'body-02-bold'}
+            color={'primary-03'}
+            text={
+              <>
+                <Icon
+                  iconKey={'circle'}
+                  weight={'fill'}
+                  className={'text-[6px]'}
+                />
+                {title}
+              </>
+            }
+            className={'flex gap-1'}
+          />
+        </div>
+        <Typography
+          element={'p'}
+          theme={'body-02-regular'}
+          text={description}
+        />
+      </li>
+    ));
+  };
+
+  return (
+    <Popover
+      trigger={trigger}
+      popover={
+        <>
+          <Typography
+            element={'strong'}
+            theme={'body-02-bold'}
+            color={'primary-06'}
+            text={heading}
+            className={'block border-b p-3'}
+          />
+          <ul className={'flex-v-stack gap-y-4 p-3'}>{ITEMS()}</ul>
+        </>
+      }
+      popoverOptions={{
+        backgroundColor: 'white',
+        hasShadow: true,
+        ...popoverOptions,
+      }}
+      {...props}
+    />
+  );
+};
+
+export default InfoPopover;

src/core/components/Popover/InfoPopover/types/index.ts

@@ -0,0 +1,6 @@
+import { PopoverProps } from '@/core/components/Popover/PopoverBase/types';
+
+export interface InfoPopoverProps extends Omit<PopoverProps, 'popover'> {
+  heading: string;
+  items: { title: string; description: string }[];
+}

src/core/components/Popover/Popover.stories.tsx → src/core/components/Popover/PopoverBase/Popover.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react';
 import { useRef } from 'react';
 
-import { PopoverProps } from '@/core/components/Popover/types';
+import { PopoverProps } from '@/core/components/Popover/PopoverBase/types';
 import Popover from './index';
 import Button from '@/core/components/Button/Button';
 import Section from '@/core/components/Section';

src/core/components/Popover/hooks/effects/useRootScrollLockEffect.ts → src/core/components/Popover/PopoverBase/hooks/effects/useRootScrollLockEffect.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import { PopoverProps } from '@/core/components/Popover/types';
+import { PopoverProps } from '@/core/components/Popover/PopoverBase/types';
 
 export const useRootScrollLockEffect = ({
   isOpen,

src/core/components/Popover/hooks/effects/useUpdatePopoverPositionEffect.ts → src/core/components/Popover/PopoverBase/hooks/effects/useUpdatePopoverPositionEffect.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 
-import { getPopoverPosition } from '@/core/components/Popover/utils/getPopoverPosition';
-import { UseUpdatePopoverPositionEffectProps } from '@/core/components/Popover/types/PopoverPosition';
+import { getPopoverPosition } from '@/core/components/Popover/PopoverBase/utils/getPopoverPosition';
+import { UseUpdatePopoverPositionEffectProps } from '@/core/components/Popover/PopoverBase/types/PopoverPosition';
 
 export const useUpdatePopoverPositionEffect = ({
   isOpen,

src/core/components/Popover/hooks/usePopoverPosition.ts → src/core/components/Popover/PopoverBase/hooks/usePopoverPosition.ts

@@ -1,7 +1,7 @@
 import { CSSProperties, useRef, useState } from 'react';
 
-import { useUpdatePopoverPositionEffect } from '@/core/components/Popover/hooks/effects/useUpdatePopoverPositionEffect';
-import { UseUpdatePopoverPositionProps } from '@/core/components/Popover/types/PopoverPosition';
+import { useUpdatePopoverPositionEffect } from '@/core/components/Popover/PopoverBase/hooks/effects/useUpdatePopoverPositionEffect';
+import { UseUpdatePopoverPositionProps } from '@/core/components/Popover/PopoverBase/types/PopoverPosition';
 
 export const usePopoverPosition = ({
   gap,

src/core/components/Popover/index.tsx → src/core/components/Popover/PopoverBase/index.tsx

@@ -1,8 +1,8 @@
 import { cloneElement, MouseEvent, useState } from 'react';
 
-import { PopoverProps } from '@/core/components/Popover/types';
-import { useRootScrollLockEffect } from '@/core/components/Popover/hooks/effects/useRootScrollLockEffect';
-import { usePopoverPosition } from '@/core/components/Popover/hooks/usePopoverPosition';
+import { PopoverProps } from '@/core/components/Popover/PopoverBase/types';
+import { useRootScrollLockEffect } from '@/core/components/Popover/PopoverBase/hooks/effects/useRootScrollLockEffect';
+import { usePopoverPosition } from '@/core/components/Popover/PopoverBase/hooks/usePopoverPosition';
 import useClickOutside from '@/hooks/useClickOutSide';
 import Section from '@/core/components/Section';
 

src/core/components/Popover/types/PopoverPosition.ts → src/core/components/Popover/PopoverBase/types/PopoverPosition.ts

@@ -1,6 +1,6 @@
 import { CSSProperties, Dispatch, RefObject, SetStateAction } from 'react';
 
-import { PopoverProps } from '@/core/components/Popover/types';
+import { PopoverProps } from '@/core/components/Popover/PopoverBase/types';
 
 export interface UseUpdatePopoverPositionProps
   extends Pick<PopoverProps, 'rootRef'> {