전후사진 디자인 수정

src/main/resources/mappers/WebPhotoDietSqlMap.xml

@@ -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

src/main/resources/mappers/WebPhotoPetitSqlMap.xml

@@ -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

src/main/resources/static/js/web/webphotopetit/webPhotoPetitInsert.js

@@ -1,7 +1,7 @@
 /****************************************************************************
  * 전후사진 등록
  ****************************************************************************/
-function fn_insertWebPhoto(){
+function fn_insertWebPhotoPetit() {
     if ("Y" != insertUseYn) {
         modalEvent.warning("", "등록 권한이 없습니다.");
         return false;
@@ -82,72 +82,7 @@ function fn_insertWebPhoto(){
     });
 }
 
-/****************************************************************************
- * 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('');
-}
 
 
 /****************************************************************************
@@ -163,8 +98,10 @@ function fn_beforeFilePreview(){
             // 이미지 요소를 생성하고 미리보기 추가
             const img = document.createElement('img');
             img.src = e.target.result;
-           img.style.width = '600px'; // 원하는 크기로 조정
-           img.style.height = '350px';
+            img.style.width = '100%';
+            img.style.height = '100%';
+            img.style.objectFit = 'cover';
+            img.style.display = 'block';
             $('#before_img_box').append(img);
         };
 
@@ -192,8 +129,10 @@ function fn_afterFilePreview(){
             // 이미지 요소를 생성하고 미리보기 추가
             const img = document.createElement('img');
             img.src = e.target.result;
-           img.style.width = '600px'; // 원하는 크기로 조정
-           img.style.height = '350px';
+            img.style.width = '100%';
+            img.style.height = '100%';
+            img.style.objectFit = 'cover';
+            img.style.display = 'block';
             $('#after_img_box').append(img);
         };
 
@@ -214,8 +153,8 @@ function fn_removeAfterPreview(){
  ****************************************************************************/
 function fn_selectListWebPhotoPetitIntro() {
     if ("Y" == selectUseYn) {
-        let pagingParam = "?menuClass="+menuClass;
-        fn_leftFormAction("/webphotopetit/selectListWebPhotoPetitIntro.do"+pagingParam);
+        let paramUrl = "?menuClass=" + menuClass;
+        fn_leftFormAction("/webphotopetit/selectListWebPhotoPetitIntro.do" + paramUrl);
     } else {
         modalEvent.warning("", "조회 권한이 없습니다.");
         return false;
@@ -228,15 +167,6 @@ function fn_selectListWebPhotoPetitIntro(){
 function fn_pageInit() {
     // 날짜 datepicker
     fn_searchDatePicker("#eventStartDate", "#eventEndDate");
-
-    $('#summernote').summernote({
-        height: 540,
-        callbacks: {	//여기 부분이 이미지를 첨부하는 부분
-            onImageUpload : function(files) {
-                uploadSummernoteImageFileNoticeInsert(files, this);
-            }
-        },
-    });
 }
 
 /****************************************************************************
@@ -249,14 +179,8 @@ function fn_pagePhoto(){
     });
 
     $('.btnSave').on("click", function () {
-        fn_insertWebPhoto();
+        fn_insertWebPhotoPetit();
     });
-    $('#delete_btn').on("click", function(){
-        fn_removePreview();
-    });
-    $('#file').on('change', function(e) {
-        fn_filePreview();
-    })
     $('#before_delete_btn').on("click", function () {
         fn_removeBeforePreview();
     });
@@ -271,35 +195,6 @@ function fn_pagePhoto(){
     });
 }
 
-/****************************************************************************
- * 시술 목록 팝업
- ****************************************************************************/
-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 () {
     // 페이지 init

src/main/resources/static/js/web/webphotopetit/webPhotoPetitSelectList.js

@@ -8,187 +8,6 @@ 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");
-}
 
 
 /****************************************************************************
@@ -221,7 +40,6 @@ function fn_selectListWebPhotoPetitJson(){
             if ('0' == data.msgCode) {
                 // 페이징 처리
                 webPhotoPetitTotalCount = data.totalCount;
-                //$("#txt_noticeTotalCount").text(noticeTotalCount);
 
                 webPhotoPetitTotalPages = Math.ceil(webPhotoPetitTotalCount / webPhotoPetitLimit);
 
@@ -244,7 +62,6 @@ function fn_selectListWebPhotoPetitJson(){
                             fn_webPhotoPetitPagination(page);
                         }
                     }).on('page', function (photopetit, page) {
-                        //console.info(page + ' (from photopetit listening)');
                     });
                 }
                 else {
@@ -281,7 +98,7 @@ function fn_webPhotoPetitSearch(param){
 
     webPhotoPetitSearchKeywordParam0 = $("#webPhotoPetitSearchKeyword0").val();
     webPhotoPetitSearchKeywordParam1 = $("#webPhotoPetitSearchKeyword1").val();
-	webPhotoPetitSearchKeywordParam2 = $("#webPhotoPetitSearchKeyword2").val();
+    webPhotoPetitSearchKeywordParam2 = ""; // 작성자 검색 제거
     webPhotoPetitSearchKeywordParam3 = $("#webPhotoPetitSearchKeywordParam3").val();
 
     webPhotoPetitSearchDateType = $("#webPhotoPetitSearchDateType").val();
@@ -296,9 +113,6 @@ function fn_webPhotoPetitSearch(param){
  * 초기화하기
  ****************************************************************************/
 function fn_webPhotoPetitReset() {
-    fn_webPhotoPetitSetDate('D');
-    $("#webPhotoPetitSearchDateType option:eq(0)").prop("selected", true);
-
     $("#webPhotoPetitSearchKeyword0").val("");
     $("#webPhotoPetitSearchKeyword1").val("");
     $("#webPhotoPetitSearchKeyword2").val("");
@@ -420,42 +234,33 @@ function fn_alignPhotoPetit(param, param2){
     if ("A" == param) {
         align = "오늘";
 
-        fn_webPhotoPetitSetDate('A');
     }
     else if ("B" == param) {
         align = "최근30일";
-
-        fn_webPhotoPetitSetDate('D');
     }
     else if ("C" == param) {
         align = "최근90일";
 
-        fn_webPhotoPetitSetDate('E');
     }
     else if ("D" == param) {
         align = "이번주";
 
-        fn_webPhotoPetitSetDate('C');
     }
     else if ("E" == param) {
         align = "이번달";
 
-        fn_webPhotoPetitSetDate('F');
     }
     else if ("F" == param) {
         align = "올해";
 
-        fn_webPhotoPetitSetDate('G');
     }
     else if ("G" == param) {
         align = "지난주";
 
-        fn_webPhotoPetitSetDate('H');
     }
     else if ("H" == param) {
         align = "지난달";
 
-        fn_webPhotoPetitSetDate('I');
     }
     else {
         align = "";
@@ -602,12 +407,14 @@ new agGrid.Grid(webPhotoPetitGridDiv, webPhotoPetitGridOptions);
  * 페이지 init
  ****************************************************************************/
 function fn_pageInit() {
+    // 카테고리 목록 동적 로드
+    fn_loadCategoryList();
+
     // 날짜 datepicker
     fn_searchDatePicker("#divWebPhotoPetitSearchStartDate", "#divWebPhotoPetitSearchEndDate");
 
     if (!webPhotoPetitSearchStartDate && !webPhotoPetitSearchEndDate) {
         // 검색 오늘날짜 셋팅
-        fn_webPhotoPetitSetDate('D');
     } else {
         $("#webPhotoPetitSearchStartDate").val(webPhotoPetitSearchStartDate).trigger("change");
         $("#webPhotoPetitSearchEndDate").val(webPhotoPetitSearchEndDate).trigger("change");
@@ -622,24 +429,49 @@ function fn_pageInit(){
     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() {
+
     // 검색 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) {
+    $(document).on('keypress', '#webPhotoPetitSearchKeyword3', function (e) {
         fn_webPhotoPetitEnter(e);
     });
 
@@ -658,17 +490,14 @@ 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();
 
         $(this).parent().siblings("button").text(selectName);
-        $(this).parent().siblings("input").val(selectId);
-
-        fn_alignPhotoPetit(selectId);
+        $("#webPhotoPetitSearchKeyword0").val(selectName === "전체" ? "" : selectName);
     });
 }
 

src/main/resources/static/js/web/webphotopetit/webPhotoPetitUpdate.js

@@ -1,6 +1,3 @@
-// Before/After 이미지 파일 변경 상태
-let isBeforeFileModified = false;
-let isAfterFileModified = false;
 
 /****************************************************************************
  * 전후사진 상세 조회
@@ -33,10 +30,10 @@ function fn_selectWebPhotoPetit(){
                     $("#hashtag").val(photoData.hashtag);
                     // Before/After 이미지 미리보기
                     if (photoData.beforefile) {
-                        $('#before_img_box').html('<img src="'+CDN_URL+photoData.beforefile+'" style="width:600px;height:350px;">');
+                        $('#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;">');
+                        $('#after_img_box').html('<img src="' + CDN_URL + photoData.afterfile + '" style="width: 100%; height: 100%; object-fit: cover; display: block;">');
                     }
                 } else {
                     modalEvent.warning("수정", "조회된 전후사진 데이터가 없습니다.");
@@ -140,8 +137,10 @@ function fn_beforeFilePreview(){
         reader.onload = function (e) {
             const img = document.createElement('img');
             img.src = e.target.result;
-           img.style.width = '600px';
-           img.style.height = '350px';
+            img.style.width = '100%';
+            img.style.height = '100%';
+            img.style.objectFit = 'cover';
+            img.style.display = 'block';
             $('#before_img_box').append(img);
         };
         reader.readAsDataURL(file);
@@ -159,8 +158,10 @@ function fn_afterFilePreview(){
         reader.onload = function (e) {
             const img = document.createElement('img');
             img.src = e.target.result;
-           img.style.width = '600px';
-           img.style.height = '350px';
+            img.style.width = '100%';
+            img.style.height = '100%';
+            img.style.objectFit = 'cover';
+            img.style.display = 'block';
             $('#after_img_box').append(img);
         };
         reader.readAsDataURL(file);

src/main/resources/templates/web/webphotopetit/webPhotoPetitInsert.html

@@ -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 selectUseYn = "[[${selectUseYn}]]" == "" ? "N" : "[[${selectUseYn}]]";
         let insertUseYn = "[[${insertUseYn}]]" == "" ? "N" : "[[${insertUseYn}]]";
-        let updateUseYn   = "[[${updateUseYn}]]"==""?"N":"[[${updateUseYn}]]";
-        let deleteUseYn   = "[[${deleteUseYn}]]"==""?"N":"[[${deleteUseYn}]]";
-        let downloadUseYn = "[[${downloadUseYn}]]"==""?"N":"[[${downloadUseYn}]]";
     </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>
-                    <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>
-                    </div>
-                    <div class="top">
-                        <label>After 사진 첨부파일</label>
-                        <label for="after_file" class="file_btn"><img src="/image/web/add.svg" alt="파일찾기"></label>
-                    </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>
-				</div>
-				<div class="wp40">
-					<div class="consultation-info">
-						<p id="main_category">
-							카테고리
-						</p>
+            <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>
+                                <option th:each="category : ${categorylist}" th:value="${category.categoryNo}"
+                                    th:text="${category.categoryNm}"></option>
                             </select>
-						<p id="main_title">
-							제목
-						</p>
+                        </div>
+                        <div class="form-group">
+                            <label>제목</label>
                             <input type="text" id="title" placeholder="제목을 입력해주세요." />
-						<p id="main_content">
-							내용
-						</p>						
-						<textarea id="content" placeholder="내용을 입력해주세요."></textarea>		                
-						<p id="main_hashtag">
-							해쉬태그
-						</p>
+                        </div>
+                    </div>
+
+                    <!-- 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>
+
+                    <!-- Row 3: Hashtag -->
+                    <div class="form-grid-row">
+                        <div class="form-group">
+                            <label>해쉬태그</label>
                             <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 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>
+
+                <!-- 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>

src/main/resources/templates/web/webphotopetit/webPhotoPetitSelectList.html

@@ -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">
@@ -11,6 +9,7 @@
     <script src="/js/web/jquery.twbsPagination.js" type="text/javascript"></script>
     <script>
         let menuClass = "[[${param.menuClass}]]" == "" ? "" : "[[${param.menuClass}]]";
+        let categoryDivCd = "06";
 
         let selectUseYn = "[[${selectUseYn}]]" == "" ? "N" : "[[${selectUseYn}]]";
         let insertUseYn = "[[${insertUseYn}]]" == "" ? "N" : "[[${insertUseYn}]]";
@@ -21,17 +20,17 @@
         /* 검색 관련 변수 */
         let webPhotoPetitSearchKeywordParam0 = "[[${param.webPhotoPetitSearchKeywordParam0}]]";
         let webPhotoPetitSearchKeywordParam1 = "[[${param.webPhotoPetitSearchKeywordParam1}]]";
-        let webPhotoPetitSearchKeywordParam2 = "[[${param.webPhotoPetitSearchKeywordParam2}]]";
-        let webPhotoPetitSearchKeywordParam3 = "[[${param.webPhotoPetitSearchKeywordParam3}]]";
+        let webPhotoPetitSearchKeywordParam2 = "";
+        let webPhotoPetitSearchKeywordParam3 = "";
+
+        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}]]";
-
-        let webPhotoPetitSearchStartDate    = "[[${param.webPhotoPetitSearchStartDate}]]";
-        let webPhotoPetitSearchEndDate      = "[[${param.webPhotoPetitSearchEndDate}]]";
-        let webPhotoPetitSearchDateType     = "[[${param.webPhotoPetitSearchDateType}]]"==""?"A":"[[${param.webPhotoPetitSearchDateType}]]";
     </script>
 </th:block>
 <th:block layout:fragment="layout_content">
@@ -42,27 +41,26 @@
         <div class="filter_box">
             <div class="form_box">
 
-                <!-- 이름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 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="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>

src/main/resources/templates/web/webphotopetit/webPhotoPetitUpdate.html

@@ -1,23 +1,16 @@
 <!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 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 categorylist = "[[${param.categorylist}]]";
@@ -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>
-                    <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>
-                    </div>
-                    <div class="top">
-                        <label>After 사진 첨부파일</label>
-                        <label for="after_file" class="file_btn"><img src="/image/web/add.svg" alt="파일찾기"></label>
-                    </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>
-				</div>
-				<div class="wp40">
-					<div class="consultation-info">
-						<p id="main_category">
-							카테고리
-						</p>
+            <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>
+                                <option th:each="category : ${categorylist}" th:value="${category.categoryNo}"
+                                    th:text="${category.categoryNm}"></option>
                             </select>
-						<p id="main_title">
-							제목
-						</p>
+                        </div>
+                        <div class="form-group">
+                            <label>제목</label>
                             <input type="text" id="title" placeholder="제목을 입력해주세요." />
-						<p id="main_content">
-							내용
-						</p>						
-						<textarea id="content" placeholder="내용을 입력해주세요."></textarea>		                
-						<p id="main_hashtag">
-							해쉬태그
-						</p>
+                        </div>
+                    </div>
+
+                    <!-- 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>
+
+                    <!-- Row 3: Hashtag -->
+                    <div class="form-grid-row">
+                        <div class="form-group">
+                            <label>해쉬태그</label>
                             <input type="text" id="hashtag" placeholder="해쉬태그를 입력해주세요." />
                         </div>
                     </div>
 
+                    <!-- 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 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>