fix: storybook 바벨 이슈 수정 (#139)

.storybook/main.js

@@ -2,15 +2,18 @@ const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
 
 module.exports = {
   stories: ['../src/components/**/*.stories.@(js|jsx|ts|tsx)'],
+
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions'
   ],
-  framework: '@storybook/react',
-  core: {
-    builder: '@storybook/builder-webpack5'
+
+  framework: {
+    name: '@storybook/nextjs',
+    options: {}
   },
+
   webpackFinal: async config => {
     config.resolve.plugins = [
       ...(config.resolve.plugins || []),
@@ -19,5 +22,9 @@ module.exports = {
       })
     ]
     return config
+  },
+
+  docs: {
+    autodocs: true
   }
 }

package.json

@@ -7,12 +7,10 @@
     "build": "next build",
     "start": "next start",
     "lint": "tsc --noEmit && eslint --ext .ts,.tsx src",
-    "storybook": "start-storybook -s public -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -s public -p 6006",
+    "build-storybook": "storybook build",
     "test": "jest --env=jsdom",
     "prettier": "prettier '**/*.{json,js,jsx,ts,tsx}' --write",
-    "test:watch": "vitest",
-    "coverage": "vitest run --coverage",
     "prepare": "husky install",
     "stylelint": "stylelint './src/**/*.{js,jsx,ts,tsx}' --fix"
   },
@@ -33,14 +31,13 @@
   "devDependencies": {
     "@babel/core": "^7.22.9",
     "@babel/preset-env": "^7.22.9",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-interactions": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.9",
-    "@storybook/react": "^6.5.9",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-actions": "^7.5.1",
+    "@storybook/addon-essentials": "^7.5.1",
+    "@storybook/addon-interactions": "^7.5.1",
+    "@storybook/addon-links": "^7.5.1",
+    "@storybook/nextjs": "^7.5.1",
+    "@storybook/react": "^7.5.1",
+    "@storybook/testing-library": "^0.2.2",
     "@stylelint/postcss-css-in-js": "^0.38.0",
     "@testing-library/dom": "^8.19.0",
     "@testing-library/jest-dom": "^5.17.0",
@@ -52,7 +49,6 @@
     "@types/react-dom": "18.0.6",
     "@typescript-eslint/eslint-plugin": "^5.32.0",
     "@typescript-eslint/parser": "^5.32.0",
-    "@vitejs/plugin-react": "^2.2.0",
     "babel-jest": "^29.6.2",
     "babel-loader": "^8.2.5",
     "eslint": "8.21.0",
@@ -62,7 +58,7 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest-dom": "^4.0.3",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-storybook": "^0.6.3",
+    "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-testing-library": "^5.9.1",
     "husky": "^8.0.1",
     "jest": "^29.6.2",
@@ -76,15 +72,18 @@
     "postcss": "^8.4.27",
     "postcss-syntax": "^0.36.2",
     "prettier": "2.7.1",
+    "storybook": "^7.5.1",
     "stylelint": "^15.10.2",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-order": "^6.0.3",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "^4.0.0",
-    "typescript": "4.7.4",
-    "vite-tsconfig-paths": "^4.0.3",
-    "vitest": "^0.25.3"
+    "typescript": "4.7.4"
+  },
+  "resolutions": {
+    "@types/react": "18.0.15",
+    "@types/react-dom": "18.0.6"
   },
   "lint-staged": {},
   "msw": {

src/components/common/AlertModal/AlertModal.stories.tsx

@@ -1,15 +1,18 @@
-import type { Meta, Story } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 import type { AlertModalProps } from './types'
-import { AlertModal } from '.'
+import { AlertModal as AlertModalComponent } from '.'
 import useModal from '@hooks/useModal'
 
-export default {
-  argTypes: {},
-  component: AlertModal,
+type AlertModal = typeof AlertModalComponent
+
+const meta: Meta<AlertModal> = {
+  component: AlertModalComponent,
   title: 'Common/AlertModal'
-} as Meta<AlertModalProps>
+}
 
-const Template: Story<AlertModalProps> = args => {
+export default meta
+
+const DefaultWithHooks = (args: AlertModalProps) => {
   const { openModal, closeModal, isOpen } = useModal()
 
   return (
@@ -21,7 +24,7 @@ const Template: Story<AlertModalProps> = args => {
         }}>
         click
       </button>
-      <AlertModal
+      <AlertModalComponent
         {...args}
         isOpen={isOpen}
         onClose={(): void => {
@@ -31,10 +34,13 @@ const Template: Story<AlertModalProps> = args => {
     </>
   )
 }
-export const Default = Template.bind({})
-Default.args = {
-  title: 'Title',
-  subTitle: 'SubTitle',
-  buttonContents: '확인',
-  hasCheckIcon: true
+
+export const Default: StoryObj<AlertModal> = {
+  args: {
+    title: 'Title',
+    subTitle: 'SubTitle',
+    buttonContents: '확인',
+    hasCheckIcon: true
+  },
+  render: args => <DefaultWithHooks {...args} />
 }

src/components/common/CommonModal/CommonModal.stories.tsx

@@ -1,26 +1,52 @@
 import { Button } from '@offer-ui/react'
-import type { Meta, Story } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
 import type { CommonModalProps } from './types'
-import { CommonModal } from './index'
+import { CommonModal as CommonModalComponent } from './index'
 
-export default {
-  component: CommonModal,
+type CommonModal = typeof CommonModalComponent
+
+const meta: Meta<CommonModal> = {
+  component: CommonModalComponent,
   title: 'Common/CommonModal'
-} as Meta<CommonModalProps>
+}
+
+export default meta
 
-const Template: Story<CommonModalProps> = args => (
-  <CommonModal {...args} isOpen />
-)
+const DefaultWithHooks = (args: CommonModalProps) => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => {
+          setIsOpen(true)
+        }}>
+        open
+      </button>
+      <CommonModalComponent
+        {...args}
+        isOpen={isOpen}
+        onClose={() => {
+          setIsOpen(false)
+        }}
+      />
+    </>
+  )
+}
 
-export const Default = Template.bind({})
-Default.args = {
-  description: '지금 바로 Offer에서 첫 거래를 시작해볼까요?',
-  hasLogo: true,
-  title: '부드러운 냉장고님 반가워요!',
-  buttons: [
-    <Button key="first">첫 판매하기</Button>,
-    <Button key="ok" styleType="ghost">
-      괜찮아요
-    </Button>
-  ]
+export const Default: StoryObj<CommonModal> = {
+  args: {
+    description: '지금 바로 Offer에서 첫 거래를 시작해볼까요?',
+    hasLogo: true,
+    title: '부드러운 냉장고님 반가워요!',
+    buttons: [
+      <Button key="first">첫 판매하기</Button>,
+      <Button key="ok" styleType="ghost">
+        괜찮아요
+      </Button>
+    ]
+  },
+  render: args => <DefaultWithHooks {...args} />
 }

src/components/common/Tabs/Tabs.stories.tsx

@@ -1,31 +1,30 @@
-import type { Meta, Story } from '@storybook/react'
-import type { TabsProps } from './types'
-import { Tab, Tabs } from './index'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Tabs as TabsComponent, Tab } from './index'
 
-export default {
-  argTypes: {
-    defaultTabIndex: {
-      control: 'number'
-    }
-  },
-  component: Tabs,
+type Tabs = typeof TabsComponent
+
+const meta: Meta<Tabs> = {
+  component: TabsComponent,
   title: 'Common/Tabs'
-} as Meta<TabsProps>
+}
+
+export default meta
 
-const Template: Story<TabsProps> = args => (
-  <div>
-    <Tabs {...args}>
-      <Tabs.List>
-        <Tab>1</Tab>
-        <Tab>2</Tab>
-        <Tab>3</Tab>
-      </Tabs.List>
-      <Tabs.Panels>
-        <Tabs.Panel>HeadLess Tabs Content 1</Tabs.Panel>
-        <Tabs.Panel>HeadLess Tabs Content 2</Tabs.Panel>
-        <Tabs.Panel>HeadLess Tabs Content 3</Tabs.Panel>
-      </Tabs.Panels>
-    </Tabs>
-  </div>
-)
-export const Default = Template.bind({})
+export const Default: StoryObj<Tabs> = {
+  render: args => (
+    <div>
+      <TabsComponent {...args}>
+        <TabsComponent.List>
+          <Tab>1</Tab>
+          <Tab>2</Tab>
+          <Tab>3</Tab>
+        </TabsComponent.List>
+        <TabsComponent.Panels>
+          <TabsComponent.Panel>HeadLess Tabs Content 1</TabsComponent.Panel>
+          <TabsComponent.Panel>HeadLess Tabs Content 2</TabsComponent.Panel>
+          <TabsComponent.Panel>HeadLess Tabs Content 3</TabsComponent.Panel>
+        </TabsComponent.Panels>
+      </TabsComponent>
+    </div>
+  )
+}