refac: 메인 페이지 바 표시 형식 변경

- 상 하단 분리 대신 하단의 position:fixed bar로 변경
- iPhone에서 좌우 스크롤이 유도되는 것은 완전 해결되지 않음
- 모든 컨텐츠가 viewport 밖을 넘어서지 않도록 않도록 해야 할 것으로
- 예: 500px viewport, 498px content

hwe/ts/PageFront.vue

@@ -1,8 +1,12 @@
 <template>
-  <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">
+  <BContainer
+    v-if="asyncReady"
+    id="container"
+    :position="'position-relative'"
+    :toast="{ root: true }"
+    :class="['bg0', nationColorClass]"
+  >
     <main class="gx-0">
       <div class="commonToolbar">
         <GlobalMenu
@@ -157,21 +161,20 @@
     </main>
   </BContainer>
   <div v-else>서버 갱신 중입니다.</div>
-    </div>
   <GameBottomBar
     v-if="frontInfo && globalMenu"
     id="mobileBottomBar"
+    :class="nationColorClass"
     :frontInfo="frontInfo"
     :globalMenu="globalMenu"
     @refresh="tryRefresh"
   />
   <BModal v-model="showVersionInfo" title="게임 정보">
-      {{ gameConstStore?.gameConst.title }}<br>
-      {{ gameConstStore?.version }}<br>
+    {{ gameConstStore?.gameConst.title }}<br />
+    {{ gameConstStore?.version }}<br />
     <!-- eslint-disable-next-line vue/no-v-html -->
     <span v-html="gameConstStore?.gameConst.banner"></span>
   </BModal>
-  </div>
 </template>
 <script lang="ts">
 declare const staticValues: {
@@ -231,10 +234,10 @@ const storeP = getGameConstStore().then((store) => {
 
 const menuCallList: Record<string, () => unknown> = {
   showVersion: () => {
-    console.log('version');
+    console.log("version");
     showVersionInfo.value = !showVersionInfo.value;
-  },
   }
+};
 
 function reqMenuCall(key: string) {
   if (!(key in menuCallList)) {
@@ -318,7 +321,7 @@ async function tryRefresh() {
       }
       toasts.danger({
         title: "갱신 실패",
-        body: response.reason,
+        body: response.reason
       });
       return;
     }
@@ -331,7 +334,7 @@ async function tryRefresh() {
     if (isString(e)) {
       toasts.danger({
         title: "에러",
-        body: e,
+        body: e
       });
     }
     console.error(e);
@@ -352,7 +355,7 @@ onMounted(async () => {
     if (isString(e)) {
       toasts.danger({
         title: "메뉴 갱신 실패",
-        body: `${e}`,
+        body: `${e}`
       });
     }
     console.error(e);
@@ -372,6 +375,15 @@ const generalRecords = ref(new Denque<[number, string]>());
 const globalRecords = ref(new Denque<[number, string]>());
 const worldHistory = ref(new Denque<[number, string]>());
 
+const nationColorClass = ref('sam-color-000000');
+watch(nationStaticInfo, (newNation)=>{
+  if(!newNation){
+    nationColorClass.value = 'sam-color-000000';
+    return;
+  }
+  nationColorClass.value = `sam-color-${newNation.color.substring(1, 7)}`;
+});
+
 let generalInfoLock = false;
 
 watch(refreshCounter, async () => {
@@ -382,7 +394,7 @@ watch(refreshCounter, async () => {
     generalInfoLock = true;
     const response = await SammoAPI.General.GetFrontInfo({
       lastGeneralRecordID: lastGeneralRecordID.value,
-      lastWorldHistoryID: lastWorldHistoryID.value,
+      lastWorldHistoryID: lastWorldHistoryID.value
     });
     generalInfoLock = false;
 
@@ -405,14 +417,14 @@ watch(refreshCounter, async () => {
       level: rawNation.level,
       capital: rawNation.capital,
       gennum: rawNation.gennum,
-      power: rawNation.power,
+      power: rawNation.power
     };
 
     const recentRecord = response.recentRecord;
     const recordIter = [
       ["flushGeneral", generalRecords, "general", lastGeneralRecordID],
       ["flushGlobal", globalRecords, "global", lastGeneralRecordID],
-      ["flushHistory", worldHistory, "history", lastWorldHistoryID],
+      ["flushHistory", worldHistory, "history", lastWorldHistoryID]
     ] as const;
 
     let haveNewRecord = false;
@@ -439,20 +451,19 @@ watch(refreshCounter, async () => {
       }
     }
     if (refreshCounter.value <= 1) {
-      console.log('초기화 완료');
-    }
-    else if (haveNewRecord) {
+      console.log("초기화 완료");
+    } else if (haveNewRecord) {
       toasts.info(
         {
           title: "갱신 완료",
-          body: `동향 변경이 있습니다.`,
+          body: `동향 변경이 있습니다.`
         },
         { delay: 100 * 15 }
       );
     } else {
       toasts.success(
         {
-          title: "갱신 완료",
+          title: "갱신 완료"
         },
         { delay: 100 * 5 }
       );
@@ -464,10 +475,10 @@ watch(refreshCounter, async () => {
       toasts.warning(
         {
           title: "설문조사 안내",
-          body: `새로운 설문조사가 있습니다.`,
+          body: `새로운 설문조사가 있습니다.`
         },
         {
-          delay: 1000 * 60,
+          delay: 1000 * 60
         }
       );
     }
@@ -476,7 +487,7 @@ watch(refreshCounter, async () => {
     console.error(e);
     toasts.danger({
       title: "최근 정보 갱신 실패",
-      body: `${e}`,
+      body: `${e}`
     });
   }
 });
@@ -506,13 +517,13 @@ watch(refreshCounter, async () => {
   try {
     map.value = await SammoAPI.Global.GetMap({
       neutralView: 0,
-      showMe: 1,
+      showMe: 1
     });
   } catch (e) {
     console.error(e);
     toasts.danger({
       title: "지도 갱신 실패",
-      body: `${e}`,
+      body: `${e}`
     });
   }
 });
@@ -525,6 +536,7 @@ watch(refreshCounter, async () => {
 </script>
 <style lang="scss" scoped>
 @import "@scss/common/break_500px.scss";
+
 :deep() {
   @import "@scss/gameEvent.scss";
   @import "@scss/battleLog.scss";
@@ -534,12 +546,6 @@ watch(refreshCounter, async () => {
   display: none;
 }
 
-#outBlock {
-  display: flex;
-  flex-flow: column;
-  justify-content: space-between;
-}
-
 .generalInfo {
   width: 500px;
 }
@@ -561,25 +567,18 @@ watch(refreshCounter, async () => {
 }
 
 @include media-500px {
-  #outBlock {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-
   #mobileBottomBar {
     display: block;
-    }
-  }
-
-  #outBlock2 {
-    flex-grow: 1;
-    overflow-y: scroll;
+    position: fixed;
+    z-index: 99;
+    bottom: 0;
+    width: 100%;
+    left: 0;
   }
 
   #container {
     width: 500px;
+    margin-bottom: 45px;
   }
 
   #ingameBoard {