From 2881eced69b18ff8fca2339d0605c2854fbe5ff2 Mon Sep 17 00:00:00 2001
From: SeoJin Kim <sjinjin7@gmail.com>
Date: Sun, 12 Dec 2021 23:59:49 +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][41]=20=EC=A3=BC=EB=AC=B8?=
 =?UTF-8?q?=20=EA=B5=AC=ED=98=84(=EC=A3=BC=EB=AC=B8=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80)=20-=205?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

https://kimvampa.tistory.com/276
---
 VamPa/src/main/webapp/WEB-INF/views/order.jsp | 110 +++++++++++++++++-
 VamPa/src/main/webapp/resources/css/order.css |  59 +++++++++-
 .../src/main/webapp/WEB-INF/views/order.jsp   | 110 +++++++++++++++++-
 .../src/main/webapp/resources/css/order.css   |  59 +++++++++-
 4 files changed, 330 insertions(+), 8 deletions(-)

diff --git a/VamPa/src/main/webapp/WEB-INF/views/order.jsp b/VamPa/src/main/webapp/WEB-INF/views/order.jsp
index 97dfaf4..80d68fa 100644
--- a/VamPa/src/main/webapp/WEB-INF/views/order.jsp
+++ b/VamPa/src/main/webapp/WEB-INF/views/order.jsp
@@ -235,9 +235,43 @@
 						</tbody>
 					</table>
 				</div>				
-				
-				
 				<!-- 주문 종합 정보 -->
+				<div class="total_info_div">
+					<!-- 가격 종합 정보 -->
+					<div class="total_info_price_div">
+						<ul>
+							<li>
+								<span class="price_span_label">상품 금액</span>
+								<span class="totalPrice_span">100000</span>원
+							</li>
+							<li>
+								<span class="price_span_label">배송비</span>
+								<span class="delivery_price_span">100000</span>원
+							</li>
+																					<li>
+								<span class="price_span_label">할인금액</span>
+								<span class="usePoint_span">100000</span>원
+							</li>
+							<li class="price_total_li">
+								<strong class="price_span_label total_price_label">최종 결제 금액</strong>
+								<strong class="strong_red">
+									<span class="total_price_red finalTotalPrice_span">
+										1500000
+									</span>원
+								</strong>
+							</li>
+							<li class="point_li">
+								<span class="price_span_label">적립예정 포인트</span>
+								<span class="totalPoint_span">7960원</span>
+							</li>
+						</ul>
+					</div>
+					<!-- 버튼 영역 -->
+					<div class="total_info_btn_div">
+						<a class="order_btn">결제하기</a>
+					</div>
+				</div>				
+				
 			</div>			
 			
 		</div>
@@ -285,6 +319,14 @@
 
 <script>
 
+$(document).ready(function(){
+	
+	/* 주문 조합정보란 최신화 */
+	setTotalInfo();
+	
+});
+
+
 /* 주소입력란 버튼 동작(숨김, 등장) */
 function showAdress(className){
 	/* 컨텐츠 동작 */
@@ -371,6 +413,9 @@ $(".order_point_input").on("propertychange change keyup paste input", function()
 		$(this).val(maxPoint);
 	}	
 	
+	/* 주문 조합정보란 최신화 */
+	setTotalInfo();	
+	
 });
 
 
@@ -399,11 +444,70 @@ $(".order_point_input_btn").on("click", function(){
 		//글 변경
 		$(".order_point_input_btn_Y").css("display", "none");
 		$(".order_point_input_btn_N").css("display", "inline-block");		
-	}		
+	}	
+	
+	/* 주문 조합정보란 최신화 */
+	setTotalInfo();	
 	
 });
 
 
+/* 총 주문 정보 세팅(배송비, 총 가격, 마일리지, 물품 수, 종류) */
+function setTotalInfo(){
+
+	let totalPrice = 0;				// 총 가격
+	let totalCount = 0;				// 총 갯수
+	let totalKind = 0;				// 총 종류
+	let totalPoint = 0;				// 총 마일리지
+	let deliveryPrice = 0;			// 배송비
+	let usePoint = 0;				// 사용 포인트(할인가격)
+	let finalTotalPrice = 0; 		// 최종 가격(총 가격 + 배송비)	
+	
+	$(".goods_table_price_td").each(function(index, element){
+		// 총 가격
+		totalPrice += parseInt($(element).find(".individual_totalPrice_input").val());
+		// 총 갯수
+		totalCount += parseInt($(element).find(".individual_bookCount_input").val());
+		// 총 종류
+		totalKind += 1;
+		// 총 마일리지
+		totalPoint += parseInt($(element).find(".individual_totalPoint_input").val());
+	});	
+
+	/* 배송비 결정 */
+	if(totalPrice >= 30000){
+		deliveryPrice = 0;
+	} else if(totalPrice == 0){
+		deliveryPrice = 0;
+	} else {
+		deliveryPrice = 3000;	
+	}
+	
+	finalTotalPrice = totalPrice + deliveryPrice;	
+	
+	/* 사용 포인트 */
+	usePoint = $(".order_point_input").val();
+	
+	finalTotalPrice = totalPrice - usePoint;	
+	
+	/* 값 삽입 */
+	// 총 가격
+	$(".totalPrice_span").text(totalPrice.toLocaleString());
+	// 총 갯수
+	$(".goods_kind_div_count").text(totalCount);
+	// 총 종류
+	$(".goods_kind_div_kind").text(totalKind);
+	// 총 마일리지
+	$(".totalPoint_span").text(totalPoint.toLocaleString());
+	// 배송비
+	$(".delivery_price_span").text(deliveryPrice.toLocaleString());	
+	// 최종 가격(총 가격 + 배송비)
+	$(".finalTotalPrice_span").text(finalTotalPrice.toLocaleString());		
+	// 할인가(사용 포인트)
+	$(".usePoint_span").text(usePoint.toLocaleString());	
+	
+}
+
 </script>
 
 </body>
diff --git a/VamPa/src/main/webapp/resources/css/order.css b/VamPa/src/main/webapp/resources/css/order.css
index 596f3cb..9dfa279 100644
--- a/VamPa/src/main/webapp/resources/css/order.css
+++ b/VamPa/src/main/webapp/resources/css/order.css
@@ -330,7 +330,64 @@ height: 110px;
     font-size: 12px;
 }
 
-
+/* 주문 종합 정보 */
+.total_info_div{
+	position:absolute;
+	top: 0;
+	right : 0;
+	width : 300px;
+	border : 1px solid #333;
+	border-top-width:2px;	
+	
+}
+.total_info_price_div{
+	width: 90%;
+    margin: auto;
+	position: relative;
+}
+.total_info_div ul{
+	list-style: none;
+}
+.total_info_div li{
+	text-align: right;
+	margin-top:10px;
+}
+.price_span_label{
+	float: left;
+}
+.price_total_li{
+	border-top: 1px solid #ddd;
+	padding-top: 20px;
+}
+.strong_red{
+	color: red;
+}
+.total_price_red{
+	font-size: 25px;
+}
+.total_price_label{
+	margin-top: 5px;
+}
+.point_li{
+    padding: 15px;
+    border-top: 1px solid #ddd;
+    margin: 10px -15px 0;
+}
+.total_info_btn_div{
+	border-top: 1px solid #ddd;
+    text-align: center;
+    padding: 15px 20px;
+}
+.order_btn{
+    display: inline-block;
+    font-size: 21px;
+    line-height: 50px;
+    width: 200px;
+    height: 50px;
+    background-color: #365fdd;
+    color: #fff;
+    font-weight: bold;
+}
 
 
 
diff --git a/VamPa_MySQL/src/main/webapp/WEB-INF/views/order.jsp b/VamPa_MySQL/src/main/webapp/WEB-INF/views/order.jsp
index 97dfaf4..80d68fa 100644
--- a/VamPa_MySQL/src/main/webapp/WEB-INF/views/order.jsp
+++ b/VamPa_MySQL/src/main/webapp/WEB-INF/views/order.jsp
@@ -235,9 +235,43 @@
 						</tbody>
 					</table>
 				</div>				
-				
-				
 				<!-- 주문 종합 정보 -->
+				<div class="total_info_div">
+					<!-- 가격 종합 정보 -->
+					<div class="total_info_price_div">
+						<ul>
+							<li>
+								<span class="price_span_label">상품 금액</span>
+								<span class="totalPrice_span">100000</span>원
+							</li>
+							<li>
+								<span class="price_span_label">배송비</span>
+								<span class="delivery_price_span">100000</span>원
+							</li>
+																					<li>
+								<span class="price_span_label">할인금액</span>
+								<span class="usePoint_span">100000</span>원
+							</li>
+							<li class="price_total_li">
+								<strong class="price_span_label total_price_label">최종 결제 금액</strong>
+								<strong class="strong_red">
+									<span class="total_price_red finalTotalPrice_span">
+										1500000
+									</span>원
+								</strong>
+							</li>
+							<li class="point_li">
+								<span class="price_span_label">적립예정 포인트</span>
+								<span class="totalPoint_span">7960원</span>
+							</li>
+						</ul>
+					</div>
+					<!-- 버튼 영역 -->
+					<div class="total_info_btn_div">
+						<a class="order_btn">결제하기</a>
+					</div>
+				</div>				
+				
 			</div>			
 			
 		</div>
@@ -285,6 +319,14 @@
 
 <script>
 
+$(document).ready(function(){
+	
+	/* 주문 조합정보란 최신화 */
+	setTotalInfo();
+	
+});
+
+
 /* 주소입력란 버튼 동작(숨김, 등장) */
 function showAdress(className){
 	/* 컨텐츠 동작 */
@@ -371,6 +413,9 @@ $(".order_point_input").on("propertychange change keyup paste input", function()
 		$(this).val(maxPoint);
 	}	
 	
+	/* 주문 조합정보란 최신화 */
+	setTotalInfo();	
+	
 });
 
 
@@ -399,11 +444,70 @@ $(".order_point_input_btn").on("click", function(){
 		//글 변경
 		$(".order_point_input_btn_Y").css("display", "none");
 		$(".order_point_input_btn_N").css("display", "inline-block");		
-	}		
+	}	
+	
+	/* 주문 조합정보란 최신화 */
+	setTotalInfo();	
 	
 });
 
 
+/* 총 주문 정보 세팅(배송비, 총 가격, 마일리지, 물품 수, 종류) */
+function setTotalInfo(){
+
+	let totalPrice = 0;				// 총 가격
+	let totalCount = 0;				// 총 갯수
+	let totalKind = 0;				// 총 종류
+	let totalPoint = 0;				// 총 마일리지
+	let deliveryPrice = 0;			// 배송비
+	let usePoint = 0;				// 사용 포인트(할인가격)
+	let finalTotalPrice = 0; 		// 최종 가격(총 가격 + 배송비)	
+	
+	$(".goods_table_price_td").each(function(index, element){
+		// 총 가격
+		totalPrice += parseInt($(element).find(".individual_totalPrice_input").val());
+		// 총 갯수
+		totalCount += parseInt($(element).find(".individual_bookCount_input").val());
+		// 총 종류
+		totalKind += 1;
+		// 총 마일리지
+		totalPoint += parseInt($(element).find(".individual_totalPoint_input").val());
+	});	
+
+	/* 배송비 결정 */
+	if(totalPrice >= 30000){
+		deliveryPrice = 0;
+	} else if(totalPrice == 0){
+		deliveryPrice = 0;
+	} else {
+		deliveryPrice = 3000;	
+	}
+	
+	finalTotalPrice = totalPrice + deliveryPrice;	
+	
+	/* 사용 포인트 */
+	usePoint = $(".order_point_input").val();
+	
+	finalTotalPrice = totalPrice - usePoint;	
+	
+	/* 값 삽입 */
+	// 총 가격
+	$(".totalPrice_span").text(totalPrice.toLocaleString());
+	// 총 갯수
+	$(".goods_kind_div_count").text(totalCount);
+	// 총 종류
+	$(".goods_kind_div_kind").text(totalKind);
+	// 총 마일리지
+	$(".totalPoint_span").text(totalPoint.toLocaleString());
+	// 배송비
+	$(".delivery_price_span").text(deliveryPrice.toLocaleString());	
+	// 최종 가격(총 가격 + 배송비)
+	$(".finalTotalPrice_span").text(finalTotalPrice.toLocaleString());		
+	// 할인가(사용 포인트)
+	$(".usePoint_span").text(usePoint.toLocaleString());	
+	
+}
+
 </script>
 
 </body>
diff --git a/VamPa_MySQL/src/main/webapp/resources/css/order.css b/VamPa_MySQL/src/main/webapp/resources/css/order.css
index 596f3cb..9dfa279 100644
--- a/VamPa_MySQL/src/main/webapp/resources/css/order.css
+++ b/VamPa_MySQL/src/main/webapp/resources/css/order.css
@@ -330,7 +330,64 @@ height: 110px;
     font-size: 12px;
 }
 
-
+/* 주문 종합 정보 */
+.total_info_div{
+	position:absolute;
+	top: 0;
+	right : 0;
+	width : 300px;
+	border : 1px solid #333;
+	border-top-width:2px;	
+	
+}
+.total_info_price_div{
+	width: 90%;
+    margin: auto;
+	position: relative;
+}
+.total_info_div ul{
+	list-style: none;
+}
+.total_info_div li{
+	text-align: right;
+	margin-top:10px;
+}
+.price_span_label{
+	float: left;
+}
+.price_total_li{
+	border-top: 1px solid #ddd;
+	padding-top: 20px;
+}
+.strong_red{
+	color: red;
+}
+.total_price_red{
+	font-size: 25px;
+}
+.total_price_label{
+	margin-top: 5px;
+}
+.point_li{
+    padding: 15px;
+    border-top: 1px solid #ddd;
+    margin: 10px -15px 0;
+}
+.total_info_btn_div{
+	border-top: 1px solid #ddd;
+    text-align: center;
+    padding: 15px 20px;
+}
+.order_btn{
+    display: inline-block;
+    font-size: 21px;
+    line-height: 50px;
+    width: 200px;
+    height: 50px;
+    background-color: #365fdd;
+    color: #fff;
+    font-weight: bold;
+}