UI 가이드

다크 모드

ScModal ​

ScModal은 레이어 팝업 UI를 구성하기 위한 공통 모달 컴포넌트입니다.
v-model을 통해 외부에서 show/hide를 제어하며, header, footer, default 슬롯을 통해 자유롭게 콘텐츠를 구성할 수 있습니다.

✅ 기본 사용법 ​

vue
<sc-modal ref="basicModal" title="기본 모달">
    <template #default>
        <p>이곳에 모달 내용을 작성하세요.</p>
    </template>
    <template v-slot:action>
      <sc-button class="sc-button round-button large" @click="onClose('basicModal')">
        취소
      </sc-button>
      <sc-button class="sc-button round-button primary large" @click="onConfirm('basicModal')">
        확인
      </sc-button>
    </template>
</sc-modal>
<sc-button @click="onOpen('basicModal')">열기</sc-button>

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

✨ 사용 예시 모음 ​

▸ 기본 모달 ​

vue
<sc-modal v-model="isOpen">
  <p>이곳은 모달의 기본 영역입니다.</p>
</sc-modal>

▸ 헤더/푸터 커스터마이징 ​

vue
<sc-modal v-model="isOpen">
  <template #header>
    <h2>제목</h2>
  </template>

  <template #default>
    <p>내용을 여기에 입력하세요.</p>
  </template>

  <template #footer>
    <button @click="isOpen = false">닫기</button>
  </template>
</sc-modal>

▸ 너비 조절 ​

vue
<sc-modal v-model="isOpen" width="600px">
  <p>600px 너비의 모달입니다.</p>
</sc-modal>

▸ 오버레이 클릭으로 닫기 ​

vue
<sc-modal v-model="isOpen" :closeOnOverlayClick="true">
  <p>배경 클릭 시 닫힙니다.</p>
</sc-modal>

🛠️ 속성 (Props) ​

이름타입기본값설명
modelValuebooleanfalse모달 표시 여부 (v-model로 사용)
widthstring | number'500px'모달의 가로 너비
hideCloseButtonbooleanfalse닫기 버튼 숨김 여부
hideOverlaybooleanfalse배경 오버레이 숨김 여부
closeOnOverlayClickbooleanfalse배경 클릭 시 모달 닫기 여부

📤 이벤트 (Emits) ​

이벤트 이름설명
update:modelValuev-model을 통해 모달 표시 상태 변경

🔳 슬롯 (Slots) ​

슬롯 이름설명
default모달 본문 내용
header모달 상단 제목 영역
footer모달 하단 버튼/액션 영역

🎨 스타일 클래스 ​

클래스 이름설명
sc-modal모달 전체 wrapper
sc-modal-overlay배경 오버레이 영역
sc-modal-container모달 컨텐츠 wrapper
sc-modal-header모달 헤더 영역
sc-modal-footer모달 하단 버튼 영역

📝 기타 참고사항 ​

  • v-model을 통해 외부에서 열고 닫을 수 있습니다.
  • width는 string 또는 number(px) 모두 지원합니다.
  • slot을 사용하여 유연한 콘텐츠 구성이 가능합니다.