diff --git a/hwe/b_processing.php b/hwe/b_processing.php
index 2dfa0a81..2a9b6036 100644
--- a/hwe/b_processing.php
+++ b/hwe/b_processing.php
@@ -80,7 +80,6 @@ $cssList = $commandObj->getCSSFiles();
 <?=WebUtil::printJS('js/common.js')?>
 <?=WebUtil::printJS('../e_lib/select2/select2.full.min.js')?>
 <?=WebUtil::printJS('d_shared/base_map.js')?>
-<?=WebUtil::printJS('js/map.js')?>
 <?=WebUtil::printJS('js/processing.js')?>
 <script>
 window.serverNick = '<?=DB::prefix()?>';
diff --git a/hwe/ts/colorSelect.ts b/hwe/ts/colorSelect.ts
new file mode 100644
index 00000000..37b06433
--- /dev/null
+++ b/hwe/ts/colorSelect.ts
@@ -0,0 +1,16 @@
+import $ from 'jquery';
+
+$(function($){
+    function changeNationColorPlate(){
+        const $this = $('#colorType');
+        const $option = $this.find('option:selected');
+        $this.css({
+            'background-color':$option.css('background-color'),
+            'color':$option.css('color')
+        });
+    }
+    $('#colorType').change(function(){
+        changeNationColorPlate();
+    });
+    changeNationColorPlate();
+});
\ No newline at end of file
diff --git a/hwe/ts/defaultSelectCityByMap.ts b/hwe/ts/defaultSelectCityByMap.ts
new file mode 100644
index 00000000..9e548e04
--- /dev/null
+++ b/hwe/ts/defaultSelectCityByMap.ts
@@ -0,0 +1,23 @@
+import { reloadWorldMap } from "./map";
+import { unwrap_any } from "./util/unwrap_any";
+/*import $ from 'jquery';
+import 'select2';*///TODO: processing
+
+$(function() {
+    const $target = $("#destCityID");
+    console.log('target', $target);
+    void reloadWorldMap({
+        isDetailMap: false,
+        clickableAll: true,
+        neutralView: true,
+        useCachedMap: true,
+        selectCallback: function(city) {
+            const currVal = unwrap_any<string>($target.val());
+            $target.val(city.id).trigger("change");
+            if ($target.val() === null) {
+                $target.val(currVal).trigger("change");
+            }
+            return false;
+        }
+    });
+});
\ No newline at end of file
diff --git a/hwe/ts/defaultSelectNationByMap.ts b/hwe/ts/defaultSelectNationByMap.ts
new file mode 100644
index 00000000..dedef34e
--- /dev/null
+++ b/hwe/ts/defaultSelectNationByMap.ts
@@ -0,0 +1,25 @@
+import { reloadWorldMap } from "./map";
+import { unwrap_any } from "./util/unwrap_any";
+/*import $ from 'jquery';
+import 'select2';*///TODO: processing
+
+$(function() {
+    const $target = $("#destNationID");
+    void reloadWorldMap({
+        isDetailMap: false,
+        clickableAll: true,
+        neutralView: true,
+        useCachedMap: true,
+        selectCallback: (city)=>{
+            const currVal = unwrap_any<string>($target.val());
+            if(!city.nationID){
+                return false;
+            }
+            $target.val(city.nationID).trigger("change");
+            if ($target.val() === null) {
+                $target.val(currVal).trigger("change");
+            }
+            return false;
+        }
+    });
+});
\ No newline at end of file
diff --git a/hwe/ts/recruitCrewForm.ts b/hwe/ts/recruitCrewForm.ts
new file mode 100644
index 00000000..db0b0efc
--- /dev/null
+++ b/hwe/ts/recruitCrewForm.ts
@@ -0,0 +1,113 @@
+import $ from 'jquery';
+import { unwrap_any } from './util/unwrap_any';
+
+declare global {
+    interface Window {
+        calc: (id: number) => void;
+        submitAction: () => void;
+    }
+}
+
+declare const leadership: number;
+declare const fullLeadership: number;
+declare const currentCrewType: number;
+declare const currentCrew: number;
+declare const currentGold: number;
+declare const is모병 = false;
+window.calc = function (id) {
+    const $obj = $('#crewType{0}'.format(id));
+    const crew = parseInt(unwrap_any<string>($obj.find('.form_double').val()));
+    const baseCost = $obj.data('cost');
+    const $cost = $obj.find('.form_cost');
+
+    let cost = crew * baseCost;
+    if (is모병) {
+        cost *= 2;
+    }
+    $cost.val(Math.round(cost));
+}
+
+$(function () {
+
+
+    const $postForm = $('#post_form');
+    const $formAmount = $('#amount');
+    const $formCrewtype = $('#crewType');
+    $('.form_double').on('keyup change', function (e) {
+        const $this = $(this);
+        const $parent = $this.parents('.input_form');
+        const crewtype = parseInt($parent.data('crewtype'));
+        window.calc(crewtype);
+        $formCrewtype.val(crewtype);
+        $formAmount.val(parseFloat(unwrap_any<string>($this.val())) * 100);
+
+        if (e.which === 13) {
+            window.submitAction();
+        }
+        return false;
+    });
+
+    $('.btn_half').click(function () {
+        const $this = $(this);
+        const $parent = $this.closest('.input_form');
+        const crewtype = parseInt($parent.data('crewtype'));
+        const $input = $parent.find('.form_double:eq(0)');
+
+        const fillValue = Math.round(leadership / 2);
+        $formCrewtype.val(crewtype);
+        $input.val(fillValue).change();
+        return false;
+    });
+
+    $('.btn_fill').click(function () {
+        const $this = $(this);
+        const $parent = $this.closest('.input_form');
+        const crewtype = parseInt($parent.data('crewtype'));
+        const $input = $parent.find('.form_double:eq(0)');
+
+        let fillValue = Math.ceil((leadership * 100 - currentCrew) / 100);
+        if (crewtype != currentCrewType) {
+            fillValue = leadership;
+        }
+        $formCrewtype.val(crewtype);
+        $input.val(fillValue).change();
+        return false;
+    });
+
+    $('.btn_full').click(function () {
+        const $this = $(this);
+        const $parent = $this.closest('.input_form');
+        const crewtype = parseInt($parent.data('crewtype'));
+        const $input = $parent.find('.form_double:eq(0)');
+
+        const fillValue = fullLeadership + 15;
+        $formCrewtype.val(crewtype);
+        $input.val(fillValue).change();
+        return false;
+    });
+
+    $('.submit_btn').click(function () {
+        const $this = $(this);
+        const $parent = $this.closest('tr').find('.input_form');
+        const crewtype = parseInt($parent.data('crewtype'));
+        const $input = $parent.find('.form_double');
+
+        $formCrewtype.val(crewtype);
+        $formAmount.val(parseFloat(unwrap_any<string>($input.val())) * 100);
+
+        window.submitAction();
+    });
+
+    $('.btn_fill').click();
+
+    $('#show_unavailable_troops').change(function () {
+        const show = $('#show_unavailable_troops').is(":checked");
+        if (show) {
+            $('.show_default_false').show();
+        }
+        else {
+            $('.show_default_false').hide();
+        }
+    });
+    $('.show_default_false').hide();
+});
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 00c77a9c..ef3e457d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -17,6 +17,13 @@ module.exports = [
             install_db: './hwe/ts/install_db.ts',
             install: './hwe/ts/install.ts',
             battle_simulator: './hwe/ts/battle_simulator.ts',
+
+
+            //FORM 입력용, frontend 변경후 제거
+            defaultSelectCityByMap: './hwe/ts/defaultSelectCityByMap.ts',
+            defaultSelectNationByMap: './hwe/ts/defaultSelectNationByMap.ts',
+            colorSelect: './hwe/ts/colorSelect.ts',
+            recruitCrewForm: './hwe/ts/recruitCrewForm.ts'
         },
         output: {
             filename: '[name].js',