feat: storybook 추가

web-app/app/shared/components/descriptions/Descriptions.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Descriptions } from './Descriptions'
+
+const meta = {
+  title: 'Components/Descriptions',
+  component: Descriptions,
+  argTypes: {
+    column: {
+      control: 'select',
+      options: [1, 2, 3, 4],
+    },
+  },
+} satisfies Meta<typeof Descriptions>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    items: [
+      { title: '이름', content: '홍길동' },
+      { title: '이메일', content: 'hong@example.com' },
+      { title: '전화번호', content: '010-1234-5678' },
+    ],
+  },
+}
+
+export const TwoColumns: Story = {
+  args: {
+    column: 2,
+    items: [
+      { title: '이름', content: '홍길동' },
+      { title: '이메일', content: 'hong@example.com' },
+      { title: '전화번호', content: '010-1234-5678' },
+      { title: '주소', content: '서울특별시 강남구' },
+    ],
+  },
+}
+
+export const ThreeColumns: Story = {
+  args: {
+    column: 3,
+    items: [
+      { title: '이름', content: '홍길동' },
+      { title: '이메일', content: 'hong@example.com' },
+      { title: '전화번호', content: '010-1234-5678' },
+      { title: '주소', content: '서울특별시 강남구' },
+      { title: '부서', content: '개발팀' },
+      { title: '직급', content: '선임연구원' },
+    ],
+  },
+}
+
+export const FourColumns: Story = {
+  args: {
+    column: 4,
+    items: [
+      { title: '이름', content: '홍길동' },
+      { title: '이메일', content: 'hong@example.com' },
+      { title: '전화번호', content: '010-1234-5678' },
+      { title: '주소', content: '서울특별시 강남구' },
+    ],
+  },
+}
+
+export const WithSpan: Story = {
+  args: {
+    column: 2,
+    items: [
+      { title: '이름', content: '홍길동' },
+      { title: '이메일', content: 'hong@example.com' },
+      { title: '주소', content: '서울특별시 강남구 역삼동 123-456', span: 'filled' },
+    ],
+  },
+}
+
+export const WithCustomTitleWidth: Story = {
+  args: {
+    column: 2,
+    titleWidth: 150,
+    items: [
+      { title: '사용자 이름', content: '홍길동' },
+      { title: '이메일 주소', content: 'hong@example.com' },
+      { title: '휴대전화 번호', content: '010-1234-5678' },
+      { title: '거주지 주소', content: '서울특별시 강남구' },
+    ],
+  },
+}