[FE][Fix] : storybook 오류 해결

frontend/src/component/authmodal/AuthModal.tsx

@@ -4,7 +4,7 @@ import { doLogin } from '@/api/auth.api.ts';
 import { saveLocalData } from '@/utils/common/manageLocalData.ts';
 import { AppConfig } from '@/constants.ts';
 
-interface IAuthModalProps {
+export interface IAuthModalProps {
   /** 모달이 열려 있는지 여부를 나타냅니다. */
   isOpen: boolean;
   /** 모달을 닫는 함수입니다. */

frontend/src/component/common/modal/ModalInput.tsx

@@ -1,4 +1,4 @@
-interface IModalInputProps {
+export interface IModalInputProps {
   /** 입력 필드의 제목입니다. */
   title: string;
   /** 입력 필드의 이름 속성입니다. */

frontend/src/component/layout/Footer.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import classNames from 'classnames';
 import { buttonActiveType } from './enumTypes';
 

frontend/src/component/linedrawer/Linedrawer.tsx

@@ -6,7 +6,7 @@ import { MdArrowCircleLeft, MdArrowCircleRight } from 'react-icons/md';
 import { useUndoRedo } from '@/hooks/useUndoRedo';
 import { ButtonState } from '@/component/common/enums';
 import { useFloatingButton } from '@/hooks/useFloatingButton';
-import { FloatingButton } from '@/component/common/FloatingButton/FloatingButton';
+import { FloatingButton } from '@/component/common/floatingbutton/FloatingButton';
 
 interface IPoint {
   x: number;

frontend/src/stories/AuthModal.stories.tsx

@@ -1,59 +1,60 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { useModal } from '@/hooks/useModal';
-import { AuthModal } from '@/component/authmodal/AuthModal';
+import type { Meta, StoryObj } from '@storybook/react';
+import { AuthModal, IAuthModalProps } from '@/component/authmodal/AuthModal';
+import { fn } from '@storybook/test';
 
-export default {
+const meta = {
   title: 'Components/AuthModal',
   component: AuthModal,
+  tags: ['autodocs'],
   parameters: {
     layout: 'fullscreen',
+    backgrounds: {
+      default: 'gray',
+      values: [{ name: 'gray', value: '#f3f4f6' }],
+    },
   },
-  tags: ['autodocs'],
-} as Meta<typeof AuthModal>;
-
-const LoginModalTemplate: Story = args => {
-  const { onClose } = useModal();
-
-  return <AuthModal {...args} onClose={onClose} />;
-};
-
-const RegisterModalTemplate: Story = args => {
-  const { onClose } = useModal();
+  argTypes: {
+    isOpen: { control: 'boolean', description: '모달이 열려 있는지 여부를 나타냅니다.' },
+    type: {
+      control: 'select',
+      options: ['login', 'register'],
+      description: '모달의 유형을 지정합니다.',
+    },
+    onClose: { action: 'onClose', description: '모달 닫기 이벤트 핸들러입니다.' },
+  },
+} satisfies Meta<typeof AuthModal>;
 
-  return <AuthModal {...args} onClose={onClose} />;
-};
+export default meta;
+type Story = StoryObj<IAuthModalProps>;
 
-export const LoginModal = LoginModalTemplate.bind({});
-LoginModal.args = {
-  isOpen: true,
-  type: 'login',
-};
-LoginModal.parameters = {
-  docs: {
-    description: {
-      story: '로그인 모달 컴포넌트를 렌더링합니다.',
-    },
+export const LoginModal: Story = {
+  args: {
+    isOpen: true,
+    type: 'login',
+    onClose: fn(),
   },
-  backgrounds: {
-    default: 'gray',
-    values: [{ name: 'gray', value: '#f3f4f6' }],
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '로그인 모달을 렌더링합니다. ID와 비밀번호를 입력받고, "회원가입" 버튼을 통해 회원가입 모달로 전환됩니다.',
+      },
+    },
   },
 };
 
-export const RegisterModal = RegisterModalTemplate.bind({});
-RegisterModal.args = {
-  isOpen: true,
-  type: 'register',
-};
-RegisterModal.parameters = {
-  docs: {
-    description: {
-      story: '회원가입 모달 컴포넌트를 렌더링합니다.',
-    },
+export const RegisterModal: Story = {
+  args: {
+    isOpen: true,
+    type: 'register',
+    onClose: fn(),
   },
-  backgrounds: {
-    default: 'gray',
-    values: [{ name: 'gray', value: '#f3f4f6' }],
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '회원가입 모달을 렌더링합니다. ID, 이메일, 이름, 비밀번호를 입력받고, "로그인" 버튼을 통해 로그인 모달로 전환됩니다.',
+      },
+    },
   },
 };