add: SocialIcon 및 CommonIcon 스토리북 추가

src/stories/Common/Icon/CommonIcon.stories.tsx

@@ -0,0 +1,44 @@
+import { Meta, StoryObj } from '@storybook/react';
+import CommonIcon from '@/composable/Icon/CommonIcon';
+
+const meta: Meta<typeof CommonIcon> = {
+  title: 'Common/Icon/CommonIcon',
+  component: CommonIcon,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+};
+
+type Story = StoryObj<typeof CommonIcon>;
+export const Variants_Hamburger: Story = {
+  args: {
+    variant: 'HAMBURGER',
+    width: 32,
+    height: 32,
+  },
+};
+
+export const Variants_DownArrow: Story = {
+  args: {
+    variant: 'DOWN_ARROW',
+    width: 20,
+    height: 20,
+  },
+};
+
+export const Variants_LargeClose: Story = {
+  args: {
+    variant: 'LARGE_CLOSE',
+    width: 45,
+    height: 45,
+  },
+};
+
+export const Variants_LeftArrow: Story = {
+  args: {
+    variant: 'LEFT_ARROW',
+    width: 32,
+    height: 32,
+  },
+};
+
+export default meta;

src/stories/Common/Icon/SocialIcon.stories.tsx

@@ -0,0 +1,102 @@
+import { Meta, StoryObj } from '@storybook/react';
+import SocialIcon from '@/composable/Icon/SocialIcon';
+
+const meta: Meta<typeof SocialIcon> = {
+  title: 'Common/Icon/SocialIcon',
+  component: SocialIcon,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+};
+
+type Story = StoryObj<typeof SocialIcon>;
+export const BrandNoneDefault: Story = {
+  args: {
+    company: 'INSTAGRAM',
+    width: 32,
+    height: 32,
+    color: 'BRAND',
+    background: 'NONE',
+    state: 'DEFAULT',
+    style: { backgroundColor: 'transparent' },
+  },
+};
+
+export const BrandCircularDefault: Story = {
+  args: {
+    company: 'INSTAGRAM',
+    width: 32,
+    height: 32,
+    color: 'BRAND',
+    background: 'CIRCULAR',
+    state: 'DEFAULT',
+  },
+};
+
+export const BrandRectanglarDefault: Story = {
+  args: {
+    company: 'INSTAGRAM',
+    width: 32,
+    height: 32,
+    color: 'BRAND',
+    background: 'RECTANGLAR',
+    state: 'DEFAULT',
+  },
+};
+
+export const GrayRectanglarHover: Story = {
+  args: {
+    company: 'INSTAGRAM',
+    width: 32,
+    height: 32,
+    color: 'GRAY',
+    background: 'RECTANGLAR',
+    state: 'HOVER',
+  },
+};
+
+export const GrayNoneDefault: Story = {
+  args: {
+    company: 'INSTAGRAM',
+    width: 32,
+    height: 32,
+    color: 'GRAY',
+    background: 'NONE',
+    state: 'DEFAULT',
+  },
+};
+
+export const WhiteNoneDefault_000: Story = {
+  args: {
+    company: 'INSTAGRAM',
+    width: 32,
+    height: 32,
+    color: 'WHITE',
+    background: 'NONE',
+    state: 'DEFAULT',
+    style: { backgroundColor: '#000' },
+  },
+};
+
+export const DiffCompany: Story = {
+  args: {
+    company: 'FACEBOOK',
+    width: 32,
+    height: 32,
+    color: 'BRAND',
+    background: 'NONE',
+    state: 'DEFAULT',
+  },
+};
+
+export const DiffSize: Story = {
+  args: {
+    company: 'INSTAGRAM',
+    width: 64,
+    height: 64,
+    color: 'BRAND',
+    background: 'NONE',
+    state: 'DEFAULT',
+  },
+};
+
+export default meta;