From f1ce31c0eeaecee28103cd1340dfaba7a44754e7 Mon Sep 17 00:00:00 2001
From: da-in <da-in@wavve.com>
Date: Thu, 4 Apr 2024 13:56:04 +0900
Subject: [PATCH] add PrivacyTerm modal

---
 src/assets/close.svg                       |  6 +++
 src/pages/play/_components/GameOver.vue    |  4 +-
 src/pages/play/_components/PrivacyTerm.vue | 48 ++++++++++++++++++++++
 3 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/close.svg
 create mode 100644 src/pages/play/_components/PrivacyTerm.vue

diff --git a/src/assets/close.svg b/src/assets/close.svg
new file mode 100644
index 0000000..c6e570c
--- /dev/null
+++ b/src/assets/close.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.43945 7C8.12973 7.46288 9.96498 9.66989 11.1102 10.8882C11.7532 11.5722 12.9749 12.2527 13.403 13.067C13.7046 13.6408 14.3283 14.1134 14.7813 14.6133C15.5543 15.4663 16.2277 16.3911 16.9898 17.2428C18.2342 18.6334 19.6053 19.7328 20.9754 21.0023C22.0794 22.0252 23.3104 22.9356 24.4754 23.8851C24.8284 24.1729 25.2502 24.8313 25.561 25" stroke="white" stroke-width="8" stroke-linecap="round"/>
+<path d="M25.0898 7C23.5524 8.1809 22.2406 9.57186 20.7826 10.8197C19.2186 12.1584 17.3721 13.6379 16.3188 15.256C15.2526 16.8939 13.7426 18.077 12.0899 19.3465C9.935 21.0017 7.74472 23.0008 6.58838 24.5009" stroke="white" stroke-width="8" stroke-linecap="round"/>
+<path d="M6.43945 7C8.12973 7.46288 9.96498 9.66989 11.1102 10.8882C11.7532 11.5722 12.9749 12.2527 13.403 13.067C13.7046 13.6408 14.3283 14.1134 14.7813 14.6133C15.5543 15.4663 16.2277 16.3911 16.9898 17.2428C18.2342 18.6334 19.6053 19.7328 20.9754 21.0023C22.0794 22.0252 23.3104 22.9356 24.4754 23.8851C24.8284 24.1729 25.2502 24.8313 25.561 25" stroke="black" stroke-width="3" stroke-linecap="round"/>
+<path d="M25.0898 7C23.5524 8.1809 22.2406 9.57186 20.7826 10.8197C19.2186 12.1584 17.3721 13.6379 16.3188 15.256C15.2526 16.8939 13.7426 18.077 12.0899 19.3465C9.935 21.0017 7.74472 23.0008 6.58838 24.5009" stroke="black" stroke-width="3" stroke-linecap="round"/>
+</svg>
diff --git a/src/pages/play/_components/GameOver.vue b/src/pages/play/_components/GameOver.vue
index 99ac3bb..888574c 100644
--- a/src/pages/play/_components/GameOver.vue
+++ b/src/pages/play/_components/GameOver.vue
@@ -53,8 +53,8 @@ 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, watchEffect} from 'vue'
-import {usePostEvent} from '@/requests/use/usePostEvent.ts'
+import {computed, onMounted} from 'vue'
+// import {usePostEvent} from '../../../requests/use/usePostEvent.ts'
 
 const props = defineProps({
   nickname: {
diff --git a/src/pages/play/_components/PrivacyTerm.vue b/src/pages/play/_components/PrivacyTerm.vue
new file mode 100644
index 0000000..569aee8
--- /dev/null
+++ b/src/pages/play/_components/PrivacyTerm.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="bg-white w-full h-full">
+    <ZHeader class="mt-3">
+      <h1 class="text-body-b">개인정보 수집, 이용동의(필수)</h1>
+      <template v-slot:right>
+        <img :src="close" alt="닫기" @click="$emit('close')"/>
+      </template>
+    </ZHeader>
+    <div class="px-6 mt-5">
+      <div class="text-dark-gray text-body-r">
+        <p>
+          개인정보보호법 제15조(개인정보의 수집, 이용) 및 22조(개인정보주체의 동의)에 의거하여 개인정보 수집 및 이용하고자 합니다.
+        </p>
+        <p class="mt-4">
+          개인정보보호법에 의거하여 개인정보 수집 및 이용에 따른 동의를 거부할 수 있으나, 동의를 거부할 경우 이벤트 당첨 및 경품 발송이 제한됩니다.
+        </p>
+      </div>
+      <table class="text-[#1E1E1E] border-collapse cell mt-6">
+        <tr class="text-caption-b">
+          <th class="cell head">수집항목</th>
+          <th class="cell head">수집목적</th>
+          <th class="cell head">보유기간</th>
+        </tr>
+        <tr class="text-caption-r">
+          <td class="cell">[필수] 성명, 연락처, 개인정보 활용 동의
+          </td>
+          <td class="cell">이벤트 경품 발송을 위한 개인정보 수집</td>
+          <td class="cell">이벤트 경품 발송 완료시까지</td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import ZHeader from '../../../components/ZHeader.vue'
+import close from '../../../assets/close.svg'
+</script>
+<style scoped>
+.cell {
+  border-width: 1px;
+  border-color: #DADEE4;
+  padding: 12px
+}
+
+.head {
+  background-color: #EEF1F5
+}
+</style>