diff --git a/hwe/ts/PageJoin.vue b/hwe/ts/PageJoin.vue
index c0fb5045..d8872226 100644
--- a/hwe/ts/PageJoin.vue
+++ b/hwe/ts/PageJoin.vue
@@ -1,7 +1,7 @@
 <template>
   <TopBackBar title="장수 생성" />
 
-  <div id="container" class="bg0">
+  <div v-if="gameConstStore && args" id="container" class="bg0">
     <div class="nation-list">
       <div class="nation-header nation-row bg1 center">
         <div>국가명</div>
@@ -176,8 +176,8 @@
             <div class="col col-6 align-self-center">
               <select v-model="args.inheritCity" class="form-select form-inline" style="max-width: 20ch">
                 <option :value="undefined">사용안함</option>
-                <option v-for="city in availableInheritCity" :key="city[0]" :value="city[0]">
-                  {{ `[${city[1]}] ${city[2]}` }}
+                <option v-for="city in availableInheritCity" :key="city.id" :value="city.id">
+                  {{ `[${city.region}] ${city.name}` }}
                 </option>
               </select>
             </div>
@@ -216,13 +216,13 @@
           <div class="a-center">추가 능력치 고정</div>
           <div class="row">
             <div class="col">
-              <NumberInputWithInfo v-model="(args.inheritBonusStat ?? [0, 0, 0])[0]" title="통솔" />
+              <NumberInputWithInfo v-model="(args.inheritBonusStat ?? [0, 0, 0])[0]" :max="stats.bonusMax" title="통솔" />
             </div>
             <div class="col">
-              <NumberInputWithInfo v-model="(args.inheritBonusStat ?? [0, 0, 0])[1]" title="무력" />
+              <NumberInputWithInfo v-model="(args.inheritBonusStat ?? [0, 0, 0])[1]" :max="stats.bonusMax" title="무력" />
             </div>
             <div class="col">
-              <NumberInputWithInfo v-model="(args.inheritBonusStat ?? [0, 0, 0])[2]" title="지력" />
+              <NumberInputWithInfo v-model="(args.inheritBonusStat ?? [0, 0, 0])[2]" :max="stats.bonusMax" title="지력" />
             </div>
           </div>
         </div>
@@ -238,220 +238,264 @@
   </div>
 </template>
 <script lang="ts">
+declare const staticValues: {
+  nationList: {
+    nation: number;
+    name: string;
+    color: string;
+    scout: number;
+    scoutmsg?: string;
+  }[];
+  turnterm: number;
+
+  member: {
+    name: string;
+    grade: number;
+    picture: string;
+    imgsvr: 0 | 1;
+  };
+
+  serverID: string;
+  inheritTotalPoint: number;
+};
+</script>
+<script lang="ts" setup>
 import "@scss/common/bootstrap5.scss";
 import "@scss/game_bg.scss";
 
-import { defineComponent } from "vue";
 import TopBackBar from "@/components/TopBackBar.vue";
 import { getIconPath } from "@util/getIconPath";
 import { isBrightColor } from "@util/isBrightColor";
 import { abilityLeadint, abilityLeadpow, abilityPowint, abilityRand } from "@util/generalStats";
-import { clone, shuffle, sum } from "lodash";
+import { shuffle, sum } from "lodash";
 import NumberInputWithInfo from "@/components/NumberInputWithInfo.vue";
 import { SammoAPI } from "./SammoAPI";
 import type { JoinArgs } from "./defs/API/General";
+import { GameConstStore, getGameConstStore } from "@/GameConstStore";
+import { computed, onMounted, ref, watch } from "vue";
+import type { CityID, GameIActionInfo } from "./defs/GameObj";
+import { unwrap } from "@/util/unwrap";
 
-declare const nationList: {
-  nation: number;
-  name: string;
-  color: string;
-  scout: number;
-  scoutmsg?: string;
-}[];
-declare const availablePersonality: {
-  [key: string]: {
-    name: string;
-    info: string;
-  };
-};
+const gameConstStore = ref<GameConstStore>();
 
-declare const availableInheritSpecial: {
-  [key: string]: {
-    name: string;
-    info: string;
-  };
-};
+const { serverID, member, turnterm } = staticValues;
 
-declare const availableInheritCity: [number, string, string][];
+const nationList = ref(shuffle(staticValues.nationList));
+const args = ref<JoinArgs>();
 
-declare const turnterm: number;
+const stats = ref({
+  min: 50,
+  max: 50,
+  total: 50,
+  bonusMin: 1,
+  bonusMax: 5,
+});
 
-declare const member: {
-  name: string;
-  grade: number;
-  picture: string;
-  imgsvr: 0 | 1;
-};
+const inheritTotalPoint = ref(staticValues.inheritTotalPoint);
+const availableInheritCity = ref<{ id: CityID; name: string; region: string }[]>([]);
+const availableInheritSpecial = ref<Record<string, GameIActionInfo>>({});
+const availablePersonality = ref<Record<string, GameIActionInfo>>({});
 
-declare const stats: {
-  min: number;
-  max: number;
-  total: number;
-  bonusMin: number;
-  bonusMax: number;
-};
-
-declare const inheritPoints: {
-  special: number;
-  turnTime: number;
-  city: number;
-  stat: number;
-};
-
-declare const serverID: string;
-declare const inheritTotalPoint: number;
-
-declare module "@vue/runtime-core" {
-  interface ComponentCustomProperties {
-    member: typeof member;
+watch(gameConstStore, (gameConst) => {
+  if (gameConst === undefined) {
+    console.error();
+    return;
   }
+
+  availableInheritCity.value = (() => {
+    const cityList: { id: CityID; name: string; region: string }[] = [];
+    for (const city of Object.values(gameConst.cityConst)) {
+      cityList.push({
+        id: city.id,
+        name: city.name,
+        region: gameConst.cityConstMap.region[city.region] as string,
+      });
+    }
+    cityList.sort((lhs, rhs) => {
+      const rC = lhs.region.localeCompare(rhs.region);
+      if (rC != 0) return rC;
+      return lhs.name.localeCompare(rhs.name);
+    });
+    return cityList;
+  })();
+
+  availableInheritSpecial.value = (() => {
+    const specialList: typeof availableInheritSpecial.value = {};
+    for (const specialWarID of Object.values(gameConst.gameConst.availableSpecialWar)) {
+      specialList[specialWarID] = unwrap(gameConst.iActionInfo.specialWar[specialWarID]);
+    }
+    return specialList;
+  })();
+
+  availablePersonality.value = (() => {
+    const personalityList: typeof availablePersonality.value = {};
+    for (const personalityID of Object.values(gameConst.gameConst.availablePersonality)) {
+      personalityList[personalityID] = unwrap(gameConst.iActionInfo.personality[personalityID]);
+    }
+    personalityList["Random"] = {
+      value: "Random",
+      name: "???",
+      info: "무작위 성격을 선택합니다.",
+    };
+    return personalityList;
+  })();
+
+  stats.value = {
+    min: gameConst.gameConst.defaultStatMin,
+    max: gameConst.gameConst.defaultStatMax,
+    total: gameConst.gameConst.defaultStatTotal,
+    bonusMin: gameConst.gameConst.defaultStatMin,
+    bonusMax: gameConst.gameConst.defaultStatMax,
+  }
+
+  args.value = {
+    name: member.name,
+    leadership: stats.value.total - 2 * Math.floor(stats.value.total / 3),
+    strength: Math.floor(stats.value.total / 3),
+    intel: Math.floor(stats.value.total / 3),
+    pic: true,
+    character: "Random",
+
+    inheritCity: undefined,
+    inheritBonusStat: [0, 0, 0],
+    inheritSpecial: undefined,
+    inheritTurntime: undefined,
+  };
+
+
+});
+
+onMounted(async () => {
+  gameConstStore.value = await getGameConstStore();
+});
+
+function randStatRandom() {
+  if (args.value === undefined) throw "nyc";
+  [args.value.leadership, args.value.strength, args.value.intel] = abilityRand(stats.value);
+}
+function randStatLeadPow() {
+  if (args.value === undefined) throw "nyc";
+  [args.value.leadership, args.value.strength, args.value.intel] = abilityLeadpow(stats.value);
+}
+function randStatLeadInt() {
+  if (args.value === undefined) throw "nyc";
+  [args.value.leadership, args.value.strength, args.value.intel] = abilityLeadint(stats.value);
+}
+function randStatPowInt() {
+  if (args.value === undefined) throw "nyc";
+  [args.value.leadership, args.value.strength, args.value.intel] = abilityPowint(stats.value);
+}
+function resetArgs() {
+  if (!args.value) throw "nyc";
+  const defaultStatTotal = stats.value.total;
+  args.value.name = member.name;
+  args.value.pic = true;
+  args.value.character = "Random";
+  args.value.leadership = defaultStatTotal - 2 * Math.floor(defaultStatTotal / 3);
+  args.value.strength = Math.floor(defaultStatTotal / 3);
+  args.value.intel = Math.floor(defaultStatTotal / 3);
 }
 
-export default defineComponent({
-  name: "PageJoin",
-  components: {
-    TopBackBar,
-    NumberInputWithInfo,
-  },
-  data() {
-    const displayTable = JSON.parse(localStorage.getItem(`conf.${serverID}.join.displayTable`) ?? "true");
-    const displayInherit = JSON.parse(localStorage.getItem(`conf.${serverID}.join.displayInherit`) ?? "true");
-    const nationListShuffled = shuffle(nationList);
-    const args: JoinArgs = {
-      name: member.name,
-      leadership: stats.total - 2 * Math.floor(stats.total / 3),
-      strength: Math.floor(stats.total / 3),
-      intel: Math.floor(stats.total / 3),
-      pic: true,
-      character: "Random",
+async function submitForm() {
+  if (!args.value) throw "nyc";
+  //검증은 언제 되어야 하는가?
+  const subbmitArgs = args.value;
+  const totalStat = subbmitArgs.leadership + subbmitArgs.strength + subbmitArgs.intel;
+  const defaultStatTotal = stats.value.total;
 
-      inheritCity: undefined,
-      inheritBonusStat: [0, 0, 0],
-      inheritSpecial: undefined,
-      inheritTurntime: undefined,
-    };
-    availableInheritCity.sort((lhs, rhs) => {
-      const rC = lhs[1].localeCompare(rhs[1]);
-      if (rC != 0) return rC;
-      return lhs[2].localeCompare(rhs[2]);
-    });
-    return {
-      displayTable,
-      displayInherit,
-      availablePersonality,
-      availableInheritSpecial,
-      availableInheritCity,
-      member: member,
-      stats,
-      args,
-      nationList: nationListShuffled,
-      isBrightColor,
-      inheritTotalPoint,
-      inheritTurnTimeSet: false,
-      inheritTurnTimeMinute: 0,
-      inheritTurnTimeSecond: 0,
-      turnterm,
-      toggleZoom: true,
-    };
-  },
-  computed: {
-    iconPath() {
-      if (this.args.pic) {
-        return getIconPath(this.member.imgsvr, this.member.picture);
-      }
-      return getIconPath(0, "default.jpg");
-    },
-    inheritRequiredPoint() {
-      let inheritRequiredPoint = 0;
-      if (this.args.inheritCity !== undefined) {
-        inheritRequiredPoint += inheritPoints.city;
-      }
-      if (this.args.inheritSpecial !== undefined) {
-        inheritRequiredPoint += inheritPoints.special;
-      }
-      if (this.args.inheritTurntime !== undefined) {
-        inheritRequiredPoint += inheritPoints.turnTime;
-      }
-      if (this.args.inheritBonusStat !== undefined && sum(this.args.inheritBonusStat) != 0) {
-        inheritRequiredPoint += inheritPoints.stat;
-      }
-      return inheritRequiredPoint;
-    },
-  },
-  watch: {
-    displayTable(newValue: boolean) {
-      localStorage.setItem(`conf.${serverID}.join.displayTable`, JSON.stringify(newValue));
-    },
-    displayInherit(newValue: boolean) {
-      localStorage.setItem(`conf.${serverID}.join.displayInherit`, JSON.stringify(newValue));
-    },
-    inheritTurnTimeMinute(newValue: number) {
-      if (!this.inheritTurnTimeSet) {
-        this.args.inheritTurntime = undefined;
-        return;
-      }
-      this.args.inheritTurntime = newValue * 60 + this.inheritTurnTimeSecond;
-    },
-    inheritTurnTimeSecond(newValue: number) {
-      if (!this.inheritTurnTimeSet) {
-        this.args.inheritTurntime = undefined;
-        return;
-      }
-      this.args.inheritTurntime = this.inheritTurnTimeMinute * 60 + newValue;
-    },
-    inheritTurnTimeSet(newValue: boolean) {
-      if (!newValue) {
-        this.args.inheritTurntime = undefined;
-        return;
-      }
-      this.args.inheritTurntime = this.inheritTurnTimeMinute * 60 + this.inheritTurnTimeSecond;
-    },
-  },
-  methods: {
-    randStatRandom() {
-      [this.args.leadership, this.args.strength, this.args.intel] = abilityRand();
-    },
-    randStatLeadPow() {
-      [this.args.leadership, this.args.strength, this.args.intel] = abilityLeadpow();
-    },
-    randStatLeadInt() {
-      [this.args.leadership, this.args.strength, this.args.intel] = abilityLeadint();
-    },
-    randStatPowInt() {
-      [this.args.leadership, this.args.strength, this.args.intel] = abilityPowint();
-    },
-    resetArgs() {
-      this.args.name = member.name;
-      this.args.pic = true;
-      this.args.character = "Random";
-      this.args.leadership = stats.total - 2 * Math.floor(stats.total / 3);
-      this.args.strength = Math.floor(stats.total / 3);
-      this.args.intel = Math.floor(stats.total / 3);
-    },
-    async submitForm() {
-      //검증은 언제 되어야 하는가?
-      const args = clone(this.args);
-      const totalStat = args.leadership + args.strength + args.intel;
+  if (totalStat < defaultStatTotal) {
+    if (
+      !confirm(
+        `설정한 능력치가 ${totalStat}으로, 실제 최대치인 ${defaultStatTotal}보다 적습니다.\r\n그래도 진행할까요?`
+      )
+    ) {
+      return false;
+    }
+  }
+  try {
+    await SammoAPI.General.Join(subbmitArgs);
+  } catch (e) {
+    console.error(e);
+    alert(`실패했습니다: ${e}`);
+    return;
+  }
 
-      if (totalStat < stats.total) {
-        if (
-          !confirm(`설정한 능력치가 ${totalStat}으로, 실제 최대치인 ${stats.total}보다 적습니다.\r\n그래도 진행할까요?`)
-        ) {
-          return false;
-        }
-      }
-      try {
-        await SammoAPI.General.Join(args);
-      } catch (e) {
-        console.error(e);
-        alert(`실패했습니다: ${e}`);
-        return;
-      }
+  alert("정상적으로 생성되었습니다. \n위키와 팁/강좌 게시판을 꼭 읽어보세요!");
+  location.href = "./";
+}
 
-      alert("정상적으로 생성되었습니다. \n위키와 팁/강좌 게시판을 꼭 읽어보세요!");
-      location.href = "./";
-    },
-  },
+const iconPath = computed(() => {
+  if (!args.value) throw "nyc";
+
+  if (args.value.pic) {
+    return getIconPath(member.imgsvr, member.picture);
+  }
+  return getIconPath(0, "default.jpg");
+});
+
+const inheritRequiredPoint = computed(() => {
+  if (!args.value || !gameConstStore.value) throw "nyc";
+
+  let inheritRequiredPoint = 0;
+  const gameConst = gameConstStore.value.gameConst;
+
+  if (args.value.inheritCity !== undefined) {
+    inheritRequiredPoint += gameConst.inheritBornCityPoint;
+  }
+  if (args.value.inheritSpecial !== undefined) {
+    inheritRequiredPoint += gameConst.inheritBornSpecialPoint;
+  }
+  if (args.value.inheritTurntime !== undefined) {
+    inheritRequiredPoint += gameConst.inheritBornTurntimePoint;
+  }
+  if (args.value.inheritBonusStat !== undefined && sum(args.value.inheritBonusStat) != 0) {
+    inheritRequiredPoint += gameConst.inheritBornStatPoint;
+  }
+  return inheritRequiredPoint;
+});
+
+const toggleZoom = ref(true);
+
+const displayTable = ref(JSON.parse(localStorage.getItem(`conf.${serverID}.join.displayTable`) ?? "true"));
+watch(displayTable, (newValue: boolean) => {
+  localStorage.setItem(`conf.${serverID}.join.displayTable`, JSON.stringify(newValue));
+});
+
+const displayInherit = ref(JSON.parse(localStorage.getItem(`conf.${serverID}.join.displayInherit`) ?? "true"));
+watch(displayInherit, (newValue: boolean) => {
+  localStorage.setItem(`conf.${serverID}.join.displayInherit`, JSON.stringify(newValue));
+});
+
+const inheritTurnTimeSet = ref(false);
+watch(inheritTurnTimeSet, (newValue: boolean) => {
+  if (!args.value) throw "nyc";
+
+  if (!newValue) {
+    args.value.inheritTurntime = undefined;
+    return;
+  }
+  args.value.inheritTurntime = inheritTurnTimeMinute.value * 60 + inheritTurnTimeSecond.value;
+});
+
+const inheritTurnTimeMinute = ref(0);
+watch(inheritTurnTimeMinute, (newValue: number) => {
+  if (!args.value) throw "nyc";
+  if (!inheritTurnTimeSet.value) {
+    args.value.inheritTurntime = undefined;
+    return;
+  }
+  args.value.inheritTurntime = newValue * 60 + inheritTurnTimeSecond.value;
+});
+
+const inheritTurnTimeSecond = ref(0);
+watch(inheritTurnTimeSecond, (newValue: number) => {
+  if (!args.value) throw "nyc";
+
+  if (!inheritTurnTimeSet.value) {
+    args.value.inheritTurntime = undefined;
+    return;
+  }
+  args.value.inheritTurntime = inheritTurnTimeMinute.value * 60 + newValue;
 });
 </script>
 <style lang="scss">
diff --git a/hwe/ts/util/generalStats.ts b/hwe/ts/util/generalStats.ts
index 31d08e54..1615b332 100644
--- a/hwe/ts/util/generalStats.ts
+++ b/hwe/ts/util/generalStats.ts
@@ -1,12 +1,6 @@
-declare const stats: {
-    min: number;
-    max: number;
-    total: number;
-    bonusMin: number;
-    bonusMax: number;
-  };
+interface Stats { min: number, max: number, total: number };
 
-export function abilityRand(): [number, number, number] {
+export function abilityRand(stats: Stats): [number, number, number] {
     let leadership = Math.random() * 65 + 10;
     let strength = Math.random() * 65 + 10;
     let intel = Math.random() * 65 + 10;
@@ -28,13 +22,13 @@ export function abilityRand(): [number, number, number] {
         strength < stats.min ||
         intel < stats.min
     ) {
-        return abilityRand();
+        return abilityRand(stats);
     }
 
     return [leadership, strength, intel];
 }
 
-export function abilityLeadpow(): [number, number, number] {
+export function abilityLeadpow(stats: Stats): [number, number, number] {
     let leadership = Math.random() * 6;
     let strength = Math.random() * 6;
     let intel = Math.random() * 1;
@@ -71,7 +65,7 @@ export function abilityLeadpow(): [number, number, number] {
     return [leadership, strength, intel];
 }
 
-export function abilityLeadint(): [number, number, number] {
+export function abilityLeadint(stats: Stats): [number, number, number] {
     let leadership = Math.random() * 6;
     let strength = Math.random() * 1;
     let intel = Math.random() * 6;
@@ -108,7 +102,7 @@ export function abilityLeadint(): [number, number, number] {
     return [leadership, strength, intel];
 }
 
-export function abilityPowint(): [number, number, number] {
+export function abilityPowint(stats: Stats): [number, number, number] {
     let leadership = Math.random() * 1;
     let strength = Math.random() * 6;
     let intel = Math.random() * 6;
diff --git a/hwe/v_join.php b/hwe/v_join.php
index 51e4759c..7d8db8cf 100644
--- a/hwe/v_join.php
+++ b/hwe/v_join.php
@@ -47,31 +47,6 @@ $scoutMsgs = KVStorage::getValuesFromInterNamespace($db, 'nation_env', 'scout_ms
 foreach ($scoutMsgs as $destNationID => $scoutMsg) {
     $nationList[$destNationID]['scoutmsg'] = $scoutMsg;
 }
-
-
-$availablePersonality = [];
-foreach (GameConst::$availablePersonality as $personalityID) {
-    $personalityObj = buildPersonalityClass($personalityID);
-    $availablePersonality[$personalityID] = [
-        'name' => $personalityObj->getName(),
-        'info' => $personalityObj->getInfo(),
-    ];
-}
-
-$availableInheritSpecial = [];
-foreach (GameConst::$availableSpecialWar as $specialID){
-    $specialObj = buildGeneralSpecialWarClass($specialID);
-    $availableInheritSpecial[$specialID] = [
-        'name' => $specialObj->getName(),
-        'info' => $specialObj->getInfo(),
-    ];
-}
-
-$availableInheritCity = [];
-foreach(CityConst::all() as $city){
-    $availableInheritCity[] = [$city->id, CityConst::$regionMap[$city->region], $city->name];
-}
-
 ?>
 <!DOCTYPE html>
 <html>
@@ -85,37 +60,21 @@ foreach(CityConst::all() as $city){
     <?= WebUtil::printDist('vue', 'v_join', true) ?>
 
     <?= WebUtil::printStaticValues([
-        'serverID' => UniqueConst::$serverID,
-        'nationList' => array_values($nationList),
-        'config' => [
-            'show_img_level' => $admin['show_img_level']
-        ],
-        'member' => [
-            'name' => $member['name'],
-            'grade' => $member['grade'],
-            'picture' => $member['picture'],
-            'imgsvr' => $member['imgsvr'],
-        ],
-        'availablePersonality' => array_merge([
-            'Random' => ['name' => '???', 'info' => '무작위 성격을 선택합니다.']
-        ], $availablePersonality),
-        'stats' => [
-            'min' => GameConst::$defaultStatMin,
-            'max' => GameConst::$defaultStatMax,
-            'total' => GameConst::$defaultStatTotal,
-            'bonusMin' => GameConst::$bornMinStatBonus,
-            'bonusMax' => GameConst::$bornMaxStatBonus,
-        ],
-        'inheritTotalPoint'=>$inheritTotalPoint,
-        'inheritPoints'=>[
-            'special'=>GameConst::$inheritBornSpecialPoint,
-            'turnTime'=>GameConst::$inheritBornTurntimePoint,
-            'city'=>GameConst::$inheritBornCityPoint,
-            'stat'=>GameConst::$inheritBornStatPoint
-        ],
-        'availableInheritSpecial' => $availableInheritSpecial,
-        'availableInheritCity'=> $availableInheritCity,
-        'turnterm'=>$gameStor->turnterm,
+        'staticValues'=>[
+            'serverID' => UniqueConst::$serverID,
+            'nationList' => array_values($nationList),
+            'config' => [
+                'show_img_level' => $admin['show_img_level']
+            ],
+            'member' => [
+                'name' => $member['name'],
+                'grade' => $member['grade'],
+                'picture' => $member['picture'],
+                'imgsvr' => $member['imgsvr'],
+            ],
+            'inheritTotalPoint'=>$inheritTotalPoint,
+            'turnterm'=>$gameStor->turnterm,
+        ]
     ]) ?>
 </head>