[K5P-51] [feat] 모바일 화면 설정

src/assets/scss/common.scss

@@ -7,6 +7,7 @@ $base-shadow : 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
 
 $nav-bar-height : 60px;
 $side-bar-width : 150px;
+$mobile-header-height : 100px;
 
 @mixin flex-box($direction, $align, $gap) {
   display: flex;

src/stores/mobilePage.js

@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia'
+
+export const useMobileStore = defineStore('mobilePage', {
+  state() {
+    return {
+      pageName : ""
+    }
+  },
+  actions: {
+    setPageName(pageName) {
+      this.pageName = pageName;
+    }
+  },
+})

src/views/MobileView.vue

@@ -5,34 +5,60 @@
         class="logo-img"
         src="@/assets/images/name_white.png" 
         alt="logo">
+      <p class="page-name">{{ mobilePageStore.pageName }}</p>
     </header>
-    <RouterView/>
+    <div class="main-content">
+      <RouterView/>
+    </div>
   </div>
 </template>
 
 <script>
+import { useMobileStore } from '@/stores/mobilePage';
+import { mapActions, mapStores } from 'pinia';
+
 export default {
-  name: 'MobileView'
+  name: 'MobileView',
+  computed: {
+    ...mapStores(useMobileStore)
+  },
+  methods: {
+    ...mapActions(useMobileStore, ['setPageName'])
+  }
 }
 </script>
 
 <style lang="scss" scoped>
   .mobile-view {
     width: 100%;
     margin: auto;
-
+    position: relative;
     @media (min-width: 501px) {
       max-width: 500px;
     }
   }
 
   .logo-header {
-    @include flex-box(row, center, 0px);
+    @include flex-box(column, center, 10px);
     background-color: $theme-color;
+    position: absolute;
+    top:0;
     width: 100%;
-    padding: 10px;
+    height: $mobile-header-height;
     .logo-img {
       width: 200px
     }
+    .page-name {
+      color: white;
+      font-weight: bold;
+      font-size: 22px;
+      margin: 0px;
+    }
+  }
+
+  .main-content {
+    position: absolute;
+    top: $mobile-header-height;
+    width: 100%;
   }
 </style>

src/views/consent/ConsentItemView.vue

@@ -5,8 +5,20 @@
 </template>
 
 <script>
+import { useMobileStore } from '@/stores/mobilePage';
+import { mapActions, mapStores } from 'pinia';
+
 export default {
-    name: 'ConsentItemView'
+  name: 'ConsentItemView',
+  computed: {
+    ...mapStores(useMobileStore)
+  },
+  methods: {
+    ...mapActions(useMobileStore, ['setPageName'])
+  },
+  mounted() {
+    this.mobilePageStore.setPageName("상품 선택")
+  }
 }
 </script>
 

src/views/payment/PaymentStartView.vue

@@ -1,12 +1,23 @@
 <template>
   <div>
-    <h1>납부자 결제 시작</h1>
   </div>
 </template>
 
 <script>
+import { useMobileStore } from '@/stores/mobilePage';
+import { mapActions, mapStores } from 'pinia';
+
 export default {
-    name: 'PaymentStartView'
+  name: 'PaymentStartView',
+  computed: {
+    ...mapStores(useMobileStore)
+  },
+  methods: {
+    ...mapActions(useMobileStore, ['setPageName'])
+  },
+  mounted() {
+    this.mobilePageStore.setPageName("회원 결제")
+  }
 }
 </script>