From 7e9c3dc965f530c9ab8366feec0f46eb5967b289 Mon Sep 17 00:00:00 2001
From: SeoJin Kim <sjinjin7@gmail.com>
Date: Mon, 26 Apr 2021 02:35:46 +0900
Subject: [PATCH] =?UTF-8?q?[Spring][=EC=87=BC=ED=95=91=EB=AA=B0=20?=
 =?UTF-8?q?=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8][21]=20=EC=83=81=ED=92=88?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EC=88=98=EC=A0=95=20=EA=B5=AC=ED=98=84=20?=
 =?UTF-8?q?-=202?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

https://kimvampa.tistory.com/207
---
 .../WEB-INF/views/admin/goodsModify.jsp       | 274 ++++++++++++++++++
 .../resources/css/admin/goodsModify.css       |   2 +-
 .../WEB-INF/views/admin/goodsModify.jsp       | 272 +++++++++++++++++
 .../resources/css/admin/goodsModify.css       |   2 +-
 4 files changed, 548 insertions(+), 2 deletions(-)

diff --git a/VamPa/src/main/webapp/WEB-INF/views/admin/goodsModify.jsp b/VamPa/src/main/webapp/WEB-INF/views/admin/goodsModify.jsp
index c462af0..218bdee 100644
--- a/VamPa/src/main/webapp/WEB-INF/views/admin/goodsModify.jsp
+++ b/VamPa/src/main/webapp/WEB-INF/views/admin/goodsModify.jsp
@@ -151,5 +151,279 @@
                 </div>
  
  				<%@include file="../includes/admin/footer.jsp" %>
+ 				
+	<script>
+	
+		$(document).ready(function(){
+			
+			/* 캘린더 위젯 적용 */
+			/* 설정 */
+			const config = {
+				dateFormat: 'yy-mm-dd',
+				showOn : "button",
+				buttonText:"날짜 선택",
+			    prevText: '이전 달',
+			    nextText: '다음 달',
+			    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월'],
+			    dayNames: ['일','월','화','수','목','금','토'],
+			    dayNamesShort: ['일','월','화','수','목','금','토'],
+			    dayNamesMin: ['일','월','화','수','목','금','토'],
+			    yearSuffix: '년',
+		        changeMonth: true,
+		        changeYear: true
+			}			
+			/* 캘린더 */
+			$(function() {
+				let publeYear = '${goodsInfo.publeYear}';
+				let puble_length = publeYear.indexOf(" ");
+				publeYear = publeYear.substring(0, puble_length);
+				$( "input[name='publeYear']" ).datepicker(config);
+				$( "input[name='publeYear']" ).datepicker('setDate', publeYear);
+			});				
+			
+			
+			
+			/* 카테고리 */
+			let cateList = JSON.parse('${cateList}');
+
+			let cate1Array = new Array();
+			let cate2Array = new Array();
+			let cate3Array = new Array();
+			let cate1Obj = new Object();
+			let cate2Obj = new Object();
+			let cate3Obj = new Object();
+			
+			let cateSelect1 = $(".cate1");		
+			let cateSelect2 = $(".cate2");
+			let cateSelect3 = $(".cate3");
+			
+			/* 카테고리 배열 초기화 메서드 */
+			function makeCateArray(obj,array,cateList, tier){
+				for(let i = 0; i < cateList.length; i++){
+					if(cateList[i].tier === tier){
+						obj = new Object();
+						
+						obj.cateName = cateList[i].cateName;
+						obj.cateCode = cateList[i].cateCode;
+						obj.cateParent = cateList[i].cateParent;
+						
+						array.push(obj);				
+						
+					}
+				}
+			}	
+			
+				/* 배열 초기화 */
+			makeCateArray(cate1Obj,cate1Array,cateList,1);
+			makeCateArray(cate2Obj,cate2Array,cateList,2);
+			makeCateArray(cate3Obj,cate3Array,cateList,3);
+			
+			
+			let targetCate2 = '';
+			let targetCate3 = '${goodsInfo.cateCode}';
+			
+				/* 소분류 */
+			for(let i = 0; i < cate3Array.length; i++){
+				if(targetCate3 === cate3Array[i].cateCode){
+					targetCate3 = cate3Array[i];
+				}
+			}// for			
+			
+			for(let i = 0; i < cate3Array.length; i++){
+				if(targetCate3.cateParent === cate3Array[i].cateParent){
+					cateSelect3.append("<option value='"+cate3Array[i].cateCode+"'>" + cate3Array[i].cateName + "</option>");
+				}
+			}				
+			
+			$(".cate3 option").each(function(i,obj){
+				if(targetCate3.cateCode === obj.value){
+					$(obj).attr("selected", "selected");
+				}
+			});			
+			
+				/* 중분류 */
+			for(let i = 0; i < cate2Array.length; i++){
+				if(targetCate3.cateParent === cate2Array[i].cateCode){
+					targetCate2 = cate2Array[i];	
+				}
+			}// for		
+			
+			for(let i = 0; i < cate2Array.length; i++){
+				if(targetCate2.cateParent === cate2Array[i].cateParent){
+					cateSelect2.append("<option value='"+cate2Array[i].cateCode+"'>" + cate2Array[i].cateName + "</option>");
+				}
+			}		
+			
+			$(".cate2 option").each(function(i,obj){
+				if(targetCate2.cateCode === obj.value){
+					$(obj).attr("selected", "selected");
+				}
+			});				
+			
+			
+				/* 대분류 */
+			for(let i = 0; i < cate1Array.length; i++){
+				cateSelect1.append("<option value='"+cate1Array[i].cateCode+"'>" + cate1Array[i].cateName + "</option>");
+			}	
+			
+			$(".cate1 option").each(function(i,obj){
+				if(targetCate2.cateParent === obj.value){
+					$(obj).attr("selected", "selected");
+				}
+			});							
+			
+			
+			
+			/* 위지윅 적용 */
+			 
+				/* 책 소개 */
+			ClassicEditor
+				.create(document.querySelector('#bookIntro_textarea'))
+				.catch(error=>{
+					console.error(error);
+				});
+				
+				/* 책 목차 */	
+			ClassicEditor
+			.create(document.querySelector('#bookContents_textarea'))
+			.catch(error=>{
+				console.error(error);
+			});
+			
+				
+				
+			/* 할인율 인터페이스 출력 */
+			let bookPriceInput = $("input[name='bookPrice']");
+			let discountInput = $("input[name='bookDiscount']");
+			
+			let bookPrice = bookPriceInput.val();
+			let rawDiscountRate = discountInput.val();
+			let discountRate = rawDiscountRate * 100;
+			
+			
+			let discountPrice = bookPrice * (1-rawDiscountRate);
+			$(".span_discount").html(discountPrice);
+			$("#discount_interface").val(discountRate);
+				
+			
+		}); // document ready
+	
+	</script> 			
+	
+	<script>
+	
+	/* 카테고리 */
+	let cateList = JSON.parse('${cateList}');
+
+	let cate1Array = new Array();
+	let cate2Array = new Array();
+	let cate3Array = new Array();
+	let cate1Obj = new Object();
+	let cate2Obj = new Object();
+	let cate3Obj = new Object();
+	
+	let cateSelect1 = $(".cate1");		
+	let cateSelect2 = $(".cate2");
+	let cateSelect3 = $(".cate3");
+	
+	/* 카테고리 배열 초기화 메서드 */
+	function makeCateArray(obj,array,cateList, tier){
+		for(let i = 0; i < cateList.length; i++){
+			if(cateList[i].tier === tier){
+				obj = new Object();
+				
+				obj.cateName = cateList[i].cateName;
+				obj.cateCode = cateList[i].cateCode;
+				obj.cateParent = cateList[i].cateParent;
+				
+				array.push(obj);				
+				
+			}
+		}
+	}	
+	
+		/* 배열 초기화 */
+	makeCateArray(cate1Obj,cate1Array,cateList,1);
+	makeCateArray(cate2Obj,cate2Array,cateList,2);
+	makeCateArray(cate3Obj,cate3Array,cateList,3);
+
+	
+		/* 중분류 <option> 태그 */
+	$(cateSelect1).on("change",function(){
+		
+		let selectVal1 = $(this).find("option:selected").val();	
+		
+		cateSelect2.children().remove();
+		cateSelect3.children().remove();
+		
+		cateSelect2.append("<option value='none'>선택</option>");
+		cateSelect3.append("<option value='none'>선택</option>");
+		
+		for(let i = 0; i < cate2Array.length; i++){
+			if(selectVal1 === cate2Array[i].cateParent){
+				cateSelect2.append("<option value='"+cate2Array[i].cateCode+"'>" + cate2Array[i].cateName + "</option>");	
+			}
+		}// for
+		
+	});
+	
+		/* 소분류 <option>태그 */
+	$(cateSelect2).on("change",function(){
+		
+		let selectVal2 = $(this).find("option:selected").val();
+		
+		cateSelect3.children().remove();
+		
+		cateSelect3.append("<option value='none'>선택</option>");		
+		
+		for(let i = 0; i < cate3Array.length; i++){
+			if(selectVal2 === cate3Array[i].cateParent){
+				cateSelect3.append("<option value='"+cate3Array[i].cateCode+"'>" + cate3Array[i].cateName + "</option>");	
+			}
+		}// for		
+		
+	});		
+		
+		
+	/* 할인율 Input 설정 */
+	
+	$("#discount_interface").on("propertychange change keyup paste input", function(){
+		
+		let userInput = $("#discount_interface");
+		let discountInput = $("input[name='bookDiscount']");
+		
+		let discountRate = userInput.val();					// 사용자가 입력한 할인값
+		let sendDiscountRate = discountRate / 100;			// 서버에 전송할 할인값
+		let goodsPrice = $("input[name='bookPrice']").val();			// 원가
+		let discountPrice = goodsPrice * (1 - sendDiscountRate);		// 할인가격
+		
+		if(!isNaN(discountRate)){
+			$(".span_discount").html(discountPrice);		
+			discountInput.val(sendDiscountRate);				
+		}
+
+		
+	});	
+	
+	$("input[name='bookPrice']").on("change", function(){
+		
+		let userInput = $("#discount_interface");
+		let discountInput = $("input[name='bookDiscount']");
+		
+		let discountRate = userInput.val();					// 사용자가 입력한 할인값
+		let sendDiscountRate = discountRate / 100;			// 서버에 전송할 할인값
+		let goodsPrice = $("input[name='bookPrice']").val();			// 원가
+		let discountPrice = goodsPrice * (1 - sendDiscountRate);		// 할인가격
+		
+		if(!isNaN(discountRate)){
+			$(".span_discount").html(discountPrice);	
+		}
+		
+		
+	});		
+	
+	</script>	
+ 				
 </body>
 </html>
\ No newline at end of file
diff --git a/VamPa/src/main/webapp/resources/css/admin/goodsModify.css b/VamPa/src/main/webapp/resources/css/admin/goodsModify.css
index 6913f36..08bb549 100644
--- a/VamPa/src/main/webapp/resources/css/admin/goodsModify.css
+++ b/VamPa/src/main/webapp/resources/css/admin/goodsModify.css
@@ -86,7 +86,7 @@ ul{
 .admin_navi_wrap li a:active {color: black;}
 .admin_navi_wrap li a:hover {color: black;}
 
-.admin_list_01{
+.admin_list_02{
     background-color: #c8c8c8;
 } 
 
diff --git a/VamPa_MySQL/src/main/webapp/WEB-INF/views/admin/goodsModify.jsp b/VamPa_MySQL/src/main/webapp/WEB-INF/views/admin/goodsModify.jsp
index c462af0..43d5d35 100644
--- a/VamPa_MySQL/src/main/webapp/WEB-INF/views/admin/goodsModify.jsp
+++ b/VamPa_MySQL/src/main/webapp/WEB-INF/views/admin/goodsModify.jsp
@@ -151,5 +151,277 @@
                 </div>
  
  				<%@include file="../includes/admin/footer.jsp" %>
+ 				
+	<script>
+	
+		$(document).ready(function(){
+			
+			/* 캘린더 위젯 적용 */
+			/* 설정 */
+			const config = {
+				dateFormat: 'yy-mm-dd',
+				showOn : "button",
+				buttonText:"날짜 선택",
+			    prevText: '이전 달',
+			    nextText: '다음 달',
+			    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월'],
+			    dayNames: ['일','월','화','수','목','금','토'],
+			    dayNamesShort: ['일','월','화','수','목','금','토'],
+			    dayNamesMin: ['일','월','화','수','목','금','토'],
+			    yearSuffix: '년',
+		        changeMonth: true,
+		        changeYear: true
+			}			
+			/* 캘린더 */
+			$(function() {
+				let publeYear = '${goodsInfo.publeYear}';
+				$( "input[name='publeYear']" ).datepicker(config);
+				$( "input[name='publeYear']" ).datepicker('setDate', publeYear);
+			});				
+			
+			
+			
+			/* 카테고리 */
+			let cateList = JSON.parse('${cateList}');
+
+			let cate1Array = new Array();
+			let cate2Array = new Array();
+			let cate3Array = new Array();
+			let cate1Obj = new Object();
+			let cate2Obj = new Object();
+			let cate3Obj = new Object();
+			
+			let cateSelect1 = $(".cate1");		
+			let cateSelect2 = $(".cate2");
+			let cateSelect3 = $(".cate3");
+			
+			/* 카테고리 배열 초기화 메서드 */
+			function makeCateArray(obj,array,cateList, tier){
+				for(let i = 0; i < cateList.length; i++){
+					if(cateList[i].tier === tier){
+						obj = new Object();
+						
+						obj.cateName = cateList[i].cateName;
+						obj.cateCode = cateList[i].cateCode;
+						obj.cateParent = cateList[i].cateParent;
+						
+						array.push(obj);				
+						
+					}
+				}
+			}	
+			
+				/* 배열 초기화 */
+			makeCateArray(cate1Obj,cate1Array,cateList,1);
+			makeCateArray(cate2Obj,cate2Array,cateList,2);
+			makeCateArray(cate3Obj,cate3Array,cateList,3);
+			
+			
+			let targetCate2 = '';
+			let targetCate3 = '${goodsInfo.cateCode}';
+			
+				/* 소분류 */
+			for(let i = 0; i < cate3Array.length; i++){
+				if(targetCate3 === cate3Array[i].cateCode){
+					targetCate3 = cate3Array[i];
+				}
+			}// for			
+			
+			for(let i = 0; i < cate3Array.length; i++){
+				if(targetCate3.cateParent === cate3Array[i].cateParent){
+					cateSelect3.append("<option value='"+cate3Array[i].cateCode+"'>" + cate3Array[i].cateName + "</option>");
+				}
+			}				
+			
+			$(".cate3 option").each(function(i,obj){
+				if(targetCate3.cateCode === obj.value){
+					$(obj).attr("selected", "selected");
+				}
+			});			
+			
+				/* 중분류 */
+			for(let i = 0; i < cate2Array.length; i++){
+				if(targetCate3.cateParent === cate2Array[i].cateCode){
+					targetCate2 = cate2Array[i];	
+				}
+			}// for		
+			
+			for(let i = 0; i < cate2Array.length; i++){
+				if(targetCate2.cateParent === cate2Array[i].cateParent){
+					cateSelect2.append("<option value='"+cate2Array[i].cateCode+"'>" + cate2Array[i].cateName + "</option>");
+				}
+			}		
+			
+			$(".cate2 option").each(function(i,obj){
+				if(targetCate2.cateCode === obj.value){
+					$(obj).attr("selected", "selected");
+				}
+			});				
+			
+			
+				/* 대분류 */
+			for(let i = 0; i < cate1Array.length; i++){
+				cateSelect1.append("<option value='"+cate1Array[i].cateCode+"'>" + cate1Array[i].cateName + "</option>");
+			}	
+			
+			$(".cate1 option").each(function(i,obj){
+				if(targetCate2.cateParent === obj.value){
+					$(obj).attr("selected", "selected");
+				}
+			});							
+			
+			
+			
+			/* 위지윅 적용 */
+			 
+				/* 책 소개 */
+			ClassicEditor
+				.create(document.querySelector('#bookIntro_textarea'))
+				.catch(error=>{
+					console.error(error);
+				});
+				
+				/* 책 목차 */	
+			ClassicEditor
+			.create(document.querySelector('#bookContents_textarea'))
+			.catch(error=>{
+				console.error(error);
+			});
+			
+				
+				
+			/* 할인율 인터페이스 출력 */
+			let bookPriceInput = $("input[name='bookPrice']");
+			let discountInput = $("input[name='bookDiscount']");
+			
+			let bookPrice = bookPriceInput.val();
+			let rawDiscountRate = discountInput.val();
+			let discountRate = rawDiscountRate * 100;
+			
+			
+			let discountPrice = bookPrice * (1-rawDiscountRate);
+			$(".span_discount").html(discountPrice);
+			$("#discount_interface").val(discountRate);
+				
+			
+		}); // document ready
+	
+	</script> 			
+	
+	<script>
+	
+	/* 카테고리 */
+	let cateList = JSON.parse('${cateList}');
+
+	let cate1Array = new Array();
+	let cate2Array = new Array();
+	let cate3Array = new Array();
+	let cate1Obj = new Object();
+	let cate2Obj = new Object();
+	let cate3Obj = new Object();
+	
+	let cateSelect1 = $(".cate1");		
+	let cateSelect2 = $(".cate2");
+	let cateSelect3 = $(".cate3");
+	
+	/* 카테고리 배열 초기화 메서드 */
+	function makeCateArray(obj,array,cateList, tier){
+		for(let i = 0; i < cateList.length; i++){
+			if(cateList[i].tier === tier){
+				obj = new Object();
+				
+				obj.cateName = cateList[i].cateName;
+				obj.cateCode = cateList[i].cateCode;
+				obj.cateParent = cateList[i].cateParent;
+				
+				array.push(obj);				
+				
+			}
+		}
+	}	
+	
+		/* 배열 초기화 */
+	makeCateArray(cate1Obj,cate1Array,cateList,1);
+	makeCateArray(cate2Obj,cate2Array,cateList,2);
+	makeCateArray(cate3Obj,cate3Array,cateList,3);
+
+	
+		/* 중분류 <option> 태그 */
+	$(cateSelect1).on("change",function(){
+		
+		let selectVal1 = $(this).find("option:selected").val();	
+		
+		cateSelect2.children().remove();
+		cateSelect3.children().remove();
+		
+		cateSelect2.append("<option value='none'>선택</option>");
+		cateSelect3.append("<option value='none'>선택</option>");
+		
+		for(let i = 0; i < cate2Array.length; i++){
+			if(selectVal1 === cate2Array[i].cateParent){
+				cateSelect2.append("<option value='"+cate2Array[i].cateCode+"'>" + cate2Array[i].cateName + "</option>");	
+			}
+		}// for
+		
+	});
+	
+		/* 소분류 <option>태그 */
+	$(cateSelect2).on("change",function(){
+		
+		let selectVal2 = $(this).find("option:selected").val();
+		
+		cateSelect3.children().remove();
+		
+		cateSelect3.append("<option value='none'>선택</option>");		
+		
+		for(let i = 0; i < cate3Array.length; i++){
+			if(selectVal2 === cate3Array[i].cateParent){
+				cateSelect3.append("<option value='"+cate3Array[i].cateCode+"'>" + cate3Array[i].cateName + "</option>");	
+			}
+		}// for		
+		
+	});		
+		
+		
+	/* 할인율 Input 설정 */
+	
+	$("#discount_interface").on("propertychange change keyup paste input", function(){
+		
+		let userInput = $("#discount_interface");
+		let discountInput = $("input[name='bookDiscount']");
+		
+		let discountRate = userInput.val();					// 사용자가 입력한 할인값
+		let sendDiscountRate = discountRate / 100;			// 서버에 전송할 할인값
+		let goodsPrice = $("input[name='bookPrice']").val();			// 원가
+		let discountPrice = goodsPrice * (1 - sendDiscountRate);		// 할인가격
+		
+		if(!isNaN(discountRate)){
+			$(".span_discount").html(discountPrice);		
+			discountInput.val(sendDiscountRate);				
+		}
+
+		
+	});	
+	
+	$("input[name='bookPrice']").on("change", function(){
+		
+		let userInput = $("#discount_interface");
+		let discountInput = $("input[name='bookDiscount']");
+		
+		let discountRate = userInput.val();					// 사용자가 입력한 할인값
+		let sendDiscountRate = discountRate / 100;			// 서버에 전송할 할인값
+		let goodsPrice = $("input[name='bookPrice']").val();			// 원가
+		let discountPrice = goodsPrice * (1 - sendDiscountRate);		// 할인가격
+		
+		if(!isNaN(discountRate)){
+			$(".span_discount").html(discountPrice);	
+		}
+		
+		
+	});		
+	
+	</script>	
+ 				
 </body>
 </html>
\ No newline at end of file
diff --git a/VamPa_MySQL/src/main/webapp/resources/css/admin/goodsModify.css b/VamPa_MySQL/src/main/webapp/resources/css/admin/goodsModify.css
index 6913f36..08bb549 100644
--- a/VamPa_MySQL/src/main/webapp/resources/css/admin/goodsModify.css
+++ b/VamPa_MySQL/src/main/webapp/resources/css/admin/goodsModify.css
@@ -86,7 +86,7 @@ ul{
 .admin_navi_wrap li a:active {color: black;}
 .admin_navi_wrap li a:hover {color: black;}
 
-.admin_list_01{
+.admin_list_02{
     background-color: #c8c8c8;
 }