Storybook 문서화 기본 설정 및 예시 컴포넌트 추가

.eslintrc.cjs

@@ -6,6 +6,7 @@ module.exports = {
     "plugin:react/recommended",
     "plugin:react/jsx-runtime",
     "plugin:react-hooks/recommended",
+    "plugin:storybook/recommended"
   ],
   ignorePatterns: ["dist", ".eslintrc.cjs"],
   parserOptions: { ecmaVersion: "latest", sourceType: "module" },

.gitignore

@@ -24,4 +24,6 @@ yarn-debug.log*
 yarn-error.log*
 
 # code
-.history
+.history
+*storybook.log
+storybook-static

.storybook/main.js

@@ -0,0 +1,12 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: ["@storybook/preset-create-react-app", "@storybook/addon-docs"],
+  framework: {
+    // "name": "@storybook/react-webpack5",
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  staticDirs: ["../public"],
+};
+export default config;

.storybook/preview.js

@@ -0,0 +1,19 @@
+/** @type { import('@storybook/react-webpack5').Preview } */
+import "../src/css/base.css";
+import "../src/css/layout.css";
+import "../src/css/component.css";
+import "../src/css/page.css";
+import "../src/css/response.css";
+
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

README.md

@@ -161,6 +161,11 @@ npm run test
 npm run test:run
 ```
 
+```bash
+# 컴포넌트를 독립적으로 확인하고 테스트하려면 아래 명령어를 사용한다. (storybook)
+npm run storybook
+```
+
 ---
 
 ### 참조
@@ -169,3 +174,4 @@ npm run test:run
 
 1. [vite 공식 가이드 문서(한글)](https://vitejs-kr.github.io/guide/)
 2. [개발환경 초기 설정](./Docs/development-env-setting.md)
+3. [storybook 공식 가이드 문서](https://storybook.js.org/)