Merge pull request #40 from leejaeseong11/feat-room

Feat room
leejaeseong11 · Dec 13, 2023 · 43c2c99 · 43c2c99
2 parents 57a321d + ae1edff
commit 43c2c99
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 96 deletions.
diff --git a/src/components/footer/FooterBar.vue b/src/components/footer/FooterBar.vue
@@ -9,6 +9,8 @@ export default {}
 </script>
 <style scoped>
 #footer-container {
+  min-width: 1280px;
+
   margin-top: 44px;
   height: 52px;
 

diff --git a/src/components/home/MainHomeRoom.vue b/src/components/home/MainHomeRoom.vue
@@ -34,7 +34,7 @@
                   <font-awesome-icon id="show-quiz-modal-house-icon" :icon="['fa', 'house']" />
                   <div>방 문제 확인</div>
                 </h5>
-                <ShowQuizSimply />
+                <ShowQuizSimply v-model:quizInfo="quizInfo" />
                 <button
                   id="modal-close-button"
                   class="btn-custom-primary"
@@ -69,7 +69,8 @@ export default {
   props: ['roomInfo'],
   data() {
     return {
-      modalCheck: false
+      modalCheck: false,
+      quizInfo: {}
     }
   },
   methods: {
@@ -97,6 +98,7 @@ export default {
   },
   mounted() {
     console.log(this.roomInfo)
+    this.quizInfo = this.roomInfo
   },
   components: { ShowQuizSimply }
 }
@@ -185,6 +187,7 @@ export default {
   background: rgba(0, 0, 0, 0.4);
 }
 .modal-container {
+  min-width: 480px;
   width: 50%;
   padding: 20px;
 

diff --git a/src/components/home/ShowQuizSimply.vue b/src/components/home/ShowQuizSimply.vue
@@ -1,32 +1,38 @@
 <template>
   <div id="quiz-info-container">
     <div class="row">
-      <div class="col-2">번호</div>
-      <div class="col-6">제목</div>
-      <div class="col-4">출제자</div>
+      <div class="col-3">티어</div>
+      <div class="col-5">제목</div>
+      <div class="col-2">정답률</div>
+      <div class="col-2">출제자</div>
     </div>
     <div id="quiz-info" class="row">
-      <div class="col-2">1.</div>
-      <div class="col-6">짝수와 홀수</div>
-      <div class="col-4">admin1</div>
+      <div class="col-3">{{ quizInfo.quizTier }}</div>
+      <div class="col-5">{{ quizInfo.quizTitle }}</div>
+      <div class="col-2">
+        {{
+          quizInfo.quizSubmitCnt == 0
+            ? 0
+            : Math.round(
+                (quizInfo.quizSuccessCnt / quizInfo.quizSubmitCnt + Number.EPSILON) * 10000
+              ) / 100
+        }}%
+      </div>
+      <div class="col-2">{{ quizInfo.memberName }}</div>
     </div>
   </div>
   <div id="quiz-content-title">문제 설명</div>
   <div id="quiz-content-container">
     <div id="quiz-content">
-      정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 solution 함수를
-      완성하세요. 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 solution
-      함수를 완성하세요. 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는
-      solution 함수를 완성하세요. 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를
-      반환하는 solution 함수를 완성하세요. 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우
-      "Odd"를 반환하는 solution 함수를 완성하세요. 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인
-      경우 "Odd"를 반환하는 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는
-      정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는
+      {{ quizInfo.quizContent }}
     </div>
   </div>
 </template>
 <script>
-export default {}
+export default {
+  name: 'ShowQuizSimply',
+  props: ['quizInfo']
+}
 </script>
 <style scoped>
 #quiz-info-container {
@@ -38,7 +44,7 @@ export default {}
   border-top: 3px solid var(--main5-color);
 }
 #quiz-content-container {
-  height: 227px;
+  height: 412px;
 
   white-space: wrap;
   overflow: scroll;

diff --git a/src/main.js b/src/main.js
@@ -14,13 +14,17 @@ import {
   faUser,
   faLock,
   faCrown,
-  faHouse
+  faHouse,
+  faEye,
+  faEyeSlash
 } from '@fortawesome/free-solid-svg-icons'
 library.add(faMagnifyingGlass)
 library.add(faUser)
 library.add(faLock)
 library.add(faCrown)
 library.add(faHouse)
+library.add(faEye)
+library.add(faEyeSlash)
 
 const app = createApp(App)
 app.use(router)

diff --git a/src/views/room/WaitingRoom.vue b/src/views/room/WaitingRoom.vue
@@ -1,9 +1,28 @@
 <template>
   <div id="room-layout" class="row">
     <div id="room-member-layout" class="col-6">
-      <div id="room-title-container">
-        <div id="room-number">No. 1000</div>
-        <div id="room-title">아무나 들어오세요</div>
+      <div>
+        <div id="room-title-containers">
+          <div class="room-title-container">
+            <div id="room-number">No. {{ roomInfo.roomNo }}</div>
+            <div id="room-title">{{ roomInfo.roomTitle }}</div>
+          </div>
+          <div class="room-title-container">
+            <div v-if="roomInfo.codeShare" class="custom-tooltip">
+              <font-awesome-icon :icon="['fas', 'eye']" />
+              <span class="custom-tooltiptext">코드 공개</span>
+            </div>
+            <div v-else-if="!roomInfo.codeShare" class="custom-tooltip">
+              <font-awesome-icon :icon="['fas', 'eye-slash']" />
+              <span class="custom-tooltiptext">코드 비공개</span>
+            </div>
+            <div v-if="roomInfo.roomPwd != null" id="code-share-icon" class="custom-tooltip">
+              <font-awesome-icon :icon="['fa', 'lock']" />
+              <span class="custom-tooltiptext">{{ roomInfo.roomPwd }}</span>
+            </div>
+          </div>
+        </div>
+        <div></div>
       </div>
       <div id="room-member-container">
         <RoomMember />
@@ -45,50 +64,13 @@
         <button id="chat-input-button" placeholder="채팅을 입력하세요.">입력</button>
       </div>
     </div>
-    <div id="room-info-layout" class="col-6">
-      <button id="room-out-button">방 나가기</button>
+    <div id="room-info-layout" class="col">
+      <button id="room-out-button" @click="roomOutButtonClickHandler">방 나가기</button>
       <div id="room-quiz-containers">
         <div id="room-quiz-title">선택된 문제</div>
-        <ShowQuizSimply />
-      </div>
-      <div id="room-info-containers">
-        <div id="room-info-title">
-          <font-awesome-icon :icon="['fas', 'house']" />
-          <span>방 정보</span>
-        </div>
-        <div class="row">
-          <label for="inputRoomName" class="col-3">방 제목</label>
-          <div class="col-9">
-            <input type="text" id="inputRoomName" class="roomInfoInput" disabled />
-          </div>
-        </div>
-        <div class="row">
-          <label for="inputRoomPassword" class="col-3">비밀번호</label>
-          <div class="col-9">
-            <input type="text" id="inputRoomPassword" class="roomInfoInput" disabled />
-          </div>
-        </div>
-        <fieldset class="row">
-          <div class="col-3">코드공개여부</div>
-          <div id="room-radio-button" class="col-9">
-            <div class="room-info-code-open">
-              <input
-                type="radio"
-                name="gridRadios"
-                id="gridRadios1"
-                value="open"
-                checked
-                disabled
-              />
-              <label for="gridRadios1"> 공개 </label>
-            </div>
-            <div class="room-info-code-open">
-              <input type="radio" name="gridRadios" id="gridRadios2" value="close" disabled />
-              <label for="gridRadios2"> 비공개 </label>
-            </div>
-          </div>
-        </fieldset>
+        <ShowQuizSimply v-model:quizInfo="roomInfo" />
       </div>
+
       <button id="game-start-button" @:click="gameStartButtonClickHandler">시 작 하 기</button>
     </div>
   </div>
@@ -115,9 +97,12 @@
     </ul> -->
 </template>
 <script>
+import axios from 'axios'
 import ShowQuizSimply from '../../components/home/ShowQuizSimply.vue'
 import RoomMember from '../../components/room/RoomMember.vue'
+import SweetAlert from '../../util/modal.js'
 import axios from 'axios';
+
 export default {
   name: 'WaitingRoom',
   components: { RoomMember, ShowQuizSimply },
@@ -127,7 +112,8 @@ export default {
       logs: [],
       status: 'disconnected',
       chatMessage: '',
-      socket: null
+      socket: null,
+      roomInfo: {}
     }
   },
   methods: {
@@ -167,7 +153,23 @@ export default {
     },
     gameStartButtonClickHandler() {
       this.$router.push({ path: `/normal/${this.$router.currentRoute.value.params.roomNo}` })
+    },
+    roomOutButtonClickHandler() {
+      this.$router.push({ path: '/' })
     }
+  },
+  mounted() {
+    axios
+      .get(`${this.backURL}/room/${this.$router.currentRoute.value.params.roomNo}`)
+      .then((response) => {
+        this.roomInfo = response.data
+      })
+      .catch(async (error) => {
+        const ok = await SweetAlert.error(error.response.data.errors[0])
+        if (ok) {
+          this.$router.go(-1)
+        }
+      })
   }
 }
 </script>
@@ -179,18 +181,50 @@ export default {
   display: flex;
   flex-direction: column;
 }
-#room-title-container {
+#room-title-containers {
   margin-top: 100px;
   padding: 16px;
 
   display: flex;
   align-items: center;
+  justify-content: space-between;
 
   border: 3px solid var(--main5-color);
   border-bottom: none;
   border-radius: 10px 10px 0 0;
   background-color: var(--white-color);
 }
+.room-title-container {
+  display: flex;
+}
+.custom-tooltip {
+  position: relative;
+
+  cursor: pointer;
+}
+.custom-tooltip .custom-tooltiptext {
+  width: 110px;
+  padding: 8px 12px;
+
+  visibility: hidden;
+
+  position: absolute;
+  z-index: 1;
+  top: -10px;
+  left: 120%;
+
+  text-align: center;
+
+  border-radius: 6px;
+  color: var(--white-color);
+  background-color: var(--black-color);
+}
+.custom-tooltip:hover .custom-tooltiptext {
+  visibility: visible;
+}
+#code-share-icon {
+  margin-left: 4px;
+}
 #room-number {
   margin-right: 16px;
 }
@@ -280,7 +314,7 @@ export default {
 #room-quiz-containers {
   margin-top: 24px;
   padding: 12px;
-  height: 52.725%;
+  height: 80%;
 
   background-color: var(--white-color);
   border: 3px solid var(--main5-color);
@@ -291,40 +325,12 @@ export default {
   text-align: center;
   color: var(--main5-color);
 }
-#room-info-containers {
-  margin: 12px 0;
-  padding: 12px;
-
-  background-color: var(--white-color);
-  border: 3px solid var(--main5-color);
-  border-radius: 10px;
-}
-#room-info-title {
-  padding-bottom: 12px;
-
-  font-size: 1.375rem;
-  text-align: center;
-
-  color: var(--main5-color);
-}
-#room-info-title > span {
-  margin-left: 12px;
-}
 
-.roomInfoInput {
-  padding: 4px;
-  color: var(--main5-color);
-  width: 100%;
-  margin-bottom: 12px;
-}
-#room-radio-button {
-  display: flex;
-  justify-content: space-evenly;
-}
 #game-start-button {
   padding: 8px;
+  margin-top: 20px;
 
-  font-size: 1.5rem;
+  font-size: 2rem;
 
   color: var(--main1-color);
   background-color: var(--main4-color);