초기소스

This commit is contained in:
jazz
2025-10-29 17:08:05 +09:00
parent e531aa9540
commit 439a379a02
7551 changed files with 1234427 additions and 3 deletions

View File

@@ -0,0 +1,363 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui" %>
<%@ taglib prefix="f" uri="/WEB-INF/tlds/f.tld" %>
<%--
Class Name : NoticeListR.jsp
Description :모바일 샘플.jsp
Modification Information
수정일 수정자 수정내용
------- -------- ---------------------------
2024-07-02 최남식 최초 생성
--%>
<!DOCTYPE html>
<html lang="ko">
<head>
<jsp:include page="/WEB-INF/views/comm/mobile/Include.jsp"/>
</head>
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
<script>
$(document).ready(function (){
/*헤더에 타이틀 set*/
fn_set_header_title("상품Q&A내역");
/*마이크로모달 초기화 id 매핑*/
MicroModal.init(
{
disableScroll: true,
awaitCloseAnimation: true,
});
/*인피니트 스크롤 함수 호출*/
fn_infinite_scroll(fn_add_list,'','footer');
//아코디언 클릭 시 폼 제출 방지
$(".myQnaList__item").click(function (event) {
$target = $(this);
$details = $(this).closest('details');
if(!$details.attr("open")){ //open상태임
const bbscttInnb = $target.attr("bbsctt-innb");
const idx = $target.index(".myQnaList__item");
fn_select_fileInfo(bbscttInnb, idx);
}
});
//수정 폼 이동 버튼
$(document).on('click', '.updateBtn', function () {
const bbscttInnb = $(this).closest('div').find("[name='bbscttInnb']").val();
const bbsId = $("#bbsId").val();
fn_move_qaUpdt(bbscttInnb, bbsId);
});
//삭제 모달 버튼
$(document).on('click', '.deleteBtn', function () {
const bbscttInnb = $(this).closest('div').find("[name='bbscttInnb']").val();
const goodsInnb = $(this).closest('div').find("[name='goodsInnb']").val();
openModal("confirm_del_alert");
$('#delCfrmBtn').attr('bbsctt-innb', bbscttInnb);
$('#delCfrmBtn').attr('goods-innb', goodsInnb);
});
//삭제 버튼
$(document).on('click', '#delCfrmBtn', function () {
const bbscttInnb = $(this).attr("bbsctt-innb");
const goodsInnb = $(this).attr("goods-innb");
const bbsId = $("#bbsId").val();
const bbsTyCd = $("#bbsTyCd").val();
fn_delete_bbsctt(bbscttInnb, bbsId, bbsTyCd, goodsInnb);
});
//삭제 성공 모달 확인 버튼
$(document).on('click','#delSuccessBtn', function(){
closeModal("success_del_alert");
location.reload();
});
});
//게시글 수정
const fn_move_qaUpdt = (bbscttInnb, bbsId) => {
const form = $('<form>', {
'action': '/sopmal/mpage/act/selectGoodsQnaDtlUpdtForm',
'method': 'get'
}).append(
$('<input>', {
'type': 'hidden',
'name': 'bbscttInnb',
'value': bbscttInnb
})
).append(
$('<input>', {
'type': 'hidden',
'name': 'bbsId',
'value': bbsId
})
)
$('body').append(form);
form.submit();
}
//게시글 삭제
const fn_delete_bbsctt =(bbscttInnb,bbsId,bbsTyCd,goodsInnb)=>{
closeModal("confirm_del_alert");
$.ajax({
type: "post",
url: "/sopmal/csc/deleteBbscttDel",
data: {
"delBbscttInnbArr": bbscttInnb,
"bbsId": bbsId,
"bbsTyCd": bbsTyCd,
"goodsInnbArr": goodsInnb
},
success: function () {
openModal("success_del_alert");
$("#delCfrmBtn").removeAttr("bbscttInnb");
$("#delCfrmBtn").removeAttr("goodsInnb");
}
});
}
//해당 게시물 파일정보 get
const fn_select_fileInfo = (bbscttInnb, idx) => {
$.ajax({
type: "post",
url: "/sopmal/mpage/act/selectFileInfo",
data: {"bbscttInnb": bbscttInnb},
success: function (data) {
const resultData = JSON.parse(data.resBody.result);
const fileInfo = resultData.fileInfo;
let img = '';
const cdnurl = '<c:out value="${cdnurl}"/>';
fileInfo.forEach(function (file) {
img += `<img src="\${cdnurl}\${file.filCours}\/\${file.sysFilNm}\" onerror="this.src='/mobile/images/image_placeholder.png'" alt="\${file.orginlFilNm}\"/>`;
});
$(".myQnaList__item").eq(idx).find(".file").html(img);
}
});
}
//인피니티 스크롤 이벤트 콜백 함수
const fn_add_list = () => {
if($("#evtOccrrncAt").val() === 'continue'){
/*다음 페이지로 이동*/
let pageIndex = parseInt($("#pageIndex").val(), 10);
$("#pageIndex").val(pageIndex+1);
$.ajax({
type: "post",
data: {
bbsId: $("#bbsId").val(),
pageIndex: $("#pageIndex").val()
},
url: "/sopmal/mpage/act/selectGoodsQnaInqireAjax",
success: function (data) {
fn_append_List(data);//DATA append 함수
},
});
}
}
// data append 함수
const fn_append_List = (data) => {
data = JSON.parse(data.resBody.result);
let resultData = data.resultList.resultList;
let list = ``;
if(resultData.length > 0){
$("#evtOccrrncAt").val("continue");
resultData.forEach(function (item) {
Object.keys(item).forEach(function (key) {
if (item[key] === null) {
item[key] = "";
}
});
});
// 리스트를 지정된 요소에 추가
resultData.forEach(function(item) {
//분류
let answCn = ``;
if (item.answCn !== null) {
answCn = `[\${item.answCn}]`
}
//답변여부
let answSttus = ``;
let answBbscttCn = ``;
let updtAt= `` ;
if (item.answBbscttInnb !== null) {
answSttus = `<span class="text-complete">답변완료</span>`;
answBbscttCn = `<div class="ck-content">\${item.answBbscttCn}</div>`;
updtAt = ``;
} else {
answSttus = `<span class="text-waiting">답변대기</span>`;
answBbscttCn = `답변 등록 중 입니다.`;
updtAt = `<button type="button" class="textBtns__btn updateBtn"><spring:message code="button.update"/></button>`;
}
list += `<details class="myQnaList__item" bbsctt-innb = "\${item.bbscttInnb}">
<summary class="myQnaList__top">
<div class="myQnaList__image">
<a href="" onclick = "fn_move_goods_dtl(\${item.goodsInnb}); return false;">
<img src="\${item.img}"
onerror="this.src='/mobile/images/image_placeholder.png'" alt="해당 이미지에 대한 설명">
</a>
</div>
<div class="myQnaList__right">
<div class="myQnaList__info">
<p class="myQnaList__info__name">\${item.goodsNm}</p>
<p class="myQnaList__info__question">
<span class="category">\${answCn}</span>
\${item.sj}
</p>
<p class="myQnaList__info__status">
<span>
\${answSttus}
</span>
<span class="myQnaList__info__date">\${item.sumRegistDt}</span>
</p>
<span class="myQnaList__top__chevron"></span>
</div>
</div>
</summary>
<div class="myQnaList__answer">
<p class="myQnaList__answer__question">
\${item.cn}
</p>
<br>
<div class="file"></div>
<br>
<div class="myQnaList__answer__reply">
<p class="myQnaList__answer__reply__text">
<span class="myQnaList__answer__badge">답변</span>
\${answBbscttCn}
</p>
</div>
<div class="textBtns">
<input type = "hidden" name = "bbscttInnb" value = "\${item.bbscttInnb}">
<input type = "hidden" name = "goodsInnb" value = "\${item.goodsInnb}">
<button type="button" class="textBtns__btn deleteBtn"><spring:message code="button.delete"/></button>
\${updtAt}
</div>
</div>
</details>`;
});
$(".myQnaList__item").last().after(list);
} else {
/*데이터 조회 null일시 그 전 페이지 인덱스로 변경*/
$("#evtOccrrncAt").val("stop");
let pageIndex = parseInt($("#pageIndex").val(), 10);
$("#pageIndex").val(pageIndex - 1);
}
};
</script>
<body>
<div class="screen-wrap">
<!-- 헤더 영역 -->
<header class="header header--sub">
<jsp:include page="/WEB-INF/views/comm/mobile/Header.jsp"/>
</header>
<!-- 하단 탭바 -->
<jsp:include page="/WEB-INF/views/comm/mobile/TabBar.jsp"/>
<!-- 메인 컨텐츠 -->
<div class="content-wrap">
<main class="main">
<div class="sub-page">
<div class="myQnaList">
<div class="sub-box">
<c:set value="${resultMap.bbsInfo}" var = "bbsInfo"/>
<input type = "hidden" value = "<c:out value="${bbsInfo.bbsId}"/>" id = "bbsId">
<input type = "hidden" value = "<c:out value="${bbsInfo.bbsTyCd}"/>" id = "bbsTyCd">
<input type = "hidden" name="slangFlterUseAt" id = "slangFlterUseAt" value = "<c:out value="${bbsInfo.slangFlterUseAt}"/>">
<input type = "hidden" value = "<c:out value="${resultMap.bbsctt.pageIndex}"/>" name = "pageIndx" id = "pageIndex">
<input type="hidden" id="evtOccrrncAt" value="continue"/><%--인피니티스크롤 이벤트 발생 여부--%>
<c:choose>
<c:when test = "${ not empty resultMap.resultList.resultList }">
<c:forEach var="resultList" items="${ resultMap.resultList.resultList}">
<details class="myQnaList__item" bbsctt-innb = "<c:out value = '${resultList.bbscttInnb}'/>">
<summary class="myQnaList__top">
<div class="myQnaList__image">
<a href="" onclick = "fn_move_goods_dtl(<c:out value = '${resultList.goodsInnb}'/>); return false;">
<img src="<c:out value = '${cdnurl}${resultList.img}'/>"
onerror="this.src='/mobile/images/image_placeholder.png'" alt="해당 이미지에 대한 설명">
</a>
</div>
<div class="myQnaList__right">
<div class="myQnaList__info">
<p class="myQnaList__info__name"><c:out value="${resultList.goodsNm}"/></p>
<p class="myQnaList__info__question">
<span class="category"><c:if test = "${not empty resultList.answCn}">[<c:out value="${resultList.answCn}"/>]</c:if></span>
<c:out value="${resultList.sj}"/>
</p>
<p class="myQnaList__info__status">
<span>
<c:choose>
<c:when test = "${not empty resultList.answBbscttInnb}">
<span class="text-complete">답변완료</span>
</c:when>
<c:otherwise>
<span class="text-waiting">답변대기</span>
</c:otherwise>
</c:choose>
</span>
<span class="myQnaList__info__date"><c:out value="${resultList.sumRegistDt}"/></span>
</p>
<span class="myQnaList__top__chevron"></span>
</div>
</div>
</summary>
<div class="myQnaList__answer">
<p class="myQnaList__answer__question">
<c:out value="${resultList.cn}"/>
</p>
<br>
<div class="file"></div>
<br>
<div class="myQnaList__answer__reply">
<p class="myQnaList__answer__reply__text">
<span class="myQnaList__answer__badge">답변</span>
<c:choose>
<c:when test = "${not empty resultList.answBbscttInnb}">
<div class = "ck-content"><c:out value="${resultList.answBbscttCn}" escapeXml="false"/></div>
</c:when>
<c:otherwise>
답변 등록 중 입니다.
</c:otherwise>
</c:choose>
</p>
</div>
<div class="textBtns">
<input type = "hidden" name = "bbscttInnb" value = "<c:out value="${resultList.bbscttInnb}"/>">
<input type = "hidden" name = "goodsInnb" value = "<c:out value="${resultList.goodsInnb}"/>">
<button type="button" class="textBtns__btn deleteBtn"><spring:message code="button.delete"/></button>
<c:if test="${empty resultList.answBbscttInnb}">
<button type="button" class="textBtns__btn updateBtn"><spring:message code="button.update"/>
</button>
</c:if>
</div>
</div>
</details>
</c:forEach>
</c:when>
<c:otherwise>
<div class="noResult">
<div class="noResult__image">
<img src="/mobile/images/icon__no-result.png" alt="상품 이미지">
</div>
<p class="noResult__text">등록된 상품 문의가 없습니다.</p>
</div>
</c:otherwise>
</c:choose>
</div>
</div>
</div>
<!-- Top 버튼 -->
<div class="quick-menu__to-top">
<button><i class="icon icon_quick-to-top"></i>
<span class="visually-hidden">위로 가기</span>
</button>
</div>
</main>
<!-- 푸터 -->
<jsp:include page="/WEB-INF/views/comm/mobile/Footer.jsp"/>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,990 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui" %>
<%@ taglib prefix="f" uri="/WEB-INF/tlds/f.tld" %>
<%--
Class Name : BbscttUpdtU.jsp
Description :게시글 수정(모바일).jsp
Modification Information
수정일 수정자 수정내용
------- -------- ---------------------------
2024-07-24 김혜인 최초 생성
--%>
<!DOCTYPE html>
<html lang="ko">
<head>
<jsp:include page="/WEB-INF/views/comm/mobile/Include.jsp"/>
</head>
<script>
$(document).ready(function () {
//hidden value set
fn_update_hidden_value();
/*헤더에 타이틀 set*/
const title = '<c:out value="${resultMap.bbsInfo.bbsNm}" escapeXml="false"/>';
fn_set_header_title(title);
fn_collect_event();
});
/*************************************************************
이벤트 함수
*************************************************************/
const fn_collect_event = () => {
//내용 set
fn_select_cn();
MicroModal.init(
{
disableScroll: true,
awaitCloseAnimation: true,
});
/*휴대전화 포매팅 함수*/
fn_set_event("#answMbtlnb","input",fn_fmt_telno);
/*값 set*/
if($("#answMbtlnb").val()){
const fmtMbtlnb = fn_format_mbtlnb($("#answMbtlnb").val());
$("#answMbtlnb").val(fmtMbtlnb);
}
//내용 텍스트 <br>태그 엔터값으로 replace
const cn = $("#cnBbsUpdt");
let str = cn.text();
str = str.replaceAll(/<br>/ig, '\n');
str = str.replaceAll(/<\/br>/ig, '\n');
str = str.replaceAll(/<br \/>/ig, '\n');
//내용 내 태그 없애기
str = str.replace(/<\/?[^>]+(>|$)/g, "");
//내용 앞에 첫 문자열 앞 공백 지우기
str = str.trimStart();
cn.text(str);
//분류 change시 hidden value값 set
$('#qesitmNmC').on('change', function () {
$("#qesitmInnb").val("");
$("#qesitmNm").val("");
$("#answCn").val("");
const option = $('option:selected', this);
const qesitmInnb = $(option).attr('qesitm-innb');
const answCn = $(option).attr('answ-Cn');
const qesitmNm = $(option).attr('qesitm-nm');
if ($(this).val() !== "") {
$("#qesitmInnb").val(qesitmInnb);
$("#answCn").val(answCn);
$("#qesitmNm").val(qesitmNm);
$("#qesitmAt").val("Y");
} else {
$("#qesitmInnb").val("");
$("#answCn").val("");
$("#qesitmNm").val("");
$("#qesitmAt").val("N");
}
});
//추가입력 항목 라디오 'click' 이벤트
$('.answRadioC').on('click', function () {
const radio = $(this);
//추가입력 항목 내용 요소 get
const answ = radio.closest("div").find('[name="answCnArr[]"]');
//추가입력 항목 내용 요소 get
const qesitmInnb = radio.closest("div").find('[name="qesitmInnbArr[]"]');
//라디오 클릭으로 인한 제어 요소 get
const contrlTarget = radio.closest("div").find('.answRadio');
//항목 고유번호 내용 요소 get
const itmInnb = radio.closest("div").find('[name="itmInnbArr[]"]');
//라디오 클릭 시 disabled 비활성
if (radio.is(":checked")) {
//답변 내용 초기화
answ.val("");
const radioVal = $(radio).attr('itm-cn');
answ.val(radioVal);
//항목 내용 set
qesitmInnb.val("");
const qesitmInnbVal = $(radio).attr('qesitm-innb');
qesitmInnb.val(qesitmInnbVal);
//항목고유번호 내용 set
itmInnb.val("");
const itmInnbVal = $(radio).val();
itmInnb.val(itmInnbVal);
//라디오 주위 input값 disable false처리
contrlTarget.each(function () {
contrlTarget.prop("disabled", false);
radio.closest("div").find(".answRadioAt").val("Y");
});
} else {
contrlTarget.each(function () {
contrlTarget.prop("disabled", true);
radio.closest("div").find(".answRadioAt").val("N");
});
}
});
//추가입력 항목 셀렉트 'change'이벤트
$(document).on('change', '.answSelectC', function () {
const select = $(this);
const answ = select.closest("div").find('[name="answCnArr[]"]');
const qesitmInnb = select.closest("div").find('[name="qesitmInnbArr[]"]');
const contrlTarget = select.closest("div").find('.answSelect');
const option = $('option:selected', this);
if (select.val() != "") {
//답변 내용 초기화
answ.val("");
const selectVal = $(option).attr('itm-cn');
answ.val(selectVal);
//항목 내용 set
qesitmInnb.val("");
const qesitmInnbVal = $(option).attr('qesitm-innb');
qesitmInnb.val(qesitmInnbVal);
//셀렉트 주위 input값 disable false처리
contrlTarget.each(function () {
contrlTarget.prop("disabled", false);
select.closest("div").find(".answSelectAt").val("Y");
});
} else {
contrlTarget.each(function () {
contrlTarget.prop("disabled", true);
select.closest("div").find(".answSelectAt").val("N");
});
}
});
//추가입력 항목 체크박스 'click'이벤트
$(document).on('click', '.answChkC', function () {
const check = $(this);
const contrlTarget = check.closest("div").find('.answChk');
var isChecked = $(this).is(":checked");
//클릭한 체크박스 주위 input값 disable false처리
contrlTarget.each(function () {
if (isChecked) {
$(this).prop("disabled", false);
} else {
$(this).prop("disabled", true);
}
});
// 체크된 체크박스가 하나라도 있는지 확인
let anyChecked = $('.answChkC:checked').length > 0;
contrlTarget.each(function () {
if (anyChecked) {
check.closest("td").find(".answChkAt").val("Y");
} else {
check.closest("td").find(".answChkAt").val("N");
}
});
});
//추가입력 항목 텍스트 'input'이벤트
$(document).on('input', '.answTxtC', function () {
const txt = $(this);
const contrlTarget = txt.closest("div").find('.answTxt');
const contrlAt = txt.closest("div").find('.answTxtAt');
//클릭한 체크박스 주위 input값 disable false처리
if (txt.val() != "") {
contrlTarget.each(function () {
contrlTarget.prop("disabled", false);
contrlAt.val("Y");
});
} else {
contrlTarget.each(function () {
contrlTarget.prop("disabled", true);
contrlAt.val("N");
});
}
});
//파일 업로드
$(document).on("change", "#fileUpload", function () {
addFiles(event, 0);
});
//수정 버튼 이벤트 (수정 컨펌 모달 호출)
$(document).on("click", "#updtBtn", function () {
$("#confirmBtn").click();
});
//수정 컨펌 이벤트(수정 함수 호출)
$("#confirmPopBtn").on("click",function(){
$("#clsConfirmPopBtn").click();//모달닫기
fn_update_bbsctt();//수정 함수 호출
});
//수정 완료 모달 > 확인 버튼 이벤트 (새로고침)
$(document).on("click", "#alertBtn", function () {
$('html').scrollTop(0);
location.reload();
});
/*sms알림요청 체크 시에만 휴대전화 입력폼 활성화*/
$("#answSmsRecptn").on('click', function() {
const target = $(this).closest(".userForm__inputBox__item").find("#answMbtlnb");
if(this.checked) {
target.prop("disabled", false);
} else {
target.prop("disabled", true);
}
});
}
/*********************************************************
* 게시글 내용 조회
*********************************************************/
const fn_select_cn = function () {
let bbscttInnb = $("#bbscttInnb").val();
let bbsId = $("#bbsId").val();
let sopmalCd = $("#sopmalCd").val();
$.ajax({
type: "post",
url: "<c:url value ='/ajax/bbscttAjax/selectBOBbscttCnAjax'/>",
contentType: 'application/json',
data: JSON.stringify({
bbsId: bbsId,
bbscttInnb: bbscttInnb,
sopmalCd: sopmalCd
}),
success: function (data) {
let cn = data.result.cn;
$("#cnBbsUpdt").val(cn);
}
});
}
//input 생성 함수
const fn_create_input = (name, value, tgtForm) => {
const input = document.createElement('input');
input.setAttribute("type", "hidden");
input.setAttribute("name", name);
input.setAttribute("value", value);
tgtForm.appendChild(input);
}
/*********************************************************
* 게시글 수정
*********************************************************/
const fn_update_bbsctt = function () {
let url = '<c:url value="/sopmal/csc/updateBbscttupdt"/>';
let saveForm = $('#bbsUpdtForm');
let formData = new FormData();
//파일 업로드
if ($("#image-dropzone").length > 0) {
let myDropzone = Dropzone.forElement("#image-dropzone");
myDropzone.files.forEach(function (file) {
formData.append("files", file);
});
}
//사용자 등록 시 노출 여부 Y
formData.append("expsrAt", "Y");
//비밀번호 set
const password = "<c:out value = "${ resultMap.bbscttInfo.bbscttInfo.password }"/>";
if (password.length){
formData.append("password", password);
}
//입력항목 체크박스 disabled처리
$('.checkbox input[type="checkbox"]').each(function () {
if (!$(this).prop('checked')) {
fn_ctrl_disable([".checkbox"],);
}
});
let cn = $("#cnBbsUpdt").val();
cn = $.trim(cn);
$("#cnBbsUpdt").val(cn);
//폼 내 input값 append
saveForm.serializeArray().forEach(function (item) {
formData.append(item.name, item.value);
});
$.ajax({
type: 'post',
url: url,
enctype:"multipart/form-data",
data: formData,
processData: false,
contentType: false,
success: function (result) {
$("#successBtn").click();
}
});
fn_ctrl_disable("", [".checkbox"]);
}
function fn_update_hidden_value() {
//분류 항목
const option = $('option:selected', $("#qesitmNmC"));
const qesitmInnb = $(option).attr('qesitm-innb');
const answCn = $(option).attr('answ-Cn');
const qesitmNm = $(option).attr('qesitm-nm');
if ($("#qesitmNmC").val() != "") {
$("#qesitmInnb").val(qesitmInnb);
$("#answCn").val(answCn);
$("#qesitmAt").val("Y");
} else {
$("#qesitmInnb").val("");
$("#answCn").val("");
$("#qesitmAt").val("N");
}
// 추가평가항목 라디오
const radio = $(".answRadioC:checked");
radio.each(function (idx) {
if (radio.eq(idx).val()) {
let radioAnsw = radio.eq(idx).closest("reviewRadio__item").find('[name="answCnArr[]"]');
let radioQesitmInnb = radio.eq(idx).closest("reviewRadio__item").find('[name="qesitmInnbArr[]"]');
let radioItmInnb = radio.eq(idx).closest("reviewRadio__item").find('[name="itmInnbArr[]"]');
let radioQesitmAt = radio.eq(idx).closest("reviewRadio__item").find('[name="qesitmAtArr[]"]');
let radioContrlTarget = radio.eq(idx).closest("reviewRadio__item").find('.answRadio');
// 답변 내용 set
radioAnsw.val(radio.eq(idx).attr('itm-cn'));
// 항목 내용 set
radioQesitmInnb.val(radio.eq(idx).attr('qesitm-innb'));
// 항목고유번호 내용 set
radioItmInnb.val(radio.eq(idx).val());
// 답변 여부
radioQesitmAt.val("Y");
// 라디오 주위 input값 disable false처리
radioContrlTarget.each(function (idx) {
radioContrlTarget.eq(idx).prop("disabled", false);
});
} else {
let radioAnsw = radio.eq(idx).closest("reviewRadio__item").find('[name="answCnArr[]"]');
let radioQesitmInnb = radio.eq(idx).closest("reviewRadio__item").find('[name="qesitmInnbArr[]"]');
let radioItmInnb = radio.eq(idx).closest("reviewRadio__item").find('[name="itmInnbArr[]"]');
let radioQesitmAt = radio.eq(idx).closest("reviewRadio__item").find('[name="qesitmAtArr[]"]');
let radioContrlTarget = radio.eq(idx).closest("div").find('.answRadio');
// 답변 내용 set
radioAnsw.val("");
// 항목 내용 set
radioQesitmInnb.val("");
// 항목고유번호 내용 set
radioItmInnb.val("");
// 답변 여부
radioQesitmAt.val("N");
// 라디오 주위 input값 disable false처리
radioContrlTarget.each(function (idx) {
radioContrlTarget.eq(idx).prop("disabled", true);
});
}
});
//추가입력 항목 셀렉트 'change'이벤트
const select = $('select.answSelectC[name="itmInnbArr[]"]');
select.each(function (idx) {
let selectIndex = select.eq(idx).find('option:selected').index();
if (selectIndex > 0) {
let selectQesitmAt = select.eq(idx).closest("reviewRadio__item").find('[name="qesitmAtArr[]"]');
let selectQesitmInnb = select.eq(idx).closest("reviewRadio__item").find('[name="qesitmInnbArr[]"]');
let selectAnsw = select.eq(idx).closest("reviewRadio__item").find('[name="answCnArr[]"]');
let selectOption = $('option:selected', select.eq(idx));
let selectContrlTarget = select.eq(idx).closest("reviewRadio__item").find('.answSelect');
// 답변 여부
selectQesitmAt.val("Y");
// 항목 내용 set
selectQesitmInnb.val(selectOption.attr('qesitm-innb'));
// 답변 내용 set
selectAnsw.val(selectOption.attr('itm-cn'));
// 라디오 주위 input값 disable false처리
selectContrlTarget.each(function (idx) {
selectContrlTarget.eq(idx).prop("disabled", false);
});
} else {
let selectQesitmAt = select.eq(idx).closest("reviewRadio__item").find('[name="qesitmAtArr[]"]');
let selectQesitmInnb = select.eq(idx).closest("reviewRadio__item").find('[name="qesitmInnbArr[]"]');
let selectAnsw = select.eq(idx).closest("reviewRadio__item").find('[name="answCnArr[]"]');
let selectContrlTarget = select.eq(idx).closest("reviewRadio__item").find('.answSelect');
// 답변 여부
selectQesitmAt.val("N");
// 항목 내용 set
selectQesitmInnb.val("");
// 답변 내용 set
selectAnsw.val("");
// 라디오 주위 input값 disable false처리
selectContrlTarget.each(function (idx) {
selectContrlTarget.eq(idx).prop("disabled", true);
});
}
});
const check = $(".answChkC");
//클릭한 체크박스 주위 input값 disable false처리
check.each(function (idx) {
let checkContrlTarget = check.eq(idx).closest(".checkbox").find('.answChk');
let isChecked = check.eq(idx).is(":checked");
checkContrlTarget.each(function (index) {
if (isChecked) {
checkContrlTarget.eq(index).prop("disabled", false);
} else {
checkContrlTarget.eq(index).prop("disabled", true);
}
});
// 체크된 체크박스가 하나라도 있는지 확인
let anyChecked = check.eq(idx).closest("reviewRadio__inputRow").find(".answChkC:checked").length > 0;
if (anyChecked) {
check.eq(idx).closest("reviewRadio__inputRow").find(".answChkAt").val("Y");
} else {
check.eq(idx).closest("reviewRadio__inputRow").find(".answChkAt").val("N");
}
});
//추가입력 항목 텍스트 'input'이벤트
const txt = $('.answTxtC');
txt.each(function (idx) {
let contrlTarget = txt.eq(idx).closest("div").find('.answTxt');
let contrlAt = txt.eq(idx).closest("div").find('.answTxtAt');
//클릭한 체크박스 주위 input값 disable false처리
if (txt.val() != "") {
contrlTarget.each(function () {
contrlTarget.prop("disabled", false);
contrlAt.val("Y");
});
} else {
contrlTarget.each(function () {
contrlTarget.prop("disabled", true);
contrlAt.val("N");
});
}
});
}
/*상품qna 버튼 클릭 제어*/
function fn_prevent_click(event) {
event.preventDefault(); // 체크박스 상태 변경 방지
}
</script>
<body>
<c:set value="${resultMap.bbscttInfo.bbscttInfo}" var="bbscttInfo"/>
<c:set value="${resultMap.bbscttVO}" var="bbscttVO"/>
<c:set value="${resultMap.bbscttInfo.qesitmAnswList}" var="qesitmAnswList"/>
<c:set value="${resultMap.bbscttInfo.fileInfo}" var="fileInfo"/>
<c:set value="${resultMap.bbscttInfo.fileInfoGson}" var="fileInfoGson"/>
<c:set value="${resultMap.bbscttInfo.goods}" var="goods"/>
<c:set value="${resultMap.bbscttInfo.wrter}" var="wrter"/>
<c:set value="${resultMap.bbsInfo}" var="bbsInfo"/>
<c:set value="${resultMap.qesitmList.qesitmList}" var="qesitmList"/>
<c:set value="${resultMap.qesitmList.itmCnList}" var="itmCnList"/>
<c:set value="${resultMap.itmList}" var="itmList"/>
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
<!-- 메인 컨텐츠 영역 -->
<div class="screen-wrap">
<!-- 헤더 영역 -->
<header class="header header--sub">
<jsp:include page="/WEB-INF/views/comm/mobile/Header.jsp"/>
</header>
<!-- 하단 탭바 -->
<jsp:include page="/WEB-INF/views/comm/mobile/TabBar.jsp"/>
<!-- 메인 컨텐츠 -->
<div class="content-wrap">
<main class="main">
<div class="sub-page">
<div class="myQnaEdit">
<div class="sub-box">
<form id="bbsUpdtForm">
<%--게시판 설정--%>
<input type="hidden" name="filAtch" value="${bbsInfo.filAtch }"/>
<input type="hidden" name="slangFlterUseAt" value="${bbsInfo.slangFlterUseAt}"/>
<input type="hidden" id = "bbsId" name="bbsId" value="${bbsInfo.bbsId }"/>
<input type="hidden" id = "bbsTyCd" name="bbsTyCd" value="${bbsInfo.bbsTyCd }"/>
<input type="hidden" id="pgeVtcCnt" name="pgeVtcCnt" value="${ bbsInfo.pgeVtcCnt }"/>
<input type="hidden" id="pgeWthCnt" name="pgeWthCnt" value="${ bbsInfo.pgeWthCnt }"/>
<input type="hidden" id="prevNext" name="prevNext" value="${ bbsInfo.prevNext }"/>
<input type="hidden" id="sknTyCd" name="sknTyCd" value="${ bbsInfo.sknTyCd }"/>
<input type="hidden" id="sopmalCd" name="sopmalCd" value="${ bbsInfo.sopmalCd }"/>
<%--vo 관련(요청 구분 등)--%>
<input type="hidden" id="reqDv" value="<c:out value = '${bbscttVO.reqDv}'/>" name="reqDv"/>
<input type="hidden" id="reqUrl" value="<c:out value = '${bbscttVO.reqUrl}'/>" name="reqUrl"/>
<input type="hidden" id="listAt" name="listAt" value="${ bbscttVO.listAt }"/>
<%--게시글 관련--%>
<input type="hidden" id="bbscttInnb" name="bbscttInnb" value="${ bbscttInfo.bbscttInnb }"/>
<%--파일 관련--%>
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.extensions.images')" var="acceptFileExtensions"/>
<input type="hidden" id="acceptFileExtensions" name="acceptFileExtensions" value="${ acceptFileExtensions}"/>
<%--존재 파일 여부 체크--%>
<c:choose>
<c:when test = "${not empty fileInfo}"><c:set var="filExtAt" value="Y"/></c:when>
<c:otherwise><c:set var="filExtAt" value="N"/></c:otherwise>
</c:choose>
<input type="hidden" id="filExtAt" name="filExtAt" value="${filExtAt}"/>
<input type="hidden" id="extFiles" name="extFiles" value=""/>
<input type="hidden" id="filesInfo" name="filesInfo"/>
<input type="hidden" id="extFilChangeAt" name="extFilChangeAt" value="N"/>
<%--입력 폼 영역--%>
<div class="userForm">
<div class="userForm__inputBox">
<div class="userForm__inputBox__item">
<div class="userForm__inputBox__itemTitle">이름
<span class="required-asterisk">*</span>
</div>
<c:choose>
<c:when test = "${bbscttInfo.regusrDvCd eq '99'}">
<input type="text" class="input-text full" name="regusrNm"
placeholder="이름" title="이름" value = "<c:out value="${bbscttInfo.regusrNm}"/>">
</c:when>
<c:otherwise>
<input type="text" class="input-text full" name="regusrNm"
placeholder="이름" title="이름" value = "<c:out value="${bbscttInfo.regusrNm}"/>" readonly>
</c:otherwise>
</c:choose>
</div>
<c:if test="${bbsInfo.answRegist eq 'Y' && bbsInfo.bbscttSndngMthCd ne '03'}"><%--답변사용여부와 게시글 문자사용여부 체크--%>
<div class="userForm__inputBox__item">
<div class="userForm__inputBox__itemTitle">답변받기</div>
<div class="b-checkbox-container">
<label class="b-checkbox is-medium checkbox">
<input class="termCheck" type="checkbox" name="answSmsRecptn"
value="Y" id="answSmsRecptn"
<c:if test="${bbscttInfo.answSmsRecptn eq 'Y'}">checked</c:if>>
<span class="check"></span>
<span class="control-label">SMS 알림요청</span>
</label>
</div>
</div>
</c:if>
<div class="userForm__inputBox__item">
<div class="userForm__inputBox__itemTitle">상품</div>
<c:forEach var="goods" items="${goods}">
<div class="userForm__inputBox__itemTitle">
<img src="${cdnurl}${goods.img}" width="64" alt="상품이미지" onerror="this.src='/pc/images/image_placeholder.png'">
<c:out value="${goods.goodsNm}"/>
<input type="hidden" name="goodsInnbArr[]" value="${goods.goodsInnb}"/>
</div>
</c:forEach>
</div>
<c:if test="${not empty itmList}">
<div class="userForm__inputBox__item">
<div class="userForm__inputBox__itemTitle">문의 유형<span
class="required-asterisk">*</span></div>
<div class="select-box">
<%--문항답변필수여부 --%>
<input type="hidden" name="qesitmEssntlAtArr[]" value="Y">
<%--문항명 --%>
<input type="hidden" name="qesitmNmArr[]" id="qesitmNm" value="분류"/>
<%--문항고유번호 --%>
<input type="hidden" name="qesitmInnbArr[]" id="qesitmInnb"
<c:forEach var="itmAnswList" items="${qesitmAnswList}">
<c:if test="${itmAnswList.aditItmDvCd eq '03'}">
value = <c:out value="${itmAnswList.qesitmInnb}"/>
</c:if>
</c:forEach>/>
<%--답변내용 --%>
<input type="hidden" name="answCnArr[]" id="answCn"<c:forEach
var="itmAnswList" items="${qesitmAnswList}">
<c:if test="${itmAnswList.aditItmDvCd eq '03'}">
value = <c:out value="${itmAnswList.answCn}"/>
</c:if>
</c:forEach>/>
<%--답변여부 --%>
<input type="hidden" name="qesitmAtArr[]" id="qesitmAt"
<c:forEach var="itmAnswList" items="${qesitmAnswList}">
<c:if test="${itmAnswList.aditItmDvCd eq '03'}">
<c:choose>
<c:when test="${empty itmAnswList.answCn}">value="N"</c:when>
<c:otherwise>value="Y"</c:otherwise>
</c:choose>
</c:if>
</c:forEach>>
<select class="md" id="qesitmNmC" name="itmInnbArr[]">
<option value="">분류 선택</option>
<c:forEach var="itm" items="${itmList}" varStatus="status">
<option value="<c:out value="${itm.itmInnb}"/>"
qesitm-innb="${itm.qesitmInnb}" answ-Cn="${itm.itmCn}"
qesitm-nm="${itm.qesitmNm}"
<%--분류 답변 값 유지--%>
<c:forEach var="itmAnswList" items="${qesitmAnswList}">
<c:if test="${itmAnswList.aditItmDvCd eq '03'}">
<c:if test="${itm.itmInnb eq itmAnswList.itmInnb }">selected</c:if>
</c:if>
</c:forEach>>
<c:out value="${itm.itmCn}"/>
</option>
</c:forEach>
</select>
</div>
</div>
</c:if>
<c:if test="${not empty qesitmList}">
<div class="reviewRadio">
<c:forEach var="qesitmList" items="${qesitmList}">
<c:if test="${ qesitmList.itmTyCd eq '01'}">
<%--라디오 유형--%>
<div class="reviewRadio__item">
<div class="reviewRadio__title">
<c:out value="${ qesitmList.qesitmNm }"/>
<c:if test="${qesitmList.qesitmEssntlAt eq 'Y'}">
<span class="required-asterisk">*</span>
</c:if>
</div>
<div class="custom-radio-container">
<input type="hidden" name="qesitmEssntlAtArr[]"
value="${ qesitmList.qesitmEssntlAt}"
class="essntlChk">
<input type="hidden" name="qesitmNmArr[]"
value="${ qesitmList.qesitmNm}">
<input type="hidden" name="qesitmAtArr[]"
class="answRadioAt qesitmAtChk" value="N">
<input type="hidden" name="qesitmInnbArr[]"
class="answRadio"
value="${ qesitmList.qesitmInnb }" disabled>
<input type="hidden" name="answCnArr[]" class="answRadio"
disabled>
<input type="hidden" name="itmInnbArr[]" class="answRadio"
disabled>
<c:forEach items="${itmCnList}" var="itmCnList1" varStatus="status">
<c:if test="${itmCnList1.qesitmInnb eq qesitmList.qesitmInnb}">
<div class="custom-radio is-medium">
<input type="radio" id="answCn${ status.index }"
class="answRadioC"
qesitm-innb='${itmCnList1.qesitmInnb}'
name="itmInnbArr${ qesitmList.qesitmInnb}[]"
value="${ itmCnList1.itmInnb}"
itm-cn="${ itmCnList1.itmCn }"
<c:forEach var="qesitmAnswList1"
items="${qesitmAnswList}">
<c:if test="${qesitmAnswList1.itmTyCd eq '01'}">
<c:if test="${qesitmAnswList1.itmInnb eq itmCnList1.itmInnb}">checked</c:if>
</c:if>
</c:forEach>>
<label for="answCn${ status.index }">${ itmCnList1.itmCn }</label>
</div>
</c:if>
</c:forEach>
</div>
</div>
</c:if>
<c:if test="${ qesitmList.itmTyCd eq '02'}">
<%--셀렉트 유형--%>
<div class="reviewRadio__item">
<div class="reviewRadio__title">
<c:out value="${ qesitmList.qesitmNm }"/>
<c:if test="${qesitmList.qesitmEssntlAt eq 'Y'}">
<span class="required-asterisk">*</span>
</c:if>
</div>
<input type="hidden" name="qesitmEssntlAtArr[]"
value="${ qesitmList.qesitmEssntlAt }" class="essntlChk">
<input type="hidden" name="qesitmNmArr[]"
value="${ qesitmList.qesitmNm }">
<input type="hidden" name="qesitmAtArr[]"
class="answSelectAt qesitmAtChk" value="N">
<input type="hidden" name="qesitmInnbArr[]" class="answSelect"
value="${ qesitmList.qesitmInnb }" disabled>
<input type="hidden" name="answCnArr[]" class="answSelect" disabled>
<div class="select-box">
<select class="md answSelectC" name="itmInnbArr[]">
<option value="">전체</option>
<c:forEach items="${itmCnList}" var="itmCnList2">
<c:if test="${itmCnList2.qesitmInnb eq qesitmList.qesitmInnb}">
<c:set var="selected" value=""/>
<c:forEach var="qesitmAnswList2" items="${qesitmAnswList}">
<c:if test="${qesitmAnswList2.itmInnb eq itmCnList2.itmInnb}">
<c:set var="selected" value="selected"/>
</c:if>
</c:forEach>
<option value="${itmCnList2.itmInnb}"
itm-cn="${itmCnList2.itmCn}"
qesitm-innb="${itmCnList2.qesitmInnb}" ${selected}>
${itmCnList2.itmCn}
</option>
</c:if>
</c:forEach>
</select>
</div>
</div>
</c:if>
<c:if test="${ qesitmList.itmTyCd eq '03'}">
<%--체크박스 유형--%>
<div class="reviewRadio__item">
<div class="reviewRadio__title">
<c:out value="${ qesitmList.qesitmNm }"/>
<c:if test="${qesitmList.qesitmEssntlAt eq 'Y'}">
<span class="required-asterisk">*</span>
</c:if>
</div>
<input type="hidden" name="qesitmEssntlAtArr[]"
value="${ qesitmList.qesitmEssntlAt }" class="essntlChk">
<input type="hidden" name="qesitmNmArr[]"
value="${ qesitmList.qesitmNm }">
<input type="hidden" name="qesitmAtArr[]"
class="answChkAt qesitmAtChk"
value="N">
<div class="b-checkbox-container">
<c:forEach items="${itmCnList}" var="itmCnList3">
<c:if test="${itmCnList3.qesitmInnb eq qesitmList.qesitmInnb}">
<label class="b-checkbox checkbox">
<input type="hidden" class="answChk"
name="qesitmInnbArr[]"
value="${ qesitmList.qesitmInnb }" disabled>
<input type="hidden" class="answChk"
name="answCnArr[]"
value="${ itmCnList3.itmCn }" disabled>
<input type="checkbox" class="answChkC"
name="itmInnbArr[]"
value="${ itmCnList3.itmInnb }"
<c:forEach var="qesitmAnswList3" items="${qesitmAnswList}">
<c:if test="${qesitmAnswList3.itmInnb eq itmCnList3.itmInnb}">checked</c:if>
</c:forEach>>
<span class="check"></span>
<span class="control-label">${ itmCnList3.itmCn }</span>
</label>
</c:if>
</c:forEach>
</div>
</div>
</c:if>
<c:if test="${ qesitmList.itmTyCd eq '04'}">
<%--텍스트 유형--%>
<div class="reviewRadio__item">
<div class="reviewRadio__title">
<c:out value="${ qesitmList.qesitmNm }"/>
<c:if test="${qesitmList.qesitmEssntlAt eq 'Y'}">
<span class="required-asterisk">*</span>
</c:if>
</div>
<div class="reviewRadio__inputRow">
<c:forEach items="${itmCnList}" var="itmCnList4">
<c:if test="${itmCnList4.qesitmInnb eq qesitmList.qesitmInnb}">
<input type="hidden" name="qesitmEssntlAtArr[]"
value="${ qesitmList.qesitmEssntlAt }"
class="essntlChk">
<input type="hidden" name="qesitmNmArr[]"
value="${ qesitmList.qesitmNm }">
<input type="hidden" name="qesitmAtArr[]"
class="answTxtAt qesitmAtChk" value="N">
<input type="hidden" class="answTxt"
name="qesitmInnbArr[]"
value="${ qesitmList.qesitmInnb }" disabled>
<input type="hidden" class="answTxt"
name="itmInnbArr[]"
value="${ itmCnList4.itmInnb }" disabled>
<input class="input-text full answTxtC" type="text"
name="answCnArr[]" title="추가문항답변"
placeholder="${ itmCnList4.itmCn }"
maxlength="666"
itm-cn="${ itmCnList4.itmCn }"
qesitm-innb="${itmCnList4.qesitmInnb}"
itm-innb="${itmCnList4.itmInnb}"
<c:forEach var="qesitmAnswList4"
items="${qesitmAnswList}">
<c:if test="${qesitmAnswList4.itmInnb eq itmCnList4.itmInnb}">
value="<c:out value = '${qesitmAnswList4.answCn}'/>"
</c:if>
</c:forEach>>
</c:if>
</c:forEach>
</div>
</div>
</c:if>
</c:forEach>
</div>
</c:if>
<div class="userForm__inputBox__item">
<div class="userForm__inputBox__itemTitle">제목<span
class="required-asterisk">*</span></div>
<input class="input-text full" type="text" title="해당 인풋에 대한 설명" name="sj"
maxlength='100'
placeholder="제목을 입력하세요."
value="<c:out value = "${bbscttInfo.sj}"/>">
<c:if test="${bbsInfo.secretBbsctt eq 'Y'}">
<div class="b-checkbox-container">
<label class="b-checkbox is-medium checkbox">
<input type="checkbox" value="Y" name="secretBbscttAt"
<c:if test="${bbscttInfo.secretBbscttAt eq 'Y'}">checked</c:if>
onclick="fn_prevent_click(event);">
<span class="check"></span>
<span class="control-label">비밀글</span>
</label>
</div>
</c:if>
</div>
<div class="userForm__inputBox__item">
<div class="userForm__inputBox__itemTitle">내용</div>
<textarea class="textarea" rows="12" title="내용 입력란" id="cnBbsUpdt" name = "cn">
<c:out value="${bbscttInfo.cn}"/>
</textarea>
</div>
<%--게시판설정(파일첨부사용여부)--%>
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.extensions.images')" var="acceptFileExtensions"/>
<c:if test="${bbsInfo.filAtch eq 'Y'}">
<div class="fileUplaod">
<div class="fileUplaod__title">이미지 등록</div>
<div class="dropzone-wrapper">
<div class="dropzone" id="image-dropzone"></div>
</div>
<ul class="infoList">
<li>사진첨부는 최대 10MB 이하이며 3개까지 등록할 수 있습니다.</li>
<li>등록 가능 파일은 ${acceptFileExtensions} 파일만 가능합니다.</li>
<li>상품과 무관한 내용이거나 음란 불법적인 내용은 통보없이 삭제할 수 있습니다.</li>
</ul>
</div>
<input type = "hidden" name = "acceptFileExtensions" id = "acceptFileExtensions" value = "${acceptFileExtensions}"/>
</c:if>
<div class="bottomBtnControls">
<button type="button" class="btn xl theme" id = "updtBtn"><spring:message code="button.update"/>하기</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</main>
</div>
<!-- 푸터 -->
<jsp:include page="/WEB-INF/views/comm/mobile/Footer.jsp"/>
</div>
</body>
<%--수정 성공 모달--%>
<button type="button" style="display:none;" data-micromodal-trigger="successUpdtModal" id = "successBtn"></button>
<div class="microModal microAlert" id="successUpdtModal" 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">
<spring:message code="success.common.update"/>
</h2>
</div>
</div>
<div class="microModal__btnContainer">
<button class="microModal__btn microModal__btn-primary" id = "alertBtn"><spring:message code="button.ok"/></button>
</div>
</div>
</div>
</div>
<%--수정 컨펌 모달--%>
<button type="button" style="display:none;" data-micromodal-trigger="confirmUpdtModal" id = "confirmBtn"></button>
<div class="microModal microAlert" id="confirmUpdtModal" 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">
<spring:message code="confirm.common.update"/>
</h2>
</div>
</div>
<div class="microModal__btnContainer">
<button class="microModal__btn" data-micromodal-close aria-label="창 닫기" id = "clsConfirmPopBtn"><spring:message code="button.cancel"/></button>
<button class="microModal__btn microModal__btn-primary" id = "confirmPopBtn"><spring:message code="button.ok"/></button>
</div>
</div>
</div>
</div>
<script>
// Dropzone 파일업로드
if ($("#image-dropzone").length > 0) {
const maxFiles = 3;
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#image-dropzone", {
url: "/file-upload",
maxFilesize: 10,
maxFiles: maxFiles,
acceptedFiles: "${acceptFileExtensions}",
autoProcessQueue: false,
addRemoveLinks: true,
dictDefaultMessage: "",
dictRemoveFile: "삭제",
dictCancelUpload: "취소",
dictCancelUploadConfirmation: "업로드를 취소하시겠습니까?",
dictInvalidFileType: "이 파일은 업로드할 수 없습니다.",
dictFileTooBig: "파일이 너무 큽니다. ({{filesize}}MB). 최대 파일 크기: {{maxFilesize}}MB.",
dictMaxFilesExceeded: "파일을 더 이상 추가할 수 없습니다.",
dictResponseError: "서버에서 응답을 받지 못했습니다.",
init: function () {
let dropzoneInstance = this;
let imageData = ${fileInfoGson};
// 각 이미지를 Dropzone에 추가
$.each(imageData, function (index, image) {
// Dropzone 파일 객체 생성
let mockFile = {name: image.orginlFilNm, size: image.filMg};
dropzoneInstance.emit("addedfile", mockFile);
const cdnurl = '<c:out value="${cdnurl}"/>';
const imagePath = cdnurl + image.filCours + image.sysFilNm;
dropzoneInstance.emit("thumbnail", mockFile, imagePath);
// 이미지 오류 처리
$(mockFile.previewElement).find("img").on("error", function () {
this.src = '/mobile/images/image_placeholder.png'; // 대체 이미지 경로로 설정
});
// Dropzone에 파일 추가
mockFile.customId = image.bbscttAtchmnfilInnb;
dropzoneInstance.files.push(mockFile);
});
// 파일이 삭제될 때마다 호출되는 이벤트 핸들러
this.on("removedfile", function (file) {
const result = dropzoneDeleteFiles("" + file.customId + "", '<c:out value="${bbscttVO.sopmalCd}"/>', "BDFL", 1);
if (result === "N") {//파일 삭제 안할 시 복원
file.customData = {restored: true, customId: file.customId}; //삭제 취소에 의한 구분자 부여
myDropzone.emit("addedfile", file); // 파일을 다시 추가하여 삭제 취소
myDropzone.emit("thumbnail", file, file.dataURL); // 파일의 썸네일을 복원
}
if (myDropzone.files.length < maxFiles) {
$(".dz-message").show();
}
});
//파일 추가
this.on("addedfile", function (file) {
let restoreAt = '';
if (file.customData) { //파일 삭제 복구시
restoreAt = true;
} else {//새파일 추가시
restoreAt = false;
}
if (restoreAt) {// 파일 삭제 복구시 해당 id 재부여
file.customId = file.customData.customId;
} else {//새파일 추가시 임시 id 부여
let fileLength = myDropzone.files.length;
file.customId = "temp" + fileLength;
if (fileLength > maxFiles) {
const dictMaxFilesExceeded = myDropzone.options.dictMaxFilesExceeded;
alert(dictMaxFilesExceeded);
this.removeFile(file);
$(file.previewElement).find(".dz-remove").attr("disabled", true);
}
}
});
// maxFiles 제한 관련 이벤트 핸들러
this.on("maxfilesexceeded", function (file) {
const dictMaxFilesExceeded = myDropzone.options.dictMaxFilesExceeded;
alert(dictMaxFilesExceeded);
this.removeFile(file);
});
}
});
var inputElement = $('input[type="file"].dz-hidden-input');
// name 부여
inputElement.attr('name', 'file');
// id 부여
inputElement.attr('id', 'fileUpload');
if (myDropzone.files.length < maxFiles) {
$(".dz-message").show();
} else {
$(".dz-message").hide();
}
}
//뒤로가기 이벤트 삭제 후 상품문의 페이지로 이동 (수정 후 바로 목록으로 이동)
$(".header__toBack__btn").off("click")
.on("click",function(){
window.location.href="/sopmal/mpage/act/selectGoodsQnaInqire?bbsId=goods_qna";
});
</script>
</html>

View File

@@ -0,0 +1,98 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui" %>
<%@ taglib prefix="f" uri="/WEB-INF/tlds/f.tld" %>
<%--
Class Name : MyRvwRForm.jsp
Description :나의리뷰 폼.jsp
Modification Information
수정일 수정자 수정내용
------- -------- ---------------------------
2024-07-25 김혜인 최초 생성
--%>
<!DOCTYPE html>
<html lang="ko">
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
<c:choose>
<c:when test="${not empty resultMap.resultList.resultList}">
<c:forEach var="resultList" items="${resultMap.resultList.resultList}">
<div class="sub-box">
<div class="myReviewItem">
<div class="myReviewItem__top">
<div class="myReviewItem__image">
<img onclick="fn_move_goods_dtl(<c:out value="${resultList.goodsInnb}"/>)"
style="cursor:pointer;"
src="<c:out value="${cdnurl}${resultList.img}"/>"
onerror="this.src='/mobile/images/image_placeholder.png'" alt="리뷰 상품 사진">
</div>
<div class="myReviewItem__right">
<div class="myReviewItem__info">
<a onclick="fn_move_goods_dtl(<c:out value="${resultList.goodsInnb}"/>)"
style="cursor:pointer;"
class="myReviewItem__info__name"><c:out value="${resultList.goodsNm}"/></a>
<p class="myReviewItem__info__date"><c:out value="${resultList.registDt}"/></p>
</div>
</div>
</div>
<div class="myReviewItem__bottom">
<div class="reviewStars__wrapper">
<c:if test="${not empty resultList.evlScore}">
<div class="reviewStars star-<fmt:formatNumber value="${resultList.evlScore}" pattern="##"/>"></div>
<span class="reviewStars__num"><fmt:formatNumber value="${resultList.evlScore}"
pattern="##"/></span>
</c:if>
</div>
<div class="myReviewItem__reviewText" style="white-space: pre-wrap"><c:out value="${resultList.cn}"/></div>
<button class="myReviewItem__reviewMore" style="display:none;">
<span>더보기</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
class="css-os8cwr" viewBox="0 0 24 24">
<path fill="#1A1A1A"
d="m11.994 14.487 7.35-7.35c.25-.25.546-.37.888-.362.341.008.637.137.887.387s.375.546.375.888c0 .341-.125.637-.375.887l-7.7 7.675c-.2.2-.425.35-.675.45-.25.1-.5.15-.75.15s-.5-.05-.75-.15c-.25-.1-.475-.25-.675-.45l-7.7-7.7c-.25-.25-.37-.541-.362-.875.008-.333.137-.625.387-.875s.546-.375.888-.375c.341 0 .637.125.887.375l7.325 7.325Z">
</path>
</svg>
</button>
<div class="myReviewItem__thumbs">
<c:if test="${not empty resultMap.resultList.fileList}">
<c:forEach var="fileList" items="${resultMap.resultList.fileList}">
<c:if test="${fileList.bbscttInnb eq resultList.bbscttInnb}">
<a class="fullscreen-trigger swiper-index" href="#"
data-micromodal-trigger="my-review-image">
<img src="<c:out value = '${cdnurl}${fileList.filCours}${fileList.sysFilNm}'/>"
onerror="this.src='/mobile/images/image_placeholder.png'" alt="리뷰사진">
</a>
</c:if>
</c:forEach>
</c:if>
</div>
<div class="textBtns">
<button class="textBtns__btn deleteBtn"
bbsctt-innb="<c:out value = '${resultList.bbscttInnb}'/>"
bbs-id="<c:out value = '${resultList.bbsId}'/>"
bbs-ty-cd="<c:out value = '${resultList.bbsTyCd}'/>"
goods-innb="<c:out value = '${resultList.goodsInnb}'/>">
<spring:message code="button.delete"/>
</button>
</div>
</div>
</div>
</div>
</c:forEach>
<input type="hidden" id="myRvwpageIndex" name="pageIndex"
value="<c:out value='${resultMap.bbscttVO.pageIndex}'/>"/>
<input type="hidden" id="myRvwEvtOccrrncAt" value="continue"/>
</c:when>
<c:otherwise>
<div class="noResult">
<div class="noResult__image">
<img src="/mobile/images/icon__no-result.png" alt="상품 이미지">
</div>
<p class="noResult__text">나의 리뷰가 없습니다.</p>
</div>
</c:otherwise>
</c:choose>
</html>

View File

@@ -0,0 +1,952 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui" %>
<%@ taglib prefix="f" uri="/WEB-INF/tlds/f.tld" %>
<%--
Class Name : MyRvwRForm.jsp
Description :나의리뷰 폼.jsp
Modification Information
수정일 수정자 수정내용
------- -------- ---------------------------
2024-07-25 김혜인 최초 생성
--%>
<!DOCTYPE html>
<html lang="ko">
<head>
<jsp:include page="/WEB-INF/views/comm/mobile/Include.jsp"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
</head>
<script>
let swiperThumbs;
let swiper;
$(document).ready(function (){
/*헤더에 타이틀 set*/
fn_set_header_title("리뷰내역");
/*버튼 active 상태로 인한 목록 조회*/
$(".boxTab__tabBtn").on("click", function () {
const id = $(this).attr("id");
if (id === 'posblRvw') {
fn_move_writngPosblRvw(1); //작성가능리뷰
} else {
fn_move_myRvw(1);//나의 리뷰
}
});
/*작성 가능 리뷰 조회*/
$(".boxTab__tabBtn").eq(0).click();
//작성 가능 리뷰 함수
fn_collect_posble_event();
fn_regist_rvw_event();
fn_collect_my_rvw_event();//이벤트 함수
});
// 작성 가능한 리뷰 이벤트
const fn_collect_posble_event = () =>{
//리뷰작성 클릭 시 모달 호출
$(document).on("click", ".rvwBtn", function () {
/*주문 상품 옵션 고유번호*/
const ordrGoodsOptnInnb = $(this).attr("ordr-goods-optn-innb");
/*게시판 타입*/
const bbsTyCd = $(this).attr("bbs-ty-cd");
/*주문 상품 옵션 고유번호*/
const goodsInnb = $(this).val();
fn_move_writeRvw(ordrGoodsOptnInnb, bbsTyCd, goodsInnb);
});
}
// 나의 리뷰 이벤트
const fn_collect_my_rvw_event = () => {
/*1.삭제 컨펌 모달 호출*/
$(document).on("click", ".deleteBtn", function () {
const bbscttInnb = $(this).attr("bbsctt-innb");
const bbsId = $(this).attr("bbs-id");
const bbsTyCd = $(this).attr("bbs-ty-cd");
const goodsInnb = $(this).attr("goods-innb");
$('#delCfrmBtn').attr('bbsctt-innb', bbscttInnb);
$('#delCfrmBtn').attr('bbs-id', bbsId);
$('#delCfrmBtn').attr('bbs-ty-cd', bbsTyCd);
$('#delCfrmBtn').attr('goods-innb', goodsInnb);
openModal("confirm_del_alert");
});
/*2.삭제 컨펌 확인 후 삭제 함수 호출*/
$(document).on("click", "#delCfrmBtn", function () {
closeModal("confirm_del_alert");
const bbscttInnb = $(this).attr("bbsctt-innb");
const goodsInnb = $(this).attr("goods-innb");
const bbsId = $(this).attr("bbs-id");
const bbsTyCd = $(this).attr("bbs-ty-cd");
fn_delete_bbsctt(bbscttInnb, bbsId, bbsTyCd, goodsInnb);//3.게시글 삭제 함수 호출
});
/*4.삭제 성공 모달 확인 버튼 클릭시 리스트 재조회*/
$(document).on("click", "#delSuccessBtn", function () {
closeModal("success_del_alert");
fn_move_myRvw(1);
});
// 리뷰 접기/펼치기
$(document).on("click", ".myReviewItem__reviewMore", function () {
if ($(this).hasClass("opened")) {
$(this).removeClass("opened");
$(this).find('span').text('더보기');
$(this).closest('.myReviewItem').find('.myReviewItem__reviewText').removeClass("opened");
} else {
$(this).addClass("opened");
$(this).find('span').text('접기');
$(this).closest('.myReviewItem').find('.myReviewItem__reviewText').addClass("opened");
}
});
// 모달 트리거 이벤트 리스너
$(document).on('click', '.fullscreen-trigger', function (e) {
imgList = $(this).closest(".myReviewItem__thumbs").find("a");
imgHtml = '';
imgList.each(function () {
let img = $(this).html();
imgHtml += `<div class="swiper-slide">\${img}</div> `;
});
$("#my-review-image").find(".swiper-wrapper").each(function () {
$(this).html(imgHtml);
});
if (swiperThumbs) {
swiperThumbs.destroy(true, true);
}
if (swiper) {
swiper.destroy(true, true);
}
// Swiper
swiperThumbs = new Swiper('.myReviewImageThumbs', {
loop: true,
spaceBetween: 4,
slidesPerView: 'auto',
freeMode: true,
watchSlidesProgress: true,
});
swiper = new Swiper('.myReviewImageSlide', {
loop: true,
slidesPerView: 1,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: swiperThumbs
}
});
e.preventDefault();
var modalId = $(this).attr('data-micromodal-trigger');
openModal(modalId);
});
// 모달 닫기 이벤트 리스너
$(document).on('click', '.microModal .microModal__close', function () {
var modalId = $(this).closest('.microModal').attr('id');
closeModal(modalId);
});
// 리뷰에서 이미지 클릭시 해당 이미지 순서로 슬라이드 이동
var swiperIndex = document.querySelectorAll('.swiper-index');
$(document).on('click','.swiper-index', function () {
var $parent = $(this).parent();
var $siblings = $parent.find('.fullscreen-trigger');
var clickedIndex = $siblings.index(this);
if (swiper) {
swiper.slideTo(clickedIndex, 0);
}
});
}
//게시글 삭제
function fn_delete_bbsctt(bbscttInnb, bbsId, bbsTyCd, goodsInnb) {
$.ajax({
type: "post",
url: "/sopmal/csc/deleteBbscttDel",
data: {
"delBbscttInnbArr": bbscttInnb,
"bbsId": bbsId,
"bbsTyCd": bbsTyCd,
"goodsInnbArr": goodsInnb
},
success: function () {
openModal("success_del_alert");
$("#delCfrmBtn").removeAttr("bbscttInnb");
$("#delCfrmBtn").removeAttr("goodsInnb");
}
});
}
//인피니티 스크롤 이벤트 콜백 함수
function fn_add_list_my_rvw() {
if ($("#myRvwEvtOccrrncAt").val() === 'continue') {
/*다음 페이지로 이동*/
let pageIndex = parseInt($("#myRvwpageIndex").val(), 10);
$("#myRvwpageIndex").val(pageIndex + 1);
$.ajax({
type: "post",
data: {
pageIndex: $("#myRvwpageIndex").val()
},
url: "/sopmal/mpage/act/selectMyRvwInqireAjax",
success: function (data) {
fn_append_List_my_rvw(data);//DATA append 함수
}
});
}
}
// data append 함수
function fn_append_List_my_rvw(data) {
data = JSON.parse(data.resBody.result);
let resultData = data.resultList.resultList;
let fileData = data.resultList.fileList;
let list = ``;
const cdnurl = '<c:out value="${cdnurl}"/>';
if (resultData.length > 0) {
$("#myRvwEvtOccrrncAt").val("continue");
resultData.forEach(function (item) {
Object.keys(item).forEach(function (key) {
if (item[key] === null) {
item[key] = "";
}
});
let cdnurl = "<c:out value='${cdnurl}'/>";
list += `<div class="sub-box">
<div class="myReviewItem">
<div class="myReviewItem__top">
<div class="myReviewItem__image">
<img onclick="fn_move_goods_dtl(\${item.goodsInnb})"
style="cursor:pointer;"
src="\${cdnurl}\${item.img}"
onerror="this.src='/mobile/images/image_placeholder.png'" alt="리뷰 상품 사진">
</div>
<div class="myReviewItem__right">
<div class="myReviewItem__info">
<a onclick="fn_move_goods_dtl(\${item.goodsInnb})"
style="cursor:pointer;"
class="myReviewItem__info__name">\${item.goodsNm}</a>
<p class="myReviewItem__info__date">\${item.registDt}</p>
</div>
</div>
</div>
<div class="myReviewItem__bottom">
<div class="reviewStars__wrapper">`;
if (item.evlScore != null) {
list += ` <div class="reviewStars star-\${item.evlScore}"></div>
<span class="reviewStars__num">\${item.evlScore}</span>`;
}
list += ` </div>
<div class="myReviewItem__reviewText" style="white-space: pre-wrap">\${item.cn}</div>`;
let moreDv = ``;
if (item.cn.length > 150) {
moreDv = `<button class="myReviewItem__reviewMore" style="display:none;">
<span>더보기</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
class="css-os8cwr" viewBox="0 0 24 24">
<path fill="#1A1A1A"
d="m11.994 14.487 7.35-7.35c.25-.25.546-.37.888-.362.341.008.637.137.887.387s.375.546.375.888c0 .341-.125.637-.375.887l-7.7 7.675c-.2.2-.425.35-.675.45-.25.1-.5.15-.75.15s-.5-.05-.75-.15c-.25-.1-.475-.25-.675-.45l-7.7-7.7c-.25-.25-.37-.541-.362-.875.008-.333.137-.625.387-.875s.546-.375.888-.375c.341 0 .637.125.887.375l7.325 7.325Z">
</path>
</svg>
</button>`;
}
list += ` \${moreDv}
<div class="myReviewItem__thumbs">`;
//각 게시글 별 파일 리스트
let fileList = ``;
if (fileData !== null) {
fileData.forEach(function (file) {
if (file.bbscttInnb === item.bbscttInnb) {
fileList += `<a class="fullscreen-trigger swiper-index" href="#" data-micromodal-trigger="my-review-image">
<img src="\${cdnurl}\${file.filCours}\${file.sysFilNm}" onerror="this.src='/mobile/images/image_placeholder.png'" alt="리뷰사진">
</a>`;
}
});
}
list += ` \${fileList}
</div>
<div class="textBtns">
<button class="textBtns__btn deleteBtn"
bbsctt-innb="\${item.bbscttInnb}"
bbs-id="\${item.bbsId}"
bbs-ty-cd="\${item.bbsTyCd}"
goods-innb="\${item.goodsInnb}">
<spring:message code="button.delete"/>
</button>
</div>
</div>
</div>
</div>`;
});
$(".sub-box").last().after(list);
//리스트를 지정된 요소에 추가
resultData.forEach(function (item) {
$(".myReviewItem__reviewText").each(function () {
$(this).text($(this).text().trim());
});
});
} else {
/*데이터 조회 null일시 그 전 페이지 인덱스로 변경*/
$("#myRvwEvtOccrrncAt").val("stop");
let pageIndex = parseInt($("#myRvwpageIndex").val(), 10);
$("#myRvwpageIndex").val(pageIndex - 1);
}
}
/*내용 안 이미지를 삭제하고 br 공백 처리하며, 글자가 150미만이면 더보기 버튼 제거*/
const fn_set_rvw_data = () => {
$(".myReviewItem__reviewText").each(function () {
if ($(this).text().length > 100) {
let idx = $(this).index(".myReviewItem__reviewText");
$(".myReviewItem__reviewMore").eq(idx).show();
}
let cn = $('<div>').html($(this).text());
$(this).text(cn.text().trim());
});
}
//분기에 따른 observer 함수 실행
let observer;
const fn_infinite_scroll_my_rvw = () => {
if (observer) {
observer.disconnect(); // Disconnect the existing observer if it exists
}
observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const sttus = $(".headerTab__item.active").attr("id");
if (sttus === 'posblRvwLi') {
fn_add_list_writng_posbl_rvw();
} else {
fn_add_list_my_rvw();
}
}
});
});
const target = document.querySelector('footer');
observer.observe(target);
};
//작성가능리뷰 조회
const fn_move_writngPosblRvw = (pageIndex) => {
const divZone = $(".availableReview");
//작성 가능 리뷰 조회 div
if (!pageIndex) {
$('#wringPosblpageIndex').val(1);
} else {
$('#wringPosblpageIndex').val(pageIndex);
}
$.ajax({
type: "post",
url: "/sopmal/mpage/act/selectWritngPosblRvwInqire",
data: {"pageIndex": pageIndex},
success: function (data) {
if (divZone.html()) {
divZone.empty();
}
divZone.html(data);
fn_change_active_class("#posblRvwLi", "#myRvwLi");
fn_infinite_scroll_my_rvw();//인피니트스크롤
}
});
}
//나의리뷰 조회
const fn_move_myRvw = (pageIndex) => {
const divZone = $(".availableReview");
if (!pageIndex) {
$('#myRvwpageIndex').val(1);
} else {
$('#myRvwpageIndex').val(pageIndex);
}
$.ajax({
type: "post",
url: "/sopmal/mpage/act/selectMyRvwInqire",
data: {"pageIndex": pageIndex},
success: function (data) {
if (divZone.html()) {
divZone.empty();
}
divZone.html(data);
MicroModal.init();
fn_change_active_class("#myRvwLi", "#posblRvwLi");
fn_set_rvw_data();
fn_infinite_scroll_my_rvw();//인피니트 스크롤
}
});
}
/*요청 페이지에 따른 헤더 nav 클래스 변경*/
const fn_change_active_class = (actTarget, removeTarget) => {
$(removeTarget).removeClass("active");
$(actTarget).addClass("active");
}
//등록버튼 debounce
function debounce(func, timeout = 300) {
console.log("debounce시작")
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, timeout);
};
}
const fn_debounce_regFn = debounce(() => fn_regist_bbsctt($("#bbsId").val()));
//리뷰작성 폼 호출
function fn_move_writeRvw(ordrGoodsOptnInnb, bbsTyCd, goodsInnb) {
$.ajax({
type: "post",
url: "/sopmal/mpage/act/selectRvwWritngPopupForm",
data: {
"ordrGoodsOptnInnb": ordrGoodsOptnInnb,
"bbsTyCd": bbsTyCd,
"goodsInnb": goodsInnb
},
success: function (data) {
$(".dz-hidden-input").remove();
$(".sheet__body").html(data);
$("#triggerBtn").click();
}
});
}
//인피니티 스크롤 이벤트 콜백 함수
function fn_add_list_writng_posbl_rvw() {
if ($("#writngPosbleEvtOccrrncAt").val() === 'continue') {
/*다음 페이지로 이동*/
let pageIndex = parseInt($("#writngPosblePageIndex").val(), 10);
$("#writngPosblePageIndex").val(pageIndex + 1);
$.ajax({
type: "post",
data: {
pageIndex: $("#writngPosblePageIndex").val()
},
url: "/sopmal/mpage/act/selectWritngPosblRvwInqireAjax",
success: function (data) {
fn_append_List_writng_posbl_rvw(data);//DATA append 함수
},
});
}
}
// data append 함수
function fn_append_List_writng_posbl_rvw(data) {
let resultData = JSON.parse(data.resBody.result);
resultData = resultData.resultList;
let list = ``;
if (resultData !== null) {
$("#writngPosbleEvtOccrrncAt").val("continue");
resultData.forEach(function (item) {
Object.keys(item).forEach(function (key) {
if (item[key] === null) {
item[key] = "";
}
});
});
// 리스트를 지정된 요소에 추가
resultData.forEach(function (item) {
//옵션명 있는지 확인
let optnNm = ``;
if (item.optnNm !== "") {
optnNm = `<p class="availableReviewItem__info__option">옵션: \${item.optnNm}</p>`;
}
//리뷰 작성 가능 분기
let rvwBtnDv = ``;
if (item.purchsDcsnQy > item.rvwCnt) {
rvwBtnDv = `<button type="button"
class="btn theme md outline open-sheet availableReviewItem__btn rvwBtn open-sheet"
ordr-goods-optn-innb="\${item.ordrGoodsOptnInnb}"
bbs-ty-cd="06"
value='\${item.goodsInnb}'>리뷰작성
</button>`
}
//한달 리뷰 작성 가능 분기
let mtRvwBtnDv = ``;
if (item.mtRvwAt === 'N') {
mtRvwBtnDv = `<button type="button"
class="btn theme md availableReviewItem__btn rvwBtn open-sheet"
ordr-goods-optn-innb="\${item.ordrGoodsOptnInnb}"
bbs-ty-cd="06"
value='\${item.goodsInnb}'>한달리뷰작성</button>`;
}
let cdnurl = '${cdnurl}';
list = `<div class="availableReviewItem">
<div class="availableReviewItem__top">
<div class="availableReviewItem__image">
<button type="button" class="orderList__image" value="\${item.goodsInnb}"
onclick = "fn_move_goods_dtl(\${item.goodsInnb})">
<img src="\${cdnurl}\${item.img}" alt="" onerror="this.src='/mobile/images/image_placeholder.png'">
</button>
</div>
<div class="availableReviewItem__info">
<p class="availableReviewItem__info__date">
<a onclick="" style="cursor:pointer;" class="orderList__orderNum">\${item.ordrInnb}
</a>
</p>
<a class = "availableReviewItem__info__name"
onclick = "fn_move_goods_dtl(\${item.goodsInnb})"
style = "cursor:pointer">\${item.goodsNm}</a>
\${optnNm}
</div>
</div>
<div class="availableReviewItem__bottom">
<div class="availableReviewItem__desc">
<p class="availableReviewItem__descText">작성리뷰수 <em>\${item.rvwCnt}</em></p>
<p class="availableReviewItem__descText">구매확정수 <em>\${item.purchsDcsnQy}</em></p>
</div>
<div class="availableReviewItem__linkContainer">
\${rvwBtnDv}
\${mtRvwBtnDv}
</div>
</div>
</div>`;
$(".availableReviewItem").last().after(list);
});
} else {
/*데이터 조회 null일시 그 전 페이지 인덱스로 변경*/
$("#writngPosbleEvtOccrrncAt").val("stop");
let pageIndex = parseInt($("#writngPosblePageIndex").val(), 10);
$("#writngPosblePageIndex").val(pageIndex - 1);
}
}
/*********************************************************
* 게시글 등록
*********************************************************/
function fn_regist_bbsctt(bbsId) {
disableButton('#regBtn');
let url = '<c:url value="/sopmal/csc/insertBbscttRegist"/>';
let saveForm = $('#bbsRegForm');
let formData = new FormData();
//파일 업로드
let myDropzone = Dropzone.forElement("#image-dropzone");
myDropzone.files.forEach(function (file) {
formData.append("files", file);
/*한달리뷰시 파일존재여부 체크(validation)*/
});
if (formData.get("files") == null) {
$("#filExtAt").val("N");
}
//내용 get해서 sj
$("[name='sj']").val("");
const cn = $("#cn").val();
const removeTag = cn.replace(/<[^>]+>/g, ''); // HTML 태그 제거
let truncatedSj = removeTag.slice(0, 28); // 28글자로 제한
if (truncatedSj.length > 28) {
truncatedSj += "..."; // 28글자가 넘으면 뒤에 ... 추가
}
//제목
formData.append('sj', truncatedSj);
//체크박스
$('.checkbox input[type="checkbox"]').each(function () {
if (!$(this).prop('checked')) {
fn_ctrl_disable([".checkbox"],);
}
});
//설정정보
formData.append('setupInfoInnb', $("setupInfoInnb").val());
//폼 내 input값 append
saveForm.serializeArray().forEach(function (item) {
formData.append(item.name, item.value);
});
$("#regProccess").val("Y");
$.ajax({
type: 'post',
url: url,
data: formData,
processData: false,
contentType: false,
success: function (result) {
result = JSON.parse(result.resBody.result);
if (result.denyRvw == '0') {
$("#customAlertCn").text("해당 주문건은\n리뷰가 모두 작성되었습니다.");
openModal2("custom_alert");
} else {
if (result.result == '1') {
MicroModal.show('successRegModal');
$('#successOkBtn').off('click').on('click', function () {
$("#successClseBtn").click();
$('.reviewWriting').remove();
fn_move_writngPosblRvw(1);
});
} else {
$("#customAlertCn").text("<spring:message code="fail.common.insert"/>");
openModal2("custom_alert");
}
}
$(".close-sheet").click();
$("#regProccess").val("N");
},
error: function (data, status, error) {
fn_ajax_error(data, status, error); /*공통 처리 함수*/
$("#regProccess").val("N");
}
});
}
/*게시글 등록 함수*/
const fn_regist_rvw_event = () => {
/*리뷰 답변 항목 이벤트 제어*/
$(document).on('click','.rvwAnswRadioC',function () {
const radio = $(this);
//리뷰 항목 내용 요소 get
const score = radio.closest("div").find('[name="evlScoreArr[]"]')
//추가입력 항목 내용 요소 get
const qesitmInnb = radio.closest("div").find('[name="rvwQesitmInnbArr[]"]');
//항목 고유번호 내용 요소 get
const itmInnb = radio.closest("div").find('[name="rvwItmInnbArr[]"]');
//라디오 클릭으로 인한 제어 요소 get
const contrlTarget = radio.closest("div").find('.rvwAnswRadio');
//라디오 클릭 시 disabled 비활성
if (radio.is(":checked")) {
const radioVal = $(radio).attr('itm-cn');
//평가 내용 set
score.val("");
score.val(radioVal);
//항목 내용 set
qesitmInnb.val("");
const qesitmInnbVal = $(radio).attr('qesitm-innb');
qesitmInnb.val(qesitmInnbVal);
//항목고유번호 내용 set
itmInnb.val("");
const itmInnbVal = $(radio).val();
itmInnb.val(itmInnbVal);
//라디오 주위 input값 disable false처리
contrlTarget.each(function () {
contrlTarget.prop("disabled", false);
radio.closest("div").find(".rvwAnswRadioAt").val("Y");
});
} else {
contrlTarget.each(function () {
contrlTarget.prop("disabled", true);
radio.closest("div").find(".rvwAnswRadioAt").val("N");
});
}
});
//추가입력 항목 라디오 'click' 이벤트
$(document).on('click','.answRadioC',function () {
const radio = $(this);
//추가입력 항목 내용 요소 get
const answ = radio.closest(".custom-radio-container").find('[name="answCnArr[]"]');
//추가입력 항목 내용 요소 get
const qesitmInnb = radio.closest(".custom-radio-container").find('[name="qesitmInnbArr[]"]');
//라디오 클릭으로 인한 제어 요소 get
const contrlTarget = radio.closest(".custom-radio-container").find('.answRadio');
//항목 고유번호 내용 요소 get
const itmInnb = radio.closest(".custom-radio-container").find('[name="itmInnbArr[]"]');
//라디오 클릭 시 disabled 비활성
if (radio.is(":checked")) {
//답변 내용 초기화
answ.val("");
const radioVal = $(radio).attr('itm-cn');
answ.val(radioVal);
//항목 내용 set
qesitmInnb.val("");
const qesitmInnbVal = $(radio).attr('qesitm-innb');
qesitmInnb.val(qesitmInnbVal);
//항목고유번호 내용 set
itmInnb.val("");
const itmInnbVal = $(radio).val();
itmInnb.val(itmInnbVal);
//라디오 주위 input값 disable false처리
contrlTarget.each(function () {
contrlTarget.prop("disabled", false);
radio.closest(".custom-radio-container").find(".answRadioAt").val("Y");
});
} else {
contrlTarget.each(function () {
contrlTarget.prop("disabled", true);
radio.closest(".custom-radio-container").find(".answRadioAt").val("N");
});
}
});
//추가입력 항목 셀렉트 'change'이벤트
$(document).on('change','.answSelectC', function () {
const select = $(this);
const answ = select.closest(".reviewRadio__item").find('[name="answCnArr[]"]');
const qesitmInnb = select.closest(".reviewRadio__item").find('[name="qesitmInnbArr[]"]');
const contrlTarget = select.closest(".reviewRadio__item").find('.answSelect');
const option = $('option:selected', this);
if (select.val() != "") {
//답변 내용 초기화
answ.val("");
const selectVal = $(option).attr('itm-cn');
answ.val(selectVal);
//항목 내용 set
qesitmInnb.val("");
const qesitmInnbVal = $(option).attr('qesitm-innb');
qesitmInnb.val(qesitmInnbVal);
//셀렉트 주위 input값 disable false처리
contrlTarget.each(function () {
contrlTarget.prop("disabled", false);
select.closest(".reviewRadio__item").find(".answSelectAt").val("Y");
});
} else {
contrlTarget.each(function () {
contrlTarget.prop("disabled", true);
select.closest(".reviewRadio__item").find(".answSelectAt").val("N");
});
}
});
//추가입력 항목 체크박스 'click'이벤트
$(document).on('click','.answChkC', function () {
const check = $(this);
const contrlTarget = check.closest(".reviewRadio__item").find('.answChk');
var isChecked = $(this).is(":checked");
//클릭한 체크박스 주위 input값 disable false처리
contrlTarget.each(function () {
if (isChecked) {
$(this).prop("disabled", false);
} else {
$(this).prop("disabled", true);
}
});
// 체크된 체크박스가 하나라도 있는지 확인
let anyChecked = $('.answChkC:checked').length > 0;
contrlTarget.each(function () {
if (anyChecked) {
check.closest(".reviewRadio__item").find(".answChkAt").val("Y");
} else {
check.closest(".reviewRadio__item").find(".answChkAt").val("N");
}
});
});
//추가입력 항목 텍스트 'input'이벤트
$(document).on('input','.answTxtC', function () {
const txt = $(this);
const contrlTarget = txt.closest("div").find('.answTxt');
const contrlAt = txt.closest("div").find('.answTxtAt');
//클릭한 체크박스 주위 input값 disable false처리
if (txt.val() != "") {
contrlTarget.each(function () {
contrlTarget.prop("disabled", false);
contrlAt.val("Y");
});
} else {
contrlTarget.each(function () {
contrlTarget.prop("disabled", true);
contrlAt.val("N");
});
}
});
$(document).on("change","#fileUpload",function () {
addFiles(event, 0);
});
$(document).on('change keyup', "#bbsRegForm", function () {
fn_validation_rvw();
});
}
function fn_validation_rvw() {
//등록 조건 충족시 버튼 활성화
const essntlChkCnt = $(".essntlChk[value='Y']").length;
const qesitmAtChkCnt = $(".qesitmAtChk[value='Y']").length;
let writngChrCnt = '';
let writngChrAt = false;
const cnLength = $("#cn").val().length;
if ($("#writngChrCntAt").val() === "Y") {
writngChrCnt = parseInt($("#writngChrCnt").val(), 0);
if (writngChrCnt > cnLength) {
writngChrAt = false;
} else {
writngChrAt = true;
}
} else {
if (cnLength >= 1) {
writngChrAt = true;
}
}
//한달리뷰는 포토리뷰만 허용
let photoAt = false;
if ($("#bbsTyCd").val() === '06' || ($("#bbsTyCd").val() === '07' && $("#filExtAt").val() === 'Y')) {
photoAt = true;
}
if (essntlChkCnt === qesitmAtChkCnt && writngChrAt && photoAt && $("#regProccess").val() === 'N') {
$("#regBtn").prop("disabled", false);
} else {
$("#regBtn").prop("disabled", true);
}
}
</script>
<body>
<div class="screen-wrap">
<!-- 헤더 영역 -->
<header class="header header--sub">
<jsp:include page="/WEB-INF/views/comm/mobile/Header.jsp"/>
<nav class="headerTab">
<div class="headerTab__content">
<ul class="headerTab__list">
<li class="headerTab__item" id = 'posblRvwLi'>
<button class="boxTab__tabBtn" id ='posblRvw' >작성 가능한 리뷰</button>
</li>
<li class="headerTab__item" id = 'myRvwLi'>
<button class="boxTab__tabBtn" id='myRvw'>나의 리뷰</button>
</li>
</ul>
</div>
</nav>
</header>
<!-- 하단 탭바 -->
<jsp:include page="/WEB-INF/views/comm/mobile/TabBar.jsp"/>
<!-- 메인 컨텐츠 -->
<div class="content-wrap">
<main class="main">
<div class="sub-page">
<div class="infoSection">
<div class="infoSection__title">리뷰 안내</div>
<ul class="infoSection__list">
<li>리뷰는 구매 확정 후 6개월 이내 작성 하실 수 있습니다.</li>
<li>한달리뷰는 포토리뷰이므로 사진첨부는 필수 입니다.</li>
<c:if test = "${mlgAccmlNtc.goodsRvwMlgPymntAt eq 'Y'}">
<li>텍스트 리뷰 <fmt:formatNumber value="${mlgAccmlNtc.gnrlRvwMlgAccmlmnyAmt}" pattern="#,###"/>원/
포토 리뷰 <fmt:formatNumber value="${mlgAccmlNtc.photoRvwMlgAccmlmnyAmt}" pattern="#,###"/>원
<c:if test="${mlgAccmlNtc.monthBbsExpsrAt eq 'Y' && mlgAccmlNtc.goodsRvwMlgPymntMtAt eq 'Y'}"><%--공병리뷰 사용여부에 따른 분기처리--%>
/ 한달 리뷰 <fmt:formatNumber value="${mlgAccmlNtc.monthPhotoRvwMlgAccmlmnyAmt}" pattern="#,###"/>원
</c:if><br>
적립금이 적립되며
리뷰 작성 후 수정이 불가하니 참고 부탁드립니다.
</li>
<c:if test="${mlgAccmlNtc.aditPymntMlgAccmlmnyAmt > 0}">
<li>
텍스트 리뷰 / 포토 리뷰 작성시 추가 마일리지 <fmt:formatNumber
value="${mlgAccmlNtc.aditPymntMlgAccmlmnyAmt}" pattern="#,###"/> 적립됩니다.
(<c:out value="${mlgAccmlNtc.aditMlgPymntBgnDe}"/>~<c:out value="${mlgAccmlNtc.aditMlgPymntEndDe}"/>)
</li>
</c:if>
<c:if test="${mlgAccmlNtc.monthAditPymntMlgAccmlmnyAmt > 0 && mlgAccmlNtc.goodsRvwMlgPymntMtAt eq 'Y'}">
<li>
한달 리뷰 작성시 추가 마일리지
<fmt:formatNumber value="${mlgAccmlNtc.monthAditPymntMlgAccmlmnyAmt}" pattern="#,###"/> 적립됩니다.
(<c:out value="${mlgAccmlNtc.monthAditMlgPymntBgnDe}"/>~<c:out value="${mlgAccmlNtc.monthAditMlgPymntEndDe}"/>)
</li>
</c:if>
</c:if>
</ul>
</div>
<div class="availableReview">
<%--작성 가능 리뷰, 나의 리뷰 영역--%>
</div>
</div>
<!-- Top 버튼 -->
<div class="quick-menu__to-top">
<button><i class="icon icon_quick-to-top"></i>
<span class="visually-hidden">위로 가기</span>
</button>
</div>
</main>
</div>
</div>
</body>
<footer></footer>
<!-- 리뷰작성 하단시트 -->
<!-- 버튼의 data-sheet-target과 id를 일치 시켜야함 -->
<button class="open-sheet availableReviewItem__btn" data-sheet-target="review-sheet" id="triggerBtn"></button>
<div id="review-sheet" class="sheet" aria-hidden="true" role="dialog">
<div class="overlay"></div>
<div class="contents">
<header class="sheet__controls">
<div class="draggable-area">
<div class="draggable-thumb"></div>
</div>
<button class="close-sheet" type="button" title="닫기">&times;</button>
</header>
<div class="sheet__body">
</div>
</div>
</div>
<!-- 나의 리뷰 이미지 -->
<div class="microModal microFullScreen myReviewImagePop" id="my-review-image" 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">
<span class="visually-hidden">
리뷰 이미지
</span>
</h2>
<button class="microModal__close" aria-label="창 닫기"></button>
</div>
<div class="microModal__content">
<div class="swiper myReviewImageSlide">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/mobile/images/나의리뷰이미지01.jpg" alt="상품 이미지">
</div>
<div class="swiper-slide">
<img src="/mobile/images/나의리뷰이미지02.jpg" alt="상품 이미지">
</div>
<div class="swiper-slide">
<img src="/mobile/images/나의리뷰이미지03.jpg" alt="상품 이미지">
</div>
</div>
</div>
<div class="swiper myReviewImageThumbs">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/mobile/images/나의리뷰이미지01.jpg" alt="상품 이미지">
</div>
<div class="swiper-slide">
<img src="/mobile/images/나의리뷰이미지02.jpg" alt="상품 이미지">
</div>
<div class="swiper-slide">
<img src="/mobile/images/나의리뷰이미지03.jpg" alt="상품 이미지">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// 뒤로가기 이벤트 리스너
window.addEventListener('popstate', function (event) {
var modalId = window.location.hash.replace('#', '');
if (modalId) {
closeModal(modalId);
} else {
$('.microModal').each(function () {
MicroModal.close($(this).attr('id'));
});
}
document.body.style.overflow = '';
});
if (window.location.hash) {
var modalId = window.location.hash.replace('#', '');
openModal(modalId);
}
</script>
</html>

View File

@@ -0,0 +1,318 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui" %>
<%@ taglib prefix="f" uri="/WEB-INF/tlds/f.tld" %>
<!DOCTYPE html>
<html>
<script>
</script>
<!-- 리뷰작성 하단시트 -->
<c:set value="${resultMap.regusrInfo}" var="regusrInfo"/>
<c:set value="${resultMap.bbsInfo}" var="bbsInfo"/>
<c:set value="${resultMap.mlgInfo}" var="mlgInfo"/>
<c:set value="${resultMap.qesitmList.qesitmList}" var="qesitmList"/>
<c:set value="${resultMap.qesitmList.itmCnList}" var="itmCnList"/>
<c:set value="${resultMap.rvwQesitmList.starQesitmList}" var="starQesitmList"/>
<c:set value="${resultMap.rvwQesitmList.starItmCnList}" var="starItmCnList"/>
<c:set value="${resultMap.itmList}" var="itmList"/>
<c:set value="${resultMap.rvwGoodsInfo}" var="rvwGoodsInfo"/>
<div class="reviewWriting">
<form id="bbsRegForm">
<div class="reviewWritingItem">
<div class="reviewWritingItem__image">
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
<div>
<img src="<c:out value = '${cdnurl}${rvwGoodsInfo.img}'/>" alt="상품이미지" id="goodsImg"
onerror="this.src='/pc/images/image_placeholder.png'">
</div>
</div>
<div class="reviewWritingItem__right">
<div class="reviewWritingItem__info">
<p class="reviewWritingItem__info__name"><c:out value='${rvwGoodsInfo.goodsNm}'/></p>
</div>
</div>
</div>
<input type="hidden" name="bbsId" value="${bbsInfo.bbsId}" id="bbsId"/>
<input type="hidden" name="bbsTyCd" value="${bbsInfo.bbsTyCd}" id="bbsTyCd"/>
<input type="hidden" name="sopmalCd" value="${bbsInfo.sopmalCd}" id="sopmalCd"/>
<input type="hidden" name="regusrDvCd" value="01"/>
<input type="hidden" name="ordrGoodsOptnInnb" value="<c:out value = '${rvwGoodsInfo.ordrGoodsOptnInnb}'/>"/>
<input type="hidden" name="filExtAt" id="filExtAt"/>
<input type="hidden" name="ordrInnb" id="ordrInnb" value="<c:out value = '${rvwGoodsInfo.ordrInnb}'/>"/>
<input type="hidden" name="goodsInnb" value="<c:out value = '${rvwGoodsInfo.goodsInnb}'/>"/>
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.extensions.images')"
var="acceptFileExtensions"/>
<input type="hidden" name="acceptFileExtensions" id="acceptFileExtensions" value="${acceptFileExtensions}"/>
<input type="hidden" name="goodsInnbArr[]" value="<c:out value = '${rvwGoodsInfo.goodsInnb}'/>"/>
<c:if test="${not empty starQesitmList}">
<c:forEach items="${starQesitmList}" var="starQesitm" varStatus="status">
<c:choose>
<c:when test="${starQesitm.scoreIndictMthCd eq '01'}">
<div class="reviewRating">
<span class="reviewRating__title"><c:out value="${starQesitm.qesitmNm}"/></span>
<div class="reviewRating__inner">
<input type="hidden" name="rvwQesitmEssntlAtArr[]" value="${starQesitm.qesitmEssntlAt}"
class="essntlChk">
<input type="hidden" name="rvwQesitmNmArr[]" value="${starQesitm.qesitmNm}">
<input type="hidden" name="rvwQesitmAtArr[]" class="rvwAnswRadioAt qesitmAtChk"
value="N">
<input type="hidden" name="rvwQesitmInnbArr[]" class="rvwAnswRadio"
value="${starQesitm.qesitmInnb}" disabled>
<input type="hidden" name="evlScoreArr[]" class="rvwAnswRadio" disabled>
<input type="hidden" name="rvwItmInnbArr[]" class="rvwAnswRadio" disabled>
<c:forEach items="${resultMap.starItmList}" var="starItmCn" varStatus="status">
<c:if test="${starItmCn.qesitmInnb eq starQesitm.qesitmInnb}">
<input type="radio"
name="itmInnbArr<c:out value = '${starItmCn.qesitmInnb}'/>[]"
id="rvwCn<c:out value = '${status.index}'/>"
class="rvwAnswRadioC"
value="<c:out value='${starItmCn.itmInnb}'/>"
qesitm-innb='<c:out value = '${starItmCn.qesitmInnb}'/>'
itm-cn="<c:out value='${starItmCn.itmCn}'/>">
<label for="rvwCn${status.index}"></label>
</c:if>
</c:forEach>
</div>
</div>
</c:when>
<c:when test="${starQesitm.scoreIndictMthCd eq '02'}">
<div class="reviewRating">
<div class="reviewRating__title"><c:out value="${starQesitm.qesitmNm}"/></div>
<div class="custom-radio-container custom-radio-container--reviewRating">
<div class="custom-radio is-medium">
<input type="hidden" name="rvwQesitmEssntlAtArr[]"
value="${starQesitm.qesitmEssntlAt}"
class="essntlChk">
<input type="hidden" name="rvwQesitmNmArr[]" value="${starQesitm.qesitmNm}">
<input type="hidden" name="rvwQesitmAtArr[]" class="rvwAnswRadioAt qesitmAtChk"
value="N">
<input type="hidden" name="rvwQesitmInnbArr[]" class="rvwAnswRadio"
value="${starQesitm.qesitmInnb}" disabled>
<input type="hidden" name="evlScoreArr[]" class="rvwAnswRadio" disabled>
<input type="hidden" name="rvwItmInnbArr[]" class="rvwAnswRadio" disabled>
<c:forEach items="${starItmCnList}" var="starItmCn" varStatus="status">
<c:if test="${starItmCn.qesitmInnb eq starQesitm.qesitmInnb}">
<input type="radio"
name="itmInnbArr<c:out value = '${starItmCn.qesitmInnb}'/>[]"
id="rvwCn<c:out value = '${starItmCn.itmInnb}'/>"
class="rvwAnswRadioC"
value="<c:out value='${starItmCn.itmInnb}'/>"
qesitm-innb='<c:out value = '${starItmCn.qesitmInnb}'/>'
itm-cn="<c:out value='${starItmCn.itmCn}'/>">
<label for="rvwCn${starItmCn.itmInnb}"><c:out
value='${starItmCn.itmCn}'/>점&nbsp;</label>
</c:if>
</c:forEach>
</div>
</div>
</div>
</c:when>
</c:choose>
</c:forEach>
</c:if>
<c:if test="${not empty qesitmList}">
<div class="reviewRadio">
<c:forEach items="${ qesitmList }" var="qesitmList" varStatus="status">
<c:if test="${ qesitmList.itmTyCd eq '01'}">
<div class="reviewRadio__item">
<div class="reviewRadio__title"><c:out value="${ qesitmList.qesitmNm }"/></div>
<div class="custom-radio-container">
<input type="hidden" name="qesitmEssntlAtArr[]" value="${ qesitmList.qesitmEssntlAt}"
class="essntlChk">
<input type="hidden" name="qesitmNmArr[]" value="${ qesitmList.qesitmNm}">
<input type="hidden" name="qesitmAtArr[]" class="answRadioAt qesitmAtChk" value="N">
<input type="hidden" name="qesitmInnbArr[]" class="answRadio"
value="${ qesitmList.qesitmInnb }" disabled>
<input type="hidden" name="answCnArr[]" class="answRadio" disabled>
<input type="hidden" name="itmInnbArr[]" class="answRadio" disabled>
<c:forEach items="${itmCnList}" var="itmCnList1" varStatus="status">
<c:if test="${itmCnList1.qesitmInnb eq qesitmList.qesitmInnb}">
<div class="custom-radio is-medium">
<input type="radio"
name="itmInnbArr<c:out value="${ qesitmList.qesitmInnb }"/>[]"
id="answCn<c:out value="${ status.index }"/>"
class="answRadioC"
value="<c:out value="${ itmCnList1.itmInnb}"/>"
qesitm-innb='<c:out value="${itmCnList1.qesitmInnb}"/>'
itm-cn="<c:out value="${ itmCnList1.itmCn }"/>">
<label for="answCn<c:out value="${ status.index }"/>">
<c:out value="${ itmCnList1.itmCn }"/>
</label>
</div>
</c:if>
</c:forEach>
</div>
</div>
</c:if>
<c:if test="${ qesitmList.itmTyCd eq '02'}">
<div class="reviewRadio__item">
<div class="reviewRadio__title"><c:out value="${ qesitmList.qesitmNm }"/></div>
<input type="hidden" name="qesitmEssntlAtArr[]" value="${ qesitmList.qesitmEssntlAt }"
class="essntlChk">
<input type="hidden" name="qesitmNmArr[]" value="${ qesitmList.qesitmNm }">
<input type="hidden" name="qesitmAtArr[]" class="answSelectAt qesitmAtChk" value="N">
<input type="hidden" name="qesitmInnbArr[]" class="answSelect"
value="${ qesitmList.qesitmInnb }" disabled>
<input type="hidden" name="answCnArr[]" class="answSelect" disabled>
<div class="select-box">
<select class="md answSelectC" name="itmInnbArr[]">
<option value="">전체</option>
<c:forEach items="${itmCnList}" var="itmCnList2">
<c:if test="${itmCnList2.qesitmInnb eq qesitmList.qesitmInnb}">
<option value="${ itmCnList2.itmInnb }" itm-cn="${ itmCnList2.itmCn}"
qesitm-innb='${itmCnList2.qesitmInnb}'>${ itmCnList2.itmCn }</option>
</c:if>
</c:forEach>
</select>
</div>
</div>
</c:if>
<c:if test="${ qesitmList.itmTyCd eq '03' }">
<div class="reviewRadio__item">
<div class="reviewRadio__title"><c:out value="${ qesitmList.qesitmNm }"/></div>
<input type="hidden" name="qesitmEssntlAtArr[]" value="${ qesitmList.qesitmEssntlAt }"
class="essntlChk">
<input type="hidden" name="qesitmNmArr[]" value="${ qesitmList.qesitmNm }">
<input type="hidden" name="qesitmAtArr[]" class="answChkAt qesitmAtChk" value="N">
<c:forEach items="${itmCnList}" var="itmCnList3">
<c:if test="${itmCnList3.qesitmInnb eq qesitmList.qesitmInnb}">
<div class="b-checkbox-container">
<label class="b-checkbox checkbox">
<input type="hidden" class="answChk" name="qesitmInnbArr[]"
value="${ qesitmList.qesitmInnb }" disabled>
<input type="hidden" class="answChk" name="answCnArr[]"
value="${ itmCnList3.itmCn }" disabled>
<input type="checkbox" class="answChkC" name="itmInnbArr[]"
value="${ itmCnList3.itmInnb }">
<span class="check"></span>
<span class="control-label">${ itmCnList3.itmCn }</span>
</label>
</div>
</c:if>
</c:forEach>
</div>
</c:if>
<c:if test="${ qesitmList.itmTyCd eq '04' }">
<div class="reviewRadio__item">
<div class="reviewRadio__title"><c:out value="${ qesitmList.qesitmNm }"/></div>
<div class="reviewRadio__inputRow">
<c:forEach items="${itmCnList}" var="itmCnList4">
<c:if test="${itmCnList4.qesitmInnb eq qesitmList.qesitmInnb}">
<input type="hidden" name="qesitmEssntlAtArr[]"
value="${ qesitmList.qesitmEssntlAt }" class="essntlChk">
<input type="hidden" name="qesitmNmArr[]" value="${ qesitmList.qesitmNm }">
<input type="hidden" name="qesitmAtArr[]" class="answTxtAt qesitmAtChk"
value="N">
<input type="hidden" class="answTxt" name="qesitmInnbArr[]"
value="${ qesitmList.qesitmInnb }" disabled>
<input type="text" class="answTxtC input-text full" name="answCnArr[]"
title="추가문항답변" placeholder="${ itmCnList4.itmCn }" maxlength="666">
<input type="hidden" class="answTxt" name="itmInnbArr[]"
value="${ itmCnList4.itmInnb }" disabled>
</c:if>
</c:forEach>
</div>
</div>
</c:if>
</c:forEach>
</div>
</c:if>
<div class="userText">
<div class="userText__item">
<div class="userText__itemTitle">상품 리뷰를 작성해주세요.</div>
<textarea class="textarea" rows="6" title="상품 리뷰" name="cn" id="cn"
<c:choose>
<c:when test="${bbsInfo.mblDftCnUseAt eq 'Y'}">
placeholder= "${bbsInfo.mblDftCn}"
</c:when>
<c:otherwise>
<c:if test="${not empty bbsInfo.writngChrCnt}">
placeholder="최소 <c:out value="${bbsInfo.writngChrCnt}"/>자 이상으로 입력해 주세요."
</c:if>
</c:otherwise>
</c:choose>></textarea>
<input type="hidden" id="writngChrCntAt"
value=<c:if test="${not empty bbsInfo.writngChrCnt}">"Y"</c:if>>
<input type="hidden" id="writngChrCnt" value="<c:out value = "${bbsInfo.writngChrCnt}"/>">
</div>
</div>
<c:if test="${bbsInfo.filAtch eq 'Y'}">
<div class="fileUplaod">
<div class="fileUplaod__title">이미지 등록(3장)<c:if test="${bbsInfo.bbsTyCd eq '07'}"><span
style="color:red">*</span></c:if></div>
<div class="dropzone-wrapper">
<div class="dropzone" id="image-dropzone">
</div>
</div>
<ul class="infoList">
<li>사진 첨부는 최대 10MB 이하이며 3개까지 등록할 수 있습니다.</li>
<li>등록 가능 파일은 ${acceptFileExtensions} 파일만 가능합니다.</li>
<li>상품과 무관한 내용이거나 음란 불법적인 내용은 통보없이 삭제할 수 있습니다.</li>
</ul>
</div>
<input type="hidden" name="filAtch" id="filAtch" value="Y"/>
</c:if>
</form>
<div class="bottomBtnControls">
<button type="button" class="btn lg theme full" id="regBtn" onclick="fn_debounce_regFn();" disabled>등록하기
</button>
<input type="hidden" id="regProccess" value="N"/>
</div>
</div>
<script>
// Dropzone 파일업로드
if ($("#image-dropzone").length > 0) {
const maxFiles = 3;
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#image-dropzone", {
url: "/file-upload",
maxFilesize: 10,
maxFiles: maxFiles,
acceptedFiles: "${acceptFileExtensions}",
autoProcessQueue: false,
addRemoveLinks: true,
dictDefaultMessage: "",
dictRemoveFile: "삭제",
dictCancelUpload: "취소",
dictCancelUploadConfirmation: "업로드를 취소하시겠습니까?",
dictInvalidFileType: "이 파일은 업로드할 수 없습니다.",
dictFileTooBig: "파일이 너무 큽니다. ({{filesize}}MB). 최대 파일 크기: {{maxFilesize}}MB.",
dictMaxFilesExceeded: "파일을 더 이상 추가할 수 없습니다.",
dictResponseError: "서버에서 응답을 받지 못했습니다.",
});
var inputElement = $('input[type="file"].dz-hidden-input');
// name 부여
inputElement.attr('name', 'file');
// id 부여
inputElement.attr('id', 'fileUpload');
// 파일 추가 이벤트
myDropzone.on("addedfile", function (file) {
if (myDropzone.files.length >= maxFiles) {
$(".dz-message").hide();
}
$("#filExtAt").val("Y");
fn_validation_rvw();
});
myDropzone.on("removedfile", function (file) {
if (myDropzone.files.length < maxFiles) {
$(".dz-message").show();
}
if (myDropzone.files.length == 0) {
$("#filExtAt").val("N");
fn_validation_rvw();
}
});
myDropzone.on("maxfilesexceeded", function (file) {
const dictMaxFilesExceeded = myDropzone.options.dictMaxFilesExceeded;
alert(dictMaxFilesExceeded);
this.removeFile(file);
$(file.previewElement).find(".dz-remove").attr("disabled", true);
});
}
</script>
</html>

View File

@@ -0,0 +1,101 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui" %>
<%@ taglib prefix="f" uri="/WEB-INF/tlds/f.tld" %>
<%--
Class Name : MyRvwRForm.jsp
Description :나의리뷰 폼.jsp
Modification Information
수정일 수정자 수정내용
------- -------- ---------------------------
2024-07-25 김혜인 최초 생성
--%>
<!DOCTYPE html>
<html lang="ko">
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
<div class="sub-box">
<input type="hidden" value = "continue" id = "writngPosbleEvtOccrrncAt">
<input type="hidden" value = "<c:out value="${resultMap.bbscttVO.pageIndex}"/>" id = "writngPosblePageIndex">
<c:choose>
<c:when test = "${not empty resultMap.resultList}">
<c:forEach var = "resultList" items="${resultMap.resultList}">
<c:if test = "${resultList.purchsDcsnQy > resultList.rvwCnt || resultList.mtRvwAt eq 'Y'}">
<div class="availableReviewItem">
<div class="availableReviewItem__top">
<div class="availableReviewItem__image">
<button type="button" class="orderList__image" value="<c:out value ='${resultList.goodsInnb}'/>"
onclick = "fn_move_goods_dtl(<c:out value='${resultList.goodsInnb}'/>)">
<img src="<c:out value ='${cdnurl}${resultList.img}'/>" alt="" onerror="this.src='/mobile/images/image_placeholder.png'">
</button>
</div>
<div class="availableReviewItem__info">
<p class="availableReviewItem__info__date">
<a onclick="" style="cursor:pointer;" class="orderList__orderNum"><c:out value='${resultList.ordrInnb}'/>
</a>
</p>
<a href="" class="availableReviewItem__info__name"><c:out value='${resultList.goodsNm}'/></a>
<c:if test="${not empty resultList.optnNm}">
<p class="availableReviewItem__info__option">옵션: <c:out value='${resultList.optnNm}'/></p>
</c:if>
</div>
</div>
<div class="availableReviewItem__bottom">
<div class="availableReviewItem__desc">
<p class="availableReviewItem__descText">작성리뷰수 <em><c:out value ='${resultList.rvwCnt}'/></em></p>
<p class="availableReviewItem__descText">구매확정수 <em><c:out value ='${resultList.purchsDcsnQy}'/></em></p>
</div>
<div class="availableReviewItem__linkContainer">
<%--구매확정수량이 리뷰 작성 수 보다 클 때만 노출--%>
<c:if test = "${resultList.purchsDcsnQy > resultList.rvwCnt}">
<button type="button"
class="btn theme md outline open-sheet availableReviewItem__btn rvwBtn open-sheet"
ordr-goods-optn-innb="<c:out value ='${resultList.ordrGoodsOptnInnb}'/>"
bbs-ty-cd="06"
value='<c:out value ='${resultList.goodsInnb}'/>'>리뷰작성
</button>
</c:if>
<c:if test = "${resultList.mtRvwAt eq 'Y'}">
<button type = "button" class="btn theme md availableReviewItem__btn rvwBtn open-sheet"
ordr-goods-optn-innb = "<c:out value ='${resultList.ordrGoodsOptnInnb}'/>"
bbs-ty-cd = "07"
value='<c:out value ='${resultList.goodsInnb}'/>'>한달리뷰작성</button>
</c:if>
</div>
</div>
</div>
</c:if>
</c:forEach>
</c:when>
<c:otherwise>
<div class="noResult">
<div class="noResult__image">
<img src="/mobile/images/icon__no-result.png" alt="상품 이미지">
</div>
<p class="noResult__text">작성 가능한 리뷰가 없습니다.</p>
</div>
</c:otherwise>
</c:choose>
</div>
<%--등록 성공 모달--%>
<div class="microModal microAlert" id="successRegModal" 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">
<spring:message code="success.common.insert"/>
</h2>
</div>
</div>
<button data-micromodal-close aria-label="창 닫기" id = "successClseBtn"></button>
<div class="microModal__btnContainer">
<button class="microModal__btn microModal__btn-primary" id = "successOkBtn"><spring:message code="button.ok"/></button>
</div>
</div>
</div>
</div>
</html>