fix: 스토리북 데코레이터를 워크샵에서 관리하도록 수정

apps/extension/components/SearchWindow/SearchWindow.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
 import { SearchWindow } from './SearchWindow'
 
@@ -14,9 +13,7 @@ const meta = {
           height: '600px',
         }}
       >
-        <QueryClientProvider client={new QueryClient()}>
-          <Story />
-        </QueryClientProvider>
+        <Story />
       </div>
     ),
   ],

apps/extension/components/TermItem/TermItem.stories.tsx

@@ -13,18 +13,27 @@ const meta = {
         '<strong>서버</strong>는 네트워크에 연결된 컴퓨터로 클라이언트의 요청을 받아 처리하고 결과를 응답으로 보냅니다. 웹 <strong>서버</strong>, 데이터 베이스 <strong>서버</strong>, 메일 <strong>서버</strong> 등이 <strong>서버</strong>에 속합니다.',
     },
   },
-  decorators: [
-    (Story) => (
-      <div style={{ width: '600px' }}>
-        <Story />
-      </div>
-    ),
-  ],
+  argTypes: {
+    term: {
+      control: {
+        type: 'object',
+      },
+    },
+  },
   tags: ['autodocs'],
 } satisfies Meta<typeof TermItem>
 
 export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Preview: Story = {}
+export const Preview: Story = {
+  args: {
+    term: {
+      term: '<strong>서버</strong>',
+      synonyms: 'Server',
+      meaning:
+        '<strong>서버</strong>는 네트워크에 연결된 컴퓨터로 클라이언트의 요청을 받아 처리하고 결과를 응답으로 보냅니다. 웹 <strong>서버</strong>, 데이터 베이스 <strong>서버</strong>, 메일 <strong>서버</strong> 등이 <strong>서버</strong>에 속합니다.',
+    },
+  },
+}

apps/web/src/app/(onboarding)/onboarding/_components/OnboardingHeader/OnboardingHeader.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { Step, Text } from '@vook-client/design-system'
 
 import { onboardingHeader, stepArea } from './OnboardingHeader.css'

apps/web/src/app/(onboarding)/onboarding/funnel/page.stories.tsx

@@ -5,20 +5,12 @@ import { OnBoardingProvider } from '../_context/useOnboarding'
 
 import OnboardingFunnel from './page'
 
-const meta = {
+const meta: Meta<typeof OnboardingFunnel> = {
   title: 'OnboardingFunnel',
   component: OnboardingFunnel,
   parameters: {
     layout: 'centered',
-    msw: {},
   },
-} satisfies Meta<typeof OnboardingFunnel>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Preview: Story = {
   decorators: [
     (Story) => (
       <OnBoardingProvider>
@@ -27,3 +19,9 @@ export const Preview: Story = {
     ),
   ],
 }
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Preview: Story = {}

apps/web/src/app/(onboarding)/onboarding/job/page.stories.tsx

@@ -1,10 +1,5 @@
-import {
-  AppRouterContext,
-  type AppRouterInstance,
-} from 'next/dist/shared/lib/app-router-context.shared-runtime'
 import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
 import { OnBoardingProvider } from '../_context/useOnboarding'
 
@@ -18,13 +13,9 @@ const meta: Meta<typeof OnboardingJobPage> = {
   },
   decorators: [
     (Story) => (
-      <AppRouterContext.Provider value={{} as AppRouterInstance}>
-        <QueryClientProvider client={new QueryClient()}>
-          <OnBoardingProvider>
-            <Story />
-          </OnBoardingProvider>
-        </QueryClientProvider>
-      </AppRouterContext.Provider>
+      <OnBoardingProvider>
+        <Story />
+      </OnBoardingProvider>
     ),
   ],
 }

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

@@ -1,9 +1,4 @@
-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'
 
@@ -13,16 +8,11 @@ const meta: Meta<typeof SignUpForm> = {
     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>
+      <div style={{ width: 400 }}>
+        <Story />
+      </div>
     ),
   ],
 }

apps/workshop/.storybook/manager.ts

@@ -1,5 +1,4 @@
 import { addons } from '@storybook/manager-api'
-import { themes } from '@storybook/theming'
 import { create } from '@storybook/theming/create'
 
 addons.setConfig({

apps/workshop/.storybook/preview.ts → apps/workshop/.storybook/preview.tsx

@@ -7,6 +7,12 @@ import { initialize, mswLoader } from 'msw-storybook-addon'
 
 import { Preview } from '@storybook/react'
 
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  AppRouterContext,
+  type AppRouterInstance,
+} from 'next/dist/shared/lib/app-router-context.shared-runtime'
+
 initialize()
 
 const preview: Preview = {
@@ -24,6 +30,15 @@ const preview: Preview = {
     },
   },
   loaders: [mswLoader],
+  decorators: [
+    (Story) => (
+      <AppRouterContext.Provider value={{} as AppRouterInstance}>
+        <QueryClientProvider client={new QueryClient()}>
+          <Story />
+        </QueryClientProvider>
+      </AppRouterContext.Provider>
+    ),
+  ],
 }
 
 export default preview

apps/workshop/package.json

@@ -9,8 +9,10 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.32.0",
     "@vook-client/api": "*",
     "@vook-client/design-system": "*",
+    "next": "^14.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },