[feature/example-update] 예제 및 README 수정 (#31)

* [feature/example-update] 불필요한 예제 코드 제거 및 README 추가

* [feature/example-update] 버전 지정

* [feature/example-update] README 업데이트

README.md

@@ -26,12 +26,22 @@
 
 ## Support
 
-| name      | version | info                                              |
-| --------- |---------| ------------------------------------------------- |
-| React     | 16 ~ 17 | ✅ fully supported                                |
-| React     | 18      | 🚧 React 18 warning display, no functional issues |
-| Storybook | 6.3.x   | ✅ fully supported                                |
-| Storybook | 6.5.x   | ✅ fully supported                                |
+### v7
+
+| name      | version  | info              |
+| --------- |----------|-------------------|
+| React     | <= 18    | ✅ fully supported |
+| Storybook | >= 7.0.0 | ✅ fully supported |
+| Storybook | < 7.0.0  | ❌ [using v6](https://www.npmjs.com/package/storybook-addon-useragent?activeTab=versions)    |
+
+### v6
+
+| name      | version | info                                                                                     |
+| --------- |---------|------------------------------------------------------------------------------------------|
+| React     | <= 18   | ✅ fully supported                                                                        |
+| Storybook | >= 7.0.0 | ❌ [using v7](https://www.npmjs.com/package/storybook-addon-useragent?activeTab=versions) |
+| Storybook | < 7.0.0  | ✅ fully supported                                                                        |
+
 
 ## Installing and Setup
 
@@ -47,7 +57,7 @@ yarn:
 yarn add storybook-addon-useragent -D
 ```
 
-### Add it to addons in `.storybook/main.ts`.
+### Add it to addons in `.storybook/main.js`.
 
 ```js
 module.exports = {
@@ -81,8 +91,10 @@ export const customUserAgents = [
 import { customUserAgents } from "./userAgent";
 
 export const parameters = {
+  ...
   userAgent: customUserAgents,
 };
+
 ```
 
 ### Set as default in `stories`
@@ -98,6 +110,9 @@ import { UserAgentExample } from "./UserAgentExample";
 export default {
   title: "Example/UserAgentExample",
   component: UserAgentExample,
+  argTypes: {
+    useragent: { control: "text" },
+  },
 };
 
 const Template = (args) => <UserAgentExample {...args} />;

example/.storybook/main.js

@@ -1,22 +1,11 @@
 module.exports = {
-  stories: [
-    "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
-  ],
-
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "storybook-addon-useragent",
-  ],
-
+  stories: ["../stories/*.stories.jsx"],
+  addons: ["@storybook/addon-essentials", "storybook-addon-useragent"],
   framework: {
     name: "@storybook/react-vite",
-    options: {}
+    options: {},
   },
-
   docs: {
-    autodocs: true
-  }
+    autodocs: true,
+  },
 };

example/README.md

@@ -0,0 +1,8 @@
+## Storybook Addon User-Agent Example
+
+## Getting Started
+
+```bash
+npm install
+npm run storybook
+```