TypeScript로 커맨드 패턴 구현

<div style='font-family:monospace; padding:16px; background:#0d1117; color:#e8e8e8;'>
<div style='color:#10b981; margin-bottom:12px;'>COMMAND PATTERN</div>
<div id='cmd-state' style='font-size:13px; margin-bottom:8px; color:#10b981;'>UNITS: []</div>
<div id='cmd-history' style='font-size:10px; color:#555; margin-bottom:8px; min-height:30px;'></div>
<div style='display:flex; gap:6px; flex-wrap:wrap;'>
  <button onclick='executor.execute(new AddUnitCmd("T-800"))' style='background:#10b981; color:#080808; border:none; padding:5px 10px; cursor:pointer; font-family:monospace; font-size:9px;'>ADD T-800</button>
  <button onclick='executor.execute(new AddUnitCmd("T-1000"))' style='background:#f59e0b; color:#080808; border:none; padding:5px 10px; cursor:pointer; font-family:monospace; font-size:9px;'>ADD T-1000</button>
  <button onclick='executor.undo()' style='background:#333; color:#888; border:none; padding:5px 10px; cursor:pointer; font-family:monospace; font-size:9px;'>UNDO</button>
  <button onclick='executor.redo()' style='background:#1a1a1a; color:#555; border:none; padding:5px 10px; cursor:pointer; font-family:monospace; font-size:9px;'>REDO</button>
</div>
<script>
  let units = [];

  class AddUnitCmd {
    constructor(unit) { this.unit = unit; }
    execute() { units.push(this.unit); }
    undo() { units = units.filter(u => u !== this.unit); }
  }

  class CommandExecutor {
    constructor() { this._history = []; this._redoStack = []; }
    execute(cmd) {
      cmd.execute();
      this._history.push(cmd);
      this._redoStack = [];
      this._render(`[EXECUTE] ${cmd.unit || '?'} 추가`);
    }
    undo() {
      const cmd = this._history.pop();
      if (!cmd) return;
      cmd.undo();
      this._redoStack.push(cmd);
      this._render(`[UNDO] ${cmd.unit || '?'} 제거`);
    }
    redo() {
      const cmd = this._redoStack.pop();
      if (!cmd) return;
      cmd.execute();
      this._history.push(cmd);
      this._render(`[REDO] ${cmd.unit || '?'} 재추가`);
    }
    _render(msg) {
      document.getElementById('cmd-state').textContent = `UNITS: [${units.join(', ')}]`;
      const el = document.createElement('div');
      el.textContent = msg;
      document.getElementById('cmd-history').prepend(el);
    }
  }

  const executor = new CommandExecutor();
</script>
</div>