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

Style/#24 driver page
beodomi · Jun 9, 2023 · 6b5af1c · 6b5af1c
2 parents beb9c98 + 45160b3
commit 6b5af1c
Show file tree

Hide file tree

Showing 12 changed files with 283 additions and 119 deletions.
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve --host localhost --port 3000",
+    "serve": "vue-cli-service serve --port 3000",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },

diff --git a/src/assets/img/driver/Double_arrow_down.png b/src/assets/img/driver/Double_arrow_down.png
diff --git a/src/assets/img/driver/Double_arrow_up.png b/src/assets/img/driver/Double_arrow_up.png
diff --git a/src/assets/img/driver/Exclamation_mark_fill.png b/src/assets/img/driver/Exclamation_mark_fill.png
diff --git a/src/assets/img/driver/Exclamation_mark_outline.png b/src/assets/img/driver/Exclamation_mark_outline.png
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
@@ -6,3 +6,4 @@ $darkGray: #a5a5a5;
 $deepDarkGray: #7c7c7c;
 $black: #000000;
 $white: #ffffff;
+$red: #ff5f63;
diff --git a/src/router/index.js b/src/router/index.js
@@ -12,14 +12,21 @@ const routes = [
     component: () => import('@/views/passenger/MainView.vue'),
   },
   {
-    path: '/driver/code',
-    name: 'driverCodeView',
-    component: () => import('@/views/drivers/DriverCodeView.vue'),
-  },
-  {
-    path: '/driver/main',
-    name: 'driverMainView',
-    component: () => import('@/views/drivers/DriverMainView.vue'),
+    path: '/driver',
+    name: 'driverView',
+    component: () => import('@/views/drivers/DriverView.vue'),
+    children: [
+      {
+        path: 'code',
+        name: 'driverCodeView',
+        component: () => import('@/views/drivers/DriverCodeView.vue'),
+      },
+      {
+        path: 'main',
+        name: 'driverMainView',
+        component: () => import('@/views/drivers/DriverMainView.vue'),
+      },
+    ],
   },
   {
     path: '/reservation',

diff --git a/src/store/driverStore.js b/src/store/driverStore.js
@@ -16,9 +16,7 @@ export const useDriverStore = defineStore('driver', () => {
 
   /** 백엔드로부터 이번 정류장에서 탑승/하차 인원 및 도움 요청 수 가져오기 */
   async function getHelpInfo() {
-    const url = `http://localhost:8080/api/driver/${busRouteId.value}/${
-      vehId.value
-    }/${routeInfo.value[stationIndex.value].station}`;
+    const url = `http://localhost:8080/api/driver/${busRouteId.value}/${vehId.value}/${routeInfo.value[stationIndex.value].arsId}`;
     console.log('요청:', url);
     const res = await axios.get(url);
     console.log('결과:', res);
@@ -49,8 +47,7 @@ export const useDriverStore = defineStore('driver', () => {
       $reset();
       loading.value = true;
       console.log(process.env.VUE_APP_ROUTE_SERVICE_KEY);
-      const BASE_URL =
-        'http://ws.bus.go.kr/api/rest/busRouteInfo/getStaionByRoute';
+      const BASE_URL = 'http://ws.bus.go.kr/api/rest/busRouteInfo/getStaionByRoute';
       const url = `${BASE_URL}?ServiceKey=${process.env.VUE_APP_ROUTE_SERVICE_KEY}&busRouteId=${busRouteId.value}&resultType=json`;
       console.log('요청URL:', url);
       const res = await axios.get(url);
@@ -71,13 +68,10 @@ export const useDriverStore = defineStore('driver', () => {
   /** 이번 정류장 및 다음 정류장 정보 가져오기 */
   function busStop() {
     if (!isLastIndex.value) {
-      if (++stationIndex.value >= routeInfo.value.length - 1)
-        isLastIndex.value = true;
+      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;
+      nextStationName.value = isLastIndex.value ? '없음' : routeInfo.value[stationIndex.value + 1].stationNm;
       getHelpInfo();
     } else {
       router.push({name: 'driverCodeView'});

diff --git a/src/views/drivers/DriverCodeView.vue b/src/views/drivers/DriverCodeView.vue
@@ -1,25 +1,15 @@
 <template>
-  <div class="container">
-    <header>
-      <h3>버스기사</h3>
-      <h1>코드 입력</h1>
-    </header>
-    <main>
-      <input
-        v-model="driverStore.busRouteId"
-        type="text"
-        placeholder="노선 코드를 입력해주세요"
-      />
-      <input
-        v-model="driverStore.vehId"
-        type="text"
-        placeholder="버스 코드를 입력해주세요"
-      />
-      <button @click="goToDriverMainPage" :disabled="driverStore.vehId == ''">
-        확인
-      </button>
-      <button @click="goToMainPage" class="gray-button">뒤로가기</button>
-    </main>
+  <div class="code-container">
+    <input v-model="driverStore.busRouteId" type="text" placeholder="| 노선 코드를 입력해주세요" />
+    <input v-model="driverStore.vehId" type="text" placeholder="| 버스 코드를 입력해주세요" />
+    <button @click="goToDriverMainPage" :disabled="driverStore.vehId == ''">확인</button>
+    <section class="logo">
+      <div>
+        <img class="image" src="@/assets/img/beodomiLogo.png" alt="버도미 아이콘" width="103" height="100" />
+      </div>
+      <img class="name" src="@/assets/img/beodomiText.png" alt="버도미 아이콘" width="205" />
+      <img class="dot" src="@/assets/img/beodomiBraille.png" alt="버도미 점자 표시" width="211" />
+    </section>
   </div>
 </template>
 
@@ -33,71 +23,77 @@
         await driverStore.getRouteInfo();
         router.push({name: 'driverMainView'});
       }
-      function goToMainPage() {
-        router.push({name: 'mainView'});
-      }
       return {
         driverStore,
         goToDriverMainPage,
-        goToMainPage,
       };
     },
   };
 </script>
 
 <style lang="scss" scoped>
-  .container {
+  .code-container {
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    align-content: center;
-    height: 100vh;
-    width: 100vw;
-    header {
-      line-height: 4rem;
-      margin-bottom: 3rem;
-      h3 {
-        font-size: 3rem;
-        font-weight: bold;
+    padding: 1rem;
+    padding-top: 2rem;
+    background: $white;
+    border-radius: 1rem 1rem 0 0;
+    box-sizing: border-box;
+    width: 100%;
+    & > * {
+      height: 3rem;
+      font-size: 1.3rem;
+      box-sizing: border-box;
+      border: none;
+      outline: none;
+      font-weight: bold;
+    }
+    input {
+      border-bottom: 2px solid $gray;
+      margin-bottom: 1rem;
+      padding: 0 1rem;
+      text-align: start;
+      box-sizing: border-box;
+      &::placeholder {
+        color: $darkGray;
       }
-      h1 {
-        font-size: 3.5rem;
-        font-weight: bold;
+    }
+    button {
+      margin-top: 1rem;
+      background-color: $primary;
+      color: $secondary;
+      transition: 0.3s;
+      border-radius: 0.5rem;
+      &:disabled {
+        background-color: $gray;
+        color: $white;
+      }
+      &.gray-button {
+        margin-top: 1rem;
+        background-color: $gray;
+        color: $black;
       }
     }
-    main {
+    .logo {
       display: flex;
       flex-direction: column;
-      padding: 1rem;
-      & > * {
-        height: 3rem;
-        font-size: 1.3rem;
-        box-sizing: border-box;
-        text-align: center;
-        border-radius: 0.5rem;
-        border: none;
-        outline: none;
-        font-weight: bold;
+      align-items: center;
+      justify-content: center;
+      $logo-size: 6rem;
+      flex-grow: 1;
+      .image {
+        width: $logo-size;
+        height: $logo-size;
+        margin-bottom: 1rem;
       }
-      input {
-        background: $gray;
+      .name {
         margin-bottom: 1rem;
-        &::placeholder {
-          color: $darkGray;
-        }
       }
-      button {
-        background-color: $black;
-        color: $white;
-        transition: 0.3s;
-        &:disabled {
-          background-color: $gray;
-        }
-        &.gray-button {
-          margin-top: 1rem;
-          background-color: $gray;
-          color: $black;
-        }
+      .name,
+      .dot {
+        width: $logo-size;
+        height: var(2/5 * $logo-size);
       }
     }
   }