From 19f52d4a48861ce4b5841824e992eb23144a1852 Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Wed, 15 May 2024 16:34:08 +0900
Subject: [PATCH] Feat: Add button components

---
 src/components/common/FilledButton.vue | 56 ++++++++++++++++++++++++++
 src/components/common/TextButton.vue   | 48 ++++++++++++++++++++++
 2 files changed, 104 insertions(+)
 create mode 100644 src/components/common/FilledButton.vue
 create mode 100644 src/components/common/TextButton.vue

diff --git a/src/components/common/FilledButton.vue b/src/components/common/FilledButton.vue
new file mode 100644
index 0000000..1d007ae
--- /dev/null
+++ b/src/components/common/FilledButton.vue
@@ -0,0 +1,56 @@
+<script setup>
+const { type, primary } = defineProps({
+  type: {
+    type: String,
+    default: 'button',
+  },
+  primary: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<template>
+  <button :type="type" :class="primary ? 'primary' : ''">
+    <slot></slot>
+  </button>
+</template>
+
+<style scoped>
+button {
+  border: none;
+  border-radius: 8px;
+  padding: 8px 12px;
+  font-size: 14px;
+  font-weight: bold;
+  background-color: var(--color-background-soft);
+  color: var(--color-text-secondary);
+  transition:
+    background-color 0.25s,
+    transform 0.25s;
+}
+
+button.primary {
+  background-color: var(--color-primary);
+  color: var(--color-background);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  button:hover {
+    background-color: var(--color-background-soft);
+  }
+
+  button.primary:hover {
+    background-color: var(--color-primary-soft);
+  }
+}
+
+button:active {
+  transform: scale(0.95);
+}
+
+button.primary:active {
+  background-color: var(--color-primary-soft);
+}
+</style>
diff --git a/src/components/common/TextButton.vue b/src/components/common/TextButton.vue
new file mode 100644
index 0000000..7fc8ada
--- /dev/null
+++ b/src/components/common/TextButton.vue
@@ -0,0 +1,48 @@
+<script setup>
+import { computed } from 'vue';
+
+const { type, primary, filled } = defineProps({
+  type: {
+    type: String,
+    default: 'button',
+  },
+  primary: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const classes = computed(() => [primary ? 'primary' : '', filled ? 'filled' : '']);
+</script>
+
+<template>
+  <button :type="type" :class="classes">
+    <slot></slot>
+  </button>
+</template>
+
+<style scoped>
+button {
+  border: none;
+  font-size: 14px;
+  font-weight: bold;
+  background: none;
+  padding: 0 4px;
+  color: var(--color-text-secondary);
+  transition: transform 0.25s;
+}
+
+button.primary {
+  color: var(--color-primary);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  button:hover {
+    text-decoration: underline;
+  }
+}
+
+button:active {
+  transform: scale(0.95);
+}
+</style>