macbook 에서 리눅스로 이동

frontend/app/components/ui/button/index.ts

@@ -0,0 +1,41 @@
+import { defineComponent, h } from 'vue';
+
+export default defineComponent({
+  name: 'Button',
+  props: {
+    type: {
+      type: String,
+      default: 'button',
+    },
+    variant: {
+      type: String,
+      default: 'default',
+      validator: (value: string) => ['default', 'outline', 'ghost'].includes(value),
+    },
+    className: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props, { slots }) {
+    const base = 'inline-flex items-center justify-center rounded-md px-4 py-2 font-medium transition';
+    const styles: Record<string, string> = {
+      default: 'bg-cyan-500 text-black hover:bg-cyan-400',
+      outline: 'border border-slate-600 text-slate-100 bg-transparent hover:bg-slate-900',
+      ghost: 'text-slate-100 hover:bg-slate-800',
+    };
+
+    return () =>
+      h(
+        'button',
+        {
+          type: props.type as 'button' | 'submit' | 'reset',
+          class: `${base} ${styles[props.variant as keyof typeof styles]} ${props.className}`.trim(),
+        },
+        slots.default ? slots.default() : undefined,
+      );
+  },
+});
+
+export { Button };
+