[#223] 스토리북 처리 안 되어있던 컴포넌트들 스토리북 추가 (#237)

* ✨ feat: 스토리북 추가

* 🔥 remove: 가이드 영상 컴포넌트 삭제

* 🐛 fix: a태그 셀프 속성 제거

* 🐛 fix: 빌드 중 생긴 오류 해결

Author: Honghyeonji

apps/client/src/entities/home/GuideVideo/GuideVideo.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { WorkspaceSampleButton } from './WorkspaceSampleButton';
+
+const meta: Meta<typeof WorkspaceSampleButton> = {
+  title: 'entities/home/WorkspaceSampleButton',
+  component: WorkspaceSampleButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof WorkspaceSampleButton>;
+
+export const Default: Story = {};

apps/client/src/entities/home/GuideVideo/GuideVideo.tsx

@@ -1,4 +1,3 @@
-export { GuideVideo } from './home/GuideVideo/GuideVideo';
 export { WorkspaceItem } from './home/WorkspaceItem/WorkspaceItem';
 export { WorkspaceAddBtn } from './home/WorkspaceAddBtn/WorkspaceAddBtn';
 export { WorkspaceLoadError } from './home/WorkspaceLoadError/WorkspaceLoadError';

apps/client/src/entities/home/WorkspaceSampleButton/WorkspaceSampleButton.stories.tsx

@@ -0,0 +1,47 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ImageTagModalButton } from './ImageTagModalButton';
+
+const meta: Meta<typeof ImageTagModalButton> = {
+  title: 'entities/workspace/ImageTagModalButton',
+  component: ImageTagModalButton,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'img 태그 src 속성 적용을 위한 모달창에 사용되는 버튼 컴포넌트',
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ImageTagModalButton>;
+
+export const Default: Story = {
+  args: {
+    content: '이미지 선택하기',
+    isBlue: true,
+    onClick: () => {},
+  },
+  render: (args) => {
+    return (
+      <ImageTagModalButton content={args.content} isBlue={args.isBlue} onClick={args.onClick} />
+    );
+  },
+};
+
+export const Close: Story = {
+  args: {
+    content: '닫기',
+    isBlue: false,
+    onClick: () => {},
+  },
+  render: (args) => {
+    return (
+      <ImageTagModalButton content={args.content} isBlue={args.isBlue} onClick={args.onClick} />
+    );
+  },
+};

apps/client/src/entities/index.ts

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ImageTagModalHeader } from './ImageTagModalHeader';
+
+const meta: Meta<typeof ImageTagModalHeader> = {
+  title: 'entities/workspace/ImageTagModalHeader',
+  component: ImageTagModalHeader,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'img 태그 src 속성 적용을 위한 모달창에 사용되는 헤더',
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ImageTagModalHeader>;
+
+export const Default: Story = {
+  args: {
+    onClose: () => {},
+  },
+  render: (args) => {
+    return (
+      <div className="w-80">
+        <ImageTagModalHeader onClose={args.onClose} />
+      </div>
+    );
+  },
+};

apps/client/src/entities/workspace/ImageTagModalButton/ImageTagModalButton.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ImageTagModalImg } from './ImageTagModalImg';
+
+const meta: Meta<typeof ImageTagModalImg> = {
+  title: 'entities/workspace/ImageTagModalImg',
+  component: ImageTagModalImg,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'img 태그 src 속성 적용을 위한 모달창에 사용되는 이미지 미리보기 컴포넌트',
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ImageTagModalImg>;
+
+export const Default: Story = {
+  args: {
+    imageSrc: `${import.meta.env.VITE_STATIC_STORAGE_URL}boolock_logo.png`,
+  },
+  render: (args) => {
+    return (
+      <div className="h-32 w-32">
+        <ImageTagModalImg imageSrc={args.imageSrc} />
+      </div>
+    );
+  },
+};

apps/client/src/entities/workspace/ImageTagModalHeader/ImageTagModalHeader.stories.tsx

@@ -0,0 +1,51 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ImageTagModalList } from './ImageTagModalList';
+import { useState } from 'react';
+import { useImageModalStore } from '@/shared/store';
+
+const meta: Meta<typeof ImageTagModalList> = {
+  title: 'entities/workspace/ImageTagModalList',
+  component: ImageTagModalList,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'img 태그 src 속성 적용을 위한 모달창에 사용되는 이미지 리스트 컴포넌트',
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ImageTagModalList>;
+
+export const Default: Story = {
+  args: {
+    tagSrc: '/mock/image2.png',
+    onSetTagSrc: () => {},
+  },
+  render: (args) => {
+    const [tagSrc, setTagSrc] = useState(args.tagSrc);
+    const mockImageList = new Map([
+      ['example1<png', '/mock/image1.png'],
+      ['example2<png', '/mock/image2.png'],
+      ['example3<png', '/mock/image3.png'],
+      ['example4<png', '/mock/image4.png'],
+      ['example5<png', '/mock/image5.png'],
+    ]);
+
+    const imageList = JSON.stringify(Object.fromEntries(mockImageList));
+
+    const { setInitialImageList } = useImageModalStore.getState();
+    setInitialImageList(imageList);
+
+    return (
+      <div className="h-[32rem]">
+        <ImageTagModalList tagSrc={tagSrc} onSetTagSrc={setTagSrc} />
+      </div>
+    );
+  },
+};

apps/client/src/entities/workspace/ImageTagModalImg/ImageTagModalImg.stories.tsx

@@ -0,0 +1,83 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ImageTagModalListItem } from '../ImageTagModalListItem/ImageTagModalListItem';
+import { useState } from 'react';
+
+const meta: Meta<typeof ImageTagModalListItem> = {
+  title: 'entities/workspace/ImageTagModalListItem',
+  component: ImageTagModalListItem,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'img 태그 src 속성 적용을 위한 모달창에 사용되는 이미지 리스트 아이템 컴포넌트',
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ImageTagModalListItem>;
+
+export const Default: Story = {
+  args: {
+    isSelected: false,
+    onDeleteImage: () => {},
+    onSelectImage: () => {},
+    filename: 'logo.png',
+  },
+  render: (args) => {
+    return (
+      <ImageTagModalListItem
+        isSelected={args.isSelected}
+        onDeleteImage={args.onDeleteImage}
+        onSelectImage={args.onSelectImage}
+        filename={args.filename}
+      />
+    );
+  },
+};
+
+export const Selected: Story = {
+  args: {
+    isSelected: true,
+    onDeleteImage: () => {},
+    onSelectImage: () => {},
+    filename: 'logo.png',
+  },
+  render: (args) => {
+    return (
+      <ImageTagModalListItem
+        isSelected={args.isSelected}
+        onDeleteImage={args.onDeleteImage}
+        onSelectImage={args.onSelectImage}
+        filename={args.filename}
+      />
+    );
+  },
+};
+
+export const ActiveAndResize: Story = {
+  args: {
+    isSelected: false,
+    onDeleteImage: () => {},
+    onSelectImage: () => {},
+    filename: 'logo.png',
+  },
+  render: (args) => {
+    const [isSelected, setIsSelected] = useState<boolean>(args.isSelected);
+
+    return (
+      <div style={{ width: '400px', resize: 'horizontal', overflow: 'auto' }}>
+        <ImageTagModalListItem
+          isSelected={isSelected}
+          onDeleteImage={args.onDeleteImage}
+          onSelectImage={() => setIsSelected(!isSelected)}
+          filename={args.filename}
+        />
+      </div>
+    );
+  },
+};

apps/client/src/entities/workspace/ImageTagModalList/ImageTagModalList.stories.tsx

@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ErrorPage } from './ErrorPage';
+
+const meta: Meta<typeof ErrorPage> = {
+  title: 'pages/ErrorPage',
+  component: ErrorPage,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story) => {
+      return (
+        <div className="flex h-screen w-screen flex-1">
+          <Story />
+        </div>
+      );
+    },
+  ],
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ErrorPage>;
+
+export const Default: Story = {};

apps/client/src/entities/workspace/ImageTagModalListItem/ImageTagModalListItem.stories.tsx

@@ -141,7 +141,6 @@ export const defineBlocks = (blockContents: TBlockContents) => {
                 .appendField(
                   new Blockly.FieldDropdown([
                     ['_blank', '_blank'],
-                    ['_self', '_self'],
                     ['_parent', '_parent'],
                     ['_top', '_top'],
                   ]),

apps/client/src/pages/ErrorPage/ErrorPage.stories.tsx

@@ -192,7 +192,7 @@ const linkBlockContents: TBlockInfo[] = [
     kind: 'block',
     type: addPreviousTypeName('a'),
     description:
-      '다른 페이지나 웹사이트로 이동하는 버튼이에요.\n누르면 새로운 곳으로 가요.\ntarget의 속성은 아래와 같습니다.\nself - 미리보기창에서 열어요.\nblank - 새로운 탭에서 열어요\nparent - 현재 탭에서 열어요\ntop - 현재 탭에서 열어요',
+      '다른 페이지나 웹사이트로 이동하는 버튼이에요.\n누르면 새로운 곳으로 가요.\ntarget의 속성은 아래와 같습니다.\nblank - 새로운 탭에서 열어요\nparent - 현재 탭에서 열어요\ntop - 현재 탭에서 열어요',
   },
 ];