inflow group 추가
This commit is contained in:
daekuk
@@ -362,4 +362,209 @@
|
||||
console.error('Download failed:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 스타일링된 Alert 모달
|
||||
* @param {string} message - 표시할 메시지
|
||||
* @param {object} options - 옵션 (type: 'info'|'warning'|'error'|'success', title: string, onClose: function)
|
||||
*/
|
||||
function showAlert(message, options) {
|
||||
options = options || {};
|
||||
var type = options.type || 'info';
|
||||
var title = options.title || getAlertTitle(type);
|
||||
var onClose = options.onClose || function(){};
|
||||
|
||||
// 기존 모달 제거
|
||||
$('#commonAlertModal').remove();
|
||||
|
||||
var iconHtml = getAlertIcon(type);
|
||||
var colorClass = 'alert-' + type;
|
||||
|
||||
var modalHtml =
|
||||
'<div id="commonAlertModal" class="common-alert-overlay">' +
|
||||
'<div class="common-alert-modal ' + colorClass + '">' +
|
||||
'<div class="common-alert-header">' +
|
||||
'<span class="common-alert-icon">' + iconHtml + '</span>' +
|
||||
'<span class="common-alert-title">' + title + '</span>' +
|
||||
'</div>' +
|
||||
'<div class="common-alert-body">' +
|
||||
'<p class="common-alert-message">' + message + '</p>' +
|
||||
'</div>' +
|
||||
'<div class="common-alert-footer">' +
|
||||
'<button type="button" class="common-alert-btn" id="commonAlertOkBtn">확인</button>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
|
||||
$('body').append(modalHtml);
|
||||
|
||||
// 애니메이션 효과
|
||||
setTimeout(function() {
|
||||
$('#commonAlertModal').addClass('show');
|
||||
}, 10);
|
||||
|
||||
// 닫기 이벤트
|
||||
$('#commonAlertOkBtn').on('click', function() {
|
||||
closeCommonAlert(onClose);
|
||||
});
|
||||
|
||||
// ESC 키로 닫기
|
||||
$(document).on('keydown.commonAlert', function(e) {
|
||||
if (e.keyCode === 27) {
|
||||
closeCommonAlert(onClose);
|
||||
}
|
||||
});
|
||||
|
||||
// Enter 키로 확인
|
||||
$(document).on('keydown.commonAlertEnter', function(e) {
|
||||
if (e.keyCode === 13) {
|
||||
closeCommonAlert(onClose);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function closeCommonAlert(callback) {
|
||||
$('#commonAlertModal').removeClass('show');
|
||||
setTimeout(function() {
|
||||
$('#commonAlertModal').remove();
|
||||
$(document).off('keydown.commonAlert');
|
||||
$(document).off('keydown.commonAlertEnter');
|
||||
if (typeof callback === 'function') {
|
||||
callback();
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
|
||||
function getAlertTitle(type) {
|
||||
switch(type) {
|
||||
case 'error': return '오류';
|
||||
case 'warning': return '경고';
|
||||
case 'success': return '완료';
|
||||
default: return '알림';
|
||||
}
|
||||
}
|
||||
|
||||
function getAlertIcon(type) {
|
||||
switch(type) {
|
||||
case 'error': return '<i class="material-icons">error</i>';
|
||||
case 'warning': return '<i class="material-icons">warning</i>';
|
||||
case 'success': return '<i class="material-icons">check_circle</i>';
|
||||
default: return '<i class="material-icons">info</i>';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 스타일링된 Confirm 모달
|
||||
* @param {string} message - 표시할 메시지
|
||||
* @param {object} options - 옵션 (type, title, confirmText, cancelText, onConfirm, onCancel)
|
||||
*/
|
||||
function showConfirm(message, options) {
|
||||
options = options || {};
|
||||
var type = options.type || 'info';
|
||||
var title = options.title || '확인';
|
||||
var confirmText = options.confirmText || '확인';
|
||||
var cancelText = options.cancelText || '취소';
|
||||
var onConfirm = options.onConfirm || function(){};
|
||||
var onCancel = options.onCancel || function(){};
|
||||
|
||||
// 기존 모달 제거
|
||||
$('#commonConfirmModal').remove();
|
||||
|
||||
var iconHtml = getAlertIcon(type);
|
||||
var colorClass = 'alert-' + type;
|
||||
|
||||
var modalHtml =
|
||||
'<div id="commonConfirmModal" class="common-alert-overlay">' +
|
||||
'<div class="common-alert-modal ' + colorClass + '">' +
|
||||
'<div class="common-alert-header">' +
|
||||
'<span class="common-alert-icon">' + iconHtml + '</span>' +
|
||||
'<span class="common-alert-title">' + title + '</span>' +
|
||||
'</div>' +
|
||||
'<div class="common-alert-body">' +
|
||||
'<p class="common-alert-message">' + message + '</p>' +
|
||||
'</div>' +
|
||||
'<div class="common-alert-footer">' +
|
||||
'<button type="button" class="common-confirm-cancel-btn" id="commonConfirmCancelBtn">' + cancelText + '</button>' +
|
||||
'<button type="button" class="common-alert-btn" id="commonConfirmOkBtn">' + confirmText + '</button>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
|
||||
$('body').append(modalHtml);
|
||||
|
||||
setTimeout(function() {
|
||||
$('#commonConfirmModal').addClass('show');
|
||||
}, 10);
|
||||
|
||||
// 확인 버튼
|
||||
$('#commonConfirmOkBtn').on('click', function() {
|
||||
closeCommonConfirm(onConfirm);
|
||||
});
|
||||
|
||||
// 취소 버튼
|
||||
$('#commonConfirmCancelBtn').on('click', function() {
|
||||
closeCommonConfirm(onCancel);
|
||||
});
|
||||
|
||||
// ESC 키로 취소
|
||||
$(document).on('keydown.commonConfirm', function(e) {
|
||||
if (e.keyCode === 27) {
|
||||
closeCommonConfirm(onCancel);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function closeCommonConfirm(callback) {
|
||||
$('#commonConfirmModal').removeClass('show');
|
||||
setTimeout(function() {
|
||||
$('#commonConfirmModal').remove();
|
||||
$(document).off('keydown.commonConfirm');
|
||||
if (typeof callback === 'function') {
|
||||
callback();
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 공용 Alert 모달 스타일 -->
|
||||
<style>
|
||||
.common-alert-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:99999; justify-content:center; align-items:center; }
|
||||
.common-alert-overlay.show { display:flex; animation:alertFadeIn 0.2s ease; }
|
||||
@keyframes alertFadeIn { from { opacity:0; } to { opacity:1; } }
|
||||
.common-alert-modal { background:#fff; border-radius:8px; box-shadow:0 8px 32px rgba(0,0,0,0.3); width:380px; max-width:90%; overflow:hidden; animation:alertSlideIn 0.2s ease; }
|
||||
@keyframes alertSlideIn { from { transform:translateY(-20px); opacity:0; } to { transform:translateY(0); opacity:1; } }
|
||||
.common-alert-header { display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid #eee; }
|
||||
.common-alert-icon { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; }
|
||||
.common-alert-icon i { font-size:20px; }
|
||||
.common-alert-title { font-size:15px; font-weight:600; color:#333; }
|
||||
.common-alert-body { padding:20px; }
|
||||
.common-alert-message { margin:0; font-size:13px; line-height:1.6; color:#555; word-break:keep-all; }
|
||||
.common-alert-footer { display:flex; justify-content:flex-end; padding:12px 20px; background:#fafafa; border-top:1px solid #eee; }
|
||||
.common-alert-btn { padding:8px 24px; font-size:13px; font-weight:500; border:none; border-radius:4px; cursor:pointer; transition:all 0.2s; }
|
||||
.common-confirm-cancel-btn { padding:8px 24px; font-size:13px; font-weight:500; border:1px solid #ddd; border-radius:4px; cursor:pointer; transition:all 0.2s; background:#fff; color:#666; margin-right:8px; }
|
||||
.common-confirm-cancel-btn:hover { background:#f5f5f5; border-color:#ccc; }
|
||||
|
||||
/* Info 타입 (기본) */
|
||||
.alert-info .common-alert-icon { background:rgba(0,128,128,0.1); }
|
||||
.alert-info .common-alert-icon i { color:rgba(0,128,128,1); }
|
||||
.alert-info .common-alert-btn { background:rgba(0,128,128,0.85); color:#fff; }
|
||||
.alert-info .common-alert-btn:hover { background:rgba(0,128,128,1); }
|
||||
|
||||
/* Warning 타입 */
|
||||
.alert-warning .common-alert-icon { background:rgba(255,152,0,0.1); }
|
||||
.alert-warning .common-alert-icon i { color:#ff9800; }
|
||||
.alert-warning .common-alert-btn { background:#ff9800; color:#fff; }
|
||||
.alert-warning .common-alert-btn:hover { background:#f57c00; }
|
||||
|
||||
/* Error 타입 */
|
||||
.alert-error .common-alert-icon { background:rgba(244,67,54,0.1); }
|
||||
.alert-error .common-alert-icon i { color:#f44336; }
|
||||
.alert-error .common-alert-btn { background:#f44336; color:#fff; }
|
||||
.alert-error .common-alert-btn:hover { background:#d32f2f; }
|
||||
|
||||
/* Success 타입 */
|
||||
.alert-success .common-alert-icon { background:rgba(76,175,80,0.1); }
|
||||
.alert-success .common-alert-icon i { color:#4caf50; }
|
||||
.alert-success .common-alert-btn { background:#4caf50; color:#fff; }
|
||||
.alert-success .common-alert-btn:hover { background:#388e3c; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user