File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div v-show="isModalOpen" class="modal-wrapper">
<div class="modal-container small-modal">
<div class="modal-title text-ct">
<h2>{{ modalTitle }}</h2>
</div>
<div class="modal-content-monthly">
<p class="alert-write text-ct" v-html="modalMessage">
</p>
<div v-if="modalType === 'radio'">
<p>원본파일 : </p>
<label></label>
<p>동작 : </p>
<label><input type="radio" value="move" v-model="moveOrCopy.type">덮어쓰기</label>
<label><input type="radio" value="cancel" v-model="moveOrCopy.type">건너뛰기</label>
<label><input type="checkbox" v-model="moveOrCopy.checkBox">항상 이 동작 사용</label>
</div>
</div>
<div class="modal-end flex justify-center" style="flex-wrap: nowrap;">
<button class="blue-btn large-btn" @click="onConfirm" @keyup.enter="onConfirm" autofocus v-if="isModalOpen">확인</button>
<button class="gray-btn large-btn" @click="onCancel" v-show="modalType === 'confirm'">취소</button>
<button class="gray-btn large-btn" @click="onRadioCancel" v-show="modalType === 'radio'">취소</button>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: '모달 제목'
},
message: {
type: String,
default: '경고 메세지를 입력해주세요. <br /> 삭제,수정,추가 등등'
},
},
data() {
return {
isModalOpen: false,
modalType: 'alert', // 'alert', 'confirm', 'radio' 중 하나
modalTitle: this.title,
modalMessage: this.message,
moveOrCopy: {
type: "move",
checkBox: false
},
currentPromise: null
}
},
methods: {
// 모달 닫기
closeModal() {
this.isModalOpen = false;
this.modalType = 'alert';
},
// 일반 모달 표시
showModal() {
this.modalType = 'alert';
this.isModalOpen = true;
},
// 확인 버튼 클릭 핸들러
onConfirm() {
if (this.modalType === 'alert') {
// 단순 알림 모달은 그냥 닫기
this.closeModal();
} else if (this.modalType === 'confirm') {
// confirm 모달은 true 반환
this.resolvePromise(true);
} else if (this.modalType === 'radio') {
// radio 모달은 현재 선택된 값 반환
this.resolvePromise(this.moveOrCopy);
}
},
// 취소 버튼 클릭 핸들러 (일반 confirm용)
onCancel() {
this.resolvePromise(false);
},
// 취소 버튼 클릭 핸들러 (라디오 confirm용)
onRadioCancel() {
this.resolvePromise({
type: "cancel",
checkBox: false
});
},
// Promise 해결 및 모달 닫기
resolvePromise(value) {
if (this.currentPromise && this.currentPromise.resolve) {
this.currentPromise.resolve(value);
this.currentPromise = null;
}
this.closeModal();
},
// Promise 생성
createPromise() {
let resolve, reject;
const promise = new Promise((res, rej) => {
resolve = res;
reject = rej;
});
this.currentPromise = { promise, resolve, reject };
return promise;
},
// confirm 모달 표시 (확인/취소)
async showConfirm() {
this.modalType = 'confirm';
this.isModalOpen = true;
return this.createPromise();
},
// radio confirm 모달 표시 (라디오 옵션)
async showRadioConfirm() {
this.modalType = 'radio';
this.isModalOpen = true;
this.moveOrCopy.type = "move";
this.moveOrCopy.checkBox = false;
return this.createPromise();
},
// 제목 설정
setTitle(title) {
this.modalTitle = title;
},
// 메시지 설정
setMessage(message) {
this.modalMessage = message;
},
},
watch: {
// props로 전달된 title이 변경되면 modalTitle 업데이트
title(newVal) {
this.modalTitle = newVal;
},
// props로 전달된 message가 변경되면 modalMessage 업데이트
message(newVal) {
this.modalMessage = newVal;
}
}
}
</script>