[이태경] Sprint10

.gitignore

@@ -39,3 +39,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*storybook.log
+storybook-static

.storybook/main.ts

@@ -0,0 +1,36 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  staticDirs: [
+    "../public",
+    {
+      from: "../public/fonts",
+      to: "public/fonts",
+    },
+  ],
+  webpackFinal: async (config) => {
+    config.module = config.module || {};
+    config.module.rules = config.module.rules || [];
+
+    const imageRule = config.module.rules.find((rule) =>
+      rule?.["test"]?.test(".svg")
+    );
+    if (imageRule) {
+      imageRule["exclude"] = /\.svg$/;
+    }
+
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"],
+    });
+
+    return config;
+  },
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import type { Preview } from "@storybook/nextjs";
+import "../src/app/globals.css";
+import { nanumsquare } from "../src/app/layout";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className={nanumsquare.className}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default preview;

eslint.config.mjs

@@ -1,3 +1,6 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
 import { dirname } from "path";
 import { fileURLToPath } from "url";
 import { FlatCompat } from "@eslint/eslintrc";
@@ -11,11 +14,8 @@ const compat = new FlatCompat({
 
 const eslintConfig = [
   ...compat.extends("next/core-web-vitals", "next/typescript"),
-
   {
-    plugins: {
-      import: pluginImport,
-    },
+    plugins: ["import"],
     rules: {
       // 쓰이지 않는 변수 검사
       "no-unused-vars": "off",
@@ -61,6 +61,7 @@ const eslintConfig = [
       ],
     },
   },
+  ...storybook.configs["flat/recommended"],
 ];
 
 export default eslintConfig;

next.config.ts

@@ -10,6 +10,15 @@ const nextConfig: NextConfig = {
 
     return config;
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "sprint-fe-project.s3.ap-northeast-2.amazonaws.com",
+        pathname: "/**", // 경로 패턴, 모든 이미지 허용
+      },
+    ],
+  },
 };
 
 export default nextConfig;