From 0115b51b944a158312786e6235ef8fe44b9d572c Mon Sep 17 00:00:00 2001
From: leecr1215 <leecr1215@naver.com>
Date: Fri, 9 Jun 2023 13:43:56 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20main=20view=20UI=20=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/passenger/MainView.vue | 19 ++++++++-----------
 src/views/splashView.vue         | 18 ++++++++++++++++--
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/views/passenger/MainView.vue b/src/views/passenger/MainView.vue
index a58ae5f..8cbea02 100644
--- a/src/views/passenger/MainView.vue
+++ b/src/views/passenger/MainView.vue
@@ -3,7 +3,6 @@
     <button class="btn" @click="goSearchView">버스 노선 검색</button>
     <button class="btn" @click="goFavoriteStopView">승차벨 사용 이력</button>
     <button class="btn" @click="goNearStopView">가까운 정류장</button>
-    <button class="btn" @click="goBusDriverPageView">버스 기사 페이지</button>
   </div>
 </template>
 
@@ -28,16 +27,10 @@
         router.push('/nearStop');
       };
 
-      // 버스 기사 페이지로 이동
-      const goBusDriverPageView = () => {
-        router.push({name: 'driverCodeView'});
-      };
-
       return {
         goSearchView,
         goFavoriteStopView,
         goNearStopView,
-        goBusDriverPageView,
       };
     },
   };
@@ -50,17 +43,21 @@
     height: 100vh;
     justify-content: center;
     font-family: 'KoddiUDOnGothic-Regular';
+    padding: 0px 16px;
 
     .btn {
-      height: 186px;
-      background-color: $primary;
-      color: $secondary;
+      height: 140px;
+      width: 100%;
+      border-radius: 20px;
+      border: none;
+      background-color: $secondary;
+      color: $black;
       font-size: 30px;
       font-weight: 700;
       line-height: 22px;
       text-align: center;
       letter-spacing: -0.408px;
-      margin-bottom: 6px;
+      margin-bottom: 32px;
     }
   }
 </style>
diff --git a/src/views/splashView.vue b/src/views/splashView.vue
index 23c7168..9851d0e 100644
--- a/src/views/splashView.vue
+++ b/src/views/splashView.vue
@@ -5,8 +5,8 @@
     <div v-if="!isLoading" class="container">
       <img src="@/assets/img/beodomiText.png" alt="버도미" width="120" />
 
-      <button class="passenger">승객</button>
-      <button class="driver">버스 기사</button>
+      <button class="passenger" @click="passenger">승객</button>
+      <button class="driver" @click="driver">버스 기사</button>
     </div>
   </div>
 </template>
@@ -14,6 +14,7 @@
 <script>
   import SplashComp from '@/components/SplashComp.vue';
   import {onMounted, ref} from 'vue';
+  import {useRouter} from 'vue-router';
 
   export default {
     name: 'splashView',
@@ -21,6 +22,7 @@
       SplashComp,
     },
     setup() {
+      const router = useRouter();
       const isLoading = ref(true);
 
       onMounted(() => {
@@ -29,8 +31,20 @@
         }, 1000);
       });
 
+      // 승객 버튼 클릭 이벤트
+      const passenger = () => {
+        router.push('/main');
+      };
+
+      // 버스기사 버튼 클릭 이벤트
+      const driver = () => {
+        router.push('/driver/code');
+      };
+
       return {
         isLoading,
+        passenger,
+        driver,
       };
     },
   };

From 3cda13ef089f33fe97cff266158e819d416f80ef Mon Sep 17 00:00:00 2001
From: leecr1215 <leecr1215@naver.com>
Date: Fri, 9 Jun 2023 15:11:05 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EB=B2=84=EB=8F=84=EB=AF=B8=20nav?=
 =?UTF-8?q?=20=EC=99=84=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                       |   2 +-
 src/assets/img/beodomiLogoText.png | Bin 0 -> 862 bytes
 src/assets/img/wholeTextIcon.png   | Bin 0 -> 646 bytes
 src/assets/scss/_variables.scss    |   2 +-
 src/components/NavComp.vue         |  66 +++++++++++++++++++++++++++++
 src/store/passsengerStore.js       |   5 +--
 src/views/passenger/MainView.vue   |  24 ++++++++---
 7 files changed, 86 insertions(+), 13 deletions(-)
 create mode 100644 src/assets/img/beodomiLogoText.png
 create mode 100644 src/assets/img/wholeTextIcon.png
 create mode 100644 src/components/NavComp.vue

diff --git a/package.json b/package.json
index b5fc75a..8a31dfd 100644
--- 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 --host 0.0.0.0 --port 3000",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
diff --git a/src/assets/img/beodomiLogoText.png b/src/assets/img/beodomiLogoText.png
new file mode 100644
index 0000000000000000000000000000000000000000..6878a2c0788c757bf6238b4282c071b04de2aea2
GIT binary patch
literal 862
zcmV-k1EKthP)<h;3K|Lk000e1NJLTq003D4000;W1^@s6kq=R300009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0`o~kK~#7F?V0Uy
z;xG_~mkj^o4p1sMItU#cR{>51+*JTn091glf+Q8-RB&7ckP41epxZZICC1T*?Kt2c
zer7b9NV`H_t+XqJsN*tdts^coF2jIa3|Z>%(l0i!(MDWtxF{|!Ty{1^SpdjkG46W3
zUP=|gB5^h0@|*P&OTU>%%>B>Ow&LnLmtWlWV9}X!HKyvUi{tTFimRE-!N-wxe~1o#
zd&%XI+kTQ|f)jnpAJ?cbKtXmw6=9vZ=*}Jed+8tK+7fAt9XfT1En|&J>h5zov9xVW
zTR+!{6-WxdGZbNX%`qp7)r||X`1t2K9{ok!P&JO8zLd+IrCo8^Qh-+@>ug&r9WpT&
ztmsZAg2iy1!}lzAlV6Za!E-oJgV@I7Z>2IAPY#_sio)j-fbnq-&8g#!E1hKrF*V0j
zcNxbCS5z+&`-p0cIh7!HQmEYSX+1bDhSWT_^f8F~h{%1;gG1T#uZ_US->7*MRb#<{
zWnOH|d9w++W^6?Pbe8W|;m~xjG?>7*Bgdtq2G|*jnq{23j3gz;52jWH7W72{+Zg%D
zdON9s&Mp?WbU6~LM^jGr0T>w`a-DCK>>vtlALQ2-85}<^bRl>?wo8L~2Ecdi&Yj02
zyTA$-vjJSE5#gQQ&3#Le*%!L-F)6i=d&-WGYdSM9a>6AtfkJM7O8R~85oTeOmbV4*
z7U(`u#~XcY9X3u%*{v_d_UFIXB(Gy0-L>dEnxMo?%@|aTfg>Ae%cUlA%ui8S;DPdT
zR6F?PUY|<m-TM6%E=2GZPG>J>drvX=WLB0j%doZB;q(=bJ#WX2NMUAN!xJk-TAdjd
zXY`_?E@YE{%u{ZsgixQ9DW2B{DwnOSsVw3p|8xb9X4$dmBy<LJ;63@$*gV-LWVY}|
zdu~m#m9`?gqBEhhe~ls7w(=3mHou-j&}{z^Wm^W@`mb~kq+L;#sx4adP~S>=zD_YV
oQZ-yK%*r5<hr!d%xE-zGKhlKc*>dgVq5uE@07*qoM6N<$f-tX!-v9sr

literal 0
HcmV?d00001

diff --git a/src/assets/img/wholeTextIcon.png b/src/assets/img/wholeTextIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..6304a68f3aa633d035d24ec1af50a656d14b51b8
GIT binary patch
literal 646
zcmV;10(t$3P)<h;3K|Lk000e1NJLTq000;O000yS1^@s6m$m(a00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0vkz0K~#7FtyN8K
z(@+qed9j2_ka!|CVu!nE<91UYq1~}-a)O2vG@O8Pf^vi82<Z*N30hXT$;RwT6Cxv_
zwut5pGyVwy|42}Ol9QS7y!mG4&3gu@5zoEtxALsp5Nd+mZub%4RAd4?m<PdFWCb<B
zLL3o7Br*aGwCie-8)XX|&+9eq)@ifV>OZmVSC5@%8#nXCMb2+)%fDGHuD;LbQPXz5
zu&Kk3ZdmG4{0l2^cG_Gj4OrX<M4vO`MQZSOe;sf82pa0#_Pl-3f8O1#s$l=4__ru?
zZeqWPn0tGY1&ejW_i0OF;wTIwBszn{=ob<Y(IHd-Y1#QLr@^>Vy|ei;Ndm$&8!fgR
z0Z)R4N(OwoN+t_dfr34t&s7V!Eg#pEy_I}R-_rMb-Ii|=s3DXiv<OF;f@z<*lCktZ
z&X^z}<;@mbjzA6wZ|1uku}p_*bgzOS%xn!lP%$asYtgmmxge7#@eO=PcuMeso$rx4
zyy<($ZMnbwG0d`Dha9NP&J)O^O}(T#>Rx}EjB2|ooZVd?%<?={!&z{-DS}nDKzpuh
zf#oVg+9-^0iP3C2y{IC|4jJ#$L1tT3Af;Lxk9tUO$c{e$>!JY4z?jgS&4TH$s0w3@
z|1}7Pe-QB1aLki%QWUfTAsTvfJ(-NEoKWr;xdPxn!6e-(5@itk@Bom)<Er=SAKOv{
gx9VkWADlA$0)~>!m2s?Gp8x;=07*qoM6N<$f^i=qVE_OC

literal 0
HcmV?d00001

diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index d4cf538..f59b27b 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -1,4 +1,4 @@
-$primary: #082220;
+$primary: #152827;
 $secondary: #ffdb1d;
 $lightGray: #f3f3f3;
 $gray: #d9d9d9;
diff --git a/src/components/NavComp.vue b/src/components/NavComp.vue
new file mode 100644
index 0000000..d62c631
--- /dev/null
+++ b/src/components/NavComp.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="nav">
+    <div class="wholeText" ref="htmlElement"></div>
+    <img class="beodomi" src="@/assets/img/beodomiLogoText.png" alt="버도미 로고와 텍스트" width="89" />
+    <img @click="readWholeText" class="wholeBtn" src="@/assets/img/wholeTextIcon.png" alt="전체 읽어주는 버튼" height="20" />
+  </div>
+</template>
+
+<script>
+  import {ref} from 'vue';
+  export default {
+    name: 'NavComp',
+    props: {
+      content: {
+        type: String,
+        default: '',
+      },
+    },
+    setup(props) {
+      const htmlElement = ref(null);
+
+      // 전체 읽어주는 버튼 클릭 이벤트
+      const readWholeText = async () => {
+        console.log(props.content);
+        htmlElement.value.setAttribute('aria-live', 'assertive');
+        htmlElement.value.innerText = props.content;
+
+        setTimeout(function () {
+          htmlElement.value.removeAttribute('aria-live');
+          htmlElement.value.innerText = '';
+        }, 1);
+      };
+
+      return {
+        htmlElement,
+        readWholeText,
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .nav {
+    height: 60px;
+    position: relative;
+    border-bottom: 2px solid #565656;
+
+    .beodomi {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .wholeBtn {
+      position: absolute;
+      top: 50%;
+      right: 18px;
+      transform: translate(-50%, -18px);
+      background-color: $secondary;
+      border-radius: 5px;
+      border: none;
+      padding: 6px 12px;
+    }
+  }
+</style>
diff --git a/src/store/passsengerStore.js b/src/store/passsengerStore.js
index 862b28f..ca28b62 100644
--- a/src/store/passsengerStore.js
+++ b/src/store/passsengerStore.js
@@ -11,12 +11,9 @@ export const usePassengerStore = defineStore('passenger', () => {
    */
   function announcePageContent(content, htmlElement) {
     htmlElement.setAttribute('aria-live', 'assertive');
-    htmlElement.innerText = content;
-    console.log(content);
 
     setTimeout(function () {
-      htmlElement.removeAttribute(htmlElement);
-      htmlElement.innerText('');
+      htmlElement.removeAttribute('aria-live');
     }, 100);
   }
   return {
diff --git a/src/views/passenger/MainView.vue b/src/views/passenger/MainView.vue
index 8cbea02..b5c6154 100644
--- a/src/views/passenger/MainView.vue
+++ b/src/views/passenger/MainView.vue
@@ -1,17 +1,26 @@
 <template>
-  <div class="main">
-    <button class="btn" @click="goSearchView">버스 노선 검색</button>
-    <button class="btn" @click="goFavoriteStopView">승차벨 사용 이력</button>
-    <button class="btn" @click="goNearStopView">가까운 정류장</button>
+  <div>
+    <NavComp :content="wholeText" />
+
+    <div class="main">
+      <button class="btn" @click="goSearchView">버스 노선 검색</button>
+      <button class="btn" @click="goFavoriteStopView">승차벨 사용 이력</button>
+      <button class="btn" @click="goNearStopView">가까운 정류장</button>
+    </div>
   </div>
 </template>
 
 <script>
   import router from '@/router/index';
-
+  import NavComp from '@/components/NavComp.vue';
   export default {
     name: 'MainView',
+
+    components: {NavComp},
     setup() {
+      // 읽어줄 전체 텍스트
+      const wholeText = '버스 노선 검색 버튼   승차벨 사용 이력 버튼   가까운 정류장 버튼';
+
       // 버스 노선 검색 페이지로 이동
       const goSearchView = () => {
         router.push('/search');
@@ -28,6 +37,7 @@
       };
 
       return {
+        wholeText,
         goSearchView,
         goFavoriteStopView,
         goNearStopView,
@@ -40,7 +50,7 @@
   .main {
     display: flex;
     flex-direction: column;
-    height: 100vh;
+    height: calc(100vh - 70px);
     justify-content: center;
     font-family: 'KoddiUDOnGothic-Regular';
     padding: 0px 16px;
@@ -52,7 +62,7 @@
       border: none;
       background-color: $secondary;
       color: $black;
-      font-size: 30px;
+      font-size: 36px;
       font-weight: 700;
       line-height: 22px;
       text-align: center;