diff --git a/hwe/index.php b/hwe/index.php
index 2c9d6728..f50bf567 100644
--- a/hwe/index.php
+++ b/hwe/index.php
@@ -99,15 +99,8 @@ $serverCnt = $gameStor->server_cnt;
 <meta name="viewport" content="width=1024" />
 <?=WebUtil::printJS('../d_shared/common_path.js')?>
 <?=WebUtil::printJS('dist_js/vendors.js')?>
-<?=WebUtil::printJS('dist_js/common.js')?>
-<?=WebUtil::printJS('../e_lib/jquery.redirect.js')?>
-<?=WebUtil::printJS('../e_lib/moment.min.js')?>
-<?=WebUtil::printJS('../e_lib/linkify/linkify.min.js')?>
-<?=WebUtil::printJS('../e_lib/linkify/linkify-string.min.js')?>
-<?=WebUtil::printJS('js/main.js')?>
 <?=WebUtil::printJS('d_shared/base_map.js')?>
-<?=WebUtil::printJS('dist_js/map.js')?>
-<?=WebUtil::printJS('dist_js/msg.js')?>
+<?=WebUtil::printJS('dist_js/main.js')?>
 <script>
 window.serverNick = '<?=DB::prefix()?>';
 window.serverID = '<?=UniqueConst::$serverID?>';
diff --git a/hwe/ts/common_legacy.ts b/hwe/ts/common_legacy.ts
index 88b78355..6a89fce3 100644
--- a/hwe/ts/common_legacy.ts
+++ b/hwe/ts/common_legacy.ts
@@ -91,10 +91,6 @@ declare global {
         linkifyStr: (v: string, k?: Record<string, string | number>) => string;
     }
 }
-export function linkifyStrWithOpt(text: string): string {
-    return window.linkifyStr(text, {});
-}
-
 export function getIconPath(imgsvr: boolean | 1 | 0, picture: string): string {
     // ../d_shared/common_path.js 필요
     if (!imgsvr) {
diff --git a/hwe/ts/main.ts b/hwe/ts/main.ts
new file mode 100644
index 00000000..f69806bd
--- /dev/null
+++ b/hwe/ts/main.ts
@@ -0,0 +1,197 @@
+import $ from 'jquery';
+import Popper from 'popper.js';
+(window as unknown as { Popper: unknown }).Popper = Popper;//XXX: 왜 popper를 이렇게 불러야 하는가?
+import 'bootstrap';
+import { parseTime } from './util/parseTime';
+import { addMilliseconds, addMinutes, differenceInMilliseconds } from 'date-fns';
+import { formatTime } from './util/formatTime';
+import { unwrap_any } from './util/unwrap_any';
+import { errUnknown } from './common_legacy';
+import { unwrap } from './util/unwrap';
+import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
+import './msg.ts';
+import './map.ts';
+import { exportWindow } from './util/exportWindow';
+import {stringifyUrl} from 'query-string';
+exportWindow($, '$');
+
+type TurnArg = {
+    //TODO: 채울것
+}
+
+type TurnItem = {
+    action: string,
+    brief: string,
+    arg: TurnArg,
+}
+
+type ReservedTurnResponse = {
+    result: true,
+    turnTime: string,
+    turnTerm: number,
+    year: number,
+    month: number,
+    date: string,
+    turn: TurnItem[],
+}
+
+$(function ($) {
+    setAxiosXMLHttpRequest();
+
+    $('#refreshPage').click(function () {
+        document.location.reload();
+        return false;
+    });
+
+
+    function reloadCommandList() {
+        void $.get({
+            url: 'j_get_reserved_command.php',
+            dataType: 'json',
+            cache: false,
+        }).then(function (data: ReservedTurnResponse) {
+            if (!data) {
+                return;
+            }
+            if (!data.result) {
+                return;
+            }
+            const game_clock = parseTime(data.date);
+            const now_clock = new Date();
+            const $clock = $('#clock');
+            $clock.data('time-diff', differenceInMilliseconds(game_clock, now_clock));
+            $clock.val(formatTime(game_clock));
+
+            const turnTime = parseTime(data.turnTime);
+            let nextTurnTime = new Date(turnTime);
+
+            let year = data.year;
+            let month = data.month;
+
+            for (const [turnIdx, turnInfo] of Object.entries(data.turn)) {
+                const $tr = $(`#command_${turnIdx}`);
+
+                $tr.find('.time_pad').text(formatTime(nextTurnTime, 'HH:mm'));
+                $tr.find('.month_pad').text(`${year}年 ${month}月`);
+                const $turn_pad = $tr.find('.turn_pad');
+                const $turn_text = $turn_pad.find('.turn_text');
+                $turn_text.text(turnInfo.brief).css('font-size', '13px');
+
+                const oWidth = unwrap($turn_pad.innerWidth());
+                const iWidth = unwrap($turn_text.outerWidth());
+                if (iWidth > oWidth * 0.95) {
+                    const newFontSize = 13 * oWidth / iWidth * 0.9;
+                    $turn_text.css('font-size', `${newFontSize}px`);
+                }
+
+                nextTurnTime = addMinutes(nextTurnTime, data.turnTerm);
+                month += 1;
+                if (month >= 13) {
+                    year += 1;
+                    month -= 12;
+                }
+            }
+            console.log(data);
+
+
+        });
+    }
+
+    function myclock() {
+
+        const $clock = $('#clock');
+        const now_clock = new Date();
+
+        const rawTimeDiff = $clock.data('time-diff');
+        if (rawTimeDiff === null || rawTimeDiff === undefined) {
+            return;
+        }
+        const timeDiff = unwrap_any<number>(rawTimeDiff);
+
+        const gameClock = addMilliseconds(now_clock, timeDiff);
+
+        $('#clock').val(formatTime(gameClock));
+    }
+
+    function pushTurn(pushAmount: number) {
+        $.post({
+            url: 'j_general_turn.php',
+            dataType: 'json',
+            data: {
+                amount: pushAmount
+            }
+        }).then(function (data) {
+            if (!data.result) {
+                alert(data.reason);
+            }
+            reloadCommandList();
+        }, errUnknown);
+    }
+
+    function repeatTurn(repeatAmount: number) {
+        $.post({
+            url: 'j_general_turn.php',
+            dataType: 'json',
+            data: {
+                amount: repeatAmount,
+                is_repeat: true
+            }
+        }).then(function (data) {
+            if (!data.result) {
+                alert(data.reason);
+            }
+            reloadCommandList();
+        }, errUnknown);
+    }
+
+    $('#pullTurn').click(function () {
+        pushTurn(-parseInt(unwrap_any<string>($('#repeatAmount').val())));
+    });
+
+    $('#pushTurn').click(function () {
+        pushTurn(parseInt(unwrap_any<string>($('#repeatAmount').val())));
+    });
+
+    $('#repeatTurn').click(function () {
+        repeatTurn(parseInt(unwrap_any<string>($('#repeatAmount').val())));
+    });
+
+
+    function reserveTurn(turnList: number[], command: string) {
+        console.log(turnList, command);
+        $.post({
+            url: 'j_set_general_command.php',
+            dataType: 'json',
+            data: {
+                action: command,
+                turnList: turnList
+            }
+        }).then(function (data) {
+            if (!data.result) {
+                alert(data.reason);
+            }
+            reloadCommandList();
+        }, errUnknown);
+    }
+
+    $('#reserveTurn').click(function () {
+        const turnList = unwrap_any<string[]>($('#generalTurnSelector').val()).map(v => parseInt(v));
+        const $command = $('#generalCommandList option:selected');
+        if ($command.data('reqarg')) {
+            document.location.href = stringifyUrl({
+                url: 'b_processing.php',
+                query: {
+                    command: unwrap_any<string>($command.val()),
+                    turnList: turnList.join('_')
+                }
+            });
+        }
+        else {
+            reserveTurn(turnList, unwrap_any<string>($command.val()));
+        }
+        return false;
+    })
+
+    setInterval(myclock, 500);
+    reloadCommandList();
+});
\ No newline at end of file
diff --git a/hwe/ts/map.ts b/hwe/ts/map.ts
index f330dc0b..8b0b4498 100644
--- a/hwe/ts/map.ts
+++ b/hwe/ts/map.ts
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import $ from 'jquery';
 import { extend, isNumber } from 'lodash';
-import { convColorValue, convertDictById, convertSet, stringFormat } from './common_legacy';
+import { convColorValue, convertDictById, stringFormat } from './common_legacy';
 import { InvalidResponse } from './defs';
 import { unwrap } from "./util/unwrap";
 import { convertFormData } from './util/convertFormData';
diff --git a/hwe/ts/util/TemplateEngine.ts b/hwe/ts/util/TemplateEngine.ts
index 15356ada..afffc849 100644
--- a/hwe/ts/util/TemplateEngine.ts
+++ b/hwe/ts/util/TemplateEngine.ts
@@ -1,6 +1,5 @@
 import { escapeHtml } from "../legacy/escapeHtml";
-import { linkifyStrWithOpt } from "../common_legacy";
-
+import linkifyStr from 'linkifyjs/string';
 /**
  * 단순한 Template 함수.  <%변수명%>으로 template 가능
  * @see  https://github.com/krasimir/absurd/blob/master/lib/processors/html/helpers/TemplateEngine.js
@@ -20,7 +19,7 @@ export function TemplateEngine(html: string, options: Record<string | number, un
         return add;
     };
     options.e = escapeHtml;
-    options.linkifyStr = linkifyStrWithOpt;
+    options.linkifyStr = linkifyStr;
     for (; ;) {
         const match = re.exec(html);
         if (!match) {
@@ -35,8 +34,8 @@ export function TemplateEngine(html: string, options: Record<string | number, un
     const compiledCode = code.join('').replace(/[\r\t\n]/g, ' ');
     try {
         return new Function('obj', compiledCode).apply(options, [options]);
-    } catch (err) {
-        console.error("'" + err.message + "'", " in \n\nCode:\n", code, "\n");
+    } catch (err: unknown) {
+        console.error(err, " in \n\nCode:\n", code, "\n");
         throw err;
     }
 }