Merge pull request #29 from beodomi/style/#24-driver-page

Style/#24 driver page
beodomi · Jun 9, 2023 · 3483fe1 · 3483fe1
2 parents 955b842 + a24c032
commit 3483fe1
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 19 deletions.
diff --git a/src/components/NavComp.vue b/src/components/NavComp.vue
@@ -14,6 +14,7 @@
     <img
       @click="readWholeText"
       class="wholeBtn"
+      v-if="!driver"
       :src="theme === 'dark' ? require('@/assets/img/wholeTextIcon.png') : require('@/assets/img/wholeTextIconYellow.png')"
       alt="전체 읽어주는 버튼"
       height="20"
@@ -55,6 +56,10 @@
         type: String,
         default: 'dark',
       },
+      driver: {
+        type: Boolean,
+        default: false,
+      },
     },
     setup(props) {
       const htmlElement = ref(null);

diff --git a/src/store/driverStore.js b/src/store/driverStore.js
@@ -69,6 +69,12 @@ export const useDriverStore = defineStore('driver', () => {
   function busStop() {
     if (!isLastIndex.value) {
       if (++stationIndex.value >= routeInfo.value.length - 1) isLastIndex.value = true;
+      console.log('현재: ', routeInfo.value[stationIndex.value]);
+      while (routeInfo.value[stationIndex.value].arsId == ' ') {
+        if (++stationIndex.value >= routeInfo.value.length - 1) {
+          isLastIndex.value = true;
+        }
+      }
       console.log(stationIndex.value, routeInfo.value[stationIndex.value]);
       nowStationName.value = routeInfo.value[stationIndex.value].stationNm;
       nextStationName.value = isLastIndex.value ? '없음' : routeInfo.value[stationIndex.value + 1].stationNm;

diff --git a/src/views/drivers/DriverView.vue b/src/views/drivers/DriverView.vue
@@ -1,12 +1,23 @@
 <template>
-  <div class="container">
-    <header>
-      <h1>운행 준비!</h1>
-      <h3>운행할 버스 정보를 입력해주세요</h3>
-    </header>
-    <main :class="{'full-view': fullView}">
-      <router-view></router-view>
-    </main>
+  <div>
+    <div class="container">
+      <NavCompVue
+        :content="wholeText"
+        :backgroundColor="fullView ? 'white' : '#152827'"
+        :btnBackgroundColor="fullView ? '#152827' : '#FFDB1D'"
+        :color="fullView ? 'black' : '#FFDB1D'"
+        :theme="fullView ? 'light' : 'dark'"
+        :driver="true"
+        title="운행정보"
+      />
+      <header :class="{'full-view': fullView}">
+        <h1>운행 준비!</h1>
+        <h3>운행할 버스 정보를 입력해주세요</h3>
+      </header>
+      <main>
+        <router-view></router-view>
+      </main>
+    </div>
   </div>
 </template>
 
@@ -15,7 +26,12 @@
   import {useDriverStore} from '@/store/driverStore';
   import {useRoute} from 'vue-router';
   import {ref, watch} from 'vue';
+  import NavCompVue from '@/components/NavComp.vue';
+
   export default {
+    components: {
+      NavCompVue,
+    },
     setup() {
       const driverStore = useDriverStore();
       async function goToDriverMainPage() {
@@ -50,11 +66,18 @@
     display: flex;
     flex-direction: column;
     height: 100vh;
-    width: 100vw;
     box-sizing: border-box;
     position: relative;
+    nav {
+      border-bottom: 1px solid $darkGray;
+    }
     header {
+      transition: 0.1s;
       margin: 3rem 0;
+      &.full-view {
+        height: 0;
+        margin: 0;
+      }
       h1 {
         font-size: 3.5rem;
         font-weight: bold;
@@ -69,17 +92,8 @@
     main {
       display: flex;
       flex-grow: 1;
-      transition: 0.5s;
-      position: absolute;
-      width: 100vw;
       top: 25vh;
-      height: 75vh;
-      &.full-view {
-        position: absolute;
-        width: 100vw;
-        height: 100vh;
-        top: 0;
-      }
+      width: 100%;
     }
   }
 </style>