From 91f6ef0348f346e9a4a73e086dfd747fd71b4d56 Mon Sep 17 00:00:00 2001
From: Ssuhyeong <tngud124@gmail.com>
Date: Sat, 10 Jun 2023 14:36:43 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat=20:=20localstorage=20busData=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/passenger/StationListView.vue | 13 +++++++++++--
 src/views/passenger/StopBusListView.vue | 13 ++++++++++++-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/views/passenger/StationListView.vue b/src/views/passenger/StationListView.vue
index 513762f..06bf7f8 100644
--- a/src/views/passenger/StationListView.vue
+++ b/src/views/passenger/StationListView.vue
@@ -77,11 +77,20 @@
       navigator.geolocation.getCurrentPosition(locationSuccess, locationFail);
 
       const ridingReserve = busData => {
-        // localStorage.setItem();
+        if (localStorage.getItem('history') == null) {
+          const history = [];
+
+          history.push(busData);
+          localStorage.setItem('history', JSON.stringify(history));
+        } else {
+          var newHistory = JSON.parse(localStorage.getItem('history'));
+          newHistory.push(busData);
+          localStorage.setItem('history', JSON.stringify(newHistory));
+        }
 
         router.push({
           name: 'RidingView',
-          params: {busData: busData},
+          params: {busData: JSON.stringify(busData)},
         });
       };
 
diff --git a/src/views/passenger/StopBusListView.vue b/src/views/passenger/StopBusListView.vue
index e55f01c..286fed4 100644
--- a/src/views/passenger/StopBusListView.vue
+++ b/src/views/passenger/StopBusListView.vue
@@ -114,9 +114,20 @@
       };
 
       const ridingReserve = busData => {
+        if (localStorage.getItem('history') == null) {
+          const history = [];
+
+          history.push(busData);
+          localStorage.setItem('history', JSON.stringify(history));
+        } else {
+          var newHistory = JSON.parse(localStorage.getItem('history'));
+          newHistory.push(busData);
+          localStorage.setItem('history', JSON.stringify(newHistory));
+        }
+
         router.push({
           name: 'RidingView',
-          params: {busData: busData},
+          params: {busData: JSON.stringify(busData)},
         });
       };
 

From 7421555bdfc301936e6bdff913916ed5cb1fe153 Mon Sep 17 00:00:00 2001
From: leecr1215 <leecr1215@naver.com>
Date: Sat, 10 Jun 2023 16:35:15 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EC=8A=B9=EC=B0=A8=EB=B2=A8=20?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9=20=EC=9D=B4=EB=A0=A5=20UI=20=EB=B0=8F=20?=
 =?UTF-8?q?=EB=8D=94=EB=AF=B8=20=EB=8D=B0=EC=9D=B4=ED=84=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/passenger/FavoriteStopView.vue   | 421 ++++++++++++++++++++-
 src/views/passenger/KeyboardSearchView.vue |   6 +-
 src/views/passenger/NearStopView.vue       |   2 +-
 3 files changed, 410 insertions(+), 19 deletions(-)

diff --git a/src/views/passenger/FavoriteStopView.vue b/src/views/passenger/FavoriteStopView.vue
index c160cf1..05ea4e8 100644
--- a/src/views/passenger/FavoriteStopView.vue
+++ b/src/views/passenger/FavoriteStopView.vue
@@ -3,16 +3,37 @@
     <NavComp :content="wholeText" title="승차벨 사용 이력" />
 
     <div class="favorite-stop">
-      <div class="none-favorite" v-if="true">
+      <!-- 승차벨 사용 이력이 없는 경우 -->
+      <div class="none-favorite" v-if="false">
         <h1>이력이 없습니다.</h1>
         <button class="search-btn" @click="goBusSearchView">
           <span class="text">버스 노선 검색</span>
         </button>
       </div>
+      <!-- 승차벨 사용 이력이 있는 경우 -->
       <div class="favorite" v-else>
-        <div class="stops">
-          <div class="stop" v-for="i in [1, 2, 3, 4, 5, 6, 7]" :key="i">
-            {{ i }}
+        <div class="favorite-container">
+          <div class="scroll">
+            <div v-for="stop in stops" :key="stop.arsId">
+              <div id="route_container" @click="showAvailableBus(stop)">
+                <div id="route_info">
+                  <div style="font-weight: 700">{{ stop.stationNm }}</div>
+                  <div>{{ stop.direction }}행</div>
+                </div>
+                <img src="@/assets/img/busIcon.png" alt="역에서 탑승가능한 버스를 보는 버튼" width="31" />
+              </div>
+              <div class="available-bus" v-if="clickStop === stop.arsId">
+                <div class="display" @click="goStopBusListView(stop.arsId, stop.station)">
+                  <div style="width: 100%">
+                    <span class="title">탑승 가능 버스</span>
+                    <div class="buses">
+                      <span v-for="bus in buses" :key="bus.busRouteId">{{ bus.busRouteNm }} &nbsp;</span>
+                    </div>
+                  </div>
+                  <img src="@/assets/img/rightArrow.png" alt="역에서 탑승가능한 버스를 보는 버튼" width="31" />
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -21,6 +42,7 @@
 </template>
 
 <script>
+  import axios from '@/service/axios.js';
   import {useRouter} from 'vue-router';
   import NavComp from '@/components/NavComp.vue';
   import {ref} from 'vue';
@@ -44,9 +66,295 @@
       // 승차벨 사용 이력이 있는 경우
       wholeText.value = '승차벨 사용 이력이 있습니다. 사용 이력 목록 조회';
 
+      // TODO: localstorage에서 get해서 가져오기
+      console.log(JSON.parse(localStorage.getItem('history')) || '');
+      const stops = [
+        {
+          busRouteId: '100100131',
+          busRouteNm: '1020',
+          busRouteAbrv: '1020',
+          seq: '1',
+          section: '0',
+          station: '107000070',
+          arsId: '08160',
+          stationNm: '정릉북한산국립공원입구',
+          gpsX: '126.9995128987',
+          gpsY: '37.6175946297',
+          posX: '199957.00101259968',
+          posY: '457560.2818010538',
+          fullSectDist: '0',
+          direction: '교보문고',
+          stationNo: '08160',
+          routeType: '4',
+          beginTm: '04:30',
+          lastTm: '23:20',
+          trnstnid: '100000023',
+          sectSpd: '0',
+          transYn: 'N',
+        },
+        {
+          busRouteId: '100100131',
+          busRouteNm: '1020',
+          busRouteAbrv: '1020',
+          seq: '1',
+          section: '0',
+          station: '107000070',
+          arsId: '08160',
+          stationNm: '정릉북한산국립공원입구',
+          gpsX: '126.9995128987',
+          gpsY: '37.6175946297',
+          posX: '199957.00101259968',
+          posY: '457560.2818010538',
+          fullSectDist: '0',
+          direction: '교보문고',
+          stationNo: '08160',
+          routeType: '4',
+          beginTm: '04:30',
+          lastTm: '23:20',
+          trnstnid: '100000023',
+          sectSpd: '0',
+          transYn: 'N',
+        },
+        {
+          busRouteId: '100100131',
+          busRouteNm: '1020',
+          busRouteAbrv: '1020',
+          seq: '1',
+          section: '0',
+          station: '107000070',
+          arsId: '08160',
+          stationNm: '정릉북한산국립공원입구',
+          gpsX: '126.9995128987',
+          gpsY: '37.6175946297',
+          posX: '199957.00101259968',
+          posY: '457560.2818010538',
+          fullSectDist: '0',
+          direction: '교보문고',
+          stationNo: '08160',
+          routeType: '4',
+          beginTm: '04:30',
+          lastTm: '23:20',
+          trnstnid: '100000023',
+          sectSpd: '0',
+          transYn: 'N',
+        },
+        {
+          busRouteId: '100100131',
+          busRouteNm: '1020',
+          busRouteAbrv: '1020',
+          seq: '1',
+          section: '0',
+          station: '107000070',
+          arsId: '08160',
+          stationNm: '정릉북한산국립공원입구',
+          gpsX: '126.9995128987',
+          gpsY: '37.6175946297',
+          posX: '199957.00101259968',
+          posY: '457560.2818010538',
+          fullSectDist: '0',
+          direction: '교보문고',
+          stationNo: '08160',
+          routeType: '4',
+          beginTm: '04:30',
+          lastTm: '23:20',
+          trnstnid: '100000023',
+          sectSpd: '0',
+          transYn: 'N',
+        },
+        {
+          busRouteId: '100100131',
+          busRouteNm: '1020',
+          busRouteAbrv: '1020',
+          seq: '1',
+          section: '0',
+          station: '107000070',
+          arsId: '08160',
+          stationNm: '정릉북한산국립공원입구',
+          gpsX: '126.9995128987',
+          gpsY: '37.6175946297',
+          posX: '199957.00101259968',
+          posY: '457560.2818010538',
+          fullSectDist: '0',
+          direction: '교보문고',
+          stationNo: '08160',
+          routeType: '4',
+          beginTm: '04:30',
+          lastTm: '23:20',
+          trnstnid: '100000023',
+          sectSpd: '0',
+          transYn: 'N',
+        },
+        {
+          busRouteId: '100100131',
+          busRouteNm: '1020',
+          busRouteAbrv: '1020',
+          seq: '1',
+          section: '0',
+          station: '107000070',
+          arsId: '08160',
+          stationNm: '정릉북한산국립공원입구',
+          gpsX: '126.9995128987',
+          gpsY: '37.6175946297',
+          posX: '199957.00101259968',
+          posY: '457560.2818010538',
+          fullSectDist: '0',
+          direction: '교보문고',
+          stationNo: '08160',
+          routeType: '4',
+          beginTm: '04:30',
+          lastTm: '23:20',
+          trnstnid: '100000023',
+          sectSpd: '0',
+          transYn: 'N',
+        },
+        {
+          busRouteId: '100100131',
+          busRouteNm: '1020',
+          busRouteAbrv: '1020',
+          seq: '1',
+          section: '0',
+          station: '107000070',
+          arsId: '08160',
+          stationNm: '정릉북한산국립공원입구',
+          gpsX: '126.9995128987',
+          gpsY: '37.6175946297',
+          posX: '199957.00101259968',
+          posY: '457560.2818010538',
+          fullSectDist: '0',
+          direction: '교보문고',
+          stationNo: '08160',
+          routeType: '4',
+          beginTm: '04:30',
+          lastTm: '23:20',
+          trnstnid: '100000023',
+          sectSpd: '0',
+          transYn: 'N',
+        },
+        {
+          busRouteId: '100100131',
+          busRouteNm: '1020',
+          busRouteAbrv: '1020',
+          seq: '1',
+          section: '0',
+          station: '107000070',
+          arsId: '08160',
+          stationNm: '정릉북한산국립공원입구',
+          gpsX: '126.9995128987',
+          gpsY: '37.6175946297',
+          posX: '199957.00101259968',
+          posY: '457560.2818010538',
+          fullSectDist: '0',
+          direction: '교보문고',
+          stationNo: '08160',
+          routeType: '4',
+          beginTm: '04:30',
+          lastTm: '23:20',
+          trnstnid: '100000023',
+          sectSpd: '0',
+          transYn: 'N',
+        },
+        {
+          busRouteId: '100100131',
+          busRouteNm: '1020',
+          busRouteAbrv: '1020',
+          seq: '1',
+          section: '0',
+          station: '107000070',
+          arsId: '08160',
+          stationNm: '정릉북한산국립공원입구',
+          gpsX: '126.9995128987',
+          gpsY: '37.6175946297',
+          posX: '199957.00101259968',
+          posY: '457560.2818010538',
+          fullSectDist: '0',
+          direction: '교보문고',
+          stationNo: '08160',
+          routeType: '4',
+          beginTm: '04:30',
+          lastTm: '23:20',
+          trnstnid: '100000023',
+          sectSpd: '0',
+          transYn: 'N',
+        },
+        {
+          busRouteId: '100100131',
+          busRouteNm: '1020',
+          busRouteAbrv: '1020',
+          seq: '1',
+          section: '0',
+          station: '107000070',
+          arsId: '08160',
+          stationNm: '정릉북한산국립공원입구',
+          gpsX: '126.9995128987',
+          gpsY: '37.6175946297',
+          posX: '199957.00101259968',
+          posY: '457560.2818010538',
+          fullSectDist: '0',
+          direction: '교보문고',
+          stationNo: '08160',
+          routeType: '4',
+          beginTm: '04:30',
+          lastTm: '23:20',
+          trnstnid: '100000023',
+          sectSpd: '0',
+          transYn: 'N',
+        },
+      ];
+
+      // 클릭한 정거장 arsId
+      const clickStop = ref(null);
+
+      // 클릭한 정거장을 지나는 버스들
+      const buses = ref({});
+
+      // 역의 상세 버튼 클릭 이벤트
+      const showAvailableBus = stop => {
+        if (clickStop.value === stop.arsId) {
+          // 클릭 취소
+          clickStop.value = null;
+        } else {
+          // 해당 역에서 탑승 가능한 버스 목록 조회
+          const arsId = stop.arsId;
+          const url = `http://ws.bus.go.kr/api/rest/stationinfo/getRouteByStation?serviceKey=${process.env.VUE_APP_ROUTE_SERVICE_KEY}&arsId=${arsId}&resultType=json`;
+
+          // 특정 정류장에 경우하는 버스 노선 정보 list
+          axios
+            .get(url)
+            .then(res => {
+              buses.value = res.data.msgBody.itemList;
+              console.log(buses.value);
+            })
+            .catch(err => console.log(err));
+
+          clickStop.value = stop.arsId;
+        }
+      };
+
+      // 해당 역의 경유 버스 보여주는 페이지로 이동
+      const goStopBusListView = (arsId, stationId) => {
+        console.log('클릭한 정거장의 arsId: ', arsId, 'stId: ', stationId);
+        router.push({
+          name: 'stopBusListView',
+          params: {arsId: arsId, stId: stationId},
+        });
+      };
+
+      const goStationListView = busRouteId => {
+        router.push({
+          name: 'StationListView',
+          params: {busRouteId: busRouteId},
+        });
+      };
+
       return {
         goBusSearchView,
         wholeText,
+        stops,
+        clickStop,
+        buses,
+        showAvailableBus,
+        goStopBusListView,
+        goStationListView,
       };
     },
   };
@@ -97,22 +405,105 @@
   // 사용한 승차벨 이력이 있는 경우
   .favorite {
     text-align: center;
-    margin-top: 32px;
-    padding: 0px 16px;
 
-    .stops {
-      height: calc(122px * 6);
-      overflow: auto;
+    #route_container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px;
+      border-bottom: solid 0.1px #fff;
+    }
+
+    #route_info > div {
+      text-align: left;
+      color: #fff;
+      margin: 10px;
+    }
+
+    .favorite-container {
+      margin: 0px 16px;
+
+      .scroll {
+        max-height: calc(100vh - 94px);
+        overflow: scroll;
+      }
 
-      .stop {
-        background-color: $lightGray;
-        height: 106px;
+      .available-bus {
+        background-color: $secondary;
+        height: 98px;
         border: none;
-        border-radius: 10px;
+        border-radius: 0px 0px 10px 10px;
+        position: relative;
+        line-height: 34.16px;
+        padding: 15px 25px;
         margin-bottom: 16px;
-        display: flex;
-        align-items: center;
+
+        .point-icon {
+          position: absolute;
+          top: -35px;
+          right: 30px;
+          width: 0;
+          height: 0;
+          border-bottom: 30px solid $deepDarkGray;
+          border-top: 10px solid transparent;
+          border-left: 15px solid transparent;
+          border-right: 15px solid transparent;
+        }
+
+        .display {
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+
+        .title {
+          color: $primary;
+          font-size: 18px;
+          font-weight: 700;
+          text-align: left;
+        }
+
+        .buses {
+          color: $primary;
+          font-size: 18px;
+          width: 250px;
+          font-weight: 700;
+          white-space: nowrap;
+          text-align: left;
+          overflow-x: auto;
+        }
       }
     }
+
+    .order {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 40px;
+      margin-bottom: 20px;
+    }
+
+    .order > .bus_text {
+      padding: 10px 65px;
+      margin: 0px 10px;
+      font-weight: 700;
+      border-bottom: solid 2px v-bind(route_color);
+      color: v-bind(route_color);
+    }
+
+    .order > .dist_text {
+      padding: 10px 65px;
+      margin: 0px 10px;
+      font-weight: 700;
+      border-bottom: solid 2px v-bind(station_color);
+      color: v-bind(station_color);
+    }
+
+    .order > p:hover {
+      cursor: pointer;
+      border-bottom: solid 2px $secondary;
+      color: $secondary;
+    }
   }
 </style>
diff --git a/src/views/passenger/KeyboardSearchView.vue b/src/views/passenger/KeyboardSearchView.vue
index 33a05f3..0c5c541 100644
--- a/src/views/passenger/KeyboardSearchView.vue
+++ b/src/views/passenger/KeyboardSearchView.vue
@@ -10,8 +10,8 @@
       <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)">
+            <div id="route_container" @click="showAvailableBus(stop)">
+              <div id="route_info">
                 <div style="font-weight: 700">{{ stop.stationNm }}</div>
                 <div>{{ stop.dist }} m</div>
               </div>
@@ -110,7 +110,7 @@
 
       // 역의 상세 버튼 클릭 이벤트
       const showAvailableBus = stop => {
-        if (clickStop.value !== null) {
+        if (clickStop.value === stop.arsId) {
           // 클릭 취소
           clickStop.value = null;
         } else {
diff --git a/src/views/passenger/NearStopView.vue b/src/views/passenger/NearStopView.vue
index 65ac4b6..606ac36 100644
--- a/src/views/passenger/NearStopView.vue
+++ b/src/views/passenger/NearStopView.vue
@@ -133,7 +133,7 @@
     margin: 0px 16px;
 
     .scroll {
-      max-height: 100vh;
+      max-height: calc(100vh - 94px);
       overflow: scroll;
     }
 

From 2da0b3fb590aadc820aff602f010022973c1f512 Mon Sep 17 00:00:00 2001
From: Ssuhyeong <tngud124@gmail.com>
Date: Sat, 10 Jun 2023 16:53:50 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat=20:=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?=
 =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |  22 ++
 src/views/passenger/StopBusListView.vue       |  20 +-
 .../landing/BusLandingSearchView.vue          | 187 ++++++++++
 .../landing/KeyboardLandingSearchView.vue     | 335 ++++++++++++++++++
 .../landing/LandingStationListView.vue        | 279 +++++++++++++++
 .../landing/LandingStopBusListView.vue        | 314 ++++++++++++++++
 6 files changed, 1150 insertions(+), 7 deletions(-)
 create mode 100644 src/views/passenger/landing/BusLandingSearchView.vue
 create mode 100644 src/views/passenger/landing/KeyboardLandingSearchView.vue
 create mode 100644 src/views/passenger/landing/LandingStationListView.vue
 create mode 100644 src/views/passenger/landing/LandingStopBusListView.vue

diff --git a/src/router/index.js b/src/router/index.js
index 930883b..d0aa13b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -84,6 +84,28 @@ const routes = [
     name: 'StationListView',
     component: () => import('@/views/passenger/StationListView.vue'),
   },
+  // 하차 관련 검색 페이지
+  {
+    path: '/landingSearch',
+    name: 'busLandingSearchView',
+    component: () => import('@/views/passenger/landing/BusLandingSearchView.vue'),
+  },
+  {
+    path: '/keyboardLandingSearch/:keyword',
+    name: 'KeyboardLandingSearchView',
+    component: () => import('@/views/passenger/landing/KeyboardLandingSearchView.vue'),
+  },
+  {
+    path: '/landingStopBusList/:arsId/:stId',
+    name: 'LandingStopBusListView',
+    props: true,
+    component: () => import('@/views/passenger/landing/LandingStopBusListView.vue'),
+  },
+  {
+    path: '/landingStationList/:busRouteId',
+    name: 'LandingStationListView',
+    component: () => import('@/views/passenger/landing/LandingStationListView.vue'),
+  },
 ];
 
 const router = createRouter({
diff --git a/src/views/passenger/StopBusListView.vue b/src/views/passenger/StopBusListView.vue
index 286fed4..7407ccf 100644
--- a/src/views/passenger/StopBusListView.vue
+++ b/src/views/passenger/StopBusListView.vue
@@ -5,13 +5,7 @@
     <div class="bus-list">
       <h1>{{ title }}</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)]">
+        <div id="route_container" v-for="(bus, idx) in buses" :key="bus.busRouteId" @click="[select(idx), getBusData(bus.busRouteId, idx)]">
           <div :class="['route-type', busType[bus.busRouteType]]"></div>
           <div id="route_info">
             <div style="font-weight: 700; width: 40px">{{ bus.busRouteNm }}</div>
@@ -155,6 +149,18 @@
           this.bus_active[idx] = !this.bus_active[idx];
         }
       },
+      getBusData(busRouteId, idx) {
+        // 사용자 위치 기준으로 가까운 정류장 get
+        // TODO: 현재 위치를 동대문 DDP 으로 고정! 나중에 현재 위치로 바꾸깅
+
+        const url = `http://ws.bus.go.kr/api/rest/busRouteInfo/getStaionByRoute?serviceKey=${process.env.VUE_APP_ROUTE_SERVICE_KEY}&busRouteId=${busRouteId}&resultType=json`;
+        axios
+          .get(url)
+          .then(res => {
+            this.bus_select = res.data.msgBody.itemList[idx];
+          })
+          .catch(err => console.log(err));
+      },
     },
   };
 </script>
diff --git a/src/views/passenger/landing/BusLandingSearchView.vue b/src/views/passenger/landing/BusLandingSearchView.vue
new file mode 100644
index 0000000..9d12a68
--- /dev/null
+++ b/src/views/passenger/landing/BusLandingSearchView.vue
@@ -0,0 +1,187 @@
+<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" @click="search_keyboard" />
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {ref} from 'vue';
+  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');
+      const bg_color = ref('#fff');
+      const router = useRouter();
+      // 음성 검색
+      const voice_result = () => {
+        window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+
+        let recognition = new window.webkitSpeechRecognition();
+        recognition.interimResults = true;
+        recognition.lang = 'ko-KR';
+
+        recognition.start();
+
+        recognition.onresult = function (e) {
+          let texts = Array.from(e.results)
+            .map(results => results[0].transcript)
+            .join('');
+
+          title.value = texts;
+          setTimeout(() => {
+            router.push({
+              name: 'KeyboardLandingSearchView',
+              params: {keyword: title.value},
+            });
+          }, 3000);
+        };
+      };
+      const getSearchType = value => {
+        searchType.value = value;
+        if (searchType.value == 'voice') {
+          bg_color.value = '#fff';
+          wholeText.value = '음성으로 버스 노선 검색. 버튼을 누른 후 검색어를 말해주세요. 음성 검색 버튼 ';
+        } else {
+          bg_color.value = '#082220';
+          wholeText.value = '키보드로 버스 노선 검색. 검색어를 입력하세요.';
+        }
+      };
+
+      const search_keyboard = () => {
+        router.push({
+          name: 'KeyboardLandingSearchView',
+          params: {keyword: input.value},
+        });
+      };
+
+      return {
+        wholeText,
+        title,
+        searchType,
+        input,
+        bg_color,
+        voice_result,
+        getSearchType,
+        search_keyboard,
+      };
+    },
+    mounted() {},
+    methods: {
+      readAll() {
+        const text = '과장이 아니란걸 알게됐어';
+        this.passengerStore.announcePageContent(text, this.$refs.voice);
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .bus-search {
+    height: 100vh;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: v-bind(bg_color);
+    // justify-content: space-between;
+
+    .title {
+      font-weight: 700;
+      font-size: 28px;
+      line-height: 34.16px;
+      width: 300px;
+      margin-top: 80px;
+    }
+
+    .circle {
+      background-color: $primary;
+      width: 210px;
+      height: 210px;
+      border-radius: 50%;
+      border: none;
+    }
+
+    // 키보드 사용 버튼
+    .keyboard-btn {
+      height: 124px;
+      background-color: $primary;
+      color: $secondary;
+      font-size: 30px;
+      font-weight: 700;
+      line-height: 22px;
+      text-align: center;
+      letter-spacing: -0.408px;
+      margin-bottom: 6px;
+      width: 100vw;
+    }
+
+    // 음성 버튼
+    .talk-btn {
+      width: 162px;
+      height: 81px;
+      background-color: $gray;
+      border-radius: 81px 81px 0 0;
+      border: none;
+    }
+  }
+
+  .form-control {
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin: 40px 0 40px;
+    width: 340px;
+  }
+  .form-control input {
+    background-color: transparent;
+    border: 0;
+    border-bottom: 2px #fff solid;
+    display: block;
+    width: 100%;
+    padding: 15px 0;
+    font-weight: 700;
+    font-size: 20px;
+    color: #ffffff;
+    text-align: left;
+  }
+  .form-control input:focus,
+  .form-control input:valid {
+    outline: 0;
+    border-bottom-color: #ffdb1d;
+  }
+</style>
diff --git a/src/views/passenger/landing/KeyboardLandingSearchView.vue b/src/views/passenger/landing/KeyboardLandingSearchView.vue
new file mode 100644
index 0000000..186cc9b
--- /dev/null
+++ b/src/views/passenger/landing/KeyboardLandingSearchView.vue
@@ -0,0 +1,335 @@
+<template>
+  <div>
+    <NavComp :content="wholeText" title="버스 노선 검색" />
+    <div id="title">'{{ this.$route.params.keyword }}' 검색결과</div>
+    <div class="order">
+      <p @click="bus" class="bus_text">노 선</p>
+      <p @click="station" class="dist_text">정류장</p>
+    </div>
+    <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)">
+                <div style="font-weight: 700">{{ stop.stationNm }}</div>
+                <div>{{ stop.dist }} m</div>
+              </div>
+              <img src="@/assets/img/busIcon.png" alt="역에서 탑승가능한 버스를 보는 버튼" width="31" />
+            </div>
+            <div class="available-bus" v-if="clickStop === stop.arsId">
+              <div class="display" @click="goStopBusListView(stop.arsId, stop.stationId)">
+                <div style="width: 100%">
+                  <span class="title">탑승 가능 버스</span>
+                  <div class="buses">
+                    <span v-for="bus in buses" :key="bus.busRouteId">{{ bus.busRouteNm }} &nbsp;</span>
+                  </div>
+                </div>
+                <img src="@/assets/img/rightArrow.png" alt="역에서 탑승가능한 버스를 보는 버튼" width="31" />
+              </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" />
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import axios from '@/service/axios.js';
+  import router from '@/router';
+  import {ref} from 'vue';
+  import {useRoute} from 'vue-router';
+  import NavComp from '@/components/NavComp.vue';
+
+  export default {
+    name: 'KeyboardSearchView',
+    components: {NavComp},
+    data() {
+      return {
+        keyword: '',
+        route_color: '#fff',
+        station_color: '#ffdb1d',
+        search_data: [],
+        wholeText: '',
+      };
+    },
+    setup() {
+      const userLat = ref(0);
+      const userLng = ref(0);
+
+      const stops = ref({});
+      const keyword_stops = ref([]);
+      const route = useRoute();
+
+      // 사용자의 현재 위치 get
+      const locationSuccess = pos => {
+        userLat.value = pos.coords.latitude;
+        userLng.value = pos.coords.longitude;
+        console.log(`현위치: ${userLat.value}, ${userLng.value}`);
+
+        // 사용자 위치 기준으로 가까운 정류장 get
+        // TODO: 현재 위치를 동대문 DDP 으로 고정! 나중에 현재 위치로 바꾸깅
+
+        const url = `http://ws.bus.go.kr/api/rest/stationinfo/getStationByPos?serviceKey=${process.env.VUE_APP_ROUTE_SERVICE_KEY}&tmX=${127.00911}&tmY=${37.56652}&radius=${2000}&resultType=json`;
+        axios
+          .get(url)
+          .then(res => {
+            stops.value = res.data.msgBody.itemList;
+
+            stops.value.forEach(data => {
+              if (data.stationNm.indexOf(route.params.keyword) >= 0) {
+                keyword_stops.value.push({...data});
+              }
+            });
+
+            console.log(keyword_stops.value);
+          })
+          .catch(err => console.log(err));
+      };
+
+      const locationFail = err => {
+        console.log('현위치를 찾을 수 없습니다');
+      };
+
+      navigator.geolocation.getCurrentPosition(locationSuccess, locationFail);
+
+      // 클릭한 역 arsId
+      const clickStop = ref(null);
+
+      // 클릭한 역을 지나는 버스들
+      const buses = ref({});
+
+      // 역의 상세 버튼 클릭 이벤트
+      const showAvailableBus = stop => {
+        if (clickStop.value !== null) {
+          // 클릭 취소
+          clickStop.value = null;
+        } else {
+          // 해당 역에서 탑승 가능한 버스 목록 조회
+          const arsId = stop.arsId;
+          const url = `http://ws.bus.go.kr/api/rest/stationinfo/getRouteByStation?serviceKey=${process.env.VUE_APP_ROUTE_SERVICE_KEY}&arsId=${arsId}&resultType=json`;
+
+          // 특정 정류장에 경우하는 버스 노선 정보 list
+          axios
+            .get(url)
+            .then(res => {
+              buses.value = res.data.msgBody.itemList;
+              console.log(buses.value);
+            })
+            .catch(err => console.log(err));
+
+          clickStop.value = stop.arsId;
+        }
+      };
+
+      // 해당 역의 경유 버스 보여주는 페이지로 이동
+      const goStopBusListView = (arsId, stationId) => {
+        console.log('클릭한 정거장의 arsId: ', arsId, 'stId: ', stationId);
+        router.push({
+          name: 'LandingStopBusListView',
+          params: {arsId: arsId, stId: stationId},
+        });
+      };
+
+      const goStationListView = busRouteId => {
+        router.push({
+          name: 'LandingStationListView',
+          params: {busRouteId: busRouteId},
+        });
+      };
+
+      return {
+        stops,
+        keyword_stops,
+        clickStop,
+        buses,
+        showAvailableBus,
+        goStopBusListView,
+        goStationListView,
+      };
+    },
+    mounted() {
+      this.keyword = this.$route.params.keyword;
+      this.wholeText = `${this.$route.params.keyword} 검색 결과`;
+      this.station();
+    },
+    methods: {
+      bus() {
+        this.route_color = '#ffdb1d';
+        this.station_color = '#fff';
+
+        const keyword = this.keyword;
+        const url = `/api/pass/route/${keyword}`;
+
+        axios
+          .get(url)
+          .then(res => {
+            console.log(res.data);
+            this.search_data = res.data;
+            console.log(res.data);
+          })
+          .catch(error => {
+            console.log('검색 실패' + error.data);
+          });
+      },
+      station() {
+        this.station_color = '#ffdb1d';
+        this.route_color = '#fff';
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  #title {
+    margin-top: 40px;
+    color: $secondary;
+    font-weight: 700;
+    font-size: 22px;
+    line-height: 24px;
+  }
+
+  #route_container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px;
+    border-bottom: solid 0.1px #fff;
+  }
+
+  #route_info > div {
+    text-align: left;
+    color: #fff;
+    margin: 10px;
+  }
+
+  .near-stop {
+    text-align: center;
+    margin: 0px 16px;
+
+    h1 {
+      font-weight: 700;
+    }
+
+    .scroll {
+      max-height: 70vh;
+      overflow: scroll;
+    }
+
+    h1 {
+      font-size: 30px;
+      line-height: 36.6px;
+      margin-top: 97px;
+      margin-bottom: 35px;
+    }
+
+    .stops {
+      height: 98px;
+      background-color: $lightGray;
+      border: none;
+      border-radius: 10px;
+      font-size: 28px;
+      line-height: 34.16px;
+      display: flex;
+      align-items: center;
+      padding: 0px 30px;
+      justify-content: space-between;
+
+      .stop-name {
+        font-weight: 700;
+        display: block;
+        white-space: nowrap;
+        width: 170px;
+        text-align: left;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .available-bus {
+      background-color: $secondary;
+      height: 98px;
+      border: none;
+      border-radius: 0px 0px 10px 10px;
+      position: relative;
+      line-height: 34.16px;
+      padding: 15px 25px;
+      margin-bottom: 16px;
+
+      .point-icon {
+        position: absolute;
+        top: -35px;
+        right: 30px;
+        width: 0;
+        height: 0;
+        border-bottom: 30px solid $deepDarkGray;
+        border-top: 10px solid transparent;
+        border-left: 15px solid transparent;
+        border-right: 15px solid transparent;
+      }
+
+      .display {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .title {
+        color: $primary;
+        font-size: 18px;
+        font-weight: 700;
+        text-align: left;
+      }
+
+      .buses {
+        color: $primary;
+        font-size: 18px;
+        width: 250px;
+        font-weight: 700;
+        white-space: nowrap;
+        text-align: left;
+        overflow-x: auto;
+      }
+    }
+  }
+
+  .order {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 40px;
+    margin-bottom: 20px;
+  }
+
+  .order > .bus_text {
+    padding: 10px 65px;
+    margin: 0px 10px;
+    font-weight: 700;
+    border-bottom: solid 2px v-bind(route_color);
+    color: v-bind(route_color);
+  }
+
+  .order > .dist_text {
+    padding: 10px 65px;
+    margin: 0px 10px;
+    font-weight: 700;
+    border-bottom: solid 2px v-bind(station_color);
+    color: v-bind(station_color);
+  }
+
+  .order > p:hover {
+    cursor: pointer;
+    border-bottom: solid 2px $secondary;
+    color: $secondary;
+  }
+</style>
diff --git a/src/views/passenger/landing/LandingStationListView.vue b/src/views/passenger/landing/LandingStationListView.vue
new file mode 100644
index 0000000..2bfb9a7
--- /dev/null
+++ b/src/views/passenger/landing/LandingStationListView.vue
@@ -0,0 +1,279 @@
+<template>
+  <!-- 역에서 탈 수 있는 버스 목록 조회 페이지 -->
+  <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)]">
+          <!-- <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>
+      </div>
+      <div v-if="station_select == ''" id="ridingBtn">하차 예약</div>
+      <div v-else id="ridingActiveBtn" @click="landingReserve(station_select)">하차 예약</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {ref} from 'vue';
+  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],
+        station_select: '',
+      };
+    },
+    setup() {
+      const route = useRoute();
+      const userLat = ref(0);
+      const userLng = ref(0);
+
+      const stops = ref({});
+      const title = ref({});
+
+      // 읽을 전체 text
+      const wholeText = ref('');
+
+      // 사용자 위치 확인 및 버스 경유하는 정류장 출력
+      const locationSuccess = pos => {
+        userLat.value = pos.coords.latitude;
+        userLng.value = pos.coords.longitude;
+        console.log(`현위치: ${userLat.value}, ${userLng.value}`);
+
+        // 사용자 위치 기준으로 가까운 정류장 get
+        // TODO: 현재 위치를 동대문 DDP 으로 고정! 나중에 현재 위치로 바꾸깅
+
+        const url = `http://ws.bus.go.kr/api/rest/busRouteInfo/getStaionByRoute?serviceKey=${process.env.VUE_APP_ROUTE_SERVICE_KEY}&busRouteId=${route.params.busRouteId}&resultType=json`;
+        axios
+          .get(url)
+          .then(res => {
+            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));
+      };
+
+      const locationFail = err => {
+        console.log('현위치를 찾을 수 없습니다');
+      };
+
+      navigator.geolocation.getCurrentPosition(locationSuccess, locationFail);
+
+      const landingReserve = busData => {
+        router.push({
+          name: 'LandingView',
+        });
+      };
+
+      return {
+        wholeText,
+        title,
+        stops,
+        landingReserve,
+      };
+    },
+    methods: {
+      select(idx) {
+        if (this.bus_active[idx]) {
+          console.log('none');
+        } else {
+          for (let i = 0; i < this.bus_active.length; i++) {
+            if (i != idx) {
+              this.bus_active[i] = this.bus_active[idx];
+            }
+          }
+          this.bus_active[idx] = !this.bus_active[idx];
+        }
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  #ridingBtn {
+    font-weight: 900;
+    font-size: 32px;
+    background-color: #fff;
+    border-radius: 20px;
+    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;
+    background-color: #ff5f63;
+    border-radius: 20px;
+    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 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px;
+    margin: 10px;
+    border-bottom: solid 0.1px #fff;
+  }
+
+  #route_info > div {
+    text-align: left;
+    color: #fff;
+    margin: 10px;
+  }
+  .bus-list {
+    text-align: center;
+    margin: 0px 16px;
+
+    h1 {
+      font-size: 30px;
+      line-height: 36.6px;
+      margin-top: 40px;
+      margin-bottom: 40px;
+      font-weight: 700;
+      color: $secondary;
+    }
+
+    .buses {
+      max-height: 50vh;
+      overflow: auto;
+
+      .bus {
+        background-color: #f0f0f0;
+        height: 106px;
+        margin-bottom: 16px;
+        border-radius: 10px;
+        padding: 0px 16px;
+
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 28px;
+        line-height: 34.16px;
+
+        .title {
+          font-weight: 700;
+        }
+      }
+    }
+  }
+
+  #riding {
+    color: #ffdb1d;
+    border: 2px solid #ffdb1d;
+    padding: 15px 15px;
+    border-radius: 100px;
+    font-size: 14px;
+    font-weight: 700;
+  }
+
+  #riding:hover {
+    color: #fff;
+    background-color: #ffdb1d;
+  }
+
+  .active {
+    background-color: #ffdb1d;
+  }
+
+  .time {
+    color: $secondary;
+    width: 70px;
+  }
+
+  // 버스 노선 타입 css
+  .route-type {
+    display: inline;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: none;
+    background-color: black;
+  }
+
+  // 버스 노선 타입마다 색상 지정
+  // 공항
+  .airplane {
+    background-color: #ff5f63;
+  }
+
+  // 마을
+  .town {
+    background-color: #ff7c25;
+  }
+
+  // 간선
+  .trunk {
+    background-color: #ffdb1d;
+  }
+
+  // 지선
+  .branch-line {
+    background-color: #00df3e;
+  }
+
+  // 순환
+  .cycle {
+    background-color: #03a000;
+  }
+
+  // 광역
+  .wide-area {
+    background-color: #1d92ff;
+  }
+
+  // 인천
+  .incheon {
+    background-color: #1d28ff;
+  }
+
+  // 경기
+  .gyeonggi {
+    background-color: #6c1dff;
+  }
+
+  // 폐지
+  .abolition {
+    background-color: #ff3ef2;
+  }
+
+  // 공용
+  .public {
+    background-color: #777777;
+  }
+</style>
diff --git a/src/views/passenger/landing/LandingStopBusListView.vue b/src/views/passenger/landing/LandingStopBusListView.vue
new file mode 100644
index 0000000..435ef5a
--- /dev/null
+++ b/src/views/passenger/landing/LandingStopBusListView.vue
@@ -0,0 +1,314 @@
+<template>
+  <!-- 역에서 탈 수 있는 버스 목록 조회 페이지 -->
+  <div>
+    <NavComp :content="wholeText" title="탑승 가능 버스" />
+    <div class="bus-list">
+      <h1>{{ title }}</h1>
+      <div class="buses">
+        <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>
+      <div v-if="bus_select == ''" id="ridingBtn">하차 예약</div>
+      <div v-else id="ridingActiveBtn" @click="landingReserve(bus_select)">하차 예약</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import axios from 'axios';
+  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],
+        bus_select: '',
+      };
+    },
+    setup() {
+      const route = useRoute();
+      const buses = ref([]);
+      const busType = {
+        1: 'airplane', // 공항
+        2: 'town', // 마을
+        3: 'trunk', // 간선
+        4: 'branch-line', // 지선
+        5: 'cycle', // 순환
+        6: 'wide-area', // 광역
+        7: 'incheon', // 인천
+        8: 'gyeonggi', // 경기
+        9: 'abolition', // 폐지
+        0: 'public', // 공용
+      };
+
+      const title = ref('');
+      const arsId = route.params.arsId;
+      const stId = route.params.stId;
+
+      const url = `http://ws.bus.go.kr/api/rest/stationinfo/getRouteByStation?serviceKey=${process.env.VUE_APP_ROUTE_SERVICE_KEY}&arsId=${arsId}&resultType=json`;
+
+      // 특정 정류장에 경우하는 버스 노선 정보 list
+      axios
+        .get(url)
+        .then(res => {
+          buses.value = res.data.msgBody.itemList;
+          console.log(buses.value);
+
+          // buses 돌면서 buses의 순번을 가져오기
+
+          buses.value.forEach(async (bus, idx) => {
+            const ord = await getOrd(bus);
+
+            // 가져온 순번으로 api 호출해서 특정 역의 특정 노선 도착 예정 정보 get
+            // buses에 추가하기
+            if (ord != '') {
+              const prevData = await getPrevData(ord, bus.busRouteId);
+              const prevArr = prevData.split('[');
+              if (prevArr.length > 1) {
+                // prevArr = [2분 7초후, 0번째 전] ]
+                buses.value[idx].msg = prevArr[1].slice(0, -1);
+              } else {
+                // prevArr = [곧 도착]
+                buses.value[idx].msg = prevArr[0];
+              }
+            } else {
+              // 정보 없음
+              buses.value[idx].msg = '정보없음';
+            }
+          });
+        })
+        .catch(err => console.log(err));
+
+      // 버스의 순번 가져오기
+      const getOrd = async bus => {
+        const url = `http://localhost:8080/api/pass/ord/${bus.busRouteId}/${arsId}`;
+        const data = await axios.get(url);
+        return data.data;
+      };
+
+      // 특정 정거장에서 특정 노선의 도착 예정 정보 가져오기
+      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;
+        title.value = res.msgBody.itemList[0].stNm;
+        return res.msgBody.itemList[0].arrmsg1;
+      };
+
+      const landingReserve = busData => {
+        router.push({
+          name: 'LandingView',
+        });
+      };
+
+      // 읽어줄 전체 text
+      const wholeText = `${title.value}에서 탑승 가능한 버스 노선 목록. 승차 예약 버튼`;
+
+      return {
+        title,
+        buses,
+        busType,
+        landingReserve,
+        wholeText,
+      };
+    },
+    methods: {
+      select(idx) {
+        if (this.bus_active[idx]) {
+          console.log('none');
+        } else {
+          for (let i = 0; i < this.bus_active.length; i++) {
+            if (i != idx) {
+              this.bus_active[i] = this.bus_active[idx];
+            }
+          }
+          this.bus_active[idx] = !this.bus_active[idx];
+        }
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  #ridingBtn {
+    font-weight: 900;
+    font-size: 32px;
+    background-color: #fff;
+    border-radius: 20px;
+    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;
+    background-color: #ff5f63;
+    border-radius: 20px;
+    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 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px;
+    margin: 10px;
+    border-bottom: solid 0.1px #fff;
+  }
+
+  #route_info > div {
+    text-align: left;
+    color: #fff;
+    margin: 10px;
+  }
+  .bus-list {
+    text-align: center;
+    margin: 0px 16px;
+
+    h1 {
+      font-size: 30px;
+      line-height: 36.6px;
+      margin-top: 40px;
+      margin-bottom: 40px;
+      font-weight: 700;
+      color: $secondary;
+    }
+
+    .buses {
+      max-height: 50vh;
+      overflow: auto;
+
+      .bus {
+        background-color: #f0f0f0;
+        height: 106px;
+        margin-bottom: 16px;
+        border-radius: 10px;
+        padding: 0px 16px;
+
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 28px;
+        line-height: 34.16px;
+
+        .title {
+          font-weight: 700;
+        }
+      }
+    }
+  }
+
+  #riding {
+    color: #ffdb1d;
+    border: 2px solid #ffdb1d;
+    padding: 15px 15px;
+    border-radius: 100px;
+    font-size: 14px;
+    font-weight: 700;
+  }
+
+  #riding:hover {
+    color: #fff;
+    background-color: #ffdb1d;
+  }
+
+  .active {
+    background-color: #ffdb1d;
+  }
+
+  .time {
+    color: $secondary;
+    width: 70px;
+  }
+
+  // 버스 노선 타입 css
+  .route-type {
+    display: inline;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: none;
+    background-color: black;
+  }
+
+  // 버스 노선 타입마다 색상 지정
+  // 공항
+  .airplane {
+    background-color: #ff5f63;
+  }
+
+  // 마을
+  .town {
+    background-color: #ff7c25;
+  }
+
+  // 간선
+  .trunk {
+    background-color: #ffdb1d;
+  }
+
+  // 지선
+  .branch-line {
+    background-color: #00df3e;
+  }
+
+  // 순환
+  .cycle {
+    background-color: #03a000;
+  }
+
+  // 광역
+  .wide-area {
+    background-color: #1d92ff;
+  }
+
+  // 인천
+  .incheon {
+    background-color: #1d28ff;
+  }
+
+  // 경기
+  .gyeonggi {
+    background-color: #6c1dff;
+  }
+
+  // 폐지
+  .abolition {
+    background-color: #ff3ef2;
+  }
+
+  // 공용
+  .public {
+    background-color: #777777;
+  }
+</style>