412 lines
16 KiB
JavaScript
412 lines
16 KiB
JavaScript
// 쿠폰함 페이지로 이동하는 함수
|
|
function goToCouponPage() {
|
|
// 쿠폰함 페이지 URL로 이동
|
|
window.location.href = '/sopmal/coupon/list';
|
|
}
|
|
|
|
// 새로운 캡슐 만들기 시작하는 함수
|
|
function startNewCapsule() {
|
|
// 제품 선택 페이지로 이동
|
|
window.location.href = '/sopmal/bnft/selectCapsule';
|
|
}
|
|
|
|
// 다른 선물로 다시 시작하는 함수 (리셋 확인 모달에서 호출)
|
|
function resetCapsule() {
|
|
// Ajax 요청으로 현재 진행 상태 초기화
|
|
$.ajax({
|
|
url: '/sopmal/bnft/resetCapsule',
|
|
type: 'POST',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify({
|
|
bnfInnb: $('#bnfInnb').val(),
|
|
bnfSttusInnb: $('#bnfSttusInnb').val()
|
|
}),
|
|
success: function(response) {
|
|
// 응답 구조 변경에 맞게 처리
|
|
const result = JSON.parse(response.resBody.result);
|
|
|
|
if (result.success) {
|
|
// 제품 선택 페이지로 이동
|
|
window.location.href = '/sopmal/bnft/selectCapsule';
|
|
} else {
|
|
alert('초기화 중 오류가 발생했습니다. 다시 시도해주세요.');
|
|
}
|
|
},
|
|
error: function() {
|
|
alert('서버 오류가 발생했습니다. 다시 시도해주세요.');
|
|
}
|
|
});
|
|
}
|
|
|
|
// 모달 초기화 함수
|
|
function initModals() {
|
|
// modal-2(다시 시작 확인) 버튼 이벤트 등록
|
|
$('#modal-2 .microModal__btn:first-child').on('click', function() {
|
|
resetCapsule();
|
|
});
|
|
|
|
// 애니메이션 효과 초기화
|
|
// initCompletionAnimation();
|
|
}
|
|
|
|
// 모달 데이터 로드 및 초기화
|
|
$(document).ready(function() {
|
|
// 모달 초기화: onShow 콜백과 다른 옵션들을 함께 설정
|
|
MicroModal.init({
|
|
disableScroll: true,
|
|
awaitCloseAnimation: true,
|
|
onShow: function(modal) {
|
|
console.log(`Modal shown: ${modal.id}`);
|
|
if (modal.id === 'modal-1') {
|
|
console.log('Loading data for modal-1...');
|
|
loadModalData();
|
|
}
|
|
}
|
|
});
|
|
|
|
// 🔥 문제 부분: 이 코드를 제거하거나 수정해야 함
|
|
// 모달2(다시 시작 확인) 버튼 이벤트 등록을 제거
|
|
// $(document).off('click', '#modal-2 .microModal__btn:first-child').on('click', '#modal-2 .microModal__btn:first-child', function() {
|
|
// resetCapsule();
|
|
// });
|
|
|
|
// 대신 "다른선물로 다시 시작" 버튼에만 resetCapsule을 바인딩
|
|
$(document).off('click', '#restartGameButton').on('click', '#restartGameButton', function(e) {
|
|
e.preventDefault();
|
|
showRestartConfirmModal();
|
|
});
|
|
});
|
|
|
|
// 모달 데이터 로드 함수
|
|
function loadModalData() {
|
|
const bnfInnb = $('#bnfInnb').val() || $('input[name="bnfInnb"]').val();
|
|
|
|
if (!bnfInnb) {
|
|
console.error('bnfInnb 값을 찾을 수 없습니다.');
|
|
return;
|
|
}
|
|
|
|
// AJAX로 최신 진행 상태 데이터 요청
|
|
$.ajax({
|
|
url: '/sopmal/bnft/getProgressStatus',
|
|
type: 'GET',
|
|
data: {
|
|
bnfInnb: bnfInnb
|
|
},
|
|
success: function(response) {
|
|
if (response.resultCode === '0000') {
|
|
// 응답 데이터로 모달 내용 업데이트
|
|
updateModalContent(response.content);
|
|
} else {
|
|
console.error('데이터 로드 실패:', response.message);
|
|
}
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error('AJAX 요청 실패:', error);
|
|
}
|
|
});
|
|
}
|
|
|
|
// 모달 내용 업데이트 함수
|
|
function updateModalContent(data) {
|
|
console.log("updateModalContent 호출됨:", data); // 디버깅용
|
|
|
|
const progressInfo = data.progressInfo;
|
|
|
|
if (!progressInfo) {
|
|
console.error("progressInfo가 없습니다:", data);
|
|
return;
|
|
}
|
|
|
|
// progressStep이 유효한지 확인
|
|
if (!progressInfo.progrsStep || isNaN(parseInt(progressInfo.progrsStep))) {
|
|
console.error("유효하지 않은 progrsStep:", progressInfo.progrsStep);
|
|
progressInfo.progrsStep = 1; // 기본값 설정
|
|
} else {
|
|
// 숫자로 변환
|
|
progressInfo.progrsStep = parseInt(progressInfo.progrsStep);
|
|
}
|
|
|
|
console.log("현재 단계:", progressInfo.progrsStep);
|
|
|
|
// 쇼핑몰 코드에 따른 텍스트 설정
|
|
const brandName = (data.sopmalCd === 'NC') ? '뉴트리' : '닥터린';
|
|
|
|
// 모달 컨테이너 참조
|
|
const $modalContent = $('#modal-1 .microModal__content');
|
|
if ($modalContent.length === 0) {
|
|
console.error("모달 컨테이너를 찾을 수 없습니다");
|
|
return;
|
|
}
|
|
|
|
// 모달 컨텐츠 초기화
|
|
$modalContent.empty();
|
|
|
|
// 게임 상태 요소 생성
|
|
const $gameStatus = $('<div class="gameStatus"></div>');
|
|
$modalContent.append($gameStatus);
|
|
|
|
// 진행 상태에 따라 다른 UI 표시
|
|
// 수정: 5단계 완성 여부를 stepProgressPercentage로 판단
|
|
const isGameCompleted = progressInfo.progrsStep === 5 && progressInfo.stepProgressPercentage >= 100;
|
|
|
|
if (!isGameCompleted) {
|
|
// 진행 중 UI (5단계 진행 중 포함)
|
|
$gameStatus.append(`<p class="tit">${brandName} 캡슐 만들기<br><b>${progressInfo.progrsStep}단계</b> 진행중!!</p>`);
|
|
|
|
// 진행 바 추가 - 실제 진행률 전달
|
|
$gameStatus.append(createStatusBar(progressInfo.progrsStep, progressInfo.stepProgressPercentage || 0));
|
|
|
|
// 선물 정보 추가
|
|
const $gameGift = $('<div class="gameGift"></div>');
|
|
$gameGift.append(`<p class="tit">${brandName} 캡슐을 완성하면 받는 선물이예요.</p>`);
|
|
|
|
const $gameGiftInbox = $('<div class="gameGiftInbox"></div>');
|
|
$gameGiftInbox.append(`<p class="img"><img src="${data.cdnurl}${data.thumbnailPath}" alt="상품 이미지"></p>`);
|
|
|
|
const $txtDiv = $('<div class="txt"></div>');
|
|
$txtDiv.append(`<p class="txt1">${data.productDesc || ''}</p>`);
|
|
$txtDiv.append(`<p class="txt2">${data.productName || ''}</p>`);
|
|
|
|
$gameGiftInbox.append($txtDiv);
|
|
$gameGift.append($gameGiftInbox);
|
|
|
|
// 다른 선물로 다시 시작 버튼 추가
|
|
$gameGift.append(`<div class="alignR">
|
|
<a href="#" class="btn giftReset" id="restartGameButton">
|
|
<i class="ico_giftReset"></i>다른선물로 다시 시작
|
|
</a>
|
|
</div>`);
|
|
|
|
$gameStatus.append($gameGift);
|
|
} else {
|
|
// 완료 상태 UI 구성 (5단계 100% 완성 시에만)
|
|
$gameStatus.append(`
|
|
<p class="tit">${brandName} 캡슐 만들기 최종 완료!</p>
|
|
<p class="tit2">진짜 영양제 선물받고<br>새로운 캡슐 만들기 시작하세요.</p>
|
|
`);
|
|
|
|
// 진행 바 추가 - 5단계 완료 (100% 전달)
|
|
$gameStatus.append(createStatusBar(5, 100));
|
|
|
|
// 쿠폰 영역 추가
|
|
const $gameCoupon = $('<div class="gameCoupon"></div>');
|
|
$gameCoupon.append(`
|
|
<p class="tit">
|
|
<a href="javascript:goToCouponPage()"><i class="ico_present"></i>쿠폰함에 교환권이 전달되었습니다.</a>
|
|
</p>
|
|
<div class="gameCouponInbox">
|
|
<div class="barcode">
|
|
<img src="/mobile/images/bnft/ico_barcode.svg" width="80" height="80" alt="바코드">
|
|
</div>
|
|
<p class="img"><img src="${data.cdnurl}${data.thumbnailPath}" alt="상품 이미지"></p>
|
|
<div class="txt">
|
|
<p class="txt1">${data.productName || ''}</p>
|
|
<p class="txt2">${data.productDesc || ''}</p>
|
|
</div>
|
|
</div>
|
|
`);
|
|
|
|
$gameStatus.append($gameCoupon);
|
|
|
|
// 새로운 캡슐 만들기 시작하기 버튼 추가
|
|
$gameStatus.append(`
|
|
<div class="btnBox alignC" style="margin-top: 20px;">
|
|
<button type="button" class="btn lg theme newStartButton" onclick="startNewCapsule()">
|
|
새로운 캡슐 만들기 시작하기
|
|
</button>
|
|
</div>
|
|
`);
|
|
}
|
|
|
|
// 알림 박스 추가 - notice2 사용 (디버깅 로그 추가)
|
|
console.log("importantNotice 데이터:", data.importantNotice);
|
|
console.log("notice2 내용:", data.importantNotice?.notice2);
|
|
|
|
const $commentBox = $('<div class="comment-box"></div>');
|
|
const notice2Content = data.importantNotice?.notice2?.replace(/<[^>]*>/g, '') || '';
|
|
|
|
$commentBox.html(`
|
|
<p style="font-size:14px; font-weight:bold; margin-bottom:5px;">참여방법안내</p>
|
|
<p style="color:rgba(0,0,0,0.6); font-size:14px;">${notice2Content}</p>
|
|
`);
|
|
|
|
// CSS 문제 해결을 위한 강제 스타일 적용
|
|
$commentBox.css({
|
|
'background': '#fff',
|
|
'padding': '16px',
|
|
'padding-bottom': '16px', // 정상적인 패딩으로 수정
|
|
'margin-bottom': '0', // 음수 마진 제거
|
|
'min-height': 'auto',
|
|
'display': 'block'
|
|
});
|
|
|
|
$modalContent.append($commentBox);
|
|
|
|
// 렌더링 후 확인용 로그
|
|
console.log("comment-box 렌더링 완료:", $commentBox);
|
|
}
|
|
|
|
// 진행 상태 바 생성 함수 - 단계별로 색상 변경
|
|
function createStatusBar(progressStep, progressPercent) {
|
|
const $statusBarWrap = $('<div class="gameStatusBarWrap"></div>');
|
|
const $statusBar = $('<div class="gameStatusBar"></div>');
|
|
|
|
// 디버깅 로그 추가
|
|
console.log(`createStatusBar 호출: progressStep=${progressStep}, progressPercent=${progressPercent}`);
|
|
|
|
// 수정: 게이지 바 너비 계산 (6개 구간으로 나누기)
|
|
// 시작(0%) → 1단계(16.67%) → 2단계(33.33%) → 3단계(50%) → 4단계(66.67%) → 5단계(83.33%) → 완료(100%)
|
|
let widthPercent;
|
|
|
|
if (progressStep < 5) {
|
|
// 1~4단계: 각 단계당 16.67%씩 할당
|
|
widthPercent = progressStep * 16.67;
|
|
} else if (progressStep === 5) {
|
|
// 5단계: stepProgressPercentage에 따라 83.33%~100% 사이
|
|
const basePercent = 83.33; // 5단계 시작점
|
|
const additionalPercent = (progressPercent || 0) * 0.1667; // 5단계 내 진행률 (최대 16.67%)
|
|
widthPercent = basePercent + additionalPercent;
|
|
} else {
|
|
// 완료 상태
|
|
widthPercent = 100;
|
|
}
|
|
|
|
console.log(`게이지 바 너비: ${widthPercent}%`);
|
|
|
|
// 진행률 표시 바 - 단계에 맞게 너비 조정
|
|
$statusBar.append(`<div class="per" style="width:${widthPercent}%;"></div>`);
|
|
|
|
// 시작 지점
|
|
$statusBar.append('<span class="first">시작</span>');
|
|
|
|
// 각 단계 표시
|
|
for (let i = 1; i <= 4; i++) {
|
|
// 현재 단계 이상인 경우 'on' 클래스 추가
|
|
const isActive = progressStep >= i;
|
|
console.log(`단계 ${i}: ${isActive ? '활성화' : '비활성화'}`);
|
|
|
|
$statusBar.append(`<span class="step0${i} ${isActive ? 'on' : ''}">${i}단계</span>`);
|
|
}
|
|
|
|
// 마지막 단계 - 5단계 완료(100%)일 때만 활성화
|
|
const isLastActive = progressStep === 5 && (progressPercent >= 100);
|
|
console.log(`최종 단계: ${isLastActive ? '활성화' : '비활성화'}`);
|
|
$statusBar.append(`<span class="last ${isLastActive ? 'on' : ''}">5단계</span>`);
|
|
|
|
$statusBarWrap.append($statusBar);
|
|
return $statusBarWrap;
|
|
}
|
|
|
|
// 다른선물로 다시 시작 확인 모달을 표시하는 함수
|
|
function showRestartConfirmModal() {
|
|
console.log("다시 시작 확인 모달 표시 시도");
|
|
|
|
// 모달 HTML 정의
|
|
const restartModalHtml = `
|
|
<div class="microModal microAlert" id="restart-modal" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<h2 class="microModal__title">
|
|
새로운 선물로 변경하여<br>만들기를 처음부터 다시 시작할까요?
|
|
</h2>
|
|
</div>
|
|
<div class="microModal__content">
|
|
<p>
|
|
현재 보유중인 초록잎은 유지되지만<br>
|
|
진행한 내용은 모두 삭제되며<br>
|
|
다시 복구할 수 없습니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="microModal__btnContainer">
|
|
<button class="microModal__btn" id="restartConfirmBtn">처음부터 다시시작</button>
|
|
<button class="microModal__btn microModal__btn-primary" id="restartCancelBtn">그대로 계속할게요</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// 이미 존재하는 restart-modal 제거 (중복 방지)
|
|
$('#restart-modal').remove();
|
|
|
|
// 모달 HTML을 body에 추가
|
|
$('body').append(restartModalHtml);
|
|
|
|
// 모달 표시
|
|
MicroModal.show('restart-modal', {
|
|
onShow: function() {
|
|
console.log("다시 시작 확인 모달이 표시됨");
|
|
}
|
|
});
|
|
|
|
// 버튼 이벤트 핸들러 연결
|
|
$('#restartConfirmBtn').off('click').on('click', function() {
|
|
console.log("처음부터 다시시작 버튼 클릭됨");
|
|
MicroModal.close('restart-modal');
|
|
|
|
// 사용자 선택 확정을 위한 두 번째 확인 모달 표시
|
|
showFinalConfirmModal();
|
|
});
|
|
|
|
$('#restartCancelBtn').off('click').on('click', function() {
|
|
console.log("그대로 계속하기 버튼 클릭됨");
|
|
MicroModal.close('restart-modal');
|
|
});
|
|
}
|
|
|
|
// 최종 확인 모달을 표시하는 함수
|
|
function showFinalConfirmModal() {
|
|
// 모달 HTML 정의
|
|
const finalConfirmModalHtml = `
|
|
<div class="microModal microAlert" id="final-confirm-modal" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body">
|
|
<div class="microModal__top">
|
|
<h2 class="microModal__title">
|
|
정말 처음부터 다시 시작하시겠습니까?
|
|
</h2>
|
|
</div>
|
|
<div class="microModal__content">
|
|
<p>
|
|
지금까지 진행한 내용이 모두 삭제됩니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="microModal__btnContainer">
|
|
<button class="microModal__btn" id="finalCancelBtn">취소</button>
|
|
<button class="microModal__btn microModal__btn-primary" id="finalConfirmBtn">다시 시작하기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// 이미 존재하는 final-confirm-modal 제거 (중복 방지)
|
|
$('#final-confirm-modal').remove();
|
|
|
|
// 모달 HTML을 body에 추가
|
|
$('body').append(finalConfirmModalHtml);
|
|
|
|
// 모달 표시
|
|
MicroModal.show('final-confirm-modal');
|
|
|
|
// 버튼 이벤트 핸들러 연결
|
|
$('#finalConfirmBtn').off('click').on('click', function() {
|
|
console.log("최종 다시 시작하기 버튼 클릭됨");
|
|
MicroModal.close('final-confirm-modal');
|
|
|
|
// 캡슐 선택 페이지로 이동
|
|
resetCapsule();
|
|
});
|
|
|
|
$('#finalCancelBtn').off('click').on('click', function() {
|
|
console.log("최종 취소 버튼 클릭됨");
|
|
MicroModal.close('final-confirm-modal');
|
|
});
|
|
}
|