ScConfirm

ScConfirm은 확인/취소 대화상자를 띄워 사용자로부터 입력을 받는 유틸리티 함수입니다. 기본 확인/취소 버튼 외에도 커스텀 버튼을 직접 정의하여 다양한 선택지를 제공할 수 있습니다. this.$util.confirm 또는 useUtil().confirm을 통해 사용할 수 있습니다.

---

✅ 기본 사용법

결과 :

<sc-button @click="showConfirm">확인 버튼</sc-button>

<div class="mt-5 text-sm">결과 : {{ result }}</div>

<script setup>
import { ref } from 'vue';

// Composition API를 사용하여 util 훅을 가져옵니다.
import { useUtil } from '@/plugins/util.js';
const util = useUtil();

const result = ref('');
// 기본 확인/취소 대화상자를 표시하는 함수
const showConfirm = () => {
  util.confirm(
    '저장하시겠습니까?',
    () => { result.value = '확인을 눌렀습니다.'; },
    () => { result.value = '취소를 눌렀습니다.'; }
  );
};
</script>

// Composition API: useUtil 훅 활용 예
import { useUtil } from '@/hooks/useUtil';

const util = useUtil();
util.confirm(
  '저장하시겠습니까?',
  () => console.log('확인'),
  () => console.log('취소')
);

---

✨ 사용 예시 모음

▸ 커스텀 버튼 대화상자

결과 :

<sc-button @click="showCustomConfirm">커스텀 버튼</sc-button>
<div class="mt-5 text-sm">결과 : {{ customResult }}</div>

<script setup>
import { ref } from 'vue';

// Composition API를 사용하여 util 훅을 가져옵니다.
import { useUtil } from '@/plugins/util.js';
const util = useUtil();

const customResult = ref('');

// 커스텀 버튼 대화상자를 표시하는 함수
const showCustomConfirm = () => {
  util.confirmWithButtons({
    message: '여러가지 버튼입니다.',
    buttons: [
      { label: '버튼A', color: 'black', callbackFn: () => (customResult.value = '버튼A 클릭') },
      { label: '버튼B', color: 'indigo', callbackFn: () => (customResult.value = '버튼B 클릭') },
      { label: '버튼C', color: '', callbackFn: () => (customResult.value = '버튼C 클릭') },
    ],
  });
};

</script>

---

🛠️ 메서드

메서드 이름	매개변수	설명
confirm(message, onConfirm?, onCancel?)	message: string onConfirm?: Function onCancel?: Function	기본 확인/취소 버튼이 있는 대화상자를 띄우고, 버튼 클릭 시 콜백을 실행합니다.
confirmWithButtons(options)	options: { message: string, buttons: Array<{ label: string, color: string, callbackFn: Function }> }	버튼 목록을 정의할 수 있는 대화상자를 띄우고, 각 버튼 클릭 시 해당 콜백을 실행합니다.

---

📤 이벤트 (Emits)

ScConfirm은 Vue 이벤트를 방출하지 않습니다.

---

🔳 슬롯 (Slots)

ScConfirm은 슬롯을 제공하지 않습니다.

---

🎨 스타일 클래스

ScConfirm은 브라우저 기본 confirm을 사용하거나, 프로젝트 스타일에 따라 자동 적용되어 별도의 클래스 설정이 필요하지 않습니다.

---