[박소현] week19

.eslintrc.json

@@ -1,5 +1,8 @@
 {
-  "extends": "next/core-web-vitals",
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:storybook/recommended"
+  ],
   "rules": {
     "react/display-name": "off"
   }

.storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+    "@storybook/addon-themes",
+  ],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,36 @@
+import type { Preview } from "@storybook/react";
+// import { withThemeFromJSXProvider } from "@storybook/addon-themes";
+// import GlobalStyles from "../styles/GlobalStyle";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    // parameters 내 모든 컴포넌트에 공통적으로 적용할 툴바 조정하기
+    backgrounds: {
+      values: [
+        {
+          name: "blue",
+          value: "blue",
+        },
+        {
+          name: "pink",
+          value: "pink",
+        },
+      ],
+    },
+  },
+};
+
+export default preview;
+
+// export const decorators = [
+//   withThemeFromJSXProvider({
+//     GlobalStyles,
+//   }),
+// ];

next.config.js

@@ -6,6 +6,14 @@ const nextConfig = {
         protocol: "https",
         hostname: "codeit-images.codeit.com",
       },
+      {
+        protocol: "https",
+        hostname: "cloudflare-ipfs.com",
+      },
+      {
+        protocol: "https",
+        hostname: "*",
+      },
     ],
   },
   compiler: {