Vue 3 최종 미션: 풀스택 미니 대시보드

const{createApp,ref,computed,onMounted,onUnmounted,watch}=Vue;
createApp({
  setup(){
    const units=ref([{id:1,model:'T-800',threat:8,status:'ACTIVE'},{id:2,model:'T-1000',threat:10,status:'ACTIVE'},{id:3,model:'T-X',threat:9,status:'STANDBY'},{id:4,model:'T-600',threat:6,status:'OFFLINE'}]);
    const filter=ref('ALL');const time=ref(new Date().toLocaleTimeString());
    let timer;
    onMounted(()=>timer=setInterval(()=>time.value=new Date().toLocaleTimeString(),1000));
    onUnmounted(()=>clearInterval(timer));
    const filtered=computed(()=>filter.value==='ALL'?units.value:units.value.filter(u=>u.status===filter.value));
    const stats=computed(()=>({active:units.value.filter(u=>u.status==='ACTIVE').length,avgThreat:(units.value.reduce((s,u)=>s+u.threat,0)/units.value.length).toFixed(1),maxThreat:Math.max(...units.value.map(u=>u.threat))}));
    const toggleStatus=(id)=>{const u=units.value.find(u=>u.id===id);if(u)u.status=u.status==='ACTIVE'?'STANDBY':'ACTIVE';};
    return{units,filter,time,filtered,stats,toggleStatus};
  },
  template:`<div>
    <div style='display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;border-bottom:1px solid #1a1a1a;padding-bottom:8px;'>
      <span style='color:#10b981;font-size:9px;letter-spacing:0.2em;'>CYBERDYNE DASHBOARD</span>
      <span style='color:#555;font-size:10px;'>{{time}}</span>
    </div>
    <div style='display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px;'>
      <div style='background:#0a0a0a;padding:8px;text-align:center;'>
        <div style='color:#22c55e;font-size:16px;'>{{stats.active}}</div>
        <div style='color:#555;font-size:9px;'>ACTIVE</div>
      </div>
      <div style='background:#0a0a0a;padding:8px;text-align:center;'>
        <div style='color:#f59e0b;font-size:16px;'>{{stats.avgThreat}}</div>
        <div style='color:#555;font-size:9px;'>AVG THREAT</div>
      </div>
      <div style='background:#0a0a0a;padding:8px;text-align:center;'>
        <div style='color:#10b981;font-size:16px;'>{{stats.maxThreat}}</div>
        <div style='color:#555;font-size:9px;'>MAX THREAT</div>
      </div>
    </div>
    <div style='display:flex;gap:4px;margin-bottom:8px;'>
      <button v-for='f in ["ALL","ACTIVE","STANDBY","OFFLINE"]' :key='f' @click='filter=f' :style='{background:filter===f?"#10b981":"#1a1a1a",color:filter===f?"#080808":"#555"}' style='border:none;padding:3px 8px;cursor:pointer;font-size:9px;font-family:monospace;'>{{f}}</button>
    </div>
    <div v-for='u in filtered' :key='u.id' @click='toggleStatus(u.id)' style='display:flex;justify-content:space-between;padding:6px;margin-bottom:3px;cursor:pointer;font-size:11px;' :style='{background:u.status==="ACTIVE"?"rgba(255,34,34,0.05)":"#0a0a0a"}'>
      <span :style='{color:u.status==="ACTIVE"?"#f59e0b":"#555"}'>{{u.model}}</span>
      <span style='color:#888;'>{{u.threat}}</span>
      <span :style='{color:u.status==="ACTIVE"?"#22c55e":u.status==="STANDBY"?"#f59e0b":"#333"}' style='font-size:9px;'>{{u.status}}</span>
    </div>
  </div>`
}).mount('#dash-out');