merge master into develop - CscListRForm.jsp FAQ 아코디언 버그 수정
This commit is contained in:
jilee4unity
355
build/resources/main/static/mobile/js/bnft/hlthset/Hlthset.js
Normal file
355
build/resources/main/static/mobile/js/bnft/hlthset/Hlthset.js
Normal file
@@ -0,0 +1,355 @@
|
||||
/**
|
||||
* Hlthset.js
|
||||
*
|
||||
* 건강 관심분야 설정 기능을 관리하는 모듈
|
||||
* 사용자가 건강 관심분야를 선택하고 저장하여 맞춤 정보 및 마일리지를 받을 수 있는 기능 구현
|
||||
*/
|
||||
$(document).ready(function() {
|
||||
|
||||
// 전역 변수 - 관심분야 목록 데이터
|
||||
var interestAreas = [];
|
||||
|
||||
// 전역 변수 - 기본 정보 (마일리지 등)
|
||||
var basicInfo = {};
|
||||
|
||||
// 전역 변수 - 혜택 고유 번호
|
||||
var bnfInnb = null;
|
||||
|
||||
// CDN URL (JSP에서 전달받은 값 사용)
|
||||
var cdnUrl = '${cdnurl}';
|
||||
|
||||
/**
|
||||
* 관심건강분야 설정 정보 조회 함수
|
||||
* 서버에서 관심분야 목록 데이터를 가져옴
|
||||
*/
|
||||
function loadHealthInterestInfo() {
|
||||
console.log('=== loadHealthInterestInfo 시작 ===');
|
||||
|
||||
// 서버 API 호출 - 빈 값 또는 null로 요청
|
||||
$.ajax({
|
||||
url: '/sopmal/bnft/selectHealthInterestInfo', // 관심건강분야 설정 정보 조회 API
|
||||
method: 'POST', // HTTP 메서드
|
||||
contentType: 'application/json', // 요청 콘텐츠 타입
|
||||
data: JSON.stringify({}), // 빈 객체로 요청
|
||||
beforeSend: function() {
|
||||
console.log('API 요청 시작 - URL:', '/sopmal/bnft/selectHealthInterestInfo');
|
||||
console.log('요청 데이터:', {});
|
||||
},
|
||||
success: function(response) {
|
||||
console.log('=== API 응답 성공 ===');
|
||||
console.log('전체 응답 데이터:', response);
|
||||
|
||||
try {
|
||||
// 응답에서 관심분야 데이터 추출 및 전역 변수에 저장
|
||||
if (response && response.resBody && response.resBody.result) {
|
||||
// JSON 문자열을 파싱
|
||||
const resultData = JSON.parse(response.resBody.result);
|
||||
console.log('파싱된 resultData:', resultData);
|
||||
|
||||
// 기본 정보 (마일리지, 이벤트 설명 등) 저장
|
||||
if (resultData.basicInfo) {
|
||||
basicInfo = resultData.basicInfo;
|
||||
console.log('기본 정보:', basicInfo);
|
||||
|
||||
// bnfInnb 값을 전역 변수에 저장
|
||||
if (basicInfo.bnfInnb) {
|
||||
bnfInnb = basicInfo.bnfInnb;
|
||||
console.log('bnfInnb 값 설정:', bnfInnb);
|
||||
}
|
||||
|
||||
// 마일리지 정보 화면에 업데이트
|
||||
updateMileageDisplay(basicInfo.mlgRwdAmt);
|
||||
|
||||
// 이벤트 설명 화면에 업데이트
|
||||
updateEventDescription(basicInfo.bnfWordsCn);
|
||||
|
||||
// 동의 여부에 따라 체크박스 상태 설정
|
||||
updateAgreementCheckbox(basicInfo.agreAt);
|
||||
}
|
||||
|
||||
// 관심분야 데이터 처리
|
||||
if (resultData.interestAreas && resultData.interestAreas.length > 0) {
|
||||
console.log('관심분야 개수:', resultData.interestAreas.length);
|
||||
|
||||
// 서버 데이터를 클라이언트에서 사용할 형태로 변환 (choiseAt 포함)
|
||||
interestAreas = resultData.interestAreas.map(function(item, index) {
|
||||
console.log(`관심분야 ${index + 1}:`, item);
|
||||
|
||||
const mappedItem = {
|
||||
id: item.bnfIntrstInnb, // 관심분야 ID
|
||||
name: item.intrstNm, // 관심분야 이름
|
||||
beforeImageUrl: window.cdnUrl + item.bfeImgFilCours, // 이미지 URL
|
||||
sortOrder: item.sortOrdr, // 정렬 순서
|
||||
choiseAt: item.choiseAt || 'N' // 사용자 선택 여부 (기본값 N)
|
||||
};
|
||||
|
||||
console.log(`변환된 관심분야 ${index + 1}:`, mappedItem);
|
||||
return mappedItem;
|
||||
});
|
||||
|
||||
console.log('변환 완료된 interestAreas:', interestAreas);
|
||||
|
||||
// 정렬 순서대로 정렬
|
||||
interestAreas.sort(function(a, b) {
|
||||
return a.sortOrder - b.sortOrder;
|
||||
});
|
||||
|
||||
console.log('정렬 완료된 interestAreas:', interestAreas);
|
||||
} else {
|
||||
console.warn('관심분야 데이터가 없습니다.');
|
||||
interestAreas = [];
|
||||
}
|
||||
} else {
|
||||
console.warn('응답 구조가 올바르지 않습니다.');
|
||||
interestAreas = [];
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('응답 데이터 파싱 실패:', e);
|
||||
interestAreas = [];
|
||||
}
|
||||
|
||||
console.log('최종 interestAreas:', interestAreas);
|
||||
console.log('최종 bnfInnb:', bnfInnb);
|
||||
|
||||
// 관심분야 목록 렌더링
|
||||
console.log('renderInterestList 호출 시작');
|
||||
renderInterestList();
|
||||
|
||||
// 사용자 선택 상태로 UI 업데이트 (choiseAt 값 활용)
|
||||
console.log('updateUIWithUserInterests 호출 시작');
|
||||
updateUIWithUserInterests(interestAreas);
|
||||
|
||||
console.log('=== loadHealthInterestInfo 완료 ===');
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('=== API 호출 실패 ===');
|
||||
console.error('xhr:', xhr);
|
||||
console.error('status:', status);
|
||||
console.error('error:', error);
|
||||
|
||||
showToast('관심분야 정보를 불러오는데 실패했습니다.');
|
||||
|
||||
// 오류 발생 시 빈 배열로 초기화하여 에러 방지
|
||||
interestAreas = [];
|
||||
renderInterestList();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 마일리지 표시 업데이트 함수
|
||||
* 화면의 마일리지 관련 텍스트를 동적으로 업데이트
|
||||
* @param {number} mileageAmount - 마일리지 금액
|
||||
*/
|
||||
function updateMileageDisplay(mileageAmount) {
|
||||
if (mileageAmount && mileageAmount > 0) {
|
||||
// 정수로 변환하여 표시
|
||||
const mileageInt = Math.floor(mileageAmount);
|
||||
|
||||
console.log('마일리지 업데이트:', mileageInt);
|
||||
|
||||
// 상단 마일리지 안내 텍스트 업데이트
|
||||
$('.topupPoint.noSticky span').html(
|
||||
'정보받기 동의하고 저장하면 <i class="ico_mile"></i><b>' +
|
||||
mileageInt.toLocaleString() + ' 원</b>적립'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 이벤트 설명 업데이트 함수
|
||||
* 화면의 이벤트 설명 텍스트를 동적으로 업데이트
|
||||
* @param {string} eventDescription - 이벤트 설명 내용 (HTML 형태)
|
||||
*/
|
||||
function updateEventDescription(eventDescription) {
|
||||
if (eventDescription) {
|
||||
console.log('이벤트 설명 업데이트:', eventDescription);
|
||||
|
||||
// 이벤트 설명 HTML 업데이트 (.text() 대신 .html() 사용)
|
||||
$('.comment-box p:last-child').html(eventDescription);
|
||||
} else {
|
||||
console.log('이벤트 설명이 없습니다.');
|
||||
// 설명이 없는 경우 기본 메시지 표시 (텍스트는 .text() 사용)
|
||||
$('.comment-box p:last-child').text('이벤트 설명을 불러오는 중입니다...');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* UI 업데이트 함수
|
||||
* 관심분야 데이터의 choiseAt 값으로 UI 상태 업데이트
|
||||
* @param {Array} interests - 관심분야 배열 (choiseAt 포함)
|
||||
*/
|
||||
function updateUIWithUserInterests(interests) {
|
||||
// 모든 관심분야 항목 선택 해제 (초기화)
|
||||
$('.favoriteList li').removeClass('on');
|
||||
|
||||
// choiseAt이 'Y'인 관심분야를 선택 상태로 변경
|
||||
interests.forEach(function(interest) {
|
||||
if (interest.choiseAt === 'Y') {
|
||||
// 관심분야 ID로 매칭되는 요소 찾아 선택 상태로 설정
|
||||
$('.favoriteList li img[data-interest-id="' + interest.id + '"]')
|
||||
.closest('li')
|
||||
.addClass('on');
|
||||
|
||||
console.log('Selected interest:', interest.name, 'ID:', interest.id);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 관심분야 목록 렌더링 함수
|
||||
* 서버에서 받아온 관심분야 데이터를 화면에 동적으로 표시
|
||||
*/
|
||||
function renderInterestList() {
|
||||
const $favoriteList = $('.favoriteList'); // 관심분야 목록을 표시할 컨테이너
|
||||
$favoriteList.empty(); // 기존 목록 초기화 (중복 방지)
|
||||
|
||||
// 관심분야 데이터가 없는 경우 처리
|
||||
if (!interestAreas || interestAreas.length === 0) {
|
||||
$favoriteList.append('<li><p style="text-align:center; padding:20px;">관심분야 정보를 불러오는 중입니다...</p></li>');
|
||||
return;
|
||||
}
|
||||
|
||||
// 각 관심분야에 대해 리스트 아이템 생성 및 추가
|
||||
interestAreas.forEach(function(interest) {
|
||||
// 관심분야별 리스트 아이템 구조 생성
|
||||
const $li = $('<li>'); // 리스트 아이템
|
||||
const $a = $('<a>').attr('href', '#'); // 클릭 가능한 링크 요소
|
||||
const $imgP = $('<p>').addClass('img'); // 이미지 컨테이너
|
||||
const $img = $('<img>') // 이미지 요소
|
||||
.attr('src', interest.beforeImageUrl) // 초기 이미지 URL
|
||||
.attr('alt', interest.name) // 대체 텍스트
|
||||
.attr('data-interest-id', interest.id); // 관심분야 ID 데이터 속성
|
||||
const $titleP = $('<p>').addClass('tit').text(interest.name); // 관심분야 이름 요소
|
||||
|
||||
// 요소들 조합하여 DOM에 추가
|
||||
$imgP.append($img); // 이미지를 이미지 컨테이너에 추가
|
||||
$a.append($imgP).append($titleP); // 컨테이너와 제목을 링크에 추가
|
||||
$li.append($a); // 링크를 리스트 아이템에 추가
|
||||
$favoriteList.append($li); // 완성된 아이템을 목록에 추가
|
||||
});
|
||||
|
||||
// 클릭 이벤트 리스너 추가 - 관심분야 선택/해제 토글
|
||||
$('.favoriteList li a').on('click', function(e) {
|
||||
e.preventDefault(); // 기본 링크 동작 방지
|
||||
$(this).closest('li').toggleClass('on'); // 선택 상태 토글 (선택: on 클래스 추가)
|
||||
});
|
||||
}
|
||||
|
||||
// 초기 로딩 함수 호출
|
||||
loadHealthInterestInfo();
|
||||
|
||||
/**
|
||||
* 동의 체크박스 상태 업데이트 함수
|
||||
* 서버에서 받아온 동의 여부에 따라 체크박스 상태를 설정
|
||||
* @param {string} agreementStatus - 동의 여부 ('Y' 또는 'N')
|
||||
*/
|
||||
function updateAgreementCheckbox(agreementStatus) {
|
||||
const $agreementCheckbox = $('#agreementCheckbox');
|
||||
|
||||
if (agreementStatus === 'Y') {
|
||||
// 동의 상태인 경우 체크박스 체크
|
||||
$agreementCheckbox.prop('checked', true);
|
||||
console.log('동의 상태로 체크박스 설정: Y');
|
||||
} else {
|
||||
// 비동의 상태인 경우 체크박스 해제
|
||||
$agreementCheckbox.prop('checked', false);
|
||||
console.log('비동의 상태로 체크박스 설정: N');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 저장 버튼 클릭 이벤트 핸들러
|
||||
* 선택된 관심분야와 동의 여부 확인 후 서버에 저장 요청
|
||||
*/
|
||||
$('#saveBtn').on('click', function() {
|
||||
// bnfInnb 값이 없으면 저장 불가
|
||||
if (!bnfInnb) {
|
||||
showToast('데이터 로딩 중입니다. 잠시 후 다시 시도해주세요.');
|
||||
console.error('bnfInnb 값이 없어서 저장할 수 없습니다.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 동의 체크박스 상태 확인
|
||||
var agreementChecked = $('#agreementCheckbox').is(':checked');
|
||||
|
||||
// 동의 체크박스 미선택 시 알림
|
||||
if (!agreementChecked) {
|
||||
showToast('관심분야 정보받기에 동의해주세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 선택된 관심분야 정보 수집 - on 클래스가 있는 항목만 필터링
|
||||
var selectedInterests = $('.favoriteList li.on').map(function() {
|
||||
return {
|
||||
bnfIntrstInnb: $(this).find('img').data('interest-id'), // 관심분야 ID
|
||||
selected: true // 선택 여부
|
||||
};
|
||||
}).get(); // jQuery 객체를 일반 배열로 변환
|
||||
|
||||
// 최소 1개 이상의 관심분야 선택 여부 확인
|
||||
if (selectedInterests.length === 0) {
|
||||
showToast('최소 1개 이상의 관심분야를 선택해주세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 서버로 전송할 데이터 준비
|
||||
var data = {
|
||||
bnfInnb: bnfInnb, // 전역 변수 사용
|
||||
interestAreas: selectedInterests, // 선택된 관심분야 목록
|
||||
agreAt: agreementChecked ? 'Y' : 'N' // 동의 여부를 Y/N으로 변환
|
||||
};
|
||||
|
||||
console.log('저장할 데이터:', data); // 디버깅용 로그
|
||||
|
||||
// 관심분야 저장 API 호출
|
||||
$.ajax({
|
||||
url: '/sopmal/bnft/saveUserInterests', // 관심분야 저장 API
|
||||
method: 'POST', // HTTP 메서드
|
||||
contentType: 'application/json', // 요청 콘텐츠 타입
|
||||
data: JSON.stringify(data), // 요청 데이터
|
||||
success: function(response) {
|
||||
// 응답 데이터 파싱
|
||||
const result = JSON.parse(response.resBody.result);
|
||||
|
||||
if (result.success) {
|
||||
// 저장 성공 시 알림 표시
|
||||
showToast(result.message);
|
||||
|
||||
// 마일리지 적립 여부 확인 및 처리
|
||||
if (result.mileageAccumulated && result.mlgRwdAmt) {
|
||||
const mileageAmount = Math.floor(result.mlgRwdAmt);
|
||||
showToast('마일리지 ' + mileageAmount.toLocaleString() + '원이 적립되었습니다.');
|
||||
}
|
||||
|
||||
// 사용자 관심분야 정보 다시 로드하여 UI 갱신
|
||||
loadHealthInterestInfo();
|
||||
} else {
|
||||
// 저장 실패 시 오류 메시지 표시
|
||||
showToast('저장 중 오류가 발생했습니다: ' + result.message);
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
// 통신 오류 처리
|
||||
showToast('서버와의 통신 중 오류가 발생했습니다.');
|
||||
console.error('Error:', error);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 토스트 메시지 표시 함수
|
||||
* 사용자에게 일시적인 알림 메시지 표시
|
||||
* @param {string} message - 표시할 메시지 내용
|
||||
*/
|
||||
function showToast(message) {
|
||||
var $toastPop = $('#toastPop'); // 토스트 팝업 요소
|
||||
$toastPop.find('.txt').text(message); // 메시지 설정
|
||||
$toastPop.addClass('show'); // 토스트 표시
|
||||
|
||||
// 2초 후 토스트 메시지 자동 숨김
|
||||
setTimeout(function() {
|
||||
$toastPop.removeClass('show');
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user