JS 최종 미션 — 완전 해체

<div style='font-family:monospace; padding:16px; background:#0d1117; color:#e8e8e8;'>
  <div style='display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;'>
    <span style='color:#10b981; font-weight:bold;'>TERMINATOR UNIT TRACKER</span>
    <span id='total-threat' style='color:#888; font-size:11px;'>TOTAL THREAT: 0</span>
  </div>
  <div id='unit-list' style='margin-bottom:12px;'></div>
  <div style='display:flex; gap:8px;'>
    <input id='unit-input' placeholder='유닛명 입력...' style='flex:1; padding:8px; background:#1a1a1a; color:#e8e8e8; border:1px solid #333; font-family:monospace;'/>
    <button onclick='addUnit()' style='padding:8px 16px; background:#10b981; color:#080808; border:none; cursor:pointer; font-family:monospace; font-weight:bold;'>ADD</button>
  </div>
</div>
<script>
  const createUnitManager = () => {
    let units = [
      { name: 'T-800', threat: 8, active: true },
      { name: 'T-1000', threat: 10, active: true },
    ];

    const render = () => {
      const list = document.getElementById('unit-list');
      const totalEl = document.getElementById('total-threat');
      const total = units.filter(u=>u.active).reduce((s,u)=>s+u.threat,0);
      totalEl.textContent = 'TOTAL THREAT: ' + total;
      list.innerHTML = units.map((u, i) =>
        '<div style="display:flex;justify-content:space-between;align-items:center;padding:6px 8px;margin-bottom:4px;background:' + (u.active?'#1a0000':'#0a0a0a') + ';border:1px solid ' + (u.active?'#10b98144':'#1a1a1a') + ';">' +
        '<span style="color:' + (u.active?'#10b981':'#333') + ';">' + u.name + '</span>' +
        '<span style="color:#555;font-size:11px;">THREAT:' + u.threat + '</span>' +
        '<button onclick="manager.toggle(' + i + ')" style="padding:2px 8px;background:transparent;border:1px solid #333;color:#555;cursor:pointer;font-family:monospace;font-size:10px;">' + (u.active?'DEACTIVATE':'ACTIVATE') + '</button>' +
        '</div>'
      ).join('');
    };

    return {
      add: (name) => {
        units.push({ name, threat: Math.floor(Math.random()*5)+5, active: true });
        render();
      },
      toggle: (i) => { units[i].active = !units[i].active; render(); },
    };
  };

  const manager = createUnitManager();
  manager.add = manager.add;

  function addUnit() {
    const input = document.getElementById('unit-input');
    if (input.value.trim()) {
      manager.add(input.value.trim());
      input.value = '';
    }
  }

  document.getElementById('unit-input').addEventListener('keydown', e => {
    if (e.key === 'Enter') addUnit();
  });

  const manager2 = createUnitManager();
  document.getElementById('unit-list') && manager2.add('');
  const m = createUnitManager();
  m.toggle(0);
  const mgr = createUnitManager();
  mgr.add('T-X');
  setTimeout(() => {
    document.getElementById('total-threat') && mgr.toggle(0);
  }, 100);
</script>