Vue 3 실전: 모달 컴포넌트

const{createApp,ref,onMounted,onUnmounted,Teleport}=Vue;
createApp({
  setup(){
    const show=ref(false);const selected=ref(null);
    const units=[{model:'T-800',threat:8,desc:'1세대 사이보그 킬러'},
                 {model:'T-1000',threat:10,desc:'액체 금속 폴리머'},
                 {model:'T-X',threat:9,desc:'하이브리드 프로토타입'}];
    const open=(u)=>{selected.value=u;show.value=true;};
    const close=()=>show.value=false;
    const onKey=(e)=>{if(e.key==='Escape')close();};
    onMounted(()=>document.addEventListener('keydown',onKey));
    onUnmounted(()=>document.removeEventListener('keydown',onKey));
    return{show,selected,units,open,close};
  },
  template:`<div>
    <div v-for='u in units' :key='u.model' @click='open(u)' style='padding:8px;margin-bottom:4px;background:#0a0a0a;cursor:pointer;font-size:11px;display:flex;justify-content:space-between;'>
      <span style='color:#f59e0b;'>{{u.model}}</span>
      <span style='color:#555;'>자세히 보기 →</span>
    </div>
    <Teleport to='body'>
      <div v-if='show' @click.self='close' style='position:fixed;inset:0;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;z-index:9999;font-family:monospace;'>
        <div style='background:#0d1117;border:1px solid #10b981;padding:24px;min-width:280px;'>
          <div style='color:#10b981;font-size:9px;letter-spacing:0.2em;margin-bottom:12px;'>UNIT DETAILS</div>
          <div style='color:#f59e0b;font-size:18px;margin-bottom:8px;'>{{selected?.model}}</div>
          <div style='color:#888;font-size:11px;margin-bottom:8px;'>위협도: {{selected?.threat}}</div>
          <div style='color:#555;font-size:11px;margin-bottom:16px;'>{{selected?.desc}}</div>
          <button @click='close' style='background:#10b981;color:#080808;border:none;padding:6px 16px;cursor:pointer;font-family:monospace;font-size:11px;'>CLOSE [ESC]</button>
        </div>
      </div>
    </Teleport>
  </div>`
}).mount('#modal-out');