feat: 공통 컴포넌트 추가 생성

web-app/app/shared/components/tooltip/Tooltip.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import {
+  Tooltip as AriaTooltip,
+  TooltipProps as AriaTooltipProps,
+  OverlayArrow,
+  composeRenderProps,
+} from 'react-aria-components';
+
+import { tv } from 'tailwind-variants';
+import { OverlayArrowIcon } from '../icons';
+
+const style = tv({
+  base: 'group/tooltip px-2 py-1.5 max-w-[200px] drop-shadow-modal rounded text-sm',
+  variants: {
+    bgColor: {
+      white: 'bg-white [&_svg]:fill-white',
+      tertiary: 'bg-primary-tertiary [&_svg]:fill-primary-tertiary',
+    },
+  },
+});
+
+export interface TooltipProps extends Omit<AriaTooltipProps, 'children'> {
+  bgColor?: 'white' | 'tertiary';
+  children: React.ReactNode;
+}
+
+export function Tooltip({ children, ...props }: TooltipProps) {
+  const { className, bgColor = 'white', offset = 10, ...restProps } = props;
+
+  return (
+    <AriaTooltip
+      offset={offset}
+      {...restProps}
+      className={composeRenderProps(className, (className, renderProps) =>
+        style({ ...renderProps, className, bgColor })
+      )}
+    >
+      <OverlayArrow>
+        <OverlayArrowIcon className="block group-data-[placement=bottom]/tooltip:rotate-180 group-data-[placement=left]/tooltip:-rotate-90 group-data-[placement=right]/tooltip:rotate-90" />
+      </OverlayArrow>
+      <span className="block max-h-[200px] overflow-y-auto whitespace-pre-wrap">{children}</span>
+    </AriaTooltip>
+  );
+}