React로 아코디언 UI 구현

const { useState } = React;
  const ITEMS = [
    { id:1, title:'T-800 제원', content:'모델: 사이버다인 101 · 외골격: 티타늄 합금 · 에너지: 이리듐 원자로' },
    { id:2, title:'T-1000 제원', content:'모델: 액체 금속 원형 · 형태: 폴리머 세라믹 · 능력: 형태 변환' },
    { id:3, title:'T-X 제원', content:'모델: 하이브리드 터미나트릭스 · 외골격: 루비늄 기반 · 무기: 내장형' },
  ];

  function Accordion() {
    const [open, setOpen] = useState(null);
    return (
      <div>
        {ITEMS.map(item => (
          <div key={item.id} style={{border:'1px solid #1a1a1a', marginBottom:'4px'}}>
            <button onClick={() => setOpen(open===item.id ? null : item.id)}
              style={{width:'100%', background:'#0a0a0a', border:'none', color: open===item.id ? '#10b981':'#888', padding:'10px 12px', cursor:'pointer', fontFamily:'monospace', fontSize:'11px', textAlign:'left', display:'flex', justifyContent:'space-between'}}>
              {item.title} <span>{open===item.id ? '▲' : '▼'}</span>
            </button>
            {open===item.id && <div style={{padding:'10px 12px', color:'#555', fontSize:'11px', borderTop:'1px solid #1a1a1a'}}>{item.content}</div>}
          </div>
        ))}
      </div>
    );
  }

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