Merge pull request #11 from beodomi/feat/#8-passenger-busSearchPage

feat: UI 완료

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve --port 3000",
+    "serve": "vue-cli-service serve --host localhost --port 3000",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },

src/router/index.js

@@ -1,10 +1,10 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
+import {createRouter, createWebHistory} from 'vue-router';
 
 const routes = [
   {
     path: '/reservation',
     name: 'reservationView',
-    component: () => import('@/views/ReservationView')
+    component: () => import('@/views/ReservationView'),
   },
   {
     path: '/',
@@ -19,7 +19,7 @@ const routes = [
 ];
 
 const router = createRouter({
-  history: createWebHashHistory(),
+  history: createWebHistory(),
   routes,
 });
 

src/views/passenger/BusSearchView.vue

@@ -1,27 +1,87 @@
 <template>
-  <div class="bus-search">
+  <div class="bus-search" id="container">
     <h2 class="title">{{ title }}</h2>
-    <div class="circle"></div>
-    <button class="keyboard-btn">키보드 사용하기</button>
-    <button class="talk-btn">음성버튼</button>
+    <button aria-label="음성검색 버튼" class="circle" @click="record"></button>
+    <button aria-label="키보드 사용하기 버튼" class="keyboard-btn">
+      키보드 사용하기
+    </button>
+
+    <div id="contentDiv" :aria-live="ariaLive" :aria-hidden="ariaHidden">
+      {{ pageContent }}
+    </div>
+    <button
+      aria-label="전체 글을 읽어주는 버튼"
+      class="talk-btn"
+      @click="readWholeText"
+    >
+      음성버튼
+    </button>
   </div>
 </template>
 
 <script>
-  import {ref} from 'vue';
+  import {onMounted, ref} from 'vue';
   export default {
     name: 'BusSearchView',
     setup() {
       const title = ref('버스 노선 혹은 정류장 이름을 입력하세요.');
 
+      // 음성 검색
+      function record() {
+        const self = this;
+
+        self.speechRecognition.onresult = function (event) {
+          self.recognizedText =
+            self.recognizedText + ' ' + event.results[0][0].transcript;
+        };
+
+        this.speechRecognition.start();
+      }
+
+      onMounted(() => {
+        var SpeechRecognition = SpeechRecognition;
+        this.speechRecognition = new SpeechRecognition();
+      });
+
+      // 전체 읽어주기 기능
+      const ariaLive = ref('polite');
+      const ariaHidden = ref('');
+      const pageContent = ref('');
+
+      const readWholeText = () => {
+        const contentElement = document.getElementById('container');
+        const content = contentElement.innerText;
+
+        // 읽어주기 전 잠시 숨김처리
+        ariaHidden.value = true;
+
+        // 스크린 리더에게 전체 내용을 읽어달라는 요청
+        ariaLive.value = 'assertive';
+        pageContent.value = content;
+
+        console.log(pageContent.value);
+        // pageContent.value = '';
+
+        // 읽기가 완료된 후 다시 숨김처리 해제
+        setTimeout(() => {
+          ariaLive.value = 'polite';
+          ariaHidden.value = '';
+        }, 100);
+      };
+
       return {
         title,
+        record,
+        ariaLive,
+        ariaHidden,
+        pageContent,
+        readWholeText,
       };
     },
   };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
   .bus-search {
     text-align: center;
     display: flex;
@@ -43,6 +103,7 @@
       width: 210px;
       height: 210px;
       border-radius: 50%;
+      border: none;
     }
 
     // 키보드 사용 버튼
@@ -67,5 +128,8 @@
       border-radius: 81px 81px 0 0;
       border: none;
     }
+
+    .contentDiv {
+    }
   }
 </style>