Merge pull request #1 from 3people/3people/event-banner

이벤트 배너

src/pages/play/_components/GameOver.vue

@@ -1,5 +1,15 @@
 <template>
-  <div class="absolute inset-0 flex items-center justify-center z-50 bg-transBlack-50 px-6">
+  <div class="absolute inset-0 flex flex-col items-center justify-center z-50 bg-transBlack-50 px-6">
+    <div class="bg-gradient-to-r relative from-gradient-yellow to-gradient-pink p-4 flex items-center rounded-2xl border-2 border-black mb-2">
+      <span class="text-banner-r mr-14">
+        잠시만요!
+        <br/>
+        <strong class="text-banner-b">이벤트 참여하면 상품</strong>
+        을 받을 수 있어요
+      </span>
+      <img :src="giftZzio" alt="gift-zzio" class="absolute right-[36px] bottom-0 w-[60.4px] h-[64.75px]"/>
+      <img :src="arrow" alt="arrow" class="rotate-180 h-6"/>
+    </div>
     <div class="bg-white flex flex-col gap-6 px-6 py-6 justify-center items-center rounded-2xl border-2 border-black">
       <img :src="gameOver" alt="game over"/>
       <div class="text-body-b px-2 border-2 rounded">
@@ -39,6 +49,8 @@ import gameOverZzio from '../../../assets/game-over-zzio.svg'
 import ZRoundButton from '../../../components/button/ZRoundButton.vue'
 import rankBanner from '../../../assets/rank-banner.png'
 import coinSm from '../../../assets/coin-sm.svg'
+import giftZzio from '@/assets/gift-zzio.svg'
+import arrow from '@/assets/arrow.svg'
 import {usePostRank} from '../../../requests/use/usePostRank.ts'
 import {computed, onMounted} from 'vue'
 

tailwind.config.js

@@ -43,6 +43,18 @@ export default {
             lineHeight: '',
             fontWeight: '700'
           }],
+        'banner-r': [
+          '0.875rem', // 12px
+          {
+            lineHeight: '',
+            fontWeight: '500'
+          }],
+        'banner-b': [
+          '0.875rem', // 12px
+          {
+            lineHeight: '',
+            fontWeight: '900'
+          }],
       },
       colors: {
         primary: '#FEBE31',
@@ -56,6 +68,8 @@ export default {
           '15': 'rgba(0, 0, 0, 0.15)',
           '50': 'rgba(0, 0, 0, 0.5)',
         },
+        'gradient-yellow': '#FFEC45',
+        'gradient-pink': '#FF8181',
       }
     },
   },