feat: storybook 추가

web-app/app/shared/components/datePicker/DatePicker.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { DatePicker } from './DatePicker'
+import { DateRangePicker } from './DateRangePicker'
+
+const meta = {
+  title: 'Components/DatePicker',
+  component: DatePicker,
+  args: {
+    value: null,
+    onChange: () => {},
+  },
+  argTypes: {
+    isDisabled: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof DatePicker>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: function Render() {
+    const [date, setDate] = useState<Date | null>(null)
+    return <DatePicker value={date} onChange={setDate} />
+  },
+}
+
+export const WithSelectedDate: Story = {
+  render: function Render() {
+    const [date, setDate] = useState<Date | null>(new Date())
+    return <DatePicker value={date} onChange={setDate} />
+  },
+}
+
+export const WithMinMaxDate: Story = {
+  render: function Render() {
+    const [date, setDate] = useState<Date | null>(new Date())
+    const minDate = new Date()
+    minDate.setDate(minDate.getDate() - 7)
+    const maxDate = new Date()
+    maxDate.setDate(maxDate.getDate() + 7)
+    return <DatePicker value={date} onChange={setDate} minValue={minDate} maxValue={maxDate} />
+  },
+}
+
+export const Disabled: Story = {
+  render: function Render() {
+    const [date, setDate] = useState<Date | null>(new Date())
+    return <DatePicker value={date} onChange={setDate} isDisabled />
+  },
+}
+
+export const Range: StoryObj<typeof DateRangePicker> = {
+  render: function Render() {
+    const [range, setRange] = useState<{ start: Date; end: Date } | null>(null)
+    return <DateRangePicker value={range} onChange={setRange} />
+  },
+}
+
+export const RangeWithSelectedDates: StoryObj<typeof DateRangePicker> = {
+  render: function Render() {
+    const start = new Date()
+    const end = new Date()
+    end.setDate(end.getDate() + 7)
+    const [range, setRange] = useState<{ start: Date; end: Date } | null>({ start, end })
+    return <DateRangePicker value={range} onChange={setRange} />
+  },
+}
+
+export const RangeDisabled: StoryObj<typeof DateRangePicker> = {
+  render: function Render() {
+    const start = new Date()
+    const end = new Date()
+    end.setDate(end.getDate() + 7)
+    const [range, setRange] = useState<{ start: Date; end: Date } | null>({ start, end })
+    return <DateRangePicker value={range} onChange={setRange} isDisabled />
+  },
+}