ScAccordion

ScAccordion은 클릭 시 열리고 닫히는 UI 아코디언 컴포넌트입니다.
제목은 title prop으로 지정하며, 내부 콘텐츠는 slot을 통해 자유롭게 구성할 수 있습니다.

---

✅ 기본 사용법

<sc-accordion-wrapper ref="accordion">
  <sc-accordion title="자주 묻는 질문 #1">
    <p>이곳에 아코디언 내용을 넣을 수 있습니다.</p>
  </sc-accordion>
  <sc-accordion title="자주 묻는 질문 #2">
    <p>이곳에 아코디언 내용을 넣을 수 있습니다.</p>
  </sc-accordion>
  <sc-accordion title="자주 묻는 질문 #3">
    <p>이곳에 아코디언 내용을 넣을 수 있습니다.</p>
  </sc-accordion>
</sc-accordion-wrapper>

※ ScAccordion은 전역으로 등록되어 있으므로 import 없이 사용할 수 있습니다.

---

✨ 사용 예시 모음

▸ 기본 아코디언

자주 묻는 질문 #1

이곳에 아코디언 내용을 넣을 수 있습니다.

자주 묻는 질문 #2

이곳에 아코디언 내용을 넣을 수 있습니다.

자주 묻는 질문 #3

이곳에 아코디언 내용을 넣을 수 있습니다.

Opened idx list []

Closed idx list []

<sc-accordion-wrapper ref="accordion" @change="onChange">
  <sc-accordion title="자주 묻는 질문 #1">
    <p>이곳에 아코디언 내용을 넣을 수 있습니다.</p>
  </sc-accordion>
  <sc-accordion title="자주 묻는 질문 #2">
    <p>이곳에 아코디언 내용을 넣을 수 있습니다.</p>
  </sc-accordion>
  <sc-accordion title="자주 묻는 질문 #3">
    <p>이곳에 아코디언 내용을 넣을 수 있습니다.</p>
  </sc-accordion>
</sc-accordion-wrapper>

<div class="mt-5">
  <sc-button @click="openAll">모두 펼치기</sc-button>
  <sc-button @click="closeAll">모두 닫기</sc-button>
  <div class="mt-5 text-sm">Opened idx list {{ status.opened }}</div>
  <div class="mt-5 text-sm">Closed idx list {{ status.closed }}</div>
</div>

<script setup>
  import { ref } from 'vue';
  const accordion = ref(null);
  const status = ref({
    opened: [],
    closed: [],
  });
  const openAll = () => {
    accordion.value.openAll();
  };
  const closeAll = () => {
    accordion.value.closeAll();
  };
  const onChange = (result) => {
    status.value = { ...result };
  };
</script>

---

▸ 기본으로 열린 상태

<sc-accordion title="기본 열림 상태" :defaultOpen="true">
  <p>기본으로 펼쳐진 상태로 시작됩니다.</p>
</sc-accordion>

---

🛠️ 속성 (Props)

이름	타입	기본값	설명
title	string	(필수)	아코디언 헤더 텍스트
defaultOpen	boolean	false	true일 경우 기본으로 열림

---

📤 이벤트 (Emits)

이벤트 이름	설명
change	다른 Accordion 클릭시 발생

---

🔳 슬롯 (Slots)

▸ 기본 슬롯 (default)

아코디언 내부 콘텐츠를 구성하는 영역입니다.

---

🎨 스타일 클래스

클래스 이름	설명
sc-accordion-wrapper	전체 아코디언 wrapper 클래스
sc-accordion-item	아코디언 개별 클래스
title	상단 제목 영역 클래스
content	펼쳐지는 콘텐츠 영역 클래스

---

📝 기타 참고사항

• 내부 콘텐츠에 Vue 컴포넌트를 포함해도 문제 없습니다.