feat: 스토리북에 msw 추가

apps/web/src/components/SignUpForm/SignUpForm.stories.tsx

@@ -0,0 +1,34 @@
+import {
+  AppRouterContext,
+  type AppRouterInstance,
+} from 'next/dist/shared/lib/app-router-context.shared-runtime'
+import type { Meta, StoryObj } from '@storybook/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+import { SignUpForm } from './SignUpForm'
+
+const meta: Meta<typeof SignUpForm> = {
+  title: 'SignUpForm',
+  parameters: {
+    layout: 'centered',
+  },
+  component: SignUpForm,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <AppRouterContext.Provider value={{} as AppRouterInstance}>
+        <QueryClientProvider client={new QueryClient()}>
+          <div style={{ width: 400 }}>
+            <Story />
+          </div>
+        </QueryClientProvider>
+      </AppRouterContext.Provider>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Preview: Story = {}

apps/web/src/components/SignUpForm/SignUpForm.tsx

@@ -4,7 +4,7 @@ import { Button, Checkbox, Input, Text } from '@vook-client/design-system'
 import { useSignUpMutation, useUserInfoQuery } from '@vook-client/api'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { ChangeEventHandler } from 'react'
+import { ChangeEventHandler, useMemo } from 'react'
 import { useRouter } from 'next/navigation'
 import z from 'zod'
 import Cookies from 'js-cookie'
@@ -59,17 +59,33 @@ export const SignUpForm = () => {
     },
   )
 
+  const isAllChecked = useMemo(
+    () =>
+      watch('requiredTermsAgree') &&
+      watch('policyAgree') &&
+      watch('marketingEmailOptIn'),
+    [watch],
+  )
+
+  const isSubmitting = useMemo(
+    () => signUpMutation.isPending,
+    [signUpMutation.isPending],
+  )
+
+  const canSubmit = useMemo(
+    () =>
+      !formState.isValid ||
+      signUpMutation.isPending ||
+      signUpMutation.isSuccess,
+    [formState.isValid, signUpMutation.isPending, signUpMutation.isSuccess],
+  )
+
   if (!userInfoQuery.data) {
     return null
   }
 
   const email = userInfoQuery.data.result.email
 
-  const isAllChecked =
-    watch('requiredTermsAgree') &&
-    watch('policyAgree') &&
-    watch('marketingEmailOptIn')
-
   const onSubmit = handleSubmit(() => {
     signUpMutation.mutate()
   })
@@ -162,16 +178,8 @@ export const SignUpForm = () => {
       <Button
         type="submit"
         fit="fill"
-        disabled={
-          !formState.isValid ||
-          signUpMutation.isPending ||
-          signUpMutation.isSuccess
-        }
-        suffixIcon={
-          signUpMutation.isPending || signUpMutation.isSuccess
-            ? 'spinner-big'
-            : undefined
-        }
+        disabled={canSubmit}
+        suffixIcon={isSubmitting ? 'spinner-big' : undefined}
       >
         가입하기
       </Button>

apps/web/tsconfig.json

@@ -11,7 +11,8 @@
       "@/providers/*": ["./src/providers/*"],
       "@/components/*": ["./src/components/*"],
       "@/styles/*": ["./src/styles/*"],
-      "@/utils/*": ["./src/utils/*"]
+      "@/utils/*": ["./src/utils/*"],
+      "@/mocks/*": ["./src/mocks/*"]
     }
   },
   "include": [

apps/workshop/.storybook/main.ts

@@ -78,7 +78,12 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag',
   },
-  staticDirs: ['../public'],
+  staticDirs: [
+    {
+      from: '../public',
+      to: './public',
+    },
+  ],
   async viteFinal(config, type) {
     return mergeConfig(config, {
       define: {

apps/workshop/.storybook/preview.ts

@@ -1,15 +1,29 @@
 import '@vook-client/design-system/style.css'
 import './storybook.css'
 
-const preview = {
+import { handlers } from '@vook-client/api'
+
+import { initialize, mswLoader } from 'msw-storybook-addon'
+
+import { Preview } from '@storybook/react'
+
+initialize()
+
+const preview: Preview = {
   parameters: {
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
+    msw: {
+      handlers: {
+        ...handlers,
+      },
+    },
   },
+  loaders: [mswLoader],
 }
 
 export default preview

apps/workshop/package.json

@@ -9,9 +9,10 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@vook-client/design-system": "*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "@vook-client/design-system": "*"
+    "@vook-client/api": "*"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.3.3",
@@ -33,8 +34,15 @@
     "chromatic": "^11.3.2",
     "css-loader": "^7.1.1",
     "mini-css-extract-plugin": "^2.9.0",
+    "msw": "^2.3.1",
+    "msw-storybook-addon": "^2.0.2",
     "storybook": "^8.0.10",
     "style-loader": "^4.0.0",
     "vite": "^4.4.5"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
   }
 }