feat: Accordion 컴포넌트 작성

[chasj0326]

🧩 이슈 번호

• close Accordion 컴포넌트 작성 #51

✅ 작업 사항

아코디언 컴포넌트를 작성했습니다.

컴포넌트 목록

• Accordion
• AccordionHeader
• AccordionBody
• AccordionGroup

👩‍💻 공유 포인트 및 논의 사항

Accordion 사용법

아래와 같이 사용합니다.

<Accordion>
  <AccordionHeader className="커스텀 스타일 클래스" buttonColored>

  {/* 헤더(접히지 않는 부분)에 들어가야 하는 내용 */}

  </AccordionHeader>
  <AccordionBody className="커스텀 스타일 클래스">
  
  {/* 바디(접히는 부분)에 들어가야 하는 내용 */}
  
  </AccordionBody>
</Accordion>

AccordionHeader

• buttonColored optional : 펼치기 버튼의 포인트컬러 유무를 결정합니다. 기본값은 false 입니다.
• className optional : AccordionHeader 에 className 을 부여하여 커스텀할 수 있습니다.

AccordionBody

• className optional : AccordionBody 에 className 을 부여하여 커스텀할 수 있습니다.

AccordionGroup 사용법

커스텀이 많아지는 컴포넌트이기 때문에, 일괄 스타일 적용 (className, buttonColored) 이 가능하도록 했습니다.
적용 우선순위는 다음과 같습니다. (오른쪽으로 갈 수록 우선순위 높음)
기본값 < AccordionGroup에 작성 < AccordionHeader,AccordionBody에 작성

아래와 같이 사용합니다.

<AccordionGroup 
  headerStyle="AccordionHeader에 일괄적용할 스타일 클래스" 
  bodyStyle="AccordionBody에 일괄적용할 스타일 클래스"
  buttonColored
>
  <Accordion>
    <AccordionHeader> Summary </AccordionHeader>
    <AccordionBody> Detail </AccordionBody>
  </Accordion>

  <Accordion>
    <AccordionHeader> Summary </AccordionHeader>
    <AccordionBody> Detail </AccordionBody>
  </Accordion>

  <Accordion>
    <AccordionHeader> Summary </AccordionHeader>
    <AccordionBody> Detail </AccordionBody>
  </Accordion>
</AccordionGroup>

주의 사항

AccordionBody에 펼치고 닫는 애니메이션을 주기 위해 framer-motion 을 적용했는데, 위아래 패딩값에 따른 버그가 살짝 있습니다 ㅠ.
따라서 최대한 커스텀을 할 수 있도록 열어두긴 했지만, children 컴포넌트에서 처리가 가능한 스타일이라면 children 에게 부여하는 것을 권장합니다! 박스 위아래 패딩과 높이와 관련되지 않은 스타일은 얼마든지 바로 적용해도 무방합니다 :)

[netlify]

✅ Deploy Preview for moabam-storybook ready!

Name	Link
🔨 Latest commit	5a39432
🔍 Latest deploy log	https://app.netlify.com/sites/moabam-storybook/deploys/65434b0938dd550008ba4b62
😎 Deploy Preview	https://deploy-preview-53--moabam-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[bbearcookie]

고생하셨어요!!

[bbearcookie]

오호! 사용하는 곳에서 각각의 컴포넌트에 적용될 클래스 이름을 받아서 스타일로 전달해주는 방식이군요!! 👍👍