feat. sns 버튼 컴포넌트 제작

layers/components/atoms/Button/Sns.vue

@@ -3,6 +3,9 @@ const showSnsList = ref(false)
 const isForceClosed = ref(false)
 
 const { gameData } = useGameDataStore()
+const modalStore = useModalStore()
+
+const { handleOpenToast } = modalStore
 
 const snsBackgroundColor = computed(() => {
   const colorData = gameData?.comm_sns_bg_color_json?.display
@@ -42,9 +45,9 @@ const handleCopy = async () => {
   try {
     const url = window.location.href
     await navigator.clipboard.writeText(url)
-    console.log('✅ 복사 성공:', url)
-  } catch (err) {
-    console.error('❌ 복사 실패:', err)
+    handleOpenToast('복사 성공')
+  } catch (error) {
+    console.error('복사 실패:', error)
   }
 }
 </script>

layers/components/blocks/modal/Toast.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+interface Props {
+  isOpen: boolean
+  contentText: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isOpen: false,
+})
+
+const emit = defineEmits(['close'])
+
+const isVisible = ref(false)
+
+watch(
+  () => props.isOpen,
+  newVal => {
+    if (newVal) {
+      isVisible.value = true
+
+      setTimeout(() => {
+        isVisible.value = false
+        emit('close')
+      }, 2000)
+    }
+  }
+)
+</script>
+
+<template>
+  <Transition name="fade">
+    <div v-if="isVisible" class="toast-container">
+      <p class="toast-text">
+        {{ contentText }}
+      </p>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.toast-container {
+  @apply fixed left-1/2 max-w-[328px] py-3 px-6 rounded-[8px] bg-[rgba(85,85,85,0.4)] backdrop-blur-[25px] -translate-x-1/2 bottom-[20px] md:bottom-[40px] z-[800]
+  before:content-[''] before:absolute before:inset-0 before:border before:border-white/10 before:rounded-[8px];
+}
+.toast-text {
+  @apply text-center text-[16px] text-white leading-[26px] tracking-[-0.48px];
+}
+</style>