merge master into develop - CscListRForm.jsp FAQ 아코디언 버그 수정
This commit is contained in:
jilee4unity
@@ -0,0 +1,345 @@
|
||||
// Conrev.js
|
||||
const Conrev = (function() {
|
||||
let timer;
|
||||
let remainingTime;
|
||||
let currentEventId;
|
||||
let startTime;
|
||||
let reviewCheckInterval;
|
||||
let currentSlideIndex = 0;
|
||||
let reviewData = [];
|
||||
let lastViewedSlideIndex = 0;
|
||||
let reviewLayer;
|
||||
|
||||
function initializeSlider() {
|
||||
reviewData = window.reviewData || [];
|
||||
|
||||
const $slider = $('.reviewSlider ul');
|
||||
const $slides = $('.reviewSlider li');
|
||||
const slideCount = $slides.length;
|
||||
let currentSlide = 0;
|
||||
|
||||
// 페이지네이션 도트 추가
|
||||
const $pagination = $('.pagination');
|
||||
for (let i = 0; i < slideCount; i++) {
|
||||
$pagination.append('<div class="dot" data-slide="' + i + '"></div>');
|
||||
}
|
||||
$pagination.find('.dot').first().addClass('active');
|
||||
|
||||
// 슬라이드 이동 함수
|
||||
function moveSlide() {
|
||||
$slider.css('margin-left', -currentSlide * 100 + '%');
|
||||
$pagination.find('.dot').removeClass('active').eq(currentSlide).addClass('active');
|
||||
currentSlideIndex = currentSlide;
|
||||
updateReviewButton();
|
||||
}
|
||||
|
||||
// 이미지 로드
|
||||
loadImages();
|
||||
|
||||
// 페이지네이션 도트 클릭 이벤트
|
||||
$pagination.on('click', '.dot', function() {
|
||||
const newSlideIndex = $(this).data('slide');
|
||||
if (newSlideIndex !== lastViewedSlideIndex) {
|
||||
currentSlide = newSlideIndex;
|
||||
moveSlide();
|
||||
awardMileage();
|
||||
lastViewedSlideIndex = newSlideIndex;
|
||||
}
|
||||
});
|
||||
|
||||
// 마우스 드래그 이벤트
|
||||
let isDragging = false;
|
||||
let startPos = 0;
|
||||
let endPos = 0;
|
||||
|
||||
$slider.on('mousedown touchstart', function(e) {
|
||||
isDragging = true;
|
||||
startPos = e.pageX || e.originalEvent.touches[0].pageX;
|
||||
});
|
||||
|
||||
$(document).on('mouseup touchend', function(e) {
|
||||
if (isDragging) {
|
||||
endPos = e.pageX || e.originalEvent.changedTouches[0].pageX;
|
||||
const diff = endPos - startPos;
|
||||
if (Math.abs(diff) > 50) {
|
||||
currentSlide += (diff > 0) ? -1 : 1;
|
||||
if (currentSlide < 0) {
|
||||
currentSlide = slideCount - 1;
|
||||
} else if (currentSlide >= slideCount) {
|
||||
currentSlide = 0;
|
||||
}
|
||||
moveSlide();
|
||||
}
|
||||
isDragging = false;
|
||||
}
|
||||
});
|
||||
|
||||
// 이미지 드래그 방지
|
||||
$('.reviewSlider img').on('dragstart', function(event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
// 링크 처리
|
||||
$slides.on('click', function() {
|
||||
const link = $(this).data('link');
|
||||
if (link) {
|
||||
window.location.href = link;
|
||||
}
|
||||
});
|
||||
|
||||
// 초기 버튼 설정
|
||||
updateReviewButton();
|
||||
}
|
||||
|
||||
function updateReviewButton() {
|
||||
if (reviewData.length > currentSlideIndex) {
|
||||
const currentReview = reviewData[currentSlideIndex];
|
||||
$('#reviewButton').off('click').on('click', function() {
|
||||
fetchReviewTime(currentReview.bnfInnb);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function fetchReviewTime(bnfInnb) {
|
||||
$.ajax({
|
||||
url: '/sopmal/bnft/getReviewTime',
|
||||
method: 'GET',
|
||||
data: { bnfInnb: bnfInnb },
|
||||
success: function(response) {
|
||||
if (response.success && response.tmeSecnd) {
|
||||
start(bnfInnb, reviewData[currentSlideIndex].linkUrl, response.tmeSecnd);
|
||||
} else {
|
||||
console.error('리뷰 시간 정보를 가져오는데 실패했습니다.');
|
||||
}
|
||||
},
|
||||
error: function(jqXHR, textStatus, errorThrown) {
|
||||
console.error('리뷰 시간 정보 요청 중 오류 발생:', textStatus, errorThrown);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function start(bnfInnb, linkUrl, seconds) {
|
||||
currentEventId = bnfInnb;
|
||||
remainingTime = seconds;
|
||||
startTime = new Date().getTime();
|
||||
|
||||
// 레이어 팝업 생성 및 표시
|
||||
createLayerPopup(linkUrl);
|
||||
$('#countdownTimer').show();
|
||||
startTimer();
|
||||
|
||||
reviewCheckInterval = setInterval(function() {
|
||||
if (!reviewLayer.is(':visible')) {
|
||||
stopTimer();
|
||||
$('#countdownTimer').hide();
|
||||
clearInterval(reviewCheckInterval);
|
||||
cancelMileageAward(); // 레이어가 닫히면 마일리지 적립 취소
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function createLayerPopup(linkUrl) {
|
||||
// 기존 레이어 제거
|
||||
if (reviewLayer) {
|
||||
reviewLayer.remove();
|
||||
}
|
||||
|
||||
// 새 레이어 생성
|
||||
reviewLayer = $('<div>', {
|
||||
id: 'reviewLayer',
|
||||
css: {
|
||||
position: 'fixed',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '80%',
|
||||
height: '80%',
|
||||
backgroundColor: 'white',
|
||||
border: '1px solid black',
|
||||
zIndex: 1000
|
||||
}
|
||||
});
|
||||
|
||||
const header = $(`
|
||||
<header class="header header--sub">
|
||||
<div class="header__wrapper">
|
||||
<div class="header__controls-wrapper">
|
||||
<div class="header__controls">
|
||||
<div class="header__toBack">
|
||||
<button class="header__toBack__btn">
|
||||
<span class="visually-hidden">뒤로가기</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
|
||||
<path fill="#1A1A1A" d="M16.598 3.338a.75.75 0 0 0-1.061 0l-8.132 8.131a.75.75 0 0 0 0 1.061l8.132 8.132a.75.75 0 0 0 1.06-1.06L8.998 12l7.6-7.602a.75.75 0 0 0 0-1.06Z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<h1 class="header__title">베스트 리뷰보기</h1>
|
||||
<div class="header__btn-container">
|
||||
<button class="header__btn"><i class="icon icon_nav-home"></i><span class="visually-hidden">메인으로</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
`);
|
||||
|
||||
const countdownToast = $(`
|
||||
<div class="topupPoint" style="position: fixed; top: 60px; left: 0; right: 0; z-index: 1001;">
|
||||
<span><i class="ico_clock"></i><b id="popupCountdown">${remainingTime}</b>초 동안 리뷰 보면 적립</span>
|
||||
</div>
|
||||
`);
|
||||
|
||||
const iframe = $('<iframe>', {
|
||||
src: linkUrl,
|
||||
css: {
|
||||
width: '100%',
|
||||
height: 'calc(100% - 60px)', // 헤더 높이만큼 빼기
|
||||
border: 'none',
|
||||
marginTop: '60px' // 헤더 아래에 위치
|
||||
}
|
||||
});
|
||||
|
||||
reviewLayer.append(header, countdownToast, iframe);
|
||||
$('body').append(reviewLayer);
|
||||
|
||||
// 뒤로가기 버튼 이벤트
|
||||
header.find('.header__toBack__btn').on('click', function() {
|
||||
closeLayerPopup();
|
||||
});
|
||||
|
||||
// 홈 버튼 이벤트
|
||||
header.find('.header__btn').on('click', function() {
|
||||
// 메인 페이지로 이동하는 로직
|
||||
window.location.href = '/main';
|
||||
});
|
||||
}
|
||||
|
||||
function startTimer() {
|
||||
updateTimerDisplay();
|
||||
|
||||
clearInterval(timer);
|
||||
timer = setInterval(function() {
|
||||
remainingTime--;
|
||||
updateTimerDisplay();
|
||||
|
||||
if (remainingTime <= 0) {
|
||||
clearInterval(timer);
|
||||
completeReviewViewing();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function closeLayerPopup() {
|
||||
if (reviewLayer) {
|
||||
reviewLayer.hide();
|
||||
stopTimer();
|
||||
cancelMileageAward();
|
||||
}
|
||||
}
|
||||
|
||||
function updateTimerDisplay() {
|
||||
$('#countdown, #popupCountdown').text(remainingTime);
|
||||
}
|
||||
|
||||
function completeReviewViewing() {
|
||||
let endTime = new Date().getTime();
|
||||
let duration = (endTime - startTime) / 1000;
|
||||
|
||||
if (duration >= remainingTime) {
|
||||
awardMileage();
|
||||
} else {
|
||||
cancelMileageAward();
|
||||
}
|
||||
|
||||
$('#countdownTimer').hide();
|
||||
}
|
||||
|
||||
function awardMileage() {
|
||||
$.ajax({
|
||||
url: '/sopmal/bnft/awardConrevMileage',
|
||||
method: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify({ bnfInnb: reviewData[currentSlideIndex].bnfInnb }),
|
||||
success: function(response) {
|
||||
let result;
|
||||
try {
|
||||
result = JSON.parse(response);
|
||||
} catch (e) {
|
||||
result = response; // 이미 객체인 경우
|
||||
}
|
||||
|
||||
if (result.result === true) {
|
||||
alert('10원이 적립되었습니다!');
|
||||
} else {
|
||||
console.error('마일리지 적립 실패');
|
||||
}
|
||||
},
|
||||
error: function(jqXHR, textStatus, errorThrown) {
|
||||
console.error('마일리지 적립 요청 중 오류 발생:', textStatus, errorThrown);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function cancelMileageAward() {
|
||||
console.log('마일리지 적립이 취소되었습니다.');
|
||||
// 필요한 경우 서버에 마일리지 적립 취소 요청을 보낼 수 있습니다.
|
||||
}
|
||||
|
||||
function stopTimer() {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
if (reviewCheckInterval) {
|
||||
clearInterval(reviewCheckInterval);
|
||||
}
|
||||
}
|
||||
|
||||
// 이미지 로딩 함수
|
||||
function loadImages() {
|
||||
$('.reviewSlider .thum img').each(function(index) {
|
||||
const $img = $(this);
|
||||
const imgPath = $img.data('img-path');
|
||||
const imgName = $img.data('img-name');
|
||||
|
||||
if (imgPath && imgName) {
|
||||
loadImage(index, imgPath + imgName, $img);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 개별 이미지 로딩
|
||||
function loadImage(index, imagePath, $img) {
|
||||
$.ajax({
|
||||
url: '/sopmal/bnft/image',
|
||||
method: 'GET',
|
||||
data: { path: imagePath },
|
||||
xhrFields: { responseType: 'blob' },
|
||||
success: function(data) {
|
||||
const imageUrl = URL.createObjectURL(data);
|
||||
$img.attr('src', imageUrl);
|
||||
console.log(`Image ${index} loaded successfully`);
|
||||
},
|
||||
error: function() {
|
||||
console.error(`Failed to load image ${index}`);
|
||||
$img.attr('src', '/path/to/fallback-image.jpg');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
init: initializeSlider,
|
||||
start: start,
|
||||
stop: stopTimer,
|
||||
loadImages: loadImages
|
||||
};
|
||||
})();
|
||||
|
||||
// DOM이 로드된 후 슬라이더 초기화
|
||||
$(document).ready(function() {
|
||||
Conrev.init();
|
||||
});
|
||||
|
||||
// 창이 닫힐 때 타이머 정지
|
||||
$(window).on('beforeunload', function() {
|
||||
Conrev.stop();
|
||||
});
|
||||
Reference in New Issue
Block a user