feat: storybook 추가

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

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Button, TooltipTrigger } from 'react-aria-components'
+import { Tooltip } from './Tooltip'
+
+const meta = {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  args: {
+    children: '툴팁 내용',
+  },
+  argTypes: {
+    bgColor: {
+      control: 'select',
+      options: ['white', 'tertiary'],
+    },
+  },
+} satisfies Meta<typeof Tooltip>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <TooltipTrigger>
+      <Button className="px-4 py-2 bg-primary text-white rounded">마우스를 올려보세요</Button>
+      <Tooltip>기본 툴팁 메시지입니다.</Tooltip>
+    </TooltipTrigger>
+  ),
+}
+
+export const WhiteBackground: Story = {
+  render: () => (
+    <TooltipTrigger>
+      <Button className="px-4 py-2 bg-primary text-white rounded">흰색 배경</Button>
+      <Tooltip bgColor="white">흰색 배경의 툴팁입니다.</Tooltip>
+    </TooltipTrigger>
+  ),
+}
+
+export const TertiaryBackground: Story = {
+  render: () => (
+    <TooltipTrigger>
+      <Button className="px-4 py-2 bg-primary text-white rounded">Tertiary 배경</Button>
+      <Tooltip bgColor="tertiary">Tertiary 배경의 툴팁입니다.</Tooltip>
+    </TooltipTrigger>
+  ),
+}
+
+export const LongContent: Story = {
+  render: () => (
+    <TooltipTrigger>
+      <Button className="px-4 py-2 bg-primary text-white rounded">긴 내용</Button>
+      <Tooltip>
+        이것은 아주 긴 툴팁 내용입니다. 최대 너비가 200px로 제한되어 있어 자동으로 줄바꿈됩니다.
+        스크롤이 필요한 경우 스크롤바가 표시됩니다.
+      </Tooltip>
+    </TooltipTrigger>
+  ),
+}
+
+export const MultilineContent: Story = {
+  render: () => (
+    <TooltipTrigger>
+      <Button className="px-4 py-2 bg-primary text-white rounded">여러 줄</Button>
+      <Tooltip>{`첫 번째 줄\n두 번째 줄\n세 번째 줄`}</Tooltip>
+    </TooltipTrigger>
+  ),
+}
+
+export const PlacementVariants: Story = {
+  render: () => (
+    <div className="flex gap-8 p-16">
+      <TooltipTrigger>
+        <Button className="px-4 py-2 bg-gray-200 rounded">Top (기본)</Button>
+        <Tooltip placement="top">위쪽에 표시</Tooltip>
+      </TooltipTrigger>
+      <TooltipTrigger>
+        <Button className="px-4 py-2 bg-gray-200 rounded">Bottom</Button>
+        <Tooltip placement="bottom">아래쪽에 표시</Tooltip>
+      </TooltipTrigger>
+      <TooltipTrigger>
+        <Button className="px-4 py-2 bg-gray-200 rounded">Left</Button>
+        <Tooltip placement="left">왼쪽에 표시</Tooltip>
+      </TooltipTrigger>
+      <TooltipTrigger>
+        <Button className="px-4 py-2 bg-gray-200 rounded">Right</Button>
+        <Tooltip placement="right">오른쪽에 표시</Tooltip>
+      </TooltipTrigger>
+    </div>
+  ),
+}
+
+export const AllBackgroundColors: Story = {
+  render: () => (
+    <div className="flex gap-8 p-8">
+      <TooltipTrigger>
+        <Button className="px-4 py-2 bg-gray-200 rounded">White</Button>
+        <Tooltip bgColor="white">White 배경</Tooltip>
+      </TooltipTrigger>
+      <TooltipTrigger>
+        <Button className="px-4 py-2 bg-gray-200 rounded">Tertiary</Button>
+        <Tooltip bgColor="tertiary">Tertiary 배경</Tooltip>
+      </TooltipTrigger>
+    </div>
+  ),
+}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { ReactNode } from 'react';
 import {
   Tooltip as AriaTooltip,
   TooltipProps as AriaTooltipProps,
@@ -21,7 +21,7 @@ const style = tv({
 
 export interface TooltipProps extends Omit<AriaTooltipProps, 'children'> {
   bgColor?: 'white' | 'tertiary';
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 export function Tooltip({ children, ...props }: TooltipProps) {