Merge pull request #332 from DaleStudy/198-storybook-9-version

Sunjae95 · web-flow · commit 83e2ed37f65c · 2025-06-25T23:35:15.000+09:00
스토리북 9 버전 마이그레이션
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -3,14 +3,11 @@ import type { StorybookConfig } from "@storybook/react-vite";
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
     "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
     "@storybook/addon-a11y",
     "@storybook/addon-themes",
-    "@storybook/theming",
     "@storybook/addon-designs",
+    "@storybook/addon-docs",
   ],
   framework: {
     name: "@storybook/react-vite",
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,10 +1,10 @@
 import "../src/index.css";
 import React from "react";
 import { withThemeByClassName } from "@storybook/addon-themes";
-import { DocsContainer } from "@storybook/blocks";
-import { themes } from "@storybook/theming";
-import type { Preview, ReactRenderer } from "@storybook/react";
-import type { DocsContainerProps } from "@storybook/blocks";
+import { DocsContainer } from "@storybook/addon-docs/blocks";
+import { themes } from "storybook/theming";
+import type { Preview, ReactRenderer } from "@storybook/react-vite";
+import type { DocsContainerProps } from "@storybook/addon-docs/blocks";
 
 const preview: Preview = {
   parameters: {
diff --git a/bun.lock b/bun.lock
diff --git a/package.json b/package.json
@@ -35,22 +35,16 @@
     "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.6",
+    "@chromatic-com/storybook": "^4.0.1",
     "@eslint/js": "^9.29.0",
     "@faker-js/faker": "^9.8.0",
     "@pandacss/dev": "^0.53.7",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-designs": "^8.2.1",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/addon-themes": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-vite": "^8.6.14",
-    "@storybook/test": "^8.6.14",
-    "@storybook/test-runner": "^0.22.0",
-    "@storybook/theming": "^8.6.14",
+    "@storybook/addon-a11y": "^9.0.13",
+    "@storybook/addon-designs": "^10.0.1",
+    "@storybook/addon-docs": "^9.0.13",
+    "@storybook/addon-themes": "^9.0.13",
+    "@storybook/react-vite": "^9.0.13",
+    "@storybook/test-runner": "^0.23.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -65,7 +59,7 @@
     "globals": "^16.1.0",
     "happy-dom": "^18.0.1",
     "prettier": "^3.5.3",
-    "storybook": "^8.6.14",
+    "storybook": "^9.0.13",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.32.1",
     "vite": "^6.3.5",
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Button } from "./Button";
 import { vstack } from "../../../styled-system/patterns";
 
diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx
@@ -1,4 +1,4 @@
-import { composeStories } from "@storybook/react";
+import { composeStories } from "@storybook/react-vite";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { expect, test, vi } from "vitest";
diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Checkbox } from "./Checkbox";
 import { vstack } from "../../../styled-system/patterns";
 
diff --git a/src/components/Checkbox/Checkbox.test.tsx b/src/components/Checkbox/Checkbox.test.tsx
@@ -1,4 +1,4 @@
-import { composeStories } from "@storybook/react";
+import { composeStories } from "@storybook/react-vite";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { expect, test, vi } from "vitest";
diff --git a/src/components/Heading/Heading.stories.tsx b/src/components/Heading/Heading.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { vstack } from "../../../styled-system/patterns";
 import { Heading } from "./Heading";
 
diff --git a/src/components/Heading/Heading.test.tsx b/src/components/Heading/Heading.test.tsx
@@ -1,5 +1,5 @@
 import { faker } from "@faker-js/faker";
-import { composeStories } from "@storybook/react";
+import { composeStories } from "@storybook/react-vite";
 import { render, screen } from "@testing-library/react";
 import { expect, test } from "vitest";
 import { fontSizes, fontWeights } from "../../tokens/typography";
diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { vstack } from "../../../styled-system/patterns";
 import { Heading } from "../Heading/Heading";
 import { Text } from "../Text/Text";
diff --git a/src/components/Icon/Icon.test.tsx b/src/components/Icon/Icon.test.tsx
@@ -1,4 +1,4 @@
-import { composeStories } from "@storybook/react";
+import { composeStories } from "@storybook/react-vite";
 import { render } from "@testing-library/react";
 import { expect, test } from "vitest";
 import * as stories from "./Icon.stories";
diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx
@@ -1,9 +1,9 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { vstack } from "../../../styled-system/patterns";
 import { Icon } from "../Icon/Icon";
 import { Link } from "./Link";
 
-const meta: Meta<typeof Link> = {
+export default {
   component: Link,
   parameters: {
     layout: "centered",
@@ -21,9 +21,7 @@ const meta: Meta<typeof Link> = {
       );
     },
   ],
-};
-
-export default meta;
+} satisfies Meta;
 
 export const Basic: StoryObj<typeof Link> = {};
 
diff --git a/src/components/Link/Link.test.tsx b/src/components/Link/Link.test.tsx
@@ -1,5 +1,5 @@
 import { faker } from "@faker-js/faker";
-import { composeStories } from "@storybook/react";
+import { composeStories } from "@storybook/react-vite";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, test, vi } from "vitest";
diff --git a/src/components/RadioGroup/RadioGroup.stories.tsx b/src/components/RadioGroup/RadioGroup.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
 import { css } from "../../../styled-system/css";
 import { Radio, RadioGroup } from "./RadioGroup";
diff --git a/src/components/Text/Text.stories.tsx b/src/components/Text/Text.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { vstack } from "../../../styled-system/patterns";
 import { Text } from "./Text";
 
diff --git a/src/components/Text/Text.test.tsx b/src/components/Text/Text.test.tsx
@@ -1,5 +1,5 @@
 import { faker } from "@faker-js/faker";
-import { composeStories } from "@storybook/react";
+import { composeStories } from "@storybook/react-vite";
 import { render, screen } from "@testing-library/react";
 import { expect, test } from "vitest";
 import { fontSizes, fontWeights } from "../../tokens/typography";
diff --git a/src/examples/Homepage/Homepage.stories.tsx b/src/examples/Homepage/Homepage.stories.tsx
@@ -1,4 +1,4 @@
-import type { StoryObj } from "@storybook/react";
+import type { StoryObj } from "@storybook/react-vite";
 import { hstack, vstack } from "../../../styled-system/patterns";
 import { css } from "../../../styled-system/css";
 import { Icon } from "../../components/Icon/Icon";
diff --git a/src/examples/login/Login.stories.tsx b/src/examples/login/Login.stories.tsx
@@ -1,5 +1,5 @@
-import { action } from "@storybook/addon-actions";
-import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "storybook/actions";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Button } from "../../components/Button/Button";
 import { Checkbox } from "../../components/Checkbox/Checkbox";
 import { Heading } from "../../components/Heading/Heading";
diff --git a/src/tokens/colors.mdx b/src/tokens/colors.mdx
@@ -1,4 +1,4 @@
-import { ColorItem, ColorPalette, Meta } from "@storybook/blocks";
+import { ColorItem, ColorPalette, Meta } from "@storybook/addon-docs/blocks";
 import { colors, semanticColors } from "./colors";
 
 # Colors
diff --git a/src/tokens/iconography.mdx b/src/tokens/iconography.mdx
@@ -1,4 +1,4 @@
-import { IconGallery, IconItem } from "@storybook/blocks";
+import { IconGallery, IconItem } from "@storybook/addon-docs/blocks";
 import { icons } from "./iconography";
 
 # Iconography
diff --git a/src/tokens/typography.mdx b/src/tokens/typography.mdx
@@ -1,4 +1,4 @@
-import { Typeset } from "@storybook/blocks";
+import { Typeset } from "@storybook/addon-docs/blocks";
 import { Figma } from "@storybook/addon-designs/blocks";
 import {
   fonts,

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type { Meta, StoryObj } from "@storybook/react";`
	`1`	`+import type { Meta, StoryObj } from "@storybook/react-vite";`
`2`	`2`	`import { Button } from "./Button";`
`3`	`3`	`import { vstack } from "../../../styled-system/patterns";`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { composeStories } from "@storybook/react";`
	`1`	`+import { composeStories } from "@storybook/react-vite";`
`2`	`2`	`import { render, screen } from "@testing-library/react";`
`3`	`3`	`import userEvent from "@testing-library/user-event";`
`4`	`4`	`import { expect, test, vi } from "vitest";`