feat: storybook 생성

web-app/app/shared/components/inputGroup/Input.tsx

@@ -3,7 +3,6 @@ import type { InputProps as AriaInputProps } from 'react-aria-components';
 import { Input as AriaInput } from 'react-aria-components';
 
 import { twMerge } from 'tailwind-merge';
-
 import style from './style';
 
 export interface InputProps extends AriaInputProps {

web-app/app/shared/components/inputGroup/InputGroup.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Input from './Input'
+import { InputGroup } from './InputGroup'
+
+const meta = {
+  title: 'Components/InputGroup',
+  component: InputGroup,
+  argTypes: {
+    isReadOnly: { control: 'boolean' },
+  },
+} satisfies Meta<typeof InputGroup>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => (
+    <InputGroup {...args}>
+      <Input placeholder="입력해주세요" />
+    </InputGroup>
+  ),
+}
+
+export const WithValue: Story = {
+  render: (args) => (
+    <InputGroup {...args}>
+      <Input defaultValue="입력된 값" />
+    </InputGroup>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <InputGroup>
+      <Input placeholder="비활성화" disabled />
+    </InputGroup>
+  ),
+}
+
+export const ReadOnly: Story = {
+  args: {
+    isReadOnly: true,
+  },
+  render: (args) => (
+    <InputGroup {...args}>
+      <Input defaultValue="읽기 전용" readOnly />
+    </InputGroup>
+  ),
+}
+
+export const NumberInput: Story = {
+  render: () => (
+    <InputGroup>
+      <Input type="number" placeholder="숫자 입력" />
+    </InputGroup>
+  ),
+}
+
+export const WithPrefix: Story = {
+  render: () => (
+    <InputGroup>
+      <span className="pl-3 text-dabeeo-gray-99">@</span>
+      <Input placeholder="사용자명" />
+    </InputGroup>
+  ),
+}
+
+export const WithSuffix: Story = {
+  render: () => (
+    <InputGroup>
+      <Input placeholder="금액" type="number" />
+      <span className="pr-3 text-dabeeo-gray-99">원</span>
+    </InputGroup>
+  ),
+}
+
+export const CustomWidth: Story = {
+  render: () => (
+    <InputGroup className="w-60">
+      <Input placeholder="너비 240px" />
+    </InputGroup>
+  ),
+}

web-app/app/shared/components/inputGroup/style.ts

@@ -0,0 +1,35 @@
+import { tv } from 'tailwind-variants';
+
+export default tv({
+  slots: {
+    container: 'relative flex flex-col justify-center items-start bg-white',
+    base: [
+      'h-9',
+      'flex',
+      'items-center',
+      'text-sm',
+      'text-dabeeo-black-34',
+      'leading-[18px]',
+      'border',
+      'border-dabeeo-gray-be',
+      'has-data-focused:border-dabeeo-black-34',
+      'has-data-hovered:border-dabeeo-black-34',
+      'has-data-disabled:bg-dabeeo-gray-eb',
+      'has-data-disabled:text-dabeeo-gray-99',
+      'has-data-disabled:border-dabeeo-gray-be',
+      'has-data-invalid:border-dabeeo-red',
+      'has-data-invalid:has-data-focused:border-dabeeo-red',
+      'has-data-invalid:has-data-hovered:border-dabeeo-red',
+      'w-full',
+      'has-[[type=number]]:leading-6',
+    ],
+    input: ['w-full', 'px-3', 'outline-0', '[&[type=number]]:pr-1.5'],
+  },
+  variants: {
+    isReadOnly: {
+      true: {
+        base: 'bg-dabeeo-yellow-secondary has-data-hovered:border-dabeeo-gray-be has-data-focused:border-dabeeo-gray-be',
+      },
+    },
+  },
+});