From 14b8936dc26b3824ce285f8d2934f301ece3f09b Mon Sep 17 00:00:00 2001
From: qbobl5 <ddddd991125@gmail.com>
Date: Thu, 14 Dec 2023 09:39:03 +0900
Subject: [PATCH] =?UTF-8?q?feat-roomAdd:=20popup=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/room/AddRoom.vue | 18 ++++++++
 src/views/home/MainHome.vue     | 77 +++++++++++++++++++++++----------
 2 files changed, 73 insertions(+), 22 deletions(-)
 create mode 100644 src/components/room/AddRoom.vue

diff --git a/src/components/room/AddRoom.vue b/src/components/room/AddRoom.vue
new file mode 100644
index 0000000..7fb4957
--- /dev/null
+++ b/src/components/room/AddRoom.vue
@@ -0,0 +1,18 @@
+<template>
+    <div></div>
+</template>
+<script>
+export default {
+    name: 'AddRoom',
+    data() {
+        return {
+
+        }
+    },
+    mounted() {
+
+    }
+}
+</script>
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/home/MainHome.vue b/src/views/home/MainHome.vue
index 707a453..6394d01 100644
--- a/src/views/home/MainHome.vue
+++ b/src/views/home/MainHome.vue
@@ -1,5 +1,7 @@
 <template>
   <div id="main-layout" class="row">
+    <div v-if="addRoomPopup" id="back-off" @click="backOff"></div>
+    <AddRoom v-if="addRoomPopup" id="addRoom-popup"></AddRoom>
     <div id="main-side-layout" class="col-2">
       <div id="main-profile-containers">
         <div id="my-profile-container">
@@ -181,11 +183,12 @@
 <script>
 import axios from 'axios'
 import MainHomeRoom from '../../components/home/MainHomeRoom.vue'
+import AddRoom from '../../components/room/AddRoom.vue'
 import sweetAlert from '../../util/modal.js'
 
 export default {
   name: 'MainHome',
-  components: { MainHomeRoom },
+  components: { MainHomeRoom, AddRoom },
   data() {
     return {
       roomPage: 0,
@@ -195,7 +198,8 @@ export default {
       nullRoom: { roomNo: null, roomStatus: null, roomTitle: null },
       inputRoomNo: null,
       memberRankList: [],
-      memberAuthority: 'ROLE_ADMIN'
+      memberAuthority: 'ROLE_ADMIN',
+      addRoomPopup: false,
     }
   },
   methods: {
@@ -209,26 +213,28 @@ export default {
         })
     },
     createWaitingRoomclickHandler() {
-      let data = {
-        quiz: {
-          quizNo: 1
-        },
-        // "roomPwd": "1234",
-        codeShare: 0,
-        roomTitle: '테스트방 in vue',
-        roomDt: new Date().toJSON()
-      }
-      data = JSON.stringify(data)
-      axios
-        .post(`${this.backURL}/room`, data, {
-          headers: {
-            'Content-Type': 'application/json'
-          }
-        })
-        .then((res) => {
-          console.log(res)
-          this.$router.push({ path: `/room/${res.data}` })
-        })
+      // let data = {
+      //   quiz: {
+      //     quizNo: 1
+      //   },
+      //   // "roomPwd": "1234",
+      //   codeShare: 0,
+      //   roomTitle: '테스트방 in vue',
+      //   roomDt: new Date().toJSON()
+      // }
+      // data = JSON.stringify(data)
+      // axios
+      //   .post(`${this.backURL}/room`, data, {
+      //     headers: {
+      //       'Content-Type': 'application/json'
+      //     }
+      //   })
+      //   .then((res) => {
+      //     console.log(res)
+      //     this.$router.push({ path: `/room/${res.data}` })
+      //   })
+
+      this.addRoomPopup=true
     },
     rankTierHelpHoverHandler() {},
     mypageButtonClickHandler() {
@@ -287,6 +293,9 @@ export default {
             this.totalPages = response.data.totalPages
           })
       }
+    },
+    backOff() {
+      this.addRoomPopup=false
     }
   },
   mounted() {
@@ -718,5 +727,29 @@ input[type='number']::-webkit-inner-spin-button {
   background-color: var(--main4-hover-color);
   border: none;
 }
+
+#back-off {
+  width: 100%;
+  height: 100%;
+  display: fixed;
+  position: fixed;
+  top: 0%;
+  left: 0%;
+  cursor: pointer;
+  z-index: 1;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+#addRoom-popup {
+  padding: 10px;
+  position: absolute;
+  background-color: var(--main1-color);
+  border: 8px solid var(--main5-color);
+  border-radius: 10px;
+  width: 90%;
+  height: 700px;
+  margin-top: 50px;
+  z-index: 2;
+}
 </style>
 ../../components/modal/modal.js../../modal/AlertMessage.vue