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

Feat/#10 passenger1 UI
beodomi · Jun 9, 2023 · 8058912 · 8058912
2 parents 3483fe1 + ff15fdf
commit 8058912
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 52 deletions.
diff --git a/src/views/passenger/BusSearchView.vue b/src/views/passenger/BusSearchView.vue
@@ -40,7 +40,7 @@
     },
     setup() {
       // 읽어줄 전체 텍스트
-      const wholeText = ref('버튼을 누른 후 검색어를 말해주세요. 음성 검색 버튼 ');
+      const wholeText = ref('음성으로 버스 노선 검색. 버튼을 누른 후 검색어를 말해주세요. 음성 검색 버튼 ');
 
       const title = ref('버튼을 누른 후 검색어를 말해주세요');
       const input = ref('');

diff --git a/src/views/passenger/KeyboardSearchView.vue b/src/views/passenger/KeyboardSearchView.vue
@@ -6,9 +6,9 @@
       <p @click="bus" class="bus_text">노 선</p>
       <p @click="station" class="dist_text">정류장</p>
     </div>
-    <template v-if="station_color == '#ffdb1d'">
-      <div class="near-stop">
-        <div class="scroll">
+    <div class="near-stop">
+      <div class="scroll">
+        <template v-if="station_color == '#ffdb1d'">
           <div v-for="stop in keyword_stops" :key="stop.arsId">
             <div id="route_container">
               <div id="route_info" @click="showAvailableBus(stop)">
@@ -29,17 +29,17 @@
               </div>
             </div>
           </div>
-        </div>
-      </div>
-    </template>
-    <template v-else>
-      <div id="route_container" v-for="data in search_data" :key="data.route_name" @click="goStationListView(data.bus_route_id)">
-        <div id="route_info">
-          <div style="font-weight: 700">{{ data.route_name }}</div>
-        </div>
-        <img src="@/assets/img/markerIcon.png" alt="역에서 탑승가능한 버스를 보는 버튼" width="20" />
+        </template>
+        <template v-else>
+          <div id="route_container" v-for="data in search_data" :key="data.route_name" @click="goStationListView(data.bus_route_id)">
+            <div id="route_info">
+              <div style="font-weight: 700">{{ data.route_name }}</div>
+            </div>
+            <img src="@/assets/img/markerIcon.png" alt="역에서 탑승가능한 버스를 보는 버튼" width="20" />
+          </div>
+        </template>
       </div>
-    </template>
+    </div>
   </div>
 </template>
 
@@ -221,7 +221,7 @@
     }
 
     .scroll {
-      max-height: 100vh;
+      max-height: 70vh;
       overflow: scroll;
     }
 

diff --git a/src/views/passenger/StationListView.vue b/src/views/passenger/StationListView.vue
@@ -1,20 +1,24 @@
 <template>
   <!-- 역에서 탈 수 있는 버스 목록 조회 페이지 -->
-  <div class="bus-list">
-    <h1>{{ title }}</h1>
-    <div class="buses">
-      <div id="route_container" v-for="(stop, idx) in stops" :key="stop.arsId" @click="[select(idx), (station_select = stop.arsId)]">
-        <!-- <div :class="['route-type', busType[bus.busRouteType]]"></div> -->
-        <div id="route_info">
-          <div style="font-weight: 700; width: 200px">{{ stop.stationNm }}</div>
-          <div>{{ stop.direction }}행</div>
+  <div>
+    <NavComp :content="wholeText" title="탑승 가능 정류장" />
+
+    <div class="bus-list">
+      <h1>{{ title }}</h1>
+      <div class="buses">
+        <div id="route_container" v-for="(stop, idx) in stops" :key="stop.arsId" @click="[select(idx), (station_select = stop.arsId)]">
+          <!-- <div :class="['route-type', busType[bus.busRouteType]]"></div> -->
+          <div id="route_info">
+            <div style="font-weight: 700; width: 200px">{{ stop.stationNm }}</div>
+            <div>{{ stop.direction }}행</div>
+          </div>
+          <!-- <span class="time">{{ bus.msg }}</span> -->
+          <div id="riding" :class="{active: bus_active[idx]}"></div>
         </div>
-        <!-- <span class="time">{{ bus.msg }}</span> -->
-        <div id="riding" :class="{active: bus_active[idx]}"></div>
       </div>
+      <div v-if="station_select == ''" id="ridingBtn">승차 예약</div>
+      <div v-else id="ridingActiveBtn" @click="ridingReserve(station_select)">승차 예약</div>
     </div>
-    <div v-if="station_select == ''" id="ridingBtn">승차 예약</div>
-    <div v-else id="ridingActiveBtn" @click="ridingReserve(station_select)">승차 예약</div>
   </div>
 </template>
 
@@ -23,9 +27,11 @@
   import axios from 'axios';
   import {useRoute} from 'vue-router';
   import router from '@/router';
+  import NavComp from '@/components/NavComp.vue';
 
   export default {
     name: 'testView',
+    components: {NavComp},
     data() {
       return {
         bus_active: [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false],
@@ -40,6 +46,9 @@
       const stops = ref({});
       const title = ref({});
 
+      // 읽을 전체 text
+      const wholeText = ref('');
+
       // 사용자 위치 확인 및 버스 경유하는 정류장 출력
       const locationSuccess = pos => {
         userLat.value = pos.coords.latitude;
@@ -56,6 +65,7 @@
             stops.value = res.data.msgBody.itemList;
             console.log('stops: ', stops.value);
             title.value = stops.value[0].busRouteNm;
+            wholeText.value = `노선 ${title.value}의 탑승 가능 정류장 목록. 승차 예약 버튼`;
           })
           .catch(err => console.log(err));
       };
@@ -74,6 +84,7 @@
       };
 
       return {
+        wholeText,
         title,
         stops,
         ridingReserve,
@@ -100,22 +111,36 @@
   #ridingBtn {
     font-weight: 900;
     font-size: 32px;
-    padding: 58px 94px;
     background-color: #fff;
     border-radius: 20px;
-    margin-top: 5px;
     color: $primary;
+    height: 140px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    bottom: 40px;
+    left: 50%;
+    width: calc(100% - 32px);
+    transform: translate(-50%, -40px);
   }
 
   #ridingActiveBtn {
     font-weight: 900;
     font-size: 32px;
-    padding: 58px 94px;
     background-color: #ff5f63;
     border-radius: 20px;
-    margin-top: 5px;
     color: #fff;
     cursor: pointer;
+    height: 140px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    bottom: 40px;
+    left: 50%;
+    width: calc(100% - 32px);
+    transform: translate(-50%, -40px);
   }
 
   #route_container {
@@ -139,8 +164,8 @@
     h1 {
       font-size: 30px;
       line-height: 36.6px;
-      margin-top: 97px;
-      margin-bottom: 35px;
+      margin-top: 40px;
+      margin-bottom: 40px;
       font-weight: 700;
       color: $secondary;
     }

diff --git a/src/views/passenger/StopBusListView.vue b/src/views/passenger/StopBusListView.vue
@@ -1,26 +1,29 @@
 <template>
   <!-- 역에서 탈 수 있는 버스 목록 조회 페이지 -->
-  <div class="bus-list">
-    <h1>상왕십리역</h1>
-    <div class="buses">
-      <!-- <div class="bus" v-for="bus in buses" :key="bus.busRouteId">
+  <div>
+    <NavComp :content="wholeText" title="탑승 가능 버스" />
+    <div class="bus-list">
+      <h1>상왕십리역</h1>
+      <div class="buses">
+        <!-- <div class="bus" v-for="bus in buses" :key="bus.busRouteId">
         <div :class="['route-type', busType[bus.busRouteType]]"></div>
         <span class="title">{{ bus.busRouteNm }}</span>
         <span>{{ bus.stEnd }}행</span>
         <span class="time">{{ bus.msg }}</span>
       </div> -->
-      <div id="route_container" v-for="(bus, idx) in buses" :key="bus.busRouteId" @click="[select(idx), (bus_select = bus.busRouteId)]">
-        <div :class="['route-type', busType[bus.busRouteType]]"></div>
-        <div id="route_info">
-          <div style="font-weight: 700; width: 40px">{{ bus.busRouteNm }}</div>
+        <div id="route_container" v-for="(bus, idx) in buses" :key="bus.busRouteId" @click="[select(idx), (bus_select = bus.busRouteId)]">
+          <div :class="['route-type', busType[bus.busRouteType]]"></div>
+          <div id="route_info">
+            <div style="font-weight: 700; width: 40px">{{ bus.busRouteNm }}</div>
+          </div>
+          <div style="color: #fff; width: 100px">{{ bus.stEnd }}행</div>
+          <span class="time">{{ bus.msg }}</span>
+          <div id="riding" :class="{active: bus_active[idx]}"></div>
         </div>
-        <div style="color: #fff; width: 100px">{{ bus.stEnd }}행</div>
-        <span class="time">{{ bus.msg }}</span>
-        <div id="riding" :class="{active: bus_active[idx]}"></div>
       </div>
+      <div v-if="bus_select == ''" id="ridingBtn">승차 예약</div>
+      <div v-else id="ridingActiveBtn" @click="ridingReserve(bus_select)">승차 예약</div>
     </div>
-    <div v-if="bus_select == ''" id="ridingBtn">승차 예약</div>
-    <div v-else id="ridingActiveBtn" @click="ridingReserve(bus_select)">승차 예약</div>
   </div>
 </template>
 
@@ -29,9 +32,11 @@
   import {ref} from 'vue';
   import {useRoute} from 'vue-router';
   import router from '@/router';
+  import NavComp from '@/components/NavComp.vue';
 
   export default {
     name: 'StopBusList',
+    components: {NavComp},
     data() {
       return {
         bus_active: [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false],
@@ -54,6 +59,7 @@
         0: 'public', // 공용
       };
 
+      const title = ref('');
       const arsId = route.params.arsId;
       const stId = route.params.stId;
 
@@ -99,6 +105,9 @@
       const getPrevData = async (ord, routeId, idx) => {
         const url = `http://ws.bus.go.kr/api/rest/arrive/getArrInfoByRoute?serviceKey=${process.env.VUE_APP_ROUTE_SERVICE_KEY}&busRouteId=${routeId}&ord=${ord}&stId=${stId}&resultType=json`;
         const data = await axios.get(url);
+        const res = await data.data;
+        console.log('res', res);
+        title.value = data.data.msgBody.itemList[0].stNm;
         return data.data.msgBody.itemList[0].arrmsg1;
       };
 
@@ -109,10 +118,15 @@
         });
       };
 
+      // 읽어줄 전체 text
+      const wholeText = `${title.value}에서 탑승 가능한 버스 노선 목록. 승차 예약 버튼`;
+
       return {
+        title,
         buses,
         busType,
         ridingReserve,
+        wholeText,
       };
     },
     methods: {
@@ -136,22 +150,36 @@
   #ridingBtn {
     font-weight: 900;
     font-size: 32px;
-    padding: 58px 94px;
     background-color: #fff;
     border-radius: 20px;
-    margin-top: 5px;
     color: $primary;
+    height: 140px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    bottom: 40px;
+    left: 50%;
+    width: calc(100% - 32px);
+    transform: translate(-50%, -40px);
   }
 
   #ridingActiveBtn {
     font-weight: 900;
     font-size: 32px;
-    padding: 58px 94px;
     background-color: #ff5f63;
     border-radius: 20px;
-    margin-top: 5px;
     color: #fff;
     cursor: pointer;
+    height: 140px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    bottom: 40px;
+    left: 50%;
+    width: calc(100% - 32px);
+    transform: translate(-50%, -40px);
   }
 
   #route_container {
@@ -175,8 +203,8 @@
     h1 {
       font-size: 30px;
       line-height: 36.6px;
-      margin-top: 97px;
-      margin-bottom: 35px;
+      margin-top: 40px;
+      margin-bottom: 40px;
       font-weight: 700;
       color: $secondary;
     }