AI 요약관련 정보

• items prop으로 전달된 접을 수 있는 섹션 목록을 렌더링하는 React 아코디언 컴포넌트 구현이 목표입니다. 📜
• 모든 패널은 기본적으로 닫힌 상태로 시작하며, 헤더 클릭 시 해당 패널이 열리고 다른 모든 패널은 닫힙니다. 🔒
• 이미 열린 헤더를 다시 클릭하면 해당 패널이 닫히며, 닫힌 패널의 콘텐츠는 DOM에 존재하지 않아야 합니다 (조건부 렌더링). 👻
• 활성 헤더는 bg-indigo-50 배경색과 굵은 글씨를 가지며, 비활성 헤더는 일반 텍스트를 유지합니다. 🎨
• data-test-id (accordion, accordion-header, accordion-panel)를 수정하지 않고 사용해야 합니다. 🏷️
• useState 훅을 사용하여 현재 활성화된 항목의 인덱스를 추적하는 active 상태를 도입하며, 초기값은 null입니다. 💡
• toggle 함수는 클릭된 항목의 인덱스를 받아, 현재 활성화된 항목과 일치하면 active를 null로 설정하여 닫고, 그렇지 않으면 해당 인덱스로 설정하여 엶으로써 단일 패널만 활성화되도록 관리합니다. 🔄
• active === index를 통해 패널의 open 상태를 결정하고, 이 상태에 따라 버튼의 className을 동적으로 변경하며, 패널 콘텐츠를 조건부로 렌더링합니다. ✅
• 이 문제는 React의 상태 관리, 조건부 렌더링, UI 상호작용에 대한 기본적인 이해를 평가하는 데 효과적입니다. 🧠