Vue 3 실전: 검색 필터 시스템

const{createApp,ref,computed}=Vue;
createApp({
  setup(){
    const q=ref('');
    const sort=ref('threat');
    const items=[
      {model:'T-800',type:'endoskeleton',threat:8,year:1984},
      {model:'T-1000',type:'liquid',threat:10,year:1991},
      {model:'T-X',type:'hybrid',threat:9,year:2003},
      {model:'T-600',type:'endoskeleton',threat:6,year:2018},
      {model:'T-700',type:'endoskeleton',threat:7,year:2018},
      {model:'REV-9',type:'liquid',threat:9,year:2019},
    ];
    const filtered=computed(()=>[...items]
      .filter(i=>!q.value||i.model.toLowerCase().includes(q.value.toLowerCase())||i.type.includes(q.value.toLowerCase()))
      .sort((a,b)=>sort.value==='threat'?b.threat-a.threat:a.model.localeCompare(b.model))
    );
    return{q,sort,filtered};
  },
  template:`<div>
    <input v-model='q' placeholder='Search units...' style='background:#111;color:#e8e8e8;border:1px solid #333;padding:8px;font-size:11px;font-family:monospace;width:100%;box-sizing:border-box;margin-bottom:8px;'/>
    <div style='display:flex;gap:6px;margin-bottom:12px;'>
      <button @click='sort="threat"' :style='{color:sort==="threat"?"#10b981":"#555"}' style='background:none;border:none;cursor:pointer;font-size:10px;font-family:monospace;'>SORT:THREAT</button>
      <button @click='sort="name"' :style='{color:sort==="name"?"#10b981":"#555"}' style='background:none;border:none;cursor:pointer;font-size:10px;font-family:monospace;'>SORT:NAME</button>
    </div>
    <div v-for='u in filtered' :key='u.model' style='display:flex;justify-content:space-between;padding:6px;margin-bottom:4px;background:#0a0a0a;font-size:11px;'>
      <span style='color:#f59e0b;'>{{u.model}}</span>
      <span style='color:#555;'>{{u.type}}</span>
      <span :style='{color:u.threat>=9?"#10b981":u.threat>=7?"#f59e0b":"#22c55e"}'>{{u.threat}}</span>
    </div>
    <div style='color:#555;font-size:10px;margin-top:8px;'>{{filtered.length}} results</div>
  </div>`
}).mount('#search-out');