352 lines
14 KiB
JavaScript
352 lines
14 KiB
JavaScript
/**
|
|
* 이벤트 보기 관련 기능 모듈
|
|
*/
|
|
const EventView = (function() {
|
|
// 비공개 변수
|
|
let _bnfInnb = 0; // 혜택 고유번호
|
|
let _eventDesc = ''; // 이벤트 설명
|
|
let _loadingTime = 0; // 로딩 시간(초)
|
|
let _mileageAmount = 0; // 마일리지 금액
|
|
let _timer = null; // 타이머 객체
|
|
let _countdownValue = 0; // 카운트다운 값
|
|
let _isParticipated = false;// 참여 여부
|
|
let _eventUrl = ''; // 이벤트 URL
|
|
let _reviewCheckInterval; // 모달이 열려있는지 확인하는 인터벌
|
|
|
|
/**
|
|
* 토스트 메시지 표시 함수
|
|
* @param {string} message - 표시할 메시지
|
|
*/
|
|
function _showToast(message) {
|
|
// 기존에 토스트 요소가 있으면 제거
|
|
$('.toastPop').remove();
|
|
|
|
// 토스트 요소 생성 및 추가
|
|
const $toast = $('<div class="toastPop">' + message + '</div>');
|
|
$('body').append($toast);
|
|
|
|
// 토스트 표시 및 자동 제거
|
|
setTimeout(function() {
|
|
$toast.addClass('show');
|
|
|
|
setTimeout(function() {
|
|
$toast.removeClass('show');
|
|
|
|
// 애니메이션 완료 후 요소 제거
|
|
setTimeout(function() {
|
|
$toast.remove();
|
|
}, 300);
|
|
}, 2000);
|
|
}, 100);
|
|
}
|
|
|
|
/**
|
|
* 이벤트 모달 생성 함수
|
|
*/
|
|
function _createEventModal() {
|
|
// 기존 모달이 있다면 제거
|
|
$('#event-modal').remove();
|
|
|
|
// 모달 HTML 구조 생성
|
|
const modalHTML = `
|
|
<div class="eventModal" id="event-modal" style="display:none;">
|
|
<div class="eventModal__overlay" style="position:fixed; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,0.6); z-index:999;">
|
|
<div class="eventModal__container" style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:90%; max-width:800px; max-height:80vh; background-color:#fff; border-radius:5px; overflow:hidden;">
|
|
<div class="eventModal__header" style="display:flex; justify-content:space-between; align-items:center; padding:15px; border-bottom:1px solid #e0e0e0;">
|
|
<h2 class="eventModal__title" style="margin:0; font-size:18px; font-weight:bold;">이벤트 보기</h2>
|
|
<button class="eventModal__close" style="background:transparent; border:0; width:24px; height:24px; position:relative; cursor:pointer;">
|
|
<span style="position:absolute; width:2px; height:16px; background-color:#666; top:4px; left:11px; transform:rotate(45deg);"></span>
|
|
<span style="position:absolute; width:2px; height:16px; background-color:#666; top:4px; left:11px; transform:rotate(-45deg);"></span>
|
|
</button>
|
|
</div>
|
|
<div class="eventModal__body" style="max-height:calc(80vh - 130px); overflow:hidden;">
|
|
<div class="eventModal__content">
|
|
<div class="event-iframe-container" style="width:100%; height:calc(80vh - 170px); min-height:300px; overflow:hidden;">
|
|
<iframe id="eventIframe" src="about:blank" frameborder="0" style="width:100%; height:100%; border:none;"></iframe>
|
|
</div>
|
|
<div class="event-timer" style="padding:10px 15px; text-align:center; background-color:#f8f8f8; border-top:1px solid #e0e0e0; font-weight:bold;">
|
|
남은 시간: <span id="popupCountdown">0</span>초
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="eventModal__btnContainer" style="padding:15px; border-top:1px solid #e0e0e0; text-align:right;">
|
|
<button id="event-modal-close-btn" style="padding:8px 16px; border-radius:4px; cursor:pointer; border:none; font-weight:bold; background-color:#f1f1f1; color:#333;">닫기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// 모달을 페이지에 추가
|
|
$('body').append(modalHTML);
|
|
|
|
// 모달 닫기 버튼에 이벤트 핸들러 직접 연결
|
|
$('#event-modal-close-btn, .eventModal__close').on('click', function() {
|
|
_closeEventModal();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 이벤트 모달 닫기 함수
|
|
*/
|
|
function _closeEventModal() {
|
|
console.log('이벤트 모달 닫기 함수 호출');
|
|
|
|
// jQuery를 사용하여 모달 직접 닫기
|
|
$('#event-modal').fadeOut(300, function() {
|
|
// 모달이 완전히 닫힌 후 iframe 소스 비우기
|
|
$('#eventIframe').attr('src', 'about:blank');
|
|
});
|
|
|
|
// 타이머 정지
|
|
if (_timer) {
|
|
clearInterval(_timer);
|
|
}
|
|
|
|
if (_reviewCheckInterval) {
|
|
clearInterval(_reviewCheckInterval);
|
|
}
|
|
|
|
// 남은 시간이 없으면 마일리지 적립
|
|
if (_countdownValue <= 0) {
|
|
_participateEvent();
|
|
_showToast('이벤트 보기 완료! 마일리지가 적립되었습니다.');
|
|
}
|
|
}
|
|
|
|
// 타이머 시작 함수
|
|
function _startTimer() {
|
|
// 이미 참여했는지 확인
|
|
_checkParticipationAvailable().then(function(available) {
|
|
if (!available) {
|
|
_isParticipated = true;
|
|
showCustomAlert("이미 참여한 이벤트입니다.");
|
|
// 이미 참여한 경우 UI 업데이트
|
|
_updateUIForCompletedEvent();
|
|
return;
|
|
}
|
|
|
|
// 모달 생성
|
|
_createEventModal();
|
|
|
|
// URL을 iframe에 로드
|
|
$('#eventIframe').attr('src', _eventUrl);
|
|
$('#event-modal').fadeIn(300);
|
|
|
|
// 카운트다운 표시 업데이트
|
|
_countdownValue = _loadingTime;
|
|
_updateTimerDisplay();
|
|
|
|
// 카운트다운 타이머 시작
|
|
_timer = setInterval(function() {
|
|
_countdownValue--;
|
|
_updateTimerDisplay();
|
|
|
|
if (_countdownValue <= 0) {
|
|
clearInterval(_timer);
|
|
_participateEvent();
|
|
_showToast('이벤트 보기 완료! 마일리지가 적립되었습니다.');
|
|
}
|
|
}, 1000);
|
|
|
|
// 모달이 열려있는지 확인하는 인터벌 설정
|
|
_reviewCheckInterval = setInterval(function() {
|
|
// 모달이 닫혀있으면 처리
|
|
if ($('#event-modal').is(':hidden')) {
|
|
clearInterval(_reviewCheckInterval);
|
|
clearInterval(_timer);
|
|
}
|
|
}, 1000);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 타이머 표시 업데이트 함수
|
|
*/
|
|
function _updateTimerDisplay() {
|
|
$('#popupCountdown').text(_countdownValue);
|
|
}
|
|
|
|
/**
|
|
* 이벤트 참여 완료 후 UI 업데이트 함수
|
|
*/
|
|
function _updateUIForCompletedEvent() {
|
|
// 해당 이벤트의 마일리지 표시 요소를 찾아 '적립완료'로 변경
|
|
$('.li_mile[data-bnf-innb="' + _bnfInnb + '"]').addClass('on').html('<span>적립완료</span>');
|
|
}
|
|
|
|
/**
|
|
* 페이지 초기화 함수
|
|
* 페이지 로드 시 이미 참여한 이벤트 표시 업데이트
|
|
*/
|
|
function _initializePage() {
|
|
// 모든 이벤트 요소 확인
|
|
$('.li_mile').each(function() {
|
|
const bnfInnb = $(this).data('bnf-innb');
|
|
if (bnfInnb) {
|
|
// 각 이벤트마다 참여 여부 확인
|
|
_checkEventParticipation(bnfInnb);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 특정 이벤트 참여 여부 확인 및 UI 업데이트
|
|
* @param {number|string} bnfInnb - 이벤트 고유 번호
|
|
*/
|
|
function _checkEventParticipation(bnfInnb) {
|
|
$.ajax({
|
|
url: '/sopmal/bnft/checkParticipationAvailable',
|
|
type: 'POST',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify({
|
|
bnfInnb: bnfInnb
|
|
}),
|
|
success: function(response) {
|
|
try {
|
|
if (response && response.resBody && response.resBody.result) {
|
|
const resultObj = JSON.parse(response.resBody.result);
|
|
// 참여 불가능(이미 참여)한 경우 UI 업데이트
|
|
if (!resultObj.available) {
|
|
_updateUIForCompletedEvent(bnfInnb);
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.error('응답 처리 중 오류 발생:', e);
|
|
}
|
|
},
|
|
error: function(error) {
|
|
console.error('이벤트 참여 여부 확인 실패:', error);
|
|
}
|
|
});
|
|
}
|
|
|
|
// 참여 가능 여부 확인
|
|
function _checkParticipationAvailable() {
|
|
return new Promise(function(resolve, reject) {
|
|
$.ajax({
|
|
url: '/sopmal/bnft/checkParticipationAvailable',
|
|
type: 'POST',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify({
|
|
bnfInnb: _bnfInnb
|
|
}),
|
|
success: function(response) {
|
|
try {
|
|
// 응답 구조에 맞게 처리
|
|
if (response && response.resBody && response.resBody.result) {
|
|
// JSON 문자열을 객체로 파싱
|
|
const resultObj = JSON.parse(response.resBody.result);
|
|
resolve(resultObj.available);
|
|
} else {
|
|
console.error('응답 형식이 올바르지 않습니다:', response);
|
|
resolve(false);
|
|
}
|
|
} catch (e) {
|
|
console.error('응답 처리 중 오류 발생:', e);
|
|
resolve(false);
|
|
}
|
|
},
|
|
error: function(error) {
|
|
console.error('참여 가능 여부 확인 실패:', error);
|
|
resolve(false);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// 이벤트 참여 및 마일리지 적립
|
|
function _participateEvent() {
|
|
if (_isParticipated) return;
|
|
|
|
$.ajax({
|
|
url: '/sopmal/bnft/participateEvent',
|
|
type: 'POST',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify({
|
|
bnfInnb: _bnfInnb
|
|
}),
|
|
success: function(response) {
|
|
try {
|
|
// 응답 구조에 맞게 처리
|
|
if (response && response.resBody && response.resBody.result) {
|
|
// JSON 문자열을 객체로 파싱
|
|
const resultObj = JSON.parse(response.resBody.result);
|
|
|
|
if (resultObj.success) {
|
|
_isParticipated = true;
|
|
|
|
// UI 업데이트: 마일리지 -> 적립완료
|
|
_updateUIForCompletedEvent();
|
|
|
|
// 토스트 메시지 표시
|
|
_showToast('이벤트 보기 완료! 마일리지가 적립되었습니다.');
|
|
} else {
|
|
console.log('resultObj.message', resultObj.message);
|
|
showCustomAlert('마일리지 적립에 실패했습니다.');
|
|
}
|
|
} else {
|
|
console.error('응답 형식이 올바르지 않습니다:', response);
|
|
showCustomAlert('마일리지 적립에 실패했습니다.');
|
|
}
|
|
} catch (e) {
|
|
console.error('응답 처리 중 오류 발생:', e);
|
|
showCustomAlert('마일리지 적립 중 오류가 발생했습니다.');
|
|
}
|
|
},
|
|
error: function(error) {
|
|
console.error('이벤트 참여 실패:', error);
|
|
showCustomAlert('이벤트 참여 중 오류가 발생했습니다.');
|
|
}
|
|
});
|
|
}
|
|
|
|
// 이벤트 시작 함수
|
|
function start(bnfInnb, eventDesc, loadingTime, mileageAmount, eventUrl, startDate, endDate) {
|
|
// 날짜 검증 추가
|
|
if (startDate && endDate) {
|
|
const now = new Date();
|
|
const eventStart = new Date(startDate);
|
|
const eventEnd = new Date(endDate);
|
|
|
|
if (now < eventStart) {
|
|
_showToast("아직 시작되지 않은 이벤트입니다.");
|
|
return;
|
|
}
|
|
|
|
if (now > eventEnd) {
|
|
_showToast("종료된 이벤트입니다.");
|
|
return;
|
|
}
|
|
}
|
|
|
|
_bnfInnb = bnfInnb;
|
|
_eventDesc = eventDesc;
|
|
_loadingTime = loadingTime;
|
|
_mileageAmount = mileageAmount;
|
|
_eventUrl = eventUrl || '';
|
|
_isParticipated = false;
|
|
|
|
// 타이머 종료
|
|
if (_timer) {
|
|
clearInterval(_timer);
|
|
}
|
|
|
|
// 타이머 시작
|
|
_startTimer();
|
|
}
|
|
|
|
// 페이지 초기화 실행
|
|
$(document).ready(function() {
|
|
_initializePage();
|
|
});
|
|
|
|
// 공개 API
|
|
return {
|
|
start: start,
|
|
participateEvent: _participateEvent,
|
|
showToast: _showToast,
|
|
init: _initializePage // 페이지 초기화 함수 노출
|
|
};
|
|
})();
|