From 41867d4a57f1a6c7678104d375df3275dc88aa76 Mon Sep 17 00:00:00 2001
From: subsub <subsub8729@kakao.com>
Date: Tue, 12 Nov 2024 10:38:23 +0900
Subject: [PATCH] =?UTF-8?q?24/11/12=20=EC=BA=98=EB=A6=B0=EB=8D=94=20=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sym/mnu/mpm/EgovMenuCreatSelectJtree.jsp  |   8 +-
 .../kofair_case_seed/usr/scripts/common.js    | 675 ++++++++++--------
 .../kofair_case_seed/usr/style/request.css    |   6 +
 .../kofair_case_seed/usr/style/style.css      |   1 +
 4 files changed, 387 insertions(+), 303 deletions(-)

diff --git a/src/main/webapp/WEB-INF/jsp/sym/mnu/mpm/EgovMenuCreatSelectJtree.jsp b/src/main/webapp/WEB-INF/jsp/sym/mnu/mpm/EgovMenuCreatSelectJtree.jsp
index f5a7d050..95493b98 100644
--- a/src/main/webapp/WEB-INF/jsp/sym/mnu/mpm/EgovMenuCreatSelectJtree.jsp
+++ b/src/main/webapp/WEB-INF/jsp/sym/mnu/mpm/EgovMenuCreatSelectJtree.jsp
@@ -840,14 +840,14 @@ function set_bbs(){
 									        </span>
 									        
 							        		<span id="contentNameSpan" style="color: blue"></span>
-											<a style="display: none;cursor:pointer;" id="btnBBS" 
+											<a style="display: none;cursor:pointer;vertical-align:middle;" id="btnBBS" 
 									        	target="_blank" title="새창으로" onclick="searchBBSId(); return false;"
-												style="selector-dummy:expression(this.hideFocus=false);" >
-									        	<img src="<c:url value='/img/post/serch_img.png' />" alt='게시판ID 검색' width="15" height="15" />
+												style="selector-dummy:expression(this.hideFocus=false);" class="btn btn_text btn_36 blue_border">
+									        	<%-- <img src="<c:url value='/img/post/serch_img.png' />" alt='게시판ID 검색' width="15" height="15" /> --%>
 									        	<span style="vertical-align: middle;">(게시판ID 검색)</span>
 									        </a>
 									        <span id="BBSNameSpan" style="color: blue"></span>
-									        <div>
+									        <div style="margin:6px 0 0 0;">
 												<span id="showUrl" style="display: none;" >
 													URL <input type="text" name="url" id="url"  style="width:80%;"/>
 													<input type="hidden" id="url_tmp" name="url_tmp"/>
diff --git a/src/main/webapp/kofair_case_seed/usr/scripts/common.js b/src/main/webapp/kofair_case_seed/usr/scripts/common.js
index c27263a5..2ca0a038 100644
--- a/src/main/webapp/kofair_case_seed/usr/scripts/common.js
+++ b/src/main/webapp/kofair_case_seed/usr/scripts/common.js
@@ -5,6 +5,8 @@ $(function () {
     }, 100)
 
   }
+
+  
 })
 
 // header, footer 공통 영역 불러오기
@@ -18,7 +20,7 @@ window.addEventListener('load', function () {
         if (this.readyState == 4 && this.status == 200) {
           header();
           el.outerHTML = this.responseText;
-          
+
         }
       };
       xhttp.open('GET', includePath, true);
@@ -29,40 +31,42 @@ window.addEventListener('load', function () {
 
 document.addEventListener('DOMContentLoaded', function () {
   var calendarEl = document.getElementById('calendar');
-  var calendar = new FullCalendar.Calendar(calendarEl, {
-    initialView: 'dayGridMonth',
-    titleFormat: function (date) {
-      year = date.date.year;
-      month = date.date.month + 1;
 
-      return year + "년 " + month + "월";
-    },
-    locale: "ko",
-    buttonText: {
-      today: "오늘"
-    },
-    height: "auto",
-    dayCellContent: function (info) {
-      var number = document.createElement('a');
-      number.classList.add('fc-daygrid-day-number');
-      number.innerHTML = info.dayNumberText.replace("일", "");
-      if (info.view.type === 'dayGridMonth') {
+  if ($(".wrap").find("#calendar").length > 0) {
+    var calendar = new FullCalendar.Calendar(calendarEl, {
+      initialView: 'dayGridMonth',
+      titleFormat: function (date) {
+        year = date.date.year;
+        month = date.date.month + 1;
+
+        return year + "년 " + month + "월";
+      },
+      locale: "ko",
+      buttonText: {
+        today: "오늘"
+      },
+      height: "auto",
+      dayCellContent: function (info) {
+        var number = document.createElement('a');
+        number.classList.add('fc-daygrid-day-number');
+        number.innerHTML = info.dayNumberText.replace("일", "");
+        if (info.view.type === 'dayGridMonth') {
+          return {
+            html: number.outerHTML
+          };
+        }
         return {
-          html: number.outerHTML
-        };
-      }
-      return {
-        domNodes: []
-      }
-    },
-    events:[
-      {
+          domNodes: []
+        }
+      },
+      events: [{
         title: '조정절차 관련 일정',
         start: '2024-10-15',
-      }
-    ]
-  });
-  calendar.render();
+      }]
+    });
+    calendar.render();
+  }
+
 });
 
 
@@ -71,7 +75,7 @@ document.addEventListener('DOMContentLoaded', function () {
 function calendar() {
 
   // 캘린더 고유 클래스 추가
-  $(".input_calendar").each(function (idx, itm) {
+  $(".input_calendar").not(".start_date,.end_date").each(function (idx, itm) {
     idx += 1;
     $(itm).addClass("input_calendar" + idx);
   });
@@ -79,11 +83,14 @@ function calendar() {
   $(".start_date").each(function (idx, itm) {
     idx += 1;
     $(itm).addClass("start_date" + idx);
+    $(itm).attr("id", "start_date" + idx);
   });
 
   $(".end_date").each(function (idx, itm) {
     idx += 1;
     $(itm).addClass("end_date" + idx);
+    $(itm).attr("id", "end_date" + idx);
+    $(itm).find(".duet-date__input").attr("id", "end_date" + idx);
   });
 
   setTimeout(function () {
@@ -112,300 +119,345 @@ function calendar() {
   setTimeout(function () {
     for (var i = 1; i < duetdateleng; i++) {
       calendarNum[i] = document.querySelector(".input_calendar" + i);
-      calendarNum[i].dateAdapter = {
-        parse: function parse() {
-          var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ""
-          var createDate = arguments.length > 1 ? arguments[1] : undefined
-          var matches = value.match(DATE_FORMAT)
+      if (calendarNum[i] !== null) {
+        calendarNum[i].dateAdapter = {
+          parse: function parse() {
+            var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ""
+            var createDate = arguments.length > 1 ? arguments[1] : undefined
+            var matches = value.match(DATE_FORMAT)
 
-          if (matches) {
-            return createDate(matches[3], matches[2], matches[1])
-          }
-        },
-        format: function format(date) {
-          if (date.getMonth() < 9) {
-            if (date.getDate() < 10) {
-              return ""
-                .concat(date.getFullYear(), ".")
-                .concat('0', date.getMonth() + 1, ".")
-                .concat('0', date.getDate())
-            } else {
-              return ""
-                .concat(date.getFullYear(), ".")
-                .concat('0', date.getMonth() + 1, ".")
-                .concat(date.getDate())
+            if (matches) {
+              return createDate(matches[3], matches[2], matches[1])
             }
-          } else {
-            if (date.getDate() < 10) {
-              return ""
-                .concat(date.getFullYear(), ".")
-                .concat(date.getMonth() + 1, ".")
-                .concat('0', date.getDate())
+          },
+          format: function format(date) {
+            if (date.getMonth() < 9) {
+              if (date.getDate() < 10) {
+                return ""
+                  .concat(date.getFullYear(), ".")
+                  .concat('0', date.getMonth() + 1, ".")
+                  .concat('0', date.getDate())
+              } else {
+                return ""
+                  .concat(date.getFullYear(), ".")
+                  .concat('0', date.getMonth() + 1, ".")
+                  .concat(date.getDate())
+              }
             } else {
-              return ""
-                .concat(date.getFullYear(), ".")
-                .concat(date.getMonth() + 1, ".")
-                .concat(date.getDate())
+              if (date.getDate() < 10) {
+                return ""
+                  .concat(date.getFullYear(), ".")
+                  .concat(date.getMonth() + 1, ".")
+                  .concat('0', date.getDate())
+              } else {
+                return ""
+                  .concat(date.getFullYear(), ".")
+                  .concat(date.getMonth() + 1, ".")
+                  .concat(date.getDate())
+              }
             }
-          }
-        },
-      }
+          },
+        }
 
-      // 달력 플러그인 실행
-      calendarNum[i].localization = {
-        placeholder: '날짜 입력',
-        selectedDateMessage: 'Selected date is',
-        prevMonthLabel: '이전 달 보기',
-        nextMonthLabel: '다음 달 보기',
-        monthSelectLabel: '달 선택',
-        yearSelectLabel: '년도 선택',
-        closeLabel: '달력 닫기',
-        dayNames: ['일', '월', '화', '수', '목', '금', '토'],
-        monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
-        monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
-        identifier: "input_date",
-        name: "input_date"
-      }
+        // 달력 플러그인 실행
+        calendarNum[i].localization = {
+          placeholder: '날짜 입력',
+          selectedDateMessage: 'Selected date is',
+          prevMonthLabel: '이전 달 보기',
+          nextMonthLabel: '다음 달 보기',
+          monthSelectLabel: '달 선택',
+          yearSelectLabel: '년도 선택',
+          closeLabel: '달력 닫기',
+          dayNames: ['일', '월', '화', '수', '목', '금', '토'],
+          monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
+          monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
+          identifier: "input_date",
+          name: "input_date"
+        }
 
-      // 달력 닫았을 때 input, input[type=hidden]에 value 값 넣어주기
-      calendarNum[i].addEventListener("duetClose", function (e) {
-        startDt = e.target;
-        startDtVal = e.target.value;
-        startSub = startDtVal.replace(/\-/g, '');
-        var inputName = $(this).attr("name");
-      });
-
-      setTimeout(function () {
-        $("duet-date-picker .duet-date__input").each(function (idx, itm) {
-          idx += 1;
-          $(itm).attr("name", "input_date" + idx);
-          $(itm).attr("id", "input_date" + idx);
+        // 달력 닫았을 때 input, input[type=hidden]에 value 값 넣어주기
+        calendarNum[i].addEventListener("duetClose", function (e) {
+          startDt = e.target;
+          startDtVal = e.target.value;
+          startSub = startDtVal.replace(/\-/g, '');
+          var inputName = $(this).attr("name");
         });
-        $("duet-date-picker .duet-date__input").attr('onkeydown', 'this.value=dateSetting(this.value);');
-      }, 100)
+
+        setTimeout(function () {
+          $("duet-date-picker").not(".start_date,.end_date").find(".duet-date__input").each(function (idx, itm) {
+            idx += 1;
+            $(itm).attr("name", "input_date" + idx);
+            $(itm).attr("id", "input_date" + idx);
+          });
+          $("duet-date-picker .duet-date__input").attr('onkeydown', 'this.value=dateSetting(this.value);');
+        }, 100)
+      }
+
+
+
     }
 
     // 시작날짜
-    
+
     for (var i = 1; i < duetdateleng; i++) {
       startDateNum[i] = document.querySelector(".start_date" + i);
-      startDateNum[i].dateAdapter = {
-        parse: function parse() {
-          var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ""
-          var createDate = arguments.length > 1 ? arguments[1] : undefined
-          var matches = value.match(DATE_FORMAT)
+      if (startDateNum[i] !== null) {
+        startDateNum[i].dateAdapter = {
+          parse: function parse() {
+            var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ""
+            var createDate = arguments.length > 1 ? arguments[1] : undefined
+            var matches = value.match(DATE_FORMAT)
 
-          if (matches) {
-            return createDate(matches[3], matches[2], matches[1])
-          }
-        },
-        format: function format(date) {
-          if (date.getMonth() < 9) {
-            if (date.getDate() < 10) {
-              return ""
-                .concat(date.getFullYear(), ".")
-                .concat('0', date.getMonth() + 1, ".")
-                .concat('0', date.getDate())
-            } else {
-              return ""
-                .concat(date.getFullYear(), ".")
-                .concat('0', date.getMonth() + 1, ".")
-                .concat(date.getDate())
+            if (matches) {
+              return createDate(matches[3], matches[2], matches[1])
             }
-          } else {
-            if (date.getDate() < 10) {
-              return ""
-                .concat(date.getFullYear(), ".")
-                .concat(date.getMonth() + 1, ".")
-                .concat('0', date.getDate())
+          },
+          format: function format(date) {
+            if (date.getMonth() < 9) {
+              if (date.getDate() < 10) {
+                return ""
+                  .concat(date.getFullYear(), ".")
+                  .concat('0', date.getMonth() + 1, ".")
+                  .concat('0', date.getDate())
+              } else {
+                return ""
+                  .concat(date.getFullYear(), ".")
+                  .concat('0', date.getMonth() + 1, ".")
+                  .concat(date.getDate())
+              }
             } else {
-              return ""
-                .concat(date.getFullYear(), ".")
-                .concat(date.getMonth() + 1, ".")
-                .concat(date.getDate())
+              if (date.getDate() < 10) {
+                return ""
+                  .concat(date.getFullYear(), ".")
+                  .concat(date.getMonth() + 1, ".")
+                  .concat('0', date.getDate())
+              } else {
+                return ""
+                  .concat(date.getFullYear(), ".")
+                  .concat(date.getMonth() + 1, ".")
+                  .concat(date.getDate())
+              }
             }
-          }
-        },
+          },
+        }
+
+        // 달력 플러그인 실행
+        startDateNum[i].localization = {
+          placeholder: '날짜 입력',
+          selectedDateMessage: 'Selected date is',
+          prevMonthLabel: '이전 달 보기',
+          nextMonthLabel: '다음 달 보기',
+          monthSelectLabel: '달 선택',
+          yearSelectLabel: '년도 선택',
+          closeLabel: '달력 닫기',
+          dayNames: ['일', '월', '화', '수', '목', '금', '토'],
+          monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
+          monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
+          identifier: "start_date",
+          name: "start_date"
+        }
+
+
+        // 달력 닫았을 때 input, input[type=hidden]에 value 값 넣어주기
+        startDateNum[i].addEventListener("duetClose", function (e) {
+          startDt = e.target;
+          startDtVal = e.target.value;
+          startSub = startDtVal.replace(/\-/g, '');
+          var inputName = $(startDt).attr("id");
+          $(".start_date").each(function (idx, itm) {
+            $(this).find(".duet-date__input").attr("id", inputName);
+            $(this).find(".duet-date__input").attr("name", inputName);
+            $(this).find(".duet-date__input").attr("value", startSub);
+            $(this).find(".duet-date__input").next().attr("name", inputName + "_submit");
+            $(this).find(".duet-date__input").next().attr("value", startSub);
+          });
+        });
+
+        //날짜 값 바꼈을 때 시작일, 종료일 찾아 alert 띄우기
+        startDateNum[i].addEventListener("duetChange", function (e) {
+          startDt = e.target;
+          var startDateNum = startDt.id;
+          startDateNum = startDateNum.replace("start_date", "");
+          startDtVal = e.target.value;
+          // var n = i - 1;
+          var endDtVal = $(".end_date" + startDateNum).find(".duet-date__input").val();
+          endDtVal = endDtVal.replace(/[.]/gi, '');
+          startDtVal = startDtVal.replace(/[.]/gi, '');
+          if (startDtVal > endDtVal && endDtVal != "") {
+            e.target.value = "";
+            alert("시작일이 종료일보다 클 수 없습니다.");
+          } else {}
+        });
+
+        setTimeout(function () {
+          $("duet-date-picker.start_date .duet-date__input").each(function (idx, itm) {
+            idx += 1;
+            $(itm).attr("name", "start_date" + idx);
+            $(itm).attr("id", "start_date" + idx);
+          });
+          $("duet-date-picker .duet-date__input").attr('onkeydown', 'this.value=dateSetting(this.value);');
+        }, 100)
+
+        startDateNum[i].addEventListener("duetFocus", function (e) {
+          calendarSetting();
+        });
       }
 
-      // 달력 플러그인 실행
-      startDateNum[i].localization = {
-        placeholder: '날짜 입력',
-        selectedDateMessage: 'Selected date is',
-        prevMonthLabel: '이전 달 보기',
-        nextMonthLabel: '다음 달 보기',
-        monthSelectLabel: '달 선택',
-        yearSelectLabel: '년도 선택',
-        closeLabel: '달력 닫기',
-        dayNames: ['일', '월', '화', '수', '목', '금', '토'],
-        monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
-        monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
-        identifier: "start_date",
-        name: "start_date"
-      }
-
-      // 달력 닫았을 때 input, input[type=hidden]에 value 값 넣어주기
-      startDateNum[i].addEventListener("duetClose", function (e) {
-        startDt = e.target;
-        startDtVal = e.target.value;
-        startSub = startDtVal.replace(/\-/g, '');
-        var inputName = $(this).attr("name");
-        $(".start_date").each(function (idx, itm) {
-          $(this).find(".duet-date__input").attr("id", inputName + idx);
-          $(this).find(".duet-date__input").attr("name", inputName);
-          $(this).find(".duet-date__input").attr("value", startSub);
-          $(this).find(".duet-date__input").next().attr("name", inputName + i + "_submit");
-          $(this).find(".duet-date__input").next().attr("value", startSub);
-        });
-      });
-
-      //날짜 값 바꼈을 때 시작일, 종료일 찾아 alert 띄우기
-      startDateNum[i].addEventListener("duetChange", function (e) {
-        startDt = e.target;
-        startDtVal = e.target.value;
-        var n = i - 1;
-        var endDtVal = $(".end_date" + n).find(".duet-date__input").val();
-        endDtVal = endDtVal.replace(/[.]/gi, '');
-        startDtVal = startDtVal.replace(/[.]/gi, '');
-        if (startDtVal > endDtVal && endDtVal != "") {
-          e.target.value = "";
-          alert("시작일이 종료일보다 클 수 없습니다.");
-        } else {}
-      });
-
-      setTimeout(function () {
-        $("duet-date-picker.start_date .duet-date__input").each(function (idx, itm) {
-          idx += 1;
-          $(itm).attr("name", "start_date" + idx);
-          $(itm).attr("id", "start_date" + idx);
-        });
-        $("duet-date-picker .duet-date__input").attr('onkeydown', 'this.value=dateSetting(this.value);');
-      }, 100)
-
-      startDateNum[i].addEventListener("duetFocus", function (e) {
-        calendarSetting();
-      });
     }
 
     // 종료날짜
 
     for (var i = 1; i < duetdateleng; i++) {
       endDateNum[i] = document.querySelector(".end_date" + i);
-      endDateNum[i].dateAdapter = {
-        parse: function parse() {
-          var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ""
-          var createDate = arguments.length > 1 ? arguments[1] : undefined
-          var matches = value.match(DATE_FORMAT)
+      if (endDateNum[i] !== null) {
+        endDateNum[i].dateAdapter = {
+          parse: function parse() {
+            var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ""
+            var createDate = arguments.length > 1 ? arguments[1] : undefined
+            var matches = value.match(DATE_FORMAT)
 
-          if (matches) {
-            return createDate(matches[3], matches[2], matches[1])
-          }
-        },
-        format: function format(date) {
-          if (date.getMonth() < 9) {
-            if (date.getDate() < 10) {
-              return ""
-                .concat(date.getFullYear(), ".")
-                .concat('0', date.getMonth() + 1, ".")
-                .concat('0', date.getDate())
-            } else {
-              return ""
-                .concat(date.getFullYear(), ".")
-                .concat('0', date.getMonth() + 1, ".")
-                .concat(date.getDate())
+            if (matches) {
+              return createDate(matches[3], matches[2], matches[1])
             }
-          } else {
-            if (date.getDate() < 10) {
-              return ""
-                .concat(date.getFullYear(), ".")
-                .concat(date.getMonth() + 1, ".")
-                .concat('0', date.getDate())
+          },
+          format: function format(date) {
+            if (date.getMonth() < 9) {
+              if (date.getDate() < 10) {
+                return ""
+                  .concat(date.getFullYear(), ".")
+                  .concat('0', date.getMonth() + 1, ".")
+                  .concat('0', date.getDate())
+              } else {
+                return ""
+                  .concat(date.getFullYear(), ".")
+                  .concat('0', date.getMonth() + 1, ".")
+                  .concat(date.getDate())
+              }
             } else {
-              return ""
-                .concat(date.getFullYear(), ".")
-                .concat(date.getMonth() + 1, ".")
-                .concat(date.getDate())
+              if (date.getDate() < 10) {
+                return ""
+                  .concat(date.getFullYear(), ".")
+                  .concat(date.getMonth() + 1, ".")
+                  .concat('0', date.getDate())
+              } else {
+                return ""
+                  .concat(date.getFullYear(), ".")
+                  .concat(date.getMonth() + 1, ".")
+                  .concat(date.getDate())
+              }
             }
-          }
-        },
+          },
+        }
+
+        // 달력 플러그인 실행
+        endDateNum[i].localization = {
+          placeholder: '날짜 입력',
+          selectedDateMessage: 'Selected date is',
+          prevMonthLabel: '이전 달 보기',
+          nextMonthLabel: '다음 달 보기',
+          monthSelectLabel: '달 선택',
+          yearSelectLabel: '년도 선택',
+          closeLabel: '달력 닫기',
+          dayNames: ['일', '월', '화', '수', '목', '금', '토'],
+          monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
+          monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
+          identifier: "end_date",
+          name: "end_date"
+        }
+
+        // 달력 닫았을 때 input, input[type=hidden]에 value 값 넣어주기
+        endDateNum[i].addEventListener("duetClose", function (e) {
+          endDt = e.target;
+          endDtVal = e.target.value;
+          endSub = endDtVal.replace(/\-/g, '');
+          var inputName = $(this).attr("name");
+          console.log(inputName)
+          $(".end_date").each(function (idx, itm) {
+            $(itm).find(".duet-date__input").attr("id", inputName);
+            $(itm).find(".duet-date__input").attr("name", inputName);
+            $(itm).find(".duet-date__input").attr("value", endSub);
+            $(itm).find(".duet-date__input").next().attr("name", inputName + "_submit");
+            $(itm).find(".duet-date__input").next().attr("value", endSub);
+          });
+        });
+
+        //날짜 값 바꼈을 때 시작일, 종료일 찾아 alert 띄우기
+        endDateNum[i].addEventListener("duetChange", function (e) {
+          endDt = e.target;
+          endDtVal = e.target.value;
+          var endDateNum = endDt.id;
+          endDateNum = endDateNum.replace("end_date", "");
+          // var n = i - 1
+          var startDtVal = $(".start_date" + endDateNum).find(".duet-date__input").val();
+          startDtVal = startDtVal.replace(/[.]/gi, '');
+          endDtVal = endDtVal.replace(/[.]/gi, '');
+          //console.log(startDtVal,endDtVal)
+          //console.log("2",startDtVal,endDtVal);
+          if (endDtVal < startDtVal) {
+            e.target.value = "";
+            alert("종료일이 시작일보다 작을 수 없습니다.");
+          } else {}
+        });
+
+        setTimeout(function () {
+          $("duet-date-picker.end_date").each(function (idx, itm) {
+            idx += 1;
+            $(itm).attr("name", "end_date" + idx);
+            $(itm).attr("id", "end_date" + idx);
+          });
+          $("duet-date-picker .duet-date__input").attr('onkeydown', 'this.value=dateSetting(this.value);');
+        }, 100)
+
+        endDateNum[i].addEventListener("duetFocus", function (e) {
+          calendarSetting();
+        });
       }
 
-      // 달력 플러그인 실행
-      endDateNum[i].localization = {
-        placeholder: '날짜 입력',
-        selectedDateMessage: 'Selected date is',
-        prevMonthLabel: '이전 달 보기',
-        nextMonthLabel: '다음 달 보기',
-        monthSelectLabel: '달 선택',
-        yearSelectLabel: '년도 선택',
-        closeLabel: '달력 닫기',
-        dayNames: ['일', '월', '화', '수', '목', '금', '토'],
-        monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
-        monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
-        identifier: "end_date",
-        name: "end_date"
-      }
-
-      // 달력 닫았을 때 input, input[type=hidden]에 value 값 넣어주기
-      endDateNum[i].addEventListener("duetClose", function (e) {
-        endDt = e.target;
-        endDtVal = e.target.value;
-        endSub = endDtVal.replace(/\-/g, '');
-        var inputName = $(this).attr("name");
-        $(".end_date").each(function (idx, itm) {
-          $(this).find(".duet-date__input").attr("id", inputName + idx);
-          $(this).find(".duet-date__input").attr("name", inputName);
-          $(this).find(".duet-date__input").attr("value", endSub);
-          $(this).find(".duet-date__input").next().attr("name", inputName + i + "_submit");
-          $(this).find(".duet-date__input").next().attr("value", endSub);
-        });
-      });
-
-      //날짜 값 바꼈을 때 시작일, 종료일 찾아 alert 띄우기
-      endDateNum[i].addEventListener("duetChange", function (e) {
-        endDt = e.target;
-        endDtVal = e.target.value;
-        var n = i - 1
-        var startDtVal = $(".start_date" + n).find(".duet-date__input").val();
-        startDtVal = startDtVal.replace(/[.]/gi, '');
-        endDtVal = endDtVal.replace(/[.]/gi, '');
-        //console.log("2",startDtVal,endDtVal);
-        if (endDtVal < startDtVal) {
-          e.target.value = "";
-          alert("종료일이 시작일보다 작을 수 없습니다.");
-        } else {}
-      });
-
-      setTimeout(function () {
-        $("duet-date-picker.end_date").each(function (idx, itm) {
-          idx += 1;
-          $(itm).attr("name", "end_date" + idx);
-          $(itm).attr("id", "end_date" + idx);
-        });
-        $("duet-date-picker .duet-date__input").attr('onkeydown', 'this.value=dateSetting(this.value);');
-      }, 100)
-
-      endDateNum[i].addEventListener("duetFocus", function (e) {
-        calendarSetting();
-      });
     }
 
+    //input에 value 값 추가
+    $(".duet-date__input").focusout(function () {
+      var thisVal = $(this).val();
+      $(this).closest(".hydrated").attr("value", thisVal);
+      $(this).attr("value", thisVal);
+      $(this).next('input[type=hidden]').attr("value", thisVal);
+      /*var startVal = $('.startDate .duet-date__input').val();
+      var endVal = $('.endDate .duet-date__input').val();*/
+
+      var startName, endName;
+
+
+      if ($(this).closest(".hydrated").is(".start_date")) {
+        var startNum = $(this).closest(".start_date").attr("id");
+        startNum = startNum.replace("start_date", "");
+        var startVal = $('#start_date' + startNum).find('.duet-date__input').val();
+        var endVal = $('#end_date' + startNum).find('.duet-date__input').val();
+        startName = $('#start_date' + startNum);
+        endName = $('#end_date' + startNum);
+        calendarMsgKey(this, startVal, endVal, startName, endName);
+      } else if ($(this).closest(".hydrated").is(".end_date")) {
+        var endNum = $(this).closest(".end_date").attr("id");
+        endNum = endNum.replace("end_date", "");
+        var startVal = $('#start_date' + endNum).find('.duet-date__input').val();
+        var endVal = $('#end_date' + endNum).find('.duet-date__input').val();
+        startName = $('#start_date' + endNum).attr("id");
+        endName = $('#end_date' + endNum).attr("id");
+        calendarMsgKey(this, startVal, endVal, startName, endName);
+      }
+    });
+
 
 
   }, 10)
 
   function calendarMsgKey(ipt, startVal, endVal, startName, endName) {
-    startVal = startVal.replace(/[.]/gi, '');
-    endVal = endVal.replace(/[.]/gi, '');
-    //console.log(startVal+"start", endVal+"end");
-    if ($(ipt).is("[name=start_date]") > 0) {
-      if (startVal > endVal && $(ipt).is("[name=start_date]") == true && endVal != "") {
-        //console.log("1",startVal,endVal);
+    startVal = startVal.replace(/[-]/gi, '');
+    endVal = endVal.replace(/[-]/gi, '');
+    if ($(ipt).closest(".input_calendar").is(".start_date") > 0) {
+      if (startVal > endVal && $(ipt).closest(".input_calendar").is(".start_date") == true && endVal != "") {
         alert("시작일이 종료일보다 클 수 없습니다.");
         ipt.value = "";
-      } else if (startVal > endVal && $(ipt).is("[name=end_date]") == true && startVal != "") {
-        //console.log("2",startVal,endVal);
-        //console.log(ipt);
+      } else if (startVal > endVal && $(ipt).is(".end_date") == true && startVal != "") {
         if ($("duet-date-picker.end_date").val() == "") {
 
         } else {
@@ -414,13 +466,10 @@ function calendar() {
         }
       } else {}
     } else {
-      if (startVal > endVal && $(ipt).is("[name=" + startName + "]") == true && endVal != "") {
-        //console.log("1",startVal,endVal);
+      if (startVal > endVal && $(ipt).is("#" + startName) == true && endVal != "") {
         alert("시작일이 종료일보다 클 수 없습니다.");
         ipt.value = "";
-      } else if (startVal > endVal && $(ipt).is("[name=" + endName + "]") == true && startVal != "") {
-        //console.log("2",startVal,endVal);
-        //console.log(ipt);
+      } else if (startVal > endVal && $(ipt).is("#" + endName) == true && startVal != "") {
         if ($("duet-date-picker.end_date").val() == "") {
 
         } else {
@@ -432,35 +481,63 @@ function calendar() {
 
   }
 
+  function dateSetting(objValue) {
+    var v = objValue.replace("--", "-");
+    //console.log(event.keyCode); // 한글쪽 - 189, 숫자키 쪽 109
+    if (v.match(/^\d{4}$/) !== null) {
+      if (event.keyCode == "8") {
+        // 백스페이스 키를 누를 때 '.' 안생기게
+      } else {
+        v = v + '-';
+      }
+    } else if (v.match(/^\d{4}\-\d{2}$/) !== null) {
+      if (event.keyCode == "8") {
+        // 백스페이스 키를 누를 때 '.' 안생기게
+      } else {
+        v = v + '-';
+      }
+    }
+
+    // '-' 막기
+    if (event.keyCode == "190" || event.keyCode == "110") {
+      event.preventDefault();
+      return v;
+    } else {}
+
+
+    return v;
+  }
+
 
 }
 
+
 function calendarSetting() {
   $('.calendar_wrap').each(function () {
     $(this).find('.duet-date__input').attr('onkeydown', 'this.value=dateSetting(this.value);');
-    $(this).find('.duet-date__input').attr('onblur', 'this.value=dateSettingHere(this.value);');
+    $(this).find('.duet-date__input').attr('onblur', 'this.value=dateSetting(this.value);');
   });
 }
 
 function dateSetting(objValue) {
-  var v = objValue.replace("..", ".");
-  console.log(event.keyCode); // 한글쪽 - 189, 숫자키 쪽 109
+  var v = objValue.replace("--", "-");
+  //console.log(event.keyCode); // 한글쪽 - 189, 숫자키 쪽 109
   if (v.match(/^\d{4}$/) !== null) {
     if (event.keyCode == "8") {
       // 백스페이스 키를 누를 때 '.' 안생기게
     } else {
-      v = v + '.';
+      v = v + '-';
     }
-  } else if (v.match(/^\d{4}\.\d{2}$/) !== null) {
+  } else if (v.match(/^\d{4}\-\d{2}$/) !== null) {
     if (event.keyCode == "8") {
       // 백스페이스 키를 누를 때 '.' 안생기게
     } else {
-      v = v + '.';
+      v = v + '-';
     }
   }
 
   // '-' 막기
-  if (event.keyCode == "189" || event.keyCode == "109") {
+  if (event.keyCode == "190" || event.keyCode == "110") {
     event.preventDefault();
     return v;
   } else {}
diff --git a/src/main/webapp/kofair_case_seed/usr/style/request.css b/src/main/webapp/kofair_case_seed/usr/style/request.css
index 1816031b..c1d62bdc 100644
--- a/src/main/webapp/kofair_case_seed/usr/style/request.css
+++ b/src/main/webapp/kofair_case_seed/usr/style/request.css
@@ -161,6 +161,9 @@
   .inquiry_content .input_box.column .input_text{width:calc(100% - 300px);border:0;}
 
   /* 분쟁조정 신청 */
+  .apl_info_content.apl02 .gray_border.box .title{font-size:3.8rem;}
+  .apl_info_content.apl02 .sub_dl{margin:60px 0;font-size:3.4rem;gap:12px;}
+  .apl_info_content.apl02 .checkbox_wrap .checkbox{width:36px;height:36px;margin:8px 22px 0 0;}
   .apl03_info_content .step5{flex-wrap:wrap;gap:40px;}
   .apl03_info_content .step5 li{width:calc((100% - 120px)/3);padding:26px 0;}
   .apl03_info_content .step5 li::before{height:4px;}
@@ -297,6 +300,9 @@
   .inquiry_content .input_box.column .input_text{width:calc(100% - 150px);border:0;}
 
   /* 분쟁조정 신청 */
+  .apl_info_content.apl02 .gray_border.box .title{font-size:1.9rem;}
+  .apl_info_content.apl02 .sub_dl{margin:30px 0;font-size:1.7rem;gap:6px;}
+  .apl_info_content.apl02 .checkbox_wrap .checkbox{width:18px;height:18px;margin:4px 11px 0 0;}
   .apl03_info_content .process_step_wrap.step5 .step,.apl03_info_content .process_step_wrap.step5 .active .step{height:35px;background-size:auto 100%;}
   .apl03_info_content .process_step_wrap.step5 li::before{height:1px;}
   .apl03_info_content .btn.btn_text.btn_35.gray_fill{width:calc(100% - 100px);}
diff --git a/src/main/webapp/kofair_case_seed/usr/style/style.css b/src/main/webapp/kofair_case_seed/usr/style/style.css
index fd203c87..8c9e286a 100644
--- a/src/main/webapp/kofair_case_seed/usr/style/style.css
+++ b/src/main/webapp/kofair_case_seed/usr/style/style.css
@@ -277,6 +277,7 @@
    .lnb{display:none;}
    .sub_visual h2{font-size:4.2rem;}
    .sub_content{width:100%;margin:0;}
+   .sub_content, .wrap>.sub>.inner>form[method="post"]:not(#listForm,#searchForm){width:100%;}
    .page_location{width:calc(100% + 60px);height:80px;border-bottom:2px solid #2e40ba;margin:0 0 0 -30px;padding:0 0 0 30px;gap:50px;flex-wrap:unset;white-space:nowrap;}
    .page_location li{font-size:3.2rem;padding:0;}
    .page_location li:first-child{padding:0;}