diff --git a/hwe/ts/PageFront.vue b/hwe/ts/PageFront.vue
new file mode 100644
index 00000000..392d471f
--- /dev/null
+++ b/hwe/ts/PageFront.vue
@@ -0,0 +1,183 @@
+<template>
+  <div id="outBlock">
+    <div id="outBlock2">
+      <nav class="navbar navbar-expand navbar-dark bg-dark d-sm-block p-0">
+        <div class="container-fluid px-0">
+          <div class="collapse navbar-collapse">
+            <ul class="navbar-nav me-auto mx-auto">
+              <li class="nav-item">테스트</li>
+              <li class="nav-item">테스트</li>
+              <li class="nav-item">테스트</li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+      <!-- eslint-disable-next-line vue/max-attributes-per-line -->
+      <BContainer v-if="asyncReady" id="container" :position="'position-relative'" :toast="{ root: true }" class="bg0">
+        <main>
+          <div class="commonToolbar">툴바?</div>
+          <div class="gameInfo">시나리오</div>
+          <div class="gameInfo">토너먼트/설문</div>
+          <div class="gameInfo2">접속중인</div>
+          <div class="nationNotice">국방</div>
+          <div>접속자</div>
+          <!-- TODO: 운영자 툴바는 어디에?-->
+          <div class="mapView">지도</div>
+          <div class="reservedCommandZone">예턴</div>
+          <div class="cityInfo">도시 정보</div>
+          <div class="nationInfo">국가 정보</div>
+          <div class="generalInfo">장수 정보</div>
+          <div class="generalCommandToolbar">국가 툴바</div>
+          <div class="actionMiniPlate">갱신/로비 버튼</div>
+          <div class="PublicRecord">장수 동향</div>
+          <div class="GeneralLog">개인 기록</div>
+          <div class="WorldHistory">중원 정세</div>
+          <div class="commonToolbar">툴바?</div>
+          <div class="MessageInputForm">메시지 입력</div>
+          <div class="PublicTalk">전체 메시지</div>
+          <div class="NationalTalk">국가 메시지</div>
+          <div class="PrivateTalk">개인 메시지</div>
+          <div class="DiplomacyTalk">외교 메시지</div>
+          <div class="commonToolbar">툴바?</div>
+        </main>
+      </BContainer>
+      <div v-else>
+        서버 갱신 중입니다.
+      </div>
+    </div>
+    <nav id="mobileBottomBar">
+      <BButton>하단 바</BButton>
+      <BButton>하단 바2</BButton>
+    </nav>
+  </div>
+</template>
+<script lang="ts">
+declare const staticValues: {
+  serverName: string;
+  serverNick: string;
+  serverCnt: number;
+  serverID: string;
+  mapName: string;
+  unitSet: string;
+};
+</script>
+<script lang="ts" setup>
+import { BContainer, useToast } from "bootstrap-vue-3";
+import { isString } from "lodash";
+import { provide, ref } from "vue";
+import { GameConstStore, getGameConstStore } from "./GameConstStore";
+import { SammoAPI } from "./SammoAPI";
+import { parseTime } from "./util/parseTime";
+import { unwrap } from "./util/unwrap";
+
+const { serverName, serverNick, serverCnt, serverID } = staticValues;
+
+const asyncReady = ref(false);
+const gameConstStore = ref<GameConstStore>();
+
+const toasts = unwrap(useToast());
+
+provide("gameConstStore", gameConstStore);
+
+const lastExecuted = ref<Date>(parseTime("2022-08-15 00:00:00"));
+const serverLocked = ref(true);
+const refreshCounter = ref(0);
+
+
+const storeP = getGameConstStore().then((store) => {
+  gameConstStore.value = store;
+});
+
+async function tryRefresh() {
+  try {
+    const responseP = SammoAPI.Global.ExecuteEngine({ serverID }, true);
+    //TODO: 갱신 알림 띄우기
+    const response = await responseP;
+    if (!response.result) {
+      if(response.reqRefresh){
+        alert(`갱신이 필요합니다: ${response.reason}`);
+        window.location.reload();
+        return;
+      }
+
+      console.error(response.reason);
+      if (!asyncReady.value) {
+        throw response.reason;
+
+      }
+      toasts.danger({
+        title: '갱신 실패',
+        body: response.reason,
+      })
+      return;
+    }
+
+    lastExecuted.value = parseTime(response.lastExecuted);
+    serverLocked.value = response.locked;
+    refreshCounter.value += 1;
+
+    //TODO: 서버와 클라이언트 버전이 다르다면 갱신 필요
+  }
+  catch (e) {
+    //매우 심각한 버그
+    console.error(e);
+    alert(`서버 갱신 실패: ${e}`);
+    throw e;
+  }
+}
+
+void Promise.all([storeP, tryRefresh()]).then(() => {
+  asyncReady.value = true;
+});
+
+
+
+
+</script>
+<style lang="scss" scoped>
+@import "@scss/common/break_500px.scss";
+
+#mobileBottomBar {
+  display: none;
+}
+
+#outBlock {
+  display: flex;
+  flex-flow: column;
+  justify-content: space-between;
+}
+
+@include media-500px {
+  #outBlock {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    #mobileBottomBar {
+      display: block;
+    }
+  }
+
+  #outBlock2 {
+    flex-grow: 1;
+    overflow-y: scroll;
+  }
+
+  #container {
+    width: 500px;
+
+    >main>div {
+      min-height: 100px;
+      /* 테스트 */
+    }
+  }
+}
+
+@include media-1000px {
+  #container {
+    width: 1000px;
+  }
+}
+</style>
diff --git a/hwe/ts/SammoAPI.ts b/hwe/ts/SammoAPI.ts
index d13390e4..5e984e57 100644
--- a/hwe/ts/SammoAPI.ts
+++ b/hwe/ts/SammoAPI.ts
@@ -22,7 +22,7 @@ import type { SetBlockWarResponse, GeneralListResponse as NationGeneralListRespo
 import type { UploadImageResponse } from "./defs/API/Misc";
 import type { GeneralLogType, GetGeneralLogResponse, JoinArgs } from "./defs/API/General";
 import type {
-ExecuteResponse,
+  ExecuteResponse,
   GetConstResponse,
   GetCurrentHistoryResponse,
   GetDiplomacyResponse,
diff --git a/hwe/ts/build_exports.json b/hwe/ts/build_exports.json
index 555bbde0..3db70d2b 100644
--- a/hwe/ts/build_exports.json
+++ b/hwe/ts/build_exports.json
@@ -37,6 +37,7 @@
         "v_nationGeneral": "v_nationGeneral.ts",
         "v_globalDiplomacy": "v_globalDiplomacy",
         "v_troop": "v_troop.ts",
-        "v_vote": "v_vote.ts"
+        "v_vote": "v_vote.ts",
+        "v_front": "v_front.ts"
     }
 }
\ No newline at end of file
diff --git a/hwe/ts/defs/API/Global.ts b/hwe/ts/defs/API/Global.ts
index 7b51ea32..7eb9039d 100644
--- a/hwe/ts/defs/API/Global.ts
+++ b/hwe/ts/defs/API/Global.ts
@@ -83,7 +83,7 @@ export type ExecuteResponse = {
     updated: boolean;
     locked: boolean;
     lastExecuted: string;
-};
+}
 
 export type GetRecentRecordResponse = {
     result: true;
diff --git a/hwe/ts/v_front.ts b/hwe/ts/v_front.ts
new file mode 100644
index 00000000..26fff4d2
--- /dev/null
+++ b/hwe/ts/v_front.ts
@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import { BootstrapVue3, BToastPlugin } from 'bootstrap-vue-3'
+import { auto500px } from './util/auto500px';
+import { htmlReady } from './util/htmlReady';
+import { insertCustomCSS } from './util/customCSS';
+import PageFront from './PageFront.vue';
+auto500px();
+
+htmlReady(() => {
+  insertCustomCSS();
+});
+createApp(PageFront).use(BootstrapVue3).use(BToastPlugin).mount('#app');
diff --git a/hwe/v_front.php b/hwe/v_front.php
new file mode 100644
index 00000000..5d8ce371
--- /dev/null
+++ b/hwe/v_front.php
@@ -0,0 +1,56 @@
+<?php
+
+namespace sammo;
+
+include "lib.php";
+include "func.php";
+//로그인 검사
+$session = Session::requireGameLogin()->setReadOnly();
+$userID = Session::getUserID();
+
+//턴 실행 대기 및 갱신 증가는 API에서
+
+//TODO: 내 정보도 API에서, 사망 여부도
+
+//TODO: 설문 및 메시지 여부도 API에서
+
+//TODO: lock 정보도 API에서(턴실행대기에서 받아오기)
+
+//TODO: 국가정보 받아오기
+
+//TODO: 시나리오 정보는 gameConst 받아올때 가져오기
+
+$db = DB::db();
+$gameStor = KVStorage::getStorage($db, 'game_env');
+
+$generalID = $session->generalID;
+?>
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=500" />
+    <title><?= UniqueConst::$serverName ?>: 메인</title>
+    <?= WebUtil::printStaticValues([
+        'staticValues' => [
+          'serverName' => $serverName,
+          'serverCnt' => $serverCnt,
+          'serverNick' => DB::prefix(),
+          'serverID' => UniqueConst::$serverID,
+          'mapName' => GameConst::$mapName,
+          'unitSet' => GameConst::$unitSet,
+        ]
+    ], false) ?>
+    <?= WebUtil::printJS('../d_shared/common_path.js') ?>
+    <?= WebUtil::printCSS('../d_shared/common.css') ?>
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />
+    <?= WebUtil::printDist('vue', 'v_front', true) ?>
+</head>
+
+<body>
+    <div id="app"></div>
+</body>
+
+</html>
\ No newline at end of file