React로 실시간 채팅 UI 구현

const { useState, useEffect, useRef } = React;

  function ChatUI() {
    const [messages, setMessages] = useState([{id:1, from:'T-800', text:'임무 준비 완료', time:'00:01'}]);
    const [input, setInput] = useState('');
    const bottomRef = useRef(null);

    useEffect(() => { bottomRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages]);

    const send = () => {
      if (!input.trim()) return;
      setMessages(prev => [...prev, {id:Date.now(), from:'OPERATOR', text:input, time: new Date().toLocaleTimeString()}]);
      setInput('');
    };

    return (
      <div>
        <div style={{height:'150px', overflowY:'auto', border:'1px solid #1a1a1a', padding:'8px', marginBottom:'8px'}}>
          {messages.map(m => <div key={m.id} style={{marginBottom:'6px'}}><span style={{color:'#10b981', fontSize:'11px'}}>[{m.from}]</span> <span style={{color:'#e8e8e8', fontSize:'12px'}}>{m.text}</span></div>)}
          <div ref={bottomRef} />
        </div>
        <div style={{display:'flex', gap:'8px'}}>
          <input value={input} onChange={e => setInput(e.target.value)} onKeyDown={e => e.key==='Enter' && send()} placeholder='메시지 입력...' style={{flex:1, background:'#1a1a1a', color:'#e8e8e8', border:'1px solid #333', padding:'6px', fontFamily:'monospace'}} />
          <button onClick={send} style={{background:'#10b981', color:'#080808', border:'none', padding:'6px 12px', cursor:'pointer', fontFamily:'monospace', fontSize:'11px'}}>SEND</button>
        </div>
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<ChatUI />);