fix. top버튼 게임 공통 이미지 적용

layers/components/atoms/Button/ScrollTop.vue

@@ -11,7 +11,6 @@ const handleScrollToTop = () => {
 <template>
   <Transition name="fade">
     <button v-if="showBtn" class="btn-top" @click="handleScrollToTop">
-      <AtomsIconsTopLine class="icon-top" />
       <span class="sr-only">top</span>
     </button>
   </Transition>
@@ -19,24 +18,11 @@ const handleScrollToTop = () => {
 
 <style scoped>
 .btn-top {
-  @apply relative rounded-full flex items-center justify-center bg-black/20  z-[100]
+  @apply relative rounded-full bg-[image:var(--button-top)] bg-center bg-cover bg-no-repeat z-[100]
   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 before:transition-all before:duration-300 before:ease-in-out
   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;
 }
 .btn-top:hover {
   @apply after:opacity-10;
 }
-.btn-top:hover .icon-top {
-  @apply opacity-100;
-}
-.icon-top {
-  @apply opacity-50 transition-opacity duration-300 ease-in-out;
-}
-
-[data-theme='light'] {
-  .btn-top {
-    @apply bg-white/10;
-  }
-}
 </style>

layers/components/atoms/icons/TopLine.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  size?: number | string
-  color?: string
-}
-
-withDefaults(defineProps<Props>(), {
-  size: 24,
-  color: 'white',
-})
-</script>
-
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    :width="size"
-    :height="size"
-    viewBox="0 0 24 24"
-    fill="none"
-  >
-    <path
-      d="M13 9.41422L17.2929 13.7071C17.6834 14.0976 18.3166 14.0976 18.7071 13.7071C19.0976 13.3166 19.0976 12.6834 18.7071 12.2929L12.7078 6.29361C12.5289 6.1143 12.2822 6.00257 12.0094 6.00005C12.0063 6.00002 12.0032 6.00001 12 6.00001C11.9968 6.00001 11.9937 6.00002 11.9906 6.00005C11.7269 6.00249 11.4877 6.10694 11.3104 6.27585C11.3045 6.28145 11.2987 6.28714 11.2929 6.2929L5.29289 12.2929C4.90237 12.6834 4.90237 13.3166 5.29289 13.7071C5.68341 14.0976 6.31658 14.0976 6.7071 13.7071L11 9.41422L11 20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20L13 9.41422Z"
-      :fill="color"
-    />
-    <path
-      d="M19.5 4.00001C19.5 4.55229 19.0523 5 18.5 5L5.5 5C4.94771 5 4.5 4.55228 4.5 4C4.5 3.44772 4.94771 3 5.5 3L18.5 3C19.0523 3 19.5 3.44772 19.5 4.00001Z"
-      :fill="color"
-    />
-  </svg>
-</template>

layers/components/blocks/UtileContainer.vue

@@ -24,7 +24,7 @@ const pinToParent = computed(() => {
 <template>
   <div :class="['utile-container', { 'is-fixed': pinToParent }]">
     <AtomsButtonScrollTop v-if="props.isShowTopBtn" />
-    <!-- <AtomsButtonSns v-if="props.isShowSnsBtn" /> -->
+    <AtomsButtonSns v-if="props.isShowSnsBtn" />
   </div>
 </template>
 

layers/types/api/gameData.ts

@@ -91,13 +91,13 @@ export interface GameDataSnsItem {
 
 // SNS 설정 타입
 export interface GameDataSns {
-  kakao: GameDataSnsItem
-  twitter: GameDataSnsItem
-  discord: GameDataSnsItem
-  youtube: GameDataSnsItem
-  instagram: GameDataSnsItem
-  facebook: GameDataSnsItem
-  tiktok: GameDataSnsItem
+  kakao?: GameDataSnsItem
+  twitter?: GameDataSnsItem
+  discord?: GameDataSnsItem
+  youtube?: GameDataSnsItem
+  instagram?: GameDataSnsItem
+  facebook?: GameDataSnsItem
+  tiktok?: GameDataSnsItem
 }
 
 // 공통 이미지 그룹 타입