feat.게임 공통 이미지 적용 (video, arrow)

layers/components/atoms/Button/Variant.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { ButtonVariant } from '#layers/types/components/button'
+
+interface props {
+  variant?: ButtonVariant
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<props>(), {
+  variant: 'filled',
+  disabled: false,
+})
+</script>
+
+<template>
+  <button :class="['btn-base', props.variant]" :disabled="props.disabled">
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+.btn-base {
+  @apply relative w-full py-[14px] px-5 text-sm font-medium rounded-lg
+  before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-black/10 before:rounded-lg before:transition-all before:duration-300 before:ease-in-out;
+}
+
+.btn-base.filled {
+  @apply bg-[var(--primary)] text-[var(--text-secondary)]
+  after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-lg after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0
+  hover:after:opacity-20;
+}
+
+.btn-base.outlined {
+  @apply bg-white text-[#333333]
+  hover:before:border-[#999];
+}
+
+.btn-base:disabled {
+  @apply cursor-default bg-[#EBEBEB] text-[#999]
+  before:border-[#D9D9D9]
+  after:hidden
+  hover:before:border-[#D9D9D9];
+}
+</style>