Merge pull request #26 from beodomi/feat/#10-passenger1-UI

Feat/#10 passenger1 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 0.0.0.0 --port 3000",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },

src/assets/scss/_variables.scss

@@ -1,4 +1,4 @@
-$primary: #082220;
+$primary: #152827;
 $secondary: #ffdb1d;
 $lightGray: #f3f3f3;
 $gray: #d9d9d9;

src/components/NavComp.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="nav">
+    <div class="wholeText" ref="htmlElement"></div>
+    <img
+      class="backBtn"
+      @click="goBack"
+      v-if="pageName !== 'main'"
+      :src="theme === 'light' ? require('@/assets/img/backBtn.png') : require('@/assets/img/backBtnWhite.png')"
+      alt="뒤로가기 버튼"
+      height="15"
+    />
+    <img v-if="pageName === 'main'" class="beodomi" src="@/assets/img/beodomiLogoText.png" alt="버도미 로고와 텍스트" width="89" />
+    <span v-else class="beodomi">{{ title }}</span>
+    <img
+      @click="readWholeText"
+      class="wholeBtn"
+      :src="theme === 'dark' ? require('@/assets/img/wholeTextIcon.png') : require('@/assets/img/wholeTextIconYellow.png')"
+      alt="전체 읽어주는 버튼"
+      height="20"
+    />
+  </div>
+</template>
+
+<script>
+  import {computed, ref} from 'vue';
+  import {useRouter} from 'vue-router';
+  export default {
+    name: 'NavComp',
+    props: {
+      content: {
+        type: String,
+        default: '',
+      },
+      backgroundColor: {
+        type: String,
+        default: '#152827',
+      },
+      btnBackgroundColor: {
+        type: String,
+        default: '#FFDB1D',
+      },
+      color: {
+        type: String,
+        default: 'white',
+      },
+      pageName: {
+        type: String,
+        default: '',
+      },
+      title: {
+        type: String,
+        default: '',
+      },
+      theme: {
+        type: String,
+        default: 'dark',
+      },
+    },
+    setup(props) {
+      const htmlElement = ref(null);
+
+      // 전체 읽어주는 버튼 클릭 이벤트
+      const readWholeText = async () => {
+        console.log(props.content);
+        htmlElement.value.setAttribute('aria-live', 'assertive');
+        htmlElement.value.innerText = props.content;
+
+        setTimeout(function () {
+          htmlElement.value.removeAttribute('aria-live');
+          htmlElement.value.innerText = '';
+        }, 1);
+      };
+
+      console.log(props.btnBackgroundColor);
+
+      // 뒤로 가기 버튼 클릭 이벤트
+      const router = useRouter();
+      const goBack = () => {
+        router.go(-1);
+      };
+
+      return {
+        htmlElement,
+        readWholeText,
+        goBack,
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .nav {
+    height: 60px;
+    position: relative;
+    border-bottom: 2px solid #8d8d8d;
+    background-color: v-bind(backgroundColor);
+
+    //뒤로가기 버튼
+    .backBtn {
+      position: absolute;
+      top: 50%;
+      left: 25px;
+      transform: translate(-50%, -50%);
+    }
+
+    .beodomi {
+      font-weight: 700;
+      font-size: 20px;
+      line-height: 24px;
+
+      color: v-bind(color);
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .wholeBtn {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translate(-50%, -50%);
+      background-color: v-bind(btnBackgroundColor);
+      border-radius: 5px;
+      border: none;
+      padding: 6px 12px;
+    }
+  }
+</style>

src/store/passsengerStore.js

@@ -11,12 +11,9 @@ export const usePassengerStore = defineStore('passenger', () => {
    */
   function announcePageContent(content, htmlElement) {
     htmlElement.setAttribute('aria-live', 'assertive');
-    htmlElement.innerText = content;
-    console.log(content);
 
     setTimeout(function () {
-      htmlElement.removeAttribute(htmlElement);
-      htmlElement.innerText('');
+      htmlElement.removeAttribute('aria-live');
     }, 100);
   }
   return {

src/views/passenger/BusSearchView.vue

@@ -1,19 +1,26 @@
 <template>
-  <div class="bus-search" id="container">
-    <ToggleComp style="margin-top: 40px" @getSearchType="getSearchType" />
-    <template v-if="searchType == 'voice'">
-      <h2 class="title">{{ title }}</h2>
-      <VoiceComp @click="voice_result()" style="margin-top: 40px" />
-      <div id="contentDiv" :aria-live="ariaLive" :aria-hidden="ariaHidden">
-        {{ pageContent }}
-      </div>
-    </template>
-    <template v-else>
-      <div class="form-control">
-        <input type="value" required="" placeholder="검색어를 입력하세요" @keyup.enter="search_keyboard" v-model="input" />
-        <img src="@/assets/img/searchBtn.png" alt="역에서 탑승가능한 버스를 보는 버튼" width="32" height="32" style="margin-left: 20px" />
-      </div>
-    </template>
+  <div>
+    <NavComp
+      :content="wholeText"
+      :backgroundColor="searchType === 'voice' ? 'white' : '#152827'"
+      :btnBackgroundColor="searchType === 'voice' ? '#152827' : '#FFDB1D'"
+      :color="searchType === 'voice' ? 'black' : '#FFDB1D'"
+      :theme="searchType === 'voice' ? 'light' : 'dark'"
+      title="버스 노선 검색"
+    />
+    <div class="bus-search" id="container">
+      <ToggleComp style="margin-top: 40px" @getSearchType="getSearchType" />
+      <template v-if="searchType == 'voice'">
+        <h2 class="title">{{ title }}</h2>
+        <VoiceComp @click="voice_result()" style="margin-top: 40px" />
+      </template>
+      <template v-else>
+        <div class="form-control">
+          <input type="value" required="" placeholder="검색어를 입력하세요" @keyup.enter="search_keyboard" v-model="input" />
+          <img src="@/assets/img/searchBtn.png" alt="역에서 탑승가능한 버스를 보는 버튼" width="32" height="32" style="margin-left: 20px" />
+        </div>
+      </template>
+    </div>
   </div>
 </template>
 
@@ -22,14 +29,19 @@
   import VoiceComp from '@/components/VoiceComp.vue';
   import ToggleComp from '@/components/ToggleComp.vue';
   import {useRouter} from 'vue-router';
+  import NavComp from '@/components/NavComp.vue';
 
   export default {
     name: 'BusSearchView',
     components: {
       VoiceComp,
       ToggleComp,
+      NavComp,
     },
     setup() {
+      // 읽어줄 전체 텍스트
+      const wholeText = ref('버튼을 누른 후 검색어를 말해주세요. 음성 검색 버튼 ');
+
       const title = ref('버튼을 누른 후 검색어를 말해주세요');
       const input = ref('');
       const searchType = ref('voice');
@@ -59,39 +71,14 @@
           }, 3000);
         };
       };
-
-      // 전체 읽어주기 기능
-      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);
-      };
-
       const getSearchType = value => {
         searchType.value = value;
         if (searchType.value == 'voice') {
           bg_color.value = '#fff';
+          wholeText.value = '음성으로 버스 노선 검색. 버튼을 누른 후 검색어를 말해주세요. 음성 검색 버튼 ';
         } else {
           bg_color.value = '#082220';
+          wholeText.value = '키보드로 버스 노선 검색. 검색어를 입력하세요.';
         }
       };
 
@@ -103,15 +90,12 @@
       };
 
       return {
+        wholeText,
         title,
         searchType,
         input,
         bg_color,
         voice_result,
-        ariaLive,
-        ariaHidden,
-        pageContent,
-        readWholeText,
         getSearchType,
         search_keyboard,
       };