Vue 3 실전: 탭 컴포넌트

const{createApp,ref,shallowRef}=Vue;
const Overview={template:`<div style='font-size:11px;color:#888;'><div style='color:#f59e0b;margin-bottom:8px;'>OVERVIEW</div>CYBERDYNE SYSTEMS — 총 3개 유닛 활성. 평균 위협도 9.0. 최고 위협: T-1000.</div>`};
const Details={template:`<div style='font-size:11px;'><div style='color:#f59e0b;margin-bottom:8px;'>DETAILS</div><div v-for='u in [{model:"T-800",threat:8},{model:"T-1000",threat:10},{model:"T-X",threat:9}]' :key='u.model' style='display:flex;justify-content:space-between;padding:4px 0;color:#888;border-bottom:1px solid #111;'>{{u.model}}<span>{{u.threat}}</span></div></div>`};
const Logs={template:`<div style='font-size:10px;color:#555;'><div style='color:#f59e0b;font-size:11px;margin-bottom:8px;'>LOGS</div><div v-for='l in ["[00:01] T-800 배치","[00:02] T-1000 감지","[00:03] T-X 활성화"]' style='margin-bottom:4px;'>{{l}}</div></div>`};
createApp({
  setup(){
    const tabs=[{id:'overview',label:'OVERVIEW',comp:Overview},{id:'details',label:'DETAILS',comp:Details},{id:'logs',label:'LOGS',comp:Logs}];
    const active=shallowRef(Overview);const activeId=ref('overview');
    const setTab=(t)=>{active.value=t.comp;activeId.value=t.id;};
    return{tabs,active,activeId,setTab};
  },
  template:`<div>
    <div style='display:flex;border-bottom:1px solid #1a1a1a;margin-bottom:12px;'>
      <button v-for='t in tabs' :key='t.id' @click='setTab(t)' :style='{color:activeId===t.id?"#10b981":"#555",borderBottom:activeId===t.id?"2px solid #10b981":"2px solid transparent"}' style='background:none;border:none;border-top:none;border-left:none;border-right:none;padding:6px 12px;cursor:pointer;font-family:monospace;font-size:10px;letter-spacing:0.1em;margin-bottom:-1px;'>
        {{t.label}}
      </button>
    </div>
    <component :is='active'/>
  </div>`
}).mount('#tab-out');