Feat/button

.vscode/settings.json

@@ -3,5 +3,10 @@
     {
       "mode": "auto"
     }
-  ]
+  ],
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "explicit"
+  }
 }

apps/storybook/.storybook/main.ts

@@ -2,11 +2,16 @@ import type { StorybookConfig } from "@storybook/react-vite";
 import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 
 const config: StorybookConfig = {
-  stories: ["../../../packages/ui/src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: [
+    "../../../packages/ui/src/**/*.stories.@(js|jsx|ts|tsx)",
+    "../../../packages/ui/src/**/*.mdx", // 문서화용 MDX 파일 추가
+  ],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
+    "@storybook/addon-docs", // 문서화 애드온
+    "@storybook/blocks",
   ],
   framework: {
     name: "@storybook/react-vite",

apps/storybook/.storybook/preview.ts

@@ -1,5 +1,5 @@
+import "@repo/ui/src/globalStyle/global.css";
 import type { Preview } from "@storybook/react";
-import "../../../packages/ui/src/globalStyle/global.css"; // alias 설정해도 안됨
 
 const preview: Preview = {
   parameters: {

apps/storybook/package.json

@@ -12,7 +12,10 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "3.2.5",
+    "@mdx-js/react": "^3.1.0",
+    "@mdx-js/rollup": "^3.1.0",
     "@storybook/addon-actions": "^8.6.4",
+    "@storybook/addon-docs": "^8.6.4",
     "@storybook/addon-essentials": "8.6.4",
     "@storybook/addon-interactions": "8.6.4",
     "@storybook/addon-links": "^8.6.4",

apps/storybook/tsconfig.json

@@ -14,8 +14,7 @@
     "incremental": true,
     "baseUrl": ".", // alias 기준 설정
     "paths": {
-      "@/*": ["./src/*"],
-      "@repo/ui/*": ["../../../packages/ui/*"] // alias  설정
+      "@/*": ["./src/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],

apps/user/src/app/layout.tsx

@@ -1,3 +1,4 @@
+// import "@repo/ui/globalStyle";
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";

apps/user/src/app/page.tsx

@@ -1,12 +1,10 @@
 import Image from "next/image";
-import styles from "./page.module.css";
 
 export default function Home() {
   return (
-    <div className={styles.page}>
-      <main className={styles.main}>
+    <div>
+      <main>
         <Image
-          className={styles.logo}
           src="/next.svg"
           alt="Next.js logo"
           width={180}
@@ -20,15 +18,13 @@ export default function Home() {
           <li>Save and see your changes instantly.</li>
         </ol>
 
-        <div className={styles.ctas}>
+        <div>
           <a
-            className={styles.primary}
             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"
           >
             <Image
-              className={styles.logo}
               src="/vercel.svg"
               alt="Vercel logomark"
               width={20}
@@ -40,13 +36,12 @@ export default function Home() {
             href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"
-            className={styles.secondary}
           >
             Read our docs
           </a>
         </div>
       </main>
-      <footer className={styles.footer}>
+      <footer>
         <a
           href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           target="_blank"

packages/ui/eslint.config.mjs

@@ -0,0 +1,3 @@
+import baseConfig from "@repo/eslint-config/base";
+
+export default [...baseConfig];

packages/ui/package.json

@@ -6,6 +6,10 @@
     "./*": {
       "types": "./src/*.ts",
       "default": "./dist/*.js"
+    },
+    "./global.css": {
+      "types": "./src/globalStyle/global.css.ts",
+      "default": "./dist/globalStyle/global.css.js"
     }
   },
   "scripts": {

packages/ui/src/buttonComponent/Button.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ButtonComponent from "./ButtonComponent";
+import type { MouseEvent } from "react";
+import { FiUserPlus } from "react-icons/fi";
+
+const meta: Meta<typeof ButtonComponent> = {
+  component: ButtonComponent,
+  title: "UI/Button/Variant",
+  argTypes: {
+    children: { control: "text" },
+    type: {
+      control: "radio",
+      options: ["button", "submit", "reset"],
+    },
+    variant: {
+      control: "radio",
+      options: ["primary", "secondary", "outline", "accent"],
+    },
+    onClick: (e: MouseEvent) => alert("클릭 이벤트 발생"),
+    disabled: { control: "boolean" },
+  },
+  tags: ["!autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary_Button: Story = {
+  args: {
+    variant: "primary",
+    disabled: false,
+    children: "버튼입니다",
+  },
+};
+
+export const Secondary_Button: Story = {
+  args: {
+    variant: "secondary",
+    disabled: false,
+    children: "버튼입니다",
+  },
+};
+
+export const Accent_Button: Story = {
+  args: {
+    variant: "accent",
+    disabled: false,
+    children: "버튼입니다",
+  },
+};
+
+export const Outline_Button: Story = {
+  args: {
+    variant: "outline",
+    disabled: false,
+    children: "버튼입니다",
+  },
+};
+
+export const Icon_Button: Story = {
+  args: {
+    variant: "outline",
+    disabled: false,
+    children: "버튼입니다",
+    icon: <FiUserPlus />,
+  },
+};

packages/ui/src/buttonComponent/ButtonComponent.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FiUserPlus } from "react-icons/fi";
+import ButtonComponent from "./ButtonComponent";
+import { block, story } from "./storyStyle.css";
+
+const meta: Meta<typeof ButtonComponent> = {
+  component: ButtonComponent,
+  title: "UI/Button",
+  tags: ["!autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Button: Story = {
+  render: () => {
+    return (
+      <div className={story}>
+        <h3>primary</h3>
+        <div className={block}>
+          <ButtonComponent type="button" variant="primary">
+            DEFAULT
+          </ButtonComponent>
+          <ButtonComponent type="button" variant="primary" disabled>
+            DISABLED
+          </ButtonComponent>
+        </div>
+        <h3>secondary</h3>
+        <div className={block}>
+          <ButtonComponent type="button" variant="secondary">
+            DEFAULT
+          </ButtonComponent>
+          <ButtonComponent type="button" variant="secondary" disabled>
+            DISABLED
+          </ButtonComponent>
+        </div>
+        <h3>outline</h3>
+        <div className={block}>
+          <ButtonComponent type="button" variant="outline">
+            DEFAULT
+          </ButtonComponent>
+          <ButtonComponent type="button" variant="outline" disabled>
+            DISABLED
+          </ButtonComponent>
+        </div>
+        <h3>accent</h3>
+        <div className={block}>
+          <ButtonComponent type="button" variant="accent">
+            DEFAULT
+          </ButtonComponent>
+          <ButtonComponent type="button" variant="accent" disabled>
+            DISABLED
+          </ButtonComponent>
+        </div>
+        <h3>with Icon</h3>
+        <div className={block}>
+          <ButtonComponent type="button" variant="accent" icon={<FiUserPlus />}>
+            DEFAULT
+          </ButtonComponent>
+          <ButtonComponent
+            type="button"
+            variant="accent"
+            icon={<FiUserPlus />}
+            disabled
+          >
+            DISABLED
+          </ButtonComponent>
+        </div>
+      </div>
+    );
+  },
+};

packages/ui/src/buttonComponent/ButtonComponent.tsx

@@ -0,0 +1,23 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { buttonStyle } from "./style.css";
+
+interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
+  children: React.ReactNode;
+  variant: "primary" | "secondary" | "outline" | "accent";
+  icon?: ReactNode;
+}
+
+const ButtonComponent = ({ type, ...args }: ButtonProps) => {
+  return (
+    <button
+      type={type || "button"}
+      className={`${buttonStyle[args.variant]} ${args.className}`}
+      {...args}
+    >
+      {args.icon}
+      {args.children}
+    </button>
+  );
+};
+
+export default ButtonComponent;