From c8d46d870ae58e6b28935ccb44924c0a784e4f49 Mon Sep 17 00:00:00 2001
From: leecr1215 <leecr1215@naver.com>
Date: Sat, 10 Jun 2023 17:11:46 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=8A=B9=EC=B0=A8=EB=B2=A8=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=20=EC=9D=B4=EB=A0=A5=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?=
 =?UTF-8?q?=EB=B0=94=EC=9D=B8=EB=94=A9=20=EC=99=84=EB=A3=8C!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refactor : 즐겨찾는 정류장 > 승차벨 사용 이력 페이지
---
 src/components/NavComp.vue               |   2 -
 src/router/index.js                      |   6 +-
 src/views/passenger/FavoriteStopView.vue | 509 -----------------------
 src/views/passenger/MainView.vue         |  10 +-
 src/views/passenger/StopHistoryView.vue  | 280 +++++++++++++
 5 files changed, 288 insertions(+), 519 deletions(-)
 delete mode 100644 src/views/passenger/FavoriteStopView.vue
 create mode 100644 src/views/passenger/StopHistoryView.vue

diff --git a/src/components/NavComp.vue b/src/components/NavComp.vue
index c638f86..71ad10a 100644
--- a/src/components/NavComp.vue
+++ b/src/components/NavComp.vue
@@ -76,8 +76,6 @@
         }, 1);
       };
 
-      console.log(props.btnBackgroundColor);
-
       // 뒤로 가기 버튼 클릭 이벤트
       const router = useRouter();
       const goBack = () => {
diff --git a/src/router/index.js b/src/router/index.js
index d0aa13b..548a5ea 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -44,9 +44,9 @@ const routes = [
     component: () => import('@/views/passenger/KeyboardSearchView.vue'),
   },
   {
-    path: '/favoriteStop',
-    name: 'favoriteStopView',
-    component: () => import('@/views/passenger/FavoriteStopView.vue'),
+    path: '/stopHistory',
+    name: 'StopHistoryView',
+    component: () => import('@/views/passenger/StopHistoryView.vue'),
   },
   {
     // 가까운 정류장
diff --git a/src/views/passenger/FavoriteStopView.vue b/src/views/passenger/FavoriteStopView.vue
deleted file mode 100644
index 05ea4e8..0000000
--- a/src/views/passenger/FavoriteStopView.vue
+++ /dev/null
@@ -1,509 +0,0 @@
-<template>
-  <div>
-    <NavComp :content="wholeText" title="승차벨 사용 이력" />
-
-    <div class="favorite-stop">
-      <!-- 승차벨 사용 이력이 없는 경우 -->
-      <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="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>
-    </div>
-  </div>
-</template>
-
-<script>
-  import axios from '@/service/axios.js';
-  import {useRouter} from 'vue-router';
-  import NavComp from '@/components/NavComp.vue';
-  import {ref} from 'vue';
-
-  export default {
-    name: 'FavoriteStopView',
-    components: {NavComp},
-    setup() {
-      const router = useRouter();
-
-      // 정류장 검색하기 버튼 클릭 이벤트
-      const goBusSearchView = () => {
-        router.push('/search');
-      };
-
-      // TODO: 승차벨 사용 이력 받아오면 if문으로 지정
-      const wholeText = ref('');
-      // 승차벨 사용 이력이 없는 경우
-      // wholeText.value = '승차벨 사용 이력이 없습니다. 버스 노선 검색 버튼';
-
-      // 승차벨 사용 이력이 있는 경우
-      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,
-      };
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  // 이용한 승차벨 이력이 없는 경우
-  .none-favorite {
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: 50%;
-
-    h1 {
-      color: $white;
-      width: 249px;
-      font-weight: 700;
-      font-size: 30px;
-      line-height: 48px;
-      margin-bottom: 67px;
-    }
-
-    // 정류장 검색 버튼
-    .search-btn {
-      height: 140px;
-      background-color: $secondary;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      width: calc(100vw - 32px);
-      border-radius: 20px;
-      border: none;
-
-      .text {
-        font-weight: 700;
-        font-size: 36px;
-        line-height: 22px;
-      }
-
-      .icon {
-        font-size: 28px;
-        line-height: 34.16px;
-      }
-    }
-  }
-
-  // 사용한 승차벨 이력이 있는 경우
-  .favorite {
-    text-align: center;
-
-    #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;
-      }
-
-      .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/MainView.vue b/src/views/passenger/MainView.vue
index 2dd39a6..7ed9668 100644
--- a/src/views/passenger/MainView.vue
+++ b/src/views/passenger/MainView.vue
@@ -4,7 +4,7 @@
 
     <div class="main">
       <button class="btn" @click="goSearchView">버스 노선 검색</button>
-      <button class="btn" @click="goFavoriteStopView">승차벨 사용 이력</button>
+      <button class="btn" @click="goStopHistoryView">승차벨 사용 이력</button>
       <button class="btn" @click="goNearStopView">가까운 정류장</button>
     </div>
   </div>
@@ -26,9 +26,9 @@
         router.push('/search');
       };
 
-      // 즐겨 찾는 정류장 페이지로 이동
-      const goFavoriteStopView = () => {
-        router.push('/favoriteStop');
+      // 승차벨 사용 이력 정류장 페이지로 이동
+      const goStopHistoryView = () => {
+        router.push('/stopHistory');
       };
 
       // 가까운 정류장 페이지로 이동
@@ -39,7 +39,7 @@
       return {
         wholeText,
         goSearchView,
-        goFavoriteStopView,
+        goStopHistoryView,
         goNearStopView,
       };
     },
diff --git a/src/views/passenger/StopHistoryView.vue b/src/views/passenger/StopHistoryView.vue
new file mode 100644
index 0000000..7bd6c0f
--- /dev/null
+++ b/src/views/passenger/StopHistoryView.vue
@@ -0,0 +1,280 @@
+<template>
+  <div>
+    <NavComp :content="wholeText" title="승차벨 사용 이력" />
+
+    <div class="favorite-stop">
+      <!-- 승차벨 사용 이력이 없는 경우 -->
+      <div class="none-favorite" v-if="stops.length === 0">
+        <h1>이력이 없습니다.</h1>
+        <button class="search-btn" @click="goBusSearchView">
+          <span class="text">버스 노선 검색</span>
+        </button>
+      </div>
+      <!-- 승차벨 사용 이력이 있는 경우 -->
+      <div class="favorite" v-else>
+        <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>
+    </div>
+  </div>
+</template>
+
+<script>
+  import axios from '@/service/axios.js';
+  import {useRouter} from 'vue-router';
+  import NavComp from '@/components/NavComp.vue';
+  import {ref} from 'vue';
+
+  export default {
+    name: 'StopHistoryView',
+    components: {NavComp},
+    setup() {
+      const router = useRouter();
+
+      const stops = JSON.parse(localStorage.getItem('history')) || [];
+
+      // 정류장 검색하기 버튼 클릭 이벤트
+      const goBusSearchView = () => {
+        router.push('/search');
+      };
+
+      const wholeText = ref('');
+
+      if (stops.length === 0) {
+        // 승차벨 사용 이력이 없는 경우
+        wholeText.value = '승차벨 사용 이력이 없습니다. 버스 노선 검색 버튼';
+      } else {
+        // 승차벨 사용 이력이 있는 경우
+        wholeText.value = '승차벨 사용 이력이 있습니다. 사용 이력 목록 조회';
+        stops.forEach(stop => {
+          wholeText.value += stop.stationNm + ' ';
+        });
+      }
+
+      // 클릭한 정거장 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;
+            })
+            .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,
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  // 이용한 승차벨 이력이 없는 경우
+  .none-favorite {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 50%;
+
+    h1 {
+      color: $white;
+      width: 249px;
+      font-weight: 700;
+      font-size: 30px;
+      line-height: 48px;
+      margin-bottom: 67px;
+    }
+
+    // 정류장 검색 버튼
+    .search-btn {
+      height: 140px;
+      background-color: $secondary;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      width: calc(100vw - 32px);
+      border-radius: 20px;
+      border: none;
+
+      .text {
+        font-weight: 700;
+        font-size: 36px;
+        line-height: 22px;
+      }
+
+      .icon {
+        font-size: 28px;
+        line-height: 34.16px;
+      }
+    }
+  }
+
+  // 사용한 승차벨 이력이 있는 경우
+  .favorite {
+    text-align: center;
+
+    #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;
+      }
+
+      .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>