init: storybook 세팅

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
-}
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:storybook/recommended"
+  ]
+}

.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,42 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  webpackFinal: async (config) => {
+    if (!config.module || !config.module.rules) {
+      return config;
+    }
+
+    config.module.rules = [
+      ...config.module.rules.map((rule) => {
+        if (!rule || rule === "...") {
+          return rule;
+        }
+        if (rule.test && /svg/.test(rule.test.toString())) {
+          return { ...rule, exclude: /\.svg$/i };
+        }
+        return rule;
+      }),
+      {
+        test: /\.svg$/,
+        use: ["@svgr/webpack"],
+      },
+    ];
+    return config;
+  },
+  staticDirs: ["..\\public"],
+};
+export default config;

.storybook/manager.ts

@@ -0,0 +1,16 @@
+import { addons } from "@storybook/manager-api";
+import { create } from "@storybook/theming/create";
+
+const theme = create({
+  base: "light", // 또는 'dark'
+
+  // 브랜드
+  brandTitle: "YD-DEVLOG",
+  brandUrl: "https://youngduck-devlog.vercel.app/",
+  brandImage: "/assets/logo/logo.png",
+  brandTarget: "_blank",
+});
+
+addons.setConfig({
+  theme: theme,
+});

.storybook/preview.tsx

@@ -0,0 +1,31 @@
+import type { Preview } from "@storybook/react";
+import "../src/app/globals.css";
+import { ThemeProvider } from "../src/app/_components/provider/theme-provider";
+import React from "react";
+
+const withThemeProvider = (Story: React.ComponentType, context: any) => {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      <Story {...context} />
+    </ThemeProvider>
+  );
+};
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [withThemeProvider],
+};
+
+export default preview;

README.md

@@ -1,6 +1,16 @@
 # youngduck-devlog
 
-안녕하세요! 프론트엔드 개발자 김영덕입니다.
+안녕하세요! 프론트엔드 개발자 김영덕의 기술 블로그입니다.
+
+## 🛠 개발환경
+
+- **언어**: TypeScript
+- **프레임워크**: Next.js(APP ROUTER)
+- **스타일링**: Tailwind
+- **UI 테스트**: Storybook
+- **빌드 도구**: Webpack
+- **버전 관리**: Git
+- **패키지 관리자**: npm
 
 ## 📫 연락처