AI 요약관련 정보

• 아코디언 컴포넌트는 items prop을 통해 전달된 collapsible 섹션 목록을 렌더링합니다. 🗂️
• 초기 상태는 모든 패널이 닫힌 상태로 시작합니다. 😴
• 헤더를 클릭하면 해당 패널이 확장되고 다른 모든 패널은 축소됩니다. 👆
• 이미 열려있는 헤더를 클릭하면 해당 패널이 축소됩니다. ⬇️
• 패널이 축소되면 해당 콘텐츠 요소는 DOM에 존재하지 않아야 합니다. 👻
• 활성 헤더는 배경색과 굵은 텍스트 스타일을 갖습니다. 🎨
• useState 훅을 사용하여 활성 항목을 추적합니다. 🎯
• 토글 로직은 클릭된 항목을 열거나 닫고, 다른 항목들을 닫습니다. 🔄
• 조건부 렌더링을 사용하여 열린 패널의 콘텐츠를 표시합니다. ✅