feat: PageFront에 모바일용 BottomBar 재구현

hwe/ts/PageFront.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="outBlock">
+  <div id="outBlock" :class="`sam-color-${nationStaticInfo?.color.substring(1, 7) ?? '000000'}`">
     <div id="outBlock2">
       <!-- eslint-disable-next-line vue/max-attributes-per-line -->
       <BContainer v-if="asyncReady" id="container" :position="'position-relative'" :toast="{ root: true }" class="bg0">
@@ -89,7 +89,7 @@
               <div class="col">
                 <div class="gx-1 row">
                   <div class="col-3 d-grid">
-                    <button type="button" class="btn btn-dark" @click="scrollHardTo('reservedCommandPanel')">
+                    <button type="button" class="btn btn-dark" @click="scrollToSelector('#reservedCommandPanel')">
                       명령으로
                     </button>
                   </div>
@@ -155,10 +155,12 @@
       </BContainer>
       <div v-else>서버 갱신 중입니다.</div>
     </div>
-    <nav id="mobileBottomBar">
-      <BButton>하단 바</BButton>
-      <BButton>하단 바2</BButton>
-    </nav>
+    <GameBottomBar
+      v-if="frontInfo && globalMenu"
+      id="mobileBottomBar"
+      :frontInfo="frontInfo"
+      :globalMenu="globalMenu"
+    />
   </div>
 </template>
 <script lang="ts">
@@ -192,11 +194,11 @@ import MessagePanel from "./components/MessagePanel.vue";
 import type { MapResult, NationStaticItem } from "./defs";
 import MapViewer, { type CityPositionMap, type MapCityParsed, type MapCityParsedRaw } from "./components/MapViewer.vue";
 import PartialReservedCommand from "./PartialReservedCommand.vue";
-import { scrollHardTo } from "./util/scrollHardTo";
+import { scrollToSelector } from "./util/scrollToSelector";
 import MainControlBar from "./components/MainControlBar.vue";
 import GlobalMenu from "./components/GlobalMenu.vue";
 import GameInfo from "./components/GameInfo.vue";
-import { formatDate } from "@vueuse/shared";
+import GameBottomBar from "./components/GameBottomBar.vue";
 
 const { serverName, serverNick, serverID } = staticValues;
 
@@ -325,7 +327,6 @@ const generalRecords = ref(new Denque<[number, string]>());
 const globalRecords = ref(new Denque<[number, string]>());
 const worldHistory = ref(new Denque<[number, string]>());
 
-
 let generalInfoLock = false;
 
 watch(refreshCounter, async () => {
@@ -364,14 +365,14 @@ watch(refreshCounter, async () => {
 
     const recentRecord = response.recentRecord;
     const recordIter = [
-      ['flushGeneral', generalRecords, 'general', lastGeneralRecordID],
-      ['flushGlobal', globalRecords, 'global', lastGeneralRecordID],
-      ['flushHistory', worldHistory, 'history', lastWorldHistoryID],
+      ["flushGeneral", generalRecords, "general", lastGeneralRecordID],
+      ["flushGlobal", globalRecords, "global", lastGeneralRecordID],
+      ["flushHistory", worldHistory, "history", lastWorldHistoryID],
     ] as const;
 
     let haveNewRecord = false;
 
-    for(const [flushKey, recordRef, recordKey, lastRecordID] of recordIter) {
+    for (const [flushKey, recordRef, recordKey, lastRecordID] of recordIter) {
       if (recentRecord[flushKey]) {
         recordRef.value = new Denque<[number, string]>();
         haveNewRecord = true;
@@ -381,26 +382,25 @@ watch(refreshCounter, async () => {
         lastRecordID.value = Math.max(lastRecordID.value, subRecord[0][0]);
         haveNewRecord = true;
       }
-      while(subRecord.length){
+      while (subRecord.length) {
         const [id, record] = unwrap(subRecord.pop());
-        if(!recordRef.value.isEmpty() && id <= unwrap(recordRef.value.get(0))[0]){
+        if (!recordRef.value.isEmpty() && id <= unwrap(recordRef.value.get(0))[0]) {
           continue;
         }
-        if(recordRef.value.length >= 15){
+        if (recordRef.value.length >= 15) {
           recordRef.value.pop();
         }
         recordRef.value.unshift([id, formatLog(record)]);
       }
     }
-    if(haveNewRecord){
+    if (haveNewRecord) {
       toasts.info({
-        title: '갱신 완료',
+        title: "갱신 완료",
         body: `동향 변경이 있습니다.`,
       });
-    }
-    else{
+    } else {
       toasts.success({
-        title: '갱신 완료',
+        title: "갱신 완료",
       });
     }
   } catch (e) {
@@ -456,7 +456,7 @@ watch(refreshCounter, async () => {
 </script>
 <style lang="scss" scoped>
 @import "@scss/common/break_500px.scss";
-:deep(){
+:deep() {
   @import "@scss/gameEvent.scss";
 }