10.15 TIL 아코디언 구현하기

function FaqList({ data, setData, adminmode }) {
  const [selected, setSelected] = useState(null);
//faq에 대한 상태 
  const toggle = (idx) => {
    if (selected === idx) {
      return setSelected(null);
    }
    setSelected(idx);
  };
//해당 faq를 눌렀을 때 
  const deleteContent = async (id) => {
    if (window.confirm("정말 삭제하시겠습니까?")) {
      await deleteDoc(doc(db, "FAQList", id));
      setData(data.filter((_, idx) => idx !== selected));
      setSelected(null);
    }
  };
//해당 faq삭제 하는 함수 
  return (
    <Accordion>
      {data.map((question, idx) => (
        <div className="item" key={idx}>
          <div className="title" onClick={() => toggle(idx)}>
            <div>{question.question}</div>
            <span>
              {selected === idx ? (
                <AiOutlineMinusCircle />
              ) : (
                <AiOutlinePlusCircle />
              )}
            </span>
          </div>
          <div className={selected === idx ? "content show" : "content"}>
//selected된 faq는 show 처리 하여 보여지게 만든다
            <RichEditorReadonly data={question.answer} />
            {adminmode && (
              <BtnBox>
                <Link to={`/admin/faq/edit/${question.id}`}>
                  <button className="btn btn-edit">수정</button>
                </Link>
                <button
                  className="btn btn-cancel"
                  onClick={() => deleteContent(question.id)}
                >
                  삭제
                </button>
              </BtnBox>
            )}
          </div>
        </div>
      ))}
    </Accordion>
  );
}

export default FaqList;

const Accordion = styled.div`
  margin-top: 2rem;
  width: 60%;

  .item {
    background-color: var(--gray-1);
    margin-bottom: 1rem;
    padding: 1rem;
    box-shadow: 0px 1.6px 3.6px rgb(0 0 0 / 13%), 0px 0px 2.9px rgb(0 0 0 / 11%);
  }
  .title {
    color: var(--gray-8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 1.25rem;
  }
  .content {
    color: var(--gray-7);
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0, 1, 0, 1);
  }
  .content.show {
    margin-top: 1rem;
    font-size: 1.5rem;
    height: auto;
    max-height: 999px;
    transition: all 0.5s cubic-bezier(0, 1, 0, 1);
  }
`;

const BtnBox = styled.div`
  .btn {
    padding: 0.5rem 1rem;
    background-color: var(--gray-5);
    border-radius: 10px;
    font-size: 0.9rem;
    &:hover {
      color: #fff;
      background-color: #869aa0;
    }
  }

  .btn-edit {
    margin-right: 0.5rem;
  }
`;