From e2a13e8a5887b6b6fcd7748b7db4bb6fdeb1a5b8 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Sat, 17 Sep 2022 19:58:34 +0900
Subject: [PATCH 1/3] add button component

---
 src/components/UI/BaseButton.vue | 68 ++++++++++++++++++++++++++++++++
 src/styles/common.scss           |  2 +
 2 files changed, 70 insertions(+)
 create mode 100644 src/components/UI/BaseButton.vue

diff --git a/src/components/UI/BaseButton.vue b/src/components/UI/BaseButton.vue
new file mode 100644
index 00000000..d754f83c
--- /dev/null
+++ b/src/components/UI/BaseButton.vue
@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import Icon from '/@/components/UI/Icon.vue'
+
+type ButtonType = 'primary' | 'secondary' | 'danger'
+
+interface Props {
+  type?: ButtonType
+  icon?: string
+  text: string
+  isDisabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'primary',
+  icon: '',
+  isDisabled: false
+})
+</script>
+
+<template>
+  <button
+    :class="$style.button"
+    :button-type="props.type"
+    :disabled="props.isDisabled"
+  >
+    <Icon v-if="props.icon" :name="props.icon" :class="$style.icon" />
+    {{ props.text }}
+  </button>
+</template>
+
+<style lang="scss" module>
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 4px 24px;
+  border-radius: 5px;
+  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.1);
+  transition: 0.2s ease-in-out;
+
+  &[button-type='primary'] {
+    color: $color-primary-text;
+    background-color: $color-primary;
+  }
+  &[button-type='secondary'] {
+    color: $color-primary;
+    background-color: $color-background;
+    border: 1px solid $color-primary;
+  }
+  &[button-type='danger'] {
+    color: $color-primary-text;
+    background-color: $color-danger;
+  }
+
+  &:hover {
+    opacity: 0.8;
+  }
+  &[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.icon {
+  display: flex;
+}
+</style>
diff --git a/src/styles/common.scss b/src/styles/common.scss
index a5b88649..a3ae2881 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -7,3 +7,5 @@ $color-secondary-text: #333E47;
 $color-background: #FFFFFF;
 $color-background-dim: #eff0f0;
 $color-text: #222425;
+
+$color-danger:#F26451;
\ No newline at end of file

From 71c7c8c38dbedb3db7eafb99a3b196a4d91a4654 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 19 Sep 2022 18:40:39 +0900
Subject: [PATCH 2/3] fix button

---
 src/components/UI/BaseButton.vue | 15 +++++++--------
 src/styles/common.scss           |  2 +-
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/UI/BaseButton.vue b/src/components/UI/BaseButton.vue
index d754f83c..784aabfe 100644
--- a/src/components/UI/BaseButton.vue
+++ b/src/components/UI/BaseButton.vue
@@ -6,13 +6,12 @@ type ButtonType = 'primary' | 'secondary' | 'danger'
 interface Props {
   type?: ButtonType
   icon?: string
-  text: string
   isDisabled?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   type: 'primary',
-  icon: '',
+  icon: undefined,
   isDisabled: false
 })
 </script>
@@ -20,11 +19,11 @@ const props = withDefaults(defineProps<Props>(), {
 <template>
   <button
     :class="$style.button"
-    :button-type="props.type"
+    :data-button-type="props.type"
     :disabled="props.isDisabled"
   >
     <Icon v-if="props.icon" :name="props.icon" :class="$style.icon" />
-    {{ props.text }}
+    <slot />
   </button>
 </template>
 
@@ -35,20 +34,20 @@ const props = withDefaults(defineProps<Props>(), {
   justify-content: center;
   gap: 4px;
   padding: 4px 24px;
-  border-radius: 5px;
+  border-radius: 6px; // todo:%で指定に変えるかも
   box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.1);
   transition: 0.2s ease-in-out;
 
-  &[button-type='primary'] {
+  &[data-button-type='primary'] {
     color: $color-primary-text;
     background-color: $color-primary;
   }
-  &[button-type='secondary'] {
+  &[data-button-type='secondary'] {
     color: $color-primary;
     background-color: $color-background;
     border: 1px solid $color-primary;
   }
-  &[button-type='danger'] {
+  &[data-button-type='danger'] {
     color: $color-primary-text;
     background-color: $color-danger;
   }
diff --git a/src/styles/common.scss b/src/styles/common.scss
index a3ae2881..0f78489c 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -8,4 +8,4 @@ $color-background: #FFFFFF;
 $color-background-dim: #eff0f0;
 $color-text: #222425;
 
-$color-danger:#F26451;
\ No newline at end of file
+$color-danger:#F26451;

From 058020d75cd84da059426b7d157919505e2918cb Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 19 Sep 2022 19:12:46 +0900
Subject: [PATCH 3/3] make component kebab-case

---
 src/components/UI/BaseButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/UI/BaseButton.vue b/src/components/UI/BaseButton.vue
index 784aabfe..80616f40 100644
--- a/src/components/UI/BaseButton.vue
+++ b/src/components/UI/BaseButton.vue
@@ -22,7 +22,7 @@ const props = withDefaults(defineProps<Props>(), {
     :data-button-type="props.type"
     :disabled="props.isDisabled"
   >
-    <Icon v-if="props.icon" :name="props.icon" :class="$style.icon" />
+    <icon v-if="props.icon" :name="props.icon" :class="$style.icon" />
     <slot />
   </button>
 </template>