feat. sns 버튼 컴포넌트 제작

app/app.vue

@@ -15,7 +15,7 @@ const scrollStore = useScrollStore()
 
 const { setGameData } = gameDataStore
 const { gameData } = storeToRefs(gameDataStore)
-const { youtube, confirm, alert, handleResetYoutube } = modalStore
+const { youtube, confirm, alert, toast, handleResetYoutube } = modalStore
 
 const metaData = ref<GameDataMetaTag | null>(null)
 
@@ -174,6 +174,10 @@ onBeforeUnmount(() => {
     :modal-name="alert.storeModalName"
     @confirm-button-event="alert.storeConfirmButtonEvent"
   />
+  <BlocksModalToast
+    v-model:is-open="toast.storeIsOpen"
+    :content-text="toast.storeContentText"
+  />
 
   <!-- 로딩 컴포넌트 -->
   <AtomsLoadingFull />

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>

layers/stores/useModalStore.ts

@@ -95,13 +95,32 @@ export const useModalStore = defineStore('modalStore', () => {
     scrollStore.controlScrollLock(false)
   }
 
+  // toast ------------------
+  const toast = {
+    storeIsOpen: ref(false),
+    storeContentText: ref(''),
+  }
+
+  const handleOpenToast = (contentText: string) => {
+    toast.storeIsOpen.value = true
+    toast.storeContentText.value = contentText
+  }
+
+  const handleCloseToast = () => {
+    toast.storeIsOpen.value = false
+    toast.storeContentText.value = ''
+  }
+
   return {
     alert,
     confirm,
     youtube,
+    toast,
     handleOpenAlert,
     handleOpenConfirm,
     handleOpenYoutube,
     handleResetYoutube,
+    handleOpenToast,
+    handleCloseToast,
   }
 })