feat: set tooltip component

src/components/common/icons/index.ts

@@ -9,10 +9,10 @@ import HeartStraightOutlined from './HeartStraightOutlined.svg'
 import Info from './Info.svg'
 import InfoCircle from './InfoCircle.svg'
 import Plus from './Plus.svg'
+import RoundedTriangle from './RoundedTriangle.svg'
 import Search from './Search.svg'
 import ShareNetwork from './ShareNetwork.svg'
 import SignOut from './SignOut.svg'
-import ToastPopup from './ToastPopup.svg'
 import UploadSimple from './UploadSimple.svg'
 
 export const icons = {
@@ -27,9 +27,9 @@ export const icons = {
   info: Info,
   infoCircle: InfoCircle,
   plus: Plus,
+  roundedTriangle: RoundedTriangle,
   search: Search,
   shareNetwork: ShareNetwork,
   signOut: SignOut,
-  toastPopup: ToastPopup,
   uploadSimple: UploadSimple,
 }

src/components/tooltip.tsx

@@ -0,0 +1,79 @@
+import { HTMLAttributes, forwardRef } from 'react'
+
+import cn from '@/utils/cn'
+import { VariantProps, cva } from 'class-variance-authority'
+import AccessibleIconButton from './accessible-icon-button'
+import Typography from './common/typography'
+import Icon from './common/icon'
+
+const TooltipVariants = cva<{
+  color: Record<'orange' | 'neutral', string>
+  size: Record<'sm' | 'md' | 'lg', string>
+}>(
+  `absolute whitespace-nowrap flex gap-2.5 items-center z-10 text-white rounded-full left-0 top-[calc(100%+20px)] 
+  `,
+  {
+    variants: {
+      color: {
+        neutral: `bg-neutral-500`,
+        orange: `bg-orange-400`,
+      },
+      size: {
+        lg: 'px-7 py-5',
+        md: 'px-5 py-3',
+        sm: 'px-3 py-2',
+      },
+    },
+    defaultVariants: {
+      color: 'orange',
+      size: 'md',
+    },
+  },
+)
+
+interface TooltipProps
+  extends HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof TooltipVariants> {
+  label: string
+  onClose: () => void
+  color?: 'orange' | 'neutral'
+  size?: 'sm' | 'md' | 'lg'
+}
+
+const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
+  ({ size, color, className, label, children, onClose, ...props }, ref) => {
+    return (
+      <div className="relative">
+        {children}
+        <div
+          role="tooltip"
+          {...props}
+          ref={ref}
+          className={cn(TooltipVariants({ color, size }), className)}
+        >
+          <Typography size="h5-2" className="text-white">
+            {label}
+          </Typography>
+          <Icon
+            type="roundedTriangle"
+            className="absolute bottom-[calc(100%-6px)] left-5 w-[22px] h-[18px]"
+          />
+          <AccessibleIconButton
+            label="닫기"
+            icon={{
+              type: 'close',
+              onClick: onClose,
+              stroke: 'neutral-000',
+              'aria-hidden': true,
+              size: 'sm',
+            }}
+          />
+        </div>
+      </div>
+    )
+  },
+)
+
+Tooltip.displayName = 'Tooltip'
+
+export default Tooltip

src/stories/tooltip.stories.ts

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Tooltip from '@/components/tooltip'
+
+const meta = {
+  title: 'DesignSystem/Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['neutral', 'orange'],
+    },
+  },
+} satisfies Meta<typeof Tooltip>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    label: 'tooltip Orange example',
+    onClose: () => {
+      alert('close')
+    },
+    children: 'tooltip Children',
+  },
+}
+
+export const Gray: Story = {
+  args: {
+    color: 'neutral',
+    label: 'tooltip Grey example',
+    onClose: () => {
+      alert('close')
+    },
+    children: 'tooltip Children',
+  },
+}