Vue 3 실전: 실시간 채팅 UI

const{createApp,ref,nextTick}=Vue;
createApp({
  setup(){
    const msgs=ref([{id:1,from:'SKYNET',text:'연결 확립됨',time:'00:00'}]);
    const input=ref('');const container=ref(null);
    const send=async()=>{
      if(!input.value.trim())return;
      msgs.value.push({id:Date.now(),from:'USER',text:input.value,time:new Date().toLocaleTimeString()});
      input.value='';
      await nextTick();
      if(container.value)container.value.scrollTop=container.value.scrollHeight;
      setTimeout(()=>{
        msgs.value.push({id:Date.now(),from:'SKYNET',text:'메시지 수신됨. 처리 중...',time:new Date().toLocaleTimeString()});
        nextTick(()=>{if(container.value)container.value.scrollTop=container.value.scrollHeight;});
      },800);
    };
    return{msgs,input,send,container};
  },
  template:`<div>
    <div ref='container' style='height:150px;overflow-y:auto;margin-bottom:8px;padding:8px;background:#0a0a0a;'>
      <div v-for='m in msgs' :key='m.id' style='margin-bottom:8px;font-size:11px;'>
        <span :style='{color:m.from==="SKYNET"?"#10b981":"#22c55e"}'>{{m.from}}</span>
        <span style='color:#333;font-size:9px;'> {{m.time}}</span>
        <div style='color:#888;margin-top:2px;'>{{m.text}}</div>
      </div>
    </div>
    <div style='display:flex;gap:6px;'>
      <input v-model='input' @keyup.enter='send' placeholder='메시지...' style='flex:1;background:#111;color:#e8e8e8;border:1px solid #333;padding:6px;font-family:monospace;font-size:11px;'/>
      <button @click='send' style='background:#10b981;color:#080808;border:none;padding:6px 12px;cursor:pointer;font-size:11px;font-family:monospace;'>SEND</button>
    </div>
  </div>`
}).mount('#chat-out');