feat. home 버튼 컴포넌트 추가

layers/components/atoms/Button/Circle.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+interface props {
+  type?: 'button' | 'link'
+  to?: string
+  target?: '_self' | '_blank'
+  srOnly?: string
+}
+
+const props = withDefaults(defineProps<props>(), {
+  type: 'button',
+  to: '',
+  target: '_self',
+  srOnly: '',
+})
+
+const componentTag = computed((): string => {
+  switch (props.type) {
+    case 'link':
+      return 'AtomsLocaleLink'
+    default:
+      return 'button'
+  }
+})
+
+const componentProps = computed(() => {
+  switch (props.type) {
+    case 'link':
+      return { to: props.to, target: props.target }
+    default:
+      return {}
+  }
+})
+</script>
+
+<template>
+  <component :is="componentTag" v-bind="componentProps" class="btn-circle">
+    <slot />
+    <span class="sr-only">{{ props.srOnly }}</span>
+  </component>
+</template>
+
+<style scoped>
+.btn-circle {
+  @apply relative flex items-center justify-center rounded-full
+    w-[40px] h-[40px] md:w-[48px] md:h-[48px]
+    before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-[rgba(255,255,255,0.06)] before:rounded-full
+    after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-full after:opacity-0 after:transition-all after:duration-300 after:ease-in-out
+hover:after:opacity-10;
+}
+</style>