From 5a7faac353c4b37d7633ff5785e674dc91281cd3 Mon Sep 17 00:00:00 2001
From: semnil5202 <semnil5202@gmail.com>
Date: Sat, 16 Mar 2024 01:11:55 +0900
Subject: [PATCH] =?UTF-8?q?storybook:=20ImageView=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=B6=81=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stories/ImageView.stories.tsx | 75 +++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 src/stories/ImageView.stories.tsx

diff --git a/src/stories/ImageView.stories.tsx b/src/stories/ImageView.stories.tsx
new file mode 100644
index 0000000..94a84f1
--- /dev/null
+++ b/src/stories/ImageView.stories.tsx
@@ -0,0 +1,75 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import ImageView from '../components/ImageView/ImageView';
+
+const meta = {
+  title: 'Components/ImageView',
+  component: ImageView,
+  tags: ['autodocs'],
+  argTypes: {
+    src: {
+      control: 'text',
+      description: 'ImageView 컴포넌트의 src를 지정합니다.',
+    },
+    alt: {
+      control: 'text',
+      description: 'ImageView 컴포넌트의 alt를 지정합니다.',
+    },
+    width: {
+      control: 'number',
+      description:
+        'ImageView 컴포넌트의 가로 크기를 설정합니다. 기본값은 100% 입니다.',
+    },
+    height: {
+      control: 'number',
+      description:
+        'ImageView 컴포넌트의 세로 크기를 설정합니다. 기본값은 100% 입니다.',
+    },
+    maxWidth: {
+      control: 'number',
+      description: 'ImageView 컴포넌트의 가로 최대 크기를 설정합니다.',
+    },
+    maxHeight: {
+      control: 'number',
+      description: 'ImageView 컴포넌트의 세로 최대 크기를 설정합니다.',
+    },
+    objectFit: {
+      control: 'inline-radio',
+      options: ['fill', 'contain', 'cover'],
+      description:
+        'ImageView 컴포넌트의 이미지 표현 방식을 설정합니다. 기본값은 cover 입니다.',
+    },
+    borderRadius: {
+      control: 'number',
+      description: 'ImageView 컴포넌트의 Border Radius를 설정합니다.',
+    },
+    defaultSrc: {
+      control: 'text',
+      description:
+        'ImageView 컴포넌트의 src 표시 중 이미지 부재 등의 오류로 에러 발생 시 대체할 기본 이미지 주소를 지정합니다.',
+    },
+  },
+} as Meta<typeof ImageView>;
+
+export default meta;
+type Story = StoryObj<typeof ImageView>;
+
+export const Default: Story = {
+  args: {
+    src: 'https://interactive-examples.mdn.mozilla.net/media/examples/plumeria-146x200.jpg',
+    alt: '이미지 입니다.',
+    width: '100%',
+    height: '100%',
+    maxWidth: undefined,
+    maxHeight: undefined,
+    objectFit: 'cover',
+    borderRadius: undefined,
+    defaultSrc:
+      'https://upload.wikimedia.org/wikipedia/commons/b/ba/Error-logo.png',
+  },
+  render: (args) => (
+    <div style={{ width: 'max-content', height: 'max-content' }}>
+      <ImageView {...args} />
+    </div>
+  ),
+};