admin/madeu_crm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

전후사진 디자인 수정

Browse Source
This commit is contained in:
pjs
2026-02-22 23:22:08 +09:00
parent 49994443d0
commit 4e787df19f
8 changed files with 561 additions and 762 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/main/resources/mappers/WebPhotoDietSqlMap.xml
View File

@@ -105,8 +105,8 @@
,HBFPB.TITLE AS "title"
,HBFPB.CONTENT AS "content"
,HBFPB.HASHTAG AS "hashtag"
,HAF2.FILE_PATH AS "beforefile"
,HAF.FILE_PATH AS "afterfile"
,HAF.FILE_PATH AS "beforefile"
,HAF2.FILE_PATH AS "afterfile"
FROM HP_BEFORE_AFTER_PHOTO_BBS AS HBFPB
LEFT OUTER JOIN HP_ATTACH_FILE HAF ON HAF.ATTACHFILE_ID = HBFPB.BEFORE_PHOTO_ATTACHFILE_ID
LEFT OUTER JOIN HP_ATTACH_FILE HAF2 ON HAF2.ATTACHFILE_ID = HBFPB.AFTER_PHOTO_ATTACHFILE_ID

4
src/main/resources/mappers/WebPhotoPetitSqlMap.xml
View File

@@ -105,8 +105,8 @@
,HBFPB.TITLE AS "title"
,HBFPB.CONTENT AS "content"
,HBFPB.HASHTAG AS "hashtag"
,HAF2.FILE_PATH AS "beforefile"
,HAF.FILE_PATH AS "afterfile"
,HAF.FILE_PATH AS "beforefile"
,HAF2.FILE_PATH AS "afterfile"
FROM HP_BEFORE_AFTER_PHOTO_BBS AS HBFPB
LEFT OUTER JOIN HP_ATTACH_FILE HAF ON HAF.ATTACHFILE_ID = HBFPB.BEFORE_PHOTO_ATTACHFILE_ID
LEFT OUTER JOIN HP_ATTACH_FILE HAF2 ON HAF2.ATTACHFILE_ID = HBFPB.AFTER_PHOTO_ATTACHFILE_ID

257
src/main/resources/static/js/web/webphotopetit/webPhotoPetitInsert.js
View File

@@ -1,47 +1,47 @@
/****************************************************************************
* 전후사진 등록
****************************************************************************/
function fn_insertWebPhoto(){
if("Y"!=insertUseYn){
function fn_insertWebPhotoPetit() {
if ("Y" != insertUseYn) {
modalEvent.warning("", "등록 권한이 없습니다.");
return false;
}
let title = $("#title").val();
let content = $("#content").val();
let hashtag = $("#hashtag").val();
let categoryno = $("select[name=categorylist]").val();
let title = $("#title").val();
let content = $("#content").val();
let hashtag = $("#hashtag").val();
let categoryno = $("select[name=categorylist]").val();
let beforeFile = $("#before_file")[0].files[0];
let afterFile = $("#after_file")[0].files[0];
if(true != fn_emptyCheck(categoryno)) {
if (true != fn_emptyCheck(categoryno)) {
modalEvent.warning("등록", "카테고리를 입력하세요.");
return;
}
if(true != fn_emptyCheck(title)) {
if (true != fn_emptyCheck(title)) {
modalEvent.warning("등록", "제목을 입력하세요.");
return;
}
if(true != fn_emptyCheck(content)) {
if (true != fn_emptyCheck(content)) {
modalEvent.warning("등록", "내용을 입력하세요.");
return;
}
if(true != fn_emptyCheck(hashtag)) {
if (true != fn_emptyCheck(hashtag)) {
modalEvent.warning("등록", "해시태그를 입력하세요.");
return;
}
if(true != fn_emptyCheck(beforeFile)) {
if (true != fn_emptyCheck(beforeFile)) {
modalEvent.warning("등록", "Before 사진을 첨부하세요.");
return;
}
if(true != fn_emptyCheck(afterFile)) {
if (true != fn_emptyCheck(afterFile)) {
modalEvent.warning("등록", "After 사진을 첨부하세요.");
return;
}
modalEvent.info("등록", "전후사진(쁘띠) 정보를 등록하시겠습니까?", function(){
modalEvent.info("등록", "전후사진(쁘띠) 정보를 등록하시겠습니까?", function () {
let formData = new FormData();
formData.append("menuClass", menuClass);
formData.append("categoryno", categoryno);
@@ -59,152 +59,91 @@ function fn_insertWebPhoto(){
contentType: false,
type: 'POST',
async: true,
success: function(data){
if('0'==data.msgCode){
modalEvent.success("등록 성공", data.msgDesc, function(){
success: function (data) {
if ('0' == data.msgCode) {
modalEvent.success("등록 성공", data.msgDesc, function () {
fn_selectListWebPhotoPetitIntro();
});
}
else{
else {
modalEvent.danger("등록 오류", data.msgDesc);
}
},
error : function(xhr, status, error) {
error: function (xhr, status, error) {
modalEvent.danger("등록 오류", "등록 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
},
beforeSend:function(){
beforeSend: function () {
},
complete:function(){
complete: function () {
}
});
});
}
/****************************************************************************
* html 에디터 이미지 업로드시
****************************************************************************/
function uploadSummernoteImageFileNoticeInsert(files, editor){
Object.values(files).forEach(file => {
let formData = new FormData();
formData.append('menuClass', menuClass);
formData.append('file', file);
$.ajax({
url: encodeURI('/webphotopetit/uploadFile.do'),
data: formData,
dataType: "json",
processData: false,
contentType: false,
type: 'POST',
async: true,
success: function (data) {
if ('0' == data.msgCode) {
$(editor).summernote('insertImage', data.rows.filePath, function ($image) {
});
}
},
error: function (xhr, status, error) {
modalEvent.danger('오류', '이미지 업로드 중 오류가 발생했습니다.');
},
beforeSend: function () {
// 로딩열기
$(".loading-image-layer").show();
},
complete: function () {
// 로딩닫기
$(".loading-image-layer").hide();
}
});
})
}
/****************************************************************************
* 배너 이미지 미리보기
****************************************************************************/
function fn_filePreview(){
const file = $("#file")[0].files[0];
if(file){
$('.img_box').html('');
const reader = new FileReader();
reader.onload = function (e) {
// 이미지 요소를 생성하고 미리보기 추가
const img = document.createElement('img');
img.src = e.target.result;
img.style.width = '600px'; // 원하는 크기로 조정
img.style.height = '350px';
$('.img_box').append(img);
};
// 파일을 읽기 시작
reader.readAsDataURL(file);
}
}
/****************************************************************************
* 배너 이미지 삭제
****************************************************************************/
function fn_removePreview(){
$("#file").val('');
$('.img_box').html('');
}
/****************************************************************************
* 배너 이미지 미리보기
****************************************************************************/
function fn_beforeFilePreview(){
const file = $("#before_file")[0].files[0];
if(file){
$('#before_img_box').html('');
const reader = new FileReader();
function fn_beforeFilePreview() {
const file = $("#before_file")[0].files[0];
if (file) {
$('#before_img_box').html('');
const reader = new FileReader();
reader.onload = function (e) {
// 이미지 요소를 생성하고 미리보기 추가
const img = document.createElement('img');
img.src = e.target.result;
img.style.width = '600px'; // 원하는 크기로 조정
img.style.height = '350px';
$('#before_img_box').append(img);
};
reader.onload = function (e) {
// 이미지 요소를 생성하고 미리보기 추가
const img = document.createElement('img');
img.src = e.target.result;
img.style.width = '100%';
img.style.height = '100%';
img.style.objectFit = 'cover';
img.style.display = 'block';
$('#before_img_box').append(img);
};
// 파일을 읽기 시작
reader.readAsDataURL(file);
}
// 파일을 읽기 시작
reader.readAsDataURL(file);
}
}
/****************************************************************************
* 배너 이미지 삭제
****************************************************************************/
function fn_removeBeforePreview(){
function fn_removeBeforePreview() {
$("#before_file").val('');
$('#before_img_box').html('');
}
/****************************************************************************
* 배너 이미지 미리보기
****************************************************************************/
function fn_afterFilePreview(){
const file = $("#after_file")[0].files[0];
if(file){
$('#after_img_box').html('');
const reader = new FileReader();
function fn_afterFilePreview() {
const file = $("#after_file")[0].files[0];
if (file) {
$('#after_img_box').html('');
const reader = new FileReader();
reader.onload = function (e) {
// 이미지 요소를 생성하고 미리보기 추가
const img = document.createElement('img');
img.src = e.target.result;
img.style.width = '600px'; // 원하는 크기로 조정
img.style.height = '350px';
$('#after_img_box').append(img);
};
reader.onload = function (e) {
// 이미지 요소를 생성하고 미리보기 추가
const img = document.createElement('img');
img.src = e.target.result;
img.style.width = '100%';
img.style.height = '100%';
img.style.objectFit = 'cover';
img.style.display = 'block';
$('#after_img_box').append(img);
};
// 파일을 읽기 시작
reader.readAsDataURL(file);
}
// 파일을 읽기 시작
reader.readAsDataURL(file);
}
}
/****************************************************************************
* 배너 이미지 삭제
****************************************************************************/
function fn_removeAfterPreview(){
function fn_removeAfterPreview() {
$("#after_file").val('');
$('#after_img_box').html('');
}
@@ -212,11 +151,11 @@ function fn_removeAfterPreview(){
/****************************************************************************
* 리스트 화면으로 이동.
****************************************************************************/
function fn_selectListWebPhotoPetitIntro(){
if("Y"==selectUseYn){
let pagingParam = "?menuClass="+menuClass;
fn_leftFormAction("/webphotopetit/selectListWebPhotoPetitIntro.do"+pagingParam);
}else{
function fn_selectListWebPhotoPetitIntro() {
if ("Y" == selectUseYn) {
let paramUrl = "?menuClass=" + menuClass;
fn_leftFormAction("/webphotopetit/selectListWebPhotoPetitIntro.do" + paramUrl);
} else {
modalEvent.warning("", "조회 권한이 없습니다.");
return false;
}
@@ -225,86 +164,42 @@ function fn_selectListWebPhotoPetitIntro(){
/****************************************************************************
* 페이지 init
****************************************************************************/
function fn_pageInit(){
function fn_pageInit() {
// 날짜 datepicker
fn_searchDatePicker("#eventStartDate", "#eventEndDate");
$('#summernote').summernote({
height: 540,
callbacks: { //여기 부분이 이미지를 첨부하는 부분
onImageUpload : function(files) {
uploadSummernoteImageFileNoticeInsert(files, this);
}
},
});
}
/****************************************************************************
* 페이지 event
****************************************************************************/
function fn_pagePhoto(){
function fn_pagePhoto() {
// 검색 input
$('.btnCancle').on("click", function(){
$('.btnCancle').on("click", function () {
fn_selectListWebPhotoPetitIntro();
});
$('.btnSave').on("click", function(){
fn_insertWebPhoto();
$('.btnSave').on("click", function () {
fn_insertWebPhotoPetit();
});
$('#delete_btn').on("click", function(){
fn_removePreview();
});
$('#file').on('change', function(e) {
fn_filePreview();
})
$('#before_delete_btn').on("click", function(){
$('#before_delete_btn').on("click", function () {
fn_removeBeforePreview();
});
$('#before_file').on('change', function(e) {
$('#before_file').on('change', function (e) {
fn_beforeFilePreview();
});
$('#after_delete_btn').on("click", function(){
$('#after_delete_btn').on("click", function () {
fn_removeAfterPreview();
});
$('#after_file').on('change', function(e) {
$('#after_file').on('change', function (e) {
fn_afterFilePreview();
});
}
/****************************************************************************
* 시술 목록 팝업
****************************************************************************/
function listOpen(){
let reqParam = {};
photoSelectModal.popup(function (obj, reqParam) {
const childDivCount = $("#photolist > div").length;
if($("#" + obj.photoProcedureId).length > 0){
modalEvent.warning("", "이미 시술정보가 있습니다.");
return;
}
var htmlstring = `<div id="photo`+childDivCount+`">
<input type="checkbox" id="`+obj.photoProcedureId+`" name="photo">
<input type="hidden" name="photoprocedurelist" value="`+obj.photoProcedureId+`">
<input type="hidden" name="photolist" value="`+obj.photoId+`">
<label for="`+obj.photoProcedureId+`">`+obj.photoNm + `-` + obj.price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + `-` + obj.discountPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") +`</label>
</div>`;
$('#photolist').append(htmlstring);
}, reqParam);
}
function fn_removeRow(){
 $('input:checkbox[name="photo"]').each(function() {     
if(this.checked){//checked 처리된 항목의 값           
$(this).parent().remove();   
} 
});
}
$(function(){
$(function () {
// 페이지 init
fn_pageInit();
// 페이지 event
fn_pagePhoto();
});
});

509
src/main/resources/static/js/web/webphotopetit/webPhotoPetitSelectList.js
View File

@@ -1,6 +1,6 @@
/* 페이징 관련 변수 */
let webPhotoPetitTotalCount = 0;
let webPhotoPetitTotalPages = 0;
let webPhotoPetitTotalCount = 0;
let webPhotoPetitTotalPages = 0;
/*aggird*/
let webPhotoPetitAgGridData = [];
@@ -8,199 +8,18 @@ let webPhotoPetitAgGridData = [];
let webPhotoPetitSelectId = "";
let webPhotoPetitSelectCategoryNo = "";
/****************************************************************************
* 검색 날짜 설정
//(A:오늘, B:3일, C:7일, D:최근30일, E:최근90일, F:이번달, G:올해, H:지난주, I:지난달)
****************************************************************************/
function fn_webPhotoPetitSetDate(param){
if("A"==param){
// 오늘
let toDate = new Date();
let year = toDate.getFullYear();
let month = toDate.getMonth() + 1;
let day = toDate.getDate();
if(month < 10) month = "0" + month;
if(day < 10) day = "0" + day;
webPhotoPetitSearchStartDate = year+'-'+month+'-'+day;
webPhotoPetitSearchEndDate = year+'-'+month+'-'+day;
}
else if("B"==param){
// 3일
// 검색 종료일자
let toDate = new Date();
let year = toDate.getFullYear();
let month = toDate.getMonth() + 1;
let day = toDate.getDate();
if(month < 10) month = "0" + month;
if(day < 10) day = "0" + day;
webPhotoPetitSearchEndDate = year+'-'+month+'-'+day;
// 검색 시작일자
toDate.setDate(toDate.getDate() - 3);
year = toDate.getFullYear();
month = toDate.getMonth() + 1;
day = toDate.getDate();
if(month < 10) month = "0" + month;
if(day < 10) day = "0" + day;
webPhotoPetitSearchStartDate = year+'-'+month+'-'+day;
}
else if("C"==param){
// 이번주
// 검색 종료일자
let toDate = new Date();
let year = toDate.getFullYear();
let month = toDate.getMonth() + 1;
let day = toDate.getDate();
if(month < 10) month = "0" + month;
if(day < 10) day = "0" + day;
webPhotoPetitSearchEndDate = year+'-'+month+'-'+day;
// 검색 시작일자
toDate.setDate(toDate.getDate() - 7);
year = toDate.getFullYear();
month = toDate.getMonth() + 1;
day = toDate.getDate();
if(month < 10) month = "0" + month;
if(day < 10) day = "0" + day;
webPhotoPetitSearchStartDate = year+'-'+month+'-'+day;
}
else if("D"==param){
// 최근30일
let toDate = new Date();
let year = toDate.getFullYear();
let month = toDate.getMonth() + 1;
let day = toDate.getDate();
if(month < 10) month = "0" + month;
if(day < 10) day = "0" + day;
//최근30일
toDate.setDate(toDate.getDate() - 30);
startYear = toDate.getFullYear();
startMonth = toDate.getMonth() + 1;
startDay = toDate.getDate();
if(startMonth < 10) startMonth = "0" + startMonth;
if(startDay < 10) startDay = "0" + startDay;
webPhotoPetitSearchStartDate = startYear+'-'+startMonth+'-'+startDay;
webPhotoPetitSearchEndDate = year+'-'+month+'-'+day;
}
else if("E"==param){
// 최근90일
// 검색 종료일자
let toDate = new Date();
let year = toDate.getFullYear();
let month = toDate.getMonth() + 1;
let day = toDate.getDate();
if(month < 10) month = "0" + month;
if(day < 10) day = "0" + day;
webPhotoPetitSearchEndDate = year+'-'+month+'-'+day;
// 검색 시작일자
toDate.setDate(toDate.getDate() - 90);
year = toDate.getFullYear();
month = toDate.getMonth() + 1;
day = toDate.getDate();
if(month < 10) month = "0" + month;
if(day < 10) day = "0" + day;
webPhotoPetitSearchStartDate = year+'-'+month+'-'+day;
}
else if("F"==param){
//F:이번달
// 검색 종료일자
let toDate = new Date();
let year = toDate.getFullYear();
let month = toDate.getMonth() + 1;
let day = toDate.getDate();
if(month < 10) month = "0" + month;
if(day < 10) day = "0" + day;
webPhotoPetitSearchEndDate = year+'-'+month+'-'+day;
// 검색 시작일자
webPhotoPetitSearchStartDate = year+'-'+month+'-01';
}
else if("G"==param){
// G:올해
// 검색 종료일자
let toDate = new Date();
let year = toDate.getFullYear();
let month = toDate.getMonth() + 1;
let day = toDate.getDate();
if(month < 10) month = "0" + month;
if(day < 10) day = "0" + day;
webPhotoPetitSearchEndDate = year+'-'+month+'-'+day;
// 검색 시작일자
webPhotoPetitSearchStartDate = year+'-01-01';
}
else if("H"==param){
// H:지난주, I:지난달
// 검색 종료일자
let toDate = new Date();
let year = toDate.getFullYear();
let month = toDate.getMonth() + 1;
let day = toDate.getDate();
if(month < 10) month = "0" + month;
if(day < 10) day = "0" + day;
webPhotoPetitSearchEndDate = year+'-'+month+'-'+day;
// 검색 시작일자
webPhotoPetitSearchStartDate = year+'-01-01';
}
else if("I"==param){
// I:지난달
// 검색 종료일자
let toDate = new Date();
let year = toDate.getFullYear();
let month = toDate.getMonth() + 1;
let day = toDate.getDate();
if(month < 10) month = "0" + month;
if(day < 10) day = "0" + day;
webPhotoPetitSearchEndDate = year+'-'+month+'-'+day;
// 검색 시작일자
webPhotoPetitSearchStartDate = year+'-01-01';
}
$("#webPhotoPetitSearchStartDate").val(webPhotoPetitSearchStartDate).trigger("change");
$("#webPhotoPetitSearchEndDate").val(webPhotoPetitSearchEndDate).trigger("change");
}
/****************************************************************************
* 전후 사진(쁘띠) 정보 리스트 조회
****************************************************************************/
function fn_selectListWebPhotoPetitJson(){
function fn_selectListWebPhotoPetitJson() {
let formData = new FormData();
formData.append("menuClass", menuClass);
formData.append("webPhotoPetitSearchKeywordParam0", webPhotoPetitSearchKeywordParam0);
formData.append("webPhotoPetitSearchKeywordParam1", webPhotoPetitSearchKeywordParam1);
formData.append("webPhotoPetitSearchKeywordParam2", webPhotoPetitSearchKeywordParam2);
formData.append("webPhotoPetitSearchKeywordParam3", webPhotoPetitSearchKeywordParam3);
formData.append("webPhotoPetitSearchKeywordParam1", webPhotoPetitSearchKeywordParam1);
formData.append("webPhotoPetitSearchKeywordParam2", webPhotoPetitSearchKeywordParam2);
formData.append("webPhotoPetitSearchKeywordParam3", webPhotoPetitSearchKeywordParam3);
formData.append("webPhotoPetitSort", webPhotoPetitSort);
formData.append("webPhotoPetitDir", webPhotoPetitDir);
formData.append("webPhotoPetitStart", webPhotoPetitStart);
@@ -217,52 +36,50 @@ function fn_selectListWebPhotoPetitJson(){
contentType: false,
type: 'POST',
async: true,
success: function(data){
if('0'==data.msgCode){
success: function (data) {
if ('0' == data.msgCode) {
// 페이징 처리
webPhotoPetitTotalCount = data.totalCount;
//$("#txt_noticeTotalCount").text(noticeTotalCount);
webPhotoPetitTotalCount = data.totalCount;
webPhotoPetitTotalPages = Math.ceil(webPhotoPetitTotalCount/webPhotoPetitLimit);
webPhotoPetitTotalPages = Math.ceil(webPhotoPetitTotalCount / webPhotoPetitLimit);
// 리스트 조회
webPhotoPetitAgGridData = data.rows;
webPhotoPetitGridOptions.api.setRowData(webPhotoPetitAgGridData);
if(0<data.rows.length){
if (0 < data.rows.length) {
//페이징 처리
window.pagObj = $('#webPhotoPetitPagination').twbsPagination({
startPage : ((webPhotoPetitStart/webPhotoPetitLimit)+1),
totalPages : (webPhotoPetitTotalPages==0)?1:webPhotoPetitTotalPages,
visiblePages : 10,
startPage: ((webPhotoPetitStart / webPhotoPetitLimit) + 1),
totalPages: (webPhotoPetitTotalPages == 0) ? 1 : webPhotoPetitTotalPages,
visiblePages: 10,
initiateStartPageClick: false,
prev : '<img src="/image/web/page_navigation_arrow.svg" alt="prev"/>',
next : '<img src="/image/web/page_navigation_arrow.svg" alt="next"/>',
first : '',
last : '',
prev: '<img src="/image/web/page_navigation_arrow.svg" alt="prev"/>',
next: '<img src="/image/web/page_navigation_arrow.svg" alt="next"/>',
first: '',
last: '',
onPageClick: function (photopetit, page) {
fn_webPhotoPetitPagination(page);
}
}).on('page', function (photopetit, page) {
//console.info(page + ' (from photopetit listening)');
});
}
else{
else {
}
}
else{
else {
modalEvent.danger("조회 오류", data.msgDesc);
}
},
error : function(xhr, status, error) {
error: function (xhr, status, error) {
modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
},
beforeSend:function(){
beforeSend: function () {
// 로딩열기
webPhotoPetitGridOptions.api.showLoadingOverlay();
},
complete:function(){
complete: function () {
}
});
@@ -271,8 +88,8 @@ function fn_selectListWebPhotoPetitJson(){
/****************************************************************************
* 검색하기
****************************************************************************/
function fn_webPhotoPetitSearch(param){
if("A"!=param && "Y"!=selectUseYn){
function fn_webPhotoPetitSearch(param) {
if ("A" != param && "Y" != selectUseYn) {
modalEvent.warning("", "조회 권한이 없습니다.");
return false;
}
@@ -280,13 +97,13 @@ function fn_webPhotoPetitSearch(param){
fn_webPhotoPetitPaginReset();
webPhotoPetitSearchKeywordParam0 = $("#webPhotoPetitSearchKeyword0").val();
webPhotoPetitSearchKeywordParam1 = $("#webPhotoPetitSearchKeyword1").val();
webPhotoPetitSearchKeywordParam2 = $("#webPhotoPetitSearchKeyword2").val();
webPhotoPetitSearchKeywordParam3 = $("#webPhotoPetitSearchKeywordParam3").val();
webPhotoPetitSearchKeywordParam1 = $("#webPhotoPetitSearchKeyword1").val();
webPhotoPetitSearchKeywordParam2 = ""; // 작성자 검색 제거
webPhotoPetitSearchKeywordParam3 = $("#webPhotoPetitSearchKeywordParam3").val();
webPhotoPetitSearchDateType = $("#webPhotoPetitSearchDateType").val();
webPhotoPetitSearchDateType = $("#webPhotoPetitSearchDateType").val();
webPhotoPetitSearchStartDate = $("#webPhotoPetitSearchStartDate").val();
webPhotoPetitSearchEndDate = $("#webPhotoPetitSearchEndDate").val();
webPhotoPetitSearchEndDate = $("#webPhotoPetitSearchEndDate").val();
fn_selectListWebPhotoPetitJson();
}
@@ -295,14 +112,11 @@ function fn_webPhotoPetitSearch(param){
/****************************************************************************
* 초기화하기
****************************************************************************/
function fn_webPhotoPetitReset(){
fn_webPhotoPetitSetDate('D');
$("#webPhotoPetitSearchDateType option:eq(0)").prop("selected", true);
function fn_webPhotoPetitReset() {
$("#webPhotoPetitSearchKeyword0").val("");
$("#webPhotoPetitSearchKeyword1").val("");
$("#webPhotoPetitSearchKeyword2").val("");
$("#webPhotoPetitSearchKeyword3").val("");
$("#webPhotoPetitSearchKeyword1").val("");
$("#webPhotoPetitSearchKeyword2").val("");
$("#webPhotoPetitSearchKeyword3").val("");
fn_webPhotoPetitSearch();
}
@@ -310,8 +124,8 @@ function fn_webPhotoPetitReset(){
/****************************************************************************
* 페이징 처리
****************************************************************************/
function fn_webPhotoPetitPagination(param){
webPhotoPetitStart = (parseInt(param)-1)*webPhotoPetitLimit;
function fn_webPhotoPetitPagination(param) {
webPhotoPetitStart = (parseInt(param) - 1) * webPhotoPetitLimit;
fn_selectListWebPhotoPetitJson();
}
@@ -319,19 +133,19 @@ function fn_webPhotoPetitPagination(param){
/****************************************************************************
* 페이징 리셋
****************************************************************************/
function fn_webPhotoPetitPaginReset(){
function fn_webPhotoPetitPaginReset() {
webPhotoPetitSearchKeywordParam0 = '';
webPhotoPetitSearchKeywordParam1 = '';
webPhotoPetitSearchKeywordParam2 = '';
webPhotoPetitSearchKeywordParam3 = '';
webPhotoPetitSearchKeywordParam1 = '';
webPhotoPetitSearchKeywordParam2 = '';
webPhotoPetitSearchKeywordParam3 = '';
webPhotoPetitStart = 0;
webPhotoPetitLimit = 100;
webPhotoPetitTotalCount = 0;
webPhotoPetitTotalPages = 0;
webPhotoPetitStart = 0;
webPhotoPetitLimit = 100;
webPhotoPetitTotalCount = 0;
webPhotoPetitTotalPages = 0;
//페이징 초기화
if($("#webPhotoPetitPagination").data("twbs-pagination")){
if ($("#webPhotoPetitPagination").data("twbs-pagination")) {
$("#webPhotoPetitPagination").twbsPagination("destroy");
}
}
@@ -339,22 +153,22 @@ function fn_webPhotoPetitPaginReset(){
/****************************************************************************
* 전후 사진(쁘띠) 삭제
****************************************************************************/
function fn_deleteWebPhotoPetit(){
if("Y"!=deleteUseYn){
function fn_deleteWebPhotoPetit() {
if ("Y" != deleteUseYn) {
modalEvent.warning("", "삭제 권한이 없습니다.");
return false;
}
if(!webPhotoPetitSelectId){
if (!webPhotoPetitSelectId) {
modalEvent.warning("", "삭제할 대상을 선택하세요.");
return false;
}
// categoryno 값 가져오기 (여러 개일 수 있음)
let selectRows = webPhotoPetitGridOptions.api.getSelectedRows();
let categoryNos = selectRows.map(function(row) { return row.categoryno; }).join(",");
let categoryNos = selectRows.map(function (row) { return row.categoryno; }).join(",");
modalEvent.info("삭제", "선택한 전후 사진(쁘띠) 정보를 삭제하시겠습니까?", function(){
modalEvent.info("삭제", "선택한 전후 사진(쁘띠) 정보를 삭제하시겠습니까?", function () {
let formData = new FormData();
formData.append("menuClass", menuClass);
formData.append("selectId", webPhotoPetitSelectId);
@@ -368,23 +182,23 @@ function fn_deleteWebPhotoPetit(){
contentType: false,
type: 'POST',
async: true,
success: function(data){
if('0'==data.msgCode){
modalEvent.success("삭제 성공", data.msgDesc, function(){
success: function (data) {
if ('0' == data.msgCode) {
modalEvent.success("삭제 성공", data.msgDesc, function () {
fn_webPhotoPetitOk();
});
}
else{
else {
modalEvent.danger("삭제 오류", data.msgDesc);
}
},
error : function(xhr, status, error) {
error: function (xhr, status, error) {
modalEvent.danger("삭제 오류", "삭제 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
},
beforeSend:function(){
beforeSend: function () {
},
complete:function(){
complete: function () {
}
});
@@ -394,17 +208,17 @@ function fn_deleteWebPhotoPetit(){
/****************************************************************************
* 검색 엔터 전후 사진(쁘띠)
****************************************************************************/
function fn_webPhotoPetitEnter(e){
if(e.which){
function fn_webPhotoPetitEnter(e) {
if (e.which) {
// 파이어폭스
if(13 == e.which) {
if (13 == e.which) {
//로그인 액션 스크립트
fn_webPhotoPetitSearch();
}
}
else{
else {
// 윈도우, 사파리, 크롬
if(13 == photopetit.keyCode) {
if (13 == photopetit.keyCode) {
//로그인 액션 스크립트
fn_webPhotoPetitSearch();
}
@@ -414,50 +228,41 @@ function fn_webPhotoPetitEnter(e){
/****************************************************************************
* 정렬 전후 사진(쁘띠)
****************************************************************************/
function fn_alignPhotoPetit(param, param2){
function fn_alignPhotoPetit(param, param2) {
let align = "";
if("A"==param){
if ("A" == param) {
align = "오늘";
fn_webPhotoPetitSetDate('A');
}
else if("B"==param){
else if ("B" == param) {
align = "최근30일";
fn_webPhotoPetitSetDate('D');
}
else if("C"==param){
else if ("C" == param) {
align = "최근90일";
fn_webPhotoPetitSetDate('E');
}
else if("D"==param){
else if ("D" == param) {
align = "이번주";
fn_webPhotoPetitSetDate('C');
}
else if("E"==param){
else if ("E" == param) {
align = "이번달";
fn_webPhotoPetitSetDate('F');
}
else if("F"==param){
else if ("F" == param) {
align = "올해";
fn_webPhotoPetitSetDate('G');
}
else if("G"==param){
else if ("G" == param) {
align = "지난주";
fn_webPhotoPetitSetDate('H');
}
else if("H"==param){
else if ("H" == param) {
align = "지난달";
fn_webPhotoPetitSetDate('I');
}
else{
else {
align = "";
}
$("#webPhotoPetitSearchDateType").val(param);
@@ -467,18 +272,18 @@ function fn_alignPhotoPetit(param, param2){
/****************************************************************************
* 완료
****************************************************************************/
function fn_webPhotoPetitOk(){
function fn_webPhotoPetitOk() {
fn_webPhotoPetitReset();
}
/****************************************************************************
* 등록 화면으로 이동.
****************************************************************************/
function fn_insertWebPhotoPetitIntro(){
if("Y"==insertUseYn){
let pagingParam = "?menuClass="+menuClass;
fn_leftFormAction("/webphotopetit/insertWebPhotoPetitIntro.do"+pagingParam);
}else{
function fn_insertWebPhotoPetitIntro() {
if ("Y" == insertUseYn) {
let pagingParam = "?menuClass=" + menuClass;
fn_leftFormAction("/webphotopetit/insertWebPhotoPetitIntro.do" + pagingParam);
} else {
modalEvent.warning("", "등록 권한이 없습니다.");
return false;
}
@@ -488,13 +293,13 @@ function fn_insertWebPhotoPetitIntro(){
/****************************************************************************
* 수정 화면으로 이동.
****************************************************************************/
function fn_updateWebPhotoPetitIntro(muWebPhotoPetitId, categoryno){
if("Y"==updateUseYn){
let pagingParam = "?menuClass="+menuClass;
pagingParam += "&muWebPhotoPetitId="+muWebPhotoPetitId;
pagingParam += "&categoryno="+categoryno;
fn_leftFormAction("/webphotopetit/updateWebPhotoPetitIntro.do"+pagingParam);
}else{
function fn_updateWebPhotoPetitIntro(muWebPhotoPetitId, categoryno) {
if ("Y" == updateUseYn) {
let pagingParam = "?menuClass=" + menuClass;
pagingParam += "&muWebPhotoPetitId=" + muWebPhotoPetitId;
pagingParam += "&categoryno=" + categoryno;
fn_leftFormAction("/webphotopetit/updateWebPhotoPetitIntro.do" + pagingParam);
} else {
modalEvent.warning("", "수정 권한이 없습니다.");
return false;
}
@@ -502,14 +307,14 @@ function fn_updateWebPhotoPetitIntro(muWebPhotoPetitId, categoryno){
let webPhotoPetitColumnDefs = [
{field: "checkbox", headerName:"", minWidth:55, maxWidth:55, headerCheckboxSelection: true, checkboxSelection: true},
{field: "rowNum", headerName:"번호", minWidth:60, maxWidth:60,sortable: false, cellStyle:{textAlign: 'center'}},
{field: "category", headerName:"카테고리", minWidth:60},
{field: "title", headerName:"제목", minWidth:150, cellStyle:{cursor: 'pointer', color:'#3985EA'}},
{field: "content", headerName:"내용요약", minWidth:150},
{field: "hashtag", headerName:"해시태그", minWidth:150},
{field: "writeDate", headerName:"등록일",minWidth:100, maxWidth:150},
{field: "writeName", headerName:"작성자",minWidth:100, maxWidth:150},
{ field: "checkbox", headerName: "", minWidth: 55, maxWidth: 55, headerCheckboxSelection: true, checkboxSelection: true },
{ field: "rowNum", headerName: "번호", minWidth: 60, maxWidth: 60, sortable: false, cellStyle: { textAlign: 'center' } },
{ field: "category", headerName: "카테고리", minWidth: 60 },
{ field: "title", headerName: "제목", minWidth: 150, cellStyle: { cursor: 'pointer', color: '#3985EA' } },
{ field: "content", headerName: "내용요약", minWidth: 150 },
{ field: "hashtag", headerName: "해시태그", minWidth: 150 },
{ field: "writeDate", headerName: "등록일", minWidth: 100, maxWidth: 150 },
{ field: "writeName", headerName: "작성자", minWidth: 100, maxWidth: 150 },
];
// let the grid know which columns and what data to use
@@ -521,60 +326,60 @@ let webPhotoPetitGridOptions = {
sortable: true, //정렬 여부
resizable: true, //리사이즈
editable: true, // 그리드에서 데이터 수정
cellStyle:{textAlign:'left',fontSize:'14px',padding:'0'},
cellStyle: { textAlign: 'left', fontSize: '14px', padding: '0' },
//suppressSizeToFit:true, //자동 맞춤
//enableRowGroup: true, // 그룹 묶음
enablePivot: true,
enableValue : true
enableValue: true
},
//suppressMultiSort:true, //단일솔트 true가 단일, false가 다중 shift + sort 시
headerHeight : 41, // header 높이
rowHeight : 41, // row 높이
rowData : webPhotoPetitAgGridData,
suppressRowClickSelection : true, // 로우 클릭시 체크박스 선택 true no, false yes
localeText : {
noRowsToShow : '조회 결과가 없습니다.'
headerHeight: 41, // header 높이
rowHeight: 41, // row 높이
rowData: webPhotoPetitAgGridData,
suppressRowClickSelection: true, // 로우 클릭시 체크박스 선택 true no, false yes
localeText: {
noRowsToShow: '조회 결과가 없습니다.'
}, //데이터 없을 시 나오는 문구
rowSelection : 'multiple', // row 다중 선택
debug : false,
onCellClicked: function(photopetit){ //셀 클릭 전후 사진(쁘띠)
rowSelection: 'multiple', // row 다중 선택
debug: false,
onCellClicked: function (photopetit) { //셀 클릭 전후 사진(쁘띠)
/* alert(photopetit.column.colId); */
if('title'==photopetit.column.colId){
if ('title' == photopetit.column.colId) {
fn_updateWebPhotoPetitIntro(photopetit.data.muWebPhotoPetitId, photopetit.data.categoryno);
}
},
onSelectionChanged: function(photopetit){ //체크박스 선택
onSelectionChanged: function (photopetit) { //체크박스 선택
let selectRows = [];
selectRows = photopetit.api.getSelectedRows();
webPhotoPetitSelectId = '';
for(let i=0; i<selectRows.length; i++){
for (let i = 0; i < selectRows.length; i++) {
webPhotoPetitSelectId += selectRows[i].muWebPhotoPetitId + ",";
}
webPhotoPetitSelectId = webPhotoPetitSelectId.substring(0, webPhotoPetitSelectId.lastIndexOf(','));
},
onSortChanged: function(photopetit){
onSortChanged: function (photopetit) {
//정렬
webPhotoPetitSort = ''; //기존 정렬 초기화
let columnArr = photopetit.columnApi.getColumnState();
if(0<columnArr.length){
if (0 < columnArr.length) {
//sort index 순으로 재정렬
columnArr.sort(function(a,b){
columnArr.sort(function (a, b) {
return a.sortIndex - b.sortIndex;
});
let nullCnt = 0;
for(let i=0; i<columnArr.length; i++){
for (let i = 0; i < columnArr.length; i++) {
let gridSortModel = columnArr[i].colId;
let gridSort = columnArr[i].sort;
if(gridSort != null){
if (gridSort != null) {
webPhotoPetitStart = 0;
webPhotoPetitSort += gridSortModel+' '+ gridSort + ',';
webPhotoPetitSort += gridSortModel + ' ' + gridSort + ',';
}
else{
else {
nullCnt++;
if(nullCnt == columnArr.length){
if (nullCnt == columnArr.length) {
webPhotoPetitSort = '';
webPhotoPetitDir = '';
webPhotoPetitStart = 0;
@@ -582,7 +387,7 @@ let webPhotoPetitGridOptions = {
}
}
}
webPhotoPetitSort = webPhotoPetitSort.substring(0,webPhotoPetitSort.lastIndexOf( ",")); //맨끝 콤마 지우기
webPhotoPetitSort = webPhotoPetitSort.substring(0, webPhotoPetitSort.lastIndexOf(",")); //맨끝 콤마 지우기
fn_webPhotoPetitSearch();
}
@@ -601,45 +406,72 @@ new agGrid.Grid(webPhotoPetitGridDiv, webPhotoPetitGridOptions);
/****************************************************************************
* 페이지 init
****************************************************************************/
function fn_pageInit(){
function fn_pageInit() {
// 카테고리 목록 동적 로드
fn_loadCategoryList();
// 날짜 datepicker
fn_searchDatePicker("#divWebPhotoPetitSearchStartDate", "#divWebPhotoPetitSearchEndDate");
if(!webPhotoPetitSearchStartDate&&!webPhotoPetitSearchEndDate){
if (!webPhotoPetitSearchStartDate && !webPhotoPetitSearchEndDate) {
// 검색 오늘날짜 셋팅
fn_webPhotoPetitSetDate('D');
}else{
} else {
$("#webPhotoPetitSearchStartDate").val(webPhotoPetitSearchStartDate).trigger("change");
$("#webPhotoPetitSearchEndDate").val(webPhotoPetitSearchEndDate).trigger("change");
}
// 초기 페이징 처리
$("#webPhotoPetitSearchKeyword0").val(webPhotoPetitSearchKeywordParam0);
$("#webPhotoPetitSearchKeyword1").val(webPhotoPetitSearchKeywordParam1);
$("#webPhotoPetitSearchKeyword2").val(webPhotoPetitSearchKeywordParam2);
$("#webPhotoPetitSearchKeyword3").val(webPhotoPetitSearchKeywordParam3);
$("#webPhotoPetitSearchKeyword1").val(webPhotoPetitSearchKeywordParam1);
$("#webPhotoPetitSearchKeyword2").val(webPhotoPetitSearchKeywordParam2);
$("#webPhotoPetitSearchKeyword3").val(webPhotoPetitSearchKeywordParam3);
fn_webPhotoPetitSearch("A");
}
/****************************************************************************
* 카테고리 목록 동적 로드
****************************************************************************/
function fn_loadCategoryList() {
let formData = new FormData();
formData.append("categoryDivCd", categoryDivCd);
$.ajax({
url: encodeURI('/webphotopetit/getCategoryList.do'),
data: formData,
dataType: "json",
processData: false,
contentType: false,
type: 'POST',
async: false,
success: function (data) {
if ('0' == data.msgCode) {
let optionList = $("#categoryOptionList");
let rows = data.rows;
for (let i = 0; i < rows.length; i++) {
let li = $('<li class="option_list_item" id="li_' + rows[i].categoryNo + '">' + rows[i].categoryNm + '</li>');
optionList.append(li);
}
}
},
error: function (xhr, status, error) {
console.error("카테고리 목록 조회 오류", error);
}
});
}
/****************************************************************************
* 페이지 photopetit
****************************************************************************/
function fn_pagePhotoPetit(){
function fn_pagePhotoPetit() {
// 검색 input
$(document).on('keypress', '#webPhotoPetitSearchKeyword0', function(e) {
$(document).on('keypress', '#webPhotoPetitSearchKeyword1', function (e) {
fn_webPhotoPetitEnter(e);
});
// 검색 input
$(document).on('keypress', '#webPhotoPetitSearchKeyword1', function(e) {
fn_webPhotoPetitEnter(e);
});
// 검색 input
$(document).on('keypress', '#webPhotoPetitSearchKeyword2', function(e) {
fn_webPhotoPetitEnter(e);
});
// 검색 input
$(document).on('keypress', '#webPhotoPetitSearchKeyword3', function(e) {
// 검색 input
$(document).on('keypress', '#webPhotoPetitSearchKeyword3', function (e) {
fn_webPhotoPetitEnter(e);
});
@@ -658,24 +490,21 @@ function fn_pagePhotoPetit(){
fn_deleteWebPhotoPetit();
});
// 기간 선택 콤보 전후 사진(쁘띠)
const target = $("#webPhotoPetitSearchDateType").siblings("ul.select_option_list");
target.find("li.option_list_item").click(function () {
// 카테고리 선택 콤보
$(document).on("click", "#categoryOptionList .option_list_item", function () {
let selectIdArr = $(this).prop("id").split('_');
let selectId = selectIdArr[1];
let selectName = $(this).text();
let selectId = selectIdArr[1];
let selectName = $(this).text();
$(this).parent().siblings("button").text(selectName);
$(this).parent().siblings("input").val(selectId);
fn_alignPhotoPetit(selectId);
$("#webPhotoPetitSearchKeyword0").val(selectName === "전체" ? "" : selectName);
});
}
$(function(){
$(function () {
// 페이지 init
fn_pageInit();
// 페이지 photopetit
fn_pagePhotoPetit();
});
});

147
src/main/resources/static/js/web/webphotopetit/webPhotoPetitUpdate.js
View File

@@ -1,12 +1,9 @@
// Before/After 이미지 파일 변경 상태
let isBeforeFileModified = false;
let isAfterFileModified = false;
/****************************************************************************
* 전후사진 상세 조회
****************************************************************************/
function fn_selectWebPhotoPetit(){
if(true != fn_emptyCheck(muWebPhotoPetitId)) {
function fn_selectWebPhotoPetit() {
if (true != fn_emptyCheck(muWebPhotoPetitId)) {
modalEvent.warning("수정", "이벤트 정보가 없습니다.");
return;
}
@@ -23,8 +20,8 @@ function fn_selectWebPhotoPetit(){
contentType: false,
type: 'POST',
async: true,
success: function(data){
if('0'==data.msgCode){
success: function (data) {
if ('0' == data.msgCode) {
if (data.rows && data.rows.length > 0) {
let photoData = data.rows[0];
$("select[name=categorylist]").val(photoData.categoryno).prop("selected", true);
@@ -32,11 +29,11 @@ function fn_selectWebPhotoPetit(){
$("#content").val(photoData.content);
$("#hashtag").val(photoData.hashtag);
// Before/After 이미지 미리보기
if(photoData.beforefile) {
$('#before_img_box').html('<img src="'+CDN_URL+photoData.beforefile+'" style="width:600px;height:350px;">');
if (photoData.beforefile) {
$('#before_img_box').html('<img src="' + CDN_URL + photoData.beforefile + '" style="width: 100%; height: 100%; object-fit: cover; display: block;">');
}
if(photoData.afterfile) {
$('#after_img_box').html('<img src="'+CDN_URL+photoData.afterfile+'" style="width:600px;height:350px;">');
if (photoData.afterfile) {
$('#after_img_box').html('<img src="' + CDN_URL + photoData.afterfile + '" style="width: 100%; height: 100%; object-fit: cover; display: block;">');
}
} else {
modalEvent.warning("수정", "조회된 전후사진 데이터가 없습니다.");
@@ -45,7 +42,7 @@ function fn_selectWebPhotoPetit(){
alert("수정 오류: " + data.msgDesc);
}
},
error : function(xhr, status, error) {
error: function (xhr, status, error) {
alert("수정 오류: 수정 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
}
});
@@ -54,8 +51,8 @@ function fn_selectWebPhotoPetit(){
/****************************************************************************
* 전후사진 수정
****************************************************************************/
function fn_updateWebPhotoPetit(){
if("Y"!=updateUseYn){
function fn_updateWebPhotoPetit() {
if ("Y" != updateUseYn) {
modalEvent.warning("", "수정 권한이 없습니다.");
return false;
}
@@ -66,43 +63,43 @@ function fn_updateWebPhotoPetit(){
let beforeFile = $("#before_file")[0].files[0];
let afterFile = $("#after_file")[0].files[0];
if(true != fn_emptyCheck(categoryNo)) {
if (true != fn_emptyCheck(categoryNo)) {
modalEvent.warning("수정", "카테고리를 입력하세요.");
return;
}
if(true != fn_emptyCheck(title)) {
if (true != fn_emptyCheck(title)) {
modalEvent.warning("수정", "제목을 입력하세요.");
return;
}
if(true != fn_emptyCheck(content)) {
if (true != fn_emptyCheck(content)) {
modalEvent.warning("수정", "내용을 입력하세요.");
return;
}
if(true != fn_emptyCheck(hashtag)) {
if (true != fn_emptyCheck(hashtag)) {
modalEvent.warning("수정", "해시태그를 입력하세요.");
return;
}
if(!beforeFile && $("#before_img_box img").length === 0) {
if (!beforeFile && $("#before_img_box img").length === 0) {
modalEvent.warning("수정", "Before 사진을 첨부하세요.");
return;
}
if(!afterFile && $("#after_img_box img").length === 0) {
if (!afterFile && $("#after_img_box img").length === 0) {
modalEvent.warning("수정", "After 사진을 첨부하세요.");
return;
}
modalEvent.info("수정", "전후사진(쁘띠) 정보를 수정하시겠습니까?", function(){
modalEvent.info("수정", "전후사진(쁘띠) 정보를 수정하시겠습니까?", function () {
let formData = new FormData();
formData.append("menuClass", menuClass);
formData.append("categoryNo", categoryNo);
// 기존 카테고리 번호도 같이 전송
if(originalCategoryNo) formData.append("originalCategoryNo", originalCategoryNo);
if (originalCategoryNo) formData.append("originalCategoryNo", originalCategoryNo);
formData.append("title", title);
formData.append("content", content);
formData.append("hashtag", hashtag);
formData.append("muWebPhotoPetitId", muWebPhotoPetitId);
if(beforeFile) formData.append("beforeFile", beforeFile);
if(afterFile) formData.append("afterFile", afterFile);
if (beforeFile) formData.append("beforeFile", beforeFile);
if (afterFile) formData.append("afterFile", afterFile);
$.ajax({
url: encodeURI('/webphotopetit/updateWebPhotoPetit.do'),
@@ -112,17 +109,17 @@ function fn_updateWebPhotoPetit(){
contentType: false,
type: 'POST',
async: true,
success: function(data){
if('0'==data.msgCode){
modalEvent.success("수정 성공", data.msgDesc, function(){
success: function (data) {
if ('0' == data.msgCode) {
modalEvent.success("수정 성공", data.msgDesc, function () {
fn_selectListWebPhotoPetitIntro();
});
}
else{
else {
modalEvent.danger("수정 오류", data.msgDesc);
}
},
error : function(xhr, status, error) {
error: function (xhr, status, error) {
modalEvent.danger("수정 오류", "수정 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
}
});
@@ -132,41 +129,45 @@ function fn_updateWebPhotoPetit(){
/****************************************************************************
* Before/After 이미지 미리보기 및 삭제
****************************************************************************/
function fn_beforeFilePreview(){
const file = $("#before_file")[0].files[0];
if(file){
$('#before_img_box').html('');
const reader = new FileReader();
reader.onload = function (e) {
const img = document.createElement('img');
img.src = e.target.result;
img.style.width = '600px';
img.style.height = '350px';
$('#before_img_box').append(img);
};
reader.readAsDataURL(file);
}
function fn_beforeFilePreview() {
const file = $("#before_file")[0].files[0];
if (file) {
$('#before_img_box').html('');
const reader = new FileReader();
reader.onload = function (e) {
const img = document.createElement('img');
img.src = e.target.result;
img.style.width = '100%';
img.style.height = '100%';
img.style.objectFit = 'cover';
img.style.display = 'block';
$('#before_img_box').append(img);
};
reader.readAsDataURL(file);
}
}
function fn_removeBeforePreview(){
function fn_removeBeforePreview() {
$("#before_file").val('');
$('#before_img_box').html('');
}
function fn_afterFilePreview(){
const file = $("#after_file")[0].files[0];
if(file){
$('#after_img_box').html('');
const reader = new FileReader();
reader.onload = function (e) {
const img = document.createElement('img');
img.src = e.target.result;
img.style.width = '600px';
img.style.height = '350px';
$('#after_img_box').append(img);
};
reader.readAsDataURL(file);
}
function fn_afterFilePreview() {
const file = $("#after_file")[0].files[0];
if (file) {
$('#after_img_box').html('');
const reader = new FileReader();
reader.onload = function (e) {
const img = document.createElement('img');
img.src = e.target.result;
img.style.width = '100%';
img.style.height = '100%';
img.style.objectFit = 'cover';
img.style.display = 'block';
$('#after_img_box').append(img);
};
reader.readAsDataURL(file);
}
}
function fn_removeAfterPreview(){
function fn_removeAfterPreview() {
$("#after_file").val('');
$('#after_img_box').html('');
}
@@ -174,11 +175,11 @@ function fn_removeAfterPreview(){
/****************************************************************************
* 리스트 화면으로 이동
****************************************************************************/
function fn_selectListWebPhotoPetitIntro(){
if("Y"==selectUseYn){
let pagingParam = "?menuClass="+menuClass;
fn_leftFormAction("/webphotopetit/selectListWebPhotoPetitIntro.do"+pagingParam);
}else{
function fn_selectListWebPhotoPetitIntro() {
if ("Y" == selectUseYn) {
let pagingParam = "?menuClass=" + menuClass;
fn_leftFormAction("/webphotopetit/selectListWebPhotoPetitIntro.do" + pagingParam);
} else {
modalEvent.warning("", "조회 권한이 없습니다.");
return false;
}
@@ -187,35 +188,35 @@ function fn_selectListWebPhotoPetitIntro(){
/****************************************************************************
* 페이지 init
****************************************************************************/
function fn_pageInit(){
function fn_pageInit() {
fn_selectWebPhotoPetit();
}
/****************************************************************************
* 페이지 event
****************************************************************************/
function fn_pageEvent(){
$('.btnCancle').on("click", function(){
function fn_pageEvent() {
$('.btnCancle').on("click", function () {
fn_selectListWebPhotoPetitIntro();
});
$('.btnSave').on("click", function(){
$('.btnSave').on("click", function () {
fn_updateWebPhotoPetit();
});
$('#before_delete_btn').on("click", function(){
$('#before_delete_btn').on("click", function () {
fn_removeBeforePreview();
});
$('#before_file').on('change', function(e) {
$('#before_file').on('change', function (e) {
fn_beforeFilePreview();
});
$('#after_delete_btn').on("click", function(){
$('#after_delete_btn').on("click", function () {
fn_removeAfterPreview();
});
$('#after_file').on('change', function(e) {
$('#after_file').on('change', function (e) {
fn_afterFilePreview();
});
}
$(function(){
$(function () {
fn_pageInit();
fn_pageEvent();
});

162
src/main/resources/templates/web/webphotopetit/webPhotoPetitInsert.html
View File

@@ -1,90 +1,126 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{/web/layout/homeLayout}">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{/web/layout/homeLayout}">
<th:block layout:fragment="layout_css">
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/web/webPhotoPetitInsert.css">
<link rel="stylesheet" href="/css/web/ContentsBbsUpd.css">
<link rel="stylesheet" href="/css/web/grid.css?v1.1">
</th:block>
<th:block layout:fragment="layout_top_script">
<script src="/js/web/jquery.twbsPagination.js" type="text/javascript"></script>
<script>
let menuClass = "[[${param.menuClass}]]"==""?"":"[[${param.menuClass}]]";
let menuClass = "[[${param.menuClass}]]" == "" ? "" : "[[${param.menuClass}]]";
let selectUseYn = "[[${selectUseYn}]]"==""?"N":"[[${selectUseYn}]]";
let insertUseYn = "[[${insertUseYn}]]"==""?"N":"[[${insertUseYn}]]";
let updateUseYn = "[[${updateUseYn}]]"==""?"N":"[[${updateUseYn}]]";
let deleteUseYn = "[[${deleteUseYn}]]"==""?"N":"[[${deleteUseYn}]]";
let downloadUseYn = "[[${downloadUseYn}]]"==""?"N":"[[${downloadUseYn}]]";
let selectUseYn = "[[${selectUseYn}]]" == "" ? "N" : "[[${selectUseYn}]]";
let insertUseYn = "[[${insertUseYn}]]" == "" ? "N" : "[[${insertUseYn}]]";
</script>
</th:block>
<th:block layout:fragment="layout_content">
<!-- 센터쪽 -->
<div class="center_box">
<p class="page_title">전후 사진(쁘띠)</p>
<!-- 테이블 -->
<div class="content_box">
<div class="content clear">
<div class="wp60">
<div class="top">
<label>Before 사진 첨부파일</label>
<label for="before_file" class="file_btn"><img src="/image/web/add.svg" alt="파일찾기"></label>
<div class="update-container">
<!-- Left Panel: Form Data -->
<div class="left-panel">
<!-- Row 1: Category & Title -->
<div class="form-grid-row">
<div class="form-group" style="flex: 0 0 150px;">
<label>카테고리</label>
<select th:name="categorylist">
<option value="">선택하세요</option>
<option th:each="category : ${categorylist}" th:value="${category.categoryNo}"
th:text="${category.categoryNm}"></option>
</select>
</div>
<div class="form-group">
<label>제목</label>
<input type="text" id="title" placeholder="제목을 입력해주세요." />
</div>
</div>
<div class="btm">
<div class="img_box" id="before_img_box"><!-- Before img 미리보기 --></div>
<input type="file" id="before_file" accept="image/jpeg, image/jpg, image/png" style="display: none;" multiple>
<button id="before_delete_btn">삭제</button>
<!-- Row 2: Content (Summernote usually takes full width, so we wrap it here) -->
<div class="form-grid-row" style="display:block;">
<div class="form-group" style="width: 100%;">
<label style="display:block; margin-bottom:5px;">내용</label>
<input type="text" id="content" placeholder="내용을 입력해주세요." />
</div>
</div>
<div class="top">
<label>After 사진 첨부파일</label>
<label for="after_file" class="file_btn"><img src="/image/web/add.svg" alt="파일찾기"></label>
<!-- Row 3: Hashtag -->
<div class="form-grid-row">
<div class="form-group">
<label>해쉬태그</label>
<input type="text" id="hashtag" placeholder="해쉬태그를 입력해주세요." />
</div>
</div>
<div class="btm">
<div class="img_box" id="after_img_box"><!-- After img 미리보기 --></div>
<input type="file" id="after_file" accept="image/jpeg, image/jpg, image/png" style="display: none;" multiple>
<button id="after_delete_btn">삭제</button>
<div class="panel-section action-buttons" style="display: flex; gap: 10px; margin-top: 20px;">
<button class="registration_btn btnSave"
style="width: 80px; height: 36px; border-radius: 4px; display: inline-block;">등록</button>
<button class="cancel_btn btnCancle"
style="width: 80px; height: 36px; border-radius: 4px; display: inline-block; margin-left: 10px;">취소</button>
</div>
</div>
<div class="wp40">
<div class="consultation-info">
<p id="main_category">
카테고리
</p>
<select th:name="categorylist">
<option value="">선택하세요</option>
<option th:each="category : ${categorylist}" th:value="${category.categoryNo}" th:text="${category.categoryNm}"></option>
</select>
<p id="main_title">
제목
</p>
<input type="text" id="title" placeholder="제목을 입력해주세요."/>
<p id="main_content">
내용
</p>
<textarea id="content" placeholder="내용을 입력해주세요."></textarea>
<p id="main_hashtag">
해쉬태그
</p>
<input type="text" id="hashtag" placeholder="해쉬태그를 입력해주세요."/>
</div>
</div>
<div class="button_box" style="display: flex; gap: 16px; justify-content: center; margin-top: 32px;">
<button class="cancel_btn btnCancle">취소</button>
<button class="registration_btn btnSave">등록</button>
</div>
</div>
</div>
<!-- Right Panel: Images -->
<div class="right-panel" style="display: flex; flex-direction: column;">
<div style="display: flex; gap: 20px;">
<!-- Before Image Section -->
<div class="panel-section">
<div class="top-label">
<span>Before 사진 첨부파일</span>
<div>
<label for="before_file" class="file_btn" style="cursor: pointer;"><img
src="/image/web/add.svg" alt="파일찾기"></label>
<button id="before_delete_btn"
style="border:none; background:none; cursor:pointer; margin-left:5px; font-size:12px; color:#999;">삭제</button>
</div>
</div>
<div class="img-preview-wrapper img_box" id="before_img_box"
style="width: 360px; height: 360px; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;">
<!-- Before img 미리보기 -->
</div>
<input type="file" id="before_file" accept="image/jpeg, image/jpg, image/png"
style="display: none;" multiple>
</div>
<!-- After Image Section -->
<div class="panel-section">
<div class="top-label">
<span>After 사진 첨부파일</span>
<div>
<label for="after_file" class="file_btn" style="cursor: pointer;"><img
src="/image/web/add.svg" alt="파일찾기"></label>
<button id="after_delete_btn"
style="border:none; background:none; cursor:pointer; margin-left:5px; font-size:12px; color:#999;">삭제</button>
</div>
</div>
<div class="img-preview-wrapper img_box" id="after_img_box"
style="width: 360px; height: 360px; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;">
<!-- After img 미리보기 -->
</div>
<input type="file" id="after_file" accept="image/jpeg, image/jpg, image/png"
style="display: none;" multiple>
</div>
</div>
<!-- Guide Section -->
<div class="photo_guide"
style="padding: 15px; margin-top: 20px; background: #f8f9fa; border-radius: 5px; font-size: 13px; color: #555; clear: both;">
<p style="font-weight: bold; margin-bottom: 8px;">※ 사진 첨부 가이드</p>
<ul style="list-style: disc; padding-left: 18px; line-height: 1.6;">
<li>권장 사이즈는 <strong>650 x 650 px</strong> (또는 1:1 비율) 입니다.</li>
<li>상단의 [+] 버튼을 눌러 사진을 첨부해 주세요. 이미지는 영역에 맞춰 빈틈없이 자동으로 예쁘게 채워집니다.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<form id="excelForm" method="POST" target="_blank"></form>
</th:block>
<th:block layout:fragment="layout_popup">
</th:block>
<th:block layout:fragment="layout_script">
<script src="/js/web/ag-grid-community-29.3.5.min.js"></script>
<script src="/js/web/webphotopetit/webPhotoPetitInsert.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
</th:block>
</html>

73
src/main/resources/templates/web/webphotopetit/webPhotoPetitSelectList.html
View File

@@ -1,8 +1,6 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{/web/layout/homeLayout}">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{/web/layout/homeLayout}">
<th:block layout:fragment="layout_css">
<link rel="stylesheet" href="/css/web/webPhotoPetitSelectList.css">
<link rel="stylesheet" href="/css/web/grid.css?v1.1">
@@ -10,28 +8,29 @@
<th:block layout:fragment="layout_top_script">
<script src="/js/web/jquery.twbsPagination.js" type="text/javascript"></script>
<script>
let menuClass = "[[${param.menuClass}]]"==""?"":"[[${param.menuClass}]]";
let menuClass = "[[${param.menuClass}]]" == "" ? "" : "[[${param.menuClass}]]";
let categoryDivCd = "06";
let selectUseYn = "[[${selectUseYn}]]"==""?"N":"[[${selectUseYn}]]";
let insertUseYn = "[[${insertUseYn}]]"==""?"N":"[[${insertUseYn}]]";
let updateUseYn = "[[${updateUseYn}]]"==""?"N":"[[${updateUseYn}]]";
let deleteUseYn = "[[${deleteUseYn}]]"==""?"N":"[[${deleteUseYn}]]";
let downloadUseYn = "[[${downloadUseYn}]]"==""?"N":"[[${downloadUseYn}]]";
let selectUseYn = "[[${selectUseYn}]]" == "" ? "N" : "[[${selectUseYn}]]";
let insertUseYn = "[[${insertUseYn}]]" == "" ? "N" : "[[${insertUseYn}]]";
let updateUseYn = "[[${updateUseYn}]]" == "" ? "N" : "[[${updateUseYn}]]";
let deleteUseYn = "[[${deleteUseYn}]]" == "" ? "N" : "[[${deleteUseYn}]]";
let downloadUseYn = "[[${downloadUseYn}]]" == "" ? "N" : "[[${downloadUseYn}]]";
/* 검색 관련 변수 */
/* 검색 관련 변수 */
let webPhotoPetitSearchKeywordParam0 = "[[${param.webPhotoPetitSearchKeywordParam0}]]";
let webPhotoPetitSearchKeywordParam1 = "[[${param.webPhotoPetitSearchKeywordParam1}]]";
let webPhotoPetitSearchKeywordParam2 = "[[${param.webPhotoPetitSearchKeywordParam2}]]";
let webPhotoPetitSearchKeywordParam3 = "[[${param.webPhotoPetitSearchKeywordParam3}]]";
let webPhotoPetitSort = "[[${param.webPhotoPetitSort}]]";
let webPhotoPetitDir = "[[${param.webPhotoPetitDir}]]";
let webPhotoPetitStart = "[[${param.webPhotoPetitStart}]]"==""?0:"[[${param.webPhotoPetitStart}]]";
let webPhotoPetitLimit = "[[${param.webPhotoPetitLimit}]]"==""?500:"[[${param.webPhotoPetitLimit}]]";
let webPhotoPetitSearchKeywordParam2 = "";
let webPhotoPetitSearchKeywordParam3 = "";
let webPhotoPetitSearchStartDate = "[[${param.webPhotoPetitSearchStartDate}]]";
let webPhotoPetitSearchEndDate = "[[${param.webPhotoPetitSearchEndDate}]]";
let webPhotoPetitSearchDateType = "[[${param.webPhotoPetitSearchDateType}]]"==""?"A":"[[${param.webPhotoPetitSearchDateType}]]";
let webPhotoPetitSearchDateType = "";
let webPhotoPetitSearchStartDate = "";
let webPhotoPetitSearchEndDate = "";
let webPhotoPetitSort = "[[${param.webPhotoPetitSort}]]";
let webPhotoPetitDir = "[[${param.webPhotoPetitDir}]]";
let webPhotoPetitStart = "[[${param.webPhotoPetitStart}]]" == "" ? 0 : "[[${param.webPhotoPetitStart}]]";
let webPhotoPetitLimit = "[[${param.webPhotoPetitLimit}]]" == "" ? 500 : "[[${param.webPhotoPetitLimit}]]";
</script>
</th:block>
<th:block layout:fragment="layout_content">
@@ -40,29 +39,28 @@
<p class="page_title">전후 사진(쁘띠)</p>
<div class="filter_box">
<div class="form_box">
<div class="form_box">
<!-- 이름input -->
<!-- 카테고리 셀렉트박스 -->
<div class="select_box first dropdown">
<button class="label" type="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">카테고리</button>
<input type="hidden" id="webPhotoPetitSearchKeyword0">
<ul class="select_option_list dropdown-menu" id="categoryOptionList">
<li class="option_list_item" id="li_">전체</li>
</ul>
</div>
<!-- 제목 검색 input -->
<div class="search_list">
<div class="search_box">
<img src="/image/web/search_G.svg" alt="search"/>
<input type="text" id="webPhotoPetitSearchKeyword0" required placeholder="카테고리">
<div class="search_list"></div><!-- 검색내역 나오는곳 -->
</div>
<div class="search_box">
<img src="/image/web/search_G.svg" alt="search"/>
<img src="/image/web/search_G.svg" alt="search" />
<input type="text" id="webPhotoPetitSearchKeyword1" required placeholder="제목">
<div class="search_list"></div><!-- 검색내역 나오는곳 -->
</div>
<div class="search_box">
<img src="/image/web/search_G.svg" alt="search"/>
<input type="text" id="webPhotoPetitSearchKeyword2" required placeholder="작성자">
<div class="search_list"></div><!-- 검색내역 나오는곳 -->
</div>
<button id="btnSearchWebPhotoPetit" class="search_btn" data-toggle="modal" data-target=".work_closed_modal" style="transition: all 0.2s ease-in-out 0s;">조회</button>
<button id="btnSearchWebPhotoPetit" class="search_btn" data-toggle="modal"
data-target=".work_closed_modal" style="transition: all 0.2s ease-in-out 0s;">조회</button>
</div>
<div class="right_btn_box">
@@ -93,4 +91,5 @@
<script src="/js/web/ag-grid-community-29.3.5.min.js"></script>
<script src="/js/web/webphotopetit/webPhotoPetitSelectList.js"></script>
</th:block>
</html>

167
src/main/resources/templates/web/webphotopetit/webPhotoPetitUpdate.html
View File

@@ -1,29 +1,22 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{/web/layout/homeLayout}">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{/web/layout/homeLayout}">
<th:block layout:fragment="layout_css">
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/web/webPhotoPetitInsert.css">
<link rel="stylesheet" href="/css/web/ContentsBbsUpd.css">
<link rel="stylesheet" href="/css/web/grid.css?v1.1">
</th:block>
<th:block layout:fragment="layout_top_script">
<script src="/js/web/jquery.twbsPagination.js" type="text/javascript"></script>
<script>
let menuClass = "[[${param.menuClass}]]"==""?"":"[[${param.menuClass}]]";
let menuClass = "[[${param.menuClass}]]" == "" ? "" : "[[${param.menuClass}]]";
let selectUseYn = "[[${selectUseYn}]]"==""?"N":"[[${selectUseYn}]]";
let insertUseYn = "[[${insertUseYn}]]"==""?"N":"[[${insertUseYn}]]";
let updateUseYn = "[[${updateUseYn}]]"==""?"N":"[[${updateUseYn}]]";
let deleteUseYn = "[[${deleteUseYn}]]"==""?"N":"[[${deleteUseYn}]]";
let downloadUseYn = "[[${downloadUseYn}]]"==""?"N":"[[${downloadUseYn}]]";
let muWebPhotoPetitId = "[[${param.muWebPhotoPetitId }]]";
let selectUseYn = "[[${selectUseYn}]]" == "" ? "N" : "[[${selectUseYn}]]";
let updateUseYn = "[[${updateUseYn}]]" == "" ? "N" : "[[${updateUseYn}]]";
let muWebPhotoPetitId = "[[${param.muWebPhotoPetitId }]]";
let categorylist = "[[${param.categorylist}]]";
let categoryno = "[[${param.categoryno}]]";
let originalCategoryNo = "[[${param.categoryno}]]";
const CDN_URL = "[[${@environment.getProperty('url.cdn')}]]";
</script>
</th:block>
@@ -34,65 +27,111 @@
<!-- 테이블 -->
<div class="content_box">
<div class="content clear">
<div class="wp60">
<div class="top">
<label>Before 사진 첨부파일</label>
<label for="before_file" class="file_btn"><img src="/image/web/add.svg" alt="파일찾기"></label>
<div class="update-container">
<!-- Left Panel: Data Forms -->
<div class="left-panel">
<!-- Row 1: Category & Title -->
<div class="form-grid-row">
<div class="form-group" style="flex: 0 0 150px;">
<label>카테고리</label>
<select th:name="categorylist">
<option value="">선택하세요</option>
<option th:each="category : ${categorylist}" th:value="${category.categoryNo}"
th:text="${category.categoryNm}"></option>
</select>
</div>
<div class="form-group">
<label>제목</label>
<input type="text" id="title" placeholder="제목을 입력해주세요." />
</div>
</div>
<div class="btm">
<div class="img_box" id="before_img_box"><!-- Before img 미리보기 --></div>
<input type="file" id="before_file" accept="image/jpeg, image/jpg, image/png" style="display: none;" multiple>
<button id="before_delete_btn">삭제</button>
<!-- Row 2: Content (Summernote usually takes full width, so we wrap it here) -->
<div class="form-grid-row" style="display:block;">
<div class="form-group" style="width: 100%;">
<label style="display:block; margin-bottom:5px;">내용</label>
<input type="text" id="content" placeholder="내용을 입력해주세요." />
</div>
</div>
<div class="top">
<label>After 사진 첨부파일</label>
<label for="after_file" class="file_btn"><img src="/image/web/add.svg" alt="파일찾기"></label>
<!-- Row 3: Hashtag -->
<div class="form-grid-row">
<div class="form-group">
<label>해쉬태그</label>
<input type="text" id="hashtag" placeholder="해쉬태그를 입력해주세요." />
</div>
</div>
<div class="btm">
<div class="img_box" id="after_img_box"><!-- After img 미리보기 --></div>
<input type="file" id="after_file" accept="image/jpeg, image/jpg, image/png" style="display: none;" multiple>
<button id="after_delete_btn">삭제</button>
<!-- Bottom Buttons -->
<div class="bottom-actions">
<button class="registration_btn btnSave"
style="width: 80px; height: 36px; border-radius: 4px; background: #3985EA; color: white; display: inline-block;">수정</button>
<button class="cancel_btn btnCancle"
style="width: 80px; height: 36px; border-radius: 4px; display: inline-block; margin-left: 10px;">취소</button>
</div>
</div>
<div class="wp40">
<div class="consultation-info">
<p id="main_category">
카테고리
</p>
<select th:name="categorylist">
<option value="">선택하세요</option>
<option th:each="category : ${categorylist}" th:value="${category.categoryNo}" th:text="${category.categoryNm}" ></option>
</select>
<p id="main_title">
제목
</p>
<input type="text" id="title" placeholder="제목을 입력해주세요."/>
<p id="main_content">
내용
</p>
<textarea id="content" placeholder="내용을 입력해주세요."></textarea>
<p id="main_hashtag">
해쉬태그
</p>
<input type="text" id="hashtag" placeholder="해쉬태그를 입력해주세요."/>
</div>
</div>
</div>
<div class="button_box">
<button class="cancel_btn btnCancle">취소</button>
<button class="registration_btn btnSave">수정</button>
</div>
<!-- Right Panel: Images -->
<div class="right-panel" style="display: flex; flex-direction: column;">
<div style="display: flex; gap: 20px;">
<!-- Before Image Section -->
<div class="panel-section">
<div class="top-label">
<span>Before 사진 첨부파일</span>
<div>
<label for="before_file" class="file_btn" style="cursor: pointer;"><img
src="/image/web/add.svg" alt="파일찾기"></label>
<button id="before_delete_btn"
style="border:none; background:none; cursor:pointer; margin-left:5px; font-size:12px; color:#999;">삭제</button>
</div>
</div>
<div class="img-preview-wrapper img_box" id="before_img_box"
style="width: 360px; height: 360px; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;">
<!-- Before img 미리보기 -->
</div>
<input type="file" id="before_file" accept="image/jpeg, image/jpg, image/png"
style="display: none;" multiple>
</div>
<!-- After Image Section -->
<div class="panel-section">
<div class="top-label">
<span>After 사진 첨부파일</span>
<div>
<label for="after_file" class="file_btn" style="cursor: pointer;"><img
src="/image/web/add.svg" alt="파일찾기"></label>
<button id="after_delete_btn"
style="border:none; background:none; cursor:pointer; margin-left:5px; font-size:12px; color:#999;">삭제</button>
</div>
</div>
<div class="img-preview-wrapper img_box" id="after_img_box"
style="width: 360px; height: 360px; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;">
<!-- After img 미리보기 -->
</div>
<input type="file" id="after_file" accept="image/jpeg, image/jpg, image/png"
style="display: none;" multiple>
</div>
</div>
<!-- Guide Section (moved outside right-panel to prevent breaking flex wrap) -->
<div class="photo_guide"
style="padding: 15px; margin-top: 20px; background: #f8f9fa; border-radius: 5px; font-size: 13px; color: #555; clear: both;">
<p style="font-weight: bold; margin-bottom: 8px;">※ 사진 첨부 가이드</p>
<ul style="list-style: disc; padding-left: 18px; line-height: 1.6;">
<li>권장 사이즈는 <strong>650 x 650 px</strong> (또는 1:1 비율) 입니다.</li>
<li>상단의 [+] 버튼을 눌러 사진을 첨부해 주세요. 이미지는 영역에 맞춰 빈틈없이 자동으로 예쁘게 채워집니다.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<form id="excelForm" method="POST" target="_blank"></form>
</th:block>
<th:block layout:fragment="layout_popup">
</th:block>
<th:block layout:fragment="layout_script">
<script src="/js/web/ag-grid-community-29.3.5.min.js"></script>
<script src="/js/web/webphotopetit/webPhotoPetitUpdate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
</th:block>
</html>