test: Modal storybook 제작 #41

package.json

@@ -59,6 +59,7 @@
     "jsdom": "^23.0.1",
     "sass": "^1.69.6",
     "storybook": "^7.6.6",
+    "storybook-react-context": "^0.6.0",
     "stylelint": "^16.1.0",
     "stylelint-config-property-sort-order-smacss": "^10.0.0",
     "stylelint-config-standard-scss": "^12.0.0",

src/components/shared/Modal/Modal.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { withReactContext } from 'storybook-react-context';
+
+import { ModalContext } from '@contexts/ModalContext';
+
+import Modal from './Modal';
+
+const meta = {
+  title: 'Shared/Modal',
+  decorators: [
+    withReactContext({
+      Context: ModalContext,
+      initialState: {
+        open: true,
+        title: '탈퇴하시겠습니까?',
+        description: '회원을 탈퇴하면 차량용품 추천 서비스를 제공받을 수 없습니다. 정말로 탈퇴하시겠습니까?',
+        topButtonLabel: '예',
+        bottomButtonLabel: '아니오',
+        onTopButtonClick: () => { },
+        onBottomButtonClick: () => { },
+      },
+    }),
+  ],
+  component: Modal,
+  parameters: {
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const normal: Story = {
+  args: {
+    open: true,
+    title: '탈퇴하시겠습니까?',
+    description: '회원을 탈퇴하면 차량용품 추천 서비스를 제공받을 수 없습니다. 정말로 탈퇴하시겠습니까?',
+    topButtonLabel: '예',
+    bottomButtonLabel: '아니오',
+    onTopButtonClick: () => { },
+    onBottomButtonClick: () => { },
+  },
+};

src/contexts/ModalContext.tsx

@@ -26,7 +26,7 @@ const defaultValues: ModalProps = {
   onBottomButtonClick: () => { },
 };
 
-const ModalContext = createContext<ModalContextValue | undefined>(undefined);
+export const ModalContext = createContext<ModalContextValue | undefined>(undefined);
 
 export function ModalContextProvider({ children }: { children: React.ReactNode }) {
   const [modalState, setModalState] = useState(defaultValues);