Files
sake/src/main/webapp/WEB-INF/views/sopmal/csc/BbscttUpdtU.jsp
2025-11-28 17:03:25 +09:00

996 lines
57 KiB
Plaintext

<%@ 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 : 게시글 수정 폼
Modification Information
수정일 수정자 수정내용
------- -------- ---------------------------
2024-05-21 김혜인 최초 생성
--%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%-- 공통 include --%>
<jsp:include page="/WEB-INF/views/comm/Include.jsp"/>
</head>
<script>
$(document).ready(function () {
/*폼 기본 세팅*/
fn_select_cn();
//hidden value set
fn_update_hidden_value();
/*값 set*/
if($("#answMbtlnb").length > 0){
/*휴대전화 포매팅 함수*/
fn_set_event("#answMbtlnb", "input", fn_fmt_telno);
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.trim();
cn.text(str);
//분류 change시 hidden value값 set
$(document).on('change', '#qesitmNmC', 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");
$(this).closest("td").find("input[name='qesitmAtArr[]']").val("Y");
} else {
$("#qesitmInnb").val("");
$("#answCn").val("");
$("#qesitmNm").val("");
$("#qesitmAt").val("N");
$(this).closest("td").find("input[name='qesitmAtArr[]']").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("td").find('[name="answCnArr[]"]');
const qesitmInnb = select.closest("td").find('[name="qesitmInnbArr[]"]');
const contrlTarget = select.closest("td").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("td").find(".answSelectAt").val("Y");
});
} else {
contrlTarget.each(function () {
contrlTarget.prop("disabled", true);
select.closest("td").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");
check.closest("td").find(".answChkAt").prop("disabled", false);
} else {
check.closest("td").find(".answChkAt").val("N");
check.closest("td").find(".answChkAt").prop("disabled", true);
}
});
});
//추가입력 항목 텍스트 '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 () {
fn_update_bbsctt();
});
//수정 완료 모달 > 확인 버튼 이벤트 (새로고침)
$(document).on("click", "#alertBtn", function () {
$('html').scrollTop(0);
location.reload();
});
//수정 취소 버튼(이전 페이지 이동);
$(document).on("click", "#cancelBtn", function () {
const listAt = $("#listAt").val();
if (listAt === 'list') {
fn_move_list();
} else {
fn_move_dtl();
}
});
});
/*********************************************************
* 게시글 내용 조회
*********************************************************/
const fn_select_cn = function () {
let bbscttInnb = $("#bbscttInnb").val();
let bbsId = $("#bbsId").val();
let sopmalCd = $("#sopmalCd").val();
$.ajax({
type: "post",
url: "<c:url value ='/mngr/bbs/gnrlsctt/selectBOBbscttCnAjax'/>",
contentType: 'application/json',
data: JSON.stringify({
bbsId: bbsId,
bbscttInnb: bbscttInnb,
sopmalCd: sopmalCd
}),
success: function (data) {
let cn = JSON.parse(data.resBody.result).result.cn;
$("#cnBbsUpdt").val(cn);
$("#cnBbsUpdt").addClass("ck-content");
}
});
}
//목록 조회에서 취소 누를 시 해당 게시판 목록으로 이동
const fn_move_list = () => {
const form = document.createElement("form");
form.id = "listForm";
form.action = "/sopmal/csc/selectSubPageListForm";
form.method = "POST";
fn_create_input("bbsId", $("#bbsId").val(), form);
fn_create_input("pageIndex", "1", form);
document.body.appendChild(form);
form.submit();
}
//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.append(input);
}
//상세조회
const fn_move_dtl = () => {
const hiddenForm = $("#hiddenForm");
if(hiddenForm.length > 0){
hiddenForm.remove();
}
const form = document.createElement("form");
form.id = "dtlForm";
form.action = "/sopmal/csc/selectBbscttDtlInqire";
form.method = "POST";
fn_create_input("bbscttInnb", $("#bbscttInnb").val(), form);
fn_create_input("bbsTyCd", $("#bbsTyCd").val(), form);
fn_create_input("bbsId", $("#bbsId").val(), form);
fn_create_input("useAt", "Y", form);
fn_create_input("expsrAt", "Y", form);
fn_create_input("reqUrl", "subPage", form);
fn_create_input("pageIndex", "1", form);
fn_create_input("prevNext", $("#prevNext").val(), form);
let pageUnit = '';
//갤러리 페이지 유닛 계산
if(sknTyCd === '02'){
const pgeVtcCnt = $("#pgeVtcCnt").val();//열 개수
const pgeWthCnt = $("#pgeWthCnt").val();//행 개수
pageUnit = pgeVtcCnt * pgeWthCnt;
}else{
pageUnit = '10';
}
fn_create_input("pageUnit", pageUnit, form);
document.body.appendChild(form);
form.submit();
}
/*********************************************************
* 게시글 수정
*********************************************************/
const fn_update_bbsctt = function () {
let url = '<c:url value="/sopmal/csc/updateBbscttupdt"/>';
let saveForm = $('#bbsUpdtForm');
let formData = new FormData();
//파일 업로드
if ($("#contact-dropzone").length > 0) {
let myDropzone = Dropzone.forElement("#contact-dropzone");
myDropzone.files.forEach(function (file) {
formData.append("files", file);
});
//hidden 파일이 존재여부 Flag Setting y/n ========================
}
//사용자 등록 시 노출 여부 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"],);
}
});
//폼 내 input값 append
saveForm.serializeArray().forEach(function (item) {
formData.append(item.name, item.value);
});
disableButton("#updtBtn");
if (confirm('게시글을 <spring:message code="confirm.common.update"/>')) {
$.ajax({
type: 'post',
url: url,
enctype:"multipart/form-data",
data: formData,
processData: false,
contentType: false,
success: function (result) {
enableButton("#updtBtn");
$("#result-alert").modal();
/*파일 temp 배열 초기화*/
filesTempArr = [];
}
});
}
enableButton("#updtBtn");
fn_ctrl_disable("", [".checkbox"]);
}
//답변 관련 정보 set
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("td").find('[name="answCnArr[]"]');
let radioQesitmInnb = radio.eq(idx).closest("td").find('[name="qesitmInnbArr[]"]');
let radioItmInnb = radio.eq(idx).closest("td").find('[name="itmInnbArr[]"]');
let radioQesitmAt = radio.eq(idx).closest("td").find('[name="qesitmAtArr[]"]');
let radioContrlTarget = radio.eq(idx).closest("td").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("td").find('[name="answCnArr[]"]');
let radioQesitmInnb = radio.eq(idx).closest("td").find('[name="qesitmInnbArr[]"]');
let radioItmInnb = radio.eq(idx).closest("td").find('[name="itmInnbArr[]"]');
let radioQesitmAt = radio.eq(idx).closest("td").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("td").find('[name="qesitmAtArr[]"]');
let selectQesitmInnb = select.eq(idx).closest("td").find('[name="qesitmInnbArr[]"]');
let selectAnsw = select.eq(idx).closest("td").find('[name="answCnArr[]"]');
let selectOption = $('option:selected', select.eq(idx));
let selectContrlTarget = select.eq(idx).closest("td").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("td").find('[name="qesitmAtArr[]"]');
let selectQesitmInnb = select.eq(idx).closest("td").find('[name="qesitmInnbArr[]"]');
let selectAnsw = select.eq(idx).closest("td").find('[name="answCnArr[]"]');
let selectContrlTarget = select.eq(idx).closest("td").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("td").find(".answChkC:checked").length > 0;
if (anyChecked) {
check.eq(idx).closest("td").find(".answChkAt").val("Y");
} else {
check.eq(idx).closest("td").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.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"/>
<%-- 공통 Header --%>
<jsp:include page="/WEB-INF/views/comm/Header.jsp"/>
<!-- 메인 컨텐츠 영역 -->
<main>
<div class="sub-wrapper">
<div class="sub-content">
<c:choose>
<c:when test = "${bbscttVO.reqUrl eq 'subPage'}"><%--서브페이지 등록 폼 분기 처리--%>
<div class="page-title center">
<h2 class="page-title__title" id = "bbsNm"><c:out value="${bbsInfo.bbsNm}"/></h2>
</div>
</c:when>
<c:otherwise><%--고객센터 등록 폼 분기 처리--%>
<div class="sub-rl">
<jsp:include page="/WEB-INF/views/comm/csc/CscLeft.jsp"/>
<div class="sub-right-content">
<h3 class="sub-right-content__title"><c:out value="${bbsInfo.bbsNm}"/></h3>
</c:otherwise>
</c:choose>
<div class="table-wrapper">
<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 }"/>
<%--vo 관련(요청 구분 등)--%>
<input type="hidden" id="reqDv" value="<c:out value = '${bbsctt.reqDv}'/>" name="reqDv"/>
<input type="hidden" id="reqUrl" value="<c:out value = '${bbsctt.reqUrl}'/>" name="reqUrl"/>
<input type="hidden" id="listAt" name="listAt" value="${ bbscttVO.listAt }"/>
<input type="hidden" id="sopmalCd" name="sopmalCd" value="${bbscttVO.sopmalCd}"/>
<%--게시글 관련--%>
<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"/>
<table class="table write">
<caption>게시글 수정</caption>
<colgroup>
<col style="width: 200px;">
<col style="width: auto;">
</colgroup>
<tbody>
<tr>
<th>작성자</th>
<td>
<div class="td-inner">
<c:out value="${bbscttInfo.regusrNm}"/>
</div>
</td>
</tr>
<c:if test="${not empty itmList}">
<tr>
<th>분류<span class="required-asterisk">*</span></th>
<td>
<div class="td-inner">
<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>
</td>
</tr>
</c:if>
<c:if test="${not empty qesitmList}">
<c:forEach var="qesitmList" items="${qesitmList}">
<tr>
<c:if test="${ qesitmList.itmTyCd eq '01'}">
<th><c:out value="${ qesitmList.qesitmNm }"/><c:if
test="${qesitmList.qesitmEssntlAt eq 'Y'}"><span
class="required-asterisk">*</span></c:if></th>
<td>
<div class="td-inner">
<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>
</td>
</c:if>
<c:if test="${ qesitmList.itmTyCd eq '02'}">
<th><c:out value="${ qesitmList.qesitmNm }"/><c:if
test="${qesitmList.qesitmEssntlAt eq 'Y'}"><span
class="required-asterisk">*</span></c:if></th>
<td>
<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>
</td>
</c:if>
<c:if test="${ qesitmList.itmTyCd eq '03'}">
<th><c:out value="${ qesitmList.qesitmNm }"/><c:if
test="${qesitmList.qesitmEssntlAt eq 'Y'}"><span
class="required-asterisk">*</span></c:if></th>
<td>
<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="input-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 }"
itm-cn="${ itmCnList3.itmCn }"
qesitm-innb="${itmCnList3.qesitmInnb}"
<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>
</div>
</c:if>
</c:forEach>
</td>
</c:if>
<c:if test="${ qesitmList.itmTyCd eq '04'}">
<th><c:out value="${ qesitmList.qesitmNm }"/><c:if
test="${qesitmList.qesitmEssntlAt eq 'Y'}"><span
class="required-asterisk">*</span></c:if></th>
<td>
<div class="td-inner">
<div class="input-grow-container">
<c:forEach items="${itmCnList}" var="itmCnList4">
<c:if test="${itmCnList4.qesitmInnb eq qesitmList.qesitmInnb}">
<div class="input-container">
<input type="hidden" name="qesitmEssntlAtArr[]"
value="${ qesitmList.qesitmEssntlAt }">
<input type="hidden" name="qesitmNmArr[]"
value="${ qesitmList.qesitmNm }">
<input type="hidden" name="qesitmAtArr[]"
class="answTxtAt" value="N">
<input type="hidden" class="answTxt"
name="qesitmInnbArr[]"
value="${ qesitmList.qesitmInnb }" disabled>
<input type="text" class="input-text mm answTxtC"
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>>
<input type="hidden" class="answTxt" name="itmInnbArr[]"
value="${ itmCnList4.itmInnb }" disabled>
</div>
<br>
</c:if>
</c:forEach>
</div>
</div>
</td>
</c:if>
</tr>
</c:forEach>
</c:if>
<c:if test="${bbsInfo.answRegist eq 'Y'&& bbsInfo.bbscttSndngMthCd ne '03'}"><%--답변사용여부와 게시글 문자사용여부 체크--%>
<tr>
<th>답변받기</th>
<td>
<div class="td-inner">
<input class="input-text" type="text" title="해당 인풋에 대한 설명"
name="answMbtlnb"
id="answMbtlnb" maxlength="13"
value="<c:out value = '${bbscttInfo.answMbtlnb}'/>"
placeholder="'-'없이 입력">
<div class="b-checkbox-container">
<label class="b-checkbox checkbox">
<input type="checkbox" value="Y" name="answSmsRecptn"
class="chkAt"
<c:if test="${bbscttInfo.answSmsRecptn eq 'Y'}">checked</c:if>>
<span class="check"></span>
<span class="control-label">SMS 알림요청</span>
</label>
</div>
</div>
</td>
</tr>
</c:if>
<tr>
<th>제목</th>
<td>
<div class="td-inner">
<input class="input-text xl" type="text" title="해당 인풋에 대한 설명" name="sj"
placeholder="제목을 입력하세요." maxlength="100"
value="<c:out value = "${bbscttInfo.sj}"/>">
<c:if test="${bbsInfo.secretBbsctt eq 'Y'}">
<div class="b-checkbox-container">
<label class="b-checkbox checkbox">
<input type="checkbox" value="Y" name="secretBbscttAt"
<c:if test="${bbscttInfo.secretBbscttAt eq 'Y'}">checked</c:if>
<c:if test="${bbsInfo.bbsTyCd eq '05'}"> onclick="fn_prevent_click(event);"</c:if>>
<span class="check"></span>
<span class="control-label">비밀글</span>
</label>
</div>
</c:if>
</div>
</td>
</tr>
<tr>
<th>내용</th>
<td>
<textarea class="textarea" rows="12" title="내용 입력란" id="cnBbsUpdt" name = "cn">
<c:out value="${bbscttInfo.cn}"/>
</textarea>
</td>
</tr>
<%--게시판설정(파일첨부사용여부)--%>
<c:if test="${bbsInfo.filAtch eq 'Y'}">
<tr>
<th>이미지 등록</th>
<td>
<div class="dropzone-wrapper">
<div class="dropzone" id="contact-dropzone">
</div>
</div>
<ul class="contact-upload-info">
<li>사진 첨부는 최대 10MB 이하이며 3개까지 등록할 수 있습니다.</li>
<li>등록 가능 파일은 ${acceptFileExtensions} 파일만 가능합니다.</li>
<li>상품과 무관한 내용이거나 음란 불법적인 내용은 통보없이 삭제할 수 있습니다.</li>
</ul>
</td>
</tr>
</c:if>
</tbody>
</table>
</form>
</div>
<div class="sub-bottom-btn-container">
<button class="btn xl outline" id="cancelBtn" value="<c:out value = '${bbsInfo.bbsId}'/>">
<c:choose>
<c:when test="${bbscttVO.listAt eq 'list'}"><spring:message code="button.catalog"/></c:when>
<c:otherwise><spring:message code="button.cancel"/></c:otherwise>
</c:choose></button>
<button class="btn xl theme" id="updtBtn"><spring:message code="button.update"/></button>
</div>
<c:choose>
<c:when test="${bbscttVO.reqUrl eq 'subpage'}"> <%--서브페이지 등록 폼 분기 처리--%>
</div>
</c:when>
<c:otherwise> <%--고객센터 등록 폼 분기 처리--%>
</div>
</div>
</c:otherwise>
</c:choose>
<!-- 수정/등록 알림 -->
<div id="result-alert" class="modal alert">
<div class="alert-content">
<p class="alert-content__text--sm">
<spring:message code="success.common.update"/>
</p>
</div>
<div class="alert-btn-container">
<button class="alert-btn alert-btn--confirm" id = "alertBtn"><spring:message code="button.ok"/></button>
</div>
</div>
</main>
<%-- 공통 Footer --%>
<jsp:include page="/WEB-INF/views/comm/Footer.jsp"/>
<script>
// Dropzone 파일업로드
if ($("#contact-dropzone").length > 0) {
const maxFiles = 3;
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#contact-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에 추가
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
$.each(imageData, function (index, image) {
// Dropzone 파일 객체 생성
let mockFile = {name: image.orginlFilNm, size: image.filMg};
dropzoneInstance.emit("addedfile", mockFile);
const imagePath = '${cdnurl}' + image.filCours + image.sysFilNm;
dropzoneInstance.emit("thumbnail", mockFile, imagePath);
// 이미지 오류 처리
$(mockFile.previewElement).find("img").on("error", function () {
this.src = '/pc/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);
}
// 파일 크기가 최대 파일 크기보다 큰 경우
if (file.size > this.options.maxFilesize * 1024 * 1024) {
this.removeFile(file);
alert("파일 크기가 너무 큽니다. 최대 " + this.options.maxFilesize + "MB까지 허용됩니다.");
}
}
});
// 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();
}
}
</script>
</body>
</html>