공지사항 팝업 목록 가져오기 ajax 방식으로 변경

src/main/java/com/style24/scm/biz/web/TssBoardController.java

@@ -6,6 +6,7 @@ import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.ResponseBody;
 import org.springframework.web.servlet.ModelAndView;
 
 import com.style24.persistence.domain.Notice;
@@ -39,14 +40,26 @@ public class TssBoardController extends TssBaseController {
 	public ModelAndView noticePopupForm() {
 		ModelAndView mav = new ModelAndView();
 
-		// 공지사항 목록
-		Collection<Notice> noticeList = noticeService.getNoticePopupList();
-		mav.addObject("noticeCnt", noticeList.size());
-		mav.addObject("noticeList", noticeList);
+//		// 공지사항 목록
+//		Collection<Notice> noticeList = noticeService.getNoticePopupList();
+//		mav.addObject("noticeCnt", noticeList.size());
+//		mav.addObject("noticeList", noticeList);
 
 		mav.setViewName("board/NoticePopupForm");
 
 		return mav;
 	}
 
+	/**
+	 * 공지사항 팝업 목록
+	 * @return
+	 * @author gagamel
+	 * @since 2020. 10. 30
+	 */
+	@GetMapping("/notice/popup/list")
+	@ResponseBody
+	public Collection<Notice> getNoticePopupList() {
+		return noticeService.getNoticePopupList();
+	}
+
 }

src/main/webapp/WEB-INF/views/board/NoticePopupForm.html

@@ -25,20 +25,20 @@
 		<!-- //이동 버튼 -->
 		
 		<div class="swiper-container">
-			<div class="swiper-wrapper">
-				<div class="swiper-slide" th:if="${noticeList}" th:each="oneData, status : ${noticeList}">
-					<div class="title" th:text="${oneData.noticeTitle}">연휴 배송 마감안내</div>
-					<div class="content" th:utext="${#strings.replace(#strings.replace(oneData.noticeContent,'&amplt;','<'),'&ampgt;','>')}">
-						배송마감일 : 12월 21일(금) 오후 5시<br/>
-						12월 21일(금) 오후 5시까지 결제완료(입금/결제완료) 주문 건에 한해 명절 연휴 전 발송이 가능하며, 그 이후 주문 건은 12월 26일(수)부터 순차적으로 발송됩니다.<br/><br/>
-						<img src="/image/@notice_popup01.jpg"/>
-					</div>
-					<ul class="download" th:if="${oneData.fileList}">
-						<li th:each="oneData2, status2 : ${oneData.fileList}">
-							<i class="fa fa-download" aria-hidden="true"></i><a href="#" th:href="@{@environment.getProperty('upload.default.view') + '/notice' + oneData2.sysFileNm}" th:text="${oneData2.orgFIleNm}"></a>
-						</li>
-					</ul>
-				</div>
+			<div class="swiper-wrapper" id="noticePopupList">
+<!-- 				<div class="swiper-slide" th:if="${noticeList}" th:each="oneData, status : ${noticeList}"> -->
+<!-- 					<div class="title" th:text="${oneData.noticeTitle}">연휴 배송 마감안내</div> -->
+<!-- 					<div class="content" th:utext="${#strings.replace(#strings.replace(oneData.noticeContent,'&amplt;','<'),'&ampgt;','>')}"> -->
+<!-- 						배송마감일 : 12월 21일(금) 오후 5시<br/> -->
+<!-- 						12월 21일(금) 오후 5시까지 결제완료(입금/결제완료) 주문 건에 한해 명절 연휴 전 발송이 가능하며, 그 이후 주문 건은 12월 26일(수)부터 순차적으로 발송됩니다.<br/><br/> -->
+<!-- 						<img src="/image/@notice_popup01.jpg"/> -->
+<!-- 					</div> -->
+<!-- 					<ul class="download" th:if="${oneData.fileList}"> -->
+<!-- 						<li th:each="oneData2, status2 : ${oneData.fileList}"> -->
+<!-- 							<i class="fa fa-download" aria-hidden="true"></i><a href="#" th:href="@{@environment.getProperty('upload.default.view') + '/notice' + oneData2.sysFileNm}" th:text="${oneData2.orgFIleNm}"></a> -->
+<!-- 						</li> -->
+<!-- 					</ul> -->
+<!-- 				</div> -->
 <!-- 				<div class="swiper-slide"> -->
 <!-- 					<div class="title">긴 제목 : 코로나19 관련 일부 배송지연 안내 코로나19 관련 일부 배송지연 안내 코로나19 관련 일부 배송지연 안내 코로나19 관련 일부 배송지연 안내</div> -->
 <!-- 					<div class="content"> -->
@@ -68,31 +68,78 @@
 <script type="text/javascript" src="/ux/plugins/swiper/swiper.min.js"></script>
 <script th:inline="javascript">
 /*<![CDATA[*/
-	let noticeCnt = [[${noticeCnt}]];
+// 	let noticeCnt = [[${noticeCnt}]];
 	
-	if (noticeCnt > 1) {
-		// 공지팝업 : SWIPE(공지가 한장일 경우 해당 객체 선언 금지)
-		let swiper = new Swiper('#popupNotice .swiper-container', {
-			loop: true,
-			paginationClickable :true,
-			pagination: {
-				el: '.swiper-pagination',
-				type: 'fraction', /* 201125 */
-			},
-			navigation: {
-				nextEl: '.swiper-button-next',
-				prevEl: '.swiper-button-prev',
-			},
-		});
-	}
+// 	if (noticeCnt > 1) {
+// 		// 공지팝업 : SWIPE(공지가 한장일 경우 해당 객체 선언 금지)
+// 		let swiper = new Swiper('#popupNotice .swiper-container', {
+// 			loop: true,
+// 			paginationClickable :true,
+// 			pagination: {
+// 				el: '.swiper-pagination',
+// 				type: 'fraction', /* 201125 */
+// 			},
+// 			navigation: {
+// 				nextEl: '.swiper-button-next',
+// 				prevEl: '.swiper-button-prev',
+// 			},
+// 		});
+// 	}
 	
 	$('#btnCloseNotice').on('click', function() {
 		gagajf.setCookie("CK_NOTICE_CLOSE", "Y", 1);
 		uifnPopupClose('popupNotice');
 	});
 	
-	$(document).ready(function() {
+	let fnGetNoticePopupList = function() {
+		$.getJSON('/board/notice/popup/list'
+			, function(result, status) {
+				if (status == 'success') {
+					if (result.length > 0) {
+						$('#noticePopupList').html('');
+						$.each(result, function(idx, item) {
+							let tag = '<div class="swiper-slide">\n';
+							tag += '	<div class="title">' + item.noticeTitle + '</div>\n';
+							tag += '	<div class="content">' + item.noticeContent + '</div>\n';
+							
+							if (item.fileList.length > 0) {
+								tag += '	<ul class="download">\n';
+								
+								$.each(item.fileList, function(idx2, item2) {
+									tag += '		<li">\n';
+									tag += '			<i class="fa fa-download" aria-hidden="true"></i><a href="' + _uploadDefaultUrl + '/notice' + item2.sysFileNm + '>' + item2.orgFIleNm + '"</a>\n';
+									tag += '		</li">\n';
+								});
+								
+								tag += '	</ul>\n';
+							}
+							
+							tag += '	</div>\n';
+							$('#noticePopupList').append(tag);
+						});
+					}
+					
+					if (result.length > 1) {
+						// 공지팝업 : SWIPE(공지가 한장일 경우 해당 객체 선언 금지)
+						let swiper = new Swiper('#popupNotice .swiper-container', {
+							loop: true,
+							paginationClickable :true,
+							pagination: {
+								el: '.swiper-pagination',
+								type: 'fraction', /* 201125 */
+							},
+							navigation: {
+								nextEl: '.swiper-button-next',
+								prevEl: '.swiper-button-prev',
+							},
+						});
+					}
+				}
+			});
+	}
 
+	$(document).ready(function() {
+		fnGetNoticePopupList();
 	});
 /*]]>*/
 </script>