From 8e4394099d955648bf802cf7d512105ed8443f08 Mon Sep 17 00:00:00 2001
From: 3people <smsn7031@naver.com>
Date: Fri, 5 Apr 2024 14:17:32 +0900
Subject: [PATCH] fix: submit complete action

---
 src/assets/event-join-tag.svg           |  4 ++++
 src/components/ZInput.vue               |  8 +++++++-
 src/pages/play/_components/GameOver.vue | 26 +++++++++++++++++--------
 3 files changed, 29 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/event-join-tag.svg

diff --git a/src/assets/event-join-tag.svg b/src/assets/event-join-tag.svg
new file mode 100644
index 0000000..67ddd44
--- /dev/null
+++ b/src/assets/event-join-tag.svg
@@ -0,0 +1,4 @@
+<svg width="57" height="21" viewBox="0 0 57 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.5" width="57" height="20" rx="10" fill="black"/>
+<path d="M13.3579 10.82L12.8899 11.576C11.6659 11.192 10.7299 10.4 10.2499 9.38C9.78188 10.508 8.80988 11.372 7.53788 11.78L7.05788 11.012C8.65388 10.52 9.74588 9.272 9.74588 7.844V7.676H7.35788V6.884H9.74588V5.564H10.7299V6.884H13.1059V7.676H10.7299V7.844C10.7299 9.152 11.7739 10.34 13.3579 10.82ZM9.61388 13.28V15.452H14.4379V13.28H9.61388ZM8.65388 16.244V12.5H15.4099V16.244H8.65388ZM17.0059 8.348V9.164H15.4099V11.996H14.4259V5.624H15.4099V8.348H17.0059ZM23.5329 11.432H25.9809V8.84H23.4969C23.5929 9.26 23.6529 9.716 23.6529 10.208C23.6529 10.652 23.6049 11.06 23.5329 11.432ZM20.9769 13.088C21.9969 13.088 22.7289 11.96 22.7289 10.208C22.7289 8.468 21.9969 7.34 20.9769 7.34C19.9449 7.34 19.2249 8.468 19.2249 10.208C19.2249 11.96 19.9449 13.088 20.9769 13.088ZM25.9809 5.624H26.9649V16.412H25.9809V12.236H23.2929C22.8489 13.328 22.0089 13.964 20.9769 13.964C19.4049 13.964 18.2889 12.5 18.2889 10.208C18.2889 7.916 19.4049 6.452 20.9769 6.452C21.9729 6.452 22.7649 7.028 23.2209 8.036H25.9809V5.624ZM30.66 8.24C30.66 9.068 31.368 9.608 32.4 9.608C33.408 9.608 34.128 9.068 34.128 8.24C34.128 7.424 33.408 6.872 32.4 6.872C31.368 6.872 30.66 7.424 30.66 8.24ZM35.832 11.108L35.892 11.828C33.648 12.236 31.092 12.272 29.256 12.272L29.124 11.468C29.952 11.468 30.912 11.456 31.92 11.42V10.34C30.612 10.184 29.748 9.392 29.748 8.24C29.748 6.98 30.828 6.128 32.4 6.128C33.96 6.128 35.052 6.98 35.052 8.24C35.052 9.38 34.188 10.172 32.904 10.328V11.384C33.9 11.324 34.896 11.252 35.832 11.108ZM31.656 13.172V15.332H37.86V16.136H30.672V13.172H31.656ZM37.476 9.272H39.048V10.088H37.476V13.868H36.492V5.636H37.476V9.272ZM43.8711 12.212V14.252H46.3311V12.212H43.8711ZM47.3031 14.252H49.9431V15.056H40.1631V14.252H42.8991V12.212H41.3871V8.888H47.7711V7.22H41.3631V6.416H48.7311V9.68H42.3591V11.408H48.9831V12.212H47.3031V14.252Z" fill="white"/>
+</svg>
diff --git a/src/components/ZInput.vue b/src/components/ZInput.vue
index e6387c6..5540eb4 100644
--- a/src/components/ZInput.vue
+++ b/src/components/ZInput.vue
@@ -3,8 +3,9 @@
     :value="modelValue"
     @input="onInput"
     :placeholder="placeholder"
-    :class="style({ filled })"
+    :class="style({ filled, disabled })"
     :maxlength="max"
+    :disabled="disabled"
   />
 </template>
 <script setup lang="ts">
@@ -15,6 +16,7 @@ const props = defineProps({
   max: { type: Number, default: 8 },
   modelValue: { type: String, default: '' },
   placeholder: { type: String, default: '닉네임을 입력하세요' },
+  disabled: { type: Boolean, default: false },
 })
 
 const emit = defineEmits(['update:model-value'])
@@ -35,6 +37,10 @@ const style = cva(
         true: '',
         false: 'border-dark-green',
       },
+      disabled: {
+        true: 'border-dark-green text-dark-green bg-green',
+        false: 'border-black',
+      },
     },
   },
 )
diff --git a/src/pages/play/_components/GameOver.vue b/src/pages/play/_components/GameOver.vue
index 2d9d782..99a4ecc 100644
--- a/src/pages/play/_components/GameOver.vue
+++ b/src/pages/play/_components/GameOver.vue
@@ -11,11 +11,14 @@
           @click="toggleBanner('top')"
           class="flex items-center justify-end"
         >
-          <span class="text-banner-r">
-            잠시만요!
-            <br />
-            <strong class="text-banner-b">이벤트 참여하면 상품</strong>을 받을 수 있어요
-          </span>
+          <div class="text-banner-r">
+            <div class="flex items-center">
+              <span>잠시만요!</span>
+              <img v-if="isSuccess" :src="eventJoinTag" alt="event join tag" class="ml-1" />
+            </div>
+            <span class="text-banner-b">이벤트 참여하면 상품</span>
+            <span>을 받을 수 있어요</span>
+          </div>
           <img :src="giftZzio" alt="gift-zzio" />
           <img :src="arrow" alt="arrow" class="rotate-180 h-6" />
         </div>
@@ -39,7 +42,7 @@
         <div class="mt-4 text-body-b">
           <div>
             <label class="mb-2 block">닉네임</label>
-            <z-input :model-value="nickname" />
+            <z-input :disabled="true" :model-value="nickname" />
           </div>
           <div class="mt-4">
             <label class="mb-2 block">전화번호</label>
@@ -108,10 +111,11 @@ 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 eventJoinTag from '@/assets/event-join-tag.svg'
 import { usePostEvent } from '@/requests/use/usePostEvent.ts'
 import eventTitle from '@/assets/event-title.svg'
 import { usePostRank } from '@/requests/use/usePostRank.ts'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import ZInput from '@/components/ZInput.vue'
 import ZButton from '@/components/button/ZButton.vue'
 import ZCheckbox from '@/components/ZCheckbox.vue'
@@ -129,7 +133,7 @@ const props = defineProps({
 })
 
 const { data, mutate } = usePostRank()
-const { mutate: mutateEvent } = usePostEvent()
+const { isSuccess, mutate: mutateEvent } = usePostEvent()
 
 const rank = computed(() => data?.value?.rank)
 const total = computed(() => data?.value?.count)
@@ -169,6 +173,12 @@ const onClickSubmit = () => {
   }
 }
 
+watch(isSuccess, () => {
+  if (isSuccess.value) {
+    activeBanner.value = 'bottom'
+  }
+})
+
 onMounted(() => {
   // 이벤트 기간 지나지 않았을 경우 rank 등록
   if (props.score && props.nickname && isOpen()) {