[S03P31A503-114] feature/FE/singing : Add basic singing mode design &…

… function

frontend/.gitignore

@@ -2,6 +2,7 @@
 node_modules
 /dist
 
+secrets.json
 
 # local env files
 .env.local

frontend/package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.21.0",
     "core-js": "^3.6.5",
     "html2canvas": "^1.0.0-rc.7",
     "sweetalert2": "^10.8.1",

frontend/src/api/api.js

@@ -0,0 +1,6 @@
+export default {
+  URL: '',
+  YOUTUBE_URL: "https://www.googleapis.com/youtube/v3/search",
+  ROUTES: {
+  }
+}

frontend/src/components/meetingpage/multipanel/MultiPanel.vue

@@ -15,6 +15,8 @@
     </AnonymousPanel>
     <SnapShotPanel v-if="isSnapshotMode">
     </SnapShotPanel>
+    <SingingPanel v-if="isSingingMode">
+    </SingingPanel>
   </div>
 </template>
 
@@ -23,15 +25,17 @@ import { mapState, mapActions } from 'vuex'
 
 import AnonymousPanel from '@/components/meetingpage/multipanel/AnonymousPanel'
 import SnapShotPanel from '@/components/meetingpage/multipanel/SnapShotPanel'
+import SingingPanel from '@/components/meetingpage/multipanel/SingingPanel'
 
 export default {
   name: 'MultiPanel',
   components: {
     AnonymousPanel,
     SnapShotPanel,
+    SingingPanel
   },
   computed: {
-    ...mapState('meetingStore', ['isGameMode', 'isMusicMode', 'isAnonymousMode', 'isSnapshotMode']),
+    ...mapState('meetingStore', ['isGameMode', 'isSingingMode', 'isAnonymousMode', 'isSnapshotMode']),
   },
   methods: {
     ...mapActions('meetingStore', ['closeMultiPanel']),

frontend/src/components/meetingpage/multipanel/SingingPanel.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="d-flex flex-column justify-content-between p-2 px-5 w-100">
+    <h3>노래방</h3>
+    <div class="song-screen" v-if="selectedSong">
+      <div class="embed-responsive embed-responsive-16by9">
+        <iframe
+          class="embed-responsive-item"
+          :src="`https://www.youtube.com/embed/${selectedSong.id.videoId}?autoplay=1`"
+          frameborder="0"
+          allow="autoplay; encrypted-media"
+        ></iframe>
+      </div>
+    </div>
+    <div class="song-select" v-else>
+      <v-text-field
+        v-model="songKeyword"
+        label="노래를 검색하세요 :)"
+        color="#BDBDBD"
+        dark
+        @keyup.enter="searchSong(songKeyword)"
+      ></v-text-field>
+      <div class="row">
+        <div
+          class="my-1"
+          :class="{'col-6' : isGumyoung(song), 'col-0' : !isGumyoung(song) }"
+          v-for="song in songs"
+          :key="song.etag"
+          v-show="isGumyoung(song)"
+        >
+          <img
+            class="song-thumbnail"
+            :src="song.snippet.thumbnails.medium.url"
+            :alt="song.snippet.title"
+            @click="selectSong(song)"
+          >
+          <!-- <p>{{ song.snippet.title }}</p> -->
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { mapActions, mapState } from 'vuex'
+export default {
+  name: 'SingingPanel',
+  data() {
+    return {
+      songKeyword: null
+    }
+  },
+  computed: {
+    ...mapState('meetingStore', ['selectedSong', 'songs'])
+  },
+  methods: {
+    ...mapActions('meetingStore', ['searchSong', 'selectSong', 'closeSingingPanel']),
+    isGumyoung(song) {
+      if (song.snippet.channelTitle === '금영 노래방 공식 유튜브 채널') {
+        return true
+      } else {
+        return false
+      }
+    }
+  },
+  beforeDestroy() {
+    this.closeSingingPanel()
+  }
+}
+</script>
+
+<style scoped>
+* {
+  color: white;
+  margin: 0;
+  padding: 0;
+}
+
+.song-thumbnail {
+  max-width: 150px;
+  max-height: 84px;
+  cursor: pointer;
+}
+</style>

frontend/src/components/meetingpage/multipanel/SnapShotPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex flex-column justify-content-between p-2 w-100" data-app>
+  <div class="d-flex flex-column justify-content-between p-2 w-100">
     <section class="countdown">
       <div v-show="!expired" class="timer">
         <h3>Snapshot</h3>