Merge branch 'develop' into bin2107

src/main/java/com/style24/front/biz/dao/TsfCustomerDao.java

@@ -2,6 +2,7 @@ package com.style24.front.biz.dao;
 
 import com.style24.core.support.annotation.ShopDs;
 import com.style24.persistence.domain.CustDeliveryAddr;
+import com.style24.persistence.domain.CustGrade;
 import com.style24.persistence.domain.CustSnsInfo;
 import com.style24.persistence.domain.Customer;
 import com.style24.persistence.domain.WishList;
@@ -146,5 +147,25 @@ public interface TsfCustomerDao {
 	 */
 	int updateCustomerInfo(Customer customer);
 
+	/**
+	 * 고객등급 정책
+	 *
+	 * @param custGrade - 사이트 코드
+	 * @return int - 결과
+	 * @author jsshin
+	 * @since 2021. 04. 06
+	 */
+	Collection<CustGrade> getCustGradePolicy(CustGrade custGrade);
+
+	/**
+	 * 고객 예상등급 조회
+	 *
+	 * @param custGrade - 사이트 코드
+	 * @return int - 결과
+	 * @author jsshin
+	 * @since 2021. 04. 06
+	 */
+	CustGrade getExpectedCustGrde(CustGrade custGrade);
+
 
 }

src/main/java/com/style24/front/biz/dao/TsfPlanningDao.java

@@ -302,5 +302,16 @@ public interface TsfPlanningDao {
 	 */
 	CustDeliveryAddr getCustAddrShotConfirm(String recipZipcode);
 	
+	/**
+	 * 출석체크 달력
+	 *
+	 * @param Plan
+	 * @return plan
+	 * @author sowon
+	 * @date 2021. 4. 6
+	 */
+	Collection<Plan> getAttendMonth(Plan plan);
+	
+	
 	
 }

src/main/java/com/style24/front/biz/service/TsfCartService.java

@@ -15,6 +15,7 @@ import org.thymeleaf.util.StringUtils;
 import com.gagaframework.web.parameter.GagaMap;
 import com.style24.core.biz.dao.TscEnvsetDao;
 import com.style24.core.biz.service.TscOrderService;
+import com.style24.core.support.annotation.ShopDs;
 import com.style24.core.support.env.TscConstants;
 import com.style24.core.support.session.TscSession;
 import com.style24.front.biz.dao.TsfCartDao;
@@ -84,6 +85,12 @@ public class TsfCartService {
 			}
 			if (TscConstants.GoodsStat.SOLDOUT.value().equals(goods.getGoodsStat())) {
 				throw new IllegalArgumentException("품절입니다.");
+			} else if (!TscConstants.GoodsStat.SOLDOUT.value().equals(goods.getGoodsStat()) && !TscConstants.GoodsStat.APPR.value().equals(goods.getGoodsStat())) {
+				throw new IllegalArgumentException("판매중인 상품이 아닙니다.");
+			} else if (param.getGoodsQty() > goods.getMaxOrdQty()) {
+				throw new IllegalArgumentException(goods.getGoodsNm() + " 상품의 최대 구매 수량은 " + goods.getMaxOrdQty() + " 입니다.");
+			} else if (param.getGoodsQty() < goods.getMinOrdQty()) {
+				throw new IllegalArgumentException(goods.getGoodsNm() + " 상품의 최소 구매 수량은 " + goods.getMinOrdQty() + " 입니다.");
 			}
 
 			// 상품 재고 확인
@@ -192,6 +199,10 @@ public class TsfCartService {
 				cartDao.updateCartInfo(cart);               // 장바구니 정보 수정
 				cartDao.insertCartHst(cart);                // 장바구니 수정 이력 저장
 			}
+
+			for (Cart param : params) {
+				param.setCartSq(cart.getCartSq());
+			}
 		} else {
 			cartDao.insertCartInfo(cart);					// 장바구니 마스터 정보 저장
 			cartDao.insertCartHst(cart);                    // 장바구니 이력 정보 저장
@@ -302,7 +313,7 @@ public class TsfCartService {
 
 		// 품절 아닌 상품만 체크
 		for (Order goods : cartGoodsList) {
-			if ("N".equals(goods.getSoldoutYn()) && "Y".equals(goods.getOrdCanYn())) {
+			if ("N".equals(goods.getSoldoutYn()) && "Y".equals(goods.getOrdCanYn()) && goods.getGoodsQty() >= goods.getMinOrdQty() && goods.getGoodsQty() <= goods.getMaxOrdQty()) {
 				cartSqs.add(goods.getCartSq());
 			}
 		}
@@ -345,6 +356,9 @@ public class TsfCartService {
 		// 총계 금액 계산
 		setCartListTotAmtInfo(cartGoodsList, order);
 
+		// 전체 장바구니 정보
+		order.setDelvAllCartList(cartGoodsList);
+
 		return order;
 	}
 
@@ -626,7 +640,7 @@ public class TsfCartService {
 			for (Order param : params) {
 				if (param.getDelvFeeCd().equals(delv.getDelvFeeCd())) {
 					compCnt++;
-					if("N".equals(param.getSoldoutYn()) && "Y".equals(param.getOrdCanYn())) {
+					if("N".equals(param.getSoldoutYn()) && "Y".equals(param.getOrdCanYn()) && param.getGoodsQty() >= param.getMinOrdQty() && param.getGoodsQty() <= param.getMaxOrdQty()) {
 						delv.setCompSumPrice(delv.getCompSumPrice() + param.getCurrPrice());
 					}
 					if (compCnt == 1) {
@@ -661,7 +675,7 @@ public class TsfCartService {
 
 			// 자사 상품 가격 계산
 			if("WMS".equals(param.getDelvFeeCd())) {
-				if("N".equals(param.getSoldoutYn()) && "Y".equals(param.getOrdCanYn())) {
+				if("N".equals(param.getSoldoutYn()) && "Y".equals(param.getOrdCanYn()) && param.getGoodsQty() >= param.getMinOrdQty() && param.getGoodsQty() <= param.getMaxOrdQty()) {
 					wmsSumPrice = wmsSumPrice + param.getCurrPrice();
 					wmsMinOrdAmt = param.getMinOrdAmt();
 					wmsDelvFee = param.getDelvFee();
@@ -691,7 +705,7 @@ public class TsfCartService {
 		int notSoldoutCnt = 0;
 
 		for(Order cart : cartGoodsList) {
-			if("N".equals(cart.getSoldoutYn()) && "Y".equals(cart.getOrdCanYn())) {
+			if("N".equals(cart.getSoldoutYn()) && "Y".equals(cart.getOrdCanYn()) && cart.getGoodsQty() >= cart.getMinOrdQty() && cart.getGoodsQty() <= cart.getMaxOrdQty()) {
 				notSoldoutCnt++;
 				// 상품 금액 합계
 				order.setSumOrdAmt(order.getSumOrdAmt() + cart.getCurrPrice());
@@ -1032,7 +1046,6 @@ public class TsfCartService {
 	 * @since 2021. 04. 01
 	 */
 	public Collection<Order> getOrderListConditionCheck(Order param) {
-		log.info("CHECK LOGIN_INFO ::::: {}", param.getCustNo());
 		int custNo = 0;
 		if(TsfSession.isLogin()) {
 			custNo = TsfSession.getInfo().getCustNo();
@@ -1072,6 +1085,7 @@ public class TsfCartService {
 	 * @author xodud1202
 	 * @since 2021. 04. 02
 	 */
+	@Transactional("shopTxnManager")
 	public Order updateCartGoodsQty(Order param) {
 		if(TsfSession.isLogin()) {
 			param.setCustNo(TsfSession.getInfo().getCustNo());
@@ -1082,8 +1096,7 @@ public class TsfCartService {
 		}
 
 		Order order = new Order();
-		log.info("CHECK UPDATE CART UPDATE INFO ::::: {} / {}", param.getCartSq(), param.getGoodsQty());
-		order.setChangeQty(cartDao.updateCartGoodsQty(param));
+		order.setChgQty(cartDao.updateCartGoodsQty(param));
 		return order;
 	}
 }

src/main/java/com/style24/front/biz/service/TsfCustomerService.java

@@ -7,6 +7,7 @@ import java.util.List;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpSession;
 
+import com.style24.persistence.domain.CustGrade;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.core.env.Environment;
@@ -791,6 +792,7 @@ public class TsfCustomerService {
 
 	/**
 	 * 고객계좌 정보
+	 *
 	 * @param  custNo - 고객번호
 	 * @return CustAccount - 고객계과 정보
 	 * @author jsshin
@@ -803,6 +805,7 @@ public class TsfCustomerService {
 
 	/**
 	 * 고객정보 수정
+	 *
 	 * @param  customer - 고객정보
 	 * @return GagaMap - 결과
 	 * @author jsshin
@@ -865,6 +868,7 @@ public class TsfCustomerService {
 	 * 이메일 유효성 체크 -
 	 * 본인이 사용하고 있는 이메일 제외 하고 다른 사람이
 	 * 변경하려는 이메일 사용하느지 체크
+	 *
 	 * @param  customer - 이메일, 고객번호
 	 * @return GagaMap - 결과
 	 * @author jsshin
@@ -878,17 +882,20 @@ public class TsfCustomerService {
 
 	/**
 	 * 회원탈퇴 처리
+	 *
 	 * @param  customer - 고객번호
 	 * @return GagaMap - 결과
 	 * @author jsshin
 	 * @since 2021. 03. 24
 	 */
+	@Transactional("shopTxnManager")
 	public GagaMap saveCustomerSecede(Customer customer) {
 		return coreCustomerService.saveCustomerSecede(customer);
 	}
 
 	/**
 	 * 마이페이지 - 비밀번호 변경
+	 *
 	 * @param  customer - 고객번호
 	 * @return GagaMap - 결과
 	 * @author jsshin
@@ -919,6 +926,7 @@ public class TsfCustomerService {
 
 	/**
 	 * 마이페이지 - 배송지 목록
+	 *
 	 * @param  custDeliveryAddr - 고객번호
 	 * @return Collection<CustDeliveryAddr> - 배송목록
 	 * @author jsshin
@@ -928,4 +936,51 @@ public class TsfCustomerService {
 		return coreCustomerService.getCustomerDeliveryAddrList(custDeliveryAddr);
 	}
 
+	/**
+	 * 마이페이지 - 배송지 삭제
+	 *
+	 * @param  custDeliveryAddr - 고객번호
+	 * @return Collection<CustDeliveryAddr> - 배송목록
+	 * @author jsshin
+	 * @since 2021. 04. 01
+	 */
+	@Transactional("shopTxnManager")
+	public GagaMap deleteCustDeliveryAddr(CustDeliveryAddr custDeliveryAddr) {
+		GagaMap resultMap = new GagaMap();
+		Integer custNo = TsfSession.getInfo().getCustNo();
+		custDeliveryAddr.setCustNo(custNo);
+		custDeliveryAddr.setRegNo(custNo);
+		custDeliveryAddr.setUpdNo(custNo);
+		int resultCnt = coreCustomerService.deleteCustDeliveryAddr(custDeliveryAddr);
+		boolean isSuccess = resultCnt > 0;
+		resultMap.setBoolean("isSuccess", isSuccess);
+		return resultMap;
+	}
+
+	/*
+	 * 고객 예상등급
+	 *
+	 * @param  custGrade - 고객번호
+	 * @return CustGrade
+	 * @author jsshin
+	 * @since 2021. 04. 06
+	 */
+	public GagaMap getExpectedCustGrde(Customer customer) {
+		GagaMap result = new GagaMap();
+		CustGrade params = new CustGrade();
+		params.setCustNo(customer.getCustNo());
+		params.setSiteCd(customer.getSiteCd());
+		Collection<CustGrade> custGradePolicy = customerDao.getCustGradePolicy(params);
+		result.set("custGradePolicy", custGradePolicy);
+		CustGrade expctCustGrade;
+		for (CustGrade grade : custGradePolicy) {
+			grade.setCustNo(customer.getCustNo());
+			expctCustGrade = customerDao.getExpectedCustGrde(grade);
+			if (expctCustGrade != null) {
+				result.set("expctCustGrade", expctCustGrade);
+				return result;
+			}
+		}
+		return result;
+	}
 }

src/main/java/com/style24/front/biz/service/TsfPlanningService.java

@@ -456,6 +456,18 @@ public class TsfPlanningService {
 		return planningDao.getCustAddrShotConfirm(recipZipcode);
 	}
 	
+	/**
+	 * 출석체크 달력 출력
+	 *
+	 * @param Plan
+	 * @return Plan
+	 * @author sowon
+	 * @date 2021. 4. 6
+	 */
+	public Collection<Plan> getAttendMonth(Plan plan) {
+		return planningDao.getAttendMonth(plan);
+	}
+	
 
 
 }

src/main/java/com/style24/front/biz/web/TsfCartController.java

@@ -1,7 +1,10 @@
 package com.style24.front.biz.web;
 
 import java.text.SimpleDateFormat;
+import java.util.ArrayList;
 import java.util.Collection;
+import java.util.Collections;
+import java.util.Comparator;
 import java.util.Date;
 
 import javax.servlet.http.HttpServletRequest;
@@ -30,8 +33,10 @@ import com.style24.front.support.controller.TsfBaseController;
 import com.style24.front.support.security.session.TsfSession;
 import com.style24.persistence.domain.Cart;
 import com.style24.persistence.domain.Coupon;
+import com.style24.persistence.domain.Goods;
 import com.style24.persistence.domain.Order;
 import com.style24.persistence.domain.Payment;
+import com.style24.persistence.domain.WishList;
 
 import lombok.extern.slf4j.Slf4j;
 
@@ -95,15 +100,15 @@ public class TsfCartController extends TsfBaseController {
 	 */
 	@ResponseBody
 	@PostMapping("/save")
-	public String createCart(@RequestBody Collection<Cart> params) {
+	public Collection<Cart> createCart(@RequestBody Collection<Cart> params) {
 		try {
 			cartService.saveCartInfo(params);
 		} catch (Exception e) {
 			e.printStackTrace();
-			return e.getMessage();
+			throw new IllegalArgumentException();
 		}
 
-		return message.getMessage("SUCC_0001");
+		return params;
 	}
 
 	// @ResponseBody
@@ -254,7 +259,37 @@ public class TsfCartController extends TsfBaseController {
 	@ResponseBody
 	@PostMapping("/update/goodsQty")
 	public Order updateCartGoodsQty(@RequestBody Order param) {
-		Order result = new Order();
 		return cartService.updateCartGoodsQty(param);
 	}
+
+	/**
+	 * 퀵메뉴 장바구니 리스트
+	 * @return
+	 * @author sowon
+	 * @since 2021. 4. 1
+	 */
+	@GetMapping("/quick/cart/list")
+	@ResponseBody
+	public Order getCartList() {
+		Order cart = new Order();
+		int custNo = 0;
+		if(TsfSession.isLogin()) {
+			custNo = TsfSession.getInfo().getCustNo();
+		}
+
+		// 장바구니 상품목록
+		cart = cartService.getCartGoodsList(cart);
+		cart.setImgPath1(env.getProperty("upload.goods.view"));
+
+		// 현재 주문 가능 수량순으로 정렬
+		Collections.sort((ArrayList<Order>) cart.getDelvAllCartList(), new Comparator<Order>() {
+			@Override
+			public int compare(Order c1, Order c2) {
+				return c1.getOrdCanQty() - c2.getOrdCanQty();
+				// return c2.getQtyTmtbSq() - c1.getQtyTmtbSq(); //역순 정렬
+			}
+		});
+
+		return cart;
+	}
 }

src/main/java/com/style24/front/biz/web/TsfMypageController.java

@@ -418,7 +418,45 @@ public class TsfMypageController extends TsfBaseController {
 
 		return mav;
 	}
-	
+
+	/**
+	 * 교환신청
+	 *
+	 * @param OrderChange
+	 * @return GagaMap
+	 * @author card007
+	 * @since 2021. 04. 06
+	 */
+	@SuppressWarnings("unchecked")
+	@PostMapping("/exchange")
+	@ResponseBody
+	public GagaMap excReq(@RequestBody OrderChange orderChange) {
+		GagaMap result = new GagaMap();
+
+		// 교환요청 데이터 확인
+		if (orderChange == null) {
+			result.set("status", GagaResponseStatus.FAIL.getCode());
+			result.set("message", message.getMessage("FAIL_1001"));
+			return result;
+		}
+
+		// 세션 고객번호 설정
+		int custNo = TsfSession.getInfo().getCustNo();
+		orderChange.setUpdNo(custNo);
+		orderChange.setRegNo(custNo);
+
+		// 교환처리
+		result = coreOrderChangeService.exchReq(orderChange);
+
+		// 처리 결과 코드에 따른 메세지 설정
+		if (result.get("status").equals(GagaResponseStatus.SUCCESS.getCode())) {
+			result.set("message", message.getMessage("SUCC_0004"));
+		} else {
+			result.set("message", message.getMessage("FAIL_0004"));
+		}
+
+		return result;
+	}
 
 	/**
 	 * 마이페이지 등급쿠폰 다운 처리
@@ -1332,9 +1370,13 @@ public class TsfMypageController extends TsfBaseController {
 
 		if (StringUtils.isBlank(referer)) {
 			redirect = true;
-		} else if (!referer.contains("/mypage/customer/confirm/form")) {
+		}
+
+		if (!referer.contains("/mypage/customer/confirm/form")) {
 			redirect = true;
-		} else if (!"Y".equals(confirmYn)) {
+		}
+
+		if (!"Y".equals(confirmYn)) {
 			redirect = true;
 		}
 
@@ -1343,7 +1385,7 @@ public class TsfMypageController extends TsfBaseController {
 			return mav;
 		}
 
-		mav.addObject("bankList", rendererService.getCommonCodeList("G940", "Y"));
+		mav.addObject("bankList", rendererService.getCommonCodeList("G942", "Y"));
 
 		mav.setViewName(super.getDeviceViewName("mypage/MypageCustModifyForm"));
 		return mav;
@@ -1598,6 +1640,18 @@ public class TsfMypageController extends TsfBaseController {
 		return customerService.getCustomerDeliveryAddrList(custDeliveryAddr);
 	}
 
+	/**
+	 * 마이페이지 - 배송지 삭제
+	 *
+	 * @return Collection<CustDeliveryAddr>
+	 * @author jsshin
+	 * @since 2021. 04. 05
+	 */
+	@PostMapping("/customer/delivery/addr/delete")
+	@ResponseBody
+	public GagaMap deleteCustDeliveryAddr(@RequestBody CustDeliveryAddr custDeliveryAddr) {
+		return customerService.deleteCustDeliveryAddr(custDeliveryAddr);
+	}
 
 	/*신주승 끝*/
 }

src/main/java/com/style24/front/biz/web/TsfOrderController.java

@@ -84,9 +84,9 @@ public class TsfOrderController extends TsfBaseController {
 		
 		// TODO 임시 장바구니
 		// 2. 장바구니시퀀스 배열 등록 (장바구니 상품 정보 조회)
-		int[] arr = {11,77,8};
-		order.setCartSqArr(arr);		// 장바구니시퀀스
-		order.setShotDelvUseYn("Y");	// 장바구니총알배송사용여부
+		//int[] arr = {20,12};
+		//order.setCartSqArr(arr);		// 장바구니시퀀스
+		//order.setShotDelvUseYn("Y");	// 장바구니총알배송사용여부
 		
 		// 1.1 카트시퀀스가 정보가 없을때 처리 장바구니로 이동 
 		if (order.getCartSqArr() == null) {
@@ -113,11 +113,6 @@ public class TsfOrderController extends TsfBaseController {
 	@ResponseBody
 	public GagaMap updateCustomerAuth(@RequestBody Customer customer) {
 		GagaMap authInfo = niceCertify.getCertifyCellPhoneResultInfo(customer);
-		
-		//ModelAndView mav = new ModelAndView();
-		//mav.addObject("cellPhnno"	, authInfo.getString("sMobileNo"));
-		//mav.addObject("custNm"	, authInfo.getString("sName"));
-		
 		return authInfo;
 	}
 	
@@ -146,6 +141,10 @@ public class TsfOrderController extends TsfBaseController {
 		}
 		
 		// TODO
+		int[] arr = {1,2,158,150,149,159,148,153,20,12};
+		order.setCartSqArr(arr);		// 장바구니시퀀스
+		order.setShotDelvUseYn("Y");	// 장바구니총알배송사용여부
+		
 		// 1.1 카트시퀀스가 정보가 없을때 처리 장바구니로 이동 
 		if (order.getCartSqArr() == null) {
 			mav.setViewName("redirect:/cart/list/form");		// 비회원주문서화면
@@ -175,8 +174,6 @@ public class TsfOrderController extends TsfBaseController {
 		// 3.1 즉시할인, 다다익선 할인금액 정보 적용 정보
 		Collection<Order> tmtbGoodsApplyList = cartService.getMoreBetterAmtList(order);
 		
-		log.info("tmtbGoodsApplyList.size() ::: {} ", tmtbGoodsApplyList.size());
-		
 		// 3.2 배송정보조회(장바구니상품목록)
 		GagaMap delvOrderMap = coreOrderService.getCartDelvGoodsCntList(tmtbGoodsApplyList, order);
 		
@@ -356,6 +353,46 @@ public class TsfOrderController extends TsfBaseController {
 		return mav;
 	}
 	
+	/**
+	 * 배송정보조회
+	 *
+	 * @param
+	 * @return
+	 * @author jsh77b
+	 * @since 2021. 02. 17
+	 */
+	@ResponseBody
+	@PostMapping("/entryInfo")
+	public ModelAndView entryInfo(@RequestBody Order order) {
+		ModelAndView mav = new ModelAndView();
+		
+		mav.addObject("order"				, order);									// 파라미터
+		mav.addObject("isLogin"				, TsfSession.isLogin());					// 로그인여부
+		mav.setViewName(super.getDeviceViewName("order/OrderEntryInfo"));
+		
+		return mav;
+	}
+	
+	/**
+	 * 배송정보조회
+	 *
+	 * @param
+	 * @return
+	 * @author jsh77b
+	 * @since 2021. 02. 17
+	 */
+	@ResponseBody
+	@PostMapping("/madeInfo")
+	public ModelAndView madeInfo(@RequestBody Order order) {
+
+		ModelAndView mav = new ModelAndView();
+		mav.addObject("order"				, order);									// 파라미터
+		mav.addObject("isLogin"				, TsfSession.isLogin());					// 로그인여부
+		mav.setViewName(super.getDeviceViewName("order/OrderMadeInfo"));
+		
+		return mav;
+	}
+	
 	/**
 	 * 주문내역정보조회
 	 *
@@ -382,6 +419,7 @@ public class TsfOrderController extends TsfBaseController {
 		GagaMap delvOrderMap = coreOrderService.getCartDelvGoodsCntList(tmtbGoodsApplyList, order);
 				
 		ModelAndView mav = new ModelAndView();
+		mav.addObject("goodsTotCnt" 		, delvOrderMap.get("goodsTotCnt"));			// 총상품건수
 		mav.addObject("delvAllCartList" 	, delvOrderMap.get("delvAllCartList"));		// 전체배송목록
 		mav.addObject("delvFeeCdCnt" 		, delvOrderMap.get("delvFeeCdCnt"));		// 자사총알배송상품건수
 		mav.addObject("shotCnt" 			, delvOrderMap.get("shotCnt"));				// 자사총알배송상품건수

src/main/java/com/style24/front/biz/web/TsfPlanningController.java

@@ -3,6 +3,7 @@ package com.style24.front.biz.web;
 import java.util.Collection;
 import java.util.Map;
 
+import com.style24.front.biz.service.TsfCustomerService;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.mobile.device.Device;
@@ -61,6 +62,10 @@ public class TsfPlanningController extends TsfBaseController {
 
 	@Autowired
 	private TscCouponService coreCouponService;
+
+	@Autowired
+	private TsfCustomerService customerService;
+
 	/**
 	 * 기획전 메인 화면
 	 * @param cateNo - 카테고리번호
@@ -184,19 +189,6 @@ public class TsfPlanningController extends TsfBaseController {
 		plan.setTmplType("G082_52");
 		mav.addObject("goods4Info", planningService.getPlanGoodsDisplayList(plan));
 
-		if (planGb.equals("P")) {
-			// 다른기획전 보기 
-			mav.addObject("planList", planningService.getPlanningList(plan));
-			mav.addObject("listSize", planningService.getPlanningList(plan).size());
-		}
-		else{
-			// 다른이벤트 보기
-			mav.addObject("planList", planningService.getPlanEventList(plan));
-			mav.addObject("listSize", planningService.getPlanEventList(plan).size());
-		}
-		
-		
-//
 //		mav.addObject("couponList", planningService.getPlusCouponList(plan));
 //
 //		// 코너 목록
@@ -213,6 +205,25 @@ public class TsfPlanningController extends TsfBaseController {
 		mav.addObject("viewPage", "G037_40");
 		mav.addObject("popupPlanSq", plan.getPlanSq());
 		
+		if (planGb.equals("P")) {
+			// 다른기획전 보기 
+			mav.addObject("planList", planningService.getPlanningList(plan));
+			mav.addObject("listSize", planningService.getPlanningList(plan).size());
+		}
+		else if(planGb.equals("E")){
+			// 다른이벤트 보기
+			mav.addObject("planList", planningService.getPlanEventList(plan));
+			mav.addObject("listSize", planningService.getPlanEventList(plan).size());
+		}else if(planGb.equals("C")) {
+			// 출석체크 
+			mav.addObject("planList", planningService.getPlanEventList(plan));
+			mav.addObject("listSize", planningService.getPlanEventList(plan).size());
+			mav.addObject("month", planningService.getAttendMonth(planInfo));
+			mav.setViewName(super.getDeviceViewName("planning/PlanningEventAttendForm"));
+			return mav;
+		}
+		
+		
 		mav.setViewName(super.getDeviceViewName("planning/PlanningDetailForm"));
 		return mav;
 	}
@@ -441,4 +452,31 @@ public class TsfPlanningController extends TsfBaseController {
 		result.set("shotYn", planningService.getCustAddrShotConfirm(recipZipcode));
 		return result;
 	}
+
+	/**
+	 * 회원등급 혜택
+	 *
+	 * @return ModelAndView
+	 * @author jsshin
+	 * @since 2021. 04. 06
+	 */
+	@GetMapping("/event/custgrade/benefit/form")
+	public ModelAndView getCustGradeBenefitForm() {
+		ModelAndView mav = new ModelAndView();
+		boolean isLogin = TsfSession.isLogin();
+		mav.addObject("isLogin", isLogin);
+
+		if (isLogin) {
+			Customer customer = new Customer();
+			customer.setSiteCd(TscConstants.Site.STYLE24.value());
+			customer.setCustNo(TsfSession.getInfo().getCustNo());
+			customer.setCustStat(TscConstants.CustStat.ACTIVE.value());
+
+			mav.addObject("exptCustGrdeMap", customerService.getExpectedCustGrde(customer));
+			mav.addObject("customerInfo", coreCustomerService.getCustomerInfo(customer));
+		}
+
+		mav.setViewName(super.getDeviceViewName("planning/PlanningCustGradeBenefitForm"));
+		return mav;
+	}
 }

src/main/java/com/style24/persistence/domain/GoodsSafeNo.java

@@ -21,13 +21,13 @@ public class GoodsSafeNo extends TscBaseDomain {
 	private String certDiv;
 	private String certDt;
 
-	public boolean getIsCertNum() {
-		if (this.certNum.matches(".*[0-9].*")) {
-			return true;
-		} else {
-			return false;
-		}
-
-	}
+//	public boolean getIsCertNum() {
+//		if (this.certNum.matches(".*[0-9].*")) {
+//			return true;
+//		} else {
+//			return false;
+//		}
+//
+//	}
 
 }

src/main/java/com/style24/persistence/domain/GoodsStock.java

@@ -34,6 +34,7 @@ public class GoodsStock extends TscBaseDomain {
 	private int stockQty;			// 상품 재고
 	private String selfGoodsYn;		// 자사상품구분
 	private String optNm;			// 옵션명
+	private String goodsStat;		// 상품상태
 	private int minOrdQty;
 	private int maxOrdQty;
 	

src/main/java/com/style24/persistence/domain/Plan.java

@@ -244,6 +244,17 @@ public class Plan extends TscBaseDomain {
 	private String brandKnm;
 
 	private String sysImgNm;			// 상품 이미지
+	
+	private String sun;
+	private String mon;
+	private String tue;
+	private String wed;
+	private String thu;
+	private String fri;
+	private String sat;
+	
+	
+	
 	// Pagination
 	private TscPageRequest pageable;
 	private int pageNo = 1;

src/main/java/com/style24/persistence/mybatis/shop/TsfCart.xml

@@ -511,19 +511,20 @@
 		     , Z.BRAND_KNM
 			 , Z.SUPPLY_COMP_NM
 			 , Z.GOODS_QTY
+		     , Z.DELV_RES_DT
 			 , Z.GOODS_TYPE
 			 , Z.SUPPLY_COMP_CD
 			 , Z.DELV_FEE_CD
 		     , Z.MIN_ORD_AMT
 		     , Z.DELV_FEE
 			 , Z.CART_DELV_FEE_CD
-		     , Z.ORD_CAN_YN
+		     , CASE WHEN Z.ORD_CAN_YN = 'Y' AND Z.CUST_TODAY_ORD = 0 AND Z.NOCUST_TODAY_ORD = 0 THEN 'Y' ELSE 'N' END AS ORD_CAN_YN
 		     , Z.ORD_CAN_QTY
 		     , Z.MIN_ORD_QTY
 		     , Z.MAX_ORD_QTY
 			 , (Z.CURR_PRICE + SUM(Z.OPT_ADD_PRICE)) * Z.GOODS_QTY AS CURR_PRICE
 			 , (Z.LIST_PRICE + SUM(Z.OPT_ADD_PRICE)) * Z.GOODS_QTY AS LIST_PRICE
-			 , CASE WHEN Z.SOLDOUT_YN = 'N' AND Z.CUST_TODAY_ORD = 0 AND Z.NOCUST_TODAY_ORD = 0 THEN 'N' ELSE 'Y' END AS SOLDOUT_YN
+			 , Z.SOLDOUT_YN
 			 , CASE WHEN #{frontGb} = 'P' THEN (Z.CURR_PRICE * Z.GOODS_QTY) * (Z.PNT_PRATE/100)
 					ELSE (Z.CURR_PRICE * Z.GOODS_QTY) * (Z.PNT_MRATE/100) END AS SAVE_PNT_AMT
 			 , SYS_IMG_NM
@@ -540,7 +541,7 @@
 		             , G.GOODS_TYPE
 		             , G.GOODS_STAT
 		             , G.SUPPLY_COMP_CD
-		             , G.GOODS_NM
+		             , FN_GET_GOODS_NM(G.GOODS_NM,G.GOODS_GB,G.FOREIGN_BUY_YN,G.PARALLEL_IMPORT_YN,G.ORDER_MADE_YN) AS GOODS_NM
 		             , G.PNT_PRATE
 		             , G.PNT_MRATE
 		             , STOCK.SOLDOUT_YN
@@ -556,6 +557,7 @@
 		             , DFP.DELV_FEE
 		             , (SELECT SUPPLY_COMP_NM FROM TB_SUPPLY_COMPANY WHERE SUPPLY_COMP_CD = G.SUPPLY_COMP_CD) AS SUPPLY_COMP_NM
 		             , (SELECT GOODS_NM FROM TB_GOODS WHERE GOODS_CD = CD.ITEM_CD) AS ITEM_NM
+		             , (SELECT MIN(DATE_FORMAT(DELV_RES_DT,'%Y.%m.%d')) FROM TB_GOODS_RES_SELL WHERE GOODS_CD = G.GOODS_CD AND NOW() <![CDATA[ < ]]> DELV_RES_DT AND USE_YN = 'Y') AS DELV_RES_DT
 		             , CASE WHEN G.SELF_GOODS_YN = 'Y' THEN 'WMS'
 		                    ELSE DFP.DELV_FEE_CD END AS DELV_FEE_CD
 		             , CASE WHEN GQDS.GOODS_CD IS NULL AND G.SELF_GOODS_YN = 'Y' THEN 'SHOT'
@@ -685,29 +687,31 @@
 		        ORDER BY G.SUPPLY_COMP_CD ) Z
 		WHERE  1=1
 		GROUP  BY Z.CART_SQ
+		     , WISH_CNT
 		     , Z.GOODS_STAT
 		     , Z.GOODS_CD
 		     , Z.GOODS_QTY
+		     , Z.DELV_RES_DT
 		     , Z.GOODS_TYPE
 		     , Z.SUPPLY_COMP_CD
 		     , Z.GOODS_NM
 		     , Z.BRAND_ENM
 		     , Z.BRAND_KNM
-		     , Z.LIST_PRICE
+		     , LIST_PRICE
 		     , Z.SUPPLY_COMP_NM
 		     , Z.DELV_FEE_CD
 		     , Z.MIN_ORD_AMT
 		     , Z.DELV_FEE
 		     , Z.CART_DELV_FEE_CD
-		     , Z.CURR_PRICE
-		     , Z.ORD_CAN_YN
+		     , CURR_PRICE
+		     , ORD_CAN_YN
 		     , Z.ORD_CAN_QTY
 		     , Z.MIN_ORD_QTY
 		     , Z.MAX_ORD_QTY
 		     , Z.PNT_PRATE
 		     , Z.PNT_MRATE
 		     , SYS_IMG_NM
-		ORDER  BY Z.CART_DELV_FEE_CD DESC
+		ORDER  BY Z.DELV_FEE_CD DESC
 		     , Z.GOODS_CD DESC
 	</select>
 

src/main/java/com/style24/persistence/mybatis/shop/TsfCustomer.xml

@@ -568,4 +568,60 @@
 		WHERE  CUST_NO = #{custNo}
 	</update>
 
+	<!--고객등급 정책조회-->
+	<select id="getCustGradePolicy" parameterType="CustGrade" resultType="CustGrade">
+		/* TsfCustomer.getCustGradePolicy */
+		SELECT SITE_CD
+		     , GRADE_CD
+		     , FN_GET_CODE_NM('G110', GRADE_CD) AS GRADE_CD_NM
+		     , SUBSTRING(GRADE_CD, 6, 2) AS GRADE_CD_NO
+		     , ICON_NM
+		     , CAL_MONTHS
+		     , MIN_BUY_AMT
+		     , MIN_BUY_CNT
+		     , BUY_EXCEPT_AMT
+		     , GRADE_CPN_ID1
+		     , GRADE_CPN_ID2
+		     , GRADE_CPN_ID3
+		     , DISP_ORD
+		     , USE_YN
+		FROM  TB_CUST_GRADE_POLICY
+		WHERE SITE_CD = #{siteCd}
+		AND   USE_YN = 'Y'
+		ORDER BY GRADE_CD
+	</select>
+	
+	<!--고객 예상등급 조회-->
+	<select id="getExpectedCustGrde" parameterType="CustGrade" resultType="CustGrade">
+		/* TsfCustomer.getExpectedCustGrde */
+		SELECT B.ORD_NO_CNT
+		     , B.SUM_REAL_ORD_AMT
+		     , #{gradeCd}        AS GRADE_CD
+		     , FN_GET_CODE_NM('G110', #{gradeCd}) AS GRADE_CD_NM
+		     , SUBSTRING(#{gradeCd}, 6, 2)        AS GRADE_CD_NO
+		FROM  (
+		       SELECT COUNT(DISTINCT A.ORD_NO) AS ORD_NO_CNT
+		            , SUM(A.SUM_REAL_ORD_AMT)  AS SUM_REAL_ORD_AMT
+		       FROM (
+		              SELECT O.ORD_NO
+		                   , SUM(OD.REAL_ORD_AMT + OD.GFCD_USE_AMT) AS SUM_REAL_ORD_AMT
+		              FROM   TB_ORDER O
+		              INNER JOIN
+		                     TB_ORDER_DETAIL OD
+		              ON     O.ORD_NO = OD.ORD_NO
+		              INNER JOIN
+		                     TB_CUSTOMER C
+		              ON     O.CUST_NO = C.CUST_NO
+		              WHERE  OD.ORD_DTL_STAT = 'G013_70' /*구매확정*/
+		              AND    C.CUST_NO = #{custNo}
+		              AND    O.ORD_DT >= DATE_ADD(DATE_ADD(LAST_DAY(NOW()), INTERVAL 1 DAY), INTERVAL -#{calMonths} MONTH)
+		              AND    O.ORD_DT <![CDATA[<]]> DATE_ADD(LAST_DAY(NOW()), INTERVAL 1 DAY) /*익월 1일*/
+		              GROUP BY O.ORD_NO
+		              HAVING SUM(OD.REAL_ORD_AMT + OD.GFCD_USE_AMT) >= #{buyExceptAmt}
+		            ) A
+		       ) B
+		WHERE B.ORD_NO_CNT >= #{minBuyCnt}
+		OR    B.SUM_REAL_ORD_AMT >= #{minBuyAmt}
+	</select>
+
 </mapper>

src/main/java/com/style24/persistence/mybatis/shop/TsfGoods.xml

@@ -254,6 +254,7 @@
 		           , G.SELF_GOODS_YN
 		           , G.MIN_ORD_QTY
 		           , G.MAX_ORD_QTY
+		           , G.GOODS_STAT
 		           , O.OPT_CD1
 		           , SUM(CASE WHEN O.SOLDOUT_YN = 'Y' THEN 0
 		                      WHEN VS.CURR_STOCK_QTY  <![CDATA[<=]]> 0 THEN 0
@@ -539,7 +540,7 @@
 	<select id="getGoodsResSell" parameterType="Goods" resultType="Goods">
 		/* TsfGoods.getGoodsResSell */
 		SELECT GOODS_CD
-		     , DATE_FORMAT(DELV_RES_DT ,'%Y년 %m월 %d일') AS DELV_RES_DT
+		     , DATE_FORMAT(DELV_RES_DT ,'%Y.%m.%d') AS DELV_RES_DT
 		FROM TB_GOODS_RES_SELL
 		WHERE GOODS_CD = #{goodsCd}
 		AND DELV_RES_DT > NOW()

src/main/java/com/style24/persistence/mybatis/shop/TsfOrder.xml

@@ -192,6 +192,7 @@
 		   AND OD.ORD_DTL_STAT = #{ordDtlStat}
 			</if>
 		   AND O.DISP_YN = 'Y'
+		   AND OD.ORD_DTL_STAT <![CDATA[<>]]> 'G013_25'
 		   AND OD.ORD_QTY - OD.CNCL_RTN_QTY > 0
 		</where>
 				) Z
@@ -382,6 +383,9 @@
 		 INNER JOIN TB_ORDER_DETAIL OD
 		    ON OD.DELV_ADDR_SQ = DA.DELV_ADDR_SQ
 		   AND OD.ORD_NO = #{ordNo}
+		<if test="supplyCompCd != null and supplyCompCd != ''">
+		   AND OD.SUPPLY_COMP_CD = #{supplyCompCd}
+		</if>
 		<if test="ordDtlNoArr != null">
 		   AND OD.ORD_DTL_NO IN
 			<foreach collection="ordDtlNoArr" item="item" index="index"  open="(" close=")" separator=",">

src/main/java/com/style24/persistence/mybatis/shop/TsfOrderChange.xml

@@ -192,7 +192,7 @@
 		     , Z.ACCOUNT_NO
 		     , Z.ACCOUNT_NM
 		     , Z.RTN_DELV_FEE
-		     , Z.DELV_FEE
+		     , Z.EXC_DELV_FEE
 		  FROM (SELECT O.ORD_NO
 		             , DATE_FORMAT(O.ORD_DT, '%Y.%m.%d')                                      AS ORD_DT
 		             , OD.ORD_DTL_NO
@@ -239,7 +239,7 @@
 		             , CA.ACCOUNT_NO
 		             , IFNULL(CA.ACCOUNT_NM, O.ORD_NM)                                        AS ACCOUNT_NM
 		             , DFP.RTN_DELV_FEE
-		             , DFP.DELV_FEE
+		             , DFP.DELV_FEE + DFP.RTN_DELV_FEE                                        AS EXC_DELV_FEE
 		          FROM TB_ORDER O
 		         INNER JOIN TB_ORDER_DETAIL OD
 		            ON O.ORD_NO = OD.ORD_NO
@@ -291,7 +291,7 @@
 		        , Z.ORD_DTL_STAT, Z.ORD_QTY, Z.CNCL_RTN_QTY, Z.ORD_AMT, Z.REAL_ORD_AMT, Z.SAVE_PNT_AMT, Z.CNCL_RTN_AMT, Z.PNT_DC_AMT
 		        , Z.GFCD_USE_AMT, Z.SHIP_COMP_CD, Z.GIFT_PACK_YN, Z.SHIP_COMP_NM, Z.INVOICE_NO, Z.SUPPLY_COMP_CD, Z.DELV_FEE_CD
 		        , Z.SHOT_DELV_YN, Z.CHANGEABLE_YN, Z.SELF_GOODS_YN, Z.BRAND_NM, Z.ORD_REQ_CHG_QTY, Z.ORD_CAN_CHG_QTY, Z.BANK_CD
-		        , Z.ACCOUNT_NO, Z.ACCOUNT_NM, Z.RTN_DELV_FEE, Z.DELV_FEE
+		        , Z.ACCOUNT_NO, Z.ACCOUNT_NM, Z.RTN_DELV_FEE, Z.EXC_DELV_FEE
 		ORDER BY Z.ORD_DTL_NO
 	</select>
 	

src/main/java/com/style24/persistence/mybatis/shop/TsfPlanning.xml

@@ -388,7 +388,7 @@
 		               END                                  AS NEW_YN   /*신규여부(등록일기준3일)*/
 		             , TIMESTAMPDIFF(DAY,NOW(),P.DISP_EDDT) AS END_DAYS /*종료임박일수*/
 		        FROM   TB_PLAN P
-		        WHERE  P.PLAN_GB = 'E' /*이벤트*/
+		        WHERE  P.PLAN_GB IN ('E','C') /*이벤트,출석체크*/
 		        AND    P.SITE_CD = #{siteCd}
 		        <if test="frontGb != null and frontGb != ''">
 		        AND    P.FRONT_GB LIKE CONCAT('%',#{frontGb},'%')
@@ -1100,4 +1100,40 @@
 		WHERE 1=1 
 		AND ZIP_NO = #{recipZipcode}
 	</select>
+	
+	<!-- 달력 출력 -->
+	<select id="getAttendMonth" resultType="Plan" parameterType="Plan">
+		SELECT
+		      MIN(CASE WHEN WEEKDAY = '1' THEN DAY END ) AS 'sun'
+		      ,MIN(CASE WHEN WEEKDAY = '2' THEN DAY END )AS 'mon'
+		      ,MIN(CASE WHEN WEEKDAY = '3' THEN DAY END )AS 'tue'
+		      ,MIN(CASE WHEN WEEKDAY = '4' THEN DAY END )AS 'wed'
+		      ,MIN(CASE WHEN WEEKDAY = '5' THEN DAY END )AS 'thu'
+		      ,MIN(CASE WHEN WEEKDAY = '6' THEN DAY END )AS 'fri'
+		      ,MIN(CASE WHEN WEEKDAY = '7' THEN DAY END )AS 'sat'
+		FROM (
+		SELECT 
+				 CASE WHEN DAYOFWEEK(CDATE) = 1 THEN  WEEKOFYEAR(CDATE) +1 ELSE WEEKOFYEAR(CDATE) END AS WEEK
+				,DAYOFWEEK(CDATE) AS WEEKDAY
+				,DAYOFMONTH(CDATE) AS DAY
+		FROM (
+		        SELECT D1+D2 AS CDATE
+		        FROM (
+		               SELECT STR_TO_DATE(#{dispStdt},'%Y-%m-%d')D1
+		             )D1
+		             ,(
+		               SELECT 0 D2 UNION 
+		               SELECT 1 UNION SELECT 2 UNION SELECT 3 UNION
+		               SELECT 4 UNION SELECT 5 UNION SELECT 6 UNION SELECT 7 UNION
+		               SELECT 8 UNION SELECT 9 UNION SELECT 10 UNION SELECT 11 UNION
+		               SELECT 12 UNION SELECT 13 UNION SELECT 14 UNION SELECT 15 UNION
+		               SELECT 16 UNION SELECT 17 UNION SELECT 18 UNION SELECT 19 UNION
+		               SELECT 20 UNION SELECT 21 UNION SELECT 22 UNION SELECT 23 UNION
+		               SELECT 24 UNION SELECT 25 UNION SELECT 26 UNION SELECT 27 UNION
+		               SELECT 28 UNION SELECT 29 UNION SELECT 30 UNION SELECT 31
+		             )AS D2) AS TEMP
+		       WHERE TEMP.CDATE <![CDATA[<=]]> LAST_DAY(TEMP.CDATE)
+		)AS TEMP2
+		GROUP BY WEEK
+	</select>
 </mapper>

src/main/resources/config/application.yml

@@ -109,10 +109,8 @@ yes24 :
     unlinkUrl : https://wsyes24.yes24.com/Yes_Mem.asmx/Yes_Partner_Remove
 
 google :
-    # 개발정보
-    sitekey : 6LcY_JUaAAAAAIy1nHPE_lTkpIa51ihEd-waJCeO
-    secretKey : 6LcY_JUaAAAAAFux56mVih0a5NUwP3ARq0HUHR9p
-    # 개발정보
+    sitekey : 6LeZUp4aAAAAAAU-p4cZUfHvGJ_iFUkTUcT1MpKl
+    secretKey : 6LeZUp4aAAAAAD_0Tv4_Jc1lPeOFey604Z812QD-
     recaptchaVerifyUrl : https://www.google.com/recaptcha/api/siteverify
 
 

src/main/webapp/WEB-INF/views/mob/cart/CartListFormMob.html

@@ -1,17 +1,89 @@
 <!DOCTYPE html>
 <html lang="ko"
-	xmlns:th="http://www.thymeleaf.org"
-	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
-	layout:decorator="mob/common/layout/DefaultLayoutMob">
+	  xmlns:th="http://www.thymeleaf.org"
+	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+	  layout:decorator="mob/common/layout/SubLayoutMob">
+<!--
+ *******************************************************************************
+ * @source  : cartListFormMob
+ * @desc    : 장바구니
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.04.05   xodud1202   최초 작성
+ *******************************************************************************
+ -->
+<body>
+<th:block layout:fragment="content">
 
 
-<body>
+<script th:inline="javascript">
+	$(document).ready(function(){
+		// 1. 타이틀설정
+		$("#htopTitle").text("쇼핑백");
 
-<th:block layout:fragment="content">
+		//추천상품_슬라이드
+		var od_recommend_slide = new Swiper('.od_recommend .swiper-container', {
+			slidesPerView: 2,
+			spaceBetween: 8,
+			centerMode: true,
+		});
+
+		//배송요청사항
+		var my_deilivery_selecter = new sCombo('.my .ship_request .select_custom');
+
+		//옵션변경_팝업01
+		$(document).on("click", ".btn_option_pop01", function(){
+			$("#optModifyPop01 .popup_con").load("popup_optModify01.html");
+			$('#optModifyPop01').show().addClass("active");
+			$("body").css({"overflow":"hidden"});
+		});
 
+		//옵션변경_팝업02
+		$(document).on("click", ".btn_option_pop02", function(){
+			$("#optModifyPop02 .popup_con").load("popup_optModify02.html");
+			$('#optModifyPop02').show().addClass("active");
+			$("body").css({"overflow":"hidden"});
+		});
+
+		//다다익선 할인 대상_팝업
+		$(document).on("click", ".btn_moresale_pop", function(){
+			$("#moresalePop .popup_con").load("popup_moresale.html");
+			$('#moresalePop').show().addClass("active");
+			$("body").css({"overflow":"hidden"});
+		});
+
+		//배송비 SAVE_팝업
+		$(document).on("click", ".btn_popup_save", function(){
+			$("#dlvrSavePop .popup_con").load("popup_dlvrSave.html");
+			$('#dlvrSavePop').show().addClass("active");
+			$("body").css({"overflow":"hidden"});
+		});
+
+		//팝업_닫기
+		$('.popup_close').on("click",function(){
+			$('.popup_box').hide();
+			$('.popup_box').removeClass('active');
+			$("body").css({"overflow":"visible"});
+		});
+
+		//팝업 - 쿠폰사용안내
+		$(document).on('click','#btn_couponInfo_pop',function(e){
+			$("#couponInfoPop .modal-content").load("popup_couponInfo.html");
+			$("#couponInfoPop").modal("show");
+			return false;
+		});
+		$("#couponInfoPop_close").click(function() {
+			$("#couponInfoPop").modal("hide");
+		});
+
+	})
+</script>
 
 </th:block>
 
 </body>
-
 </html>

src/main/webapp/WEB-INF/views/mob/common/fragments/FooterMob.html

@@ -64,6 +64,46 @@
 			</div>
 		</section>
 	</footer>
+	
+	<!-- 배송지관리_팝업 -->
+	<div class="modal pop_full adrsChange_Pop" id="adrsChangePop" tabindex="-1" role="dialog" aria-labelledby="adrsChangeLabel" aria-hidden="true">
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+			</div>
+		</div>
+	</div>
+	<!-- //배송지관리_팝업 -->
+	
+	<!-- 배송지추가_팝업 -->
+	<div class="modal pop_full adrsAdd_pop" id="adrsAddPop" tabindex="-1" role="dialog" aria-labelledby="adrsAddLabel" aria-hidden="true">
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+			</div>
+		</div>
+		<a href="#close-modal" rel="modal:close" id="refundPop_close" class="close-modal">Close</a>
+	</div>
+	<!-- //배송지추가_팝업 -->
+	
+	<!-- 배송지수정_팝업 -->
+	<div class="modal pop_full adrsModify_pop" id="adrsModifyPop" tabindex="-1" role="dialog" aria-labelledby="adrsModifyLabel" aria-hidden="true">
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+			</div>
+		</div>
+		<a href="#close-modal" rel="modal:close" id="adrsAddPop_close" class="close-modal">Close</a>
+	</div>
+	<!-- //배송지수정_팝업 -->
+	
+	<!-- daum 우편번호_팝업 -->
+	<!-- 2021.04.02 다음우편번호 공통화 작업 -->
+	<!-- 다음우편번호 팝업 -->
+	<div class="modal pop_full couponModify_pop" id="daumZipcodePop" tabindex="-1" role="dialog" aria-labelledby="couponModifyLabel" aria-hidden="true" style="z-index:3000;">
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+				<div id="zipcode_layer"></div>
+			</div>
+		</div>
+	</div>
 
 <script th:inline="javascript">
 /*<![CDATA[*/
@@ -72,6 +112,99 @@
 /*]]>*/
 </script>
 
+<script th:inline="javascript">
+/*<![CDATA[*/
+var element_layer = document.getElementById('zipcode_layer');
+var cfnGetDaumRoadAddr = function(data) {
+	// 팝업에서 검색결과 항목을 클릭했을 때 실행할 코드를 작성하는 부분입니다.
+	// 예제를 참고하여 다양한 활용법을 확인해 보세요.
+	// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분
+
+	// 도로명 주소의 노출 규칙에 따라 주소를 조합한다.
+	// 내려오는 변수가 값이 없는 경우엔 공백('') 값을 가지므로, 이를 참고하여 분기한다.
+	let fullRoadAddr = data.roadAddress; // 도로명 주소 변수
+	let extraRoadAddr = ''; // 도로명 조합형 주소 변수
+
+	// 법정동명이 있을 경우 추가한다. (법정리는 제외)
+	// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
+	if (data.bname !== '' && /[동|로|가]$/g.test(data.bname)) {
+		extraRoadAddr += data.bname;
+	}
+
+	// 건물명이 있고, 공동주택일 경우 추가한다.
+	if (data.buildingName !== '' && data.apartment === 'Y') {
+		extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
+	}
+	
+	// 도로명, 지번 조합형 주소가 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
+	if (extraRoadAddr !== '') {
+		extraRoadAddr = ' (' + extraRoadAddr + ')';
+	}
+	
+	// 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가한다.
+	if (fullRoadAddr !== '') {
+		fullRoadAddr += extraRoadAddr;
+	}
+	
+	return fullRoadAddr;
+}
+
+var cfnOpenDaumAddr = function(daumZip) {
+	// 다은우편번호팝업 노출
+	$("#daumZipcodePop").modal("show");
+	
+	if ($('html').hasClass('is-ie')) {
+		daumZip.open();
+	} else {
+		daumZip.embed(element_layer);
+		
+		// iframe을 넣은 element를 보이게 한다.
+		element_layer.style.display = 'block';
+
+		// iframe을 넣은 element의 위치를 화면의 가운데로 이동시킨다.
+		cfnInitLayerPosition();
+	}
+}
+
+var cfnCloseDaumAddr = function() {
+	
+	// iframe을 넣은 element를 안보이게 한다.
+	element_layer.style.display = 'none';
+	
+	// 다음우편번호팝업 닫기
+	$("#daumZipcodePop").modal("hide");
+}
+
+// 브라우저의 크기 변경에 따라 레이어를 가운데로 이동시키고자 하실때에는
+// resize이벤트나, orientationchange이벤트를 이용하여 값이 변경될때마다 아래 함수를 실행 시켜 주시거나,
+// 직접 element_layer의 top,left값을 수정해 주시면 됩니다.
+var cfnInitLayerPosition = function() {
+	//let width = 420; //우편번호서비스가 들어갈 element의 width
+	//let height = 502; //우편번호서비스가 들어갈 element의 height
+	let borderWidth = 1; //샘플에서 사용하는 border의 두께
+
+	// 위에서 선언한 값들을 실제 element에 넣는다.
+	//element_layer.style.width = width + 'px';
+	//element_layer.style.height = height + 'px';
+	element_layer.style.border = borderWidth + 'px solid';
+	
+	// 실행되는 순간의 화면 너비와 높이 값을 가져와서 중앙에 뜰 수 있도록 위치를 계산한다.
+	/*
+	element_layer.style.left = (((window.innerWidth || document.documentElement.clientWidth) - width) / 2 - borderWidth) + 'px';
+	element_layer.style.top = (((window.innerHeight || document.documentElement.clientHeight) - height) / 2 - borderWidth) + 'px';
+	*/
+	
+	// 다음 레이어 적용
+	$("#__daum__layer_1").css("z-index", 3000);
+}
+
+// 다음우편번호팝업 닫기
+$("#daumZipcodePop_close").on("click", function(){
+	$("#daumZipcodePop").hide();
+});
+/*]]>*/
+</script>
+
 </th:block>
 
 </html>

src/main/webapp/WEB-INF/views/mob/common/fragments/HeadMob.html

@@ -61,6 +61,7 @@
 	<script src="/ux/plugins/jquery.serializeObject.min.js"></script>
 	<script src="/ux/plugins/mcxdialog/mcxdialog_ui.js"></script>
 	<script type="text/javascript" src="https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js"></script>
+	<script src="/ux/plugins/lazyload.min.js"></script>
 
 	<!-- Global site tag (gtag.js) - Google Analytics -->
 <!-- 	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-168660512-1"></script> -->
@@ -117,4 +118,4 @@
 	</script>
 </head>
 
-</html>
+</html>

src/main/webapp/WEB-INF/views/mob/common/layout/GoodsLayoutMob.html

@@ -20,7 +20,7 @@
 						<i class="gl3"></i>
 					</span>
 				</button>
-				<h1 id="htopTitle">PAGE TITLE</h1>
+				<h1 id="htopTitle">상품상세</h1>
 			</section>
 		</header>
 

src/main/webapp/WEB-INF/views/mob/goods/GoodsDetailQnaFormMob.html

@@ -14,342 +14,176 @@
  * 1.0  2021.04.04   eskim	   최초 작성
  *******************************************************************************
  -->
-	<!-- 상품문의 리스트 내용 -->
+<!-- 상품문의 리스트 내용 -->
 <div class="pd_qnalist">
-    <div class="info_txt">
-        <ul>
-            <li>상품에 대해 궁금한 점이 있으시다면 문의해주세요.</li>
-            <li>배송, 주문/결제, 취소/반품/교환/환불, 회원, 쿠폰/포인트, 이벤트 등의 자세한 문의사항은 고객센터 &gt; 1:1문의를 이용하여 주시기 바랍니다.</li>
-        </ul>              
-        <div class="btn_group_flex">
-            <div><button type="button" class="btn btn_default" onclick="cfnGoToPage(_PAGE_GOODS_QNA);"><span>고객센터 1:1문의</span></button></div>
-        </div>     
-    </div>
-    <div class="qna_list">
-        <!-- 나열조건결과 있을 때 노출 내용 -->
-        <div class="yesdata">
-            <div class="form_field check_secret">
-                <input id="except_secret" type="checkbox"><label for="except_secret"><span>비밀글제외</span></label>
-            </div>
-            <div class="ui_row">
-                <div class="foldGroup case2">
-                    <!-- list2 -->
-                    <ul>
-                        <li class="my_qna"><!-- 내가 쓴 글에 클래스 my_qna 추가 -->
-                            <div class="fold_head">
-                                <a href="javascript:void(0)">
-                                    <div>
-                                        <div class="fold_tit">
-                                            <div class="lap1">
-                                                <span class="fold_state done">답변완료</span> <!-- 답변완료 : done / 처리중 : doing -->
-                                                <span class="prod"><i class="ico ico_myqna"></i><i class="ico ico_secret"></i></span>
-                                            </div>
-                                            <div class="lap2"><span>상품을 받았는데, 옷의 색상이 화면과 다릅니다. </span></div>
-                                        </div>
-                                        <span class="id">**nana</span><span class="data">2020.12.02</span>
-                                    </div>
-                                </a>
-                            </div>
-                            <div class="fold_cont">
-                                <!-- 내 1대1문의 내용 -->
-                                <div class="fold_detail">
-                                    <div>
-                                        <p>
-                                            PC에서 남성 분또 맨투맨 (T203TS120P)<br>
-                                            오렌지 컬러 선물하려고 하는데 선물을 할 수 없다고 나오네요.<br>
-                                            다른 컬러는 선물이 가능한 것 같은데 오렌지 컬러는 왜 안 되는건가요?<br>
-                                            바쁘시겠지만 확인 부탁드립니다.
-                                        </p>
-                                    </div>
-                                </div>
-                                <!-- //내 1대1문의 내용 -->
-                                <!-- 내 1대1문의 답변 -->
-                                <div class="fold_answer">
-                                    <div>
-                                        <div class="answer_body">
-                                            안녕하세요, 고객님. 스타일24 담당자 배수지 입니다. <br>
-                                            문의주신 해당 상품의 선물하기는 모바일에서만 사용이 가능합니다. <br>
-                                            이외 궁금하신 사항이 있으시면 1:1문의나 고객센터(1544-5336)로 문의 부탁 드립니다. <br>
-                                            고객 만족을 위해 더욱 더 노력하는 스타일24가 되겠습니다. <br>
-                                            좋은 하루 보내세요, 감사합니다.
-                                        </div>
-                                        <div class="answer_foot">
-                                            <span class="id">**nana</span><span class="data">2020.12.02</span>
-                                            <button type="button" class="btn_delete"><span>삭제</span></button>
-                                        </div>
-                                    </div>
-                                </div>
-                                <!-- //내 1대1문의 답변 -->
-                            </div>
-                        </li>
-                        <li>
-                            <div class="fold_head">
-                                <a href="javascript:void(0)">
-                                    <div>
-                                        <div class="fold_tit">
-                                            <div class="lap1">
-                                                <span class="fold_state done">답변완료</span> <!-- 답변완료 : done / 처리중 : doing -->
-                                                <span class="prod"></span>
-                                            </div>
-                                            <div class="lap2"><span>상품을 받았는데, 옷의 색상이 화면과 다릅니다. </span></div>
-                                        </div>
-                                        <span class="id">**nana</span><span class="data">2020.12.02</span>
-                                    </div>
-                                </a>
-                            </div>
-                            <div class="fold_cont">
-                                <!-- 내 1대1문의 내용 -->
-                                <div class="fold_detail">
-                                    <div>
-                                        <p>
-                                            PC에서 남성 분또 맨투맨 (T203TS120P)<br>
-                                            오렌지 컬러 선물하려고 하는데 선물을 할 수 없다고 나오네요.<br>
-                                            다른 컬러는 선물이 가능한 것 같은데 오렌지 컬러는 왜 안 되는건가요?<br>
-                                            바쁘시겠지만 확인 부탁드립니다.
-                                        </p>
-                                    </div>
-                                </div>
-                                <!-- //내 1대1문의 내용 -->
-                                <!-- 내 1대1문의 답변 -->
-                                <div class="fold_answer">
-                                    <div>
-                                        <div class="answer_body">
-                                            안녕하세요, 고객님. 스타일24 담당자 배수지 입니다. <br>
-                                            문의주신 해당 상품의 선물하기는 모바일에서만 사용이 가능합니다. <br>
-                                            이외 궁금하신 사항이 있으시면 1:1문의나 고객센터(1544-5336)로 문의 부탁 드립니다. <br>
-                                            고객 만족을 위해 더욱 더 노력하는 스타일24가 되겠습니다. <br>
-                                            좋은 하루 보내세요, 감사합니다.
-                                        </div>
-                                        <div class="answer_foot">
-                                            <span class="id">**nana</span><span class="data">2020.12.02</span>
-                                            <button type="button" class="btn_delete"><span>삭제</span></button>
-                                        </div>
-                                    </div>
-                                </div>
-                                <!-- //내 1대1문의 답변 -->
-                            </div>
-                        </li>
-                        <li>
-                            <div class="fold_head">
-                                <a href="javascript:void(0)">
-                                    <div>
-                                        <div class="fold_tit">
-                                            <div class="lap1">
-                                                <span class="fold_state doing">처리중</span> <!-- 답변완료 : done / 처리중 : doing -->
-                                                <span class="prod"></span>
-                                            </div>
-                                            <div class="lap2"><span>상품을 받았는데, 옷의 색상이 화면과 다릅니다. </span></div>
-                                        </div>
-                                        <span class="id">**nana</span><span class="data">2020.12.02</span>
-                                    </div>
-                                </a>
-                            </div>
-                            <div class="fold_cont">
-                                <!-- 내 1대1문의 내용 -->
-                                <div class="fold_detail">
-                                    <div>
-                                        <p>
-                                            PC에서 남성 분또 맨투맨 (T203TS120P)<br>
-                                            오렌지 컬러 선물하려고 하는데 선물을 할 수 없다고 나오네요.<br>
-                                            다른 컬러는 선물이 가능한 것 같은데 오렌지 컬러는 왜 안 되는건가요?<br>
-                                            바쁘시겠지만 확인 부탁드립니다.
-                                        </p>
-                                    </div>
-                                </div>
-                                <!-- //내 1대1문의 내용 -->
-                            </div>
-                        </li>		
-                        <li>
-                            <div class="fold_head">
-                                <a href="javascript:void(0)">
-                                    <div>
-                                        <div class="fold_tit">
-                                            <div class="lap1">
-                                                <span class="fold_state doing">처리중</span> <!-- 답변완료 : done / 처리중 : doing -->
-                                                <span class="prod"></span>
-                                            </div>
-                                            <div class="lap2"><span>상품을 받았는데, 옷의 색상이 화면과 다릅니다. </span></div>
-                                        </div>
-                                        <span class="id">**nana</span><span class="data">2020.12.02</span>
-                                    </div>
-                                </a>
-                            </div>
-                            <div class="fold_cont">
-                                <!-- 내 1대1문의 내용 -->
-                                <div class="fold_detail">
-                                    <div>
-                                        <p>
-                                            PC에서 남성 분또 맨투맨 (T203TS120P)<br>
-                                            오렌지 컬러 선물하려고 하는데 선물을 할 수 없다고 나오네요.<br>
-                                            다른 컬러는 선물이 가능한 것 같은데 오렌지 컬러는 왜 안 되는건가요?<br>
-                                            바쁘시겠지만 확인 부탁드립니다.
-                                        </p>
-                                    </div>
-                                </div>
-                                <!-- //내 1대1문의 내용 -->
-                            </div>
-                        </li>	
-                        <li>
-                            <div class="fold_head">
-                                <a href="javascript:void(0)">
-                                    <div>
-                                        <div class="fold_tit">
-                                            <div class="lap1">
-                                                <span class="fold_state doing">처리중</span> <!-- 답변완료 : done / 처리중 : doing -->
-                                                <span class="prod"></span>
-                                            </div>
-                                            <div class="lap2"><span>상품을 받았는데, 옷의 색상이 화면과 다릅니다. </span></div>
-                                        </div>
-                                        <span class="id">**nana</span><span class="data">2020.12.02</span>
-                                    </div>
-                                </a>
-                            </div>
-                            <div class="fold_cont">
-                                <!-- 내 1대1문의 내용 -->
-                                <div class="fold_detail">
-                                    <div>
-                                        <p>
-                                            PC에서 남성 분또 맨투맨 (T203TS120P)<br>
-                                            오렌지 컬러 선물하려고 하는데 선물을 할 수 없다고 나오네요.<br>
-                                            다른 컬러는 선물이 가능한 것 같은데 오렌지 컬러는 왜 안 되는건가요?<br>
-                                            바쁘시겠지만 확인 부탁드립니다.
-                                        </p>
-                                    </div>
-                                </div>
-                                <!-- //내 1대1문의 내용 -->
-                            </div>
-                        </li>
-                        <li>
-                            <div class="fold_head">
-                                <a href="javascript:void(0)">
-                                    <div>
-                                        <div class="fold_tit">
-                                            <div class="lap1">
-                                                <span class="fold_state done">답변완료</span> <!-- 답변완료 : done / 처리중 : doing -->
-                                                <span class="prod"><i class="ico ico_secret"></i></span>
-                                            </div>
-                                            <div class="lap2"><span>비밀글입니다.</span></div>
-                                        </div>
-                                        <span class="id">**nana</span><span class="data">2020.12.02</span>
-                                    </div>
-                                </a>
-                            </div>
-                            <div class="fold_cont">
-                                <!-- 내 1대1문의 내용 -->
-                                <div class="fold_detail">
-                                    <div>
-                                        <p>
-                                            PC에서 남성 분또 맨투맨 (T203TS120P)<br>
-                                            오렌지 컬러 선물하려고 하는데 선물을 할 수 없다고 나오네요.<br>
-                                            다른 컬러는 선물이 가능한 것 같은데 오렌지 컬러는 왜 안 되는건가요?<br>
-                                            바쁘시겠지만 확인 부탁드립니다.
-                                        </p>
-                                    </div>
-                                </div>
-                                <!-- //내 1대1문의 내용 -->
-                            </div>
-                        </li>	
-                    </ul>
-                    <!-- //list2 -->
-                </div>
-            </div>
-        </div>
-        <!-- //나열조건결과 있을 때 노출 내용 -->
-        <!-- 나열조건결과 없을 때 노출 내용 -->
-        <div class="nodata">
-            <div class="txt_box">
-                <p>
-                    등록된 상품문의가 없습니다.
-                </p>
-            </div>
-        </div>
-        <!-- //나열조건결과 없을 때 노출 내용 -->
-    </div>
-    <div class="btn_group_flex">
-        <div><button type="button" class="btn btn_dark" id="btn_pdQnaWrite_pop" th:onclick="cfGoodsQngCreate([[${goodsInfo.goodsCd}]] )"><span>상품 문의하기</span></button></div>
-    </div>
+	<div class="info_txt">
+		<ul>
+			<li>상품에 대해 궁금한 점이 있으시다면 문의해주세요.</li>
+			<li>배송, 주문/결제, 취소/반품/교환/환불, 회원, 쿠폰/포인트, 이벤트 등의 자세한 문의사항은 고객센터 &gt; 1:1문의를 이용하여 주시기 바랍니다.</li>
+		</ul>			  
+		<div class="btn_group_flex">
+			<div><button type="button" class="btn btn_default" onclick="cfnGoToPage(_PAGE_GOODS_QNA);"><span>고객센터 1:1문의</span></button></div>
+		</div>	 
+	</div>
+	<div class="qna_list">
+		<!-- 나열조건결과 있을 때 노출 내용 -->
+		<div class="yesdata">
+			<div class="form_field check_secret">
+				<input id="except_secret" type="checkbox"><label for="except_secret" onclick="fnGetList();"><span>비밀글제외</span></label>
+				<input  type="hidden" name="secretYn" >
+			</div>
+			<div class="ui_row" id="infiniteContainer">
+				<div class="foldGroup case2" id="listBoxOuter">
+					<!-- list2 -->
+					<ul  id="listBox">
+					</ul>
+					<!-- //list2 -->
+				</div>
+			</div>
+		</div>
+		<!-- //나열조건결과 있을 때 노출 내용 -->
+		<!-- 나열조건결과 없을 때 노출 내용 -->
+		<div class="nodata"  style="display:none;">
+			<div class="txt_box">
+				<p>
+					등록된 상품문의가 없습니다.
+				</p>
+			</div>
+		</div>
+		<!-- //나열조건결과 없을 때 노출 내용 -->
+	</div>
+	<div class="btn_group_flex">
+		<div><button type="button" class="btn btn_dark" id="btn_pdQnaWrite_pop" th:onclick="cfGoodsQngCreate([[${goodsInfo.goodsCd}]] )"><span>상품 문의하기</span></button></div>
+	</div>
 </div>
+<form id="goodsQnaForm" name="goodsQnaForm" action="#" th:action="@{'/goods/qna/list'}">
+<input type="hidden" name="pageNo"  value ="1"/>
+<input type="hidden" name="pageSize" value ="20"/>
+<input type="hidden" name="relGoodsCd" th:value ="${goodsInfo.goodsCd}"/>
+</form>
+<script src="/ux/plugins/jquery/jquery.history.min.js"></script>
+<script src="/ux/plugins/gaga/gaga.infinite.scrollSession.js"></script>
 <script th:inline="javascript">
 /*<![CDATA[*/
 	
-	var fnGetList = function() {
-
+	// 상품 검색
+	var fnGetInfiniteScrollDataList = function(pageNum) {
+	
 		$('#goodsQnaForm  input[name="secretYn"]').val('');
 		if ($("#goodsQnaForm input:checkbox[name=except_secret]").is(':checked')){
 			$('#goodsQnaForm  input[name="secretYn"]').val('N');
 		}
-		// Initialize a pagination
-		gagaPaging.init('goodsQnaForm', fnGetListCallback, 'pageNav', 20);
-
-		// Load data
-		gagaPaging.load(1);
+		
+		$("#goodsQnaForm input[name=pageNo]").val(pageNum+1);
+		// 콜백함수인 gagaInfiniteScroll.jsonToHtml 에서는 fnDrawInfiniteScrollData 함수를 호출한다.
+		gagajf.ajaxFormSubmit("/goods/qna/list", document.goodsQnaForm,  gagaInfiniteScroll.jsonToHtml);
 	}
 	
-	var fnGetListCallback = function(result) {
-		$('#ulGoodsQna').html('');
-		$('#goodsQnaForm').find('.nodata').hide();
-		// 목록
+	var fnDrawInfiniteScrollData = function(result, pageNum){
+
 		if (result.dataList != null && result.dataList.length > 0) {
+			var htm = fnCreateGoodsQnaList(result);
+			gagaInfiniteScroll.draw(htm);
+		}else {
+			if($("#goodsQnaForm input[name=pageNo]").val()==1){
+				$('#goodsQnaForm').find('.nodata').show();
+			}
+			gagaInfiniteScroll.draw('not');
+		}
+	}
+
+	var fnGoodsQnaListSearch = function() {
+		gagaInfiniteScroll.getHistory();
+	}
+
+	var fnCreateGoodsQnaList = function(result) {
+
+		let tag = '';
+		$.each(result.dataList, function(idx, item) {
 			
-			$.each(result.dataList, function(idx, item) {
-				let tag = '<li class="';  // <!-- 내가 쓴 글에 클래스 my_qna 추가 -->
-				if (item.selfGb == 1){
-					tag += ' my_qna';	
-				}else if (item.secretYn == "Y"){
-					tag += ' secret_qna';
-				}
-				tag += ' ">\n';  // <!-- 내가 쓴 글에 클래스 my_qna 추가 -->
-				tag += '	<div class="fold_head">\n';
-				tag += '		<a href="javascript:void(0)">\n';
-				tag += '			<div>\n';
-				tag += '				<span class="fold_state ' + (item.ansStat == "G060_10" ? "doing" : "done") + '">' + item.ansStatNm + '</span>\n'; //답변완료 : done / 처리중 : doing
-				tag += '				<div class="fold_tit">\n';
-				tag += '					<span>' + item.questContent + '</span>\n';
-				if (item.selfGb == 1){
-				tag += '					<i class="ico ico_myqna"></i>\n';	//내가 쓴 글에 추가되는 아이콘
-				}
-				if (item.secretYn == "Y"){
-				tag += '					<i class="ico ico_secret"></i>\n';	//비밀글에 추가되는 아이콘
-				}
-				tag += '				</div>\n';
-				tag += '				<div class="data">\n';
-				tag += '					<span class="wr_id">'+ item.maskingCustId+'</span>\n';
-				tag += '					<span class="wr_data">' + item.questDt + '</span>\n';
-				tag += '				</div>\n';
-				tag += '			</div>\n';
-				tag += '		</a>\n';
-				tag += '	</div>\n';
-				tag += '	<div class="fold_cont" style="display: none;">\n';
-				tag += '		<div class="fold_detail">\n'; //문의 내용
-				tag += '			<div>\n';
-				tag += '				<p>' + item.questContent + '</p>\n';
+			tag += '<li class="';  // <!-- 내가 쓴 글에 클래스 my_qna 추가 -->
+			if (item.selfGb == 1){
+				tag += ' my_qna';	
+			}else if (item.secretYn == "Y"){
+				tag += ' secret_qna';
+			}
+			tag += ' ">\n';  // <!-- 내가 쓴 글에 클래스 my_qna 추가 -->
+			tag += '	<div class="fold_head">\n';
+			tag += '		<a href="javascript:void(0)">\n';
+			tag += '			<div>\n';
+			tag += '				<div class="fold_tit">\n';
+			tag += '					<div class="lap1">\n';
+			tag += '						<span class="fold_state ' + (item.ansStat == "G060_10" ? "doing" : "done") + '">' + item.ansStatNm + '</span>\n'; //답변완료 : done / 처리중 : doing
+			tag += '						<span class="prod">\n';
+			if (item.selfGb == 1){
+			tag += '						<i class="ico ico_myqna"></i>';	//내가 쓴 글에 추가되는 아이콘
+			}
+			if (item.secretYn == "Y"){
+			tag += '						<i class="ico ico_secret"></i>';	//비밀글에 추가되는 아이콘
+			}
+			tag += '						</span>\n';
+			tag += '					</div>\n';
+			tag += '					<div class="lap2"><span>' + item.questContent + '</span></div>\n';
+			tag += '					<span class="id">'+ item.maskingCustId+'</span><span class="data">' + item.questDt + '</span>\n';
+			tag += '				</div>\n';
+			tag += '			</div>\n';
+			tag += '		</a>\n';
+			tag += '	</div>\n';
+			tag += '	<div class="fold_cont">\n';
+			tag += '		<div class="fold_detail">\n'; //문의 내용
+			tag += '			<div>\n';
+			tag += '				<p>' + item.questContent.replaceAll("\n", "</br>") + '</p>\n';
+			tag += '			</div>\n';
+			tag += '		</div>\n';
+			
+			if (item.ansStat == 'G060_20') { // 답변완료 상태일 때
+				tag += '	<div class="fold_answer">\n'; //문의 답변
+				tag += '		<div>\n';
+				tag += '			<div class="answer_body">' + item.ansContent.replaceAll("\n", "</br>") + '</div>\n';
+				tag += '			<div class="answer_foot"><span class="data">' + item.ansDt + '</span>\n';
 				tag += '			</div>\n';
 				tag += '		</div>\n';
-				
-				if (item.ansStat == 'G060_20') { // 답변완료 상태일 때
-					tag += '	<div class="fold_answer">\n'; //문의 답변
-					tag += '		<div class="answer_head">답변이 등록되었습니다.</div>\n';
-					tag += '		<div class="answer_body">' + item.ansContent + '</div>\n';
-					tag += '		<span class="data">' + item.ansDt + '</span>\n';
-					tag += '	</div>\n';
-				}
-				
 				tag += '	</div>\n';
-				tag += '</li>\n';
-				
-				$('#ulGoodsQna').append(tag);
-			});
-		} else {
-			$('#goodsQnaForm').find('.nodata').show();
-			$('#goodsQnaForm').find('.ui_foot').hide();
-		}
+			}
+			tag += '	</div>\n';
+			tag += '</li>\n';
+			
+		});
+		
+		
+		return tag;
+	}
+	
 
-		// Create pagination
-		gagaPaging.createPagination(result.paging.pageable);
+	// 인피니트 스크롤 초기화
+	var fnGoodsQnaInfiniteScrollInit = function(){
+		 sessionStorage.removeItem(document.location.href);
+		//History 초기화
+		$("#listBox").html("");
 	}
 	
-	$(document).ready(function() {
-	//	fnGetList();
+	// 왜 안될가?
+	// 사파리 - event.persisted || 크롬 - window.performance.navigation.type 이 1이면 새로고침, 2면 페이지 이동을 통한 캐쉬페이징
+	$(window).on("pageshow", function(event) {
+		if ( (event.originalEvent && event.originalEvent.persisted) || (window.performance && window.performance.navigation.type == 2)) {
+			var historyData = sessionStorage.getItem(document.location.href);
+			if(historyData!=null){
+				historyData = JSON.parse(historyData);
+			}else{
+				historyData = {};
+			}
+			fnGoodsQnaListSearch();
+		}else{
+			fnGoodsQnaInfiniteScrollInit();
+			fnGoodsQnaListSearch();
+		}
+
+	});
+	
+	
+	$(document).ready( function() {
+		fnGoodsQnaListSearch();
+		
 	});
 	
 /*]]>*/

src/main/webapp/WEB-INF/views/mob/goods/GoodsIncludeFormWeb.html

@@ -0,0 +1,574 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : GoodsIncludeFormWeb.html
+ * @desc    : 상품상세 Include Page - 공용
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.03.02   eskim	   최초 작성
+ *******************************************************************************
+ -->
+<!-- 상품상세 SNS  -->
+<th:block  th:fragment="goodsSnsForm" >
+<!-- toggle contents -->
+<div class="shareWrap" th:with="stylelUrl=${@environment.getProperty('domain.front')}, imgGoodsUrl=${@environment.getProperty('upload.goods.view')}">
+	<div id="layerShare" class="setShare open">
+		<span>
+			<button type="button" class="kk" th:attr="onclick=|cfnSendToKakao('${stylelUrl+'/goods/detail/form?goodsCd='+goodsInfo.goodsCd}', '${goodsInfo.goodsFullNm}', '${imgGoodsUrl+ '/'+goodsInfo.sysImgNm}');|"><span>카카오톡</span></button>
+			<button type="button" class="fb" th:attr="onclick=|sendSns('facebook', '${stylelUrl+'/goods/detail/form?goodsCd='+goodsInfo.goodsCd}', '${goodsInfo.goodsFullNm}', '', '');|"><span>페이스북</span></button>
+			<button type="button" class="tw" th:attr="onclick=|sendSns('twitter', '${stylelUrl+'/goods/detail/form?goodsCd='+goodsInfo.goodsCd}', '${goodsInfo.goodsFullNm+ '#style24몰'}', '', '');|"><span>트위터</span></button>
+			<button type="button" class="url btn_copy"><span>URL</span></button>
+		</span>
+	</div>
+</div>
+
+</th:block>
+
+<!-- 딜 상품 상품소개영역 -->
+<th:block  th:fragment="goodsDealComposeForm">
+<!-- ***** 상품소개영역 ***** -->
+<div class="content pd_desc_wrap" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}">
+	<div class="cont_body">
+		<div class="item_descrp">
+			<div class="area_list">
+				<!-- 상품소개 탭 -->
+				<div class="tab_detail_nav">
+					<ul>
+						<li class="active"><a href="javascript:void(0)">상세정보</a></li>
+						<li><a href="javascript:void(0)">리뷰<em>(<th:block  th:text="${(goodsReviewCnt <= 9999) ? #numbers.formatInteger(goodsReviewCnt, 0,'COMMA')  : '9,999+'}"></th:block>)</em></a></li>
+						<li><a href="javascript:void(0)">문의<em>(<th:block  th:text="${(goodsQnaCnt <= 9999) ? #numbers.formatInteger(goodsQnaCnt, 0,'COMMA')  : '9,999+'}"></th:block>)</em></a></li>
+						<li><a href="javascript:void(0)">배송/교환/반품</em></a></li>
+					</ul>
+				</div>
+				<!-- //상품소개 탭 -->
+				<!-- 상품상세정보 -->
+				<div class="tab_detail_cont pd_dealitem" style="display:block;" >
+					<div class="itemsGrp" th:if="${goodsDealComposeList  != null and !goodsDealComposeList.empty}">
+						<!--  반복 -->
+						<div class="item_prod" th:each="goodsInfo, status : ${goodsDealComposeList}">
+							<div class="item_state">
+								<a href="javascript:void(0);" class="itemLink" th:onclick="fnOpenGoodsDealDetail([[${goodsInfo.goodsCd}]],[[${goodsInfo.compsGoodsCd}]])">
+									<div class="shape ranker">
+										<span>상품<em class="number" th:text="${#numbers.formatInteger(status.count,2)}">01</em></span>
+									</div>
+									<div class="itemPic">
+										<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
+									</div>
+									<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
+									<div class="itemName" th:text="${goodsInfo.goodsFullNm}">남성 </div>
+									<p class="itemPrice"><th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
+										<span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">149,000</span>
+										<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
+									</p>
+								</a>
+							</div>
+						</div>
+					</div>
+				</div>
+				<!-- //상품상세정보 -->
+				<!-- 상품리뷰 리스트 -->
+				<div class="tab_detail_cont pd_review">
+					<div class="cont_head">
+						<h3 class="sr-only">상품리뷰 목록</h3>
+						<!-- 아이템선택 -->
+						<div class="form_field">
+							<div class="select_custom deal_opt_item forReview">
+								<div class="combo">
+									<div class="select">
+										<div class="item_prod">
+											<div class="item_state">
+												<a href="javascript:void(0)" class="itemLink">
+													<div class="itemPic">
+														<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
+													</div>
+													<div class="itemName">선택</div>
+												</a>
+											</div>
+										</div>
+									</div>
+									<ul class="list" th:if="${goodsDealComposeList  != null and !goodsDealComposeList.empty}">
+										<li th:each="goodsInfo, status : ${goodsDealComposeList}" 
+											th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}"
+											th:onclick="fnSelGoodsDealReview([[${goodsInfo.compsGoodsCd}]])" >
+											<div class="item_prod">
+												<div class="item_state">
+													<a href="#none" class="itemLink">
+														<div class="itemPic">
+															<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
+														</div>
+														<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
+														<div class="itemName" th:text="${goodsInfo.goodsFullNm}">남성 </div>
+														<p class="itemPrice"><th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
+															<span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">149,000</span>
+															<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
+														</p>
+													</a>
+													<input type="hidden" name="selectGoods" th:value="${goodsInfo.compsGoodsCd}"  th:attr="currPrice=${goodsInfo.currPrice}, selfGoodsYn=${goodsInfo.selfGoodsYn}"/>
+												</div>
+											</div>
+										</li> 
+									</ul>
+								</div>
+							</div>
+						</div>
+						<!-- //아이템선택 -->
+					</div>
+					<div class="cont_body" id="goodsDealReview">
+					</div>
+				</div>
+				<!-- //상품리뷰 리스트 -->
+				<!-- 상품문의 리스트 -->
+				<div class="tab_detail_cont pd_qnalist">
+					<div class="cont_head">
+						<h3 class="sr-only">상품문의 목록</h3>
+						<!-- 아이템선택 -->
+						<div class="form_field">
+							<div class="select_custom deal_opt_item forQna">
+								<div class="combo">
+									<div class="select">
+										<div class="item_prod">
+											<div class="item_state">
+												<a href="javascript:void(0)" class="itemLink">
+													<div class="itemPic">
+														<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
+													</div>
+													<div class="itemName">선택</div>
+												</a>
+											</div>
+										</div>
+									</div>
+									<ul class="list" th:if="${goodsDealComposeList  != null and !goodsDealComposeList.empty}">
+										<li th:each="goodsInfo, status : ${goodsDealComposeList}" 
+											th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}"
+											th:onclick="fnSelGoodsDealQna([[${goodsInfo.compsGoodsCd}]])" >
+											<div class="item_prod">
+												<div class="item_state">
+													<a href="#none" class="itemLink">
+														<div class="itemPic">
+															<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
+														</div>
+														<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
+														<div class="itemName" th:text="${goodsInfo.goodsFullNm}">남성 </div>
+														<p class="itemPrice"><th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
+															<span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">149,000</span>
+															<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
+														</p>
+													</a>
+													<input type="hidden" name="selectGoods" th:value="${goodsInfo.compsGoodsCd}" />
+												</div>
+											</div>
+										</li> 
+									</ul>
+								</div>
+							</div>
+						</div>
+						<!-- //아이템선택 -->
+					</div>
+					<div class="cont_body" id="goodsDealQna">
+					</div>
+				</div>
+				<!-- //상품문의 리스트 -->
+				<!-- 배송/교환/반품 정보 -->
+				<div class="tab_detail_cont pd_delivery">
+					<div class="cont_head">
+						<h3 class="sr-only">배송/교환/반품 정보</h3>
+						<!-- 아이템선택 -->
+						<div class="form_field">
+							<div class="select_custom deal_opt_item forExinfo">
+								<div class="combo">
+									<div class="select">
+										<div class="item_prod">
+											<div class="item_state">
+												<a href="javascript:void(0)" class="itemLink">
+													<div class="itemPic">
+														<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
+													</div>
+													<div class="itemName">선택</div>
+												</a>
+											</div>
+										</div>
+									</div>
+									<ul class="list" th:if="${goodsDealComposeList  != null and !goodsDealComposeList.empty}">
+										<li th:each="goodsInfo, status : ${goodsDealComposeList}" 
+											th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}"
+											th:onclick="fnSelGoodsDealDelivery([[${goodsInfo.compsGoodsCd}]])" >
+											<div class="item_prod">
+												<div class="item_state">
+													<a href="#none" class="itemLink">
+														<div class="itemPic">
+															<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
+														</div>
+														<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
+														<div class="itemName" th:text="${goodsInfo.goodsFullNm}">남성 </div>
+														<p class="itemPrice"><th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
+															<span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">149,000</span>
+															<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
+														</p>
+													</a>
+													<input type="hidden" name="selectGoods" th:value="${goodsInfo.compsGoodsCd}" />
+												</div>
+											</div>
+										</li> 
+									</ul>
+								</div>
+							</div>
+						</div>
+						<!-- //아이템선택 -->
+					</div>
+					<div class="cont_body" id="goodsDealDelivery">
+					</div>
+				</div>
+				<!-- //배송/교환/반품 정보 -->
+			</div>
+			<div class="area_option">
+				<div class="opt_wrap">
+					<div class="option_box">
+						<div class="opt_select">
+								<div class="form_field">
+									<div class="select_custom deal_opt_item">
+										<div class="combo">
+											<div class="select">
+												<div class="item_prod">
+													<div class="item_state">
+														<a href="javascript:void(0)" class="itemLink">
+															<div class="itemPic">
+																<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
+															</div>
+															<div class="itemName">선택</div>
+														</a>
+													</div>
+												</div>
+											</div>
+											<ul class="list" th:if="${goodsDealComposeList  != null and !goodsDealComposeList.empty}">
+												<th:block th:each="goodsInfo, status : ${goodsDealComposeList}" th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}">
+												<li  th:onclick="fnOption1('Down', [[${goodsInfo.compsGoodsCd}]], [[${goodsInfo.currPrice}]] , [[${goodsInfo.selfGoodsYn}]]);"
+														th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90')? 'true':''}, data-soldout=${(goodsInfo.goodsStat != 'G008_90')? 'true':''}">
+													<div class="item_prod">
+														<div class="item_state">
+															<a href="javascript:void(0);" class="itemLink">
+																<div class="itemPic">
+																	<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
+																</div>
+																<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">NBA 키즈</p>
+																<div class="itemName" ><span class="tit_option" th:text="${'[상품'+status.count+']'}">[상품1]</span><th:block th:text="${goodsInfo.goodsFullNm}"></th:block></div>
+																<p class="itemPrice"><th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
+																	<span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">149,000</span>
+																	<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
+																</p>
+															</a>
+															<input type="hidden" name="selectGoods" th:attr="goodsNm=${'[상품'+status.count+']' +goodsInfo.goodsFullNm}, currPrice=${goodsInfo.currPrice}, goodsCd=${goodsInfo.compsGoodsCd}" />
+														</div>
+													</div>
+												</li>
+												</th:block> 
+											</ul>
+										</div>
+									</div>
+								</div>
+								<div class="form_field">
+									<div class="select_custom deal_opt1" disabled>
+										<div class="combo">
+											<div class="select">선택</div>
+											<ul class="list" id="goodsDealOptDown1">
+												<!--  옵션 1 -->
+											</ul>
+										</div>
+									</div>
+								</div>
+								<div class="form_field">
+									<div class="select_custom deal_opt2" disabled>
+										<div class="combo">
+											<div class="select">선택</div>
+											<ul class="list" id="goodsDealOptDown2">
+												<!--  옵션 2 -->
+											</ul>
+										</div>
+									</div>
+								</div>
+						</div>
+						<div class="opt_result">
+						</div>
+					</div>
+					<div class="price_box">
+						<p class="number">
+							총&nbsp;<span>0</span>개
+						</p>
+						<p class="price">
+							<span>
+								0<em>원</em>
+							</span>
+						</p>
+					</div>
+					<div class="btn_box">
+						<div class="btn_group_block ui_row">
+						<th:block  th:if="${goodsInfo.stockQty > 0}">
+							<div class="ui_col_6">
+								<button type="button" class="btn btn_dark btn_block" id="btnGoodsWish" onclick="fnAddCart('C');"><span>쇼핑백</span></button>
+							</div>
+							<div class="ui_col_6">
+								<button type="button" class="btn btn_primary btn_block" id="btnGoodsCart" onclick="fnAddCart('O');"><span>바로구매</span></button>
+							</div>
+						</th:block>
+						<th:block  th:unless="${goodsInfo.stockQty > 0}">
+							<div class="ui_col_12">
+								<button type="button" class="btn btn_dark btn_block" disabled=""><span>SOLD OUT</span></button>
+							</div>
+						</th:block>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<!-- **************** 개별상품 상세정보 팝업 **************** -->
+	<div class="pd_pop full_pop pd_descrp_pop" id="layer_goods_deal_detail">
+		<div class="full_popup_wrap" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}">
+			<h5 class="sr-only">개별상품 상세정보 안내</h5>
+			<div class="btn_close">
+				<a href="javascript:void(0)" onclick="fnCloseGoodsDealDetail();">닫기버튼</a>
+			</div>
+			<div class="full_pop_header">
+				<!-- 아이템선택 -->
+				<div class="form_field">
+					<div class="select_custom deal_opt_item">
+						<div class="combo">
+							<div class="select">
+								<div class="item_prod">
+										<div class="item_state">
+											<a href="javascript:void(0)" class="itemLink">
+												<div class="itemPic">
+													<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
+												</div>
+												<div class="itemName">선택</div>
+											</a>
+										</div>
+									</div>
+							</div>
+							<ul class="list" th:if="${goodsDealComposeList  != null and !goodsDealComposeList.empty}">
+								<li class="selected" th:each="goodsInfo, status : ${goodsDealComposeList}" th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}">
+									<div class="item_prod"  th:classappend="${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'soldout':'' }">
+										<div class="item_state">
+											<a href="javascript:void(0);" class="itemLink" th:onclick="fnGoodsDealDesc([[${goodsInfo.compsGoodsCd}]], [[${goodsInfo.currPrice}]], [[${goodsInfo.selfGoodsYn}]], [[${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'Y':'N' }]])">
+												<div class="itemPic">
+													<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
+												</div>
+												<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">NBA 키즈</p>
+												<div class="itemName" th:text="${goodsInfo.goodsFullNm}">유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>
+												<p class="itemPrice"><th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
+													<span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">149,000</span>
+													<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
+												</p>
+											</a>
+											<input type="hidden" name="selectGoods" th:value="${goodsInfo.compsGoodsCd}" th:attr="goodsNm=${'[상품'+status.count+']' +goodsInfo.goodsFullNm}, currPrice=${goodsInfo.currPrice}, goodsCd=${goodsInfo.compsGoodsCd}, selfGoodsYn=${goodsInfo.selfGoodsYn}"  />
+										</div>
+									</div>
+								</li> 
+							</ul>
+						</div>
+					</div>
+				</div>
+				<!-- //아이템선택 -->
+			</div>
+			<div class="full_pop_container" id="goodsDealDetail">
+				<!-- 개별상품 상세정보 팝업 내용 -->
+			</div>
+			<div class="full_pop_fix_r">
+				<div class="option_box">
+					<div class="opt_select">
+						<div class="form_field">
+							<div class="select_custom deal_opt1" disabled>
+								<div class="combo">
+									<div class="select">선택</div>
+									<ul class="list"  id="goodsDealOptLayer1">
+										<!--  옵션 1 -->
+									</ul>
+								</div>
+							</div>
+						</div>
+						<div class="form_field">
+							<div class="select_custom deal_opt2" disabled>
+								<div class="combo">
+									<div class="select">선택</div>
+									<ul class="list"  id="goodsDealOptLayer2">
+										<!--  옵션 2 -->
+									</ul>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="opt_result">
+					</div>
+				</div>
+				<div class="price_box">
+					<p class="number">
+						총&nbsp;<span>0</span>개
+					</p>
+					<p class="price">
+						<span>
+							0<em>원</em>
+						</span>
+					</p>
+				</div>
+				<div class="btn_box">
+					<div class="btn_group_block ui_row">
+					<th:block  th:if="${goodsInfo.stockQty > 0}">
+						<div class="ui_col_6">
+							<button type="button" class="btn btn_dark btn_block" id="btnGoodsWish" onclick="fnAddCart('C');"><span>쇼핑백</span></button>
+						</div>
+						<div class="ui_col_6">
+							<button type="button" class="btn btn_primary btn_block" id="btnGoodsCart" onclick="fnAddCart('O');"><span>바로구매</span></button>
+						</div>
+					</th:block>
+					<th:block  th:unless="${goodsInfo.stockQty > 0}">
+						<div class="ui_col_12">
+							<button type="button" class="btn btn_dark btn_block" disabled=""><span>SOLD OUT</span></button>
+						</div>
+					</th:block>
+					</div>
+				</div>
+			</div>
+		</div>
+				
+	</div>
+	<!-- **************** 개별상품 상세정보 팝업 **************** -->
+<script th:inline="javascript">
+/*<![CDATA[*/
+	
+	// 구성 상품 상세 상품평
+	var fnGoodsDetailReview = function(params) {
+		gagajf.ajaxSubmit("/goods/detail/review/frame", "html", "goodsDealReview", params);
+	}
+	
+	// 상품평 상품선택시
+	var fnSelGoodsDealReview = function(goodsCd){
+		var params = new Object();
+		params.goodsCd = goodsCd;
+		fnGoodsDetailReview(params);  // ajax html
+	}
+	
+	// 구성 상품 상세 문의
+	var fnGoodsDetailQna = function(params) {
+		gagajf.ajaxSubmit("/goods/detail/qna/frame", "html", "goodsDealQna", params);
+	}
+	
+	// 문의 상품선택시
+	var fnSelGoodsDealQna = function(goodsCd){
+		var params = new Object();
+		params.goodsCd = goodsCd;
+		fnGoodsDetailQna(params);  // ajax html
+	}
+	
+	// 구성 상품 상세 배송정보
+	var fnGoodsDetailDelivery = function(params) {
+		gagajf.ajaxSubmit("/goods/detail/delivery/frame", "html", "goodsDealDelivery", params);
+	}
+	
+	// 배송정보 상품선택시
+	var fnSelGoodsDealDelivery = function(goodsCd){
+		var params = new Object();
+		params.goodsCd = goodsCd;
+		fnGoodsDetailDelivery(params);  // ajax html
+	}
+	
+	// 상품선택시 상품상세내용 변경
+	var fnOpenGoodsDealDetail = function(goodsCd, compsGoodsCd){
+		
+		// 콤보박스 선택 처리
+		let $selObj = $('#layer_goods_deal_detail').find('.select_custom.deal_opt_item');
+		
+		// 탭별 선택시 기본 상품 설정
+		let selIdx = 0;
+		let selfGoodsYn = '';
+		let currPrice = 0;
+		let soldoutYn = "N";
+		$selObj.find('.combo .list li').each(function() { 
+			if ($(this).find('input[name=selectGoods]').val() == compsGoodsCd){
+				selfGoodsYn = $(this).find('input[name=selectGoods]').attr('selfGoodsYn');
+				currPrice = $(this).find('input[name=selectGoods]').attr('currPrice');
+				if ($(this).find('.item_prod').hasClass('soldout')) soldoutYn = "Y";
+				return false;
+			}
+			selIdx ++;
+		});
+		
+		$selObj.find('.combo .list li').eq(selIdx).trigger("click");
+		
+		// 상세노출
+		fnGoodsDealDesc(compsGoodsCd, currPrice, selfGoodsYn, soldoutYn);
+/* 		
+		if (!soldout){
+			// 옵션1 처리
+			fnOption1("layer", compsGoodsCd, currPrice, selfGoodsYn);	
+		}
+ */		
+		
+		let $obj = $('.pd_detail .opt_result'); 
+		let $taget = $('.full_pop_fix_r .opt_result');
+		$taget.html($obj.html());
+		
+		fnSetTotalPrice();
+		
+		$('body').addClass('lock');
+		$("#layer_goods_deal_detail").show(); 
+		
+	}
+	
+	// 상세 레이어 창닫기
+	var fnCloseGoodsDealDetail = function(){
+		// 선택값 본창에 넘기기
+		let $obj = $('.full_pop_fix_r .opt_result');
+		let $taget = $('.pd_detail .opt_result');
+		$taget.html($obj.html());
+		
+		fnSetTotalPrice();
+		
+		$('body').removeClass('lock');
+		$('#goodsDealDetail').html('');
+		$("#layer_goods_deal_detail").hide();
+	}
+	
+	// 구성 상품 상세 
+	var fnGoodsDealDetail2 = function(params) {
+		gagajf.ajaxSubmit("/goods/deal/detail/info/frame", "html", "goodsDealDetail", params);
+	}
+	
+	// 레이어에서 상품선택시
+	var fnGoodsDealDesc = function(goodsCd, currPrice, selfGoodsYn , soldout){
+		var params = new Object();
+		params.goodsCd = goodsCd;
+		params.adminYn = "Y";
+		fnGoodsDealDetail2(params);  // ajax html
+		if (soldout == "N"){
+			// 옵션1 처리
+			fnOption1("layer", goodsCd, currPrice, selfGoodsYn);
+		}
+		
+	}
+	
+	$(document).ready( function() {
+
+		/* var params = new Object();
+		params.goodsCd = [[${params.compsGoodsCd}]];
+		params.adminYn = [[${params.adminYn}]];
+		fnGoodsDealDetail(params);  // ajax html
+		
+		let $obj = $('.pd_detail .opt_result'); 
+		let $taget = $('.full_pop_fix_r .opt_result');
+		$taget.html($obj.html());
+		
+		fnSetTotalPrice(); */
+		
+	});
+	
+	
+/*]]>*/
+</script>
+</th:block>
+</html>

src/main/webapp/WEB-INF/views/mob/goods/GoodsOtherFormMob.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="ko"
+	xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : GoodsOtherFormMob.html
+ * @desc    : 상품 안내
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.04.05   eskim        최초 작성
+ *******************************************************************************
+ -->
+<th:block th:if="${goodsList != null and !goodsList.empty}" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}">
+	<h3 class="tit">
+	<th:block th:if="${params.goodsOtherGb =='tmtb'}" th:text="${'함께하면 할인되는 다다익선 상품'}"></th:block>
+	<th:block th:if="${params.goodsOtherGb =='together'}" th:text="${'이 상품과 함께 본 상품'}"></th:block>
+	<th:block th:if="${params.goodsOtherGb =='recommend'}" th:text="${params.brandGroupNm +' 추천상품'}"></th:block>
+	<th:block th:if="${params.goodsOtherGb =='like'}" th:text="${'이 상품과 비슷한 상품'}"></th:block>
+	</h3>
+	<div class="area_slider">
+		<div class="swiper-container swiper-container-initialized swiper-container-horizontal">
+			<div class="swiper-wrapper">
+				<div class="swiper-slide" th:each="goodsInfo, status : ${goodsList}">
+					<div class="item_prod">
+						<div class="item_state">
+							<button type="button" class="itemLike" th:classappend="${goodsInfo.wishYn == 'Y'}? 'active' : ''"  onclick="cfnPutWishList(this);" th:attr="goodsCd=${goodsInfo.goodsCd}, ithrCd=${params.ithrCd}, contentsLoc=${params.contentsLoc}, planDtlSq=''">관심상품 추가</button>
+							<a href="javascript:void(0);" onclick="cfnGoToGoodsDetail([[${goodsInfo.goodsCd}]], '',[[${params.ithrCd}]],'[[${params.contentsLoc}]]','','pc_detail');" class="itemLink" >
+								<div class="itemPic">
+									<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
+								</div>
+								<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
+								<div class="itemName" th:text="${goodsInfo.goodsFullNm}">남성 로고 자카드 방풍 패딩</div>
+								<p class="itemPrice">
+									<span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}"  th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">1,000,000</span>
+									<th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"></th:block>
+									<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
+								</p>
+							</a>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+<script th:inline="javascript">
+/*<![CDATA[*/
+
+	//슬라이드 - 함께하면 할인되는 다다익선 상품
+	var togetherItemSwiper = new Swiper('.pd .pd_together .area_slider .swiper-container', {
+		slidesPerView: 3,
+		spaceBetween: 8,
+	});  
+
+	//슬라이드 - 이 상품과 함께 본 상품 
+	var otherItemSwiper = new Swiper('.pd .pd_clickother .area_slider .swiper-container', {
+		slidesPerView: 2,
+		spaceBetween: 8,
+	});	
+	//슬라이드 - 동일브랜드 상품 추천
+	var rcmdItemSwiper = new Swiper('.pd .pd_samebrand .area_slider .swiper-container', {
+		slidesPerView: 3,
+		spaceBetween: 8,
+	}); 
+
+	//슬라이드 - 이 상품과 비슷한 상품 
+	var relateItemSwiper = new Swiper('.pd .pd_relate .area_slider .swiper-container', {
+		slidesPerView: 3,
+		spaceBetween: 8,
+	});	 
+	
+/*]]>*/
+</script>	
+
+</th:block>
+</html>

src/main/webapp/WEB-INF/views/mob/goods/GoodsQnaDetailFormMob.html

@@ -15,6 +15,8 @@
  *******************************************************************************
  -->
 <div class="modal-dialog" role="document">
+<form id="goodsQnaDetailForm" name="goodsQnaDetailForm" action="#" th:action="@{'/callcenter/goods/qna/create'}">
+		<input type="hidden" name="relGoodsCd" th:value ="${goodsCd}"/>
 	<div class="modal-content">
 		<div class="modal-header">
 			<h5 class="modal-title" id="exampleFullLabel">상품 문의하기</h5>
@@ -31,13 +33,13 @@
 				<div class="form_field">
 					<div class="input_box">
 						<div class="lap">
-							<textarea class="doc_itemqna" name="" id="" cols="30" rows="10" placeholder="문의내용 입력(500자 이내)" style="resize: none;"></textarea>
+							<textarea class="doc_itemqna"  name="questContent" cols="30" rows="10" placeholder="문의내용 입력(500자 이내)" style="resize: none;"></textarea>
 							<p class="txt_cnt">
-								<span id="itemqna_cnt" class="itemqna_cnt"><em class="c_primary">0</em>/500자</span>
+								<span id="itemqna_cnt" class="itemqna_cnt" ><em class="c_primary">0</em>/500자</span>
 							</p>   
 						</div>           
 						<div class="secret_box">
-							<input id="wr_secret" type="checkbox"><label for="wr_secret"><span>비밀글설정</span></label>
+							<input id="wr_secret" type="checkbox" name="secretYn" value="Y"><label for="wr_secret"><span>비밀글설정</span></label>
 						</div>
 					</div> 
 				</div>
@@ -47,11 +49,11 @@
 						<dd>
 							<div class="form_field">
 								<div>
-									<input type="radio" name="rdi-push" id="rdi-push1" value="" checked="">
+									<input type="radio" name="smsReqYn" id="rdi-push1" value="Y"  checked="checked">
 									<label for="rdi-push1"><span>수신</span></label>
 								</div>
 								<div>
-									<input type="radio" name="rdi-push" id="rdi-push2" value="">
+									<input type="radio" name="smsReqYn" id="rdi-push2" value="N">
 									<label for="rdi-push2"><span>미수신</span></label>
 								</div>
 							</div>
@@ -62,10 +64,11 @@
 		</div>	
 		<div class="modal-footer">
 			<div class="btn_group_flex">
-				<div><button type="button" class="btn btn_dark"><span>등록</span></button></div>
+				<div><button type="button" class="btn btn_dark"  onclick="fnGoodsQnaSave();"><span>등록</span></button></div>
 			</div>
 		</div>
 	</div>
+</form>	
 </div>
 <a href="javascript:void(0);" rel="modal:close" onclick="cfCloseLayer('layer_goods_qna_reg')" class="close-modal">Close</a> 	
 <script th:inline="javascript">
@@ -74,24 +77,24 @@
 	// 상품문의 작성 > 글자수 체크
 	$('.pd_qnawrite_pop .doc_itemqna').keyup(function (e){
 		let contentQna = $(this).val();
-		$('#itemqna_cnt').html("(<em class='c_primary'>"+contentQna.length+"</em>/500자)");  
+		$('.itemqna_cnt').html("(<em class='c_primary'>"+contentQna.length+"</em>/500자)");
+		
 		if (contentQna.length > 500){
 			alert("최대 500자까지 입력 가능합니다.");
 			$(this).val(contentQna.substring(0, 500));
-			$('#itemqna_cnt').html("(<em class='c_primary'>500</em>/500자)");
+			$('.itemqna_cnt').html("(<em class='c_primary'>500</em>/500자)");
 		}
 	});
 	
 	// 저장
-	$('#btnGoodsQnaSave').on('click', function() {
-		
-		// 테스트용
-/* 		gagajf.ajaxFormSubmit($('#goodsQnaDetailForm').prop('action')
+	var fnGoodsQnaSave = function() {
+		/*// 테스트용
+		 		gagajf.ajaxFormSubmit($('#goodsQnaDetailForm').prop('action')
 				, $('#goodsQnaDetailForm')
 				, function() {
 					mcxDialog.alert("상품 문의가 등록되었습니다. 빠른 시일 내에 답변드리겠습니다.");
 				}
-		); */
+		);*/ 
 		
 		// 입력 값 체크
 		if (gagajf.isNull($("#goodsQnaDetailForm  textarea[name=questContent]").val())){
@@ -111,8 +114,8 @@
 				);
 			}
 		});
-	
-	});
+		
+	}
 
 /*]]>*/
 </script>

src/main/webapp/WEB-INF/views/mob/goods/GoodsQnaFormMob.html

@@ -19,14 +19,14 @@
 		<div class="modal-header">
 			<!-- 해당상품 -->
 			<div class="item_blk">
-				<div class="item_prod">
+				<div class="item_prod" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}">
 					<div class="item_state">
-						<a href="#none" class="itemLink">
+						<a href="javascript:void(0);" class="itemLink">
 							<div class="itemPic">
-								<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">
+								<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
 							</div>
-							<p class="itemBrand">NBA</p>
-							<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+							<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">NBA</p>
+							<div class="itemName" th:text="${goodsInfo.goodsFullNm}">남성</div>
 						</a>
 					</div>
 				</div>
@@ -34,7 +34,6 @@
 			<!-- //해당상품 -->
 		</div>
 		<div class="modal-body" id="goodsDealQna">
-			
 		</div>
 		<div class="modal-footer">
 			
@@ -44,6 +43,7 @@
 <a href="javascript:void(0);" rel="modal:close" onclick="cfCloseLayer('layer_goods_qna')" class="close-modal">Close</a>
 <script th:inline="javascript">
 /*<![CDATA[*/
+	
 	// 구성 상품 상세 문의
 	var fnGoodsDetailQna = function(params) {
 		gagajf.ajaxSubmit("/goods/detail/qna/frame", "html", "goodsDealQna", params);

src/main/webapp/WEB-INF/views/mob/order/OrderCustemerInfoMob.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : OrderCustemerInfoMob.html
+ * @desc    : 고객정보 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.04.05   jsh77b     최초 작성
+ *******************************************************************************
+ -->
+<input type="hidden" name="custNm" 		th:value="${custemerInfo.custNm}"/>
+<input type="hidden" name="email" 		th:value="${custemerInfo.email}"/>
+<input type="hidden" name="cellPhnno" 	th:value="${custemerInfo.cellPhnno}"/>
+	
+<!-- 주문고객 -->
+<div class="foldGroup">
+	<ul>
+		<li class="fold_mbinfo">
+			<!-- 주문고객정보 -->
+			<div class="fold_head">
+				<a href="javascript:void(0)">
+					<div>
+						<div class="fold_tit">
+							<span>주문고객</span>
+						</div>
+						<div class="data">
+							<span th:text="${custemerInfo.custNm}"></span> 
+							<span th:text="${custemerInfo.cellPhnno}"></span>
+						</div>
+					</div>
+				</a>
+			</div>
+			<div class="fold_cont" style="display: none;">
+				<div class="area_mbinfo">
+					<dl>
+						<div>
+							<dt><span class="sr-only">주문자명</span></dt>
+							<dd th:text="${custemerInfo.custNm}"></dd>
+						</div>
+						<div>
+							<dt><span class="sr-only">이메일</span></dt>
+							<dd th:text="${custemerInfo.email}"></dd>
+						</div>
+						<div>
+							<dt><span class="sr-only">휴대폰 번호</span></dt>
+							<dd th:text="${custemerInfo.cellPhnno}"></dd>
+						</div>
+					</dl>
+				</div>
+			</div> <!-- //주문고객정보 -->
+		</li>
+	</ul>
+</div>
+<!-- //주문고객 -->
+
+<script th:inline="javascript">
+var dispYn = [[${order.dispYn}]]; // 노출여부
+
+//컨텐츠 호출
+$(document).ready( function() {
+	// 화면펼침
+	if (dispYn == "Y") {
+		$("#custemerInfo .fold_head").addClass("on");
+		$("#custemerInfo .fold_cont").css("display", "block");
+	}
+});
+</script>
+
+</html>

src/main/webapp/WEB-INF/views/mob/order/OrderDcAmtInfoMob.html

@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : OrderDcAmtInfoWeb.html
+ * @desc    : 할인혜택 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.02.01   jsh77b     최초 작성
+ *******************************************************************************
+ -->
+
+<!-- 할인/혜택 사용 -->
+<div class="foldGroup">
+	<ul>
+		<li>
+			<div class="fold_head">
+				<a href="javascript:void(0)">
+					<div>
+						<div class="fold_tit">
+							<span>할인/혜택 사용</span>
+						</div>
+						<div class="data maxdisc">
+							<div class="form_field">
+								<input id="chk-maxdisc" type="checkbox" checked="">
+								<label for="chk-maxdisc"><span>최대 할인혜택을 바로
+										적용하세요!</span><br>
+								<span class="maxdisc_amount">(<em>3,000</em>원 할인)
+								</span></label>
+							</div>
+						</div>
+					</div>
+				</a>
+			</div>
+			<div class="fold_cont">
+				<div class="area_seldiscount">
+					<dl>
+						<div>
+							<dt class="sr-only">할인혜택 바로 적용</dt>
+							<dd>
+								<div class="form_field">
+									<input id="chk-maxdisc01" type="checkbox" checked="">
+									<label for="chk-maxdisc01"><span>최대 할인혜택을 바로
+											적용하세요!</span>&nbsp;<span class="maxdisc_amount">(<em>3,000</em>원
+											할인)
+									</span></label>
+								</div>
+							</dd>
+						</div>
+						<div>
+							<dt>
+								할인쿠폰 <span class="maxdisc_amount">총&nbsp;<em>3,000</em>원
+									할인
+								</span>
+							</dt>
+							<dd>
+								<div class="sale_coupon_box">
+									<div>
+										<button type="button" id="btn_couponModify_pop"
+											class="btn btn_default btn_sm">
+											<span>쿠폰변경</span>
+										</button>
+									</div>
+									<div class="form_field">
+										<div class="input_wrap">
+											<input type="text" class="form_control" maxlength="13"
+												placeholder="할인코드를 입력해주세요.">
+											<button type="button" class="btn btn_dark btn_sm">
+												<span>적용</span>
+											</button>
+										</div>
+									</div>
+								</div>
+							</dd>
+						</div>
+						<div>
+							<dt>배송비 쿠폰</dt>
+							<dd>
+								<div class="dlvr_fee_box">
+									<div class="form_field">
+										<div class="select_custom coupon_list">
+											<!-- 비활성화시 disabled 추가 -->
+											<div class="combo">
+												<div class="select">
+													<div class="dlvr_coupon">
+														<p class="empty">선택</p>
+													</div>
+												</div>
+											</div>
+										</div>
+									</div>
+									<div class="form_field">
+										<div class="select_custom" disabled>
+											<div class="combo">
+												<div class="select">
+													<div class="dlvr_coupon">
+														<p class="empty">적용 가능한 쿠폰이 없습니다</p>
+													</div>
+												</div>
+												<ul class="list">
+													<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true"추가  -->
+													<li class="selected">
+														<div class="dlvr_coupon">
+															<p class="empty">적용 가능한 쿠폰이 없습니다</p>
+														</div>
+													</li>
+												</ul>
+											</div>
+										</div>
+									</div>
+								</div>
+							</dd>
+						</div>
+					</dl>
+				</div>
+				<div class="area_selpoint">
+					<dl>
+						<div>
+							<dt>선 포인트 사용</dt>
+							<dd>
+								<div class="form_field">
+									<div>
+										<input type="radio" name="rdi-beforpoint"
+											id="rdi-beforpoint1" value="" checked=""> <label
+											for="rdi-beforpoint1"><span>사용 안함</span></label>
+									</div>
+									<div>
+										<input type="radio" name="rdi-beforpoint"
+											id="rdi-beforpoint2" value=""> <label
+											for="rdi-beforpoint2"><span>사용함</span></label> <span
+											class="useable_point">(<em>1,500P</em>&nbsp;사용 가능)
+										</span>
+									</div>
+								</div>
+							</dd>
+						</div>
+						<div>
+							<dt>
+								STYLE24 포인트 <span>결제금액의 최대 40%까지 사용가능</span>
+							</dt>
+							<dd>
+								<div class="form_field">
+									<!-- 스타일 포인트 3만원 이상 결제시 노출 -->
+									<div class="input_wrap">
+										<input type="text" class="form_control" maxlength=""
+											placeholder="사용할 포인트를 입력해주세요.">
+										<button type="button" class="btn btn_dark btn_sm">
+											<span>적용</span>
+										</button>
+									</div>
+									<!-- 스타일 포인트 3만원 이상 결제시 노출 -->
+									<!-- 스타일 포인트 3만원 미만 결제시 노출 -->
+									<div class="input_wrap">
+										<input type="text" class="form_control" maxlength=""
+											placeholder="3만원 이상 결제시에만 포인트 사용이 가능합니다."
+											readonly="readonly" onfocus="this.blur();">
+										<button type="button" class="btn btn_dark btn_sm">
+											<span>적용</span>
+										</button>
+									</div>
+									<!-- //스타일 포인트 3만원 미만 결제시 노출 -->
+									<p>
+										<span class="remain_point">보유:&nbsp;<em>25,500</em>P
+										</span>
+									</p>
+								</div>
+							</dd>
+						</div>
+						<div>
+							<dt>상품권</dt>
+							<dd>
+								<div class="form_field">
+									<div class="input_wrap">
+										<input type="text" class="form_control" maxlength=""
+											placeholder="사용할 금액을 입력해주세요.">
+										<button type="button" class="btn btn_dark btn_sm">
+											<span>적용</span>
+										</button>
+									</div>
+									<p>
+										<span class="remain_point">보유:&nbsp;<em>25,500</em>원
+										</span>
+									</p>
+								</div>
+							</dd>
+						</div>
+					</dl>
+				</div>
+			</div>
+		</li>
+	</ul>
+</div>
+<!-- //할인/혜택 사용 -->
+
+<script th:inline="javascript">
+var dispYn = [[${order.dispYn}]]; // 노출여부
+
+//컨텐츠 호출
+$(document).ready( function() {
+	// 화면펼침
+	if (dispYn == "Y") {
+		$("#dcAmtInfo .fold_head").addClass("on");
+		$("#dcAmtInfo .fold_cont").show();
+	}
+	
+	//할인쿠폰(배송비) 선택
+    var od_dlvrfee_coupon_selecter = new sCombo('.od .odPayment .dlvr_fee_box .select_custom.coupon_list');
+});
+</script>
+</html>

src/main/webapp/WEB-INF/views/mob/order/OrderDeliveryAddrInfoMob.html

@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : OrderDeliveryAddrInfoMob.html
+ * @desc    : 배송정보 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.04.05   jsh77b     최초 작성
+ *******************************************************************************
+ -->
+<!-- 배송지정보 -->
+<input type="hidden" name="recipNm" 		th:value="${deliveryAddrInfo.recipNm}"/>
+<input type="hidden" name="recipPhnno" 		th:value="${deliveryAddrInfo.recipPhnno}"/>
+<input type="hidden" name="recipZipcode" 	th:value="${deliveryAddrInfo.recipZipcode}"/>
+<input type="hidden" name="recipBaseAddr" 	th:value="${deliveryAddrInfo.recipBaseAddr}"/>
+<input type="hidden" name="recipDtlAddr" 	th:value="${deliveryAddrInfo.recipDtlAddr}"/>
+<input type="hidden" name="delvMemo" 		th:value="${deliveryAddrInfo.delvMemo}"/>
+<input type="hidden" name="foreignBuyYn" 	th:value="${order.foreignBuyYn}"/>
+<input type="hidden" name="orderMadeYn" 	th:value="${order.orderMadeYn}"/>
+
+<div class="foldGroup shipfold">
+	<ul>
+		<li>
+			<div class="fold_head">
+				<a href="javascript:void(0)">
+					<div>
+						<div class="fold_tit"><span>배송지 정보</span></div>
+						<div class="data">
+							<span id="recipAddr" th:text="${deliveryAddrInfo.recipBaseAddr} + '   ' + ${deliveryAddrInfo.recipDtlAddr}"></span>
+						</div>
+					</div>
+				</a>
+			</div>
+			<div class="fold_cont">
+				<!-- 배송지 정보 변경가능 -->
+				<div class="ship_info ship_edit">
+					<button type="button" id="btn_adrsChange_pop" class="btn_popup">
+						<span>배송지 변경</span>
+					</button>
+					<dl>
+						<div class="company">
+							<dt><span class="sr-only">배송지명</span></dt>
+							<dd>
+								<th:block th:text="${deliveryAddrInfo.recipNm}"></th:block> 
+								<span class="icon_tag"> 
+									<th:block th:if="${deliveryAddrInfo.defaultYn} == 'Y'">
+										<em class="tag_stype1">기본배송지</em> 
+									</th:block>
+									<em class="tag_stype2 shotDelv">총알배송</em>
+								</span>
+							</dd>
+						</div>
+						<div class="phone">
+							<dt><span class="sr-only">휴대폰 번호</span></dt>
+							<dd th:text="${deliveryAddrInfo.recipPhnno}"></dd>
+						</div>
+						<div class="addr">
+							<dt><span class="sr-only">배송주소</span></dt>
+							<dd th:text="${deliveryAddrInfo.recipBaseAddr} + '    ' + ${deliveryAddrInfo.recipDtlAddr}"></dd>
+						</div>
+						
+						<div class="ship_request ship_select">
+							<span>배송요청 사항</span>
+							<div class="ship_option">
+								<div class="form_field">
+									<div class="select_custom delivery_list"> <!-- 비활성화시 disabled 추가 -->
+										<div class="combo">
+											<div class="select" th:text="${deliveryAddrInfo.delvMemo}">선택</div>
+											<ul class="list">
+												<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true"추가  -->
+												<li>문 앞</li> 
+												<li>직접 받고 부재 시 문 앞</li>
+												<li>경비실</li> 
+												<li>택배함</li>
+												<li class="select_etc">기타사항</li>
+											</ul>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="ship_etc">
+								<div class="form_text etc">
+									<input type="text" name="delvMemoText" placeholder="보관 장소만 입력 (필수)" maxlength="30" disabled>
+									<p class="desc_txt">보관 장소 외 다른 내용 입력시 통보 없이 삭제 될 수 있습니다.</p>
+								</div>
+							</div>
+						</div>
+					</dl>
+				</div>
+				<!-- //배송지 정보 변경가능 -->
+			</div>
+		</li>
+	</ul>
+</div>
+<!-- //배송지정보 -->
+
+<script th:inline="javascript">
+var dispYn = [[${order.dispYn}]]; // 노출여부
+var delvMemo = [[${deliveryAddrInfo.delvMemo}]]; // 노출여부
+
+//화면노출
+var deliveryAddrInfoDispYn = function(temp) {
+	if (temp == "Y") {
+		$("#deliveryAddrInfo .fold_head").addClass("on");
+		$("#deliveryAddrInfo .fold_cont").show();
+	} else {
+		$("#deliveryAddrInfo .fold_head").removeClass("on");
+		$("#deliveryAddrInfo .fold_cont").hide();
+	}
+}
+
+//컨텐츠 호출
+$(document).ready( function() {
+	var delvMemoArr = ["문 앞", "직접받고 부재시 문 앞", "경비실", "택배함"];
+	var tempMemo = true;
+	
+	$("#orderForm .ship_request .delivery_list li").removeClass("selected");
+	
+	// 배송요청사항설정
+	for (i=0 ; i<delvMemoArr.length ; i++) {
+		if (delvMemoArr[i] == delvMemo) {
+			tempMemo = false;
+		}
+	}
+
+	// 배송메모설정
+	$("#orderForm .ship_request .delivery_list li").each(function(){
+		if (delvMemo == $(this).text()) {
+			$(this).addClass("selected");
+		}
+	});
+	
+	if (tempMemo) {
+		$("#orderForm .ship_request .delivery_list .select").text("기타사항");
+		$("#orderForm input[name=delvMemoText]").attr("disabled", false);
+		$("#orderForm input[name=delvMemoText]").val(delvMemo);
+		$("#orderForm .delvMemo li").eq(4).addClass("selected");
+		$(".ship_etc").show();
+	}
+	
+	// 화면펼침
+	deliveryAddrInfoDispYn(dispYn);
+	
+	// 콤보박스 
+	var od_delivery_list = new sCombo('#orderForm .ship_select .select_custom.delivery_list');
+	
+	// 210405_배송요청 사항 기타사항 selected시 기타사항 input 구현
+	$("#orderForm .select_custom.delivery_list .combo .list > li").on("click", function(){
+		if ($("#orderForm .select_etc").hasClass("selected")){
+			$(".ship_etc").show();
+		} else {
+			$(".ship_etc").hide();
+		}
+	});
+});
+</script>
+
+</html>

src/main/webapp/WEB-INF/views/mob/order/OrderEntryInfoMob.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : OrderEntryInfoMob.html
+ * @desc    : 개인통관부호 정보 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.04.05   jsh77b     최초 작성
+ *******************************************************************************
+ -->
+ 
+ <!-- 개인통관부호 정보 -->
+<div class="foldGroup">
+	<ul>
+		<li>
+			<div class="fold_head">
+				<a href="javascript:void(0)">
+					<div>
+						<div class="fold_tit">
+							<span>개인통관고유부호</span>
+						</div>
+						<div class="data">
+							<span>P123456789</span>
+						</div>
+					</div>
+				</a>
+			</div>
+			<div class="fold_cont">
+				<div class="area_overseas">
+					<div class="info_txt">
+						<ul>
+							<li>물품가액이 $150 초과할 경우 관/부가세가 발생 할 수 있으며, 물품 종류와 해외공급자
+								관계없이 같은 날 입항하게 되면 합산과세 대상이 됩니다.</li>
+						</ul>
+					</div>
+					<div class="form_field">
+						<div>
+							<input type="radio" name="rdi-overseas" id="rdi-overs1" value="" checked=""> 
+							<label for="rdi-overs1"><span>받는사람 개인통관고유부호</span></label>
+						</div>
+						<div>
+							<input type="radio" name="rdi-overseas" id="rdi-overs2" value=""> 
+							<label for="rdi-overs2"><span>입력 안 함</span></label>
+						</div>
+						<div class="info_box overs1">
+							<div class="input_wrap">
+								<input type="text" class="form_control err" maxlength="13" placeholder="P로 시작하는 13자리">
+								<!-- 유효하지 않은 개인통관고유부호 일때 class명 'err' 추가 -->
+							</div>
+							<div class="t_err">개인통관고유부호가 유효하지 않습니다.</div>
+							<!-- 유효하지 않은 개인통관고유부호 일때 노출 -->
+							<div class="agree_overs">
+								<input id="chk-overs-agr" type="checkbox" checked="">
+								<label for="chk-overs-agr">
+									<span>위 정보는 원활한 통관을 위해 수집 및 판매자에게 제공하며,계속 사용하도록 안전하게 STYLE24에서 저장 / 관리 합니다.&nbsp;&nbsp;<em class="tmark_required">(필수)</em></span>
+								</label>
+							</div>
+							<div class="btn_group btn_group_flex">
+								<div>
+									<button type="button" class="btn btn_dark">입력완료</button>
+								</div>
+							</div>
+						</div>
+						<div class="info_box overs2" style="display: none;">
+							<div class="info_txt type2">
+								<ul>
+									<li>개인통관고유부호를 입력하지 않아도 관세사무소에서 개인정보 확인을 위해 별도 연락을 드릴
+										예정입니다.</li>
+								</ul>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</li>
+	</ul>
+</div>
+<!-- //개인통관부호 정보 -->
+
+<script th:inline="javascript">
+var dispYn = [[${order.dispYn}]]; // 노출여부
+
+//컨텐츠 호출
+$(document).ready( function() {
+	// 화면펼침
+	if (dispYn == "Y") {
+		$("#custemerInfo .fold_head").addClass("on");
+		$("#custemerInfo .fold_cont").css("display", "block");
+	}
+});
+</script>
+
+</html>

src/main/webapp/WEB-INF/views/mob/order/OrderFreegiftInfoMob.html

@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : OrderFormWeb.html
+ * @desc    : 주문/결제 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.02.01   jsh77b     최초 작성
+ *******************************************************************************
+ -->
+
+<th:block th:if="${freegiftList != null && #lists.size(freegiftList) > 0}">
+<div class="foldGroup">
+	<ul>
+		<li>
+			<div class="fold_head">
+				<a href="javascript:void(0)">
+					<div>
+						<div class="fold_tit">
+							<span>사은품</span>
+						</div>
+						<div class="data">
+							<span>사은품 총 <em class="total_gift">0</em>개 선택</span> 
+							<span><em class="total_deduct">0</em>P 차감</span>
+						</div>
+					</div>
+				</a>
+			</div>
+			<div class="fold_cont">
+				<div class="area_selgift">
+					<th:block th:each="freegift, i : ${freegiftList}">
+						<th:block th:if="${freegift.allYn} == 'Y'">
+							<div class="gift_box necessary_gift_box">
+						</th:block>
+						<th:block th:if="${freegift.allYn} == 'N'">
+							<div class="gift_box">
+						</th:block>
+							<p class="txt">
+								<th:block th:if="${freegift.allYn} == 'Y'">
+									<span th:text="|사은품필수 ${i.count}|"></span>
+								</th:block>
+								<th:block th:if="${freegift.allYn} == 'N'">
+									<span th:text="|사은품선택 ${i.count}|"></span>
+								</th:block>
+								<th:block th:text="${freegift.freegiftNm}"></th:block>
+							</p>
+							<div class="form_field">
+								<!-- 전체지급 사음품(필수) -->
+								<th:block th:if="${freegift.allYn} == 'Y'">
+									<th:block th:each="freegiftGoods, k : ${freegiftGoodsList}">
+										<th:block th:if="${freegift.freegiftSq} == ${freegiftGoods.freegiftSq}">
+											<div class="gift">
+												<input type="checkbox" th:name="'rdi-gift'+${i.count}" th:id="'rdi-gift'+${i.count}+${k.count}" class="chk_img freegiftRdo" th:value="${freegiftGoods.freegiftValSq}" usepoint="0" allYn="Y" checked onclick="return(false);">
+												<label for="rdi-gift11"> 
+													<span class="thumb"><img src="/images/pc/thumb/tmp_gift1.jpg" width="" alt=""></span>
+													<span class="name" th:text="${freegiftGoods.goodsNm}"></span> 
+													<span class="deduct">무료</span>
+												</label>
+											</div>
+										</th:block>
+									</th:block>
+								</th:block>
+								<!-- //전체지급 사음품(필수) -->
+								
+								<!-- 선택지급 사음품(선택) -->
+								<th:block th:if="${freegift.allYn} == 'N'">
+									<th:block th:each="freegiftGoods, k : ${freegiftGoodsList}">
+										<th:block th:if="${freegift.freegiftSq} == ${freegiftGoods.freegiftSq}">
+											<div class="gift">
+												<input type="radio" th:name="'rdi-gift'+${i.count}" th:id="'rdi-gift'+${i.count}+${k.count}" class="chk_img freegiftRdo" th:value="${freegiftGoods.freegiftValSq}" th:usepoint="${freegiftGoods.usePoint}" allYn="N">
+												<label for="rdi-gift1">
+													<span class="thumb"><img src="/images/pc/thumb/tmp_gift1.jpg" width="" alt=""></span>
+													<span class="name" th:text="${freegiftGoods.goodsNm}"></span> 
+													<span th:if="${freegiftGoods.usePoint} < 1" class="deduct" th:text="무료"></span>
+													<span th:if="${freegiftGoods.usePoint} > 0" class="deduct" th:text="|${#numbers.formatInteger(freegiftGoods.usePoint, 1, 'COMMA')} P|"></span>
+												</label>
+											</div>
+										
+										</th:block>
+									</th:block>
+									<div class="gift">
+										<input type="radio" th:name="'rdi-gift'+${i.count}" th:id="${i.count}+'0'" class="chk_img freegiftRdo" value="noSel" usepoint="0" allYn="N"> 
+										<label for="rdi-gift4">
+											<span class="thumb"><img src="/images/pc/thumb/tmp_gift_empty.jpg" width="" alt=""></span>
+											<span class="name">사은품 수령안함</span> <span class="deduct">수령거부</span>
+										</label>
+									</div>
+								</th:block>
+								<!-- //선택지급 사음품(선택) -->
+							</div>
+						</div>
+					</th:block>
+
+					<div class="form_field">
+						<div class="agree_gift">
+							<p>
+								<input id="chk-agree_gift" type="checkbox">
+								<labelfor="chk-agree_gift"><span>동의합니다</span></label>
+							</p>
+							<p class="txt">사은품 지금에 대한 내용을 확인하였으며, 이에 동의합니다.</p>
+							<button type="button" class="btn_link_popup" id="btn_infoGift_btn">
+								<span>보기</span>
+							</button>
+						</div>
+						<div class="agree_gift_con">
+							<p>제1장 총칙 제1조(목적) 본 약관은 정부24 (이하 "당 사이트")가 제공하는 모든 서비스(이하
+								"서비스")의 이용조건 및 절차, 이용자와 당 사이트의 권리, 의무, 책임사항과 기타 필요한 사항을 규정함을
+								제1장 총칙 제1조(목적) 본 약관은 정부24 (이하 "당 사이트")가 제공하는 모든 서비스(이하
+								"서비스")의 이용조건 및 절차, 이용자와 당 사이트의 권리, 의무, 책임사항과 기타 필요한 사항을 규정함을
+								제1장 총칙 제1조(목적) 본 약관은 정부24 (이하 "당 사이트")가 제공하는 모든 서비스(이하
+								"서비스")의 이용조건 및 절차, 이용자와 당 사이트의 권리, 의무, 책임사항과 기타 필요한 사항을 규정함을
+								제1장 총칙 제1조(목적) 본 약관은 정부24 (이하 "당 사이트")가 제공하는 모든 서비스(이하
+								"서비스")의 이용조건 및 절차, 이용자와 당 사이트의 권리, 의무, 책임사항과 기타 필요한 사항을 규정함을
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</li>
+	</ul>
+</div>
+
+<script th:inline="javascript">
+//할인관련정보 변수선언
+var freegiftApplyAmtList	= [[${freegiftApplyAmtList}]];		// 사은품장바구니목록
+var freegiftList			= [[${freegiftList}]];				// 사은품 프로모션 목록
+var freegiftGoodsList		= [[${freegiftGoodsList}]];			// 사은품 프로모션 상품 목록
+var dispYn 					= [[${order.dispYn}]]; 				// 노출여부
+
+var freegiftInfoDispYn = function(temp) {
+	if (temp == "Y") {
+		$("#freegiftInfo .fold_head").addClass("on");
+		$("#freegiftInfo .fold_cont").show();
+	} else {
+		$("#freegiftInfo .fold_head").removeClass("on");
+		$("#freegiftInfo .fold_cont").hide();
+	}
+}
+
+//컨텐츠 호출
+$(document).ready( function() {
+	// 사은품 화면 노출여부 체크
+	if (freegiftList.length == null || freegiftList.length < 1) {
+		$("#freegiftInfo").css("display", "none");
+	} else {
+		$("#freegiftInfo").css("display", "block");
+	}
+	
+	//사은품노출여부
+	freegiftInfoDispYn(dispYn);
+	
+	// 사은품시퀀스배열, 
+	var freegiftSqArr 		= [];
+	var freegiftGoodsArr 	= [];
+	
+	// 사은품 장바구니 상품 뿌리기
+	for (i=0 ; i<freegiftApplyAmtList.length ; i++) {
+		var obj = freegiftApplyAmtList[i];
+		freegiftSqArr.push(obj.freegiftSq);
+		freegiftGoodsArr.push(obj.goodsCd);
+	}
+	
+	$(".freegiftSqArr").text(freegiftSqArr);
+	$(".freegiftGoodsArr").text(freegiftGoodsArr);
+	
+});
+</script>
+</th:block>
+
+
+
+
+
+
+
+
+
+

src/main/webapp/WEB-INF/views/mob/order/OrderListInfoMob.html

@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : OrderCustemerInfoWeb.html
+ * @desc    : 고객정보 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.02.01   jsh77b     최초 작성
+ *******************************************************************************
+ -->
+<input type="hidden" name="delvFeeCdCnt" th:value="${delvFeeCdCnt}"/>
+<input type="hidden" name="shotCnt" th:value="${shotCnt}"/>
+<input type="hidden" name="wmsCnt" 	th:value="${wmsCnt}"/>
+
+<div class="foldGroup">
+	<ul>
+		<li class="fold_mbinfo">
+			<div class="fold_head">
+				<a href="javascript:void(0)">
+					<div>
+						<div class="fold_tit"><span>주문내역</span></div>
+						<div class="data"><em class="c_primary" th:text="${goodsTotCnt}"></em>개의 상품</div>
+					</div>
+				</a>
+			</div>
+			<div class="fold_cont" style="display: none;">
+				<div class="od_item_box">	
+					<th:block th:each="delvAllCart, i : ${delvAllCartList}">
+						<th:block th:if="${delvAllCart != null and #lists.size(delvAllCart) > 0}">
+							<div class="part_goods">
+								<th:block th:if="${i.index} == 0">
+									<th:block th:if="${delvAllCart != null and #lists.size(delvAllCart) > 0}">
+										<div class="goods_top">
+											<div class="goods_date">STYLE24 총알배송<span class="date">오늘 자정까지 도착</span></div>
+										</div>
+									</th:block>
+								</th:block>
+								<th:block th:if="${i.index} == 1">
+									<th:block th:if="${delvAllCart != null and #lists.size(delvAllCart) > 0}">
+										<div class="goods_top">
+											<div class="goods_date">STYLE24 일반배송</div>
+										</div>
+									</th:block>
+								</th:block>
+								<th:block th:if="${i.index} == 2">
+									<th:block th:if="${delvAllCart != null and #lists.size(delvAllCart) > 0}">
+										<div class="goods_top">
+											<div class="goods_date">업체직배송</div>
+										</div>
+									</th:block>
+								</th:block>
+								<th:block th:if="${i.index} == 3">
+									<th:block th:if="${delvAllCart != null and #lists.size(delvAllCart) > 0}">
+										<div class="goods_top">
+											<div class="goods_date">예약배송</div>
+										</div>
+									</th:block>
+								</th:block>
+								<!-- 주문 접수 -->
+								<th:block th:each="goods, i : ${delvAllCart}">
+									<div class="goods_section">
+										<div class="goods_detail">
+											<a href="">
+												<div class="thumb_box">
+													<img src="/images/mo/thumb/tmp_pdClickother1.jpg" alt="tmp_pdClickother1">
+												</div>
+												<div class="info_box">
+													<div class="od_name">
+														<div class="brand"><span th:text="${goods.brandEnm} + ' ' + ${goods.brandKnm}"></span></div>
+														<div class="name" th:text="${goods.goodsNm}"></div>
+													</div>
+													<div class="od_opt" >
+														<div class="option" th:each="colorNm, index : ${goods.colorNmArr}">
+															<em th:text="${colorNm}"></em>
+															<em th:text="${goods.optCd2Arr[index.index]}"></em>
+														</div>
+													</div>
+													<div class="od_point">
+														<p class="point"><span th:text="${#numbers.formatInteger(goods.savePntAmt, 1, 'COMMA')}"></span>P 적립예정</p>
+													</div>
+												</div>
+											</a>
+										</div>
+										<div class="od_calc">
+											<p class="count">수량 <em th:text="${goods.goodsQty}"></em>개</p>
+											<p class="price">
+												<!-- 다다익선할인금액없으면 즉시할인가 까지만 표현 -->
+												<th:block th:if="${goods.tmtbDcAmt} < 1">
+													<span class="selling_price"><em th:text="${#numbers.formatInteger((goods.currPrice + goods.optAddPrice) * goods.goodsQty, 1, 'COMMA')}"></em>원</span>
+												</th:block>
+												<!-- 다다익선할인금액있으면 즉시할인가, 다다익선할인가 표현 -->
+												<th:block th:if="${goods.tmtbDcAmt} > 0">
+													<span class="sale_price"><del><em th:text="${#numbers.formatInteger((goods.currPrice + goods.optAddPrice) * goods.goodsQty, 1, 'COMMA')}"></em>원</del></span>
+													<span class="selling_price"><em th:text="${#numbers.formatInteger(goods.tmtbDcAmt, 1, 'COMMA')}"></em>원</span>
+												</th:block>
+
+											</p>
+										</div>
+										<th:block th:if="${goods.delvResDt}">
+											<p class="info_reserv">
+												<i class="ico ico_calender"></i><span th:text="${goods.delvResDt}"></span> 배송예정상품
+											</p>
+										</th:block>
+									</div>
+								</th:block>
+							</div>
+						</div>
+					</th:block>
+				</th:block>
+				
+				<div class="od_amount_box">
+					<dl>
+						<div>
+							<dt>상품금액</dt>
+							<dd><em id="orgGoodsSumAmt"></em>원</dd>
+						</div>
+						<div>
+							<dt>배송비</dt>
+							<dd><em id="delvSumAmt"></em>원</dd>
+						</div>
+						<div>
+							<dt>상품할인(즉시할인)</dt>
+							<dd>
+								<span class="disc_amount"><em id="cpn1DcSumAmt"></em>원</span>
+							</dd>
+						</div>
+						<div>
+							<dt>다다익선할인</dt>
+							<dd>
+								<span class="disc_amount"><em id="tmtbDcSumAmt"></em>원</span>
+							</dd>
+						</div>
+						<div>
+							<dt>쿠폰할인</dt>
+							<dd>
+								<span class="disc_amount"><em id="couponDcSumAmt"></em>원</span>
+							</dd>
+						</div>
+						<div>
+							<dt>선포인트 사용</dt>
+							<dd>
+								<span class="disc_amount"><em id="prePntDcAmt"></em>P</span>
+							</dd>
+						</div>
+						<div>
+							<dt>포인트 사용</dt>
+							<dd>
+								<span class="disc_amount"><em id="pntDcAmt"></em>P</span>
+							</dd>
+						</div>
+						<div>
+							<dt>상품권 사용</dt>
+							<dd>
+								<span class="disc_amount"><em id="gfcdUseAmt"></em>원</span>
+							</dd>
+						</div>
+					</dl>
+				</div>
+				<div class="totalprice_box">
+					<dl>
+						<dt>총 결제 예정 금액</dt>
+						<dd data-weight="price" data-font="lato"><span id="savePntSumAmt"></span>원</dd>
+					</dl>
+					<p class="info_point"><span class="save_point" id="savePntSumAmt">P</span> 적립예정
+					</p>
+					<p class="info_delivery">총 <span id="delvFeeCdCnt" th:text="${delvFeeCdCnt}"></span>건으로 나뉘어 배송 예정</p>
+				</div>
+			</div> 
+		</li>
+	</ul>
+</div>

src/main/webapp/WEB-INF/views/mob/order/OrderMadeInfoMob.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : OrderMadeInfoMob.html
+ * @desc    : 주문제작상품동의여부 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.04.05   jsh77b     최초 작성
+ *******************************************************************************
+ -->
+<!-- 주문제작상품동의여부 -->
+<div class="foldGroup">
+	<ul>
+		<li>
+			<div class="fold_head">
+				<a href="javascript:void(0)">
+					<div>
+						<div class="fold_tit">
+							<span>주문제작상품동의</span>
+						</div>
+						<div class="data custom_disc">
+							<div class="form_field">
+								<input id="chk-custom" type="checkbox" checked=""> <label
+									for="chk-custom"><span>동의합니다.</span></label>
+							</div>
+						</div>
+					</div>
+				</a>
+			</div>
+			<div class="fold_cont">
+				<div class="area_customitem">
+					<p>고객님께서 주문하신 상품에는 주문제작상품이 포함되어 있습니다.</p>
+					<div class="form_field">
+						<div class="agree_custom">
+							<input id="chk-custom-agr1" type="checkbox" checked="">
+							<label for="chk-custom-agr1"><span>주문제작상품에 대한
+									안내를 확인하였으며 배송에 동의합니다.</span></label>
+						</div>
+					</div>
+					<div class="info_txt">
+						<ul>
+							<li>주문 제작 상품은 주문 후 제작이 진행되며, 제작 완료 후 배송이 시작됩니다.</li>
+							<li>주문 제작 상품의 특성상 주문 완료 후 취소/교환이 불가능합니다. (상품 하자에 한해 가능)</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+		</li>
+	</ul>
+</div>
+<!-- //주문제작상품동의여부 -->
+				
+<script th:inline="javascript">
+var dispYn = [[${order.dispYn}]]; // 노출여부
+
+//컨텐츠 호출
+$(document).ready( function() {
+	// 화면펼침
+	if (dispYn == "Y") {
+		$("#custemerInfo .fold_head").addClass("on");
+		$("#custemerInfo .fold_cont").css("display", "block");
+	}
+});
+</script>
+
+</html>

src/main/webapp/WEB-INF/views/mob/order/OrderPaymentInfoMob.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : OrderPaymentInfoWeb.html
+ * @desc    : 결제정보 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.02.01   jsh77b     최초 작성
+ *******************************************************************************
+ -->
+<!-- 결제수단 선택 -->
+<div class="foldGroup">
+	<ul>
+		<li>
+			<div class="fold_head">
+				<a href="javascript:void(0)">
+					<div>
+						<div class="fold_tit">
+							<span>결제수단</span>
+						</div>
+						<div class="data">
+							<span>신용카드</span>
+						</div>
+					</div>
+				</a>
+			</div>
+			<div class="fold_cont">
+				<div class="area_paymethod">
+					<div class="paymethod_box">
+						<div class="form_field">
+							<ul class="sel_method">
+								<li><input type="radio" name="rdi-paynormal"
+									id="payCreditCard" value=""> <label
+									for="payCreditCard"><span>신용카드</span></label></li>
+								<li><input type="radio" name="rdi-paynormal"
+									id="payKakao" value=""> <label for="payKakao"><span><em
+											class="sr-only">카카오페이 결제</em><em class="payimg kakao"></em></span></label>
+								</li>
+								<li><input type="radio" name="rdi-paynormal"
+									id="payRealBank" value=""> <label for="payRealBank"><span>실시간계좌이체</span></label>
+								</li>
+								<li><input type="radio" name="rdi-paynormal"
+									id="payNaver" value=""> <label for="payNaver"><span><em
+											class="sr-only">네이버페이 결제</em><em class="payimg naver"></em></span></label>
+								</li>
+								<li><input type="radio" name="rdi-paynormal"
+									id="payVirtualBank" value=""> <label
+									for="payVirtualBank"><span>무통장입금</span></label></li>
+								<li><input type="radio" name="rdi-paynormal"
+									id="payPayco" value=""> <label for="payPayco"><span><em
+											class="sr-only">페이코 결제</em><em class="payimg payco"></em></span></label>
+								</li>
+								<li><input type="radio" name="rdi-paynormal"
+									id="payCellphone" value=""> <label
+									for="payCellphone"><span>휴대폰 결제</span></label></li>
+							</ul>
+						</div>
+						<div class="form_field">
+							<div class="agree_insurance">
+								<input id="chk-insurance" type="checkbox"> <label
+									for="chk-insurance"> <span>소비자 피해 보상보험
+										신청&nbsp;&nbsp;<em class="tmark_optional">(선택)</em>
+								</span>
+								</label>
+								<p>
+									‘전자상거래 등에서의 소비자보호에 관한 법률‘에 따라 현금 결제 시 서울보증보험㈜가 제공하는 소비자
+									피해보상보험을<br>신청할 수 있도록 해드리고 있습니다. (2013.11.28부터 시행)
+								</p>
+								<a href="" class="btn btn_default"><span>FAQ확인</span></a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</li>
+	</ul>
+</div><!-- //결제수단 선택 -->
+
+
+<script th:inline="javascript">
+var dispYn = [[${order.dispYn}]]; // 노출여부
+
+//화면노출
+var paymentInfoDispYn = function(temp) {
+	if (temp == "Y") {
+		$("#paymentInfo .fold_head").addClass("on");
+		$("#paymentInfo .fold_cont").show();
+	} else {
+		$("#paymentInfo .fold_head").removeClass("on");
+		$("#paymentInfo .fold_cont").hide();
+	}
+}
+
+//컨텐츠 호출
+$(document).ready( function() {
+	// 화면펼침
+	paymentInfoDispYn(dispYn);
+});
+
+
+</script>
+
+</html>

src/main/webapp/WEB-INF/views/mob/popup/DelvAddrAddPopMob.html

@@ -0,0 +1,280 @@
+<form class="form_wrap form_full" name="deliveryAddForm" id="deliveryAddForm">
+	<div class="modal-header htop">
+		<h5 class="modal-title" id="adrsAddLabel">배송지 추가</h5>
+	</div>
+	<div class="modal-body">
+		<div class="pop_cont">
+			<div class="inner wide">
+				<div class="tbl_wrap">
+					<div class="tbl tbl_dlvr">
+						<table>
+							<colgroup>
+								<col width="*">
+							</colgroup>   
+							<tbody>
+								<tr>
+									<td>
+										<span class="sr-only">받는분</span>
+										<input type="text" class="form_control" name="recipNm" placeholder="받는분">
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<span class="sr-only">휴대폰 번호</span>
+										<input type="text" class="form_control" name="recipPhnno" placeholder="휴대폰 번호">
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<span class="sr-only">배송 주소</span>
+										<div class="input_wrap">
+											<input type="hidden" class="form_control" name="recipZipcode" placeholder="우편번호" readonly="readonly">
+											<input type="hidden" class="form_control" name="recipBaseAddr" placeholder="기본주소" readonly="readonly">
+											<input type="text" class="form_control" name="recipAddr" placeholder="배송주소" readonly="readonly">
+											<input type="text" class="form_control" name="recipDtlAddr" placeholder="상세주소">
+											<button type="button" class="btn btn_sch" onclick="fnOpenDaumAddr();">
+												<span class="sr-only">우편번호 찾기</span>
+											</button>
+										</div>
+										<div class="default_addrs">
+											<div class="form_field">
+												<input id="chk-default-addrs" type="checkbox" name="defaultYn" checked="">
+												<label for="chk-default-addrs"><span>기본 배송지로 등록</span></label>
+											</div>
+										</div>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+				<div class="tbl_wrap">
+					<div class="tbl_tit">
+						<h3>배송 요청사항</h3>
+					</div>
+					<div class="tbl tbl_request">
+						<table>
+							<colgroup>
+								<col width="*">
+							</colgroup>   
+							<tbody>
+								<tr>
+									<th class="sr-only">문 앞</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-11" value="문 앞">
+											<label for="rdi-11"><span>문 앞</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">직접 받고 부재 시 문 앞</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-21" value="직접 받고 부재 시 문 앞">
+											<label for="rdi-21"><span>직접 받고 부재 시 문 앞</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">경비실</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-31" value="경비실">
+											<label for="rdi-31"><span>경비실</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">택배함</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-41" value="택배함">
+											<label for="rdi-41"><span>택배함</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">기타사항</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-51" value="기타사항">
+											<label for="rdi-51"><span>기타사항</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">보관 장소만 입력(필수)</th>
+									<td>
+										<div class="form_text">
+											<input type="text" name="delvMemoText" placeholder="보관 장소만 입력 (필수)" maxlength="30" disabled>
+											<p class="desc_txt">보관 장소 외 다른 내용 입력시 통보 없이 삭제 될 수 있습니다.</p>
+										</div>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="modal-footer">
+		<button type="button" class="btn btn_dark" id="btn_delivery_addr_save"><span>배송지 등록</span></button>
+	</div>
+</form>
+
+<script th:inline="javascript">
+var isLogin				= [[${isLogin}]];				// 로그인여부
+
+//컨텐츠 호출
+$(document).ready( function() {
+	// 배송요청사항 버튼기능
+	$("#deliveryAddForm input[name=rdi-request1]").each(function(){
+		// 기타기능 버튼기능
+		$(this).on("click", function(){
+			var temp = $(this).parent().find('span').text();
+			$("#deliveryAddForm input[name=delvMemoText]").val("");
+			if (temp == "기타사항") {
+				$("#deliveryAddForm input[name=delvMemoText]").attr("disabled", false);
+			} else {
+				$("#deliveryAddForm input[name=delvMemoText]").attr("disabled", true);
+			}
+		});
+	});
+});
+
+// 배송지등록버튼
+$("#btn_delivery_addr_save").on("click", function(){
+	
+	// 유효성체크
+	if (!deliveryAddFormCheck()){
+		return false;
+	}
+	
+	// 기본배송지여부
+	var defaultYn = "N";
+	if ($("#deliveryAddForm input[name=defaultYn]").is(":checked")) {
+		defaultYn = "Y";
+	}
+	
+	// 기타사항일때 텍스트 등록
+	var delvMemo = $("#deliveryAddForm input[name=rdi-request1]:checked").parent().find('span').text();
+	if ("기타사항" == delvMemo) {
+		delvMemo = $("#deliveryAddForm input[name=delvMemoText]").val();
+	}
+	
+	// custDelvAddrSq 부모창으로 전달
+	var delvObj = {
+		"custDelvAddrSq"	: 0
+		, "dispYn"			: "Y"
+		, "defaultYn"		: defaultYn
+		, "recipNm"			: $("#deliveryAddForm input[name=recipNm]").val()
+		, "recipPhnno"		: $("#deliveryAddForm input[name=recipPhnno]").val()
+		, "recipZipcode"	: $("#deliveryAddForm input[name=recipZipcode]").val()
+		, "recipBaseAddr"	: $("#deliveryAddForm input[name=recipBaseAddr]").val()
+		, "recipDtlAddr"	: $("#deliveryAddForm input[name=recipDtlAddr]").val()
+		, "delvMemo"		: delvMemo
+	}
+	
+	// 비회원
+	if (isLogin == false) {
+		// 부모장으로 값 전닫
+		delvAddrSet(delvObj);
+		// 팝업닫기
+		$(".close-modal").trigger("click");
+		return false;
+	}
+	
+	var jsonData = JSON.stringify(delvObj);
+	
+	$.ajax( {
+		type		: "POST",
+		url 		: '/common/createCustDeliveryAddr',
+		data		: jsonData,
+		dataType 	: 'html',
+		beforeSend : function(xhr, settings) {
+			xhr.setRequestHeader("AJAX"			, "true");
+			xhr.setRequestHeader('Accept'		, 'application/json');
+			xhr.setRequestHeader('Content-Type'	, 'application/json');
+			gagajf.showProgressbar(true);
+		},
+		success 	: function(result) {
+			if (result != null) {
+				delvObj.custDelvAddrSq = result;
+				
+				// 부모장으로 값 전닫
+				delvAddrSet(delvObj);
+			}
+			
+			// 팝업닫기
+			$(".close-modal").trigger("click");
+		}
+	});
+});
+
+// 유효성체크 함수
+var deliveryAddFormCheck = function() {
+	// TODO 유효성 체크 추가
+	if (gagajf.isNull($("#deliveryAddForm input[name=recipNm]").val())) {
+		mcxDialog.alert("이름을 입력해주세요.");
+		$('#deliveryAddForm input[name=custNm]').focus();
+		return false;
+	}
+	
+	if (gagajf.isNull($("#deliveryAddForm input[name=recipPhnno]").val())) {
+		mcxDialog.alert("휴대폰번호를 입력해주세요.");
+		$('#deliveryAddForm input[name=recipPhnno]').focus();
+		return false;
+	}
+	
+	if (gagajf.isNull($("#deliveryAddForm input[name=recipZipcode]").val())) {
+		mcxDialog.alert("배송주소를 입력해주세요.");
+		$('#deliveryAddForm input[name=recipAddr]').focus();
+		return false;
+	}
+	
+	if (gagajf.isNull($("#deliveryAddForm input[name=recipBaseAddr]").val())) {
+		mcxDialog.alert("배송주소를 입력해주세요.");
+		$('#deliveryAddForm input[name=recipAddr]').focus();
+		return false;
+	}
+	
+	if (gagajf.isNull($("#deliveryAddForm input[name=recipDtlAddr]").val())) {
+		mcxDialog.alert("상세주소를 입력해주세요.");
+		$('#deliveryAddForm input[name=recipDtlAddr]').focus();
+		return false;
+	}
+	
+	return true;
+}
+
+// 우편번호 DAUM을 이용한 우편번호 팝업 레이어
+var fnOpenDaumAddr = function() {
+	$("body").css("overflow", "hidden");
+	
+	let daumZip = new daum.Postcode({
+		oncomplete: function(data) {
+			$('#deliveryAddForm input[name=recipAddr]').val(data.zonecode + '    ' + cfnGetDaumRoadAddr(data));
+			$('#deliveryAddForm input[name=recipZipcode]').val(data.zonecode);
+			$('#deliveryAddForm input[name=recipBaseAddr]').val(cfnGetDaumRoadAddr(data));
+			$('#deliveryAddForm input[name=recipDtlAddr]').focus();
+			
+			cfnCloseDaumAddr();
+			
+			$("#adrsAddPop").modal("show");
+		},
+		width: '100%'
+	});
+	cfnOpenDaumAddr(daumZip);
+}
+</script>
+
+
+
+
+
+
+
+
+

src/main/webapp/WEB-INF/views/mob/popup/DelvAddrChangePopMob.html

@@ -0,0 +1,146 @@
+<!-- 배송지변경 팝업 -->
+<form name="delvAddrChangeForm" id="delvAddrChangeForm">
+	<div class="modal-header htop">
+		<h5 class="modal-title" id="adrsChangeLabel">배송지 관리</h5>
+	</div>
+	<div class="modal-body">
+		<div class="pop_cont">
+			<div class="inner wide">
+				<div class="delivery_list">
+					<!-- 배송지목록 -->
+					<th:block th:each="deliveryAddr, index : ${deliveryAddrList}">
+						<div class="ship_info">
+							<dl>
+								<div class="name">
+									<dt><span class="sr-only">배송지명</span></dt>
+									<dd>
+										<th:block th:text="${deliveryAddr.recipNm}"></th:block>
+										<div class="badge_wrap">
+											<th:block th:if="${deliveryAddr.defaultYn} == 'Y'">
+												<em class="order_badge">기본배송지</em> 
+											</th:block>
+											<th:block th:if="${deliveryAddr.shotDelvUseYn} == 'Y'">
+												<em class="order_badge order_bullet_badge">총알배송</em>
+											</th:block>
+										</div>
+									</dd>
+								</div>
+								<div class="phone">
+									<dt><span class="sr-only">휴대폰 번호</span></dt>
+									<dd th:text="${deliveryAddr.recipPhnno}"></dd>
+								</div>
+								<div class="addr">
+									<dt><span class="sr-only">배송주소</span></dt>
+									<dd th:text="${deliveryAddr.recipBaseAddr} + ' ' + ${deliveryAddr.recipDtlAddr}"></dd>
+								</div>
+								<div class="ship_request">
+									<dl>
+										<dt>배송요청 사항</dt>
+										<dd th:text="${deliveryAddr.delvMemo}"></dd>
+									</dl>
+								</div>
+							</dl>
+							<div class="btn_group btn_group_flex">
+								<div><button type="button" class="btn btn_gost btn_addrModify_pop" th:value="${deliveryAddr.custDelvAddrSq}" id="btn_addrModify_pop"><span>수정</span></button></div>
+								<div><button type="button" class="btn btn_dark btn_sel_delvAddr" th:value="${deliveryAddr.custDelvAddrSq}"><span>선택</span></button></div>
+							</div>
+							
+							<input type="hidden" name="recipNm" 			th:value="${deliveryAddr.recipNm}"/>
+							<input type="hidden" name="recipPhnno" 			th:value="${deliveryAddr.recipPhnno}"/>
+							<input type="hidden" name="recipZipcode" 		th:value="${deliveryAddr.recipZipcode}"/>
+							<input type="hidden" name="recipBaseAddr" 		th:value="${deliveryAddr.recipBaseAddr}"/>
+							<input type="hidden" name="recipDtlAddr" 		th:value="${deliveryAddr.recipDtlAddr}"/>
+							<input type="hidden" name="delvMemo" 			th:value="${deliveryAddr.delvMemo}"/>
+						</div>
+					</th:block>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="modal-footer">
+		<button type="button" class="btn btn_dark" id="btn_adrsAdd_pop">
+			<span>배송지 추가</span>
+		</button>
+	</div>
+</form>
+
+<script th:inline="javascript">
+//컨텐츠 호출
+$(document).ready( function() {
+});
+
+// 2. 버튼기능구현
+// 2.1 배송지선택버튼
+$(".btn_sel_delvAddr").on("click", function(){
+	
+	// custDelvAddrSq 부모창으로 전달
+	var delvObj = {
+		"custDelvAddrSq"	: $(this).attr("value")
+		, "dispYn"			: "Y"
+		, "recipNm"			: $(this).parent().find("input[name=recipNm]").val()
+		, "recipPhnno"		: $(this).parent().find("input[name=recipPhnno]").val()
+		, "recipZipcode"	: $(this).parent().find("input[name=recipZipcode]").val()
+		, "recipBaseAddr"	: $(this).parent().find("input[name=recipBaseAddr]").val()
+		, "recipDtlAddr"	: $(this).parent().find("input[name=recipDtlAddr]").val()
+		, "delvMemo"		: $(this).parent().find("input[name=delvMemo]").val()
+	}
+	
+	// 부모장으로 값 전닫
+	deliveryAddrInfoSet(delvObj);
+	
+	// 팝업닫기
+	$(".close-modal").trigger("click");
+});
+
+// 2.2 배송지수정버튼
+$(".btn_addrModify_pop").on("click", function(){
+		
+	var obj = {
+		"custDelvAddrSq" : $(this).attr("value")
+	} 
+	
+	$.ajax( {
+		type		: "POST",
+		url 		: '/common/delvAddrModifyPop',
+		data		: JSON.stringify(obj),
+		dataType 	: 'html',
+		beforeSend : function(xhr, settings) {
+			xhr.setRequestHeader("AJAX"			, "true");
+			xhr.setRequestHeader('Accept'		, 'application/json');
+			xhr.setRequestHeader('Content-Type'	, 'application/json');
+			gagajf.showProgressbar(true);
+		},
+		success 	: function(result) {
+			$("#adrsModifyPop .modal-dialog .modal-content").html(result);
+			$("#adrsModifyPop").modal("show");
+		}
+	});	
+});
+
+
+// 2.3 배송지추가 팝업열기
+$('#btn_adrsAdd_pop').on("click", function(){
+	$.ajax( {
+		type		: "POST",
+		url 		: '/common/delvAddrAddPop',
+		data		: JSON.stringify(jsonObj),
+		dataType 	: 'html',
+		beforeSend : function(xhr, settings) {
+			xhr.setRequestHeader("AJAX"			, "true");
+			xhr.setRequestHeader('Accept'		, 'application/json');
+			xhr.setRequestHeader('Content-Type'	, 'application/json');
+			gagajf.showProgressbar(true);
+		},
+		success 	: function(result) {
+			$("#adrsAddPop .modal-dialog .modal-content").html(result);
+			$("#adrsAddPop").modal("show");
+		}
+	});	
+});
+
+
+
+
+
+
+</script>

src/main/webapp/WEB-INF/views/mob/popup/DelvAddrModifyPopMob.html

@@ -0,0 +1,295 @@
+<form name="deliveryModifyForm" id="deliveryModifyForm">
+	<input type="hidden" class="form_control" name="custDelvAddrSq" th:value="${deliveryAddrInfo.custDelvAddrSq}">
+	
+	<div class="modal-header htop">
+		<h5 class="modal-title" id="adrsModifyLabel">배송지 수정</h5>
+	</div>
+	<div class="modal-body">
+		<div class="pop_cont">
+			<div class="inner wide">
+				<div class="tbl_wrap">
+					<div class="tbl tbl_dlvr">
+						<table>
+							<colgroup>
+								<col width="*">
+							</colgroup>
+							<tbody>
+								<tr>
+									<td>
+										<span class="sr-only">받는분</span>
+										<input type="text"class="form_control" name="recipNm" placeholder="받는분" th:value="${deliveryAddrInfo.recipNm}">
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<span class="sr-only">휴대폰 번호</span>
+										<input type="text" class="form_control" name="recipPhnno" placeholder="휴대폰 번호" th:value="${deliveryAddrInfo.recipPhnno}">
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<span class="sr-only">배송 주소</span>
+										<div class="input_wrap">
+											<input type="hidden" name="recipZipcode" placeholder="우편번호" th:value="${deliveryAddrInfo.recipZipcode}" readonly="readonly">
+											<input type="hidden" class="form_control" name="recipBaseAddr" placeholder="기본주소"th:value="${deliveryAddrInfo.recipBaseAddr}" readonly="readonly">
+							
+											<input type="text" class="form_control" placeholder="배송주소" name="recipAddr" th:value="${deliveryAddrInfo.recipZipcode} + '    '+ ${deliveryAddrInfo.recipBaseAddr}" readonly="readonly">
+											<input type="text" class="form_control" placeholder="상세주소" name="recipDtlAddr" th:value="${deliveryAddrInfo.recipDtlAddr}">
+											<button type="button" class="btn btn_sch" onclick="fnOpenDaumAddr();">
+												<span class="sr-only">우편번호 찾기</span>
+											</button>
+										</div>
+										<div class="default_addrs">
+											<div class="form_field">
+												<th:block th:if="${deliveryAddrInfo.defaultYn} == 'Y'">
+													<input id="chk-default-addrs" type="checkbox" name="defaultYn" checked>
+												</th:block>
+												<th:block th:if="${deliveryAddrInfo.defaultYn} == 'N'">
+													<input id="chk-default-addrs" type="checkbox" name="defaultYn">
+												</th:block>
+												<label for="chk-default-addrs"><span>기본배송지로 등록</span></label>
+											</div>
+										</div>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+				<div class="tbl_wrap">
+					<div class="tbl_tit">
+						<h3>배송 요청사항</h3>
+					</div>
+					<div class="tbl tbl_request">
+						<table>
+							<colgroup>
+								<col width="*">
+							</colgroup>
+							<tbody>
+								<tr>
+									<th class="sr-only">문 앞</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-1" value="문 앞">
+											<label for="rdi-1"><span>문 앞</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">직접 받고 부재 시 문 앞</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-2" value="직접 받고 부재 시 문 앞">
+											<label for="rdi-2"><span>직접 받고 부재 시 문 앞</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">경비실</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-3" value="경비실"><label
+												for="rdi-3"><span>경비실</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">택배함</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-4" value="택배함">
+											<label for="rdi-4"><span>택배함</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">기타사항</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-5" value="5">
+											<label for="rdi-5"><span>기타사항</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">보관 장소만 입력(필수)</th>
+									<td>
+										<div class="form_text">
+											<input type="text" name="delvMemoText"  placeholder="보관 장소만 입력 (필수)" maxlength="30" disabled>
+											<p class="desc_txt">보관 장소 외 다른 내용 입력시 통보 없이 삭제 될 수 있습니다.</p>
+										</div>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="modal-footer">
+		<button type="button" class="btn btn_dark" id="btn_delivery_modi_save"><span>배송지 등록</span></button>
+	</div>
+</form>
+
+<script th:inline="javascript">
+var delvMemo = [[${deliveryAddrInfo.delvMemo}]];
+//컨텐츠 호출
+$(document).ready( function() {
+	
+	var delvMemoArr = ["문 앞", "직접받고 부재시 문 앞", "경비실", "택배함"];
+	var tempMemo = true;
+	
+	// 배송요청사항설정
+	for (i=0 ; i<delvMemoArr.length ; i++) {
+		if (delvMemoArr[i] == delvMemo) {
+			tempMemo = false;
+		}
+	}
+	
+	if (tempMemo) {
+		$("#deliveryModifyForm input[name=rdi-request1]").eq(4).attr("checked", true);
+		$("#deliveryModifyForm input[name=delvMemoText]").attr("disabled", false);
+		$("#deliveryModifyForm input[name=delvMemoText]").val(delvMemo);
+	}
+	
+	$("#deliveryModifyForm input[name=rdi-request1]").each(function(){
+		var temp = $(this).parent().find('span').text();
+		if (delvMemo == temp) {
+			$(this).attr("checked", true);
+		}
+	});
+	
+	// 배송요청사항 버튼기능
+	$("#deliveryModifyForm input[name=rdi-request1]").each(function(){
+		// 버튼기능
+		$(this).on("click", function(){
+			var temp = $(this).parent().find('span').text();
+			$("#deliveryModifyForm input[name=delvMemoText]").val("");
+			if (temp == "기타사항") {
+				$("#deliveryModifyForm input[name=delvMemoText]").attr("disabled", false);
+			} else {
+				$("#deliveryModifyForm input[name=delvMemoText]").attr("disabled", true);
+			}
+		});
+	});
+});
+
+// 배송지등록버튼
+$("#btn_delivery_modi_save").on("click", function(){
+	
+	// 유효성체크
+	if (!deliveryModifyFormCheck()){
+		return false;
+	}
+	
+	// 기본배송지여부
+	var defaultYn = "N";
+	if ($("#deliveryModifyForm input[name=defaultYn]").is(":checked")) {
+		defaultYn = "Y";
+	}
+	
+	// 기타사항일때 텍스트 등록
+	var delvMemo = $("#deliveryModifyForm input[name=rdi-request1]:checked").parent().find('span').text();
+	if ("기타사항" == delvMemo) {
+		delvMemo = $("#deliveryModifyForm input[name=delvMemoText]").val();
+	}
+	
+	// 배송지정보설정
+	var jsonObj = {
+		"defaultYn"			: defaultYn
+		, "custDelvAddrSq"	: parseInt($("#deliveryModifyForm input[name=custDelvAddrSq]").val())
+		, "recipNm"			: $("#deliveryModifyForm input[name=recipNm]").val()
+		, "recipPhnno"		: $("#deliveryModifyForm input[name=recipPhnno]").val()
+		, "recipZipcode"	: $("#deliveryModifyForm input[name=recipZipcode]").val()
+		, "recipBaseAddr"	: $("#deliveryModifyForm input[name=recipBaseAddr]").val()
+		, "recipDtlAddr"	: $("#deliveryModifyForm input[name=recipDtlAddr]").val()
+		, "delvMemo"		: delvMemo
+	}
+	
+	var jsonData = JSON.stringify(jsonObj);
+	
+	$.ajax( {
+		type		: "POST",
+		url 		: '/common/updateCustDeliveryAddr',
+		data		: jsonData,
+		dataType 	: 'html',
+		beforeSend : function(xhr, settings) {
+			xhr.setRequestHeader("AJAX"			, "true");
+			xhr.setRequestHeader('Accept'		, 'application/json');
+			xhr.setRequestHeader('Content-Type'	, 'application/json');
+			gagajf.showProgressbar(true);
+		},
+		success 	: function(result) {
+			// custDelvAddrSq 부모창으로 전달
+			var delvObj = {
+				"custDelvAddrSq"	: parseInt($("#deliveryModifyForm input[name=custDelvAddrSq]").val())
+				, "dispYn"			: "Y"
+				, "recipNm"			: $("#deliveryModifyForm input[name=recipNm]").val()
+				, "recipPhnno"		: $("#deliveryModifyForm input[name=recipPhnno]").val()
+				, "recipZipcode"	: $("#deliveryModifyForm input[name=recipZipcode]").val()
+				, "recipBaseAddr"	: $("#deliveryModifyForm input[name=recipBaseAddr]").val()
+				, "recipDtlAddr"	: $("#deliveryModifyForm input[name=recipDtlAddr]").val()
+				, "delvMemo"		: delvMemo
+			}
+			
+			// 부모장으로 값 전닫
+			delvAddrSet(delvObj);
+			
+			// 팝업닫기
+			$(".close-modal").trigger("click");
+		}
+	});
+});
+
+// 유효성체크 함수
+var deliveryModifyFormCheck = function() {
+	// TODO 유효성 체크 추가
+	if (gagajf.isNull($("#deliveryModifyForm input[name=recipNm]").val())) {
+		mcxDialog.alert("이름을 입력해주세요.");
+		$('#deliveryModifyForm input[name=custNm]').focus();
+		return false;
+	}
+	
+	if (gagajf.isNull($("#deliveryModifyForm input[name=recipZipcode]").val())) {
+		mcxDialog.alert("배송주소를 입력해주세요.");
+		$('#deliveryModifyForm input[name=recipAddr]').focus();
+		return false;
+	}
+	
+	if (gagajf.isNull($("#deliveryModifyForm input[name=recipBaseAddr]").val())) {
+		mcxDialog.alert("배송주소를 입력해주세요.");
+		$('#deliveryModifyForm input[name=recipAddr]').focus();
+		return false;
+	}
+	
+	if (gagajf.isNull($("#deliveryModifyForm input[name=recipDtlAddr]").val())) {
+		mcxDialog.alert("상세주소를 입력해주세요.");
+		$('#deliveryModifyForm input[name=recipDtlAddr]').focus();
+		return false;
+	}
+	
+	return true;
+}
+
+// 우편번호 DAUM을 이용한 우편번호 팝업 레이어
+var fnOpenDaumAddr = function() {
+	$("body").css("overflow", "hidden");
+	
+	let daumZip = new daum.Postcode({
+		oncomplete: function(data) {
+			$('#deliveryModifyForm input[name=recipAddr]').val(data.zonecode + '    ' + cfnGetDaumRoadAddr(data));
+			$('#deliveryModifyForm input[name=recipZipcode]').val(data.zonecode);
+			$('#deliveryModifyForm input[name=recipBaseAddr]').val(cfnGetDaumRoadAddr(data));
+			$('#deliveryModifyForm input[name=recipDtlAddr]').focus();
+			
+			cfnCloseDaumAddr();
+			
+			$("#adrsModifyPop").modal("show");
+		},
+		width: '100%'
+	});
+	
+	cfnOpenDaumAddr(daumZip);
+}
+</script>

src/main/webapp/WEB-INF/views/web/cart/CartChangeOptionPopupWeb_20210319.html

@@ -1,269 +0,0 @@
-<html lang="ko"
-	  xmlns:th="http://www.thymeleaf.org">
-<!-- 옵션변경 팝업 -->
-<div class="modal-dialog cartOptionModal" role="document">
-	<div class="modal-content">
-		<div class="modal-header">
-			<h5 class="modal-title" id="optModifyLabel">옵션변경</h5>
-			<div class="prod_title">
-				<span class="brand" th:text="|${cart.brandEnm + ' ' + cart.brandKnm}|"></span>
-				<span class="name" th:text="${cart.goodsNm}"></span>
-			</div>
-		</div>
-
-		<div class="modal-body">
-			<div class="pop_cont">
-				<div class="prod_info">
-					<div class="prod_preview">
-						<div class="area_pic">
-							<ul class="pic_list">
-								<th:block th:if="${setType.equals(cart.goodsType) or cart.selfGoodsYn.equals('N')}">
-									<li th:each="img, index : ${cart.cartImgList}">
-										<span class="thumb"><img th:src="${cart.imgPath + '/' + img.sysImgNm}" src="#" alt="" /></span>
-									</li>
-								</th:block>
-								<th:block th:if="${!setType.equals(cart.goodsType) and cart.selfGoodsYn.equals('Y')}">
-									<th:block th:each="comp, status : ${cart.cartCompsList}">
-										<th:block th:each="color, index : ${comp.cartColorList}">
-											<th:block th:if="${color.cartOptCd1 != null and color.cartOptCd1.equals(color.optCd1)}">
-												<li th:each="img, index : ${color.cartImgList}">
-													<span class="thumb"><img th:src="${cart.imgPath + '/' + img.sysImgNm}" src="#" alt="" /></span>
-												</li>
-											</th:block>
-										</th:block>
-									</th:block>
-								</th:block>
-							</ul>
-						</div>
-						<div class="area_order">
-							<th:block th:each="comp, status : ${cart.cartCompsList}">
-								<!-- 세트상품 옵션 -->
-								<th:block th:if="${setType.equals(cart.goodsType)}">
-									<div class="opt_select setOption">
-										<div class="opt_header">
-											<span class="title" th:text="${comp.goodsNm}"></span>
-										</div>
-
-										<!-- 컬러 변경시 만들어줄 size option -->
-										<th:block th:each="color, index : ${comp.cartColorList}">
-											<span style="display:none;">
-												<select th:classappend="|color_${color.goodsCd}_${color.optCd1}|">
-													<th:block th:each="size, i : ${color.cartSizeList}">
-														<th:block th:if="${color.optCd1.equals(size.optCd1)}">
-															<option th:value="${size.optCd}" th:text="${size.optCd2}"></option>
-														</th:block>
-													</th:block>
-												</select>
-											</span>
-										</th:block>
-
-										<div class="form_field">
-											<select class="setColorSelect">
-												<th:block th:each="color, index : ${comp.cartColorList}">
-													<option th:data="${comp.goodsCd}" th:value="${color.optCd1}" rel="icon-temperature" th:text="${color.colorNm}" th:selected="${color.cartColorNm != null}"></option>
-												</th:block>
-											</select>
-										</div>
-										<div class="form_field">
-											<th:block th:each="color, index : ${comp.cartColorList}" th:if="${color.cartColorNm != null}">
-											<select th:data="${color.goodsCd}" th:class="|size_${comp.goodsCd} setSizeSelect|">
-												<th:block th:each="size, i : ${color.cartSizeList}">
-													<th:block th:if="${color.optCd1.equals(size.optCd1)}">
-														<option th:data="${comp.cartDtlSq}" th:value="${size.optCd}" th:text="${size.optCd2}" th:selected="${size.cartOptCd != null}"></option>
-													</th:block>
-												</th:block>
-											</select>
-											</th:block>
-										</div>
-									</div>
-								</th:block>
-
-								<!-- 자사 일반 상품 옵션 -->
-								<th:block th:if="${!setType.equals(cart.goodsType) and 'Y'.equals(cart.selfGoodsYn)}">
-									<div class="opt_color">
-										<div class="opt_header">
-											<span class="title">컬러</span>
-											<th:block th:each="color, index : ${comp.cartColorList}">
-												<th:block th:if="${color.cartColorNm != null}">
-													<span class="color" th:text="${color.cartColorNm}"></span>
-												</th:block>
-											</th:block>
-										</div>
-										<ul>
-											<li th:each="color, index : ${comp.cartColorList}" class="selfGoodsColor">
-												<a href="" th:cartDtlSq="${color.cartDtlSq}" th:classappend="${color.cartColorNm != null} ? 'on'" class="selfGoodsColorSelect" th:data="${color.optCd1}">
-													<img th:src="${cart.imgPath + '/' + color.sysImgNm}" src="#" th:alt="${color.colorNm}" alt="" />
-												</a>
-											</li>
-										</ul>
-									</div>
-
-									<div class="opt_size">
-										<div class="opt_header">
-											<span class="title">사이즈</span>
-										</div>
-										<div class="form_field selfGoodsSize">
-											<th:block th:each="color, index : ${comp.cartColorList}">
-												<th:block th:if="${color.cartColorNm != null}">
-													<th:block th:each="size, index : ${color.cartSizeList}">
-														<div>
-															<input type="radio" name="rdi-optsize" th:id="|${'rdi-optsize' + size.goodsCd + '-' + size.optCd}|" th:value="${size.optCd}" th:checked="${size.cartOptCd != null}" th:disabled="${size.soldoutYn == 'Y' or cart.goodsQty > size.currStockQty}">
-															<label th:for="|${'rdi-optsize' + size.goodsCd + '-' + size.optCd}|"><span th:text="${size.optCd2}"></span></label>
-														</div>
-													</th:block>
-												</th:block>
-											</th:block>
-										</div>
-									</div>
-								</th:block>
-
-								<!-- 입점업체 상품 옵션 -->
-								<th:block th:if="${!setType.equals(cart.goodsType) and !'Y'.equals(cart.selfGoodsYn)}">
-									<div class="opt_select">
-										<div class="opt_header">
-											<span class="title">옵션선택</span>
-										</div>
-										<div class="form_field">
-											<select class="selfGoodsColor">
-												<th:block th:each="color, index : ${comp.cartColorList}">
-												<option th:data="${color.cartDtlSq}" th:value="${color.optCd}" th:text="${color.optCd1 + '/' + color.optCd2}" th:selected="${color.cartOptCd != null}"></option>
-												</th:block>
-											</select>
-										</div>
-									</div>
-								</th:block>
-							</th:block>
-							<div class="opt_count">
-								<div class="opt_header">
-									<span class="title">수량</span>
-								</div>
-								<div class="number_count">
-									<span class="minus"><span class="sr-only">감소</span></span>
-									<input type="text" name="goodsQty" maxlength="3" style='ime-mode:disabled' th:value="${cart.goodsQty}" />
-									<!-- <input type="text" name="goodsQty" maxlength="3" style='ime-mode:disabled' th:value="2" /> -->
-									<span class="plus"><span class="sr-only">추가</span></span>
-								</div>
-							</div>
-							<div class="btn_group_block">
-								<button class="btn btn_dark btn_block" th:onclick="|fnChangeCartOption(${cart.cartSq})|"><span>옵션변경</span></button>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-<!-- //옵션변경 팝업 -->
-
-
-<script th:inline="javascript">
-	// 세트상품 컬러 변경시
-	$(".setColorSelect").on("change", function(e) {
-		let goodsCd = $(this).find("option:checked").attr("data");
-		$(".setOption .size_" + goodsCd).html("");
-		$(".setOption .size_" + goodsCd).html($(".color_" + goodsCd + "_" + $(this).val()).html());
-	});
-
-	// 자사 일반 상품 컬러 선택시
-	$(".selfGoodsColorSelect").on("click", function(e) {
-		let html = "";
-		let cart = [[${cart}]];
-		let color =  [[${cart.cartCompsList[0].cartColorList}]];
-		let optCd1 = $(this).attr("data");
-
-		for(let i = 0 ; i < color.length ; i++) {
-			let size = color[i].cartSizeList;
-			for(let j = 0 ; j < size.length ; j++) {
-				if(optCd1 == size[j].optCd1) {
-					html += "<div>";
-					html += "<input type='radio' name='rdi-optsize' id='" + size[j].goodsCd + "-" + size[j].optCd + "' value='" + size[j].optCd + "' ";
-					if(size[j].soldoutYn == "Y" || cart.goodsQty > size[j].currStockQty) {
-						html += "disabled = 'disabled'";
-					}
-					html += " />\n";
-					html += "<label for='" + size[j].goodsCd + "-" + size[j].optCd + "'><span>" + size[j].optCd2 + "</span></label>\n"
-					html += "</div>\n";
-				}
-			}
-		}
-
-		$(".selfGoodsSize").html(html);
-	});
-
-	function fnChangeCartOption(cartSq) {
-		let cart = [[${cart}]];
-		let cartDtlSqArr = [], itemCds = [], optCds = [];
-		let data;
-
-		if(cart.goodsType == "G056_S") {
-			$(".setSizeSelect").each(function() {
-				optCds.push($(this).val());
-				itemCds.push($(this).attr("data"));
-				cartDtlSqArr.push($(this).find("option:checked").attr("data"));
-			});
-
-			data = {
-				  cartSq : cart.cartSq
-				, goodsCd : cart.goodsCd
-				, goodsType : cart.goodsType
-				, cartDtlSqArr : cartDtlSqArr
-				, itemCds : itemCds
-				, optCds : optCds
-				, goodsQty : $("input[name=goodsQty]").val()
-			}
-		} else if(cart.goodsType != "G056_S" && cart.selfGoodsYn == "Y") {
-			optCds.push($(".selfGoodsSize").find("input[name=rdi-optsize]:checked").val());
-			itemCds.push(cart.goodsCd);
-			$(".selfGoodsColorSelect").each(function() {
-				if($(this).attr("cartDtlSq") > 0) {
-					cartDtlSqArr.push($(this).attr("cartDtlSq"));
-				}
-			});
-
-			data = {
-				  cartSq : cart.cartSq
-				, goodsCd : cart.goodsCd
-				, goodsType : cart.goodsType
-				, cartDtlSqArr : cartDtlSqArr
-				, itemCds : itemCds
-				, optCds : optCds
-				, goodsQty : $("input[name=goodsQty]").val()
-			}
-		} else {
-			optCds.push($(".selfGoodsColor").val());
-			itemCds.push(cart.goodsCd);
-			$(".selfGoodsColor option").each(function() {
-				if($(this).attr("data") > 0) {
-					cartDtlSqArr.push($(this).attr("data"));
-				}
-			});
-
-			data = {
-				cartSq : cart.cartSq
-				, goodsCd : cart.goodsCd
-				, goodsType : cart.goodsType
-				, cartDtlSqArr : cartDtlSqArr
-				, itemCds : itemCds
-				, optCds : optCds
-				, goodsQty : $("input[name=goodsQty]").val()
-			}
-		}
-
-		$.ajax( {
-			type: "POST",
-			url : '/cart/change/option',
-			contentType: 'application/json',
-			dataType : 'json',
-			data : JSON.stringify(data),
-			success : function(result) {
-				mcxDialog.alert(result.message);
-				$(".closeCartOptionModal").trigger("click");
-				getCartList();
-			}
-		});
-	}
-</script>
-
-</div>
-<a href="#close-modal" rel="modal:close" class="close-modal closeCartOptionModal">Close</a>
-</html>

src/main/webapp/WEB-INF/views/web/cart/CartListAjaxFormWeb.html

@@ -54,7 +54,7 @@
 						<div class="form_field">
 							<input id="od_item_all" type="checkbox" checked="checked"><label for="od_item_all"><span>전체선택</span></label>
 						</div>
-						<button type="button" class="btn btn_default btn_sm"><span>선택삭제</span></button>
+						<button type="button" class="btn btn_default btn_sm" onclick="deleteCart('SELECT', 'cart')"><span>선택삭제</span></button>
 					</div>
 				</div>
 
@@ -97,7 +97,9 @@
 										<div class="order_desc">
 											<div class="form_box">
 												<div class="form_field">
-													<input th:id="|od_item_${cart.cartSq}|" name="cartSqArr" type="checkbox" th:value="${cart.cartSq}" th:checked="${cart.soldoutYn.equals('N') and cart.ordCanYn.equals('Y')}" th:disabled="${cart.soldoutYn.equals('Y') or cart.ordCanYn.equals('N')}"/>
+													<input th:id="|od_item_${cart.cartSq}|" name="cartSqArr" type="checkbox" th:value="${cart.cartSq}"
+														   th:checked=   "${cart.soldoutYn.equals('N') and cart.ordCanYn.equals('Y') and cart.getGoodsQty() >= cart.getMinOrdQty() and cart.getGoodsQty() <= cart.getMaxOrdQty()}"
+														   th:disabled="${!(cart.soldoutYn.equals('N') and cart.ordCanYn.equals('Y') and cart.getGoodsQty() >= cart.getMinOrdQty() and cart.getGoodsQty() <= cart.getMaxOrdQty())}"/>
 													<label th:for="|od_item_${cart.cartSq}|">
 														<span class="sr-only">상품선택</span>
 													</label>
@@ -141,8 +143,10 @@
 													<p th:if="${cart.qtyTmtbSq > 0 and cart.applyQtySectionYn == 'N'}" class="notApplyTmtb"><a href="" class="btn_moresale"><span class="tag primary">SALE</span>다다익선 상품보기</a></p>
 													<p th:if="${cart.amtTmtbSq > 0 and cart.applyAmtSectionYn == 'Y'}" class="applyTmtb"><span class="tag primary">SALE</span>다다익선 할인 적용</p>
 													<p th:if="${cart.amtTmtbSq > 0 and cart.applyAmtSectionYn == 'N'}" class="notApplyTmtb"><a href="" class="btn_moresale"><span class="tag primary">SALE</span>다다익선 상품보기</a></p>
-													<p th:if="${cart.soldoutYn.equals('Y') and cart.ordCanYn.equals('Y')}">품절된 상품입니다.</p>
+													<p th:if="${(cart.goodsQty < cart.ordCanQty or cart.soldoutYn.equals('Y')) and cart.ordCanYn.equals('Y')}">품절된 상품입니다.</p>
 													<p th:if="${cart.ordCanYn.equals('N')}">해당 상품은 구매 불가능한 상품입니다.</p>
+													<p th:if="${cart.soldoutYn.equals('N') and cart.ordCanYn.equals('Y') and cart.goodsQty < cart.minOrdQty}" th:text="|해당 상품은 최소 ${cart.minOrdQty}개부터 구매 가능합니다.|"></p>
+													<p th:if="${cart.soldoutYn.equals('N') and cart.ordCanYn.equals('Y') and cart.goodsQty > cart.maxOrdQty}" th:text="|해당 상품은 최대 ${cart.maxOrdQty}개까지 구매 가능합니다.|"></p>
 												</div>
 											</div>
 											<div class="calc_box">
@@ -171,7 +175,7 @@
 														</button>
 													</span>
 													<span>
-														<button type="button" class="btn_delete" th:onclick="|deleteCart(${cart.cartSq})|">
+														<button type="button" class="btn_delete" th:onclick="|deleteCart(${cart.cartSq}, 'cart')|">
 															<span><i class="ico ico_trash"></i><em class="sr-only">상품삭제</em></span>
 														</button>
 													</span>
@@ -208,7 +212,9 @@
 										<div class="order_desc">
 											<div class="form_box">
 												<div class="form_field">
-													<input th:id="|od_item_${cart.cartSq}|" name="cartSqArr" type="checkbox" th:value="${cart.cartSq}" th:checked="${cart.soldoutYn.equals('N') and cart.ordCanYn.equals('Y')}" th:disabled="${cart.soldoutYn.equals('Y') or cart.ordCanYn.equals('N')}">
+													<input th:id="|od_item_${cart.cartSq}|" name="cartSqArr" type="checkbox" th:value="${cart.cartSq}"
+														   th:checked=   "${cart.soldoutYn.equals('N') and cart.ordCanYn.equals('Y') and cart.getGoodsQty() >= cart.getMinOrdQty() and cart.getGoodsQty() <= cart.getMaxOrdQty()}"
+														   th:disabled="${!(cart.soldoutYn.equals('N') and cart.ordCanYn.equals('Y') and cart.getGoodsQty() >= cart.getMinOrdQty() and cart.getGoodsQty() <= cart.getMaxOrdQty())}"/>
 													<label th:for="|od_item_${cart.cartSq}|">
 														<span class="sr-only">상품선택</span>
 													</label>
@@ -247,6 +253,8 @@
 														<p th:if="${cart.amtTmtbSq > 0 and cart.applyAmtSectionYn == 'N'}" class="notApplyTmtb"><a href="" class="btn_moresale"><span class="tag primary">SALE</span>다다익선 상품보기</a></p>
 														<p th:if="${cart.soldoutYn.equals('Y') and cart.ordCanYn.equals('Y')}">품절된 상품입니다.</p>
 														<p th:if="${cart.ordCanYn.equals('N')}">해당 상품은 구매 불가능한 상품입니다.</p>
+														<p th:if="${cart.soldoutYn.equals('N') and cart.ordCanYn.equals('Y') and cart.goodsQty < cart.minOrdQty}" th:text="|해당 상품은 최소 ${cart.minOrdQty}개부터 구매 가능합니다.|"></p>
+														<p th:if="${cart.soldoutYn.equals('N') and cart.ordCanYn.equals('Y') and cart.goodsQty > cart.maxOrdQty}" th:text="|해당 상품은 최대 ${cart.maxOrdQty}개까지 구매 가능합니다.|"></p>
 													</div>
 												</div>
 											</div>
@@ -276,7 +284,7 @@
 														</button>
 													</span>
 													<span>
-														<button type="button" class="btn_delete" th:onclick="|deleteCart(${cart.cartSq})|">
+														<button type="button" class="btn_delete" th:onclick="|deleteCart(${cart.cartSq}, 'cart')|">
 															<span><i class="ico ico_trash"></i><em class="sr-only">상품삭제</em></span>
 														</button>
 													</span>
@@ -324,7 +332,9 @@
 										<div class="order_desc">
 											<div class="form_box">
 												<div class="form_field">
-													<input th:id="|od_item_${cart.cartSq}|" name="cartSqArr" type="checkbox" th:value="${cart.cartSq}" th:checked="${cart.soldoutYn.equals('N') and cart.ordCanYn.equals('Y')}" th:disabled="${cart.soldoutYn.equals('Y') or cart.ordCanYn.equals('N')}">
+													<input th:id="|od_item_${cart.cartSq}|" name="cartSqArr" type="checkbox" th:value="${cart.cartSq}"
+														   th:checked=   "${cart.soldoutYn.equals('N') and cart.ordCanYn.equals('Y') and cart.getGoodsQty() >= cart.getMinOrdQty() and cart.getGoodsQty() <= cart.getMaxOrdQty()}"
+														   th:disabled="${!(cart.soldoutYn.equals('N') and cart.ordCanYn.equals('Y') and cart.getGoodsQty() >= cart.getMinOrdQty() and cart.getGoodsQty() <= cart.getMaxOrdQty())}"/>
 													<label th:for="|od_item_${cart.cartSq}|">
 														<span class="sr-only">상품선택</span>
 													</label>
@@ -362,6 +372,8 @@
 													<p th:if="${cart.amtTmtbSq > 0 and cart.applyAmtSectionYn == 'N'}" class="notApplyTmtb"><a href="" class="btn_moresale"><span class="tag primary">SALE</span>다다익선 상품보기</a></p>
 													<p th:if="${cart.soldoutYn.equals('Y') and cart.ordCanYn.equals('Y')}">품절된 상품입니다.</p>
 													<p th:if="${cart.ordCanYn.equals('N')}">해당 상품은 구매 불가능한 상품입니다.</p>
+													<p th:if="${cart.soldoutYn.equals('N') and cart.ordCanYn.equals('Y') and cart.goodsQty < cart.minOrdQty}" th:text="|해당 상품은 최소 ${cart.minOrdQty}개부터 구매 가능합니다.|"></p>
+													<p th:if="${cart.soldoutYn.equals('N') and cart.ordCanYn.equals('Y') and cart.goodsQty > cart.maxOrdQty}" th:text="|해당 상품은 최대 ${cart.maxOrdQty}개까지 구매 가능합니다.|"></p>
 												</div>
 											</div>
 											<div class="calc_box">
@@ -390,7 +402,7 @@
 														</button>
 													</span>
 													<span>
-														<button type="button" class="btn_delete" th:onclick="|deleteCart(${cart.cartSq})|">
+														<button type="button" class="btn_delete" th:onclick="|deleteCart(${cart.cartSq}, 'cart')|">
 															<span><i class="ico ico_trash"></i><em class="sr-only">상품삭제</em></span>
 														</button>
 													</span>
@@ -749,7 +761,7 @@
 			return false;
 		});
 
-		function deleteCartAjax(cartArr) {
+		/*function deleteCartAjax(cartArr) {
 			if(cartArr.length < 1) {
 				mcxDialog.alert("삭제하실 상품을 선택해 주세요.");
 				return false;
@@ -773,9 +785,9 @@
 					getCartList(data);
 				}
 			});
-		}
+		}*/
 
-		function deleteCart(gbn) {
+		/*function deleteCart(gbn) {
 			let cartArr = [];
 			let confirmMessage = "";
 			if(gbn == "WMS_SELECT") {
@@ -809,13 +821,13 @@
 			}
 
 			mcxDialog.confirm(confirmMessage, {
-				cancelBtnText: "취소/닫기",		//취소 또는 닫기 버튼명
+				cancelBtnText: "취소/닫기",			//취소 또는 닫기 버튼명
 				sureBtnText  : "확인",				//처리문 버튼명
 				sureBtnClick : function () {
 					deleteCartAjax(cartArr);
 				}
 			});
-		}
+		}*/
 
 		$("input[name=cartSqArr]").on("change", function(e) {
 			let cartArr = [];
@@ -1023,69 +1035,34 @@
 			// list[listIndex]가 null이 아니라면
 			if(info != null) {
 				if (info.ordCanYn == "N") {		// 주문 불가
-					mcxDialog.confirmC(info.goodsNm + " 상품은 구매 할 수 없습니다. 제외하고 계속 주문하시겠습니까?", { //내용
-						btn     : ["취소", "확인"],
-						btnClick: function (index) {
-							if (index == 1) { //button1 일때 처리문
-								orderFlag = false;
-								return false;
-							} else {	//button2 일때 처리문
-								fnCheckOffCartSqArr(cartSqArr, info.cartSq);
-								fnOrderValidation(list, listIndex, cartSqArr, allYn);
-							}
-						}
-					});
+					let message = info.goodsNm + " 상품은 구매 할 수 없습니다. 제외하고 계속 주문하시겠습니까?";
+					fnRemoveCartSqConfirm(message, cartSqArr, info.cartSq, list, listIndex, allYn);
 				} else if (info.soldoutYn == "Y") {		// 품절
 					if (info.goodsStat == "G008_70" || info.ordCanQty < info.minOrdQty) {		// 상품 상태가 품절이거나 주문 가능 수량이 최소주문수량보다 적을경우
-						mcxDialog.confirmC(info.goodsNm + " 상품은 품절입니다. 제외하고 계속 주문하시겠습니까?", { //내용
-							btn     : ["취소", "확인"],
-							btnClick: function (index) {
-								if (index == 1) { //button1 일때 처리문
-									orderFlag = false;
-									return false;
-								} else {	//button2 일때 처리문
-									fnCheckOffCartSqArr(cartSqArr, info.cartSq);
-									fnOrderValidation(list, listIndex, cartSqArr, allYn);
-								}
-							}
-						});
-					} else if (info.ordCanQty == 0) {		// 주문 가능 수량이 0일경우
-						mcxDialog.confirmC(info.goodsNm + "의 " + info.colorNm + " 옵션이 품절되었습니다. 제외하고 계속 주문하시겠습니까?", { //내용
-							btn     : ["취소", "확인"],
-							btnClick: function (index) {
-								if (index == 1) { //button1 일때 처리문
-									orderFlag = false;
-									return false;
-								} else {	//button2 일때 처리문
-									fnCheckOffCartSqArr(cartSqArr, info.cartSq);
-									fnOrderValidation(list, listIndex, cartSqArr, allYn);
-								}
-							}
-						});
+						let message = info.goodsNm + " 상품은 품절입니다. 제외하고 계속 주문하시겠습니까?";
+						fnRemoveCartSqConfirm(message, cartSqArr, info.cartSq, list, listIndex, allYn)
+					} else if (info.goodsQty < info.ordCanQty) {		// 주문 가능 수량이 0일경우
+						let message = info.goodsNm + "의 " + info.colorNm + " 옵션이 품절되었습니다. 제외하고 계속 주문하시겠습니까?";
+						fnRemoveCartSqConfirm(message, cartSqArr, info.cartSq, list, listIndex, allYn)
 					} else if (listIndex < list.length) {
 						// 혹시 else일 경우
 						fnOrderValidation(list, listIndex, cartSqArr, allYn);
 					}
-				} else if (info.minOrdQty > info.goodsQty) {		// 최소 주문 수량보다 장바구니에 적게 들어왔을 경우
+				} else if (info.ordCanQty < info.goodsQty) {		// 최소 주문 수량보다 장바구니에 적게 들어왔을 경우
 					let message;
 					if ("G056_S" == info.goodsType) {
-						message = info.goodsNm + " 의" + info.itemNm + "/" + info.colorNm + "/" + info.optCd2 + "의 수량이 부족합니다.\n구매가능 수량은 " + info.minOrdQty + "개입니다.\n구매가능 수량만큼 주문하시겠습니까?";
+						message = info.goodsNm + " 의" + info.itemNm + "/" + info.colorNm + "/" + info.optCd2 + "의 수량이 부족합니다.\n구매가능 수량은 " + info.ordCanQty + "개입니다.\n구매가능 수량만큼 주문하시겠습니까?";
 					} else {
-						message = info.goodsNm + " 의" + info.colorNm + "/" + info.optCd2 + "의 수량이 부족합니다.\n구매가능 수량은 " + info.minOrdQty + "개입니다.\n구매가능 수량만큼 주문하시겠습니까?";
+						message = info.goodsNm + " 의" + info.colorNm + "/" + info.optCd2 + "의 수량이 부족합니다.\n구매가능 수량은 " + info.ordCanQty + "개입니다.\n구매가능 수량만큼 주문하시겠습니까?";
 					}
 
-					mcxDialog.confirmC(message, { //내용
-						btn     : ["취소", "확인"],
-						btnClick: function (index) {
-							if (index == 1) { //button1 일때 처리문
-								orderFlag = false;
-								return false;
-							} else {	//button2 일때 처리문
-								updateGoodsQty(info.cartSq, info.minOrdQty);
-								fnOrderValidation(list, listIndex, cartSqArr, allYn);
-							}
-						}
-					});
+					fnUpdateConfirmChangeQty(message, info.cartSq, info.minOrdQty, list, listIndex, cartSqArr, allYn);
+				} else if (info.goodsQty < info.minOrdQty) {
+					let message = info.goodsNm + " 의 최소 구매수량은 " + info.minOrdQty + "개입니다.\n최소 구매 수량으로 주문하시겠습니까?";
+					fnUpdateConfirmChangeQty(message, info.cartSq, info.minOrdQty, list, listIndex, cartSqArr, allYn);
+				} else if (info.goodsQty > info.maxOrdQty) {
+					let message = info.goodsNm + " 의 최대 구매 사능 수량은 " + info.maxOrdQty + "개입니다. 최대 구매 가능한 수량으로 주문하시겠습니까?";
+					fnUpdateConfirmChangeQty(message, info.cartSq, info.minOrdQty, list, listIndex, cartSqArr, allYn);
 				} else if (listIndex < list.length) {
 					fnOrderValidation(list, listIndex, cartSqArr, allYn);
 				} else {
@@ -1096,6 +1073,34 @@
 			}
 		}
 
+		function fnUpdateConfirmChangeQty(message, cartSq, goodsQty, list, listIndex, cartSqArr, allYn) {
+			mcxDialog.confirmC(message, { //내용
+				btn     : ["취소", "확인"],
+				btnClick: function (index) {
+					if (index == 1) { //button1 일때 처리문
+						orderFlag = false; return false;
+					} else {	//button2 일때 처리문
+						updateGoodsQty(cartSq, goodsQty);
+						fnOrderValidation(list, listIndex, cartSqArr, allYn);
+					}
+				}
+			});
+		}
+
+		function fnRemoveCartSqConfirm(message, cartSqArr, cartSq, list, listIndex, allYn) {
+			mcxDialog.confirmC(message, { //내용
+				btn     : ["취소", "확인"],
+				btnClick: function (index) {
+					if (index == 1) { //button1 일때 처리문
+						orderFlag = false; return false;
+					} else {	//button2 일때 처리문
+						fnCheckOffCartSqArr(cartSqArr, info.cartSq);
+						fnOrderValidation(list, listIndex, cartSqArr, allYn);
+					}
+				}
+			});
+		}
+
 		function fnCheckOffCartSqArr(cartSqArr, cartSq) {
 			// 체크박스 해제
 			$("#cartListForm input[name=cartSqArr]").each(function () {

src/main/webapp/WEB-INF/views/web/cart/CartListAjaxFormWeb_20210319.html

@@ -1,1019 +0,0 @@
-<html lang="ko"
-	  xmlns:th="http://www.thymeleaf.org">
-<form id="cartListForm" method="post" action="/order/noMember">
-	<!--<input type="hidden" name="cartCpnDcAmt" id="cartCpnDcAmt" th:value="${param.cartCpnDcAmt}" />-->
-
-	<!-- CONT-BODY -->
-	<div class="od_cont">
-		<div class="sec_head shotDelvSelect">
-			<div class="tbl type4">
-				<table>
-					<colgroup>
-						<col width="150">
-						<col width="*">
-					</colgroup>
-					<tbody>
-					<tr>
-						<th>
-							배송방법 선택
-						</th>
-						<td>
-							<div class="form_field">
-								<div>
-									<input type="radio" name="shotDelvUseYn" id="blt_ship1" value="Y" th:checked="${order.shotCanYn.equals('Y')}">
-									<label for="blt_ship1"><span><em class="tag">총알배송</em><span th:text="|${order.shotDelvDt}일 24:00 까지 도착|"></span></span></label>
-								</div>
-								<div>
-									<input type="radio" name="shotDelvUseYn" id="blt_ship2" value="N" th:checked="${!order.shotCanYn.equals('Y')}">
-									<label for="blt_ship2"><span>총알 배송 안함</span></label>
-								</div>
-							</div>
-						</td>
-					</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-		<div class="sec_body">
-			<!-- 총알배송 -->
-			<div class="part_deliver wmsList" th:if="${wmsCartList != null and wmsCartList.size() > 0}">
-				<h3 class="subH2 mb20" th:if="${order.shotCanYn.equals('Y')}">
-					STYLE24 총알배송
-					<span class="ml10">오늘 자정까지 도착</span>
-				</h3>
-				<h3 class="subH2 mb20" th:if="${order.shotCanYn.equals('N')}">
-					STYLE24 일반배송
-				</h3>
-				<div class="tbl type2">
-					<table>
-						<colgroup>
-							<col width="900">
-							<col width="*">
-						</colgroup>
-						<tbody>
-						<th:block th:each="cart, status : ${wmsCartList}">
-							<tr class="cartInfo wmsCartInfo">
-								<input type="hidden" name="applyQtySectionYn" th:value="${cart.applyQtySectionYn}" />
-								<input type="hidden" name="applyAmtSectionYn" th:value="${cart.applyAmtSectionYn}" />
-								<input type="hidden" name="qtyTmtbSq" th:value="${cart.qtyTmtbSq}" />
-								<input type="hidden" name="qtyTmtbNm" th:value="${cart.qtyTmtbNm}" />
-								<input type="hidden" name="amtTmtbSq" th:value="${cart.amtTmtbSq}" />
-								<input type="hidden" name="amtTmtbNm" th:value="${cart.amtTmtbNm}" />
-								<input type="hidden" name="currPrice" th:value="${cart.currPrice}" />
-								<input type="hidden" name="soldoutYn" th:value="${cart.soldoutYn}" />
-								<input type="hidden" name="tmtbDcAmt" th:value="${cart.tmtbDcAmt}" />
-								<input type="hidden" name="cartSq" th:value="${cart.cartSq}" />
-
-								<td>
-									<!-- 주문가능 상품 -->
-									<div class="info_item" th:classappend="${cart.soldoutYn.equals('Y')} ? unable"> <!-- 주문불가시 class="unable" 추가 / 인풋, 버튼 disable 처리 -->
-										<div class="form_box">
-											<p class="form_field">
-												<input th:id="|od_item_${cart.cartSq}|" name="cartSqArr" type="checkbox" th:value="${cart.cartSq}" th:checked="${cart.soldoutYn.equals('N')}" th:disabled="${cart.soldoutYn.equals('Y')}"/>
-												<label th:for="|od_item_${cart.cartSq}|">
-													<span class="sr-only">상품선택</span>
-												</label>
-											</p>
-										</div>
-										<div class="thumb_box">
-											<a href="">
-												<img th:src="${IMG_PATH} + '/' + ${cart.sysImgNm}" src="/" width="100%" alt="">
-											</a>
-										</div>
-										<div class="info_box">
-											<p class="od_name">
-												<a href="">
-													<span class="brand" th:text="|${cart.brandEnm} ${cart.brandKnm}|"></span>
-													<span th:if="${!#strings.isEmpty(cart.delvResDt)}" class="reserv_date" th:text="|${cart.delvResDt} 배송예정|"></span>
-													<span class="name" th:text="${cart.goodsNm}"></span>
-												</a>
-											</p>
-											<p class="od_opt" th:each="opt, index : ${cart.itemNmArr}">
-												<span class="option"><em th:text="${cart.itemNmArr[index.index]} + '_' + ${cart.optCdArr[index.index]}"></em></span>
-											</p>
-											<p class="od_opt">
-												<span class="count">수량:<em th:text="${cart.goodsQty}"></em>개</span>
-											</p>
-
-											<p class="od_modify">
-												<button type="button" class="btn_opt_pop" th:onclick="|fnChangeCartOptCd(${cart.cartSq})|"><span>옵션/수량변경</span></button>
-											</p>
-											<!-- 다다익선 적용 -->
-											<div class="od_moresale applyTmtb" th:if="${(cart.qtyTmtbSq > 0 and cart.applyQtySectionYn == 'Y') or (cart.amtTmtbSq > 0 and cart.applyAmtSectionYn == 'Y')}">
-												<a href="" class="btn_moresale">
-													<i class="ico ico_saletag"></i><span>다다익선 할인적용!</span>
-												</a>
-												<div class="li_moresale applyTmtbNm">
-													<ul>
-														<li th:if="${cart.qtyTmtbSq > 0 and cart.applyQtySectionYn == 'Y'}" th:text="${cart.qtyTmtbNm}"></li>
-														<li th:if="${cart.amtTmtbSq > 0 and cart.applyAmtSectionYn == 'Y'}" th:text="${cart.amtTmtbNm}"></li>
-													</ul>
-												</div>
-											</div>
-											<!-- 다다익선 미적용 -->
-											<div class="od_moresale notApplyTmtb" th:if="${(cart.qtyTmtbSq > 0 and cart.applyQtySectionYn == 'N') or (cart.amtTmtbSq > 0 and cart.applyAmtSectionYn == 'N')}">
-												<a href="" class="btn_moresale">
-													<i class="ico ico_saletag"></i><span>다다익선 상품보기</span>
-												</a>
-												<div class="li_moresale notApplyTmtbNm">
-													<ul>
-														<li th:if="${cart.qtyTmtbSq > 0 and cart.applyQtySectionYn == 'N'}" th:inline="text">[[${cart.qtyTmtbNm}]]<a href=''>대상 상품 보기</a></li>
-														<li th:if="${cart.amtTmtbSq > 0 and cart.applyAmtSectionYn == 'N'}" th:inline="text">[[${cart.amtTmtbNm}]]<a href=''>대상 상품 보기</a></li>
-													</ul>
-												</div>
-											</div>
-											<!-- 주문불가시 안내추가 -->
-											<div class="info_unable" th:if="${cart.soldoutYn.equals('Y')}">
-												해당상품은 구매가 불가능한 상품입니다. / 상품이 품절되었습니다.
-											</div>
-											<!-- //주문불가시 안내추가 -->
-										</div>
-										<div class="info_calc">
-											<p class="price" th:if="${cart.tmtbDcAmt < cart.currPrice}">
-												<span class="selling_price" th:text="|${#numbers.formatInteger(cart.tmtbDcAmt, 1, 'COMMA')} 원|"></span>
-												<del th:text="|${#numbers.formatInteger(cart.currPrice, 1, 'COMMA')} 원|"></del>
-											</p>
-											<p class="price" th:if="${cart.tmtbDcAmt == cart.currPrice}">
-												<span class="selling_price" th:text="|${#numbers.formatInteger(cart.currPrice, 1, 'COMMA')} 원|"></span>
-											</p>
-											<p class="point"><span th:text="${#numbers.formatInteger(cart.savePntAmt, 1, 'COMMA')}"></span>p 적립예정</p>
-											<p>
-												<button th:if="${cart.soldoutYn.equals('Y')}" type="button" class="btn btn_sm" disabled><span>구매불가</span></button>
-												<button th:if="${cart.soldoutYn.equals('N')}" type="button" class="btn btn_primary btn_sm" th:onclick="|fnSubmitNoMember(${cart.cartSq})|"><span>즉시구매</span></button>
-											</p>
-											<p class="util">
-												<span>
-													<button type="button" class="btn_favorite" th:classappend="${cart.wishCnt > 0} ? active" onclick="cfnPutWishList(this)" th:goodsCd="${cart.goodsCd}" th:ithrCd="${cart.ithrCd}" th:contentsLoc="${cart.contentsLoc}">
-														<span>
-															<i class="ico ico_like2"></i>
-															<em class="sr-only">관심상품 추가</em>
-														</span>
-													</button>
-												</span>
-												<span>
-													<button type="button" class="btn_delete" th:onclick="|deleteCart(${cart.cartSq})|"><span><i class="ico ico_trash"></i><em class="sr-only">상품삭제</em></span></button>
-												</span>
-											</p>
-										</div>
-									</div>
-									<!-- //주문가능 상품 -->
-								</td>
-								<td class="merge_row delvFeeArea" th:classappend="|delv_${cart.delvFeeCd}|" th:if="${cart.firstCompYn == 'Y'}" th:rowspan="${wmsCartList.size()}"> <!-- 같은 데이터 노출시 동일 영역끼리 병합 : 클래스명 merge_row 추가 -->
-									<div class="info_dlvr">
-										<span class="dlvr_fee" th:if="${cart.delvFee == 0}">배송비 무료</span>
-										<span class="dlvr_fee" th:if="${cart.delvFee > 0}" th:text="|배송비 ${#numbers.formatInteger(cart.delvFee, 1, 'COMMA')} 원|"></span>
-										<a href="#" target="_blank" th:if="${cart.delvFee > 0}">배송비 SAVE 상품 보기</a>
-									</div>
-								</td>
-							</tr>
-						</th:block>
-						</tbody>
-					</table>
-				</div>
-				<div class="btn_area">
-					<button type="button" class="btn btn_default" onclick="deleteCart('WMS_SELECT')"><span>선택 삭제</span></button>
-					<button type="button" class="btn btn_default" onclick="deleteCart('WMS_ALL')"><span>전체 삭제</span></button>
-				</div>
-			</div>
-			<!-- //총알배송 -->
-
-			<!-- 업체직배송 -->
-			<div class="part_deliver delvList" th:if="${delvCartList != null and delvCartList.size() > 0}">
-				<h3 class="subH2 mb20">
-					업체직배송
-				</h3>
-				<div class="tbl type2">
-					<table>
-						<colgroup>
-							<col width="900">
-							<col width="*">
-						</colgroup>
-						<tbody>
-						<th:block th:each="cart, status : ${delvCartList}">
-							<tr class="cartInfo delvCartInfo">
-								<input type="hidden" name="applyQtySectionYn" th:value="${cart.applyQtySectionYn}" />
-								<input type="hidden" name="applyAmtSectionYn" th:value="${cart.applyAmtSectionYn}" />
-								<input type="hidden" name="qtyTmtbSq" th:value="${cart.qtyTmtbSq}" />
-								<input type="hidden" name="qtyTmtbNm" th:value="${cart.qtyTmtbNm}" />
-								<input type="hidden" name="amtTmtbSq" th:value="${cart.amtTmtbSq}" />
-								<input type="hidden" name="amtTmtbNm" th:value="${cart.amtTmtbNm}" />
-								<input type="hidden" name="currPrice" th:value="${cart.currPrice}" />
-								<input type="hidden" name="soldoutYn" th:value="${cart.soldoutYn}" />
-								<input type="hidden" name="tmtbDcAmt" th:value="${cart.tmtbDcAmt}" />
-								<input type="hidden" name="cartSq" th:value="${cart.cartSq}" />
-
-								<td>
-									<div class="info_item" th:classappend="${cart.soldoutYn.equals('Y')} ? unable">
-										<div class="form_box">
-											<p class="form_field">
-												<input th:id="|od_item_${cart.cartSq}|" name="cartSqArr" type="checkbox" th:value="${cart.cartSq}" th:checked="${cart.soldoutYn.equals('N')}" th:disabled="${cart.soldoutYn.equals('Y')}"/>
-												<label th:for="|od_item_${cart.cartSq}|">
-													<span class="sr-only">상품선택</span>
-												</label>
-											</p>
-										</div>
-										<div class="thumb_box">
-											<a href="">
-												<img th:src="${IMG_PATH} + '/' + ${cart.sysImgNm}" src="/" width="100%" alt="">
-											</a>
-										</div>
-										<div class="info_box">
-											<p class="od_name">
-												<a href="">
-													<span class="brand" th:text="|${cart.brandEnm} ${cart.brandKnm}|"></span>
-													<span class="name" th:text="${cart.goodsNm}"></span>
-												</a>
-											</p>
-											<p class="od_opt" th:each="opt, index : ${cart.itemNmArr}">
-												<span class="option"><em th:text="${cart.itemNmArr[index.index]} + '_' + ${cart.optCdArr[index.index]}"></em></span>
-											</p>
-											<p class="od_opt">
-												<span class="count">수량:<em th:text="${cart.goodsQty}"></em>개</span>
-											</p>
-											<p class="od_modify">
-												<button type="button" class="btn_opt_pop" th:onclick="|fnChangeCartOptCd(${cart.cartSq})|"><span>옵션/수량변경</span></button>
-											</p>
-											<!-- 다다익선 적용 -->
-											<div class="od_moresale applyTmtb" th:if="${(cart.qtyTmtbSq > 0 and cart.applyQtySectionYn == 'Y') or (cart.amtTmtbSq > 0 and cart.applyAmtSectionYn == 'Y')}">
-												<a href="" class="btn_moresale">
-													<i class="ico ico_saletag"></i><span>다다익선 할인적용!</span>
-												</a>
-												<div class="li_moresale applyTmtbNm">
-													<ul>
-														<li th:if="${cart.qtyTmtbSq > 0 and cart.applyQtySectionYn == 'Y'}" th:text="${cart.qtyTmtbNm}"></li>
-														<li th:if="${cart.amtTmtbSq > 0 and cart.applyAmtSectionYn == 'Y'}" th:text="${cart.amtTmtbNm}"></li>
-													</ul>
-												</div>
-											</div>
-											<!-- 다다익선 미적용 -->
-											<div class="od_moresale notApplyTmtb" th:if="${(cart.qtyTmtbSq > 0 and cart.applyQtySectionYn == 'N') or (cart.amtTmtbSq > 0 and cart.applyAmtSectionYn == 'N')}">
-												<a href="" class="btn_moresale">
-													<i class="ico ico_saletag"></i><span>다다익선 상품보기</span>
-												</a>
-												<div class="li_moresale notApplyTmtbNm">
-													<ul>
-														<li th:if="${cart.qtyTmtbSq > 0 and cart.applyQtySectionYn == 'N'}" th:text="${cart.qtyTmtbNm}"><a href="">대상 상품 보기</a></li>
-														<li th:if="${cart.amtTmtbSq > 0 and cart.applyAmtSectionYn == 'N'}" th:text="${cart.amtTmtbNm}"><a href="">대상 상품 보기</a></li>
-													</ul>
-												</div>
-											</div>
-											<!-- 주문불가시 안내추가 -->
-											<div class="info_unable" th:if="${cart.soldoutYn.equals('Y')}">
-												해당상품은 구매가 불가능한 상품입니다. / 상품이 품절되었습니다.
-											</div>
-											<!-- //주문불가시 안내추가 -->
-										</div>
-										<div class="info_calc">
-											<p class="price" th:if="${cart.tmtbDcAmt < cart.currPrice}">
-												<span class="selling_price" th:text="|${#numbers.formatInteger(cart.tmtbDcAmt, 1, 'COMMA')} 원|"></span>
-												<del th:text="|${#numbers.formatInteger(cart.currPrice, 1, 'COMMA')} 원|"></del>
-											</p>
-											<p class="price" th:if="${cart.tmtbDcAmt == cart.currPrice}">
-												<span class="selling_price" th:text="|${#numbers.formatInteger(cart.currPrice, 1, 'COMMA')} 원|"></span>
-											</p>
-											<p class="point"><span th:text="${#numbers.formatInteger(cart.savePntAmt, 1, 'COMMA')}"></span>p 적립예정</p>
-											<p>
-												<button th:if="${cart.soldoutYn.equals('Y')}" type="button" class="btn btn_sm" disabled><span>구매불가</span></button>
-												<button th:if="${cart.soldoutYn.equals('N')}" type="button" class="btn btn_primary btn_sm" th:onclick="|fnSubmitNoMember(${cart.cartSq})|"><span>즉시구매</span></button>
-											</p>
-											<p class="util">
-										<span>
-											<button type="button" class="btn_favorite" th:classappend="${cart.wishCnt > 0} ? active" onclick="cfnPutWishList(this)" th:goodsCd="${cart.goodsCd}" th:ithrCd="${cart.ithrCd}" th:contentsLoc="${cart.contentsLoc}"><span><i class="ico ico_like2"></i><em class="sr-only">관심상품 추가</em></span></button>
-										</span>
-												<span>
-											<button type="button" class="btn_delete" th:onclick="|deleteCart(${cart.cartSq})|"><span><i class="ico ico_trash"></i><em class="sr-only">상품삭제</em></span></button>
-										</span>
-											</p>
-										</div>
-									</div>
-								</td>
-								<td class="merge_row delvFeeArea" th:classappend="|delv_${cart.delvFeeCd}|" th:if="${cart.firstCompYn == 'Y'}" th:rowspan="${cart.compCnt}"> <!-- 같은 데이터 노출시 동일 영역끼리 병합 : 클래스명 merge_row 추가 -->
-									<div class="info_dlvr">
-										<span class="dlvr_fee" th:if="${cart.delvFee == 0}">배송비 무료</span>
-										<span class="dlvr_fee" th:if="${cart.delvFee > 0}" th:text="|배송비 ${#numbers.formatInteger(cart.delvFee, 1, 'COMMA')} 원|"></span>
-										<span class="dlvr_shop" th:text="|${cart.supplyCompNm} 업체직배송|"></span>
-										<a href="#" target="_blank" th:if="${cart.delvFee > 0}">배송비 SAVE 상품 보기</a>
-									</div>
-								</td>
-							</tr>
-						</th:block>
-						</tbody>
-					</table>
-				</div>
-				<div class="btn_area">
-					<button type="button" class="btn btn_default" onclick="deleteCart('DELV_SELECT')"><span>선택 삭제</span></button>
-					<button type="button" class="btn btn_default" onclick="deleteCart('DELV_ALL')"><span>전체 삭제</span></button>
-				</div>
-			</div>
-			<!-- //업체직배송 -->
-		</div>
-	</div>
-	<div class="od_side">
-		<div class="area_order">
-			<div class="tit_box">
-				<h3>결제 정보</h3>
-				<span>
-				<em class="number" th:text="${order.totCartCnt}"></em>개의 상품
-			</span>
-			</div>
-			<div class="od_amount_box">
-				<dl>
-					<div>
-						<dt>상품금액</dt>
-						<dd><em class="sumCurrPrice" th:text="${#numbers.formatInteger(order.sumOrdAmt, 1, 'COMMA')}"></em> 원</dd>
-					</div>
-					<div>
-						<dt>배송비</dt>
-						<dd><em class="totDelvFee" th:text="${#numbers.formatInteger(order.totDelvFee, 1, 'COMMA')}"></em> 원</dd>
-					</div>
-					<div>
-						<dt>할인금액</dt>
-						<dd><span class="disc_amount"><em class="totDcAmt" id="totDcAmt" th:text="${#numbers.formatInteger(order.totDcAmt, 1, 'COMMA')}"></em> 원</span></dd>
-					</div>
-				</dl>
-			</div>
-			<div class="totalprice_box">
-				<dl>
-					<dt>총 결제 예정 금액</dt>
-					<dd data-weight="price" data-font="lato"><span class="sumRealPayAmt" id="sumRealPayAmt" th:text="${#numbers.formatInteger(order.sumRealPayAmt + order.totDelvFee, 1, 'COMMA')}"></span> 원</dd>
-				</dl>
-			</div>
-			<div class="btn_box">
-				<button class="btn btn_primary btn_block btn_md"><span>주문하기</span></button>
-			</div>
-		</div>
-		<div class="area_salecoupon">
-			<h4>할인코드 입력</h4>
-			<div class="form_field">
-				<div class="input_wrap form_full">
-					<label class="input_label sr-only">할인코드입력</label>
-					<input type="text" id="serialCpnNm" class="form_control" placeholder="할인코드를 입력해주세요.">
-				</div>
-				<button type="button" class="btn btn_dark btn_default" onclick="serialCpnApply()"><span>적용</span></button>
-			</div>
-			<div class="coupon_box">
-				<div class="coupon">
-					<div>
-						<p class="cp_name"></p>
-						<p class="cp_cont">
-							<!--<span><em>12,399,900</em>원</span>
-							<span><em>40%</em></span>-->
-							<span class="cp_dc_val"></span>
-						</p>
-						<p class="cp_condition">
-							<!--500,000원 이상 구매 시 최대 50,000원 할인
-							<span><em class="tag">99장 보유</em></span>-->
-						</p>
-					</div>
-					<p class="cp_date">
-						<span class="availStdt"></span>&nbsp;~&nbsp;<span class="availEddt"></span>
-					</p>
-					<button type="button" class="btn_close_code" onClick="cancelCartCpn()">
-					<span>
-						<i class="ico ico_close1"></i>
-						<em class="sr-only">닫기</em>
-					</span>
-					</button>
-				</div>
-				<div class="info_coupon">
-					<button type="button" id="btn_cpinfo_pop">
-						<span>쿠폰 사용안내</span>
-					</button>
-				</div>
-			</div>
-		</div>
-		<div class="area_saleitem">
-
-		</div>
-	</div>
-	<div class="clear"></div>
-	<!-- // CONT-BODY -->
-</form>
-
-<!-- 옵션변경 팝업 -->
-<div class="modal fade od_pop opt_modify_pop" id="optModifyPop" tabindex="-1" role="dialog" aria-labelledby="optModifyLabel" aria-hidden="true"></div>
-<!-- //옵션변경 팝업 -->
-
-<!-- 즉시구매 form -->
-<form id="cartInfoForm" method="post" action="/order/noMember"></form>
-
-<script th:inline="javascript">
-	let sumRealPayAmt = [[${order.sumRealPayAmt + order.totDelvFee}]];
-	let totDcAmt = [[${order.totDcAmt}]];
-
-	function NotApplyTmtbCartList() {
-		let tmtbSq = 0;
-		let tmtbNm = "";
-		let goodsList = {
-			brandNm : "",
-			goodsNm : "",
-			currPrice : 0,
-			imgPath : ""
-		}
-	}
-
-	$(document).ready(function() {
-		/*let compsList = [];
-		let temp 			= new Object;
-		temp.goodsCd 		= "10770353";
-		temp.optCd 			= "9383682-1";
-		temp.goodsQty 		= 1;
-		temp.goodsType 		= "G056_N";
-		temp.cartGb 		= "C";
-		temp.afLinkCd 		= "afLinkCd";
-		temp.ithrCd 		= "G027_ZZZ";
-		temp.contentsLoc 	= "G028_YYY";
-		temp.planDtlSq 		= "123";
-		compsList.push(temp);
-		cfnAddCart(compsList);*/
-		
-		
-		
-		if([[${!order.shotCanYn.equals('Y')}]]) {
-			// $(".shotDelvSelect").hide();
-		}
-
-		$("#cartListForm .area_salecoupon .coupon_box").hide();
-
-		let loginInfo = [[${loginInfo}]];
-		if(!loginInfo || loginInfo.custNo == null || loginInfo.custNo == 0) {
-			$("#cartListForm .area_salecoupon").hide();
-		}
-
-		// 다다익선 할인 대상(미적용) 리스트
-		notApplyTmtbAreaList();
-
-		/* 세트상품 장바구니 */
-		/*let compsList = [];
-		let temp = new Object;
-		temp.goodsCd = "STYS00000042";
-		temp.itemCd = "14373746";
-		temp.optCd = "베이지110";
-		temp.goodsQty = 1;
-		temp.goodsType = "G056_S";
-		temp.cartGb = "O";
-		temp.afLinkCd = "afLinkCd";
-		temp.ithrCd = "G027_ZZZ";
-		temp.contentsLoc = "G028_YYY";
-		temp.planDtlSq = "123";
-		compsList.push(temp);
-		temp = new Object;
-		temp.goodsCd = "STYS00000042";
-		temp.itemCd = "14373769";
-		temp.optCd = "블루110";
-		temp.goodsQty = 1;
-		temp.goodsType = "G056_S";
-		temp.cartGb = "O";
-		temp.afLinkCd = "afLinkCd";
-		temp.ithrCd = "G027_ZZZ";
-		temp.contentsLoc = "G028_YYY";
-		temp.planDtlSq = "123";
-		compsList.push(temp);
-		temp = new Object;
-		temp.goodsCd = "STYS00000042";
-		temp.itemCd = "14373770";
-		temp.optCd = "아이보리110";
-		temp.goodsQty = 1;
-		temp.goodsType = "G056_S";
-		temp.cartGb = "O";
-		temp.afLinkCd = "afLinkCd";
-		temp.ithrCd = "G027_ZZZ";
-		temp.contentsLoc = "G028_YYY";
-		temp.planDtlSq = "123";
-		compsList.push(temp);
-
-		cfnAddCart(compsList);*/
-
-		/*let compsList = [];
-		let temp = new Object;
-		temp.goodsCd = "14373686";
-		temp.optCd = "챠콜그레이150";
-		temp.goodsQty = 2;
-		temp.goodsType = "G056_D";
-		temp.dealGoodsCd = "STYD000000025"
-		temp.cartGb = "O";
-		temp.afLinkCd = "afLinkCd";
-		temp.ithrCd = "G027_ZZZ";
-		temp.contentsLoc = "G028_YYY";
-		temp.planDtlSq = "123";
-		compsList.push(temp);
-
-		temp = new Object;
-		temp.goodsCd = "14373710";
-		temp.optCd = "L핑크130";
-		temp.goodsQty = 3;
-		temp.goodsType = "G056_D";
-		temp.dealGoodsCd = "STYD000000025"
-		temp.cartGb = "O";
-		temp.afLinkCd = "afLinkCd";
-		temp.ithrCd = "G027_ZZZ";
-		temp.contentsLoc = "G028_YYY";
-		temp.planDtlSq = "123";
-		compsList.push(temp);
-
-		cfnAddCart(compsList);*/
-	});
-
-	function notApplyTmtbAreaList() {
-		let notApplyQtyTmtbList = new Array();
-		let notApplyAmtTmtbList = new Array();
-
-		// 수량 다다익선 조회
-		$("#cartListForm input[name=qtyTmtbSq]").each(function (index) {
-			if($(this).val() != "0" && $(this).parent().find("input[name=applyQtySectionYn]").val() == "N") {
-				let obj = new Object();
-				obj.tmtbSq = $(this).val();
-				obj.tmtbNm = $(this).parent().find("input[name=qtyTmtbNm]").val();
-				obj.currPrice = $(this).parent().find("input[name=currPrice]").val();
-				obj.goodsNm = $(this).parent().find(".info_box").find(".name").text();
-				obj.brandNm = $(this).parent().find(".info_box").find(".brand").text();
-				obj.imgPath = $(this).parent().find(".info_item").find(".thumb_box img").attr("src");
-
-				notApplyQtyTmtbList.push(obj);
-			}
-
-			if($(this).parent().find("input[name=applyAmtSectionYn]").val() == "N") {	   // 다다익선 금액은 기본상품만 가져오면됨 (N은 기본상품에 걸려있음)
-				let obj = new Object();
-				obj.tmtbSq = $(this).parent().find("input[name=amtTmtbSq]").val();
-				obj.tmtbNm = $(this).parent().find("input[name=amtTmtbNm]").val();
-
-				notApplyAmtTmtbList.push(obj);
-			}
-		});
-
-		// 수량 다다익선 정렬
-		var t = new Object();
-		for (let i = 0; i < notApplyQtyTmtbList.length; i++) {
-			for (let j = 0; j < notApplyQtyTmtbList.length - i - 1; j++) {
-				if (notApplyQtyTmtbList[j].tmtbSq > notApplyQtyTmtbList[j + 1].tmtbSq) {
-					t = notApplyQtyTmtbList[j];
-					notApplyQtyTmtbList[j] = notApplyQtyTmtbList[j + 1];
-					notApplyQtyTmtbList[j + 1] = t;
-				}
-			}
-		}
-
-		fnCreateNotApplyTmtbAreaList(notApplyQtyTmtbList, notApplyAmtTmtbList);
-	}
-
-	function fnCreateNotApplyTmtbAreaList(notApplyQtyTmtbList, notApplyAmtTmtbList) {
-		// 정렬 후 같은 다다익선 상품은 한 배열로 묶음
-		let tmtbQtyList = new Array();
-
-		for (let i = 0; i < notApplyQtyTmtbList.length; i++) {
-			let goods = notApplyQtyTmtbList[i];
-			let tmtbInfo = new Object();
-			let chk = false;
-			for (let j = 0; j < tmtbQtyList.length; j++) {
-				let tmtb = tmtbQtyList[j];
-				if (goods.tmtbSq == tmtb.tmtbSq) {
-					tmtbInfo = tmtbQtyList[j];
-					chk = true;
-				}
-			}
-
-			// 현재 상품 정보
-			let goodsInfo = new Object();
-			goodsInfo.brandNm = goods.brandNm;
-			goodsInfo.goodsNm = goods.goodsNm;
-			goodsInfo.imgPath = goods.imgPath;
-			goodsInfo.currPrice = goods.currPrice;
-
-			// 현재 상품 정보 다다익선 정보에 세팅
-			if (chk) {
-				tmtbInfo.goodsList.push(goodsInfo);
-			} else {
-				let obj = new Object();
-				obj.tmtbSq = goods.tmtbSq;
-				obj.tmtbNm = goods.tmtbNm;
-				obj.goodsList = new Array();
-				obj.goodsList.push(goodsInfo);
-				tmtbQtyList.push(obj);
-			}
-		}
-
-		// 수량 다다익선 HTML 작성
-		let tmtbHtml = "";
-		for(let i = 0 ; i < tmtbQtyList.length ; i++) {
-			let tmtb = tmtbQtyList[i];
-			tmtbHtml += '<div class="more_sale qtyNotApplyTmtbList">';
-			for(let j = 0 ; j < tmtb.goodsList.length ; j++) {
-				let goods = tmtb.goodsList[j];
-				tmtbHtml += '<div class="item_gd">\n' +
-					'				<figure>\n' +
-					'					<a href="">\n' +
-					'						<span class="thumb"><img src="';
-				tmtbHtml += goods.imgPath;
-				tmtbHtml += '" alt=""></span>\n' +
-					'					</a>\n' +
-					'					<figcaption>\n' +
-					'						<a href="">\n' +
-					'							<div class="brand">';
-				tmtbHtml += goods.brandNm;
-				tmtbHtml += '</div>\n' +
-					'							<div class="name">';
-				tmtbHtml += goods.goodsNm;
-				tmtbHtml += '</div>\n' +
-					'							<div class="price">\n' +
-					'								<span class="selling_price">';
-				tmtbHtml += Number(goods.currPrice).toLocaleString();
-				tmtbHtml += '</span>\n' +
-					'							</div>\n' +
-					'						</a>\n' +
-					'					</figcaption>\n' +
-					'				</figure>\n' +
-					'			</div>';
-			}
-
-			tmtbHtml += '<div class="txt">\n' +
-				'				<a href="">\n' +
-				'					<i class="ico ico_saletag"></i>\n' +
-				'					<input type="hidden" name="tmtbSq" value="' + tmtb.tmtbSq + '" />' +
-				'					<span>\n';
-			tmtbHtml += tmtb.tmtbNm;
-			tmtbHtml += '</span>\n' +
-				'				</a>\n' +
-				'			</div>\n' +
-				'		</div>';
-		}
-
-		// 금액 다다익선 정보 HTML 작성
-		for(let i = 0 ; i < notApplyAmtTmtbList.length ; i++) {
-			if (notApplyAmtTmtbList[i].tmtbSq != 0) {
-				let tmtb = notApplyAmtTmtbList[i];
-				tmtbHtml += '<div class="more_sale amtNotApplyTmtbList">\n' +
-					'			<div class="txt">\n' +
-					'				<a href="">\n' +
-					'					<i class="ico ico_saletag"></i>\n' +
-					'					<input type="hidden" name="tmtbSq" value="' + tmtb.tmtbSq + '" />' +
-					'					<span>';
-				tmtbHtml += tmtb.tmtbNm;
-				tmtbHtml += '</span>\n' +
-					'				</a>\n' +
-					'			</div>\n' +
-					'		</div>';
-			}
-		}
-
-		if(tmtbHtml != "") {
-			tmtbHtml = "<h4>다다익선 할인 대상이 있습니다.</h4>" + tmtbHtml;
-		}
-
-		$(".area_saleitem").html(tmtbHtml);
-	}
-
-	function cancelCartCpn() {
-		$("#cartListForm #sumRealPayAmt").text(Number(sumRealPayAmt).toLocaleString());
-		$("#cartListForm #totDcAmt").text(Number(totDcAmt).toLocaleString());
-		$("#cartListForm .area_salecoupon .coupon_box").hide();
-	}
-
-	function serialCpnApply() {
-		let cartArr = [];
-		let currPrices = [];
-		$("#cartListForm input[name=cartSqArr]:checked").each(function(index, item) {
-			cartArr.push($(this).val());
-			currPrices.push($(this).parents(".cartInfo").find("input[name=tmtbDcAmt]").val());
-		});
-
-		let data = {
-			rdCpnNm : $("#cartListForm #serialCpnNm").val(),
-			cartSqArr : cartArr,
-			currPrices : currPrices
-		}
-
-		let jsonData = JSON.stringify(data);
-
-		$.ajax( {
-			type: "POST",
-			url : '/cart/list/serialCpnApply',
-			contentType: 'application/json',
-			dataType : 'json',
-			data : jsonData,
-			success : function(result) {
-				$("#cartListForm .area_salecoupon .coupon_box").show();
-
-				// 합계 금액
-				$("#cartListForm #sumRealPayAmt").text(Number(sumRealPayAmt - result.serialCpnInfo.dcAmt).toLocaleString());
-				$("#cartListForm #totDcAmt").text(Number(totDcAmt - result.serialCpnInfo.dcAmt).toLocaleString());
-
-				// 쿠폰 정보
-				$("#cartListForm .area_salecoupon .cp_name").text(result.serialCpnInfo.cpnNm);
-				$("#cartListForm .area_salecoupon .cp_condition").html(result.serialCpnInfo.cpnDesc + "<span><em class='tag'>1장 보유</em></span>");
-				$("#cartListForm .area_salecoupon .availStdt").text(result.serialCpnInfo.availStdt);
-				$("#cartListForm .area_salecoupon .availEddt").text(result.serialCpnInfo.availEddt);
-				if(result.serialCpnInfo.dcWay == "G240_10") {
-					$("#cartListForm .area_salecoupon .cp_dc_val").html( "<em>" + Number(result.serialCpnInfo.dcVal).toLocaleString() + "</em> 원");
-				} else if (result.serialCpnInfo.dcWay == "G240_11") {
-					$("#cartListForm .area_salecoupon .cp_dc_val").html( "<em>" + result.serialCpnInfo.dcVal + "%</em>");
-				}
-			}
-		});
-	}
-
-	//다다익선 적용내역 보기
-	$(document).on('click','.shopping_bag .part_deliver .btn_moresale',function(e){
-		$(this).toggleClass('active');
-		$(this).parents('.od_moresale').find('.li_moresale').toggle();
-		return false;
-	});
-
-	//관심상품 등록
-	$(document).on('click','.shopping_bag .part_deliver .btn_favorite',function(e){
-		$(this).toggleClass('active');
-		return false;
-	});
-
-	function deleteCartAjax(cartArr) {
-		if(cartArr.length < 1) {
-			mcxDialog.alert("삭제하실 상품을 선택해 주세요.");
-			return false;
-		}
-
-		let data = {
-			cartSqArr : cartArr
-		}
-
-		let jsonData = JSON.stringify(data);
-
-		$.ajax( {
-			type: "POST",
-			url : '/cart/deleteCart',
-			contentType: 'application/json',
-			dataType : 'json',
-			data : jsonData,
-			success : function(result) {
-				mcxDialog.alert("삭제 되었습니다.");
-				getCartList();
-			}
-		});
-	}
-
-	function deleteCart(gbn) {
-		let cartArr = [];
-		let confirmMessage = "";
-		if(gbn == "WMS_SELECT") {
-			$("#cartListForm .wmsList input[name=cartSqArr]:checked").each(function () {
-				cartArr.push($(this).val());
-			});
-
-			confirmMessage = "총 " + cartArr.length + "개의 상품을 삭제합니다.";
-		} else if(gbn == "DELV_SELECT") {
-			$("#cartListForm .delvList input[name=cartSqArr]:checked").each(function () {
-				cartArr.push($(this).val());
-			});
-
-			confirmMessage = "총 " + cartArr.length + "개의 상품을 삭제합니다.";
-		} else if(gbn == "WMS_ALL") {
-			$("#cartListForm .wmsList input[name=cartSqArr]").each(function() {
-				cartArr.push($(this).val());
-			});
-
-			confirmMessage = "총알배송상품을 전부 삭제하시겠습니까?";
-		} else if(gbn == "DELV_ALL") {
-			$("#cartListForm .delvList input[name=cartSqArr]").each(function() {
-				cartArr.push($(this).val());
-			});
-
-			confirmMessage = "업체직배송 상품을 전부 삭제하시겠습니까?";
-		} else {
-			cartArr.push(gbn);
-			deleteCartAjax(cartArr);
-			return false;
-		}
-
-		mcxDialog.confirm(confirmMessage, {
-			cancelBtnText: "취소/닫기",		//취소 또는 닫기 버튼명
-			sureBtnText  : "확인",				//처리문 버튼명
-			sureBtnClick : function () {
-				deleteCartAjax(cartArr);
-			}
-		});
-	}
-
-	//쿠폰사용안내 팝업열기
-	$(document).on('click','#btn_cpinfo_pop',function(e){
-		$("#cpinfoPop").modal("show");
-		return false;
-	});
-
-	$("input[name=cartSqArr]").on("change", function(e) {
-		let cartArr = [];
-
-		// 선택된 장바구니 번호
-		$("#cartListForm input[name=cartSqArr]:checked").each(function () {
-			cartArr.push($(this).val());
-		});
-
-		// 선택된 장바구니 정보 가공
-		let data = {	cartSqArr : cartArr }
-		let jsonData = JSON.stringify(data);
-
-		$.ajax( {
-			type: "POST",
-			url : '/cart/change/goods/list',
-			contentType: 'application/json',
-			dataType : 'json',
-			data : jsonData,
-			success : function(result) {
-				fnChangeCartListInfo(result);
-			}
-		});
-	});
-
-	function fnChangeCartListInfo(order) {
-		let wmsList = order.wmsCartList;
-		let delvList = order.delvCartList;
-		let cartList = new Array();
-
-		// 다다익선 정보 숨김
-		$("#cartListForm .applyTmtb").hide();
-		$("#cartListForm .notApplyTmtb").hide();
-
-		// 장바구니 각 상품 가격 정보 할인 전으로 변경
-		$("#cartListForm .cartInfo input[name=cartSq]").each(function() {
-			if($(this).parent().find(".info_calc .price > del").text() != "") {
-				$(this).parent().find(".info_calc .selling_price").text($(this).parent().find(".info_calc .price > del").text());
-				$(this).parent().find(".info_calc .price > del").remove();
-			}
-		});
-		$("#cartListForm").find(".delvFeeArea").html("<div class='info_dlvr'><span class='dlvr_fee'>배송비 무료</span></div>");
-
-		for(let i = 0 ; i < wmsList.length ; i++) {
-			cartList.push(wmsList[i]);
-			$("#cartListForm .wmsCartInfo input[name=cartSq]").each(function() {
-				if(wmsList[i].cartSq == $(this).val()) {
-					let wms = wmsList[i];
-					// $(this).parent().find(".thumb_box img").attr("src", result.imgPath1 + "/" + wms.sysImgNm);
-					$(this).parent().find(".od_moresale .applyTmtbNm > ul").html("");
-					$(this).parent().find(".od_moresale .notApplyTmtbNm > ul").html("");
-
-					// 다다익선 적용 정보 생성성
-					if(wms.qtyTmtbSq > 0 && wms.applyQtySectionYn == "Y") {
-						$(this).parent().find(".applyTmtb .applyTmtbNm > ul").append("<li>" + wms.qtyTmtbNm + "</li>");
-						$(this).parent().find(".applyTmtb").show();
-					}
-					if(wms.amtTmtbSq > 0 && wms.applyAmtSectionYn == "Y") {
-						$(this).parent().find(".applyTmtb .applyTmtbNm > ul").append("<li>" + wms.amtTmtbNm + "</li>");
-						$(this).parent().find(".applyTmtb").show();
-					}
-					if(wms.qtyTmtbSq > 0 && wms.applyQtySectionYn == "N") {
-						$(this).parent().find(".notApplyTmtb .notApplyTmtbNm > ul").append("<li>" + wms.qtyTmtbNm + "<a href=''>대상 상품 보기</a></li>");
-						$(this).parent().find(".notApplyTmtb").show();
-					}
-					if(wms.amtTmtbSq > 0 && wms.applyAmtSectionYn == "N") {
-						$(this).parent().find(".notApplyTmtb .notApplyTmtbNm > ul").append("<li>" + wms.amtTmtbNm + "<a href=''>대상 상품 보기</a></li>");
-						$(this).parent().find(".notApplyTmtb").show();
-					}
-
-					// 다다익선 할인가 적용
-					if(wms.tmtbDcAmt < wms.currPrice) {
-						$(this).parent().find(".info_calc .selling_price").text(Number(wms.tmtbDcAmt).toLocaleString() + " 원");
-						$(this).parent().find(".info_calc .price").append("<del>" + Number(wms.currPrice).toLocaleString() + " 원</del>");
-					}
-
-					if(wms.delvFee == 0) {
-						$(".wmsList").find(".delv_" + wms.delvFeeCd).html("<div class='info_dlvr'><span class='dlvr_fee'>배송비 무료</span></div>");
-					} else {
-						let html = "<div class='info_dlvr'><span class='dlvr_fee'>" + Number(wms.delvFee).toLocaleString() + " 원</span><a href='#' target='_black'>배송비 SAVE 상품 보기</a></div>";
-						$(".wmsList").find(".delv_" + wms.delvFeeCd).html(html);
-						// $(".wmsList").find(".delv_" + wms.delvFeeCd).append("<span class='dlvr_shop'>" + wms.supplyCompNm + " 업체직배송</span>");
-
-					}
-				}
-			});
-		}
-
-		for(let i = 0 ; i < delvList.length ; i++) {
-			cartList.push(delvList[i]);
-			$("#cartListForm .delvCartInfo input[name=cartSq]").each(function() {
-				if(delvList[i].cartSq == $(this).val()) {
-					let delv = delvList[i];
-					// $(this).parent().find(".thumb_box img").attr("src", result.imgPath1 + "/" + wms.sysImgNm);
-					$(this).parent().find(".od_moresale .applyTmtbNm > ul").html("");
-					$(this).parent().find(".od_moresale .notApplyTmtbNm > ul").html("");
-
-					// 다다익선 적용 정보 생성성
-					if(delv.qtyTmtbSq > 0 && delv.applyQtySectionYn == "Y") {
-						$(this).parent().find(".applyTmtb .applyTmtbNm > ul").append("<li>" + delv.qtyTmtbNm + "</li>");
-						$(this).parent().find(".applyTmtb").show();
-					}
-					if(delv.amtTmtbSq > 0 && delv.applyAmtSectionYn == "Y") {
-						$(this).parent().find(".applyTmtb .applyTmtbNm > ul").append("<li>" + delv.amtTmtbNm + "</li>");
-						$(this).parent().find(".applyTmtb").show();
-					}
-					if(delv.qtyTmtbSq > 0 && delv.applyQtySectionYn == "N") {
-						$(this).parent().find(".notApplyTmtb .notApplyTmtbNm > ul").append("<li>" + delv.qtyTmtbNm + "<a href=''>대상 상품 보기</a></li>");
-						$(this).parent().find(".notApplyTmtb").show();
-					}
-					if(delv.amtTmtbSq > 0 && delv.applyAmtSectionYn == "N") {
-						$(this).parent().find(".notApplyTmtb .notApplyTmtbNm > ul").append("<li>" + delv.amtTmtbNm + "<a href=''>대상 상품 보기</a></li>");
-						$(this).parent().find(".notApplyTmtb").show();
-					}
-
-					// 다다익선 할인가 적용
-					if(delv.tmtbDcAmt < delv.currPrice) {
-						$(this).parent().find(".info_calc .selling_price").text(Number(delv.tmtbDcAmt).toLocaleString() + " 원");
-						$(this).parent().find(".info_calc .price").append("<del>" + Number(delv.currPrice).toLocaleString() + " 원</del>");
-					}
-
-					if(delv.delvFee == 0) {
-						$(".delvList").find(".delv_" + delv.delvFeeCd).html("<div class='info_dlvr'><span class='dlvr_fee'>배송비 무료</span></div>");
-					} else {
-						let html = "<div class='info_dlvr'><span class='dlvr_fee'>" + Number(delv.delvFee).toLocaleString() + " 원</span><span class='dlvr_shop'>" + delv.supplyCompNm + " 업체직배송</span><a href='#' target='_black'>배송비 SAVE 상품 보기</a></div>";
-						$(".delvList").find(".delv_" + delv.delvFeeCd).html(html);
-					}
-				}
-			});
-		}
-
-		// 결제 총액 영역 수정
-		$("#cartListForm .sumCurrPrice").text(Number(order.sumOrdAmt).toLocaleString());
-		$("#cartListForm .totDelvFee").text(Number(order.totDelvFee).toLocaleString());
-		sumRealPayAmt = order.sumRealPayAmt + order.totDelvFee;
-		totDcAmt = order.totDcAmt;
-
-		// 할인코드 쿠폰 금액 재확인
-		if($("#cartListForm #serialCpnNm").val()) {
-			serialCpnApply();
-		} else {
-			$("#cartListForm .totDcAmt").text(Number(order.totDcAmt).toLocaleString());
-			$("#cartListForm .sumRealPayAmt").text(Number(order.sumRealPayAmt + order.totDelvFee).toLocaleString());
-			cancelCartCpn();
-		}
-
-		let notApplyQtyTmtbList = new Array();
-		let notApplyAmtTmtbList = new Array();
-		for(let i = 0 ; i < cartList.length ; i++) {
-			let cart = cartList[i];
-			if(cart.applyQtySectionYn == "N") {
-				let obj = new Object();
-				obj.tmtbSq = cart.qtyTmtbSq;
-				obj.tmtbNm = cart.qtyTmtbNm;
-				obj.currPrice = cart.currPrice;
-				obj.goodsNm = cart.goodsNm;
-				obj.brandNm = cart.brandEnm + " " + cart.brandKnm;
-				obj.imgPath = order.imgPath1 + "/" + cart.sysImgNm;
-
-				notApplyQtyTmtbList.push(obj);
-			}
-
-			if(cart.applyAmtSectionYn == "N") {
-				let obj = new Object();
-				obj.tmtbSq = cart.amtTmtbSq;
-				obj.tmtbNm = cart.amtTmtbNm;
-
-				notApplyAmtTmtbList.push(obj);
-			}
-		}
-
-		// 수량 다다익선 정렬
-		var t = new Object();
-		for (let i = 0; i < notApplyQtyTmtbList.length; i++) {
-			for (let j = 0; j < notApplyQtyTmtbList.length - i - 1; j++) {
-				if (notApplyQtyTmtbList[j].tmtbSq > notApplyQtyTmtbList[j + 1].tmtbSq) {
-					t = notApplyQtyTmtbList[j];
-					notApplyQtyTmtbList[j] = notApplyQtyTmtbList[j + 1];
-					notApplyQtyTmtbList[j + 1] = t;
-				}
-			}
-		}
-
-		// 다다익선 적용 대상 상품 노출
-		fnCreateNotApplyTmtbAreaList(notApplyQtyTmtbList, notApplyAmtTmtbList);
-	}
-
-	//옵션변경 팝업열기
-	function fnChangeCartOptCd(cartSq) {
-		$.ajax( {
-			type: "POST",
-			url : '/cart/goods/info',
-			dataType : 'html',
-			data : {cartSq : cartSq},
-			success : function(result) {
-				//fnChangeCartListInfo(result);
-				$("#optModifyPop").html(result);
-				$("#optModifyPop").modal("show");
-			}
-		});
-	}
-
-	// 상품상세 페이지 이동 처리
-	var fnGoToGoodsDetail = function(param) {
-		let goodsCd = $(param).attr('goodsCd');
-		cfnGoToPage(_PAGE_GOODS_DETAIL + goodsCd);
-	}
-
-	// 주문하기
-	function fnSubmitNoMember(cartSq) {
-		if(cartSq == "all") {
-			$("#cartListForm").submit();
-		} else {
-			let html	 = "<input type='hidden' name='cartSqArr' value='" + cartSq + "' />";
-			html		+= "<input type='hidden' name='shotDelvUseYn' value='" + $("input[name=shotDelvUseYn]:checked").val() + "' />";
-			$("#cartInfoForm").html(html);
-			$("#cartInfoForm").submit();
-		}
-	}
-</script>
-</html>

src/main/webapp/WEB-INF/views/web/cart/CartListFormWeb_20210319.html

@@ -1,345 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko"
-      xmlns:th="http://www.thymeleaf.org"
-      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
-      layout:decorator="web/common/layout/DefaultLayoutWeb">
-
-<!--
- *******************************************************************************
- * @source  : cartListFormWeb
- * @desc    : 장바구니
- *============================================================================
- * STYLE24
- * Copyright(C) 2020 TSIT, All rights reserved.
- *============================================================================
- * VER  DATE         AUTHOR      DESCRIPTION
- * ===  ===========  ==========  =============================================
- * 1.0  2021.02.02   xodud1202   최초 작성
- *******************************************************************************
- -->
-<body>
-
-<th:block layout:fragment="content">
-
-    <!-- payment.js -->
-    <script type="text/javascript" th:src="${@environment.getProperty('pg.kcp.js.url')}" src=""></script>
-    <script type="text/javascript" src="/biz/payment.js"></script>
-
-    <!--  container -->
-    <div id="container" class="container od">
-        <div class="wrap">
-            <div class="content shopping_bag"> <!-- 페이지특정 클래스 = shop_bag -->
-                <div class="cont_head">
-                    <h2>쇼핑백</h2>
-                    <div class="oder_steps">
-                        <ul>
-                        <li class="on">01 쇼핑백</li>
-                        <li>02 주문/결제</li>
-                        <li>03 주문완료</li>
-                    </ul>
-                </div>
-            </div>
-            <div id="cartAjaxList" class="cont_body">
-
-            </div>
-        </div>
-        <div class="content shopping_bag mt100">
-            <div class="cont_head">
-                <h4 class="subH1 t_c mb40">추천상품</h4>
-            </div>
-            <div class="cont_body">
-                <div class="od_recommend">
-                    <div class="swiper-container">
-                        <div class="swiper-wrapper">
-                            <div class="swiper-slide">
-                                <div class="item_prod">
-                                    <div class="item_state">
-                                        <a href="#none" class="itemLink">
-                                            <div class="itemPic">
-                                                <img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
-                                                <button type="button" class="itemLike">관심상품 추가</button>
-                                            </div>
-                                            <p class="itemBrand">BRAND NAME1</p>
-                                            <div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-                                            <p class="itemPrice">80,100
-                                                <span class="itemPrice_original">89,000</span>
-                                                <span class=" itemPercent">10%</span>
-                                            </p>
-                                            <div class="itemcolorchip">
-                                                <span class="chip_color35" value="ABM">BEIGE</span>
-                                                <span class="chip_color54" value="BDS">BLACK</span>
-                                                <span class="chip_color40" value="YBR">WHITE</span>
-                                            </div>
-                                            <div class="itemComment">#주문 폭주 상품</div>
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="swiper-slide">
-                                <div class="item_prod">
-                                    <div class="item_state">
-                                        <a href="#none" class="itemLink">
-                                            <div class="itemPic">
-                                                <img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
-                                                <button type="button" class="itemLike">관심상품 추가</button>
-                                            </div>
-                                            <p class="itemBrand">BRAND NAME2</p>
-                                            <div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-                                            <p class="itemPrice">80,100
-                                                <span class="itemPrice_original">89,000</span>
-                                                <span class=" itemPercent">10%</span>
-                                            </p>
-                                            <div class="itemcolorchip">
-                                                <span class="chip_color35" value="ABM">BEIGE</span>
-                                                <span class="chip_color54" value="BDS">BLACK</span>
-                                                <span class="chip_color40" value="YBR">WHITE</span>
-                                            </div>
-                                            <div class="itemComment">#주문 폭주 상품</div>
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="swiper-slide">
-                                <div class="item_prod">
-                                    <div class="item_state">
-                                        <a href="#none" class="itemLink">
-                                            <div class="itemPic">
-                                                <img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
-                                                <button type="button" class="itemLike">관심상품 추가</button>
-                                            </div>
-                                            <p class="itemBrand">BRAND NAME3</p>
-                                            <div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-                                            <p class="itemPrice">80,100
-                                                <span class="itemPrice_original">89,000</span>
-                                                <span class=" itemPercent">10%</span>
-                                            </p>
-                                            <div class="itemcolorchip">
-                                                <span class="chip_color35" value="ABM">BEIGE</span>
-                                                <span class="chip_color54" value="BDS">BLACK</span>
-                                                <span class="chip_color40" value="YBR">WHITE</span>
-                                            </div>
-                                            <div class="itemComment">#주문 폭주 상품</div>
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="swiper-slide">
-                                <div class="item_prod">
-                                    <div class="item_state">
-                                        <a href="#none" class="itemLink">
-                                            <div class="itemPic">
-                                                <img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
-                                                <button type="button" class="itemLike">관심상품 추가</button>
-                                            </div>
-                                            <p class="itemBrand">BRAND NAME4</p>
-                                            <div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-                                            <p class="itemPrice">80,100
-                                                <span class="itemPrice_original">89,000</span>
-                                                <span class=" itemPercent">10%</span>
-                                            </p>
-                                            <div class="itemcolorchip">
-                                                <span class="chip_color35" value="ABM">BEIGE</span>
-                                                <span class="chip_color54" value="BDS">BLACK</span>
-                                                <span class="chip_color40" value="YBR">WHITE</span>
-                                            </div>
-                                            <div class="itemComment">#주문 폭주 상품</div>
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="swiper-slide">
-                                <div class="item_prod">
-                                    <div class="item_state">
-                                        <a href="#none" class="itemLink">
-                                            <div class="itemPic">
-                                                <img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
-                                                <button type="button" class="itemLike">관심상품 추가</button>
-                                            </div>
-                                            <p class="itemBrand">BRAND NAME5</p>
-                                            <div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-                                            <p class="itemPrice">80,100
-                                                <span class="itemPrice_original">89,000</span>
-                                                <span class=" itemPercent">10%</span>
-                                            </p>
-                                            <div class="itemcolorchip">
-                                                <span class="chip_color35" value="ABM">BEIGE</span>
-                                                <span class="chip_color54" value="BDS">BLACK</span>
-                                                <span class="chip_color40" value="YBR">WHITE</span>
-                                            </div>
-                                            <div class="itemComment">#주문 폭주 상품</div>
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="swiper-slide">
-                                <div class="item_prod">
-                                    <div class="item_state">
-                                        <a href="#none" class="itemLink">
-                                            <div class="itemPic">
-                                                <img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
-                                                <button type="button" class="itemLike">관심상품 추가</button>
-                                            </div>
-                                            <p class="itemBrand">BRAND NAME6</p>
-
-                                            <div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-                                            <p class="itemPrice">80,100
-                                                <span class="itemPrice_original">89,000</span>
-                                                <span class=" itemPercent">10%</span>
-                                            </p>
-                                            <div class="itemcolorchip">
-                                                <span class="chip_color35" value="ABM">BEIGE</span>
-                                                <span class="chip_color54" value="BDS">BLACK</span>
-                                                <span class="chip_color40" value="YBR">WHITE</span>
-                                            </div>
-                                            <div class="itemComment">#주문 폭주 상품</div>
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="swiper-slide">
-                                <div class="item_prod">
-                                    <div class="item_state">
-                                        <a href="#none" class="itemLink">
-                                            <div class="itemPic">
-                                                <img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
-                                                <button type="button" class="itemLike">관심상품 추가</button>
-                                            </div>
-                                            <p class="itemBrand">BRAND NAME7</p>
-
-                                            <div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-                                            <p class="itemPrice">80,100
-                                                <span class="itemPrice_original">89,000</span>
-                                                <span class=" itemPercent">10%</span>
-                                            </p>
-                                            <div class="itemcolorchip">
-                                                <span class="chip_color35" value="ABM">BEIGE</span>
-                                                <span class="chip_color54" value="BDS">BLACK</span>
-                                                <span class="chip_color40" value="YBR">WHITE</span>
-                                            </div>
-                                            <div class="itemComment">#주문 폭주 상품</div>
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="swiper-slide">
-                                <div class="item_prod">
-                                    <div class="item_state">
-                                        <a href="#none" class="itemLink">
-                                            <div class="itemPic">
-                                                <img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
-                                                <button type="button" class="itemLike">관심상품 추가</button>
-                                            </div>
-                                            <p class="itemBrand">BRAND NAME8</p>
-                                            <div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
-                                            <p class="itemPrice">80,100
-                                                <span class="itemPrice_original">89,000</span>
-                                                <span class=" itemPercent">10%</span>
-                                            </p>
-                                            <div class="itemcolorchip">
-                                                <span class="chip_color35" value="ABM">BEIGE</span>
-                                                <span class="chip_color54" value="BDS">BLACK</span>
-                                                <span class="chip_color40" value="YBR">WHITE</span>
-                                            </div>
-                                            <div class="itemComment">#주문 폭주 상품</div>
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <!-- Add Pagination -->
-                        <div class="swiper-pagination"></div>
-                    </div>
-                    <!-- Add Arrows -->
-                    <div class="swiper-button-next"></div>
-                    <div class="swiper-button-prev"></div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-<!-- // container -->
-
-<!-- 쿠폰사용안내 팝업 -->
-<div class="modal fade od_pop cpinfo_pop" id="cpinfoPop" tabindex="-1" role="dialog" aria-labelledby="cpinfoLabel" aria-hidden="true">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="cpinfoLabel">쿠폰사용안내</h5>
-            </div>
-            <div class="modal-body">
-                <div class="pop_cont">
-                    쿠폰사용안내 내용입니다.
-                </div>
-            </div>
-            <div class="modal-footer"></div>
-        </div>
-    </div>
-</div>
-<!-- //쿠폰사용안내 팝업 -->
-
-<script src="/ux/pc/js/swiper.min.js"></script>
-<link rel="stylesheet" type="text/css" href="/ux/pc/css/swiper.min.css" />
-
-<script type="text/javascript">
-    $(document).ready(function() {
-        // 장바구니 상품 정보 select
-        getCartList();
-    });
-
-    function getCartList() {
-        // 장바구니 정보 조회
-        $.ajax( {
-            type: "POST",
-            url : '/cart/goods/list',
-            dataType : 'html',
-            success : function(result) {
-                if (result != null) {
-                    $("#cartAjaxList").html(result);
-                }
-            }
-        });
-    }
-
-    //상품옵션변경 팝업 > 수량조절
-    $(document).on('click','.opt_modify_pop .number_count .minus',function(e){
-        var $input = $(this).parent().find('input');
-        var count = parseInt($input.val()) - 1;
-        count = count < 1 ? 1 : count;
-        $input.val(count);
-        $input.change();
-        return false;
-    }).on('click','.opt_modify_pop .number_count .plus',function(e){
-        var $input = $(this).parent().find('input');
-        $input.val(parseInt($input.val()) + 1);
-        $input.change();
-        return false;
-    });
-
-    //상품옵션변경 팝업 > 컬러선택 표기
-    $(document).on('click','.opt_modify_pop .opt_color ul li a',function(e){
-        $(this).parents('.opt_color').find('li a').removeClass('on');
-        $(this).addClass('on');
-        var optColor = $(this).find("img").attr('alt');
-        $(this).parent().parent().parent().find(".color").text(optColor);
-        return false;
-    });
-
-    $(function(){
-        //추천상품 슬라이드
-        var rcmdItemSwiper = new Swiper('.od_recommend .swiper-container', {
-            slidesPerView: 5,
-            spaceBetween: 0,
-            navigation: {
-                nextEl: '.od_recommend .swiper-button-next',
-                prevEl: '.od_recommend .swiper-button-prev',
-            },
-            pagination: {
-                el: '.od_recommend .swiper-pagination',
-                clickable: true,
-            },
-        });
-    });
-</script>
-</th:block>
-</body>
-</html>

src/main/webapp/WEB-INF/views/web/common/fragments/FooterWeb.html

@@ -289,7 +289,7 @@
 					<h3><a href="">쇼핑백</a></h3>
 				</div>
 				<div class="quick_body nodata"> <!-- 쇼핑백 상품 없을 시 nodata 클래스 추가 -->
-					<div class="product_count"><span class='c_primary'>30</span>개의 상품</div>
+					<!--<div class="product_count"><span class='c_primary'>30</span>개의 상품</div>
 					<div class="itemsGrp existence">
 						<div class="item_prod">
 							<button type="button" class="delete_btn"><span class="sr-only">해당상품 삭제</span></button>
@@ -368,7 +368,7 @@
 							</div>
 						</div>
 					</div>
-					<!-- 쇼핑백 없을 시 -->
+					&lt;!&ndash; 쇼핑백 없을 시 &ndash;&gt;
 					<div class="itemsGrp empty">
 						<p class="desc">쇼핑백에 담긴 상품이 없습니다.</p>
 						<span class="subH3">지금 많이 보고있어요</span>
@@ -383,7 +383,7 @@
 									<p class="itemPrice">80,100
 										<span class="itemPrice_original">89,000</span>
 									</p>
-									<!-- 미사용 <button type="button" class="btn btn_sm cart_btn"><span>쇼핑백 담기</span></button> -->
+									&lt;!&ndash; 미사용 <button type="button" class="btn btn_sm cart_btn"><span>쇼핑백 담기</span></button> &ndash;&gt;
 									<div class="viewCount"><span>508</span>명 보는중</div>
 								</a>
 							</div>
@@ -399,7 +399,7 @@
 									<p class="itemPrice">80,100
 										<span class="itemPrice_original">89,000</span>
 									</p>
-									<!-- 미사용 <button type="button" class="btn btn_sm cart_btn on"><span>쇼핑백 담기</span></button> -->
+									&lt;!&ndash; 미사용 <button type="button" class="btn btn_sm cart_btn on"><span>쇼핑백 담기</span></button> &ndash;&gt;
 									<div class="viewCount"><span>58</span>명 보는중</div>
 								</a>
 							</div>
@@ -415,7 +415,7 @@
 									<p class="itemPrice">80,100
 										<span class="itemPrice_original">89,000</span>
 									</p>
-									<!-- 미사용 <button type="button" class="btn btn_sm cart_btn on"><span>쇼핑백 담기</span></button> -->
+									&lt;!&ndash; 미사용 <button type="button" class="btn btn_sm cart_btn on"><span>쇼핑백 담기</span></button> &ndash;&gt;
 									<div class="viewCount"><span>9</span>명 보는중</div>
 								</a>
 							</div>
@@ -431,14 +431,14 @@
 									<p class="itemPrice">80,100
 										<span class="itemPrice_original">89,000</span>
 									</p>
-									<!-- 미사용 <button type="button" class="btn btn_sm cart_btn"><span>쇼핑백 담기</span></button> -->
+									&lt;!&ndash; 미사용 <button type="button" class="btn btn_sm cart_btn"><span>쇼핑백 담기</span></button> &ndash;&gt;
 									<div class="viewCount"><span>452</span>명 보는중</div>
 								</a>
 							</div>
 						</div>
-					</div>
+					</div>-->
 					<!-- //쇼핑백 없을 시 -->
-					<button type="button" class="btn btn_default purchase_btn"><span>전체 상품 구매하기</span></button>
+					<!-- <button type="button" class="btn btn_default purchase_btn"><span>전체 상품 구매하기</span></button> -->
 				</div>
 			</div>
 			<div class="wishlist quick_con quick03"> <!-- 퀵메뉴_위시리스트 -->
@@ -966,7 +966,193 @@
 			});
 // 	});
 	}
-	
+
+	function deleteCartAjax(cartArr, menu) {
+		if(cartArr.length < 1) {
+			mcxDialog.alert("삭제하실 상품을 선택해 주세요.");
+			return false;
+		}
+
+		let data = {
+			cartSqArr : cartArr
+		}
+
+		let jsonData = JSON.stringify(data);
+
+		$.ajax( {
+			type: "POST",
+			url : '/cart/deleteCart',
+			contentType: 'application/json',
+			dataType : 'json',
+			data : jsonData,
+			success : function(result) {
+				mcxDialog.alert("삭제 되었습니다.");
+				if(menu == "cart") {
+					let data = {shotDelvUseYn : $("input[name=shotDelvUseYn]:checked").val()};
+					getCartList(data);
+				} else if (menu = "quick") {
+					fnGetCartGoodsList();
+				}
+			}
+		});
+	}
+
+	function deleteCart(gbn, menu) {
+		let cartArr = [];
+		let confirmMessage = "";
+		if(gbn == "SELECT") {
+			$("#cartListForm input[name=cartSqArr]:checked").each(function () {
+				cartArr.push($(this).val());
+			});
+
+			if(cartArr.length < 1) {
+				mcxDialog.alert("선택된 상품이 없습니다.");
+				return false;
+			}
+
+			confirmMessage = "총 " + cartArr.length + "개의 상품을 삭제합니다.";
+		/*} else if(gbn == "DELV_SELECT") {
+			$("#cartListForm .delvList input[name=cartSqArr]:checked").each(function () {
+				cartArr.push($(this).val());
+			});
+
+			confirmMessage = "총 " + cartArr.length + "개의 상품을 삭제합니다.";
+		} else if(gbn == "WMS_ALL") {
+			$("#cartListForm .wmsList input[name=cartSqArr]").each(function() {
+				cartArr.push($(this).val());
+			});
+
+			confirmMessage = "총알배송상품을 전부 삭제하시겠습니까?";
+		} else if(gbn == "DELV_ALL") {
+			$("#cartListForm .delvList input[name=cartSqArr]").each(function() {
+				cartArr.push($(this).val());
+			});
+
+			confirmMessage = "업체직배송 상품을 전부 삭제하시겠습니까?";*/
+		} else {
+			cartArr.push(gbn);
+			deleteCartAjax(cartArr, menu);
+			return false;
+		}
+
+		mcxDialog.confirm(confirmMessage, {
+			cancelBtnText: "취소/닫기",			//취소 또는 닫기 버튼명
+			sureBtnText  : "확인",				//처리문 버튼명
+			sureBtnClick : function () {
+				deleteCartAjax(cartArr, menu);
+			}
+		});
+	}
+
+	function quickCartOrder() {
+
+	}
+
+	// 장바구니
+	let fnGetCartGoodsList = function() {
+		$.getJSON('/cart/quick/cart/list', function(order, status) {
+			$("#quick_menu .shopingbag.quick_con.quick02 .quick_head a").attr("href", _PAGE_CART);
+
+			if (status == 'success') {
+				let quickShoppingBagHtml = "";
+				$("#quick_menu #quick02 .count").text(order.totCartCnt);
+
+				$("#quick_menu .shopingbag.quick_con.quick02 .quick_body").html("");
+				if(order.totCartCnt > 0) {
+					$("#quick_menu .shopingbag.quick_con.quick02 .quick_body").removeClass("nodata");
+
+					quickShoppingBagHtml += '<div class="product_count"><span class="c_primary">' + order.totCartCnt + '</span>개의 상품</div>';
+					quickShoppingBagHtml += '<div class="itemsGrp existence">';
+					let ordCanCnt = 0;
+					for(let i = 0 ; i < order.delvAllCartList.length ; i++) {
+						let info = order.delvAllCartList[i];
+						//alert(info.soldoutYn + " / " + info.ordCanYn + " / " + info.ordCanQty + " / " + info.goodsQty + " / " + info.minOrdQty + " / " + info.maxOrdQty);
+						if(info.soldoutYn == "N" && info.ordCanYn == "Y" && info.ordCanQty >= info.goodsQty && info.goodsQty >= info.minOrdQty && info.goodsQty <= info.maxOrdQty){
+							ordCanCnt++;		// 주문 가능 수량
+							quickShoppingBagHtml += '	<div class="item_prod">';
+							quickShoppingBagHtml += '		<input type="hidden" id="cartSq" value="' + info.cartSq + '">';
+							quickShoppingBagHtml += '		<button type="button" class="delete_btn" onclick="deleteCart(' + info.cartSq + ", 'quick'" + ')" style="z-index:99;"><span class="sr-only">해당상품 삭제</span></button>';
+							quickShoppingBagHtml += '		<div class="item_state">';
+							if(info.ordCanQty < 6 && info.ordCanQty > 0) {
+								quickShoppingBagHtml += '			<div class="shape"><span>곧 품절돼요!</span></div>';
+							}
+							quickShoppingBagHtml += "			<a href='javascript:fnGoToGoodsDetail(\"" + info.goodsCd + "\")' class='itemLink'>";
+							quickShoppingBagHtml += '				<div class="itemPic">';
+							quickShoppingBagHtml += '					<img alt="BLACK-a" class="vLHTC pd_img" src="' + order.imgPath1 + '/' + info.sysImgNm + '"/>';
+							quickShoppingBagHtml += '				</div>';
+							quickShoppingBagHtml += '				<p class="itemBrand">' + info.brandEnm + ' ' + info.brandKnm + '</p>';
+							quickShoppingBagHtml += '				<div class="itemName">' + info.goodsNm + '</div>';
+							for(let i = 0 ; i < info.itemNmArr.length ; i++) {
+								if(info.goodsType == "G056_S") {
+									quickShoppingBagHtml += '			<p class="itemSize">';
+									quickShoppingBagHtml += '				<span>' + info.itemNmArr[i] + '</span> / <span>' + info.colorNmArr[i] + '</span> / <span>' + info.optCd2 + '</span>';
+									quickShoppingBagHtml += '			</p>';
+								} else {
+									quickShoppingBagHtml += '			<p class="itemSize">';
+									quickShoppingBagHtml += '				<span>' + info.colorNmArr[i] + '</span> / <span>' + info.optCd2Arr[i] + '</span>';
+									quickShoppingBagHtml += '			</p>';
+								}
+							}
+
+							quickShoppingBagHtml += '			<p class="itemSize">';
+							quickShoppingBagHtml += '				<span>수량 ' + info.goodsQty + '개</span>';
+							quickShoppingBagHtml += '			</p>';
+
+							if(info.currPrice > info.tmtbDcAmt) {
+								quickShoppingBagHtml += '				<p class="itemPrice">' + Number(info.tmtbDcAmt).toLocaleString() + '<span class="itemPrice_original">' + Number(info.currPrice).toLocaleString() + '</span></p>';
+							} else {
+								quickShoppingBagHtml += '				<p class="itemPrice">' + Number(info.tmtbDcAmt).toLocaleString() + '</p>';
+							}
+
+							if(info.qtyTmtbSq > 0 && info.applyQtySectionYn == "Y") {
+								quickShoppingBagHtml += '				<div class="itemComment">다다익선 할인 적용</div>';
+							}
+							if(info.amtTmtbSq > 0 && info.applyAmtSectionYn == "Y") {
+								quickShoppingBagHtml += '				<div class="itemComment">다다익선 할인 적용</div>';
+							}
+
+
+							quickShoppingBagHtml += '			</a>';
+							quickShoppingBagHtml += '		</div>';
+							quickShoppingBagHtml += '	</div>';
+						}
+					}
+
+					quickShoppingBagHtml += '</div>';
+					quickShoppingBagHtml += '<button type="button" class="btn btn_default purchase_btn" onclick="quickCartOrder()"><span>전체 상품 구매하기</span></button>';
+				} else {
+					if(!$("#quick_menu .shopingbag.quick_con.quick02 .quick_body").hasClass("nodata")) {
+						$("#quick_menu .shopingbag.quick_con.quick02 .quick_body").addClass("nodata");
+					}
+
+					quickShoppingBagHtml += '<div class="itemsGrp empty">';
+					quickShoppingBagHtml += '	<p class="desc">쇼핑백에 담긴 상품이 없습니다.</p>';
+					quickShoppingBagHtml += '	<span class="subH3">지금 많이 보고있어요</span>';
+					for(let i = 0 ; i < 10 ; i++) {
+						quickShoppingBagHtml += '	<div class="item_prod">';
+						quickShoppingBagHtml += '		<div class="item_state">';
+						quickShoppingBagHtml += '			<a href="javascript:;" class="itemLink">';
+						quickShoppingBagHtml += '				<div class="itemPic">';
+						quickShoppingBagHtml += '					<img alt="BLACK-a" class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg"/>';
+						quickShoppingBagHtml += '				</div>';
+						quickShoppingBagHtml += '				<p class="itemBrand">BRAND NAME</p>';
+						quickShoppingBagHtml += '				<div class="itemName">[온라인 단독] 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼</div>';
+						quickShoppingBagHtml += '				<p class="itemPrice">80,100';
+						quickShoppingBagHtml += '					<span class="itemPrice_original">89,000</span>';
+						quickShoppingBagHtml += '				</p>';
+						quickShoppingBagHtml += '				<div class="viewCount"><span>508</span>명 보는중</div>';
+						quickShoppingBagHtml += '			</a>';
+						quickShoppingBagHtml += '		</div>';
+						quickShoppingBagHtml += '	</div>';
+					}
+					quickShoppingBagHtml += '</div>';
+				}
+
+				$("#quick_menu .shopingbag.quick_con.quick02 .quick_body").html(quickShoppingBagHtml);
+			}
+		});
+	}
+
 	// 위시리스트
 	let fnGetWishList = function() {
 		if (!cfCheckLogin()) {
@@ -1149,6 +1335,9 @@
 		
 		// 최근본상품 조회
 		fnGetRecentlyGoods();
+
+		// 장바구니 조회
+		fnGetCartGoodsList();
 		
 		// 위시리스트
 		fnGetWishList();
@@ -1200,7 +1389,7 @@
 			e.preventDefault();
 			$('body').removeClass('lock');
 			$('#quick_menu').removeClass('active');
-			//$('#quick_menu .quick_con').hide();
+			$('#quick_menu .quick_con').hide();
 		});
 
 		//퀵메뉴 카테고리 메뉴 클릭시

src/main/webapp/WEB-INF/views/web/goods/GoodsDealDetailFormWeb.html

@@ -545,7 +545,7 @@
 			}
 
 			if (minOrdQty > itemCnt) {
-				alert("무슨작업을 해야할가요?");
+				//alert("무슨작업을 해야할가요?");
 				return false;		 //무슨작업을 해야하나?
 			}
 			

src/main/webapp/WEB-INF/views/web/goods/GoodsDetailFormWeb.html

@@ -288,7 +288,7 @@
 										<span class="title">수량</span>
 									</div>
 									<div class="number_count">
-										<span class="minus" onclick="fnAdjustOrderEa(this);" adjust="-"><em class="sr-only">감소</em></a></span>
+										<span class="minus" onclick="fnAdjustOrderEa(this);" adjust="-"><em class="sr-only">감소</em></span>
 										<input type="text" name="cea" maxlength="3" style="ime-mode:disabled" th:value="${goodsInfo.minOrdQty}" onblur="fnChangeOrderEa(this)" data-valid-type="numeric">
 										<input type="hidden" name="coption" value=""   th:attr="price=${goodsInfo.currPrice}">
 										<span class="plus" onclick="fnAdjustOrderEa(this);" adjust="+"><em class="sr-only">추가</em></span>
@@ -552,12 +552,12 @@
 							어린이제품 안전인증 / 한국건설생활시험연구원(KCL)
 						</p>
 						<p class="normal" >
-							<th:block th:if="${not #strings.isEmpty(goodsSafeNo.isCertNum)}" >
-							 인증번호: :CB123A123-1234
-							<a th:href="@{http://www.safetykorea.kr/search/searchPop(certNum=${goodsSafeNo.certNum})}" target="_blank" class="linktxt3">상세보기</a>
+							<th:block th:if="${#strings.contains(goodsSafeNo.isCertNum, '해당')}" >
+							해당 없음 
 							</th:block>
-							<th:block th:unless="${goodsSafeNo.isCertNum}">
-							해당사항 없음
+							<th:block th:unless="${#strings.contains(goodsSafeNo.isCertNum, '해당')}" >
+							인증번호: : <th:block th:text="${goodsSafeNo.isCertNum}"></th:block>
+							<a th:href="@{http://www.safetykorea.kr/search/searchPop(certNum=${goodsSafeNo.certNum})}" target="_blank" class="linktxt3">상세보기</a>
 							</th:block>
 						</p>
 						<p class="t_info dot_info">
@@ -760,8 +760,10 @@
 		  </div>
 		</div>
 	</div>	
-	<!-- //EP 제휴쿠폰 팝업 -->	
-	
+	<!-- //EP 제휴쿠폰 팝업 -->
+
+	<!-- 바로구매 장바구니 등록 정보 저장을 위한 form -->
+	<form id="directOrderForm" method="POST" action="/order/noMember"></form>
 <script th:inline="javascript">
 /*<![CDATA[*/
 	

src/main/webapp/WEB-INF/views/web/goods/GoodsDetailQnaFormWeb.html

@@ -115,14 +115,14 @@
 				tag += '	<div class="fold_cont" style="display: none;">\n';
 				tag += '		<div class="fold_detail">\n'; //문의 내용
 				tag += '			<div>\n';
-				tag += '				<p>' + item.questContent + '</p>\n';
+				tag += '				<p>' + item.questContent.replaceAll("\n", "</br>") + '</p>\n';
 				tag += '			</div>\n';
 				tag += '		</div>\n';
 				
 				if (item.ansStat == 'G060_20') { // 답변완료 상태일 때
 					tag += '	<div class="fold_answer">\n'; //문의 답변
 					tag += '		<div class="answer_head">답변이 등록되었습니다.</div>\n';
-					tag += '		<div class="answer_body">' + item.ansContent + '</div>\n';
+					tag += '		<div class="answer_body">' + item.ansContent.replaceAll("\n", "</br>") + '</div>\n';
 					tag += '		<span class="data">' + item.ansDt + '</span>\n';
 					tag += '	</div>\n';
 				}

src/main/webapp/WEB-INF/views/web/goods/GoodsOtherFormWeb.html

@@ -64,7 +64,7 @@
 	</div>
 	<!-- // CONT-BODY -->
 </div>
-</th:block>
+
 
 
 <script th:inline="javascript">
@@ -123,5 +123,6 @@
 		},
 	});	  
 /*]]>*/
-</script>	
+</script>
+</th:block>	
 </html>

src/main/webapp/WEB-INF/views/web/mypage/ChangeOptionPopupFormWeb.html

@@ -5,61 +5,44 @@
 <div class="modal-body">
 	<div class="pop_cont">
 		<form class="form_wrap">
-			<div class="select_option_area">
-				<h6>옵션 변경 상품 선택</h6>
-				<div class="form_field">
-					<div th:if="${exchangeOptionInfo}" th:each="oneData, status : ${exchangeOptionInfo}">
-						<input th:id="|chk_exchange_item_${oneData.ordDtlItemSq}|" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}" type="checkbox" onclick="fnSelectOptionChange(this);"><label th:for="|chk_exchange_item_${oneData.ordDtlItemSq}|"><span th:text="|${oneData.itemNm} / ${oneData.colorNm} / ${oneData.optCd2}|"></span></label>
-					</div>
-				</div>
-			</div>
-			<div class="modify_option_area" id="modifyOptionArea" style="display:none">
+			<div class="modify_option_area" id="modifyOptionArea">
 				<th:block th:if="${exchangeOptionInfo}" th:each="oneData, status : ${exchangeOptionInfo}">
-					<th:block th:if="${chgQty > 0}" th:each="num, index  : ${#numbers.sequence(1,chgQty)}">
-						<div class="modify_box" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, num=${num}" style="display:none">
-							<div class="name_blk" th:text="|${oneData.itemNm} / ${oneData.colorNm}|"></div>
-							<div class="select_blk">
-								<!-- 옵션교환 라디오 형태 -->
-								<div class="sel_radio" th:if="${oneData.selfGoodsYn == 'Y'}">
-									<input type="hidden" name="chgOptCd2" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, itemNm=${oneData.itemNm}, colorNm=${oneData.colorNm}, orgOptCd2=${oneData.optCd2}, goodsType=${oneData.goodsType}">
-									<div th:class="|form_field ${oneData.ordDtlItemSq}|">
-										<div th:if="${oneData.optCd2Arr.length > 0}" th:each="option, idx : ${oneData.optCd2Arr}">
-											<input type="radio" th:name="|${oneData.ordDtlItemSq}_${num}|" th:id="|${oneData.ordDtlItemSq}_${option}_${num}|" th:value="${option}" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, num=${num}" th:disabled="${#numbers.formatInteger(oneData.currStockQtyArr[idx.index], 0)} <= 0 or ${oneData.soldoutYnArr[idx.index] == 'Y'}" onclick="fnRadioOption(this);">
-											<label th:for="|${oneData.ordDtlItemSq}_${option}_${num}|"><span th:text="${option}"></span></label>
-										</div>
-									</div>
-								</div>
-								<!-- //옵션교환 라디오 형태 -->
-								<!-- 옵션교환 셀렉트박스 형태 -->
-								<div class="sel_select" th:unless="${oneData.selfGoodsYn == 'Y'}">
-									<div class="form_field">
-										<div class="select_custom exchange_option">
-											<div class="combo">
-												<input type="hidden" name="chgOptCd2" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, itemNm=${oneData.itemNm}, colorNm=${oneData.colorNm}, orgOptCd2=${oneData.optCd2}, goodsType=${oneData.goodsType}">
-												<div class="select">옵션 선택</div>
-												<ul class="list">
-													<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가  -->
-													<li class="selected" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, num=${num}, optCd2=''" onclick="fnSelectOption(this);">옵션 선택</li>
-													<th:block th:each="option, idx : ${oneData.optCd2Arr}">
-														<li th:if="${oneData.optCd2Arr.length} > 0 and (${#numbers.formatInteger(oneData.currStockQtyArr[idx.index],0)} <= 0 or ${oneData.soldoutYnArr[idx.index]} == 'Y')" th:text="${option}" aria-disabled="true" data-soldout="true" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, num=${num}, optCd2=''" onclick="fnSelectOption(this);"></li>
-														<li th:if="${oneData.optCd2Arr.length} > 0 and ${#numbers.formatInteger(oneData.currStockQtyArr[idx.index],0)} > 0 and ${oneData.soldoutYnArr[idx.index]} == 'N'" th:text="${option}" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, num=${num}, optCd2=${option}" onclick="fnSelectOption(this);"></li>
-													</th:block>
-												</ul>
-											</div>
-										</div>
+					<div class="modify_box" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, num=${num}">
+						<div class="name_blk" th:text="|${oneData.itemNm} / ${oneData.colorNm}|"></div>
+						<div class="select_blk">
+							<!-- 옵션교환 라디오 형태 -->
+							<div class="sel_radio" th:if="${oneData.selfGoodsYn == 'Y'}">
+								<input type="hidden" name="chgOptCd2" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, itemNm=${oneData.itemNm}, colorNm=${oneData.colorNm}, orgOptCd2=${oneData.optCd2}, goodsType=${oneData.goodsType}" th:value="${oneData.optCd2}">
+								<div th:class="|form_field ${oneData.ordDtlItemSq}|">
+									<div th:if="${oneData.optCd2Arr.length > 0}" th:each="option, idx : ${oneData.optCd2Arr}">
+										<input type="radio" th:name="${oneData.ordDtlItemSq}" th:id="|${oneData.ordDtlItemSq}_${option}|" th:value="${option}" th:disabled="${#numbers.formatInteger(oneData.currStockQtyArr[idx.index], 0)} <= 0 or ${oneData.soldoutYnArr[idx.index] == 'Y'}" th:checked="${option == oneData.optCd2}" onclick="fnRadioOption(this);">
+										<label th:for="|${oneData.ordDtlItemSq}_${option}|"><span th:text="${option}"></span></label>
 									</div>
 								</div>
-								<!-- //옵션교환 셀렉트박스 형태 -->
 							</div>
-							<div class="allcheck_blk" th:if="${num} == 1">
+							<!-- //옵션교환 라디오 형태 -->
+							<!-- 옵션교환 셀렉트박스 형태 -->
+							<div class="sel_select" th:unless="${oneData.selfGoodsYn == 'Y'}">
 								<div class="form_field">
-									<div>
-										<input th:id="|${oneData.ordDtlItemSq}_checkAll|" name="chk_exchange_all1" type="checkbox" checked="" onclick="fnSelectOptionChange();"><label th:for="|${oneData.ordDtlItemSq}_checkAll|"><span>선택 옵션으로 전체 교환</span></label>
+									<div class="select_custom exchange_option">
+										<div class="combo">
+											<input type="hidden" name="chgOptCd2" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, itemNm=${oneData.itemNm}, colorNm=${oneData.colorNm}, orgOptCd2=${oneData.optCd2}, goodsType=${oneData.goodsType}" th:value="${oneData.optCd2}">
+											<div class="select" th:text="${oneData.optCd2}"></div>
+											<ul class="list">
+												<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가  -->
+<!--												<li class="selected" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, optCd2=''" onclick="fnSelectOption(this);">옵션 선택</li>-->
+												<th:block th:each="option, idx : ${oneData.optCd2Arr}">
+													<li th:if="${oneData.optCd2Arr.length} > 0 and (${#numbers.formatInteger(oneData.currStockQtyArr[idx.index],0)} <= 0 or ${oneData.soldoutYnArr[idx.index]} == 'Y')" th:classappend="${option == oneData.optCd2} ? 'selected'" th:text="${option}" aria-disabled="true" data-soldout="true" th:attr="optCd2=''" onclick="fnSelectOption(this);"></li>
+													<li th:if="${oneData.optCd2Arr.length} > 0 and ${#numbers.formatInteger(oneData.currStockQtyArr[idx.index],0)} > 0 and ${oneData.soldoutYnArr[idx.index]} == 'N'" th:classappend="${option == oneData.optCd2} ? 'selected'" th:text="${option}" th:attr="optCd2=${option}" onclick="fnSelectOption(this);"></li>
+												</th:block>
+											</ul>
+										</div>
 									</div>
 								</div>
 							</div>
+							<!-- //옵션교환 셀렉트박스 형태 -->
 						</div>
-					</th:block>
+					</div>
 				</th:block>
 			</div>
 		</form>
@@ -69,10 +52,8 @@
 	<button type="button" id="" class="btn btn_dark" onclick="fnSaveOption();"><span>옵션 저장</span></button>
 </div>
 <script th:inline="javascript">
-	let exchangeOptionInfo = [[${exchangeOptionInfo}]];
 	let oneData = [[${oneData}]];
 	let chgQty = [[${chgQty}]];
-	let checkedOrdDtlItemSqArr = [];
 
 	$(document).ready( function() {
 		// 셀렉트박스 활성화
@@ -81,206 +62,41 @@
 		});
 	});
 
-	// 구성상품 선택 및 전체 적용 클릭 이벤트
-	var fnSelectOptionChange = function() {
-		checkedOrdDtlItemSqArr = [];
-		let cnt = 0;
-		
-		// 체크 수량 조회
-		$.each($('.select_option_area .form_field input:checkbox'), function(idx, item) {
-			if ($(item).is(':checked')) {
-				checkedOrdDtlItemSqArr.push($(item).attr('ordDtlItemSq'));
-				cnt++;
-			}
-		});
-
-		// 옵션변경영역 처리
-		if (cnt > 0) {
-			$('#modifyOptionArea').css('display', '');
-		} else {
-			$('#modifyOptionArea').css('display', 'none');
-		}
-
-		$.each($('.modify_box'), function(idx, item) {
-			let ordDtlItemSq = $(item).attr('ordDtlItemSq');
-			let num = $(item).attr('num');
-			let id = '#' + ordDtlItemSq + '_checkAll';
-
-			if (checkedOrdDtlItemSqArr.includes(ordDtlItemSq)) {
-				if (num == 1) {
-					$(item).css('display', '');
-
-					if (oneData.selfGoodsYn == 'Y') {
-						$.each($(item).find('input:radio'), function (index, radio) {
-							if ($(radio).is(':checked')) {
-								$(radio).click();
-							}
-						});
-					} else {
-						$.each($(item).find('li'), function (index, radio) {
-							if ($(radio).hasClass('selected')) {
-								$(radio).click();
-							}
-						});
-					}
-				} else if ($(id).is(':checked')) {
-					$(item).css('display', 'none');
-				} else {
-					$(item).css('display', '');
-				}
-			} else {
-				$(item).css('display', 'none');
-			}
-		});
-
-		fnChangeCss();
-	}
-
 	// 라디오 클릭 이벤트
 	var fnRadioOption = function(param) {
-		let ordDtlItemSq = $(param).attr('ordDtlItemSq');
-		let num = $(param).attr('num');
-		let optCd2 = $(param).val();
-		let checkAllId = '#' + ordDtlItemSq + '_checkAll';
-		let radioId = '.' + ordDtlItemSq + ' input:radio';
-
-		$(param).parent().parent().parent().find('input[name=chgOptCd2]').val(optCd2);
-
-		if (num == 1 && $(checkAllId).is(':checked')) {
-			$.each($(radioId), function(idx, item) {
-				if ($(item).attr('num') != 1 && optCd2 == $(item).val()) {
-					$(item).click();
-				}
-			});
-		}
+		$(param).parent().parent().parent().find('input[name=chgOptCd2]').val($(param).val());
 	}
 
 	// 셀렉트박스 클릭 이벤트
 	var fnSelectOption = function(param) {
-		let ordDtlItemSq = $(param).attr('ordDtlItemSq');
-		let num = $(param).attr('num');
-		let optCd2 = $(param).attr('optCd2');
-		let checkAllId = '#' + ordDtlItemSq + '_checkAll';
-
-		$(param).parent().parent().find('input[name=chgOptCd2]').val(optCd2);
-
-		if (num == 1 && $(checkAllId).is(':checked')) {
-			$.each($('.exchange_option li'), function(idx, item) {
-				if ($(item).attr('num') != 1 && optCd2 == $(item).attr('optCd2')) {
-					$(item).click();
-				}
-			});
-		}
+		$(param).parent().parent().find('input[name=chgOptCd2]').val($(param).attr('optCd2'));
 	}
 	
 	// 옵션 저장 버튼 클릭 이벤트
 	var fnSaveOption = function() {
-		// 옵션 선택 여부 확인
-		if (checkedOrdDtlItemSqArr.length <= 0) {
-			mcxDialog.alert('교환 옵션을 선택해주세요.');
-			return false;
-		}
-
 		// 변경 옵션 처리
 		let dataArr = [];
-		let ordDtlItemSq = 0;
-		let colorNm = '';
-		let itemNm = '';
-		let goodsType = '';
-		let index = 0;
-		let chgOptCd2Arr = [];
-		let selectOptionCheck = true;
 
 		$.each($('input[name=chgOptCd2]'), function(idx, item) {
-			let chgOrdDtlItemSq = $(item).attr('ordDtlItemSq');
-			colorNm = $(item).attr('colorNm');
-			itemNm = $(item).attr('itemNm');
-			goodsType = $(item).attr('goodsType');
-			let changeYn = checkedOrdDtlItemSqArr.includes(chgOrdDtlItemSq)
-			let chgOptCd2 = changeYn ? $(item).val() : $(item).attr('orgOptCd2');
-			let chgOptCd2Obj = {};
-			chgOptCd2Obj.chgOptCd2 = chgOptCd2;
-			chgOptCd2Obj.qty = 1;
-
-			if (ordDtlItemSq != Number(chgOrdDtlItemSq)) {
-				if (index > 0) {
-					let data = {};
-					data.ordDtlNo = oneData.ordDtlNo;
-					data.ordDtlItemSq = ordDtlItemSq;
-					data.chgQty = chgQty;
-					data.colorNm = colorNm;
-					data.itemNm = itemNm;
-					data.goodsType = goodsType;
-					data.chgOptCd2Arr = fnOptionCount(chgOptCd2Arr);
-					dataArr.push(data);
-				}
-
-				ordDtlItemSq = chgOrdDtlItemSq;
-				chgOptCd2Arr = [];
-			}
-
-			chgOptCd2Arr.push(chgOptCd2Obj);
-
-			index++;
-
-			// 옵션 선택 여부 설정
-			if (changeYn && gagajf.isNull($(item).val())) {
-				selectOptionCheck = false;
-			}
+			let ordDtlItemSq = $(item).attr('ordDtlItemSq');
+			let colorNm = $(item).attr('colorNm');
+			let itemNm = $(item).attr('itemNm');
+			let goodsType = $(item).attr('goodsType');
+			let chgOptCd2 = $(item).val();
+
+			let data = {};
+			data.ordDtlNo = oneData.ordDtlNo;
+			data.ordDtlItemSq = ordDtlItemSq;
+			data.chgQty = chgQty;
+			data.colorNm = colorNm;
+			data.itemNm = itemNm;
+			data.goodsType = goodsType;
+			data.chgOptCd2 = chgOptCd2;
+			dataArr.push(data);
 		});
-
-		// 옵션 선택 여부 체크
-		if (!selectOptionCheck) {
-			mcxDialog.alert('교환 옵션을 선택해주세요.');
-			return false;
-		}
-
-		let data = {};
-		data.ordDtlNo = oneData.ordDtlNo;
-		data.ordDtlItemSq = ordDtlItemSq;
-		data.chgQty = chgQty;
-		data.colorNm = colorNm;
-		data.itemNm = itemNm;
-		data.goodsType = goodsType;
-		data.chgOptCd2Arr = fnOptionCount(chgOptCd2Arr);
-		dataArr.push(data);
-
+console.log(dataArr);
 		fnChangeOptionCallback(dataArr)
 
 		$('.close-modal').trigger('click');
 	}
-
-	// 변경 옵션별 수량 처리
-	var fnOptionCount = function(param) {
-		var result = [];
-		param.reduce(function(res, value) {
-			if (!res[value.chgOptCd2]) {
-				res[value.chgOptCd2] = { chgOptCd2: value.chgOptCd2, qty: 0 };
-				result.push(res[value.chgOptCd2])
-			}
-			res[value.chgOptCd2].qty += value.qty;
-			return res;
-		}, {});
-		
-		return result;
-	}
-
-	// 옵션 선택 영역 CSS 수정
-	var fnChangeCss = function() {
-		let index = 0;
-		$.each($('.modify_box'), function(idx, item) {
-			if ($(item).css('display') == 'block') {
-				index++;
-				if (index == 1) {
-					$(item).css('margin-top', '0');
-					$(item).css('padding-top', '0');
-					$(item).css('border-top', 'none');
-				} else {
-					$(item).css('margin-top', '30px');
-					$(item).css('padding-top', '30px');
-					$(item).css('border-top', '1px dashed #ddd');
-				}
-			}
-		});
-	}
 </script>

src/main/webapp/WEB-INF/views/web/mypage/ChangeOptionPopupFormWeb_20210406.html

@@ -0,0 +1,285 @@
+<!-- 배송지변경 팝업 -->
+<div class="modal-header">
+	<h5 class="modal-title" id="exchangeLabel">교환상품 옵션 변경</h5>
+</div>
+<div class="modal-body">
+	<div class="pop_cont">
+		<form class="form_wrap">
+			<div class="select_option_area">
+				<h6>옵션 변경 상품 선택</h6>
+				<div class="form_field">
+					<div th:if="${exchangeOptionInfo}" th:each="oneData, status : ${exchangeOptionInfo}">
+						<input th:id="|chk_exchange_item_${oneData.ordDtlItemSq}|" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}" type="checkbox" onclick="fnSelectOptionChange(this);"><label th:for="|chk_exchange_item_${oneData.ordDtlItemSq}|"><span th:text="|${oneData.itemNm} / ${oneData.colorNm} / ${oneData.optCd2}|"></span></label>
+					</div>
+				</div>
+			</div>
+			<div class="modify_option_area" id="modifyOptionArea" style="display:none">
+				<th:block th:if="${exchangeOptionInfo}" th:each="oneData, status : ${exchangeOptionInfo}">
+					<th:block th:if="${chgQty > 0}" th:each="num, index  : ${#numbers.sequence(1,chgQty)}">
+						<div class="modify_box" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, num=${num}" style="display:none">
+							<div class="name_blk" th:text="|${oneData.itemNm} / ${oneData.colorNm}|"></div>
+							<div class="select_blk">
+								<!-- 옵션교환 라디오 형태 -->
+								<div class="sel_radio" th:if="${oneData.selfGoodsYn == 'Y'}">
+									<input type="hidden" name="chgOptCd2" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, itemNm=${oneData.itemNm}, colorNm=${oneData.colorNm}, orgOptCd2=${oneData.optCd2}, goodsType=${oneData.goodsType}, num=${num}">
+									<div th:class="|form_field ${oneData.ordDtlItemSq}|">
+										<div th:if="${oneData.optCd2Arr.length > 0}" th:each="option, idx : ${oneData.optCd2Arr}">
+											<input type="radio" th:name="|${oneData.ordDtlItemSq}_${num}|" th:id="|${oneData.ordDtlItemSq}_${option}_${num}|" th:value="${option}" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, num=${num}" th:disabled="${#numbers.formatInteger(oneData.currStockQtyArr[idx.index], 0)} <= 0 or ${oneData.soldoutYnArr[idx.index] == 'Y'}" onclick="fnRadioOption(this);">
+											<label th:for="|${oneData.ordDtlItemSq}_${option}_${num}|"><span th:text="${option}"></span></label>
+										</div>
+									</div>
+								</div>
+								<!-- //옵션교환 라디오 형태 -->
+								<!-- 옵션교환 셀렉트박스 형태 -->
+								<div class="sel_select" th:unless="${oneData.selfGoodsYn == 'Y'}">
+									<div class="form_field">
+										<div class="select_custom exchange_option">
+											<div class="combo">
+												<input type="hidden" name="chgOptCd2" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, itemNm=${oneData.itemNm}, colorNm=${oneData.colorNm}, orgOptCd2=${oneData.optCd2}, goodsType=${oneData.goodsType}, num=${num}">
+												<div class="select">옵션 선택</div>
+												<ul class="list">
+													<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가  -->
+													<li class="selected" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, num=${num}, optCd2=''" onclick="fnSelectOption(this);">옵션 선택</li>
+													<th:block th:each="option, idx : ${oneData.optCd2Arr}">
+														<li th:if="${oneData.optCd2Arr.length} > 0 and (${#numbers.formatInteger(oneData.currStockQtyArr[idx.index],0)} <= 0 or ${oneData.soldoutYnArr[idx.index]} == 'Y')" th:text="${option}" aria-disabled="true" data-soldout="true" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, num=${num}, optCd2=''" onclick="fnSelectOption(this);"></li>
+														<li th:if="${oneData.optCd2Arr.length} > 0 and ${#numbers.formatInteger(oneData.currStockQtyArr[idx.index],0)} > 0 and ${oneData.soldoutYnArr[idx.index]} == 'N'" th:text="${option}" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, num=${num}, optCd2=${option}" onclick="fnSelectOption(this);"></li>
+													</th:block>
+												</ul>
+											</div>
+										</div>
+									</div>
+								</div>
+								<!-- //옵션교환 셀렉트박스 형태 -->
+							</div>
+							<div class="allcheck_blk" th:if="${num} == 1">
+								<div class="form_field">
+									<div>
+										<input th:id="|${oneData.ordDtlItemSq}_checkAll|" name="chk_exchange_all1" type="checkbox" checked="" onclick="fnSelectOptionChange();"><label th:for="|${oneData.ordDtlItemSq}_checkAll|"><span>선택 옵션으로 전체 교환</span></label>
+									</div>
+								</div>
+							</div>
+						</div>
+					</th:block>
+				</th:block>
+			</div>
+		</form>
+	</div>
+</div>
+<div class="modal-footer">
+	<button type="button" id="" class="btn btn_dark" onclick="fnSaveOption();"><span>옵션 저장</span></button>
+</div>
+<script th:inline="javascript">
+	let exchangeOptionInfo = [[${exchangeOptionInfo}]];
+	let oneData = [[${oneData}]];
+	let chgQty = [[${chgQty}]];
+	let checkedOrdDtlItemSqArr = [];
+
+	$(document).ready( function() {
+		// 셀렉트박스 활성화
+		$('#exchangePop .select_custom.exchange_option').each(function() {
+			new sCombo($(this));
+		});
+	});
+
+	// 구성상품 선택 및 전체 적용 클릭 이벤트
+	var fnSelectOptionChange = function() {
+		checkedOrdDtlItemSqArr = [];
+		let cnt = 0;
+		
+		// 체크 수량 조회
+		$.each($('.select_option_area .form_field input:checkbox'), function(idx, item) {
+			if ($(item).is(':checked')) {
+				checkedOrdDtlItemSqArr.push($(item).attr('ordDtlItemSq'));
+				cnt++;
+			}
+		});
+
+		// 옵션변경영역 처리
+		if (cnt > 0) {
+			$('#modifyOptionArea').css('display', '');
+		} else {
+			$('#modifyOptionArea').css('display', 'none');
+		}
+
+		$.each($('.modify_box'), function(idx, item) {
+			let ordDtlItemSq = $(item).attr('ordDtlItemSq');
+			let num = $(item).attr('num');
+			let id = '#' + ordDtlItemSq + '_checkAll';
+
+			if (checkedOrdDtlItemSqArr.includes(ordDtlItemSq)) {
+				if (num == 1) {
+					$(item).css('display', '');
+
+					if (oneData.selfGoodsYn == 'Y') {
+						$.each($(item).find('input:radio'), function (index, radio) {
+							if ($(radio).is(':checked')) {
+								$(radio).click();
+							}
+						});
+					} else {
+						$.each($(item).find('li'), function (index, radio) {
+							if ($(radio).hasClass('selected')) {
+								$(radio).click();
+							}
+						});
+					}
+				} else if ($(id).is(':checked')) {
+					$(item).css('display', 'none');
+				} else {
+					$(item).css('display', '');
+				}
+			} else {
+				$(item).css('display', 'none');
+			}
+		});
+
+		fnChangeCss();
+	}
+
+	// 라디오 클릭 이벤트
+	var fnRadioOption = function(param) {
+		let ordDtlItemSq = $(param).attr('ordDtlItemSq');
+		let num = $(param).attr('num');
+		let optCd2 = $(param).val();
+		let checkAllId = '#' + ordDtlItemSq + '_checkAll';
+		let radioId = '.' + ordDtlItemSq + ' input:radio';
+
+		$(param).parent().parent().parent().find('input[name=chgOptCd2]').val(optCd2);
+
+		if (num == 1 && $(checkAllId).is(':checked')) {
+			$.each($(radioId), function(idx, item) {
+				if ($(item).attr('num') != 1 && optCd2 == $(item).val()) {
+					$(item).click();
+				}
+			});
+		}
+	}
+
+	// 셀렉트박스 클릭 이벤트
+	var fnSelectOption = function(param) {
+		let ordDtlItemSq = $(param).attr('ordDtlItemSq');
+		let num = $(param).attr('num');
+		let optCd2 = $(param).attr('optCd2');
+		let checkAllId = '#' + ordDtlItemSq + '_checkAll';
+
+		$(param).parent().parent().find('input[name=chgOptCd2]').val(optCd2);
+
+		if (num == 1 && $(checkAllId).is(':checked')) {
+			$.each($('.exchange_option li'), function(idx, item) {
+				if ($(item).attr('num') != 1 && optCd2 == $(item).attr('optCd2')) {
+					$(item).click();
+				}
+			});
+		}
+	}
+	
+	// 옵션 저장 버튼 클릭 이벤트
+	var fnSaveOption = function() {
+		// 옵션 선택 여부 확인
+		if (checkedOrdDtlItemSqArr.length <= 0) {
+			mcxDialog.alert('교환 옵션을 선택해주세요.');
+			return false;
+		}
+
+		// 변경 옵션 처리
+		let dataArr = [];
+		let ordDtlItemSq = 0;
+		let colorNm = '';
+		let itemNm = '';
+		let goodsType = '';
+		let chgOptCd2Arr = [];
+		let selectOptionCheck = true;
+
+		$.each($('input[name=chgOptCd2]'), function(idx, item) {
+			let chgOrdDtlItemSq = $(item).attr('ordDtlItemSq');
+			colorNm = $(item).attr('colorNm');
+			itemNm = $(item).attr('itemNm');
+			goodsType = $(item).attr('goodsType');
+			let changeYn = checkedOrdDtlItemSqArr.includes(chgOrdDtlItemSq)
+			let chgOptCd2 = changeYn ? $(item).val() : $(item).attr('orgOptCd2');
+			let chgOptCd2Obj = {};
+			chgOptCd2Obj.chgOptCd2 = chgOptCd2;
+			chgOptCd2Obj.qty = 1;
+
+			if (ordDtlItemSq != Number(chgOrdDtlItemSq)) {
+				if (idx > 0) {
+					let data = {};
+					data.ordDtlNo = oneData.ordDtlNo;
+					data.ordDtlItemSq = ordDtlItemSq;
+					data.chgQty = chgQty;
+					data.colorNm = colorNm;
+					data.itemNm = itemNm;
+					data.goodsType = goodsType;
+					data.chgOptCd2Arr = fnOptionCount(chgOptCd2Arr);
+					dataArr.push(data);
+				}
+
+				ordDtlItemSq = chgOrdDtlItemSq;
+				chgOptCd2Arr = [];
+			}
+
+			chgOptCd2Arr.push(chgOptCd2Obj);
+
+			
+
+			// 옵션 선택 여부 설정
+			if (changeYn && gagajf.isNull($(item).val())) {
+				selectOptionCheck = false;
+			}
+		});
+
+		// 옵션 선택 여부 체크
+		if (!selectOptionCheck) {
+			mcxDialog.alert('교환 옵션을 선택해주세요.');
+			return false;
+		}
+
+		let data = {};
+		data.ordDtlNo = oneData.ordDtlNo;
+		data.ordDtlItemSq = ordDtlItemSq;
+		data.chgQty = chgQty;
+		data.colorNm = colorNm;
+		data.itemNm = itemNm;
+		data.goodsType = goodsType;
+		data.chgOptCd2Arr = fnOptionCount(chgOptCd2Arr);
+		dataArr.push(data);
+
+		fnChangeOptionCallback(dataArr)
+
+		$('.close-modal').trigger('click');
+	}
+
+	// 변경 옵션별 수량 처리
+	var fnOptionCount = function(param) {
+		var result = [];
+		param.reduce(function(res, value) {
+			if (!res[value.chgOptCd2]) {
+				res[value.chgOptCd2] = { chgOptCd2: value.chgOptCd2, qty: 0 };
+				result.push(res[value.chgOptCd2])
+			}
+			res[value.chgOptCd2].qty += value.qty;
+			return res;
+		}, {});
+		
+		return result;
+	}
+
+	// 옵션 선택 영역 CSS 수정
+	var fnChangeCss = function() {
+		let index = 0;
+		$.each($('.modify_box'), function(idx, item) {
+			if ($(item).css('display') == 'block') {
+				index++;
+				if (index == 1) {
+					$(item).css('margin-top', '0');
+					$(item).css('padding-top', '0');
+					$(item).css('border-top', 'none');
+				} else {
+					$(item).css('margin-top', '30px');
+					$(item).css('padding-top', '30px');
+					$(item).css('border-top', '1px dashed #ddd');
+				}
+			}
+		});
+	}
+</script>

src/main/webapp/WEB-INF/views/web/mypage/MypageCustDeliveryAddrFormWeb.html

@@ -114,12 +114,12 @@
 			html +=	'    <td>\n';
 			html +=	'        <div class="button_box">\n';
 			html +=	'            <p>';
-			html +=	'                <button type="button" class="btn btn_default btn_sm" onclick="fnChangeDeliveryAddr(custDeliveryAddr.custDelvAddrSq)">';
+			html +=	'                <button type="button" class="btn btn_default btn_sm" onclick="fnModiFyCustDelvAddr(\''+custDeliveryAddr.custDelvAddrSq+'\')">';
 			html +=	'                    <span>수정</span>';
 			html +=	'                </button>';
 			html +=	'            </p>';
 			html +=	'            <p>';
-			html +=	'                <button type="button" class="btn btn_dark btn_sm">';
+			html +=	'                <button type="button" class="btn btn_dark btn_sm" onclick="fnDeleteCustDelvAddr(\''+custDeliveryAddr.custDelvAddrSq+'\')">';
 			html +=	'                   <span>삭제</span>';
 			html +=	'                </button>';
 			html +=	'            </p>';
@@ -154,8 +154,45 @@
 		if(!gagajf.isNull(delvObj.custDelvAddrSq)) {
 			fnCustDeliveryAddList();
 		}
+	};
+
+	var fnModiFyCustDelvAddr = function (custDelvAddrSq) {
+		let params = {}
+		params.custDelvAddrSq = custDelvAddrSq;
+
+		$.ajax( {
+			type		: "POST",
+			url 		: '/common/delvAddrModifyPop',
+			data		: JSON.stringify(params),
+			dataType 	: 'html',
+			beforeSend : function(xhr, settings) {
+				xhr.setRequestHeader("AJAX"			, "true");
+				xhr.setRequestHeader('Accept'		, 'application/json');
+				xhr.setRequestHeader('Content-Type'	, 'application/json');
+				gagajf.showProgressbar(true);
+			},
+			success 	: function(result) {
+				$("#adrsModifyPop .modal-dialog .modal-content").html(result);
+				$("#adrsModifyPop").modal("show");
+			}
+		});
+	};
+	
+	var fnDeleteCustDelvAddr = function (custDelvAddrSq) {
+		let params = {}
+		params.custDelvAddrSq = custDelvAddrSq;
+		let jsonData = JSON.stringify(params);
+		gagajf.ajaxJsonSubmit("/mypage/customer/delivery/addr/delete", jsonData, function (result) {
+			if (result.isSuccess) {
+				fnCustDeliveryAddList();
+			} else {
+				mcxDialog.alert("배송지 삭제를 실패 하였습니다.");
+				return;
+			}
+		})
 	}
 
+
 	$(document).ready(function() {
 
 		// 마이페이지 LNB 설정

src/main/webapp/WEB-INF/views/web/mypage/MypageExchangeFormWeb.html

@@ -70,7 +70,6 @@
 													<span class="option" th:if="${exchange.goodsType == 'G056_S'}" th:each="option, status : ${exchange.colorNmArr}" th:text="|${exchange.itemNmArr[status.index]} / ${option} / ${exchange.optCd2Arr[status.index]}|"></span>
 													<span class="option" th:unless="${exchange.goodsType == 'G056_S'}" th:text="|${exchange.colorNm} / ${exchange.optCd2}|"></span>
 												</div>
-												<div class="option_wrap exchangeOption" style="display:none" th:attr="ordDtlNo=${exchange.ordDtlNo}"></div>
 											</div>
 											<div class="gd_calc">
 												<p>
@@ -81,6 +80,9 @@
 													<span class="price_sale"><em th:text="${#numbers.formatInteger(exchange.realOrdAmt + exchange.pntDcAmt + exchange.gfcdUseAmt, 1, 'COMMA')}"></em>원</span>
 												</p>
 											</div>
+											<div class="gd_opt exchangeOption" style="display:none" th:attr="ordDtlNo=${exchange.ordDtlNo}">
+												<div class="option_wrap"></div>
+											</div>
 										</div>
 										<div class="button_box">
 											<div class="count_modify">
@@ -146,8 +148,8 @@
 								</tbody>
 							</table>
 						</div>
-						<h4 class="subH3">반품 방식 선택</h4>
-						<div class="tbl type1">
+						<h4 class="subH3 wdGb">반품 방식 선택</h4>
+						<div class="tbl type1 wdGb">
 							<table>
 								<tbody>
 								<tr>
@@ -297,7 +299,7 @@
 <script src="/ux/plugins/gaga/gaga.paging.js"></script>
 <script th:inline="javascript">
 	var isLogin = [[${isLogin}]];
-	let ordNo = [[${oneData.ordNo}]];
+	//let ordNo = [[${oneData.ordNo}]];
 	let oneData = [[${oneData}]];
 	let isCustomer = true;
 	let addrGb = '';
@@ -315,9 +317,9 @@
 		});
 
 		// 입점업체의 경우 회수방식 직접배송 처리
-		if (oneData.selfGoodsYn == 'Y') {
+		if (oneData.selfGoodsYn != 'Y') {
 			$('#direct').click();
-			$('#wdGb').css('display','none');
+			$('.wdGb').css('display','none');
 		}
 	});
 
@@ -365,57 +367,99 @@
 	// 교환 옵션 변경 팝업 콜백 처리
 	var fnChangeOptionCallback = function(param) {
 		let ordDtlNo;
-		let chgOptionList = [];
-		let chgOptDisp = [];
-		$.each(param, function(idx, item) {
-			chgOptionList.push(item);
-			chgOptDisp.push(item.chgOptCd2Arr);
-		});
 
 		// 교환옵션 HTML 처리
 		let html = '												<span class="title">교환 옵션</span>\n';
-		$.each(chgOptionList, function(idx, item) {
+		$.each(param, function(idx, item) {
+			ordDtlNo = item.ordDtlNo;
 			let colorNm = item.colorNm;
 			let itemNm = item.itemNm;
 			let goodsType = item.goodsType;
+			let optCd2 = item.chgOptCd2;
+			let qty = item.chgQty;
 
-			$.each(item.chgOptCd2Arr, function (index, option) {
-				let optCd2 = option.chgOptCd2;
-				let qty = option.qty;
-				
-				if (goodsType == 'G056_S') {
-					html += '												<span class="option">' + itemNm + ' / ' + colorNm + ' / ' + optCd2 + ' / ' + qty + '개</span>\n';
-				} else {
-					html += '												<span class="option">' + colorNm + ' / ' + optCd2 + ' / ' + qty + '개</span>\n';
-				}
-			});
+			if (goodsType == 'G056_S') {
+				html += '												<span class="option">' + itemNm + ' / ' + colorNm + ' / ' + optCd2 + ' / ' + qty + '개</span>\n';
+			} else {
+				html += '												<span class="option">' + colorNm + ' / ' + optCd2 + ' / ' + qty + '개</span>\n';
+			}
 		});
 
 		$.each($('.exchangeOption'), function(idx, item) {
 			if (ordDtlNo == $(item).attr('ordDtlNo')) {
 				$(item).css('display', '');
-				$(item).html(html);
+				$(item).find('.option_wrap').html(html);
 			}
 		});
 
 		// 교환옵션 값 JSON 형태로 설정
 		$.each($('#exchangeForm input[name=chgOptionList]'), function(idx, item) {
 			if (ordDtlNo == $(item).attr('ordDtlNo')) {
-				$(item).val(JSON.stringify(chgOptionList));
+				$(item).val(JSON.stringify(param));
 			}
 		});
+	}
+
+	// 교환 처리
+	var fnExchange = function() {
+		// TODO
+		// 교환신청 처리
+
+		let url = '/mypage/exchange';
+		let delvFeeCd = oneData.delvFeeCd;
+		let ordDtlNo = oneData.ordDtlNo;
+		let supplyCompCd = oneData.supplyCompCd;
+		let excDelvFee = oneData.excDelvFee;
+		let rtnDelvFee = oneData.rtnDelvFee;
 
 		// 교환옵션 값 파싱 처리 예제
+		let cancelReqList = [];
 		$.each($('#exchangeForm input[name=chgOptionList]'), function(idx, item) {
 			let json = $(item).val();
 			let jsonData = JSON.parse(json);
+			$.each(jsonData, function(index, chgOpt) {
+				let cancelReq = {};
+				cancelReq.ordDtlNo = ordDtlNo;
+				cancelReq.ordDtlItemSq = chgOpt.ordDtlItemSq;
+				cancelReq.delvFeeCd = delvFeeCd;
+				cancelReq.supplyCompCd = supplyCompCd;
+				cancelReq.excDelvFee = excDelvFee;
+				cancelReq.rtnDelvFee = rtnDelvFee;
+				cancelReq.ordChgOpt = chgOpt.chgOptCd2;
+				cancelReq.chgQty = chgOpt.chgQty;
+				cancelReqList.push(cancelReq);
+			});
 		});
-	}
+		
+		let data = {};
+		data.ordNo = oneData.ordNo;
+		data.isCustomer = isCustomer;
+		data.wdGb = $('#exchangeForm input[name=wdGb]:radio:checked').val();
+		data.recipNm = $('#exchangeForm input[name=recipNm]').val();
+		data.recipPhnno = $('#exchangeForm input[name=recipPhnno]').val();
+		data.recipTelno = $('#exchangeForm input[name=recipTelno]').val();
+		data.recipZipcode = $('#exchangeForm input[name=recipZipcode]').val();
+		data.recipBaseAddr = $('#exchangeForm input[name=recipBaseAddr]').val();
+		data.recipDtlAddr = $('#exchangeForm input[name=recipDtlAddr]').val();
+		data.delvMemo = $('#exchangeForm input[name=delvMemo]').val();
+		data.chgReason = $('#exchangeForm input[name=chgReason]').val();
+		data.chgMemo = $('#exchangeForm textarea[name=chgMemo]').val();
+		data.chgerNm = $('#exchangeForm input[name=chgerNm]').val();
+		data.chgerPhnno = $('#exchangeForm input[name=chgerPhnno]').val();
+		data.chgerTelno = $('#exchangeForm input[name=chgerTelno]').val();
+		data.chgerEmail = $('#exchangeForm input[name=chgerEmail]').val();
+		data.chgerZipcode = $('#exchangeForm input[name=chgerZipcode]').val();
+		data.chgerBaseAddr = $('#exchangeForm input[name=chgerBaseAddr]').val();
+		data.chgerDtlAddr = $('#exchangeForm input[name=chgerDtlAddr]').val();
+		data.chgerRtnMemo = $('#exchangeForm input[name=chgerRtnMemo]').val();
+		data.addPayAmt = 0;
+		data.cancelReqList = cancelReqList;
+		
+		let jsonData = JSON.stringify(data);
 
-	// 교환 처리
-	var fnExchange = function() {
-		// TODO
-		// 교환신청 처리
+		gagajf.ajaxJsonSubmit(url, jsonData, function(result) {
+			console.log(result);
+		});
 	}
 
 	// 반품 방식 변경 이벤트
@@ -508,22 +552,22 @@
 			$('#recipAddr').text(recipBaseAddr + ' ' + recipDtlAddr);
 			$('#delvMemo').text(delvMemo);
 
-			$('input[name=recipNm]').val(recipNm);
-			$('input[name=recipPhnno]').val(recipPhnno);
-			$('input[name=recipZipcode]').val(recipZipcode);
-			$('input[name=recipBaseAddr]').val(recipBaseAddr);
-			$('input[name=recipDtlAddr]').val(recipDtlAddr);
-			$('input[name=delvMemo]').val(delvMemo);
+			$('#exchangeForm input[name=recipNm]').val(recipNm);
+			$('#exchangeForm input[name=recipPhnno]').val(recipPhnno);
+			$('#exchangeForm input[name=recipZipcode]').val(recipZipcode);
+			$('#exchangeForm input[name=recipBaseAddr]').val(recipBaseAddr);
+			$('#exchangeForm input[name=recipDtlAddr]').val(recipDtlAddr);
+			$('#exchangeForm input[name=delvMemo]').val(delvMemo);
 		} else {
 			let chgerAddr = recipBaseAddr + ' ' + recipDtlAddr + '\n';
 			chgerAddr += '<button type="button" class="btn btn_default btn_sm" onclick="fnChangeAddr(\'chger\');"><span>회수지 변경</span></button>';
 
-			$('input[name=chgerNm]').val(recipNm);
-			$('input[name=chgerPhnno]').val(recipPhnno);
-			$('input[name=chgerZipcode]').val(recipZipcode);
-			$('input[name=chgerBaseAddr]').val(recipBaseAddr);
-			$('input[name=chgerDtlAddr]').val(recipDtlAddr);
-			$('input[name=chgerRtnMemo]').val(delvMemo);
+			$('#exchangeForm input[name=chgerNm]').val(recipNm);
+			$('#exchangeForm input[name=chgerPhnno]').val(recipPhnno);
+			$('#exchangeForm input[name=chgerZipcode]').val(recipZipcode);
+			$('#exchangeForm input[name=chgerBaseAddr]').val(recipBaseAddr);
+			$('#exchangeForm input[name=chgerDtlAddr]').val(recipDtlAddr);
+			$('#exchangeForm input[name=chgerRtnMemo]').val(delvMemo);
 
 			$('#chgerNm').text(recipNm);
 			$('#chgerPhnno').text(recipPhnno);

src/main/webapp/WEB-INF/views/web/mypage/MypageReturnFormWeb.html

@@ -148,8 +148,8 @@
 								</tbody>
 							</table>
 						</div>
-						<h4 class="subH3">반품 방식 선택</h4>
-						<div class="tbl type1">
+						<h4 class="subH3 wdGb">반품 방식 선택</h4>
+						<div class="tbl type1 wdGb">
 							<table>
 								<tbody>
 									<tr>
@@ -364,9 +364,9 @@
 		var return_reason_selecter = new sCombo('.myOrderView .tbl.type1 td .select_custom.select_reason');
 
 		// 입점업체의 경우 회수방식 직접배송 처리
-		if (oneData.selfGoodsYn == 'Y') {
+		if (oneData.selfGoodsYn != 'Y') {
 			$('#direct').click();
-			$('#wdGb').css('display','none');
+			$('.wdGb').css('display','none');
 		}
 	});
 

src/main/webapp/WEB-INF/views/web/order/OrderDeliveryAddrInfoWeb.html

@@ -13,6 +13,7 @@
  * 1.0  2021.02.01   jsh77b     최초 작성
  *******************************************************************************
  -->
+
 <!-- 배송지정보 -->
 <input type="hidden" name="recipNm" 		th:value="${deliveryAddrInfo.recipNm}"/>
 <input type="hidden" name="recipPhnno" 		th:value="${deliveryAddrInfo.recipPhnno}"/>
@@ -26,9 +27,7 @@
 <div class="fold_head">
 	<a href="javascript:void(0)">
 		<div>
-			<div class="fold_tit">
-				<span>배송지 정보</span>
-			</div>
+			<div class="fold_tit"><span>배송지 정보</span></div>
 			<div class="data" id="recipAddr" th:text="${deliveryAddrInfo.recipBaseAddr} + '   ' + ${deliveryAddrInfo.recipDtlAddr}"></div>
 		</div>
 	</a>
@@ -37,9 +36,7 @@
 	<div class="area_receiveinfo">
 		<dl>
 			<div>
-				<dt>
-					<span>배송지명</span>
-				</dt>
+				<dt><span>배송지명</span></dt>
 				<dd>
 					<th:block th:text="${deliveryAddrInfo.recipNm}"></th:block>
 					<span class="icon_tag"> 
@@ -51,9 +48,7 @@
 				</dd>
 			</div>
 			<div>
-				<dt>
-					<span>배송주소</span>
-				</dt>
+				<dt><span>배송주소</span></dt>
 				<dd>
 					<th:block th:text="${deliveryAddrInfo.recipBaseAddr} + '    ' + ${deliveryAddrInfo.recipDtlAddr}"></th:block>
 					<button type="button" class="btn btn_default btn_sm" id="btn_adrsChange_pop">
@@ -62,9 +57,7 @@
 				</dd>
 			</div>
 			<div>
-				<dt>
-					<span>휴대폰 번호</span>
-				</dt>
+				<dt><span>휴대폰 번호</span></dt>
 				<dd th:text="${deliveryAddrInfo.recipPhnno}"></dd>
 			</div>
 			<div>
@@ -150,6 +143,7 @@
 	<!-- //주문제작상품일 경우 노출 -->
 </div> <!-- //배송지정보 -->
 
+
 <script th:inline="javascript">
 var dispYn = [[${order.dispYn}]]; // 노출여부
 

src/main/webapp/WEB-INF/views/web/order/OrderFormWeb.html

@@ -25,211 +25,213 @@
 <script type="text/javascript" th:src="${@environment.getProperty('pg.kcp.js.url')}" src=""></script>
 <script type="text/javascript" src="/biz/payment.js"></script>
 
+<!-- 주문정보form -->
 <form id="order_info" name="order_info" method="post" action="/order/pay/result/response" ></form>
-
-<!-- 주문고객정보 -->
-<form id="orderForm" name="orderForm">
-<table border="1" style="font-size:10px; text-align:center; margin-top:20px; display:none;" name="orderInfo" id="orderInfo">
-	<tbody>
+<!-- //주문정보form -->
+
+<!-- 주문금액정보표현 -->
+<form id="orderAmtForm" name="orderAmtForm">
+	<table border="1" style="font-size:10px; text-align:center; margin-top:20px; display:none; width:100%;" name="orderInfo" id="orderInfo">
+		<tbody>
+			<tr style="height:30px;">
+				<th>custNm</th>
+				<th>email</th>
+				<th>cellPhnno</th>
+				<th>recipNm</th>
+				<th>recipPhnno</th>
+				<th>recipZipcode</th>
+				<th>recipBaseAddr</th>
+				<th>recipDtlAddr</th>
+				<th>delvMemo</th>
+			</tr>
+			<tr style="height:30px;">
+				<td class="custNm"></td>
+				<td class="email"></td>
+				<td class="cellPhnno"></td>
+				<td class="recipNm"></td>
+				<td class="recipPhnno"></td>
+				<td class="recipZipcode"></td>
+				<td class="recipBaseAddr"></td>
+				<td class="recipDtlAddr"></td>
+				<td class="delvMemo"></td>
+			</tr>
+		</tbody>
+	</table>
+	
+	<!-- 사은품정보 -->
+	<table border="1" style="font-size:10px; text-align:center; margin-top:20px; display:none; width:100%;" name="freegiftInfo">
 		<tr style="height:30px;">
-			<th>custNm</th>
-			<th>email</th>
-			<th>cellPhnno</th>
-			<th>recipNm</th>
-			<th>recipPhnno</th>
-			<th>recipZipcode</th>
-			<th>recipBaseAddr</th>
-			<th>recipDtlAddr</th>
-			<th>delvMemo</th>
-			<th>foreignBuyYn</th>
-			<th>orderMadeYn</th>
+			<th>freegiftValArr</th>
+			<th>freegiftUsePointArr</th>
+			<th>freegiftSqArr</th>
+			<th>freegiftGoodsArr</th>
+		</tr>
+		<tr style="height:30px;">
+			<td class="freegiftValArr"></td>
+			<td class="freegiftUsePointArr"></td>
+			<td class="freegiftSqArr"></td>
+			<td class="freegiftGoodsArr"></td>
 		</tr>
+	</table>
+	
+	<!-- 주문상세금액 -->
+	<table border="1" style="font-size:10px; text-align:center; margin-top:20px; display:none; width:100%;" name="orderDetailInfo" id="orderDetailInfo">
 		<tr style="height:30px;">
-			<td class="custNm"></td>
-			<td class="email"></td>
-			<td class="cellPhnno"></td>
-			<td class="recipNm"></td>
-			<td class="recipPhnno"></td>
-			<td class="recipZipcode"></td>
-			<td class="recipBaseAddr"></td>
-			<td class="recipDtlAddr"></td>
-			<td class="delvMemo"></td>
-			<td class="foreignBuyYn"></td>
-			<td class="orderMadeYn"></td>
+			<th>cartSq</th>
+			<th style="display:none">goodsNm</th>
+			<th>goodsCd</th>
+			<th>goodsType</th>
+			<th>itemCd</th>
+			<th>optCd</th>
+			<th style="display:none">optCd1</th>
+			<th style="display:none">optCd2</th>
+			<th style="display:none">itemQtyr</th>
+			<th>orgCurrPrice</th>
+			<th>cpn1DcSq</th>
+			<th>cpn1DcAmt</th>
+			<th>optAddPrice</th>
+			<th>goodsQty</th>
+			<th>ordAmt</th>
+			<th>tmtb1Sq</th>
+			<th>tmtb1DcAmt</th>
+			<th>tmtb2Sq</th>
+			<th>tmtb2DcAmt</th>
+			<th>goodsCpnSq</th>
+			<th>goodsCpnDcAmt</th>
+			<th>cartCpnSq</th>
+			<th>cartCpnDcAmt</th>
+			<th>prePntDcAmt1</th>
+			<th>dcSumAmt</th>
+			<th>pntDcAmt1</th>
+			<th>gfcdUseAmt1</th>
+			<th>realOrdAmt1</th>
+			<th>savePntAmt1</th>
+			<th>shotDelvYn</th>
+			<th>foreignYn</th>
+			<th>orderMadeYn</th>
+			<th>delvFeeCd</th>
 		</tr>
-	</tbody>
-</table>
-
-<!-- 사은품정보 -->
-<table border="1" style="font-size:10px; text-align:center; margin-top:20px; display:none;" name="freegiftInfo">
-	<tr style="height:30px;">
-		<th>freegiftValArr</th>
-		<th>freegiftUsePointArr</th>
-		<th>freegiftSqArr</th>
-		<th>freegiftGoodsArr</th>
-	</tr>
-	<tr style="height:30px;">
-		<td class="freegiftValArr"></td>
-		<td class="freegiftUsePointArr"></td>
-		<td class="freegiftSqArr"></td>
-		<td class="freegiftGoodsArr"></td>
-	</tr>
-</table>
-
-<!-- 주문상세금액 -->
-<table border="1" style="font-size:10px; text-align:center; margin-top:20px; display:none;" name="orderDetailInfo" id="orderDetailInfo">
-	<tr style="height:30px;">
-		<th>cartSq</th>
-		<th style="display:none">goodsNm</th>
-		<th>goodsCd</th>
-		<th>goodsType</th>
-		<th>itemCd</th>
-		<th>optCd</th>
-		<th style="display:none">optCd1</th>
-		<th style="display:none">optCd2</th>
-		<th style="display:none">itemQtyr</th>
-		<th>orgCurrPrice</th>
-		<th>cpn1DcSq</th>
-		<th>cpn1DcAmt</th>
-		<th>optAddPrice</th>
-		<th>goodsQty</th>
-		<th>ordAmt</th>
-		<th>tmtb1Sq</th>
-		<th>tmtb1DcAmt</th>
-		<th>tmtb2Sq</th>
-		<th>tmtb2DcAmt</th>
-		<th>goodsCpnSq</th>
-		<th>goodsCpnDcAmt</th>
-		<th>cartCpnSq</th>
-		<th>cartCpnDcAmt</th>
-		<th>prePntDcAmt1</th>
-		<th>dcSumAmt</th>
-		<th>pntDcAmt1</th>
-		<th>gfcdUseAmt1</th>
-		<th>realOrdAmt1</th>
-		<th>savePntAmt1</th>
-		<th>shotDelvYn</th>
-		<th>foreignYn</th>
-		<th>orderMadeYn</th>
-		<th>delvFeeCd</th>
-	</tr>
-	<th:block th:each="delvAllCart, index : ${delvAllCartList}">
-		<th:block th:if="${delvAllCart != null and #lists.size(delvAllCart) > 0}">
-			<th:block th:each="goods, i : ${delvAllCart}">
-				<tr style="height:30px;">
-					<td class="cartSq" 			th:text="${goods.cartSq}"></td>
-					<td class="goodsNm" 		th:text="${goods.goodsNm}" style="display:none"></td>
-					<td class="goodsCd"			th:text="${goods.goodsCd}"></td>
-					<td class="goodsType"		th:text="${goods.goodsType}"></td>
-					<td class="itemCd"			th:text="${goods.itemCd}"></td>
-					<td class="optCd"			th:text="${goods.optCd}"></td>
-					<td class="optCd1"			th:text="${goods.optCd1}" style="display:none"></td>
-					<td class="optCd2"			th:text="${goods.optCd2}" style="display:none"></td>
-					<td class="itemQtyr"		th:text="${goods.itemQtyr}" style="display:none"></td>
-					<td class="orgCurrPrice" 	th:text="${goods.orgCurrPrice}"></td>
-					<td class="cpn1CpnSq" 		th:text="${goods.cpn1CpnSq}"></td>
-					<td class="cpn1DcAmt" 		th:text="${goods.orgCurrPrice} - ${goods.currPrice}"></td>
-					<td class="optAddPrice" 	th:text="${goods.optAddPrice}"></td>
-					<td class="goodsQty" 		th:text="${goods.goodsQty}"></td>
-					<td class="ordAmt">0</td>
-					<th:block th:if="${goods.applyQtySectionYn} == 'Y' and ${goods.qtyTmtbSq} > 0">
-						<td class="tmtb1Sq" 	th:text="${goods.qtyTmtbSq}"></td>
-						<td class="tmtb1DcAmt" 	th:text="${goods.tmtb1DcAmt}"></td>
-					</th:block>
-					<th:block th:if="${goods.applyQtySectionYn} != 'Y'">
-						<td class="tmtb1Sq">0</td>
-						<td class="tmtb1DcAmt">0</td>
-					</th:block>
-					<th:block th:if="${goods.applyAmtSectionYn} == 'Y' and ${goods.amtTmtbSq} > 0">
-						<td class="tmtb2Sq" 	th:text="${goods.amtTmtbSq}"></td>
-						<td class="tmtb2DcAmt" 	th:text="${goods.tmtb2DcAmt}"></td>
-					</th:block>
-					<th:block th:if="${goods.applyAmtSectionYn} != 'Y'">
-						<td class="tmtb2Sq" >0</td>
-						<td class="tmtb2DcAmt" >0</td>
-					</th:block>
-					<td class="goodsCpnSq">0</td>
-					<td class="goodsCpnDcAmt">0</td>
-					<td class="cartCpnSq">0</td>
-					<td class="cartCpnDcAmt">0</td>
-					<td class="prePntDcAmt1" 	th:text="${goods.prePntDcAmt}"></td>
-					<td class="dcSumAmt">0</td>
-					<td class="pntDcAmt1">0</td>
-					<td class="gfcdUseAmt1">0</td>
-					<td class="realOrdAmt1">0</td>
-					<td class="savePntAmt1" 	th:text="${goods.savePntAmt}"></td>
-					<td class="shotDelvYn" 		th:text="${goods.shotDelvYn}"></td>
-					<td class="foreignBuyYn" 	th:text="${goods.foreignBuyYn}"></td>
-					<td class="orderMadeYn" 	th:text="${goods.orderMadeYn}"></td>
-					<td class="delvFeeCd" 		th:text="${goods.delvFeeCd}"></td>
-				</tr>
+		<th:block th:each="delvAllCart, index : ${delvAllCartList}">
+			<th:block th:if="${delvAllCart != null and #lists.size(delvAllCart) > 0}">
+				<th:block th:each="goods, i : ${delvAllCart}">
+					<tr style="height:30px;">
+						<td class="cartSq" 			th:text="${goods.cartSq}"></td>
+						<td class="goodsNm" 		th:text="${goods.goodsNm}" style="display:none"></td>
+						<td class="goodsCd"			th:text="${goods.goodsCd}"></td>
+						<td class="goodsType"		th:text="${goods.goodsType}"></td>
+						<td class="itemCd"			th:text="${goods.itemCd}"></td>
+						<td class="optCd"			th:text="${goods.optCd}"></td>
+						<td class="optCd1"			th:text="${goods.optCd1}" style="display:none"></td>
+						<td class="optCd2"			th:text="${goods.optCd2}" style="display:none"></td>
+						<td class="itemQtyr"		th:text="${goods.itemQtyr}" style="display:none"></td>
+						<td class="orgCurrPrice" 	th:text="${goods.orgCurrPrice}"></td>
+						<td class="cpn1CpnSq" 		th:text="${goods.cpn1CpnSq}"></td>
+						<td class="cpn1DcAmt" 		th:text="${goods.orgCurrPrice} - ${goods.currPrice}"></td>
+						<td class="optAddPrice" 	th:text="${goods.optAddPrice}"></td>
+						<td class="goodsQty" 		th:text="${goods.goodsQty}"></td>
+						<td class="ordAmt">0</td>
+						<th:block th:if="${goods.applyQtySectionYn} == 'Y' and ${goods.qtyTmtbSq} > 0">
+							<td class="tmtb1Sq" 	th:text="${goods.qtyTmtbSq}"></td>
+							<td class="tmtb1DcAmt" 	th:text="${goods.tmtb1DcAmt}"></td>
+						</th:block>
+						<th:block th:if="${goods.applyQtySectionYn} != 'Y'">
+							<td class="tmtb1Sq">0</td>
+							<td class="tmtb1DcAmt">0</td>
+						</th:block>
+						<th:block th:if="${goods.applyAmtSectionYn} == 'Y' and ${goods.amtTmtbSq} > 0">
+							<td class="tmtb2Sq" 	th:text="${goods.amtTmtbSq}"></td>
+							<td class="tmtb2DcAmt" 	th:text="${goods.tmtb2DcAmt}"></td>
+						</th:block>
+						<th:block th:if="${goods.applyAmtSectionYn} != 'Y'">
+							<td class="tmtb2Sq" >0</td>
+							<td class="tmtb2DcAmt" >0</td>
+						</th:block>
+						<td class="goodsCpnSq">0</td>
+						<td class="goodsCpnDcAmt">0</td>
+						<td class="cartCpnSq">0</td>
+						<td class="cartCpnDcAmt">0</td>
+						<td class="prePntDcAmt1" 	th:text="${goods.prePntDcAmt}"></td>
+						<td class="dcSumAmt">0</td>
+						<td class="pntDcAmt1">0</td>
+						<td class="gfcdUseAmt1">0</td>
+						<td class="realOrdAmt1">0</td>
+						<td class="savePntAmt1" 	th:text="${goods.savePntAmt}"></td>
+						<td class="shotDelvYn" 		th:text="${goods.shotDelvYn}"></td>
+						<td class="foreignBuyYn" 	th:text="${goods.foreignBuyYn}"></td>
+						<td class="orderMadeYn" 	th:text="${goods.orderMadeYn}"></td>
+						<td class="delvFeeCd" 		th:text="${goods.delvFeeCd}"></td>
+					</tr>
+				</th:block>
 			</th:block>
 		</th:block>
-	</th:block>
-</table>
-
-<!-- 배송단위목록 -->
-<table border="1" style="font-size:10px; text-align:center;  margin-top:20px; display:none;" name="delvFeeCdInfo" id="delvFeeCdInfo">
-	<tr style="height:30px;">
-		<th>supplyCompCd</th>
-		<th>delvFeeCd</th>
-		<th>delvFee</th>
-		<th>delvCpnSq</th>
-		<th>delvCpnDcAmt</th>
-	</tr>
-	<th:block th:each="delvFeeCd, index : ${delvFeeCdList}">
+	</table>
+	
+	<!-- 배송단위목록 -->
+	<table border="1" style="font-size:10px; text-align:center;  margin-top:20px; display:none; width:100%;" name="delvFeeCdInfo" id="delvFeeCdInfo">
 		<tr style="height:30px;">
-			<td class="supplyCompCd" th:text="${delvFeeCd.supplyCompCd}"></td>
-			<td class="delvFeeCd" th:text="${delvFeeCd.delvFeeCd}"></td>
-			<td class="delvFee" th:text="${delvFeeCd.delvFee}"></td>
-			<td class="delvCpnSq">0</td>
-			<td class="delvCpnDcAmt">0</td>
+			<th>supplyCompCd</th>
+			<th>delvFeeCd</th>
+			<th>delvFee</th>
+			<th>delvCpnSq</th>
+			<th>delvCpnDcAmt</th>
 		</tr>
-	</th:block>
-</table>
-
-<!-- 주문금액합계 -->
-<table border="1" style="font-size:10px; text-align:center;  margin-top:20px; display:none;" name="orderSumAmtInfo" id="orderSumAmtInfo">
-	<tr style="height:30px;">
-		<th>orgGoodsSumAmt</th>
-		<th>delvSumAmt</th>
-		<th>freegiftUsePnt</th>
-		<th>cpn1DcSumAmt</th>
-		<th>ordSumAmt</th>
-		<th>tmtb1DcSumAmt</th>
-		<th>tmtb2DcSumAmt</th>
-		<th>tmtbDcSumAmt</th>
-		<th>goodsCpnDcSumAmt</th>
-		<th>cartCpnDcSumAmt</th>
-		<th>delvCpnDcSumAmt</th>
-		<th>cpnDcSumAmt</th>
-		<th>prePntDcAmt</th>
-		<th>pntDcSumAmt</th>
-		<th>gfcdUseSumAmt</th>
-		<th>realOrdSumAmt</th>
-		<th>savePntSumAmt</th>
-	</tr>
-	<tr style="height:30px;">
-		<td class="orgGoodsSumAmt">0</td>
-		<td class="delvSumAmt" th:text="${sumDelvFee}"></td>
-		<td class="freegiftUsePnt">0</td>
-		<td class="cpn1DcSumAmt">0</td>
-		<td class="ordSumAmt">0</td>
-		<td class="tmtb1DcSumAmt">0</td>
-		<td class="tmtb2DcSumAmt">0</td>
-		<td class="tmtbDcSumAmt">0</td>
-		<td class="goodsCpnDcSumAmt">0</td>
-		<td class="cartCpnDcSumAmt">0</td>
-		<td class="delvCpnDcSumAmt">0</td>
-		<td class="cpnDcSumAmt">0</td>
-		<td class="prePntDcSumAmt">0</td>
-		<td class="pntDcSumAmt">0</td>
-		<td class="gfcdUseSumAmt">0</td>
-		<td class="realOrdSumAmt">0</td>
-		<td class="savePntSumAmt">0</td>
-	</tr>
-</table>
+		<th:block th:each="delvFeeCd, index : ${delvFeeCdList}">
+			<tr style="height:30px;">
+				<td class="supplyCompCd" th:text="${delvFeeCd.supplyCompCd}"></td>
+				<td class="delvFeeCd" th:text="${delvFeeCd.delvFeeCd}"></td>
+				<td class="delvFee" th:text="${delvFeeCd.delvFee}"></td>
+				<td class="delvCpnSq">0</td>
+				<td class="delvCpnDcAmt">0</td>
+			</tr>
+		</th:block>
+	</table>
+	
+	<!-- 주문금액합계 -->
+	<table border="1" style="font-size:10px; text-align:center;  margin-top:20px; display:none; width:100%;" name="orderSumAmtInfo" id="orderSumAmtInfo">
+		<tr style="height:30px;">
+			<th>orgGoodsSumAmt</th>
+			<th>delvSumAmt</th>
+			<th>freegiftUsePnt</th>
+			<th>cpn1DcSumAmt</th>
+			<th>ordSumAmt</th>
+			<th>tmtb1DcSumAmt</th>
+			<th>tmtb2DcSumAmt</th>
+			<th>tmtbDcSumAmt</th>
+			<th>goodsCpnDcSumAmt</th>
+			<th>cartCpnDcSumAmt</th>
+			<th>delvCpnDcSumAmt</th>
+			<th>cpnDcSumAmt</th>
+			<th>prePntDcAmt</th>
+			<th>pntDcSumAmt</th>
+			<th>gfcdUseSumAmt</th>
+			<th>realOrdSumAmt</th>
+			<th>savePntSumAmt</th>
+		</tr>
+		<tr style="height:30px;">
+			<td class="orgGoodsSumAmt">0</td>
+			<td class="delvSumAmt" th:text="${sumDelvFee}"></td>
+			<td class="freegiftUsePnt">0</td>
+			<td class="cpn1DcSumAmt">0</td>
+			<td class="ordSumAmt">0</td>
+			<td class="tmtb1DcSumAmt">0</td>
+			<td class="tmtb2DcSumAmt">0</td>
+			<td class="tmtbDcSumAmt">0</td>
+			<td class="goodsCpnDcSumAmt">0</td>
+			<td class="cartCpnDcSumAmt">0</td>
+			<td class="delvCpnDcSumAmt">0</td>
+			<td class="cpnDcSumAmt">0</td>
+			<td class="prePntDcSumAmt">0</td>
+			<td class="pntDcSumAmt">0</td>
+			<td class="gfcdUseSumAmt">0</td>
+			<td class="realOrdSumAmt">0</td>
+			<td class="savePntSumAmt">0</td>
+		</tr>
+	</table>
+</form>
+<!-- //주문금액정보표현 -->
 
+<!-- 주문고객정보 -->
+<form id="orderForm" name="orderForm">
 <div id="container" class="container od">
 	<div class="wrap">
 		<div class="content odPayment">
@@ -532,7 +534,7 @@ $(document).ready( function() {
 	custemerInfoSet();
 	
 	// 999. 개발화면정보설정
-	var devTemp = false;
+	var devTemp = true;
 	var arr = []
 	arr[0] = "orderInfo";
 	arr[1] = "freegiftInfo";
@@ -1993,14 +1995,14 @@ var custCpnSumAmtCal = function() {
 			if ($(this).attr("allYn") == "Y" ) {
 				freegiftValArr.push($(this).val());
 				freegiftUsePointArr.push($(this).attr("usepoint"));
-			}
-			
-			// 라디오버튼 선택 사은품 체크
-			if ($(this).is(":checked")) {
-				// 수령거부가 아닐때 체크
-				if ($(this).val() != "noSel") {
-					freegiftValArr.push($(this).val());
-					freegiftUsePointArr.push($(this).attr("usepoint"));
+			} else {
+				// 라디오버튼 선택 사은품 체크
+				if ($(this).is(":checked")) {
+					// 수령거부가 아닐때 체크
+					if ($(this).val() != "noSel") {
+						freegiftValArr.push($(this).val());
+						freegiftUsePointArr.push($(this).attr("usepoint"));
+					}
 				}
 			}
 		});

src/main/webapp/WEB-INF/views/web/order/OrderListInfoWeb.html

@@ -46,8 +46,7 @@
 					<th:block th:each="goods, i : ${delvAllCart}">
 						<div class="item_gd">
 							<figure>
-								<span class="thumb"><img
-									src="/images/pc/thumb/tmp_odSide1.jpg" alt=""></span>
+								<span class="thumb"><img src="/images/pc/thumb/tmp_odSide1.jpg" alt=""></span>
 								<figcaption>
 									<div class="brand" th:text="${goods.brandEnm} + ' ' + ${goods.brandKnm}"></div>
 									<div class="name" th:text="${goods.goodsNm}"></div>									
@@ -59,10 +58,10 @@
 									</div>
 									<div class="price">
 										<th:block th:if="${goods.tmtbDcAmt} > 0">
-											<span class="selling_price"  th:text="${#numbers.formatInteger(goods.tmtbDcAmt, 1, 'COMMA')}"></span>
+											<span class="selling_price" th:text="${#numbers.formatInteger(goods.tmtbDcAmt, 1, 'COMMA')}"></span>
 										</th:block>
 										<th:block th:if="${goods.tmtbDcAmt} < 1">
-											<span class="selling_price"  th:text="${#numbers.formatInteger((goods.currPrice + goods.optAddPrice) * goods.goodsQty, 1, 'COMMA')}"></span>
+											<span class="selling_price" th:text="${#numbers.formatInteger((goods.currPrice + goods.optAddPrice) * goods.goodsQty, 1, 'COMMA')}"></span>
 										</th:block>
 									</div>
 								</figcaption>
@@ -79,4 +78,4 @@
 			
 		</th:block>
 	</th:block>
-</html>
+</div>

src/main/webapp/WEB-INF/views/web/order/OrderPaymentInfoWeb.html

@@ -13,7 +13,7 @@
  * 1.0  2021.02.01   jsh77b     최초 작성
  *******************************************************************************
  -->
- <!-- 결제수단 선택 -->
+<!-- 결제수단 선택 -->
 <div class="fold_head">
 	<a href="javascript:void(0)">
 		<div>

src/main/webapp/WEB-INF/views/web/planning/PlanningCustGradeBenefitFormWeb.html

@@ -0,0 +1,373 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org"
+	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+	layout:decorator="web/common/layout/DefaultLayoutWeb">
+<!--
+ *******************************************************************************
+ * @source  : PlanningCustGradeBenefitFormWeb.html
+ * @desc    : 회원등급 혜택 Page
+ *============================================================================
+ * Pastelmall
+ * Copyright(C) 2021 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021. 04. 05     jsshin     최초 작성
+ *******************************************************************************
+ -->
+
+<body>
+<th:block layout:fragment="content">
+	<!--  container -->
+	<div id="container" class="container ev">
+		<div class="breadcrumb">
+			<ul>
+				<li class="bread_home"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">홈</a></li>
+				<li class="bread_2depth" ><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_EVENT_MAIN);">이벤트/혜택</a></li>
+				<li class="bread_2depth">회원등급 혜택</li>
+			</ul>
+		</div>
+		<div class="wrap">
+			<div class="content ev_rank">
+				<div class="cont_head">
+					<div>
+						<h3>회원등급 혜택</h3>
+					</div>
+				</div>
+				<div class="cont_body">
+					<div class="my_rank_info" th:if="${isLogin}"> <!-- 회원일 경우 -->
+						<div class="inner">
+							<div class="desc">
+								<p>
+									<span class="my_name" th:text="${customerInfo.custNm}">홍길동</span>님의<br />
+									이번 달 회원등급은<br />
+									<span class="my_rank" th:text="${customerInfo.custGradeNm}">GOLD</span> 입니다.
+								</p>
+								<button type="button" id="btnDownGradeCoupon" class="btn btn_dark cou_btn" >등급 쿠폰 다운로드</button>
+							</div>
+							<!-- 회원 등급 progress바 -->
+							<div class="my_rank_progress">
+								<div th:class="'pro_wrap '+${#strings.toLowerCase(customerInfo.custGradeNm)}"> <!-- welcome, bronze, silver, gold, vip 각각 클래스 넣으면 상태가 달라집니다. -->
+									<div class="rank_txt clear">
+										<ul class="clear">
+											<li>
+												<div class="icon welcome">
+													<span>W</span>
+												</div>
+												<div class="txt">
+													<span>WELCOME</span>
+												</div>
+											</li>
+											<li>
+												<div class="icon bronze">
+													<span>B</span>
+												</div>
+												<div class="txt">
+													<span>BRONZE</span>
+												</div>
+											</li>
+											<li>
+												<div class="icon silver">
+													<span>S</span>
+												</div>
+												<div class="txt">
+													<span>SILVER</span>
+												</div>
+											</li>
+											<li>
+												<div class="icon gold">
+													<span>G</span>
+												</div>
+												<div class="txt">
+													<span>GOLD</span>
+												</div>
+											</li>
+											<li>
+												<div class="icon vip">
+													<span>V</span>
+												</div>
+												<div class="txt">
+													<span>VIP</span>
+												</div>
+											</li>
+										</ul>
+									</div>
+									<div class="progress_bar">
+										<span class="current_bar"></span>
+									</div>
+								</div>
+								<div class="benefit_txt">
+									<p id="etcGrade">
+										<span id="ordSpan">	구매 건수 <strong id="ordCnt" class="c_primary" >0회</strong> </span>
+										<span id="realOrdAmtSpan">, 구매 금액 <strong id="realOrdAmt" class="c_primary">0원 </span>
+										</strong> 더 구매하시면 <strong>
+										<span id="nextGrde" class="c_black"></span>로 등급UP!</strong>
+									</p> <!-- 등급 상승까지 남은 정보 안내 -->
+									<p id="sameVipGrade" style="display: none;">
+										<strong>등급 유지 조건 달성!</strong> 다음달에도
+										<strong class="c_primary"><span>VIP</span> 등급 혜택</strong>을 받으실 수 있습니다.
+									</p>
+									<p id="vipGrade" style="display: none;">
+										<strong class="c_primary"><span>VIP</span> 등급 혜택</strong>을 받으실 수 있습니다.
+									</p>
+								</div>
+							</div>
+							<!-- //회원 등급 progress바 -->
+						</div>
+					</div>
+					<div class="my_rank_info no_member" th:unless="${isLogin}"> <!-- 비회원일 경우 -->
+						<div class="inner">
+							<p>
+								로그인 후 이번 달 나의 회원 등급을 확인하고 쿠폰혜택을 받아보세요.
+							</p>
+							<button type="button" class="btn btn_dark login_btn" onclick="cfnGoToPage(_PAGE_LOGIN);">로그인</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="content inner ev_benefit_tbl">
+				<div class="cont_head">
+					<h3>등급 혜택</h3>
+				</div>
+				<div class="cont_body">
+					<div class="rank_tbl_wrap inner">
+						<div class="tbl_wrap">
+							<table>
+								<caption>등급 혜택 표</caption>
+								<tr>
+									<th>회원등급</th>
+									<td>
+										<div class="icon vip"><span>V</span></div>
+										<span>VIP</span>
+									</td>
+									<td>
+										<div class="icon gold"><span>G</span></div>
+										<span>GOLD</span>
+									</td>
+									<td>
+										<div class="icon silver"><span>S</span></div>
+										<span>SILVER</span>
+									</td>
+									<td>
+										<div class="icon bronze"><span>B</span></div>
+										<span>BRONZE</span>
+									</td>
+									<td>
+										<div class="icon welcome"><span>W</span></div>
+										<span>WELCOME</span>
+									</td>
+								</tr>
+								<tr class="td_30">
+									<th>선정기준</th>
+									<td>
+										<p>최근 3개월<br />30만원 또는6건 이상 구매</p>
+									</td>
+									<td>
+										<p>최근 3개월<br />20만원 또는4건 이상 구매</p>
+									</td>
+									<td>
+										<p>최근 3개월<br />10만원 또는2건 이상 구매</p>
+									</td>
+									<td>
+										<p>최근 3개월<br />1건 이상 구매</p>
+									</td>
+									<td>
+										<p>신규 회원 및<br />최근 3개월 미구매</p>
+									</td>
+								</tr>
+								<tr>
+									<th rowspan="2">혜택</th>
+									<td class="bbn">
+										<div class="cou_img"><img src="/images/pc/ico_coupon_12.png" alt="7% 할인 쿠폰"></div>
+										<p>최대 1만 5천원 할인<br>(3만원 이상 구매 시)</p>
+									</td>
+									<td class="bbn">
+										<div class="cou_img"><img src="/images/pc/ico_coupon_10.png" alt="12% 할인 쿠폰"></div>
+										<p>최대 1만 5천원 할인<br>(3만원 이상 구매 시)</p>
+									</td>
+									<td class="vt" rowspan="2">
+										<div class="cou_img"><img src="/images/pc/ico_coupon_7.png" alt="10% 할인 쿠폰"></div>
+										<p>최대 7천원 할인<br>(3만원 이상 구매 시)</p>
+									</td>
+									<td class="vt" rowspan="2">
+										<div class="cou_img"><img src="/images/pc/ico_coupon_5.png" alt="10% 할인 쿠폰"></div>
+										<p>최대 3천원 할인<br>(2만원 이상 구매 시)</p>
+									</td>
+									<td class="bbn">
+										<div class="cou_img"><img src="/images/pc/ico_coupon_15.png" alt="15% 할인 쿠폰"></div>
+										<p>최대 3만원 할인<br><strong>신규회원 한정 1회 발급</strong></p>
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<div class="cou_img"><img src="/images/pc/ico_coupon_20000.png" alt="20,000원 할인 쿠폰"></div>
+										<p>10만원 이상 구매 시</p>
+									</td>
+									<td>
+										<div class="cou_img"><img src="/images/pc/ico_coupon_15000.png" alt="15,000원 할인 쿠폰"></div>
+										<p>10만원 이상 구매 시</p>
+									</td>
+									<td>
+										<div class="cou_img"><img src="/images/pc/ico_coupon_3000.png" alt="15,000원 할인 쿠폰"></div>
+										<p>2만원 이상 구매 시</p>
+									</td>
+								</tr>
+								<tr>
+									<th>생일쿠폰</th>
+									<td>
+										<div class="cou_img"><img src="/images/pc/ico_coupon_15.png" alt="7% 할인 쿠폰"></div>
+										<p>최대 3만원 할인</p>
+									</td>
+									<td>
+										<div class="cou_img"><img src="/images/pc/ico_coupon_15.png" alt="12% 할인 쿠폰"></div>
+										<p>최대 2만원 할인</p>
+									</td>
+									<td>
+										<div class="cou_img"><img src="/images/pc/ico_coupon_15.png" alt="10% 할인 쿠폰"></div>
+										<p>최대 1만원 할인</p>
+									</td>
+									<td>
+										<div class="cou_img"><img src="/images/pc/ico_coupon_10.png" alt="10% 할인 쿠폰"></div>
+										<p>최대 1만원 할인</p>
+									</td>
+									<td>
+										<div class="cou_img"><img src="/images/pc/ico_coupon_15.png" alt="15% 할인 쿠폰"></div>
+										<p>최대 1만원 할인</p>
+									</td>
+								</tr>
+							</table>
+						</div>
+					</div>
+					<div class="announce_txt inner">
+						<div class="note_txt">
+							<img src="/images/pc/ico_content_find.png" alt="유의사항">
+							<p>유의사항</p>
+						</div>
+						<div class="announce_list">
+							<p class="tit">회원등급 안내사항</p>
+							<ul>
+								<li>회원등급은 직전 3개월의 구매금액 또는 구매건수 기준으로 산정되며, 익월 1일에 확정됩니다.</li>
+								<li>구매금액 1만원 미만의 구매건수는 SILVER등급 이상의 등급산정에서 제외됩니다.</li>
+								<li>주문 취소/반품 건에 대한 결제금액은 등급산정에서 제외됩니다.</li>
+								<li>구매금액은 구매확정건에 대한 순수주문금액(할인쿠폰, 스타일포인트, 배송비, 취소/반품 내역을 제외한 실결제금액)을 의미합니다.</li>
+								<li>신규회원 한정 할인쿠폰을 제외한 회원등급 쿠폰은 매월 1일 다운로드 가능합니다.</li>
+							</ul>
+							<p class="tit">생일쿠폰 안내사항</p>
+							<ul>
+								<li>등급 별 생일 쿠폰은 생일 당월 1일부터 말일까지 다운로드 가능합니다. (생일 당월의 기준은 회원정보 내 생년월일 정보를 기준으로 합니다.)</li>
+								<li>쿠폰이 지급되는 당월 말일까지 사용 가능합니다.</li>
+								<li>쿠폰 사용가능기간 내 미사용 시 소멸됩니다.</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+<script th:inline="javascript">
+/*<![CDATA[*/
+ 	let exptCustGrdeMap = [[${exptCustGrdeMap}]]
+	let custGradeNm = [[${customerInfo.custGradeNm}]];
+
+ 	var fnInit = function () {
+		let expctCustGrade = exptCustGrdeMap.expctCustGrade;	// 예상등급
+
+		//expctCustGrade.custGradeNo 10:VIP, 20: GOLD, 30:SILVER, 40:BRONZE, 50:WELCOME
+
+		// 예정등급이 VIP가 아닌경우
+		if (Number(expctCustGrade.gradeCdNo) > 10) {
+			let nextGradeNo = Number(expctCustGrade.gradeCdNo)-10;				// 다음등급번호
+			let nextCustGradePolicy = fnGetNextGradePolicyInfo(nextGradeNo);	// 다음등급정책정보
+			fnNextGradeCondition(nextCustGradePolicy, expctCustGrade);			// 다음조건 알림
+		} else {
+			fnDisplayVipText(expctCustGrade);
+		}
+
+	};
+
+ 	// 다음 등급정책
+ 	var fnGetNextGradePolicyInfo = function (nextGradeNo) {
+		let custGradePolicy = exptCustGrdeMap.custGradePolicy;	// 등급별정책
+		let nextCustGradePolicy;
+		$(custGradePolicy).each(function(idx, item) {
+			if (Number(item.gradeCdNo) === nextGradeNo ) {
+				nextCustGradePolicy = item;
+			}
+		});
+		return nextCustGradePolicy;
+	}
+
+	// 다음등급 조건 알림
+	var fnNextGradeCondition = function (nextCustGradePolicy, expctCustGrade) {
+		let $etcGrade = $('#etcGrade');
+		let $sameVipGrade = $('#sameVipGrade');
+		let $vipGrade = $('#vipGrade');
+		let $ordCnt = $('#ordCnt');
+		let $ordSpan = $('#ordSpan');
+		let $realOrdAmt = $('#realOrdAmt');
+		let $realOrdAmtSpan = $('#realOrdAmtSpan');
+		let $nextGrde = $('#nextGrde');
+
+		let remnantBuyAmt = 0;
+		if (nextCustGradePolicy.minBuyAmt > expctCustGrade.sumRealOrdAmt) {
+			remnantBuyAmt = nextCustGradePolicy.minBuyAmt - expctCustGrade.sumRealOrdAmt;
+		}
+
+		let remnantBuyCnt = 0;
+		if (nextCustGradePolicy.minBuyCnt > expctCustGrade.ordCnt) {
+			remnantBuyCnt = nextCustGradePolicy.minBuyCnt -  expctCustGrade.ordCnt;
+		}
+
+		$etcGrade.show();
+		$sameVipGrade.hide();
+		$vipGrade.hide();
+
+		if (remnantBuyAmt > 0) {
+			$realOrdAmtSpan.show()
+			$realOrdAmt.text(remnantBuyAmt.addComma()+'원');
+		} else {
+			$realOrdAmtSpan.hide()
+		}
+
+		if (remnantBuyCnt > 0) {
+			$ordSpan.show();
+			$ordCnt.text(remnantBuyCnt.addComma()+'회');
+		} else {
+			$ordSpan.hide();
+		}
+
+		if (remnantBuyAmt > 0 || remnantBuyCnt > 0) {
+			$nextGrde.text(nextCustGradePolicy.gradeCdNm);
+		}
+	}
+
+	// 기존 VIP / 새로운 VIP 구분
+	var fnDisplayVipText = function (expctCustGrade) {
+		let $etcGrade = $('#etcGrade');
+		let $sameVipGrade = $('#sameVipGrade');
+		let $vipGrade = $('#vipGrade');
+		$etcGrade.hide();
+		if (expctCustGrade.gradeCdNm === custGradeNm) {
+			$vipGrade.hide();
+			$sameVipGrade.show();
+		} else {
+			$sameVipGrade.hide();
+			$vipGrade.show();
+		}
+	}
+
+	$(document).ready(function() {
+
+		fnInit();
+
+	});
+
+/*]]>*/
+</script>
+
+</th:block>
+</body>
+</html>
+
+

src/main/webapp/WEB-INF/views/web/planning/PlanningEventAttendFormWeb.html

@@ -0,0 +1,314 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org"
+	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+	layout:decorator="web/common/layout/DefaultLayoutWeb">
+<!--
+ *******************************************************************************
+ * @source  : PlanningEventAttendFormWeb.html
+ * @desc    : 이벤트 출석체크 Page
+ *============================================================================
+ * Pastelmall
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.4.6     sowon     최초 작성
+ *******************************************************************************
+ -->
+<body>
+<th:block layout:fragment="content">
+<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
+<!--  container -->
+	<div id="container" class="container dp">
+		<div class="breadcrumb">
+			<ul>
+				<li class="bread_home"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">홈</a></li>
+				<li class="bread_2depth"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_EVENT_MAIN);">이벤트/혜택</a></li>
+				<li class="bread_2depth" th:text="${planInfo.planNm}"></li>
+			</ul>
+		</div>
+		<div class="wrap">
+			<div class="content wide dp_detail_visual">
+				<div class="cont_head">
+					<div>
+						<h3 th:text="${planInfo.planNm}"></h3>
+						<div class="period">
+							<span th:text="${planInfo.dispStdt}"></span> ~ <span th:text="${planInfo.dispEddt}"></span>
+						</div>
+						<div class="shareSet">
+								<button class="btn_share" data-name="openShare">공유하기</button>
+								<div class="shareWrap">
+									<div id="layerShare" class="setShare open">
+										<span>
+											<button type="button" class="kk"
+												th:attr="onclick=|cfnSendToKakao('${stylelUrl+'/planning/detail/form?planSq='+planInfo.planSq}', '${planInfo.planNm}', '${planView+ '/'+planInfo.mainImg}');|">
+												<span>카카오톡</span>
+											</button>
+											<button type="button" class="fb"
+												th:attr="onclick=|sendSns('facebook', '${stylelUrl+'/planning/detail/form?planSq='+planInfo.planSq}', '${planInfo.planNm}', '', '');|">
+												<span>페이스북</span>
+											</button>
+											<button type="button" class="tw"
+												th:attr="onclick=|sendSns('twitter', '${stylelUrl+'/planning/detail/form?planSq='+planInfo.planSq}', '${planInfo.planNm+ '#style24몰'}', '', '');|">
+												<span>트위터</span>
+											</button>
+											<button type="button" class="url btn_copy">
+												<span>URL</span>
+											</button>
+										</span>
+									</div>
+								</div>
+					</div>
+				</div>
+				<div class="cont_body">
+                    <!-- 프로모션 출석체크 -->
+					<div class="stamp_event">
+						<div class="event_calander">
+							<div class="check_title">
+								<p>출석할수록 늘어나는 혜택!</p>
+								<div class="title"><strong>1월</strong> 출석체크</div>
+							</div>
+							<div class="check_info">
+								<span class="today">오늘</span>
+								<span class="complete">출석완료</span>
+							</div>
+							<div class="tbl_wrap">
+								<div class="my_attend_day">
+									<p>나의 출석 일수는?</p>
+									<span class="day">
+										<span>11</span>일
+									</span>
+								</div>
+								<div class="tbl">
+									<table>
+										<colgroup>
+											<col width="14.28%">
+											<col width="14.28%">
+											<col width="14.28%">
+											<col width="14.28%">
+											<col width="14.28%">
+											<col width="14.28%">
+											<col width="14.28%">
+										</colgroup>
+										<thead>
+											<tr>
+												<th>SUN</th>
+												<th>MON</th>
+												<th>TUE</th>
+												<th>WED</th>
+												<th>THU</th>
+												<th>FRI</th>
+												<th>SAT</th>
+											</tr>
+										</thead>
+										<tbody id="monthTbody">
+										   <!--  <th:block th:each="a, month : ${month}" id="month">
+											<tr>
+												<td>
+													<div class="date" th:text="${a.sun}"></div>
+												</td>	
+												<td>
+													<div class="date" th:text="${a.mon}"></div>
+												</td>	
+												<td>
+													<div class="date" th:text="${a.tue}"></div>
+												</td>	
+												<td>
+													<div class="date" th:text="${a.wed}"></div>
+												</td>	
+												<td>
+													<div class="date" th:text="${a.thu}"></div>
+												</td>	
+												<td>
+													<div class="date" th:text="${a.fri}"></div>
+												</td>	
+												<td>
+													<div class="date" th:text="${a.sat}"></div> unused
+												</td>											
+											</tr> 
+											</th:block> -->
+										</tbody>
+									</table>
+								</div>
+							</div>
+							<button type="button" class="btn btn_primary"><span>출석 체크</span></button>
+						</div>
+                        <div class="event_benefit">
+                            <p class="title">출석 일수에 따라 달라지는 혜택</p>
+                            <div class="benefit_con">
+                                <img src="/images/pc/benefit_txt.jpg" alt="출석 일수에 따라 달라지는 혜택">
+                            </div>
+                        </div>                        
+					</div>                   
+                    <!-- //프로모션 출석체크-->
+				</div>
+			</div>
+			<div class="content dp_announce">
+				<div class="cont_head">
+					<div>
+						<h4>유의사항</h4>
+					</div>
+				</div>
+				<div class="cont_body">
+					<div class="announce_txt">
+						<div class="note_txt">
+							<img src="/images/pc/ico_content_find.png" alt="유의사항">
+							<p>유의사항</p>
+						</div>
+						<div class="announce_list">
+							<ul>
+								<li>본 이벤트는 ID당 1회만 참여 가능합니다.</li>
+								<li>설문조사 참여 시 포인트를 지급해드립니다. (이벤트 종료 후, 일괄 지급)</li>
+								<li>지급된 포인트는 [ 마이페이지 > 나의 지갑 ] 메뉴에서 확인할 수 있습니다.</li>
+							</ul>
+						</div>
+					</div> 
+				</div>
+			</div>
+            <!-- 다른 기획전,이벤트 보기 -->
+            <div class="content other_promotion_slide">
+                <div class="cont_head">
+                    <div>
+                        <h4>다른 이벤트 보기</h4>
+                        <a href="">전체보기</a>
+                    </div>
+                </div>
+                <div class="cont_body">
+                    <div class="swiper-container">
+                        <div class="swiper-wrapper">
+                            <div class="swiper-slide">                   
+                                <a href="">
+                                    <div class="thumb">
+                                        <img src="/images/pc/thumb/ev_list_img06.jpg" alt="스타일24만의 스타일로, tbj 하이 스타일링">
+                                    </div>
+                                    <div class="txt">
+                                        <span class="brand">BUCKAROO</span>
+                                        <p class="tit">스타일24만의 스타일로, TBJ 하이 스타일링</p>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="swiper-button-prev"></div>
+                    <div class="swiper-button-next"></div>
+                </div>
+            </div>
+            <!-- //다른 기획전,이벤트 보기 -->
+		</div>
+	</div>
+</div>
+<script th:inline="javascript">
+let today = new Date();   
+let date = today.getDate();
+let month = [[${month}]];
+
+var appendHtml = function () {
+	$.each(month, function(idx, item)  { 
+		html = '';
+		html += '<tr>';
+		
+		if (item.sun!=null && item.sun!='') {
+			html += '	<td>';
+			html += '		<div class="date">'+item.sun+'</div>';
+			html += '	</td>	';
+		}else{
+			html += '	<td>';
+			html += '		<div class="date"></div>';
+			html += '	</td>	';
+		}
+		if (item.mon!=null && item.mon!='') {
+			html += '	<td>';
+			html += '		<div class="date">'+item.mon+'</div>';
+			html += '	</td>	';
+		}else{
+			html += '	<td>';
+			html += '		<div class="date"></div>';
+			html += '	</td>	';
+		}
+		if (item.tue!=null && item.tue!='') {
+			html += '	<td>';
+			html += '		<div class="date">'+item.tue+'</div>';
+			html += '	</td>	';
+		}else{
+			html += '	<td>';
+			html += '		<div class="date"></div>';
+			html += '	</td>	';
+		}
+		if (item.wed!=null && item.wed!='') {
+			html += '	<td>';
+			html += '		<div class="date">'+item.wed+'</div>';
+			html += '	</td>	';
+		}else{
+			html += '	<td>';
+			html += '		<div class="date"></div>';
+			html += '	</td>	';
+		}
+		if (item.thu!=null && item.thu!='') {
+			html += '	<td>';
+			html += '		<div class="date">'+item.thu+'</div>';
+			html += '	</td>	';
+		}else{
+			html += '	<td>';
+			html += '		<div class="date"></div>';
+			html += '	</td>	';
+		}
+		if (item.fri!=null && item.fri!='') {
+			html += '	<td>';
+			html += '		<div class="date">'+item.fri+'</div>';
+			html += '	</td>	';
+		}else{
+			html += '	<td>';
+			html += '		<div class="date"></div>';
+			html += '	</td>	';
+		}
+		if (item.sat!=null && item.sat!='') {
+			html += '	<td>';
+			html += '		<div class="date">'+item.sat+'</div>';
+			html += '	</td>	';
+		}else{
+			html += '	<td>';
+			html += '		<div class="date"></div>';
+			html += '	</td>	';
+		}
+		
+		html += '</tr>'
+		$("#monthTbody").append(html);
+	})    
+} 
+$(document).ready(function() {
+	 
+	appendHtml();
+	
+	//공유 버튼 토글 
+	$("button[data-name=openShare]").on("click", function(){
+		$(this).toggleClass("on").next(".shareWrap").toggleClass("on");
+		return false;
+	});
+	//영역밖 클릭으로 공유토글 닫기
+	$("body").on('click', function(e) { 
+		if(!$(".shareWrap.on").parent().has(e.target).length) {
+			$("button[data-name=openShare]").removeClass("on");
+			$(".shareWrap").removeClass("on");
+		};
+	});
+	
+	$('.btn_copy').bind('click', function() {
+		copyToClipboard();
+	});
+	
+	/* SLIDE - 다른 기획전,이벤트 보기 */
+	var other_slide_slide = new Swiper ('.other_promotion_slide .swiper-container', {
+		slidesPerView: 5,
+		spaceBetween: 20,
+		navigation: {
+			nextEl: '.other_promotion_slide .swiper-button-next',
+			prevEl: '.other_promotion_slide .swiper-button-prev',
+		},
+	});    
+	
+})
+</script>
+</th:block>
+
+</body>
+</html>

src/main/webapp/WEB-INF/views/web/planning/PlanningEventMainFormWeb.html

@@ -36,7 +36,7 @@
 						<div class="txt">
 							<strong>STYLE24 BENEFIT</strong>
 							<p>STYLE24 회원등급에 따라<br>제공되는 혜택 정보를 확인해 보세요.</p>
-							<a href="javascript:;" class="btn btn_dark">회원등급 혜택 보기</a>
+							<a href="javascript:void(0);" class="btn btn_dark" onclick="cfnGoToPage(_PAGE_CUSTOMER_GRADE_BENEFIT);">회원등급 혜택 보기</a>
 						</div>
 						<div class="mem_rank_list">
 							<ul class="clear">

src/main/webapp/WEB-INF/views/web/popup/DelvAddrAddPopWeb.html

@@ -1,9 +1,9 @@
-<div class="modal-header">
-	<h5 class="modal-title" id="adrsAddLabel">배송지 등록</h5>
-</div>
-<div class="modal-body">
-	<div class="pop_cont">
-		<form class="form_wrap form_full" name="deliveryAddForm" id="deliveryAddForm">
+<form class="form_wrap form_full" name="deliveryAddForm" id="deliveryAddForm">
+	<div class="modal-header">
+		<h5 class="modal-title" id="adrsAddLabel">배송지 등록</h5>
+	</div>
+	<div class="modal-body">
+		<div class="pop_cont">
 			<div class="area_adrsinfo">
 				<h6>배송지 정보</h6>
 				<div class="default_addrs">
@@ -16,7 +16,7 @@
 					<label class="input_label sr-only">받는 분</label>
 					<div class="ui_col_12">
 						<div class="input_wrap"> 
-							<input type="text" class="form_control" name="recipNm" placeholder="받는 분" id="">
+							<input type="text" class="form_control" name="recipNm" placeholder="받는 분">
 						</div>
 					</div>
 				</div>	
@@ -24,7 +24,7 @@
 					<label class="input_label sr-only">휴대폰 번호</label>
 					<div class="ui_col_12">
 						<div class="input_wrap"> 
-							<input type="text" class="form_control" name="recipPhnno" placeholder="휴대폰 번호" id="">
+							<input type="text" class="form_control" name="recipPhnno" placeholder="휴대폰 번호">
 						</div>
 					</div>
 				</div>
@@ -52,8 +52,8 @@
 				<h6>배송요청 사항</h6> 
 					<div class="form_field">
 					<div>
-						<input type="radio" name="rdi-request1" id="rdi-request11" value="문앞" >
-						<label for="rdi-request11"><span>문앞</span></label>
+						<input type="radio" name="rdi-request1" id="rdi-request11" value="문 앞" >
+						<label for="rdi-request11"><span>문 앞</span></label>
 					</div>
 					<div>
 						<input type="radio" name="rdi-request1" id="rdi-request12" value="직접받고 부재시 문 앞" checked>
@@ -72,19 +72,19 @@
 						<label for="rdi-request15"><span>기타사항</span></label>
 						<div class="info_box">
 							<div class="input_wrap">
-								<input type="text" name="delvMemoText" class="form_control" maxlength="30" placeholder="보관장소만 입력 (필수)">
+								<input type="text" name="delvMemoText" class="form_control" maxlength="30" placeholder="보관장소만 입력 (필수)" disabled>
 								<p>보관 장소 외 다른 내용 입력시 통보없이 삭제 될 수 있습니다.</p>
 							</div>
 						</div>
 					</div>
 				</div>
 			</div>
-		</form>
+		</div>
+	</div>
+	<div class="modal-footer">
+		<button type="button" class="btn btn_dark" id="btn_delivery_addr_save"><span>배송지 등록</span></button>
 	</div>
-</div>
-<div class="modal-footer">
-	<button type="button" class="btn btn_dark" id="btn_delivery_addr_save"><span>배송지 등록</span></button>
-</div>
+</form>
 
 <script th:inline="javascript">
 var isLogin				= [[${isLogin}]];				// 로그인여부
@@ -107,21 +107,6 @@ $(document).ready( function() {
 	});
 });
 
-// 우편번호 DAUM을 이용한 우편번호 팝업 레이어
-var fnOpenDaumAddr = function() {
-	let daumZip = new daum.Postcode({
-		oncomplete: function(data) {
-			$('#deliveryAddForm input[name=recipAddr]').val(data.zonecode + '    ' + cfnGetDaumRoadAddr(data));
-			$('#deliveryAddForm input[name=recipZipcode]').val(data.zonecode);
-			$('#deliveryAddForm input[name=recipBaseAddr]').val(cfnGetDaumRoadAddr(data));
-			$('#deliveryAddForm input[name=recipDtlAddr]').focus();
-			cfnCloseDaumAddr();
-		},
-		width: '100%'
-	});
-	cfnOpenDaumAddr(daumZip);
-}
-
 // 배송지등록버튼
 $("#btn_delivery_addr_save").on("click", function(){
 	
@@ -139,7 +124,7 @@ $("#btn_delivery_addr_save").on("click", function(){
 	// 기타사항일때 텍스트 등록
 	var delvMemo = $("#deliveryAddForm input[name=rdi-request1]:checked").parent().find('span').text();
 	if ("기타사항" == delvMemo) {
-		delvMemo = $("input[name=delvMemoText]").val();
+		delvMemo = $("#deliveryAddForm input[name=delvMemoText]").val();
 	}
 	
 	// custDelvAddrSq 부모창으로 전달
@@ -225,7 +210,22 @@ var deliveryAddFormCheck = function() {
 	}
 	
 	return true;
-} 
+}
+
+//우편번호 DAUM을 이용한 우편번호 팝업 레이어
+var fnOpenDaumAddr = function() {
+	let daumZip = new daum.Postcode({
+		oncomplete: function(data) {
+			$('#deliveryAddForm input[name=recipAddr]').val(data.zonecode + '    ' + cfnGetDaumRoadAddr(data));
+			$('#deliveryAddForm input[name=recipZipcode]').val(data.zonecode);
+			$('#deliveryAddForm input[name=recipBaseAddr]').val(cfnGetDaumRoadAddr(data));
+			$('#deliveryAddForm input[name=recipDtlAddr]').focus();
+			cfnCloseDaumAddr();
+		},
+		width: '100%'
+	});
+	cfnOpenDaumAddr(daumZip);
+}
 </script>
 
 

src/main/webapp/WEB-INF/views/web/popup/DelvAddrChangePopWeb.html

@@ -1,61 +1,61 @@
 <!-- 배송지변경 팝업 -->
 <form name="delvAddrChangeForm" id="delvAddrChangeForm">
-<div class="modal-header">
-	<h5 class="modal-title" id="adrsChangeLabel">배송지 선택</h5>
-</div>
-<div class="modal-body">
-	<div class="pop_cont">
-		<ul>
-			<!-- 배송지목록 -->
-			<th:block th:each="deliveryAddr, index : ${deliveryAddrList}">
-				<li>
-					<div class="adrs_box">
-						<dl>
-							<div>
-								<dt><span class="sr-only">배송지명</span></dt>
-								<dd>
-									<th:block th:text="${deliveryAddr.recipNm}"></th:block>
-									<span class="icon_tag">
-										<th:block th:if="${deliveryAddr.defaultYn} == 'Y'">
-											<em class="tag">기본 배송지</em>
-										</th:block>
-										<th:block th:if="${deliveryAddr.shotDelvUseYn} == 'Y'">
-											<em class="tag primary_line">총알배송</em>
-										</th:block>
-									</span>
-								</dd>
-							</div>
-							<div>
-								<dt><span class="sr-only">휴대폰 번호</span></dt>
-								<dd th:text="${deliveryAddr.recipPhnno}"></dd>
-							</div>
-							<div>
-								<dt><span class="sr-only">배송주소</span></dt>
-								<dd th:text="${deliveryAddr.recipBaseAddr} + ' ' + ${deliveryAddr.recipDtlAddr}"></dd>
-							</div>
-							<div>
-								<dt>배송요청 사항&nbsp;:&nbsp;</dt>
-								<dd th:text="${deliveryAddr.delvMemo}"></dd>
-							</div>
-						</dl>
-						<button type="button" class="btn btn_default btn_sm btn_addrModify_pop" th:value="${deliveryAddr.custDelvAddrSq}"><span>수정</span></button>
-						<button type="button" class="btn btn_dark btn_sm btn_sel_delvAddr" th:value="${deliveryAddr.custDelvAddrSq}"><span>선택</span></button>
-						
-						<input type="hidden" name="recipNm" 			th:value="${deliveryAddr.recipNm}"/>
-						<input type="hidden" name="recipPhnno" 			th:value="${deliveryAddr.recipPhnno}"/>
-						<input type="hidden" name="recipZipcode" 		th:value="${deliveryAddr.recipZipcode}"/>
-						<input type="hidden" name="recipBaseAddr" 		th:value="${deliveryAddr.recipBaseAddr}"/>
-						<input type="hidden" name="recipDtlAddr" 		th:value="${deliveryAddr.recipDtlAddr}"/>
-						<input type="hidden" name="delvMemo" 			th:value="${deliveryAddr.delvMemo}"/>
-					</div>
-				</li>
-			</th:block>
-		</ul>
+	<div class="modal-header">
+		<h5 class="modal-title" id="adrsChangeLabel">배송지 선택</h5>
+	</div>
+	<div class="modal-body">
+		<div class="pop_cont">
+			<ul>
+				<!-- 배송지목록 -->
+				<th:block th:each="deliveryAddr, index : ${deliveryAddrList}">
+					<li>
+						<div class="adrs_box">
+							<dl>
+								<div>
+									<dt><span class="sr-only">배송지명</span></dt>
+									<dd>
+										<th:block th:text="${deliveryAddr.recipNm}"></th:block>
+										<span class="icon_tag">
+											<th:block th:if="${deliveryAddr.defaultYn} == 'Y'">
+												<em class="tag">기본 배송지</em>
+											</th:block>
+											<th:block th:if="${deliveryAddr.shotDelvUseYn} == 'Y'">
+												<em class="tag primary_line">총알배송</em>
+											</th:block>
+										</span>
+									</dd>
+								</div>
+								<div>
+									<dt><span class="sr-only">휴대폰 번호</span></dt>
+									<dd th:text="${deliveryAddr.recipPhnno}"></dd>
+								</div>
+								<div>
+									<dt><span class="sr-only">배송주소</span></dt>
+									<dd th:text="${deliveryAddr.recipBaseAddr} + ' ' + ${deliveryAddr.recipDtlAddr}"></dd>
+								</div>
+								<div>
+									<dt>배송요청 사항&nbsp;:&nbsp;</dt>
+									<dd th:text="${deliveryAddr.delvMemo}"></dd>
+								</div>
+							</dl>
+							<button type="button" class="btn btn_default btn_sm btn_addrModify_pop" th:value="${deliveryAddr.custDelvAddrSq}"><span>수정</span></button>
+							<button type="button" class="btn btn_dark btn_sm btn_sel_delvAddr" th:value="${deliveryAddr.custDelvAddrSq}"><span>선택</span></button>
+							
+							<input type="hidden" name="recipNm" 			th:value="${deliveryAddr.recipNm}"/>
+							<input type="hidden" name="recipPhnno" 			th:value="${deliveryAddr.recipPhnno}"/>
+							<input type="hidden" name="recipZipcode" 		th:value="${deliveryAddr.recipZipcode}"/>
+							<input type="hidden" name="recipBaseAddr" 		th:value="${deliveryAddr.recipBaseAddr}"/>
+							<input type="hidden" name="recipDtlAddr" 		th:value="${deliveryAddr.recipDtlAddr}"/>
+							<input type="hidden" name="delvMemo" 			th:value="${deliveryAddr.delvMemo}"/>
+						</div>
+					</li>
+				</th:block>
+			</ul>
+		</div>
+	</div>
+	<div class="modal-footer">
+		<button type="button" class="btn btn_dark" id="btn_adrsAdd_pop"><span>배송지 추가</span></button>
 	</div>
-</div>
-<div class="modal-footer">
-	<button type="button" class="btn btn_dark" id="btn_adrsAdd_pop"><span>배송지 추가</span></button>
-</div>
 </form>
 
 <script th:inline="javascript">

src/main/webapp/WEB-INF/views/web/popup/DelvAddrModifyPopWeb.html

@@ -1,11 +1,11 @@
-<div class="modal-header">
-	<h5 class="modal-title" id="adrsModifyLabel">배송지 수정</h5>
-</div>
-<div class="modal-body">
-	<div class="pop_cont">
-		<form class="form_wrap form_full" name="deliveryModifyForm" id="deliveryModifyForm">
-			<input type="hidden" class="form_control" name="custDelvAddrSq" th:value="${deliveryAddrInfo.custDelvAddrSq}">
-			
+<form class="form_wrap form_full" name="deliveryModifyForm" id="deliveryModifyForm">
+	<input type="hidden" class="form_control" name="custDelvAddrSq" th:value="${deliveryAddrInfo.custDelvAddrSq}">
+	
+	<div class="modal-header">
+		<h5 class="modal-title" id="adrsModifyLabel">배송지 수정</h5>
+	</div>
+	<div class="modal-body">
+		<div class="pop_cont">
 			<div class="area_adrsinfo">
 				<h6>배송지 정보</h6>
 				<div class="default_addrs">
@@ -23,7 +23,7 @@
 					<label class="input_label sr-only">받는 분</label>
 					<div class="ui_col_12">
 						<div class="input_wrap"> 
-							<input type="text" class="form_control" name="recipNm" placeholder="받는 분" id="" th:value="${deliveryAddrInfo.recipNm}">
+							<input type="text" class="form_control" name="recipNm" placeholder="받는 분" th:value="${deliveryAddrInfo.recipNm}">
 						</div>
 					</div>
 				</div>	
@@ -31,7 +31,7 @@
 					<label class="input_label sr-only">휴대폰 번호</label>
 					<div class="ui_col_12">
 						<div class="input_wrap"> 
-							<input type="text" class="form_control" name="recipPhnno" placeholder="휴대폰 번호" id="" th:value="${deliveryAddrInfo.recipPhnno}">
+							<input type="text" class="form_control" name="recipPhnno" placeholder="휴대폰 번호" th:value="${deliveryAddrInfo.recipPhnno}">
 						</div>
 					</div>
 				</div>
@@ -40,8 +40,8 @@
 					<div class="ui_col_12">
 						<div class="input_wrap"> 
 							<input type="hidden" name="recipZipcode" placeholder="우편번호" th:value="${deliveryAddrInfo.recipZipcode}" readonly="readonly">
-							<input type="hidden" class="form_control" name="recipBaseAddr" placeholder="기본주소"th:value="${deliveryAddrInfo.recipBaseAddr}" readonly="readonly">
-							<input type="text" class="form_control" name="recipAddr" placeholder="배송주소" th:value="${deliveryAddrInfo.recipBaseAddr}" readonly="readonly">
+							<input type="hidden" class="form_control" name="recipBaseAddr" placeholder="기본주소" th:value="${deliveryAddrInfo.recipBaseAddr}" readonly="readonly">
+							<input type="text" class="form_control" name="recipAddr" placeholder="배송주소" th:value="${deliveryAddrInfo.recipZipcode} + '    '+ ${deliveryAddrInfo.recipBaseAddr}" readonly="readonly">
 						</div>
 						<button type="button" class="btn btn_dark btn_sm" onclick="fnOpenDaumAddr();">
 							<span>우편번호 찾기</span>
@@ -57,12 +57,12 @@
 					</div>
 				</div>
 			</div>
-			<div class="area_request">       
+			<div class="area_request">
 				<h6>배송요청 사항</h6> 
 				<div class="form_field">
 					<div>
-						<input type="radio" name="rdi-request1" id="rdi-request11" value="문앞">
-						<label for="rdi-request11"><span>문앞</span></label>
+						<input type="radio" name="rdi-request1" id="rdi-request11" value="문 앞">
+						<label for="rdi-request11"><span>문 앞</span></label>
 					</div>
 					<div>
 						<input type="radio" name="rdi-request1" id="rdi-request12" value="직접받고 부재시 문 앞">
@@ -88,19 +88,19 @@
 					</div>
 				</div>
 			</div>
-		</form>
+		</div>
 	</div>
-</div>
-<div class="modal-footer">
-	<button type="button" class="btn btn_dark" id="btn_delivery_addr_save"><span>배송지 등록</span></button>
-</div>
+	<div class="modal-footer">
+		<button type="button" class="btn btn_dark" id="btn_delivery_modi_save"><span>배송지 등록</span></button>
+	</div>
+</form>
 
 <script th:inline="javascript">
 var delvMemo = [[${deliveryAddrInfo.delvMemo}]];
 //컨텐츠 호출
 $(document).ready( function() {
 	
-	var delvMemoArr = ["문앞", "직접받고 부재시 문 앞", "경비실", "택배함"];
+	var delvMemoArr = ["문 앞", "직접받고 부재시 문 앞", "경비실", "택배함"];
 	var tempMemo = true;
 	
 	// 배송요청사항설정
@@ -112,8 +112,8 @@ $(document).ready( function() {
 	
 	if (tempMemo) {
 		$("#deliveryModifyForm input[name=rdi-request1]").eq(4).attr("checked", true);
-		$("input[name=delvMemoText]").attr("disabled", false);
-		$("input[name=delvMemoText]").val(delvMemo);
+		$("#deliveryModifyForm input[name=delvMemoText]").attr("disabled", false);
+		$("#deliveryModifyForm input[name=delvMemoText]").val(delvMemo);
 	}
 	
 	$("#deliveryModifyForm input[name=rdi-request1]").each(function(){
@@ -138,27 +138,11 @@ $(document).ready( function() {
 	});
 });
 
-// 우편번호 DAUM을 이용한 우편번호 팝업 레이어
-var fnOpenDaumAddr = function() {
-	let daumZip = new daum.Postcode({
-		oncomplete: function(data) {
-			$('#deliveryModifyForm input[name=recipAddr]').val(data.zonecode + '    ' + cfnGetDaumRoadAddr(data));
-			$('#deliveryModifyForm input[name=recipZipcode]').val(data.zonecode);
-			$('#deliveryModifyForm input[name=recipBaseAddr]').val(cfnGetDaumRoadAddr(data));
-			$('#deliveryModifyForm input[name=recipDtlAddr]').focus();
-			cfnCloseDaumAddr();
-		},
-		width: '100%'
-	});
-	
-	cfnOpenDaumAddr(daumZip);
-}
-
 // 배송지등록버튼
-$("#btn_delivery_addr_save").on("click", function(){
+$("#btn_delivery_modi_save").on("click", function(){
 	
 	// 유효성체크
-	if (!deliveryAddFormCheck()){
+	if (!deliveryModifyFormCheck()){
 		return false;
 	}
 	
@@ -222,7 +206,7 @@ $("#btn_delivery_addr_save").on("click", function(){
 });
 
 // 유효성체크 함수
-var deliveryAddFormCheck = function() {
+var deliveryModifyFormCheck = function() {
 	// TODO 유효성 체크 추가
 	if (gagajf.isNull($("#deliveryModifyForm input[name=recipNm]").val())) {
 		mcxDialog.alert("이름을 입력해주세요.");
@@ -250,4 +234,20 @@ var deliveryAddFormCheck = function() {
 	
 	return true;
 } 
+
+//우편번호 DAUM을 이용한 우편번호 팝업 레이어
+var fnOpenDaumAddr = function() {
+	let daumZip = new daum.Postcode({
+		oncomplete: function(data) {
+			$('#deliveryModifyForm input[name=recipAddr]').val(data.zonecode + '    ' + cfnGetDaumRoadAddr(data));
+			$('#deliveryModifyForm input[name=recipZipcode]').val(data.zonecode);
+			$('#deliveryModifyForm input[name=recipBaseAddr]').val(cfnGetDaumRoadAddr(data));
+			$('#deliveryModifyForm input[name=recipDtlAddr]').focus();
+			cfnCloseDaumAddr();
+		},
+		width: '100%'
+	});
+	
+	cfnOpenDaumAddr(daumZip);
+}
 </script>

src/main/webapp/WEB-INF/views/web/popup/DelvMemoChangePopWeb.html

@@ -9,7 +9,7 @@
 				<div class="form_field">
 					<div>
 						<input type="radio" name="rdi-request3" id="rdi-request31">
-						<label for="rdi-request31"><span>문앞</span></label>
+						<label for="rdi-request31"><span>문 앞</span></label>
 					</div>
 					<div>
 						<input type="radio" name="rdi-request3" id="rdi-request32">
@@ -47,7 +47,7 @@ var delvMemo				= [[${delvMemo}]];				// 로그인여부
 
 // 초기배송메모설정
 $(document).ready( function() {
-	var delvMemoArr = ["문앞", "직접받고 부재시 문 앞", "경비실", "택배함"];
+	var delvMemoArr = ["문 앞", "직접받고 부재시 문 앞", "경비실", "택배함"];
 	var tempMemo = true;
 	
 	// 배송요청사항설정

src/main/webapp/biz/mypage.js

@@ -291,7 +291,7 @@ var fnChangeDeliveryAddr = function(param) {
 var fnChangeDeliveryMemo = function() {
 	var data = {};
 	data.delvMemo = $('input[name=delvMemo]').val();
-	data.ordNo = ordNo;
+	data.ordNo = oneData.ordNo;
 	
 	$.ajax({
 		type		: "POST",

src/main/webapp/ux/mo/css/common_m.css

@@ -249,7 +249,7 @@ input[type="reset"], input[type="button"], input[type="submit"], button {line-he
 
 /* 체크박스 */
 .form_field input[type="checkbox"]{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; } 
-.form_field input[type="checkbox"] + label{ display:inline-block; position:relative; padding-left:26px; cursor:pointer; font-size: 12px; line-height: 1.4;font-weight: 300;letter-spacing: 0;} 
+.form_field input[type="checkbox"] + label{ display:inline-block; position:relative; padding-left:2.6rem; cursor:pointer; font-size: 1.2rem; line-height: 2.0;font-weight: 300;letter-spacing: 0;} 
 .form_field input[type="checkbox"] + label:before{ 
   content:''; position:absolute; left:0; top:50%; margin-top:-10px; width:20px; height:20px; text-align:center; background:#fff; /*border:1px solid #ccc;*/ border-radius: 100%; box-sizing:border-box; 
   background: url('/images/mo/ico_chk_rdi.png') no-repeat;
@@ -811,12 +811,12 @@ main.container .inner:last-child{padding-bottom: 6.0rem; margin-bottom: 0;}
 .tabbar{-webkit-transform: translate(0, 55px);-ms-transform: translate(0, 55px);-moz-transform: translate(0, 55px); transform: translate(0, 55px);transition-duration: 0.3s; position: fixed;width: 100%;bottom: 0;background-color: #f8f8f8;z-index: 10; padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);}
 .tabbar.fixed{-webkit-transform: translate(0, 0);-ms-transform: translate(0, 0);-moz-transform: translate(0, 0);transform: translate(0, 0);}
 .tabbar .tabbar-inner{display: -webkit-box;display: -moz-box;display: -webkit-flex;display: -ms-flexbox;display: flex; -webkit-box-pack: justify;-moz-box-pack: justify;-ms-flex-pack: justify;-webkit-justify-content: space-between;justify-content: space-between; padding: 10px 20px;}
-.tabbar .tabbar-inner [class*=btn-]{display: block; width: 35px; height: 35px; font-size: 0;position: relative;}
-.tabbar .tabbar-inner [class*=btn-].btn-menu{background: url(/images/mo/ico_tabbar_menu.png) no-repeat center; background-size: 30px 25px;}
-.tabbar .tabbar-inner [class*=btn-].btn-my{background: url(/images/mo/ico_tabbar_my.png) no-repeat center; background-size: 30px 25px;}
-.tabbar .tabbar-inner [class*=btn-].btn-home{background: url(/images/mo/ico_tabbar_home.png) no-repeat center; background-size: 30px 25px;}
-.tabbar .tabbar-inner [class*=btn-].btn-wish{background: url(/images/mo/ico_tabbar_wish.png) no-repeat center; background-size: 30px 25px;}
-.tabbar .tabbar-inner [class*=btn-].btn-history{background: url(/images/mo/ico_tabbar_history.png) no-repeat center; background-size: 30px 25px;}
+.tabbar .tabbar-inner [class*=btn-]{display: block;width: 2.50rem; height: 2.2666rem; font-size: 0;position: relative;background: url(/images/mo/ico_tabbar.png) no-repeat center;background-size: 18.0rem 2.16rem;}
+.tabbar .tabbar-inner [class*=btn-].btn-menu{background-position: 0.1rem;}
+.tabbar .tabbar-inner [class*=btn-].btn-my{background-position: -3.7rem;}
+.tabbar .tabbar-inner [class*=btn-].btn-home{background-position: -7.5rem;}
+.tabbar .tabbar-inner [class*=btn-].btn-wish{background-position: -11.5rem;}
+.tabbar .tabbar-inner [class*=btn-].btn-history{background-position: -15.6rem;}
 
 
 /* Full메뉴 */
@@ -1342,6 +1342,7 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
 
 /* 닫기 아이콘 */
 .dialog-close-btn {
+	display: none;
 	position:absolute;
 	top:0;
 	right:0;

src/main/webapp/ux/mo/css/layout_m.css

@@ -34,14 +34,14 @@
 .cs .faq .quick_list ul li:nth-child(10) {border-bottom: none;}
 .cs .quick_list ul li a {display: flex; display: -ms-flexbox; justify-content: center; width:100%; height: 100%; line-height:2.6rem; font-size:1.6rem; font-weight: 200; align-items: center; color:#222; letter-spacing:-0.025em;}
 .cs .search_wrap .faq_search {height:19rem; background:#f5f5f5; padding:5rem; box-sizing:border-box; text-align:center;}
-.cs .search_wrap .faq_search .search_box {display:inline-block; position:relative; width:600px; padding-right:5rem; border-bottom:0.2rem solid #222; box-sizing: border-box; text-align:left;}
+.cs .search_wrap .faq_search .search_box {display:inline-block; position:relative; width:60.0rem; padding-right:5rem; border-bottom:0.2rem solid #222; box-sizing: border-box; text-align:left;}
 .cs .search_wrap .faq_search .search_box input[type='text'] {display:inline-block; width:100%; height:5rem; padding-left:0; border:none; background:none; color:#222; font-size:3rem; font-weight:200; letter-spacing:-0.025em; line-height:1;}
 .cs .search_wrap .faq_search .search_box input[type='text']::placeholder {color:#888;}
 .cs .search_wrap .faq_search .search_box .btn_search {display:inline-block; position:absolute; right:0; top:1.1rem; width:2.8rem; height:2.8rem; overflow:hidden; background:url('/images/pc/ico_search_faq.png') no-repeat 50% 50%; font-size:0.1rem; text-indent:-9999px; z-index:2}
 .cs .search_wrap .faq_search .t_info {width:60rem; margin:1.5rem auto 0; font-weight:200; text-align:left;}
 .cs .search_wrap p{margin-top:0.8rem; font-size:1.2rem; color:#666666;}
 .cs .fold_nav {width:100%;}
-.cs .fold_nav ul {display: flex; display: -ms-flexbox; flex-wrap: wrap; /*margin-top:-12px*/}
+.cs .fold_nav ul {display: flex; display: -ms-flexbox; flex-wrap: wrap; /*margin-top:-1.2rem*/}
 .cs .fold_nav ul li {margin:0.4rem 0.4rem 0 0;}
 .cs .fold_nav ul li a {display:inline-block;padding:1rem 1.6rem;border: 0.1rem solid #ddd;font-size:1.2rem;font-weight: 300;line-height: 1; letter-spacing:-0.025em; border-radius:2rem;}
 .cs .fold_nav ul li a.on {position: relative; background: #222; color:#fff; border: 0.1rem solid #222;}
@@ -82,7 +82,7 @@
 .cs .cs_contactUs_1{background-color:#f5f5f5}
 .cs .cs_contactUs_1 .inner{margin-bottom:1.2rem; padding-top:2.5rem; padding-bottom:2.5rem; background-color:#fff;}
 .cs .cs_contactUs_1 .inner:last-child{padding-top:0; margin-bottom:0;}
-.cs .cs_contactUs_1 .inner.m_pb45{padding-bottom:45px;}
+.cs .cs_contactUs_1 .inner.m_pb45{padding-bottom:4.5rem;}
 .cs .cs_contactUs_1 .qna_list{transition:0.4s;}
 .cs .cs_contactUs_1 .qna_list > li{display:flex; justify-content:space-between; padding:2.6rem 2.0rem; border-bottom:1px solid #e1e1e1; position:relative; margin:0 -2.0rem;}
 .cs .cs_contactUs_1 .qna_list > li > div.title{width:90%; overflow:hidden;}
@@ -121,7 +121,7 @@
 .cs_contactUs_my {}
 .cs_contactUs_my .header { height: 2rem; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; font-size: 2rem; font-weight: bold; margin: 1.6rem 0;}
 .cs_contactUs_my .header .close{position: relative; height:5.2rem;}
-.cs_contactUs_my .header .close span{position:absolute; left:50%; margin-left:-0.5px; display:inline-block; width:1px; height:18px; background-color:#000; transform:rotate(45deg);}
+.cs_contactUs_my .header .close span{position:absolute; left:50%; margin-left:-0.5px; display:inline-block; width:1px; height:1.8rem; background-color:#000; transform:rotate(45deg);}
 .cs_contactUs_my .header .close span:first-child{transform:rotate(-45deg);}
 .cs_contactUs_my .header .close a{position:absolute; top:50%; right:0; margin-top:-0.8rem; width:1.8rem; height:1.8rem; font-size:0; background-color:#fff;}
 .cs_contactUs_my .inner { padding-bottom: 0;}
@@ -150,7 +150,7 @@
 .cs_contactUs_my .contactus_cnt {color:#888}
 .cs_contactUs_my .select {height:4.2rem; font-size:1.2rem;}
 .cs_contactUs_my .select .select_dress {color:#222; font-weight:200;}
-.cs_contactUs_my .select .select_dress:after {top:16px; right:1.5rem; border-color:#888 transparent transparent transparent;}
+.cs_contactUs_my .select .select_dress:after {top:1.6rem; right:1.5rem; border-color:#888 transparent transparent transparent;}
 .cs_contactUs_my .select .select_dress.active:after {top:1rem; border-color: transparent transparent #888 transparent;}
 .cs_contactUs_my .select .select_options {color:#666}
 .cs_contactUs_my .help_block {margin-top:1rem; text-indent:0;}
@@ -228,7 +228,7 @@
 .mb .form_wrap .form_info {text-align:center;}
 .mb .form_wrap .form_info p {font-size:1.4rem; font-weight:300; letter-spacing:-0.025em; line-height:1.6;}
 .mb .form_wrap .form_info p.t_info {font-size:1.2rem; color:#888; font-weight:300; line-height:1.625;}
-.mb .find_result {padding:0px 0px 40px; font-weight:200;}
+.mb .find_result {padding:0px 0px 4.0rem; font-weight:200;}
 .mb .find_result .help_block {text-align:left}
 .mb .find_result input {font-size:1.2rem;}
 .mb .find_result .form_print_bar {padding:3.4rem 0; margin-top:2.5rem; display: flex; display: -ms-flexbox; justify-content: center; align-items: center; background: #f5f5f5; text-align: left; color:#222; font-size:1.2rem;}
@@ -261,7 +261,7 @@
 .mb .mb_login .captcha .captcha_btn_dual button:first-child {margin-bottom:0.6rem;}
 .mb .mb_login .captcha .captcha_btn_dual button:last-child {background-position:center -3.1rem;}    
 .mb .mb_login .captcha .captcha_area {margin-top:0.6rem;}
-.mb .mb_login .captcha .captcha_area input {padding:1.3rem 0 15px 1.3rem;}
+.mb .mb_login .captcha .captcha_area input {padding:1.3rem 0 1.5rem 1.3rem;}
 .mb .mb_login .captcha .captcha_area label { display: block; width: 100%; margin:-0.8rem 0 0.4rem 0;}
 .mb .mb_login .btn{width:100%; height:4.5rem;}
 
@@ -312,7 +312,7 @@
 
 /* mb_join_2 */
 .mb .mb_join_2 .form_field{display:block;}
-.mb .mb_join_2 .form_wrap .desc_wrap p {font-size:12px; line-height:1.75; font-weight:200; color:#888;}
+.mb .mb_join_2 .form_wrap .desc_wrap p {font-size:1.2rem; line-height:1.75; font-weight:200; color:#888;}
 .mb .mb_join_2 .form_wrap .desc_wrap p a {color:#666; font-weight:300;}
 .mb .mb_join_2 .help_block::after {clear:both; display:block; width:100%;}
 .mb .mb_join_2 .help_block .btn.btn_sm {float:left; margin-right:0.4rem; border-color:#222; font-size:1.2rem;}
@@ -329,7 +329,7 @@
 /* common으로 이사갈것들 */
 .pb0{padding-bottom:0!important;}
 .ico_besttag{height:1.5rem; vertical-align:middle;}
-.ico_besttag::before {content: ""; width: 31px; height: 15px; background: url(/images/mo/ico_besttag.png) no-repeat 50% 50%; background-size: cover;}
+.ico_besttag::before {content: ""; width: 3.1rem; height: 1.4rem; background: url(/images/mo/ico_besttag.png) no-repeat 50% 50%; background-size: cover;}
 
 /* button*/
 .pd_detail .btn_coupon,
@@ -339,7 +339,7 @@
 .pd_detail .btn_brandHome{border-color:#a7a7a7;}
 
 /* 슬라이드아이템*/
-.item_prod {display: inline-block;font-size: 0px;vertical-align: top;color: rgb(31, 31, 31);position: relative;letter-spacing: -0.2px;}
+.item_prod {display: inline-block;font-size: 0px;vertical-align: top;color: rgb(31, 31, 31);position: relative;letter-spacing: -0.025em;}
 .item_prod .item_state {position: relative; padding:0; box-sizing: border-box;}
 .item_prod .itemLike {position: absolute;top:1rem;right:1rem;font-size: 0px;z-index: 2;width: 1.7rem;height: 1.7rem; background: url('/images/mo/ico_like.png');background-size: 3.4rem;background-position:0px 0px;background-repeat: no-repeat;}
 .item_prod .itemLike::before, 
@@ -351,10 +351,10 @@
 /* .item_prod .itemLike.active::before {opacity: 1;} */
 .itemLike.likeit::before {opacity: 1;}
 .item_prod .itemLink {position: relative;text-decoration: none;color: rgb(102, 102, 102);cursor: pointer;display: block;}
-.item_prod .itemPic {position: relative;width: 100%;margin-bottom: 15px;padding-top: 150%;font-size: 0px;overflow: hidden;}
+.item_prod .itemPic {position: relative;width: 100%;margin-bottom: 1.5rem;padding-top: 150%;font-size: 0px;overflow: hidden;}
 .item_prod .itemPic::after {content: "";display: block;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;opacity: 0.03;background-color: rgb(0, 0, 0);}
 .item_prod .itemPic .pd_img {position: absolute;width: 100%;height: auto;top: 50%;left: 0px;transform: translateY(-50%);}
-.item_prod .itemBrand {display: inline-block; margin: 0px 0.5rem 0.3rem; font-size: 1rem;font-weight: 300;color: rgb(137, 137, 137);}
+.item_prod .itemBrand {display: inline-block; margin: 0px 0.5rem 0.3rem; font-size: 1rem;font-weight: 300;color: rgb(137, 137, 137); text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;width:10rem;overflow:hidden;}
 .item_prod .itemComment{margin: 0.8rem 0.5rem 0px;line-height: 1; font-size: 1.1rem;font-weight: 300;color: #fd4802;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
 .item_prod .itemName {margin: 0px 0.5rem 0.8rem; font-size: 1.1rem; font-weight:300; color: rgb(31, 31, 31); max-height: 3rem; position: relative; overflow: hidden; white-space: normal; overflow-wrap: break-word; display: block;}
 .item_prod .itemName {display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
@@ -363,13 +363,13 @@
 .item_prod .itemPrice_original {position: relative; margin-bottom:0.5rem; display:block; line-height:1; font-size: 1rem; font-weight: 300; color: rgb(204, 204, 204); text-decoration:line-through;}
 .item_prod .itemText{margin-top:0.5rem; font-size:1.1rem; color:#888888; font-weight:300;} 
 /* .item_prod .itemPrice_original::after{content: ''; display: inline-block; position: absolute; top: 50%; left: 0; bottom:auto; right:auto; width: 100%; height: 1px; background: rgb(204, 204, 204) ; transform: translateY(-50%);} */
-.item_prod .itemPercent {position: absolute;top: auto;right: 0px;bottom: 0;left: auto;margin-left: 15px;line-height:1;font-size: 1.5rem;font-weight: 300;color: #fd4802;}
-.rank {position: absolute; z-index: 1; font-size: 14px; color: #ffffff; top: 0; left: 0; width: auto; height: auto; min-width: 40px; max-height: 40px; text-align: center; line-height: 0.9; padding: 14px 0px;}
+.item_prod .itemPercent {position: absolute;top: auto;right: 0px;bottom: 0;left: auto;margin-left: 1.5rem;line-height:1;font-size: 1.5rem;font-weight: 300;color: #fd4802;}
+.rank {position: absolute; z-index: 1; font-size: 1.4rem; color: #ffffff; top: 0; left: 0; width: auto; height: auto; min-width: 4.0rem; max-height: 4.0rem; text-align: center; line-height: 0.9; padding: 1.4rem 0px;}
 .rank::after {content: ""; z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background: currentColor; background: #222222; clip-path: polygon(40px 0, 40px 30px, 30px 40px, 0 40px, 0 0); clip-path: polygon(100% 0, 100% 75%, 75% 100%, 0 100%, 0 0); clip-path: polygon(100% 0, 100% calc( 100% - 10px), calc( 100% - 10px) 100%, 0 100%, 0 0);}
 
 /* pd 상품상세 공통 */
 .pd .swiper-container{overflow:visible;}
-.pd .tit{margin-bottom:1.5rem; font-size:1.4rem; font-weight:500; color:#222}
+.pd .tit{margin-bottom:1.5rem; font-size:1.5rem; font-weight:500; color:#222}
 .pd .ptok{padding-top:3rem!important;}
 .pd .ptok2{padding-top:4rem!important; padding-bottom:4rem!important;}
 .pd .area_slider{text-align:left;}
@@ -419,14 +419,14 @@
 /* 2 */
 .pd_detail .desc_status{padding:1.5rem 2rem; margin-bottom:-1.2rem; color: #fd4802; border-bottom:1px solid #dddddd;}
 .pd_detail .timer_box{position: absolute; height:3.6rem; line-height:3.6rem; font-size:1.2rem; color:#fff; text-align:center; background-color: #000; left: 2rem; right: 2rem; top: -5.5rem; z-index: 10;}
-/* .pd_detail .timer_box::after{content:''; position:absolute; right:-12px; bottom:-18px; border:12px solid transparent; border-top:12px solid #fff; transform:rotate(-45deg);} */
+/* .pd_detail .timer_box::after{content:''; position:absolute; right:-1.2rem; bottom:-1.8rem; border:1.2rem solid transparent; border-top:1.2rem solid #fff; transform:rotate(-45deg);} */
 .pd_detail .timer_box::after{content:''; position:absolute; right:0; bottom:0; display:block; width:0px; border:0.5rem solid transparent; border-bottom-color:#fff; border-right-color:#fff;}
 .pd_detail .timer_box p::after {content:''; clear:both; display:block;}
 .pd_detail .timer_box p span {display:inline-block; position:relative; }
-.pd_detail .timer_box p .tt {position:relative; padding-left:28px; color:#fff; font-size:1.3rem;}
-.pd_detail .timer_box p .tt::before {content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:18px; height:18px; background:url('/images/mo/ico_timer2.png') no-repeat 0 50%;}
+.pd_detail .timer_box p .tt {position:relative; padding-left:2.8rem; color:#fff; font-size:1.3rem;}
+.pd_detail .timer_box p .tt::before {content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1.8rem; height:1.8rem; background:url('/images/mo/ico_timer2.png') no-repeat 0 50%;}
 .pd_detail .timer_box p .timer {color:#fff; font-size:1.4rem; font-weight:300;}
-.pd_detail .timer_box p .timer em {display:inline-block; position:relative; padding-left:6px;}
+.pd_detail .timer_box p .timer em {display:inline-block; position:relative; padding-left:0.6rem;}
 .pd_detail .timer_box p .timer em::before {content:':'; position:absolute; left:-1px; top:50%; transform:translateY(-50%);}
 .pd_detail .timer_box p .timer em:first-of-type {padding-left:0.8rem;}
 .pd_detail .timer_box p .timer em:first-of-type::before {display:none;}
@@ -458,7 +458,7 @@
 .pd_detail .option_box .opt_result .result_item .opt_header .bundle{margin-bottom:1.5rem;}
 .pd_detail .option_box .opt_result .result_item .opt_header .bundle:last-child{margin-bottom:0;}
 .pd_detail .option_box .opt_result .result_item .opt_header .bundle .item_name {margin-bottom:0.5rem; color:#222; font-size:1.3rem; font-weight:300;}
-.pd_detail .option_box .opt_result .result_item .opt_header .bundle .item_option {font-size:1.1rem; color:#666;}
+.pd_detail .option_box .opt_result .result_item .opt_header .bundle .item_option {font-size:1.1rem; color:#666; text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;width:30rem;overflow:hidden;}
 .pd_detail .option_box .opt_result .result_item .item_price {position:absolute; right:2rem; bottom:3.2rem; color:#222; font-size:1.5rem; font-weight:500;}
 .pd_detail .option_box .opt_result .result_item .item_price em{font-weight:600;}
 .pd_detail .option_box .opt_result .result_item .btn_delete_item {position:absolute; right:2rem; top:2rem; width:1.3rem; height:1.3rem; font-size:0; overflow:hidden; background:url('/images/mo/btn_delete_item.png') no-repeat 50% 50%;}
@@ -467,34 +467,34 @@
 .pd_detail .option_box .opt_result .result_item .number_count span,
 .pd_detail .option_box .opt_result .result_item .number_count input[type='text']{float:left;}
 .pd_detail .option_box .opt_result .result_item .number_count span {cursor:pointer; position:relative; display:inline-block; width:3.2rem; height:3.2rem; text-align:center;}
-.pd_detail .option_box .opt_result .result_item .number_count span::after {content:''; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);; width:12px; height:12px; background:url('/images/pc/btn_count.png') no-repeat 100% 0; image-rendering:pixelated;}
+.pd_detail .option_box .opt_result .result_item .number_count span::after {content:''; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);; width:1.2rem; height:1.2rem; background:url('/images/pc/btn_count.png') no-repeat 100% 0; image-rendering:pixelated;}
 .pd_detail .option_box .opt_result .result_item .number_count .plus::after {content:''; background-position:100% 0;}
 .pd_detail .option_box .opt_result .result_item .number_count .minus::after {content:''; background-position:0 0;}
-.pd_detail .option_box .opt_result .result_item .number_count input[type='text'] {width:32px; height:32px; padding:0; text-align:center; color:#222; font-size:1.3rem; font-weight:300; border:none; font-family:'LATO','Noto Sans CJK kr','Noto Sans kr',sans-serif;}
+.pd_detail .option_box .opt_result .result_item .number_count input[type='text'] {width:3.2rem; height:3.2rem; padding:0; text-align:center; color:#222; font-size:1.3rem; font-weight:300; border:none; font-family:'LATO','Noto Sans CJK kr','Noto Sans kr',sans-serif;}
 .option_box .opt_size .form_field2 {display:block;}
 .option_box .opt_size .form_field2 .lap{margin:-0.25rem -0.25rem 0; overflow:hidden;}
 .option_box .opt_size .form_field2 .lap > div {margin:0.25rem; float:left; width:auto;}
 .option_box .opt_size .form_field2 label > span{position:relative; display:block; width:6rem; height:3.4rem; padding:0; line-height:3.4rem; text-align:center; background:#fff; box-sizing:border-box; color:#222; font-weight:200; font-size:1.2rem; border:1px solid #ddd; cursor: pointer;}
 .option_box .opt_size .form_field2 label input[type="radio"]{position:absolute; width:0; height:0; visibility:hidden;}
-.option_box .opt_size .form_field2 label input[type="radio"]:checked + span{border:1px solid #fd4802;}
+.option_box .opt_size .form_field2 label input[type="radio"]:checked + span{border:1px solid #000;}
 .option_box .opt_size .form_field2 label input[type="radio"]:disabled + span{text-decoration:line-through; background:#f5f5f5; border-color:#f5f5f5; color:#bbb; opacity:1;}
 .pd_detail .option_box .info_restock{margin-top:1rem;}
 .pd_detail .option_box .info_restock a.btn_popup {position:relative; padding-left:1.9rem; padding-right:1.2rem; color:#666; font-size:1.3rem; font-weight:300; border:none;}
 .pd_detail .option_box .info_restock a.btn_popup::before {content:''; position:absolute; left:0; top:50%; margin-top:-1px; transform:translateY(-50%); width:1.3rem; height:1.3rem; background:url('/images/mo/ico_bell.png') no-repeat 0 0;}
-.pd_detail .option_box .info_restock a.btn_popup::after {content:''; position:absolute; right:0px; top:50%; margin-top:-1px; transform:translateY(-50%); width:5px; height:9px; background:url('/images/mo/ico_more_lg.png') no-repeat 100% 50%; background-size:contain;}
+.pd_detail .option_box .info_restock a.btn_popup::after {content:''; position:absolute; right:0px; top:50%; margin-top:-1px; transform:translateY(-50%); width:0.5rem; height:0.9rem; background:url('/images/mo/ico_more_lg.png') no-repeat 100% 50%; background-size:contain;}
 .pd_detail .option_box .opt_count {padding-bottom:0; margin-top:2.8rem; overflow:hidden;}
 .pd_detail .option_box .opt_count .number_count {display:inline-block; border:1px solid #ddd}
 .pd_detail .option_box .opt_count .number_count::after {content:''; clear:both; display:block;}
 .pd_detail .option_box .opt_count .number_count span,
 .pd_detail .option_box .opt_count .number_count input[type='text']{float:left;}
 .pd_detail .option_box .opt_count .number_count span {cursor:pointer; position:relative; display:inline-block; width:3.2rem; height:3.2rem; text-align:center;}
-.pd_detail .option_box .opt_count .number_count span::after {content:''; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);; width:12px; height:12px; background:url('/images/pc/btn_count.png') no-repeat 100% 0; image-rendering:pixelated;}
+.pd_detail .option_box .opt_count .number_count span::after {content:''; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);; width:1.2rem; height:1.2rem; background:url('/images/pc/btn_count.png') no-repeat 100% 0; image-rendering:pixelated;}
 .pd_detail .option_box .opt_count .number_count .plus::after {content:''; background-position:100% 0;}
 .pd_detail .option_box .opt_count .number_count .minus::after {content:''; background-position:0 0;}
-.pd_detail .option_box .opt_count .number_count input[type='text'] {width:3.2rem; height:3.2rem; padding:0; text-align:center; color:#222; font-size:15px; font-weight:200; border:none; font-family:'LATO','Noto Sans kr',sans-serif;}
+.pd_detail .option_box .opt_count .number_count input[type='text'] {width:3.2rem; height:3.2rem; padding:0; text-align:center; color:#222; font-size:1.5rem; font-weight:200; border:none; font-family:'LATO','Noto Sans kr',sans-serif;}
 .pd_detail .price_box {padding:1rem 2rem; border-top:1px solid #222;}
 .pd_detail .price_box::after {content:''; clear:both; display:block;}
-.pd_detail .price_box .number {float:left; color:#666; font-size:1.2rem; font-weight:200; margin-top:3px}
+.pd_detail .price_box .number {float:left; color:#666; font-size:1.2rem; font-weight:200; margin-top:0.3rem}
 .pd_detail .price_box .price {float:right; color:#222; font-size:1.5rem; font-weight:500;}
 .pd_detail .price_box .price em {font-size:1.5rem;}
 /* 3 */
@@ -521,7 +521,7 @@
 .pd_detail .content.pd_descrp{padding-top:3rem;}
 [class*="pd_descrp"] .btn_group_flex button{border: 1px solid #fd4802; color: #fd4802; background: #fff;}
 [class*="pd_descrp"] .btn_group_flex button span{position:relative; padding-right:2rem;}
-[class*="pd_descrp"] .btn_group_flex button span::after {content:""; position:absolute; right:4px; top:1px; transform:rotate(90deg); width:7px; height:13px; background:url(/images/mo/ico_mb_arrow2.png) no-repeat 0 0; background-size:auto 100%;} 
+[class*="pd_descrp"] .btn_group_flex button span::after {content:""; position:absolute; right:0.4rem; top:0.1rem; transform:rotate(90deg); width:0.7rem; height:1.3rem; background:url(/images/mo/ico_mb_arrow2.png) no-repeat 0 0; background-size:auto 100%;} 
 [class*="pd_descrp"] .btn_group_flex button.active span::after {transform:rotate(-90deg);}
 [class*="pd_descrp"] {width:100%;}
 [class*="pd_descrp"] .cont_body {max-height:58rem; overflow:hidden;}
@@ -542,7 +542,7 @@
 [class*="pd_descrp"] [class^="view_"] .tit_view {display:block; color:#222; font-size:2.1rem; font-weight:400; text-align:center;}
 [class*="pd_descrp"] [class^="view_"] .model_info {display:block; margin-top:1rem; color:#666; font-size:1.2rem; font-weight:200; text-align:center;}
 [class*="pd_descrp"] [class^="view_"] .view {margin-top:2rem}
-[class*="pd_descrp"] [class^="view_"] .view img {display:block; margin:5px auto 0}
+[class*="pd_descrp"] [class^="view_"] .view img {display:block; margin:0.5rem auto 0}
 [class*="pd_descrp"] [class^="view_"] .view img:first-child {margin-top:0}
 [class*="pd_descrp"] .view_label_box .view span {display:block; margin:0 -0.5rem; overflow:hidden;}
 [class*="pd_descrp"] .view_label_box .view span img {float:left; width:50%; margin-top:0; padding:0 0.5rem; box-sizing:border-box;}
@@ -552,7 +552,7 @@
 [class*="pd_descrp"] .brand_box {padding:3rem 2rem; margin:6rem -2rem 0; width:auto!important; border-top:1px solid #ddd; border-bottom:1px solid #ddd; text-align:center; box-sizing:border-box;}
 [class*="pd_descrp"] .brand_box .name {margin-bottom:1rem; color:#222; font-size:1.8rem; font-weight:bold;}
 [class*="pd_descrp"] .brand_box a {display:inline-block; border:1px solid #ddd; font-size:1.3rem; color:#222; font-weight:300; line-height: 4.3rem; width: 100%;}
-[class*="pd_descrp"] .required_box {margin-bottom:40px}
+[class*="pd_descrp"] .required_box {margin-bottom:4.0rem;}
 [class*="pd_descrp"] .required_box .area_detail {text-align:center;} 
 [class*="pd_descrp"] .required_box .area_detail img {max-width:100%;}
 [class*="pd_descrp"] .required_box .area_infotbl {margin-top:4rem;}
@@ -564,7 +564,7 @@
 [class*="pd_descrp"] .required_box .area_kcl p a{position:relative; color:#666; cursor: pointer;}
 [class*="pd_descrp"] .required_box .area_kcl p a:after{display:block; content:''; position:absolute; left:0; bottom:-0.2rem; width:100%; height:1px; background:#666666;}
 [class*="pd_descrp"] .required_box .area_kcl .tit {margin-top:0; margin-bottom:0.5rem; font-size:1.3rem;}
-[class*="pd_descrp"] .required_box .area_kcl a.linktxt3 {margin-left:20px; color:#888; font-weight:200; text-decoration:none !important;}
+[class*="pd_descrp"] .required_box .area_kcl a.linktxt3 {margin-left:2.0rem; color:#888; font-weight:200; text-decoration:none !important;}
 [class*="pd_descrp"] .required_box .area_kcl .ico_kcl {position:relative;}
 [class*="pd_descrp"] .required_box .tbl.type1 {border-top:1px solid #000; border-bottom:1px solid #ddd;} 
 [class*="pd_descrp"] .required_box .tbl.type1 table {width:100%; text-align:left; word-break:keep-all;}
@@ -581,26 +581,26 @@
 [class*="pd_descrp"] .btn_more_box {position:relative; width:100%; background:#fff; text-align:center; z-index:2;}
 [class*="pd_descrp"] .btn_more_box.covered::after {content:''; position:absolute; left:0; right:0; top:-8rem; width:100%; height:8rem; background:linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255,255,255,1) 50%, rgba(255, 255, 255, 0) 100%); z-index:2; }
 [class*="pd_descrp"] .btn_more_box .btnL {border:1px solid #fd4802; color:#fd4802;}
-[class*="pd_descrp"] .btn_more_box .btnL span {position:relative; padding-right:35px;}
-[class*="pd_descrp"] .btn_more_box .btnL .ico {margin-left:20px; margin-right:0;}
+[class*="pd_descrp"] .btn_more_box .btnL span {position:relative; padding-right:3.5rem;}
+[class*="pd_descrp"] .btn_more_box .btnL .ico {margin-left:2.0rem; margin-right:0;}
 /* 6 */
 .riview_box .swiper-pagination {display:inline-block; width:auto; padding:0.2rem 1rem; border-radius:2rem; font-size:1.2rem; color:#fff; background-color:rgba(34,34,34,.5);}
-.riview_box .area_slider{margin-bottom:3rem; text-align:center;}
+.riview_box .area_slider{margin-bottom:1.5rem; text-align:center;}
 .riview_box .ex_review {padding:1.8rem 0;}
 .riview_box .ex_review a:after{content:''; clear:both; display:block;}
 .riview_box .ex_review .tit{float:left; margin-bottom:0;}
 .riview_box .ex_review .tit .number{color:#888; font-weight:300;}
-.riview_box .ex_review .star_score {float:right; padding-right:2.5rem; height:14px; margin-bottom:0.7rem; vertical-align: middle; background:url('/images/mo/ico_more_lg.png') right center no-repeat; image-rendering:pixelated;}
-.riview_box .ex_review .star_score .star {display:inline-block; position:relative; width:95px; height:14px; background:#ddd;}
-.riview_box .ex_review .star_score .star::after {content:''; position:absolute; left:0; top:0; z-index:3; width:100%; height:14px; background:url('/images/mo/star_empty.png') no-repeat 0 0; background-size:100% 100%; image-rendering:pixelated;}
-.riview_box .ex_review .star_score .star .progbar {display:inline-block; height:14px; background:#fd4802}
+.riview_box .ex_review .star_score {float:right; padding-right:2.5rem; height:1.4rem; margin-bottom:0.7rem; vertical-align: middle; background:url('/images/mo/pd_arrow.png') right center no-repeat; image-rendering:pixelated;}
+.riview_box .ex_review .star_score .star {display:inline-block; position:relative; width:9.5rem; height:1.4rem; background:#ddd;}
+.riview_box .ex_review .star_score .star::after {content:''; position:absolute; left:0; top:0; z-index:3; width:100%; height:1.4rem; background:url('/images/mo/star_empty.png') no-repeat 0 0; background-size:100% 100%; image-rendering:pixelated;}
+.riview_box .ex_review .star_score .star .progbar {display:inline-block; height:1.4rem; background:#fd4802}
 .riview_box .ex_review .star_score .score {color:#222; font-size:1.4rem; font-weight:500;}
 .riview_box .best_review {margin-bottom:1.4rem; text-align:left;}
 .riview_box .best_review a {display:block; position:relative; padding:2rem; border:1px solid #eee;}
-.riview_box .best_review a .star_score .star {display:inline-block; position:relative; width:83px; height:14px; background:#ddd;}
-.riview_box .best_review a .star_score .star::after {content:''; position:absolute; left:0; top:0; z-index:3; width:100%; height:1.5rem; background:url('/images/mo/star_empty.png') no-repeat 0 0; background-size:100% 100%; image-rendering:pixelated;}
-.riview_box .best_review a .star_score .star .progbar {display:inline-block; height:14px; background:#fd4802; vertical-align:top;}
-.riview_box .best_review a .star_score .ico {margin-left:10px}
+.riview_box .best_review a .star_score .star {display:inline-block; position:relative; width:8.3rem; height:1.4rem; background:#ddd;}
+.riview_box .best_review a .star_score .star::after {content:''; position:absolute; left:0; top:0; z-index:3; width:100%; height:1.4rem; background:url('/images/mo/star_empty.png') no-repeat 0 0; background-size:100% 100%; image-rendering:pixelated;}
+.riview_box .best_review a .star_score .star .progbar {display:inline-block; height:1.4rem; background:#fd4802; vertical-align:top;}
+.riview_box .best_review a .star_score .ico {margin-left:1.0rem}
 .riview_box .best_review a .star_score .ico::before {vertical-align:inherit;}
 .riview_box .best_review a .lap{display:table; width:100%;}
 .riview_box .best_review a .lap > div{display:table-cell; vertical-align:middle;}
@@ -617,11 +617,11 @@
 .pd_detail .exinfo_box ul {border-top:1px solid #ddd}
 .pd_detail .exinfo_box ul li {padding:1.8rem 2rem; border-bottom:1px solid #ddd}
 .pd_detail .exinfo_box ul li:last-child {border-bottom:0}
-.pd_detail .exinfo_box ul li [class^="ex_"] > a {display:block; background:url('/images/mo/ico_more_lg.png') right center no-repeat; image-rendering:pixelated;}
+.pd_detail .exinfo_box ul li [class^="ex_"] > a {display:block; background:url('/images/mo/pd_arrow.png') right center no-repeat; image-rendering:pixelated;}
 .pd_detail .exinfo_box ul li [class^="ex_"] > a::after {content:''; clear:both; display:block;}
-.pd_detail .exinfo_box ul li [class^="ex_"] > a .tit {color:#222; font-size:14px; font-weight:300;}
-.pd_detail .exinfo_box ul li [class^="ex_"] > a .tit em.number {margin-left:4px; color:#666; font-weight:200;}
-.pd_detail .exinfo_box ul li .ex_shipping {color:#666; font-size:14px; font-weight:200;}
+.pd_detail .exinfo_box ul li [class^="ex_"] > a .tit {color:#222; font-size:1.4rem; font-weight:300;}
+.pd_detail .exinfo_box ul li [class^="ex_"] > a .tit em.number {margin-left:0.4rem; color:#666; font-weight:200;}
+.pd_detail .exinfo_box ul li .ex_shipping {color:#666; font-size:1.4rem; font-weight:200;}
 .pd_detail .exinfo_box ul li .ex_shipping span {display:block;}
 .pd_detail .exinfo_box ul li .ex_shipping .a{margin-bottom:0.9rem;}
 /* 7 */
@@ -631,7 +631,7 @@
 .pd_detail .recommendedArea > div[class*="pd_"] .tit{text-align:center;}
 .pd_detail .pd_clickother {}
 .pd_detail .pd_clickother .area_slider {}
-.pd_detail .pd_clickother .area_slider .itemName {height:32px}
+.pd_detail .pd_clickother .area_slider .itemName {height:3.2rem;}
 .pd_detail .pd_recommend {}
 .pd_detail .pd_recommend .area_slider {}
 .pd_detail .pd_recommend .area_slider .swiper-pagination {display:inline-block; width:auto; margin:0; padding:0.2rem 1rem; border-radius:2rem; font-size:1.2rem; color:#fff; background-color:rgba(34,34,34,.5);position:absolute; left:50%; bottom:2rem; -webkit-transform:translateX(-50%); transform:translateX(-50%);}
@@ -640,21 +640,21 @@
 .pd_detail .pd_recommend .area_slider .page .pic {position:relative;}
 .pd_detail .pd_recommend .area_slider .page .pic span.thumb {display:block; width:100%; height:0; padding-top:100%; background-color:#f5f5f5; background-repeat:no-repeat; background-position:50% 50%; background-size:contain;}
 .pd_detail .pd_recommend .area_slider .page .item_wrap {}
-.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area {position:relative; display:block; height:100%; width:100%; padding:10px; box-sizing:border-box; vertical-align:middle;}
-.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area h5 {margin: 0 0 30px;color:#222;font-size:20px;font-weight:500;}
+.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area {position:relative; display:block; height:100%; width:100%; padding:1.0rem; box-sizing:border-box; vertical-align:middle;}
+.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area h5 {margin: 0 0 3.0rem;color:#222;font-size:2.0rem;font-weight:500;}
 .pd_detail .pd_recommend .area_slider .page .item_wrap .item_area h5 span {color:#666; font-weight:200;}
-.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item {height:calc(100% - 140px); overflow-y:auto;}
-.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item::-webkit-scrollbar {width: 2px;}
+.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item {height:calc(100% - 14.0rem); overflow-y:auto;}
+.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item::-webkit-scrollbar {width: 0.2rem;}
 .pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item::-webkit-scrollbar-thumb {background-color:#888888; border-radius: 0px; background-clip: padding-box;border: 0px solid transparent;}
 .pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item::-webkit-scrollbar-track {background-color: #dddddd;border-radius: 0px;}
-.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item ul li {position:relative; height:150px; margin-top:20px}
+.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item ul li {position:relative; height:15.0rem; margin-top:2.0rem;}
 .pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item ul li:first-child {margin-top:0;}
 .pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item ul li .item_prod {display:block; width:100%;}
 .pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item ul li .item_prod .item_state {display:table; width:100%;}
-.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item ul li .item_prod .item_state a {display:table-cell; position:relative; width:100%; height:150px; padding-left:130px; box-sizing:border-box; vertical-align:middle;}
-.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item ul li .item_prod .item_state .itemPic {position:absolute; left:0; top:0; width:100px; height:0; padding-top:150px; margin-bottom:0}
+.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item ul li .item_prod .item_state a {display:table-cell; position:relative; width:100%; height:15.0rem; padding-left:13.0rem; box-sizing:border-box; vertical-align:middle;}
+.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item ul li .item_prod .item_state .itemPic {position:absolute; left:0; top:0; width:10.0rem; height:0; padding-top:15.0rem; margin-bottom:0}
 .pd_detail .pd_recommend .item_area .itemPrice .itemPercent {position:relative;}
-.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .btn {margin-top:30px; border-color:#fd4802; color:#fd4802;}
+.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .btn {margin-top:3.0rem; border-color:#fd4802; color:#fd4802;}
 .pd_detail .pd_recommend .item_picker{position:absolute; width:8.33%;}
 .pd_detail .pd_recommend .item_picker > div{padding-top:100%; background:#000; border-radius:50%; background:url(/images/pc/ico_picker.png) no-repeat 50% 50%; background-size:cover;}
 .pd_detail .pd_recommend .item_picker > div button{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
@@ -664,7 +664,10 @@
 .pd_detail .pd_recommend .pic_list .btn_group_flex button{border: 1px solid #fd4802; color: #fd4802; background-color:#fff;}
 .pd_detail .pd_samebrand{}
 .pd_detail .pd_relate{}
-.pd_detail .pd_relate .area_slider .itemName {height:32px}
+.pd_detail .pd_relate .area_slider .itemName {height:3.2rem}
+/* 210405 */
+header .htop.trans{position:absolute; background:transparent !important;}
+.pd_qnalist_pop .btn_group_flex > div > .btn{height:5.5rem;}
 
 /* 플롯팅 메뉴 > 구매하기 */
 .product_floormenu{position:fixed; bottom:0; left:0; width:100%; height:5.8rem; line-height:5.8rem; z-index:20;}
@@ -694,8 +697,8 @@
 .pd_pop.Purchase_pop .option_box .opt_color{padding-top:0}
 .pd_pop.Purchase_pop .btn_box{}
 .pd_pop.Purchase_pop .btn_box:after{content:''; display:block; clear:both;}
-.pd_pop.Purchase_pop .btn_box button {display: block; width: 100%; height: 5.8rem; line-height: 5.8rem; font-size: 1.6rem; font-weight: 500; float:left; width:33.33%; color:#fff; border-top:1px solid #ddd; box-sizing:border-box;}
-.pd_pop.Purchase_pop .btn_box button.gift{position:relative; background:#444 url(/images/mo/ico_present_purchase.png) center center no-repeat; background-size:1.8rem; font-size:0;}
+.pd_pop.Purchase_pop .btn_box button {display: block; height: 5.8rem; line-height: 5.8rem; font-size: 1.6rem; font-weight: 500; float:left; width:43%; color:#fff; border-top:1px solid #ddd; box-sizing:border-box;}
+.pd_pop.Purchase_pop .btn_box button.gift{position:relative; background:#444 url(/images/mo/ico_present_purchase.png) center center no-repeat; background-size:1.8rem; font-size:0; width:14%;}
 .pd_pop.Purchase_pop .btn_box button.gift > span{position:relative; display:inline-block; width:1.8rem; height:1.9rem;}
 .pd_pop.Purchase_pop .btn_box button.gift > span > span{position:absolute; left:0; top:0; display:inline-block; padding:0.3rem 1rem; font-size:1.2rem; color:#fff; background-color:#fd4801; -webkit-transform:translate(0 ,-125%); transform:translateX(0 ,-125%);}
 .pd_pop.Purchase_pop .btn_box button.gift > span > span{
@@ -737,10 +740,10 @@
 .pd_pop.Purchase_pop .pop_option_select .setOption .form_wrap:first-child{margin-top:0;}
 
 /* pd_popup 공통 */
-.modal.pd_pop .opt_select .form_field {margin-top:5px;}
-.modal.pd_pop .info_txt ul li {position:relative; font-size:1.1rem; color:#888; padding-left:0.8rem; margin-bottom:3px;}
+.modal.pd_pop .opt_select .form_field {margin-top:0.5rem;}
+.modal.pd_pop .info_txt ul li {position:relative; font-size:1.1rem; color:#888; padding-left:0.8rem; margin-bottom:0.3rem;}
 .modal.pd_pop .info_txt ul li:last-child {margin-bottom:0;}
-.modal.pd_pop .info_txt ul li:after {content:''; position: absolute; display:inline-block; top:6px; left:0; background:#858585; width:2px; height:2px;}
+.modal.pd_pop .info_txt ul li:after {content:''; position: absolute; display:inline-block; top:0.6rem; left:0; background:#858585; width:0.2rem; height:0.2rem;}
 
 /* 테이블 type1 수평 행,열별 구분선 없음*/
 /* .tbl.type1 {border-top:1px solid #000; border-bottom:1px solid #ddd;} 
@@ -769,18 +772,18 @@
 .modal.pd_pop.salecoupon_pop .coupon_list li:first-child {margin-top:0}
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon {position:relative; border:1px solid #ddd; box-sizing:border-box; background:#fff;}
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon > div {position:relative; padding:3rem 0;}
-.modal.pd_pop.salecoupon_pop .coupon_list li .coupon > div::after {content:''; position:absolute; top:50%; right:-1px; transform:translateY(-50%); width:15px; height:30px; background:#fff; z-index:2; border:1px solid #ddd; border-right:none; border-top-left-radius:15px; border-bottom-left-radius:15px; overflow:hidden;}
-.modal.pd_pop.salecoupon_pop .coupon_list li .coupon p {padding:0 20px;}
+.modal.pd_pop.salecoupon_pop .coupon_list li .coupon > div::after {content:''; position:absolute; top:50%; right:-1px; transform:translateY(-50%); width:1.5rem; height:3.0rem; background:#fff; z-index:2; border:1px solid #ddd; border-right:none; border-top-left-radius:1.5rem; border-bottom-left-radius:1.5rem; overflow:hidden;}
+.modal.pd_pop.salecoupon_pop .coupon_list li .coupon p {padding:0 2.0rem;}
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon .cp_name {color:#222; font-size:1.4rem; font-weight:300;}
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon .cp_cont {margin-top:0.7rem;}
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon .cp_cont span {color:#fd4802; font-size:1.8rem; font-weight:500;}
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon .cp_cont span em {font-size:1.8rem; font-weight:600;}
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon .cp_condition {margin-top:1rem; color:#888; font-size:1.2rem; font-weight:300; line-height:1.3;}
-.modal.pd_pop.salecoupon_pop .coupon_list li .coupon .cp_condition span {display:block; margin-top:5px}
+.modal.pd_pop.salecoupon_pop .coupon_list li .coupon .cp_condition span {display:block; margin-top:0.5rem;}
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon .btn_group_flex{margin-top:0; padding:0;}
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon .btn_group_flex::after{display:none;}
-.modal.pd_pop.salecoupon_pop button span:first-child{position:relative; display:inline-block; padding-right:24px;}
-.modal.pd_pop.salecoupon_pop button span:first-child::after {content:''; position:absolute; right:0; top:50%; transform:translateY(-50%); width:14px; height:15px; margin-left:10px; background:url('/images/mo/ico_cp_down.png') no-repeat 0 0;}
+.modal.pd_pop.salecoupon_pop button span:first-child{position:relative; display:inline-block; padding-right:2.4rem;}
+.modal.pd_pop.salecoupon_pop button span:first-child::after {content:''; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1.4rem; height:1.5rem; margin-left:1.0rem; background:url('/images/mo/ico_cp_down.png') no-repeat 0 0;}
 .modal.pd_pop.salecoupon_pop button span:nth-child(1){display:inline-block;}
 .modal.pd_pop.salecoupon_pop button span:nth-child(2){display:none;}
 .modal.pd_pop.salecoupon_pop button:disabled span:nth-child(1){display:none;}
@@ -792,14 +795,14 @@
 .modal.pd_pop.epcoupon_pop .modal-body{padding:0rem 2rem;}
 .modal.pd_pop.epcoupon_pop .ep_coupon {position:relative; max-width:60rem; margin:auto; border:1px solid #222;  background:#fff; padding:4rem 0; text-align:center; line-height:1;}
 .modal.pd_pop.epcoupon_pop .ep_coupon > div {position:relative;}
-.modal.pd_pop.epcoupon_pop .ep_coupon > div::after {content:''; position:absolute; top:50%; right:-1px; transform:translateY(-50%); width:15px; height:30px; background:#fff; z-index:2; border:1px solid #222; border-right:none; border-top-left-radius:15px; border-bottom-left-radius:15px; overflow:hidden;}
-.modal.pd_pop.epcoupon_pop .ep_coupon > div .cp_title {color:#222; font-size:1.2rem; font-weight:600; letter-spacing:4px;}
+.modal.pd_pop.epcoupon_pop .ep_coupon > div::after {content:''; position:absolute; top:50%; right:-1px; transform:translateY(-50%); width:1.5rem; height:3.0rem; background:#fff; z-index:2; border:1px solid #222; border-right:none; border-top-left-radius:1.5rem; border-bottom-left-radius:1.5rem; overflow:hidden;}
+.modal.pd_pop.epcoupon_pop .ep_coupon > div .cp_title {color:#222; font-size:1.2rem; font-weight:600; letter-spacing:0.4rem;}
 .modal.pd_pop.epcoupon_pop .ep_coupon > div .cp_cont {margin-top:1rem;}
 .modal.pd_pop.epcoupon_pop .ep_coupon > div .cp_cont span {display:block; color:#222;}
 .modal.pd_pop.epcoupon_pop .ep_coupon > div .cp_cont span em.number {font-size:3rem; font-weight:600;}
 .modal.pd_pop.epcoupon_pop .ep_coupon > div .cp_cont span em.unit {font-size:2.4rem; font-weight:500;}
 .modal.pd_pop.epcoupon_pop .ep_coupon > div .cp_cont span.unit_won {}
-.modal.pd_pop.epcoupon_pop .ep_coupon > div .cp_cont span.unit_percent {font-size:16px; font-weight:500;}
+.modal.pd_pop.epcoupon_pop .ep_coupon > div .cp_cont span.unit_percent {font-size:1.6rem; font-weight:500;}
 .modal.pd_pop.epcoupon_pop .info_txt {margin-top:1.5rem; font-size:1.2rem;}
 .modal.pd_pop.epcoupon_pop .info_txt ul li{position:relative; padding-left:1rem;}
 .modal.pd_pop.epcoupon_pop .info_txt ul li:before{content:'·'; display:inline-block; position:absolute; left:0; top:0; font-weight:bold;}
@@ -838,7 +841,7 @@
 .modal.pd_pop.bnf_card_pop table .info_card p:first-child {margin-top:0}
 .modal.pd_pop.bnf_card_pop table tr td {color:#666;}
 .modal.pd_pop.bnf_card_pop table a.link {display:inline-block; position:relative; margin-top:1rem; padding-right:1.2rem; color:#888;}
-.modal.pd_pop.bnf_card_pop table a.link:after {content:''; display:block; position:absolute; top:6px; right:0; width:5px; height:5px; border:1px solid #888; border-width:1px 1px 0 0; transform:rotate(45deg); -webkit-transform:rotate(45deg);}
+.modal.pd_pop.bnf_card_pop table a.link:after {content:''; display:block; position:absolute; top:0.6rem; right:0; width:0.5rem; height:0.5rem; border:1px solid #888; border-width:1px 1px 0 0; transform:rotate(45deg); -webkit-transform:rotate(45deg);}
 .modal.pd_pop.bnf_card_pop .info_txt {margin-top:2rem;}
 
 /* pd_popup > 사이즈정보 */
@@ -850,7 +853,7 @@
 .modal.pd_pop.info_size_pop .tab_nav ul li {float:left; width:33.33%; text-align:center; background:#fff; box-sizing:border-box;}
 .modal.pd_pop.info_size_pop .tab_nav ul li.active {background:#fff;}
 .modal.pd_pop.info_size_pop .tab_nav ul li a {position:relative; display:block; color:#888; font-size:1.4rem; font-weight:300; padding:1.2rem 0;}
-.modal.pd_pop.info_size_pop .tab_nav ul li a:after{display:block; content:''; position:absolute; left:0; bottom:0; width:0; height:3px; background-color:#fd4802;}
+.modal.pd_pop.info_size_pop .tab_nav ul li a:after{display:block; content:''; position:absolute; left:0; bottom:0; width:0; height:0.3rem; background-color:#fd4802;}
 .modal.pd_pop.info_size_pop .tab_nav ul li.active a {color:#fd4802; font-weight:500;}
 .modal.pd_pop.info_size_pop .tab_nav ul li.active a:after {width:100%;}
 .modal.pd_pop.info_size_pop .tab_cont_wrap {display:block; margin-top:3rem}
@@ -860,7 +863,7 @@
 .modal.pd_pop.info_size_pop .size_head .tit_sub {display:block; margin-bottom:1rem; font-size:1.3rem; font-weight:300;}
 .modal.pd_pop.info_size_pop .size_head .tit_header {display:block; color:#222; font-size:1.4rem; font-weight:500;}
 .modal.pd_pop.info_size_pop .size_cont {}
-.modal.pd_pop.info_size_pop .size_cont .size_tbl_box {margin-top:40px; position:relative;}
+.modal.pd_pop.info_size_pop .size_cont .size_tbl_box {margin-top:4.0rem; position:relative;}
 .modal.pd_pop.info_size_pop .size_cont .size_tbl_box:first-of-type {margin-top:0;}
 .modal.pd_pop.info_size_pop .size_cont .size_tbl_box h6 {margin-bottom:1.6rem; font-size:1.4rem; color:#222; font-weight:500;}
 .modal.pd_pop.info_size_pop .size_cont .size_tbl_box .size_unit {position:absolute; right:0; color:#888; font-size:1.1rem; -webkit-transform: translateY(-2.5rem); transform: translateY(-2.5rem);}
@@ -880,7 +883,7 @@
 .modal.pd_pop.info_size_pop .sub_tab_nav ul li a {display:inline-block; color:#666; font-size:1.3rem; font-weight:300; color:inherit;}
 .modal.pd_pop.info_size_pop .sub_tab_nav ul li.active{border-color:#fd4802; color:#fd4802; font-weight:500;}
 .modal.pd_pop.info_size_pop .category_open{position:relative; padding: 1.1rem 1.5rem; font-size:1.3rem; color:#222; font-weight: 300; text-align:left; background-color: #ffffff; border: 1px solid #dddddd; box-sizing: border-box;}
-.modal.pd_pop.info_size_pop .category_open:after {content: ""; width: 0; height: 0; box-sizing: border-box; position: absolute; top: 1.8rem; right: 1.5rem; border: 6px solid transparent; border-color: #888888 transparent transparent transparent;}
+.modal.pd_pop.info_size_pop .category_open:after {content: ""; width: 0; height: 0; box-sizing: border-box; position: absolute; top: 1.8rem; right: 1.5rem; border: 0.6rem solid transparent; border-color: #888888 transparent transparent transparent;}
 .modal.pd_pop.info_size_pop .category_box{display:none; position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,.5); z-index:500;}
 .modal.pd_pop.info_size_pop .category_box .lap{position:absolute; bottom:0; left:0; padding:3rem 0; width:100%; background:#fff;}
 .modal.pd_pop.info_size_pop .category_box .category_list{min-height:25rem; max-height:40rem; overflow-y:auto;}
@@ -909,8 +912,8 @@
 .modal.pd_pop.push_restock_pop .item_blk {padding-bottom:2rem; border-bottom:1px solid #dddddd;}
 .modal.pd_pop.push_restock_pop .item_blk .item_prod {width:100%; display:block; line-height: 1.4;}
 .modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state {padding:0;}
-.modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state .itemLink {display:table-cell; width:100%; height:105px; padding-left:90px; vertical-align:middle;}
-.modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state .itemLink .itemPic {position:absolute; left:0; top:0; width:70px; height:105px; padding:0; margin-bottom:0; z-index:2;}
+.modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state .itemLink {display:table-cell; width:100%; height:10.5rem; padding-left:9.0rem; vertical-align:middle;}
+.modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state .itemLink .itemPic {position:absolute; left:0; top:0; width:7.0rem; height:10.5rem; padding:0; margin-bottom:0; z-index:2;}
 .modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state .itemLink .itemBrand {display:block; margin:0;}
 .modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state .itemLink .itemName {display:block; margin-left:0;}
 .modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state .itemLink .itemPrice {margin:0;}
@@ -918,16 +921,16 @@
 .modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state .itemLink .itemPrice .lap .itemPercent {position:relative;}
 .modal.pd_pop.push_restock_pop .select_blk {margin-top:3rem;}
 .modal.pd_pop.push_restock_pop .select_blk h6 {margin-bottom:1rem; font-size:1.4rem; font-weight:500;}
-.modal.pd_pop.push_restock_pop .select_blk .opt_size .form_field {display:block; margin-top:-8px;}
-.modal.pd_pop.push_restock_pop .select_blk .opt_size .form_field > div {margin-left:8px; margin-top:8px;}
+.modal.pd_pop.push_restock_pop .select_blk .opt_size .form_field {display:block; margin-top:-0.8rem;}
+.modal.pd_pop.push_restock_pop .select_blk .opt_size .form_field > div {margin-left:0.8rem; margin-top:0.8rem;}
 .modal.pd_pop.push_restock_pop .select_blk .opt_size .form_field > div:nth-child(7n-6) {margin-left:0px;}
-.modal.pd_pop.push_restock_pop .select_blk .opt_size .form_field input[type="radio"] + label {display:block; width:66px; height:42px; padding:0; line-height:42px; text-align:center; background:#fff; box-sizing:border-box; border:1px solid #ddd; color:#222; font-weight:200; font-size:14px;}
+.modal.pd_pop.push_restock_pop .select_blk .opt_size .form_field input[type="radio"] + label {display:block; width:6.6rem; height:4.2rem; padding:0; line-height:4.2rem; text-align:center; background:#fff; box-sizing:border-box; border:1px solid #ddd; color:#222; font-weight:200; font-size:1.4rem;}
 .modal.pd_pop.push_restock_pop .select_blk .opt_size .form_field input[type="radio"] + label::before,
 .modal.pd_pop.push_restock_pop .select_blk .opt_size .form_field input[type="radio"] + label::after {display:none;}
 .modal.pd_pop.push_restock_pop .select_blk .opt_size .form_field input[type="radio"]:checked + label {border:1px solid #222;}
 .modal.pd_pop.push_restock_pop .select_blk .opt_size .form_field input[type="radio"]:disabled + label {text-decoration:line-through; background:#f5f5f5; border-color:#f5f5f5; color:#bbb; opacity:1;}
 .modal.pd_pop.push_restock_pop .select_blk .opt_size .form_field > div {float:left; width:auto;}
-.modal.pd_pop.push_restock_pop .select_blk .opt_select .select_blk {display:block; max-height:300px; overflow-y:scroll;}
+.modal.pd_pop.push_restock_pop .select_blk .opt_select .select_blk {display:block; max-height:30.0rem; overflow-y:scroll;}
 .modal.pd_pop.push_restock_pop .modal-footer {position:fixed; width:100%; bottom:0; margin-top:0;}
 
 /* pd_pop > 상품문의 페이지 */
@@ -942,8 +945,8 @@
 .pd_qnalist .qna_list .form_field input[type="checkbox"] + label:after {top:50%; transform:translateY(-50%); margin-top:0;}
 .pd_qnalist .qna_list .foldGroup .fold_head a{padding: 1.4rem 1.33rem;}
 .pd_qnalist .qna_list .foldGroup .fold_head .fold_tit .ico {display:inline-block; width:auto; height:auto; vertical-align:middle;}
-.pd_qnalist .qna_list .foldGroup .fold_head .fold_tit .ico_myqna::after {content:'내문의'; display:inline-block; margin-right:1rem; color:#fd4802; font-size:11px; text-align:center; box-sizing:border-box; line-height:20px;}
-.pd_qnalist .qna_list .foldGroup .fold_head .fold_tit .ico_secret::after {content:''; display:inline-block; margin-right:1rem; width:12px; height:12px; background:url('/images/mo/ico_secret.png') no-repeat 50% 50%; background-size:contain;}
+.pd_qnalist .qna_list .foldGroup .fold_head .fold_tit .ico_myqna::after {content:'내문의'; display:inline-block; margin-right:1rem; color:#fd4802; font-size:1.1rem; text-align:center; box-sizing:border-box; line-height:20px;}
+.pd_qnalist .qna_list .foldGroup .fold_head .fold_tit .ico_secret::after {content:''; display:inline-block; margin-right:1rem; width:1.2rem; height:1.2rem; background:url('/images/mo/ico_secret.png') no-repeat 50% 50%; background-size:contain;}
 .pd_qnalist .qna_list .foldGroup .fold_head .fold_tit span{vertical-align:middle;}
 .pd_qnalist .qna_list .foldGroup .my_qna .fold_head {background-color:#fff6f2;}
 .pd_qnalist .qna_list .foldGroup .fold_head .fold_state{font-size:1.1rem;}
@@ -953,9 +956,9 @@
 .pd_qnalist .qna_list .nodata .txt_box {color:#666; font-size:1.3rem; font-weight:300; color:#888;}
 .pd_qnalist .info_txt{padding:0 1.33rem; margin-top:3rem;}
 .pd_qnalist .info_txt::after {content:''; clear:both; display:block;}
-.pd_qnalist .info_txt ul li {position:relative; font-size:11px; color:#888; padding-left:0.8rem; margin-bottom:0.5rem;}
+.pd_qnalist .info_txt ul li {position:relative; font-size:1.1rem; color:#888; padding-left:0.8rem; margin-bottom:0.5rem;}
 .pd_qnalist .info_txt ul li:last-child {margin-bottom:0;}
-.pd_qnalist .info_txt ul li:after {content:''; position: absolute; top:5px; left:0; background:#858585; width:2px; height:2px;}
+.pd_qnalist .info_txt ul li:after {content:''; position: absolute; top:0.5rem; left:0; background:#858585; width:0.2rem; height:0.2rem;}
 .pd_qnalist .info_txt .btn_group_flex{margin-top:2rem;}
 .pd_qnalist .info_txt .btn_group_flex button{font-size:1.3rem; color:#222; border:1px solid #a7a7a7;}
 .pd_qnalist > .btn_group_flex{margin-top:0;}
@@ -1048,7 +1051,7 @@
 .pd_review .area_rv_average .average .part_average .pa_body{display:none; margin-top:1.3rem;}
 .pd_review .area_rv_average .average .btn_group_flex{margin-top:2.4rem;}
 .pd_review .area_rv_average .average .btn_group_flex button{border:1px solid #a7a7a7; color:#222;}
-.pd_review .area_rv_average .average .btn_group_flex button span:after{content:''; display:inline-block; margin-left:0.8rem; width:10px; height:7px; background: url(/images/mo/ico_btn_more.png) center center no-repeat; background-size:contain; vertical-align:middle;}
+.pd_review .area_rv_average .average .btn_group_flex button span:after{content:''; display:inline-block; margin-left:0.8rem; width:1.0rem; height:7px; background: url(/images/mo/ico_btn_more.png) center center no-repeat; background-size:contain; vertical-align:middle;}
 .pd_review .area_rv_average .average .btn_group_flex button span:before{display:"inline-block"; content:'자세히보기'; vertical-align:middle;}
 .pd_review .area_rv_average .average .btn_group_flex button.active span:before{display:"inline-block"; content:'접기'; }
 .pd_review .area_rv_average .average .btn_group_flex button.active span:after{transform:rotate(180deg);}
@@ -1063,7 +1066,7 @@
 .pd_review .area_rv_average .average .part_average dl dd .ratio .progbar {display:inline-block; position:relative; height:8px; background:#ddd; vertical-align:top; margin-left:0}
 .pd_review .area_rv_average .average .part_average dl dd .ratio .progbar::after {content:''; position:absolute; right:-8px; top:0; width:0; height:0; border:4px solid #ddd; border-bottom-color:transparent;border-right-color:transparent;}
 .pd_review .area_rv_average .average .part_average dl dd .percent {position:absolute; right:0; font-size:1.4rem;}
-.pd_review .area_rv_average .average .part_average dl dd .line {width:100%; height:0px; margin-top:10px; border-top:2px dashed #ddd;}
+.pd_review .area_rv_average .average .part_average dl dd .line {width:100%; height:0px; margin-top:1.0rem; border-top:2px dashed #ddd;}
 .pd_review .area_rv_average .average .part_average dl.on dt,
 .pd_review .area_rv_average .average .part_average dl.on dd {color:#222; font-weight:300;}
 .pd_review .area_rv_average .average .part_average dl.on dd .ratio .progbar {background:#222;}
@@ -1085,7 +1088,7 @@
 .pd_review .area_rv_photo .photo_list ul li {float:left; position:relative; padding:0.4rem; width:25%; box-sizing:border-box;}
 .pd_review .area_rv_photo .photo_list > div{position:absolute; right:0; bottom:0; width:25%; padding:0.4rem; box-sizing:border-box }
 .pd_review .area_rv_photo .photo_list > div > div{position:relative; width:100%; padding-bottom:100%;}
-.pd_review .area_rv_photo .photo_list button {position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.6); color:#fff; font-size:14px; z-index:1; text-align:center; box-sizing:border-box; z-index:2;}
+.pd_review .area_rv_photo .photo_list button {position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.6); color:#fff; font-size:1.4rem; z-index:1; text-align:center; box-sizing:border-box; z-index:2;}
 .pd_review .area_rv_photo .photo_list button::before {content:''; display:block; margin:0 auto; width:2rem; height:2rem; background:url('/images/mo/ico_plus_white.png') no-repeat 50% 50%; z-index:1;}
 .pd_review .area_rv_photo .photo_list button span{margin-top:0.5vw; display:block; font-size:1rem;}
 .pd_review .area_rv_all {}
@@ -1095,7 +1098,7 @@
 .pd_review .area_rv_all .review_list > ul > li .review {}
 .pd_review .area_rv_all .review_list .review .info_box {}
 .pd_review .area_rv_all .review_list .review .info_box .star_score {float:left}
-.pd_review .area_rv_all .review_list .review .info_box .star_score .star {display:inline-block; position:relative; width:83px; height:13px; background:#ddd;}
+.pd_review .area_rv_all .review_list .review .info_box .star_score .star {display:inline-block; position:relative; width:83px; height:1.3rem; background:#ddd;}
 .pd_review .area_rv_all .review_list .review .info_box .star_score .star::after {content:''; position:absolute; left:0; top:0; z-index:3; width:100%; height:100%; background:url('/images/mo/star_empty_big.png') no-repeat 0 0; background-size:contain; image-rendering:pixelated;}
 .pd_review .area_rv_all .review_list .review .info_box .star_score .star .progbar {display:inline-block; height:100%; background:#fd4802; vertical-align:top;}
 .pd_review .area_rv_all .review_list .review .info_box .writer {float:right;}
@@ -1107,13 +1110,13 @@
 .pd_review .area_rv_all .review_list .review .response_box > div:first-child {margin-top:0}
 .pd_review .area_rv_all .review_list .review .response_box > div dl div {display:flex; font-size:1.1rem;}
 .pd_review .area_rv_all .review_list .review .response_box > div dl div dt {width:4.5rem; color:#888}
-.pd_review .area_rv_all .review_list .review .response_box > div dl div dd {margin-left:12px; color:#fd4802}
+.pd_review .area_rv_all .review_list .review .response_box > div dl div dd {margin-left:1.2rem; color:#fd4802}
 .pd_review .area_rv_all .review_list .review .response_box2 {margin-top:1.4rem;}
 .pd_review .area_rv_all .review_list .review .response_box2 > div:first-child {margin-top:0; overflow:hidden;}
 .pd_review .area_rv_all .review_list .review .response_box2 > div dl div {float:left; width:50%; max-width:400px; display:flex; font-size:1.1rem;}
 .pd_review .area_rv_all .review_list .review .response_box2 > div dl div dt {position:relative; padding-left:0.8rem; color:#888}
 .pd_review .area_rv_all .review_list .review .response_box2 > div dl div dt:before{content:''; position:absolute; left:0; top:0.6rem; display:block; width:2px; height:2px; background-color:#888;}
-.pd_review .area_rv_all .review_list .review .response_box2 > div dl div dd {margin-left:12px; color:#222}
+.pd_review .area_rv_all .review_list .review .response_box2 > div dl div dd {margin-left:1.2rem; color:#222}
 .pd_review .area_rv_all .review_list .review .info_box{line-height:1;}
 .pd_review .area_rv_all .review_list .review .photo_box {margin: 1rem -1.33rem 0;}
 .pd_review .area_rv_all .review_list .review .photo_box .photo_list {font-size:0; white-space:nowrap; overflow-x:auto;}
@@ -1123,19 +1126,19 @@
 .pd_review .area_rv_all .review_list .review .txt_review_box {margin-top:1.6rem; font-size:1.3rem; overflow:hidden;}
 .pd_review .area_rv_all .review_list .review .reply_box {margin-top:1.5rem; padding-top:1.5rem;}
 .pd_review .area_rv_all .review_list .review .reply_box .reply {position:relative; padding:2rem; background:#f5f5f5;}
-.pd_review .area_rv_all .review_list .review .reply_box .reply::after {content:''; position:absolute; left:0px; top:-15px; width:0px; height:0px; border:15px solid #f5f5f5; border-top-color:transparent; border-right-color:transparent;}
+.pd_review .area_rv_all .review_list .review .reply_box .reply::after {content:''; position:absolute; left:0px; top:-1.5rem; width:0px; height:0px; border:1.5rem solid #f5f5f5; border-top-color:transparent; border-right-color:transparent;}
 .pd_review .area_rv_all .review_list .review .reply_box .reply .reply_writer {}
 .pd_review .area_rv_all .review_list .review .reply_box .reply .reply_writer span {display:inline-block; position:relative;}
 .pd_review .area_rv_all .review_list .review .reply_box .reply .reply_writer .wr_name {padding-left:2.2rem; font-size:1.3rem; font-weight:300;}
 .pd_review .area_rv_all .review_list .review .reply_box .reply .reply_writer .wr_name::after {content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1.5rem; height:1.5rem; background:url('/images/mo/ico_admin.png') no-repeat 0 0; background-size:contain;}
 .pd_review .area_rv_all .review_list .review .reply_box .reply .reply_writer .wr_date {padding-left:1rem; margin-left:1rem; font-size:1.1rem; color:#888; font-size:200;}
-.pd_review .area_rv_all .review_list .review .reply_box .reply .reply_writer .wr_date::after {content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); height:12px; width:1px; background:#ddd;}
+.pd_review .area_rv_all .review_list .review .reply_box .reply .reply_writer .wr_date::after {content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); height:1.2rem; width:1px; background:#ddd;}
 .pd_review .area_rv_all .review_list .review .reply_box .reply .reply_txt {margin-top:1.2rem; color:#666; font-size:1.3rem;}
 .pd_review .area_rv_all .review_last{padding:2.5rem 0; font-size:1.1rem; color:#888888; font-weight:300; text-align:center;}
 .pd_review .area_rv_all .nodata {padding:10rem 0; border-top:1px solid #ddd; text-align:center;}
 .pd_review .area_rv_all .nodata .txt_box {color:#666; font-size:1.3rem; font-weight:300;}
 .pd_review .area_rv_all .nodata .btn_box {margin-top:1.5rem;}
-.pd_review .area_rv_all .nodata .btn_box .btn span {color:#222; font-size:14px; font-weight:300;}
+.pd_review .area_rv_all .nodata .btn_box .btn span {color:#222; font-size:1.4rem; font-weight:300;}
 .pd_review .category_open {position:relative; margin:-1.2rem -1.33rem -1px; border-bottom: 1px solid #ddd; overflow-x:auto;}
 .pd_review .category_open {font-size:0; white-space:nowrap;}
 .pd_review .category_open > li {position:relative; display:inline-block; padding:0 2rem; font-size:1.1rem; color:#222; line-height: 4.5rem;}
@@ -1154,7 +1157,7 @@
 .pd_review .category_box .category_list .category ul.n1 li{width:100%;}
 .pd_review .category_box .category_list .category ul.n2 li{float:left; width:50%;}
 .pd_review .category_box .category_close{opacity: 1; position: absolute; z-index: 98; top: -3.8rem; left: 50%; transform: translate(-50%); display: block; border: 0; width: 1.6rem; height: 1.6rem; text-indent: -9999px; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url(/images/mo/ico_pop_cls_w.png); background-color: transparent;}
-.pd_review .area_rv_all .nodata .btn_group_flex button{margin:0 auto; padding:0; width:10.8rem; height:3rem; line-height:3rem!important; font-size:11px; border:1px solid #ddd;}
+.pd_review .area_rv_all .nodata .btn_group_flex button{margin:0 auto; padding:0; width:10.8rem; height:3rem; line-height:3rem!important; font-size:1.1rem; border:1px solid #ddd;}
 
 /* pd_popup > 포토영상 리뷰 리스트 */
 .modal.pd_pop.pd_photoreviewlist_pop {}
@@ -1237,24 +1240,24 @@
 
 /* 옵션셀렉트 */
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item,
-.pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .select {height:110px; background:transparent;}
+.pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .select {height:11.0rem; background:transparent;}
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod {width:100%; z-index:-1;}
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod .item_state {display:table; width:100%; height:70px; padding:0; margin:0}
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod .item_state a {display:table-cell; position:relative; width:100%; height:70px; padding-left:70px; padding-right:40px; vertical-align:middle;}
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod .item_state a .itemPic {position:absolute; left:0; top:0; width:50px; height:70px; padding:0; margin:0}
-.pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod .item_state a .itemName {max-width:100%; height:20px; margin-bottom:0px; line-height:20px; font-size:14px; -webkit-line-clamp:1;}
+.pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod .item_state a .itemName {max-width:100%; height:20px; margin-bottom:0px; line-height:20px; font-size:1.4rem; -webkit-line-clamp:1;}
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod .item_state a .itemName .tit_option {font-weight:500;}
-.pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod .item_state a .itemPrice {margin-top:13px}
+.pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod .item_state a .itemPrice {margin-top:1.3rem}
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod .item_state a .itemPercent {position:relative;}
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod .item_state a .itemPrice_original {margin-right:0;}
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod .item_state a .itemPercent {margin-right:0;}
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod .item_state a > [class^="item"] {margin-left:0; margin-right:0;} 
-.pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .combo .list {top:110px}
+.pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .combo .list {top:11.0rem}
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .combo .list > li {border-bottom:1px solid #eee;}
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .combo .list > li[aria-disabled="true"] a [class^="item"] {color:#bbb; text-decoration:line-through;} 
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .combo .list > li[aria-disabled="true"] a img {opacity:0.3;}
 .pd.deal .tab_detail_cont .select_custom.deal_opt_item,
-.pd.deal .tab_detail_cont .select_custom.deal_opt_item .select {height:110px}
+.pd.deal .tab_detail_cont .select_custom.deal_opt_item .select {height:11.0rem}
 .pd.deal .tab_detail_cont .select_custom.deal_opt_item .item_prod {width:100%;}
 .pd.deal .tab_detail_cont .select_custom.deal_opt_item .item_prod .item_state {padding:0; margin:0}
 .pd.deal .tab_detail_cont .select_custom.deal_opt_item .item_prod .item_state a {position:relative; padding-left:70px}
@@ -1271,7 +1274,7 @@
 .pd_pop[class*="pd_list"].pd_listDescrp_pop{top:5.2rem;}
 .pd_pop[class*="pd_list"].pd_listDescrp_pop .modal_content{top:0; background-color:#646464;}
 .pd_pop[class*="pd_list"].pd_listDescrp_pop .modal_content:after{}
-.deal_list_select .select {cursor: pointer;display: inline-block; position: relative;font-size: 16px;color: #333333;width: 100%; height:66px;}
+.deal_list_select .select {cursor: pointer;display: inline-block; position: relative;font-size: 1.6rem;color: #333333;width: 100%; height:66px;}
 .deal_list_select .list{background-color:#fff;}
 .deal_list_select .list li{position: relative; border-bottom:1px solid #eeeeee;}
 .deal_list_select .list li:first-child{margin-top:0;}
@@ -1310,7 +1313,7 @@
 .item_blk .item_prod .item_state {position: relative; display:table; width:100%; box-sizing: border-box;}
 .item_blk .item_prod .itemLink{position: relative; display:table-cell; width: 100%; height:60px; padding-left:56px; vertical-align: middle;}
 .item_blk .item_prod .item_state .itemLink .itemPic {position:absolute; left:0; top:0; padding: 0; width:40px; height:60px; z-index:2;}
-.item_blk .item_prod .item_state .itemLink .itemBrand {display:block; font-size:1rem; color:#888888; font-weight:300; margin-left:0; margin-right:0;}
+.item_blk .item_prod .item_state .itemLink .itemBrand {display:block; font-size:1rem; color:#888888; font-weight:300; margin-left:0; margin-right:0; text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;width:30rem;overflow:hidden;}
 .item_blk .item_prod .item_state .itemLink .itemName {display:block; margin-top:0.5rem; font-size:1.3rem; max-height: 3.3rem; margin-left:0; margin-right:0; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 3.3rem; overflow: hidden; white-space: normal; overflow-wrap: break-word;}
 .item_blk .item_prod .item_state .itemLink .itemPrice{margin-left:0; margin-right:0;}
 /*select_custom > item_prod*/
@@ -1320,7 +1323,7 @@
 .select_custom .select .item_prod .item_state .itemLink .itemPic{display:none;}
 .select_custom .select .item_prod .item_state .itemLink .itemPrice{display:none;}
 .select_custom .select .item_prod .item_state .itemLink .itemName{-webkit-line-clamp:1; font-size:1.3rem; padding-right:1rem;}
-.select_custom .item_prod {margin:15px 0; padding-right:4rem; line-height: 1.4;}
+.select_custom .item_prod {margin:1.5rem 0; padding-right:4rem; line-height: 1.4;}
 .select_custom .item_prod .item_state {position: relative; display:table; width:100%; box-sizing: border-box;}
 .select_custom .item_prod .itemLink{position: relative; display:table-cell; width: 100%; height:60px; padding-left:59px; vertical-align: middle;}
 .select_custom .item_prod .item_state .itemLink .itemPic {position:absolute; left:0; top:0; padding: 0; margin-bottom:0; width:44px; height:66px; z-index:2;}
@@ -1342,10 +1345,10 @@
 .deal_list_select .item_prod .item_state .itemLink .itemBrand{padding-right:0; margin:0; margin-bottom:0.3rem;}
 .deal_list_select .item_prod .item_state .itemLink .itemName{-webkit-line-clamp:1; padding-right:0; margin:0;}
 
-.odPayment .paymentinfo .payinfo_blk .infotxt {display:none; max-height:190px; margin-top:20px; color:#888; font-size:14px; line-height:26px; overflow-y:scroll;}
+.odPayment .paymentinfo .payinfo_blk .infotxt {display:none; max-height:190px; margin-top:20px; color:#888; font-size:1.4rem; line-height:26px; overflow-y:scroll;}
 .odPayment .paymentinfo .payinfo_blk.on .infotxt {display:block; margin:0px 40px 40px;}
-.odPayment .area_paymentinfo .agree_payment {margin:40px 0 30px; color:#666; font-size:16px; font-weight:200;}
-.odPayment .area_paybtn .btn {height:80px; font-size:18px; font-weight:300;}
+.odPayment .area_paymentinfo .agree_payment {margin:40px 0 30px; color:#666; font-size:1.6rem; font-weight:200;}
+.odPayment .area_paybtn .btn {height:80px; font-size:1.8rem; font-weight:300;}
 
 
 /* ============================================ 전시 ============================================ */
@@ -1574,8 +1577,8 @@
 .dp .coupon_list li .cp_detail .sale_t.won_t {font-size:2.1rem; line-height: 1;}
 .dp .coupon_list li .cp_detail .sale_t.won_t span {font-size: 30px;}
 .dp .coupon_list li .cp_detail .cp_cont {margin-bottom: 0; font-weight: 300; color: #888; font-size:1.2rem; line-height: 1.5; min-height: 36px; word-break: keep-all;}
-.dp .coupon_list li .cp_detail .cp_cnt {display: none; background: #fff5f3; margin-top:0.5rem; padding:5px 8px; border:1px solid #fd4802; font-size: 10px; color: #fd4802 !important; font-weight: 500;}
-.dp .coupon_list li .cp_shape {position: absolute; top: 50%; right: -13px; z-index: 101; width: 26px; height: 26px; margin-top: -13px; border:1px solid #ddd; background: #fff; border-radius: 50%; z-index: 96;}
+.dp .coupon_list li .cp_detail .cp_cnt {display: none; background: #fff5f3; margin-top:0.5rem; padding:5px 8px; border:1px solid #fd4802; font-size: 1.0rem; color: #fd4802 !important; font-weight: 500;}
+.dp .coupon_list li .cp_shape {position: absolute; top: 50%; right: -1.3rem; z-index: 101; width: 26px; height: 26px; margin-top: -1.3rem; border:1px solid #ddd; background: #fff; border-radius: 50%; z-index: 96;}
 .dp .coupon_list li .cp_date {border:1px solid #222; background: #222; font-weight: 300; text-align: center;}
 .dp .coupon_list li .cp_date button {display: block; width: 100%; padding:1.1rem 5px; font-size: 1.2rem; font-weight: 300; color: #fff;}
 .dp .coupon_list li .cp_date button span {background: url(/images/mo/ico_cp_down.png) no-repeat right top; padding-right: 28px;}
@@ -1588,7 +1591,7 @@
 .dp .dp_coupon_wrap .dp_coupon_tip .dp_coupon_notice::before {content:''; display: block; width:36px; height: 46px; margin: 0 auto; background: url(/images/pc/ico_null.png)no-repeat;}
 .dp .dp_coupon_wrap .dp_coupon_tip .dp_coupon_notice::after {content:'유의사항'; display: inline-block; margin-top: 20px; color:#888;}
 .dp .dp_coupon_wrap .dp_coupon_tip ul {margin-left: 90px;}
-.dp .dp_coupon_wrap .dp_coupon_tip ul li {position: relative; padding-left: 12px; margin-bottom: 12px; color:#888;}
+.dp .dp_coupon_wrap .dp_coupon_tip ul li {position: relative; padding-left: 1.2rem; margin-bottom: 1.2rem; color:#888;}
 .dp .dp_coupon_wrap .dp_coupon_tip ul li:last-child {margin-bottom: 0;}
 .dp .dp_coupon_wrap .dp_coupon_tip ul li::before {content:''; position: absolute; width:2px; height: 2px; top:46%; left:0; transform: scaleY(-50%); background: #888;}
 .dp .dp_coupon_wrap .announce_txt {position: relative; margin: 0 auto; padding-top: 30px; border-top:1px solid #dddddd;}
@@ -1607,10 +1610,10 @@
 .dp .dp_exhibition .review .best_review {position:relative; text-align:center;}
 .dp .dp_exhibition .review .best_review:after{content:''; display:block; position:absolute; bottom:0; left:2rem; right:2rem; height:1px; background-color:#eee;}
 .dp .dp_exhibition .review .best_review a {display:block; position:relative; background-color:#fff;}
-.dp .dp_exhibition .review .best_review a .info .star_score .star {display:inline-block; position:relative; width:83px; height:14px; background:#ddd;}
+.dp .dp_exhibition .review .best_review a .info .star_score .star {display:inline-block; position:relative; width:83px; height:1.4rem; background:#ddd;}
 .dp .dp_exhibition .review .best_review a .info .star_score .star::after {content:''; position:absolute; left:0; top:0; z-index:3; width:100%; height:1.5rem; background:url('/images/mo/star_empty.png') no-repeat 0 0; background-size:100% 100%; image-rendering:pixelated;}
-.dp .dp_exhibition .review .best_review a .info .star_score .star .progbar {display:inline-block; height:14px; background:#fd4802; vertical-align:top;}
-.dp .dp_exhibition .review .best_review a .info .star_score .ico {margin-left:10px}
+.dp .dp_exhibition .review .best_review a .info .star_score .star .progbar {display:inline-block; height:1.4rem; background:#fd4802; vertical-align:top;}
+.dp .dp_exhibition .review .best_review a .info .star_score .ico {margin-left:1.0rem}
 .dp .dp_exhibition .review .best_review a .info .star_score .ico::before {vertical-align:inherit;}
 .dp .dp_exhibition .review .best_review a .info .star_score{margin-bottom:1rem;}
 .dp .dp_exhibition .review .best_review a .info .star_score .star{vertical-align:middle;}
@@ -1634,16 +1637,16 @@
 .dp .dp_exhibition .review .product_view .item_prod .item_state .itemLink .itemName {display:block; margin-top:0.5rem; font-size:1.3rem; max-height: 3.3rem; margin-left:0; margin-right:0; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; max-height: 3.3rem; overflow: hidden; white-space: normal; overflow-wrap: break-word;}
 .dp .dp_exhibition .review .product_view .item_prod .item_state .itemLink .itemPrice{margin-left:0; margin-right:0;}
 .dp .dp_exhibition .review .product_view .item_prod .item_state .itemLink .itemPrice .itemPrice_sale{font-weight:700;}
-.dp .dp_exhibition .review .swiper-container .swiper-slide{box-shadow:0 0 10px rgba(0,0,0,0.2);}
+.dp .dp_exhibition .review .swiper-container .swiper-slide{box-shadow:0 0 1.0rem rgba(0,0,0,0.2);}
 .dp .dp_exhibition .review .swiper-container .swiper-pagination-fraction {position: relative; display:inline-block; margin-top:2rem; bottom:0; width:auto; background: rgba(34,34,34,.5); color: #fff; font-weight: 300; padding:0.5rem 0.7rem; line-height: 1; font-size: 1.2rem; border-radius:2rem;}
 .dp .dp_exhibition .review .swiper-container .swiper-pagination-current {font-weight: 600;}
 
 /* .dp > .dp_util > select 커스텀 (전시공통) */
 .dp .dp_util .select {cursor: pointer;display: inline-block;position: relative;top:-1px; font-size: 1.2rem;color: #333333;width: 100%;height:1.6rem; line-height:1.6rem;}
-.dp .dp_util .select+.select{margin-left: 10px;}
-.dp .dp_util .select_hidden {display: none;visibility: hidden;padding-right: 10px;}
+.dp .dp_util .select+.select{margin-left: 1.0rem;}
+.dp .dp_util .select_hidden {display: none;visibility: hidden;padding-right: 1.0rem;}
 .dp .dp_util .select_dress {
-  position: relative;top: 0;right: 0;bottom: 0;left: 0;padding:0 15px 0 3px;
+  position: relative;top: 0;right: 0;bottom: 0;left: 0;padding:0 1.5rem 0 3px;
   background-color: #ffffff;border: 1px solid #fff;box-sizing: border-box;
   -moz-transition: all 0.05s ease-in;-o-transition: all 0.05s ease-in;
   -webkit-transition: all 0.05s ease-in;transition: all 0.05s ease-in;
@@ -1721,7 +1724,7 @@
 .filter_list{font-size:1.4rem; background:#fff; position:fixed; top:0; right:-80%; width:80%; height:100%; transition:right 0.4s;}
 .filter_list::after{content:''; display: block; clear:both;}
 .filter_list .form_field{display:block;}
-.filter_list .form_field input[type="checkbox"] + label {display: block; position: relative; padding-left:0; padding-right: 26px; cursor: pointer; font-size: 12px; line-height: 1.4; font-weight: 300; letter-spacing: 0;}
+.filter_list .form_field input[type="checkbox"] + label {display: block; position: relative; padding-left:0; padding-right: 26px; cursor: pointer; font-size: 1.2rem; line-height: 1.4; font-weight: 300; letter-spacing: 0;}
 .filter_list .form_field div label span{color:#222!important;}
 .filter_list .form_field input[type="checkbox"] + label:before{left:auto; right:0}
 .filter_list .form_field input[type="checkbox"]:checked + label:after{left:auto; right:0}
@@ -1730,7 +1733,7 @@
 .filter_top > div:nth-child(1){float:left;}
 .filter_top > div:nth-child(2){float:right;}
 .filter_top .fillter_reset {position:relative; padding-left:1.5rem; vertical-align:middle;}
-.filter_top .fillter_reset::before { content:''; position: absolute; top:50%; left:0; transform: translateY(-50%); width:12px; height:12px; background: url(/images/mo/ico_filter_reset.png)no-repeat; background-size:contain;}
+.filter_top .fillter_reset::before { content:''; position: absolute; top:50%; left:0; transform: translateY(-50%); width:1.2rem; height:1.2rem; background: url(/images/mo/ico_filter_reset.png)no-repeat; background-size:contain;}
 .filter_top .tt{font-size:1.6rem; font-weight:500; color:#222;}
 .filter_top .close{display:inline-block; margin-left:1.8rem; width:1.6rem; height:1.6rem; background:url(/images/mo/ico_pop_cls.png) center center no-repeat; background-size:contain; font-size:0; vertical-align:middle;}
 .filter_con{position:absolute; top:5rem; left:0; width:100%; height:calc(100% - 5rem); overflow-y:auto;}
@@ -1872,7 +1875,7 @@
 
 /*===================== item_prod쪽으로 이동 예정===================*/
 /* 아이템컬러칩 */
-.itemcolorchip {margin:1.5rem 5px 0px;}
+.itemcolorchip {margin:1.5rem 0.5rem 0;}
 .itemcolorchip [class*="chip_"] {position: relative;display: inline-block;width:1rem; height:1rem; font-size: 0; vertical-align: middle; margin:0 0 0 2px;}
 .itemcolorchip [class*="chip_"]:before {content: "";display: inline-block;width: 100%;height: 100%;border-radius: 50%;box-sizing: border-box;}
 .itemcolorchip [class*="chip_"]:first-child {margin-left:0}
@@ -1881,8 +1884,8 @@
 .chip_color35::before {background-color: #cbaf6f;}
 
 /* 상품아이콘*/
-.itemBadge {margin:20px 5px 0; margin-top:1rem; font-size: 0px; overflow:hidden;}
-.itemBadge [class*="badge"] {display:inline-block; height:22px; margin:0 0 0 5px; padding:0 8px; border:1px solid #888888; background: #fff; color:#888888; font-size: 11px; font-weight: 300; line-height: 21px;}
+.itemBadge {margin:2.0rem 0.5rem 0; margin-top:1rem; font-size: 0px; overflow:hidden;}
+.itemBadge [class*="badge"] {display:inline-block; height:2.2rem; margin:0 0 0 0.5rem; padding:0 0.8rem; border:1px solid #888888; background: #fff; color:#888888; font-size: 1.1rem; font-weight: 300; line-height: 21px;}
 .itemBadge [class*="badge"]:first-child {margin-left:0}
 .itemBadge .badge13 {background:#f5f5f5; border-color:#f5f5f5;}
 
@@ -1999,7 +2002,7 @@
 /* br_main - brand_product */
 .br .br_main .brand_product{margin-top:2rem;}
 .br .br_main .brand_product .swiper-container{overflow:visible;}
-.br .br_main .brand_product .btn:after{content: ''; display: inline-block; margin-left: 8px; width: 11px; height: 11px; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url(/images/mo/ico_more_lg.png);}
+.br .br_main .brand_product .btn:after{content: ''; display: inline-block; margin-left: 8px; width: 1.1rem; height: 1.1rem; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url(/images/mo/ico_more_lg.png);}
 /* 브랜드 - 룩북 */
 .htop.br_lookbook { overflow: hidden; border: none !important;}
 .htop.br_lookbook .btn_back span i { background: #fff;}
@@ -2044,7 +2047,7 @@
 .br .br_otherbrand .thumb img {position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; z-index:1}
 .br .br_otherbrand .txt {margin-top:1rem; padding:0px 0.5rem 0px}
 .br .br_otherbrand .txt .tt {display:block; display: -webkit-box; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#222; font-weight:500; font-size:1.3rem; word-break:keep-all; white-space:normal;}
-.br .br_otherbrand .txt .date {display:block; margin-top:15px; color:#888; font-size:14px; font-weight:300;}
+.br .br_otherbrand .txt .date {display:block; margin-top:1.5rem; color:#888; font-size:1.4rem; font-weight:300;}
 /* 브랜드 - br_search */
 .br_search_wrap .swiper-pagination{margin:0;}
 .br_search_wrap .swiper-container { width: 100%; height: 21.4rem; margin-left: auto; margin-right: auto; }
@@ -2077,7 +2080,7 @@
 .htop.br { overflow: hidden;}
 .htop.br .button_wrap {height: 5.5rem; display: inline-block; float: right; padding: 1.6rem 0 0; margin: 0 2.5rem 0 0; box-sizing: border-box;}
 .htop.br .button_wrap .br_search { margin: 0 2.5rem 0 0; }
-.htop.br .button_wrap .br_store img:nth-child(1) { width: 1.6rem; height: 2rem; }
+.htop.br .button_wrap .br_store img:nth-child(1) { height: 2rem; }
 .htop.br .button_wrap .br_store span { width: 2.1rem; height: 1.5rem; position: absolute; top: 1.2rem; right: 1.5rem; background: #fd4802; border-radius: 0.8rem; font-size: 0.8rem; color: #fff; line-height: 1.6rem;}
 
 
@@ -2268,25 +2271,25 @@
 
 /* select 커스텀 (필터용) */
 .sch .sch_util .select {cursor: pointer;display: inline-block;position: relative;top:-1px; font-size: 1.2rem;color: #333333;width: 100%;height:1.6rem; line-height:1.6rem;}
-.sch .sch_util .select+.select{margin-left: 10px;}
-.sch .sch_util .select_hidden {display: none;visibility: hidden;padding-right: 10px;}
+.sch .sch_util .select+.select{margin-left: 1.0rem;}
+.sch .sch_util .select_hidden {display: none;visibility: hidden;padding-right: 1.0rem;}
 .sch .sch_util .select_dress {
-  position: relative;top: 0;right: 0;bottom: 0;left: 0;padding:0 15px 0 3px;
+  position: relative;top: 0;right: 0;bottom: 0;left: 0;padding:0 1.5rem 0 0.3rem;
   background-color: #ffffff;border: 1px solid #fff;box-sizing: border-box;
   -moz-transition: all 0.05s ease-in;-o-transition: all 0.05s ease-in;
   -webkit-transition: all 0.05s ease-in;transition: all 0.05s ease-in;
 }
 .sch .sch_util .select_dress:after {
-  content: "";width: 0;height: 0;box-sizing: border-box;position: absolute;top:5px;right:0;
-  border: 5px solid transparent; border-color: #222222 transparent transparent transparent;  
+  content: "";width: 0;height: 0;box-sizing: border-box;position: absolute;top:0.5rem;right:0;
+  border: 0.5rem solid transparent; border-color: #222222 transparent transparent transparent;  
 }
 .sch .sch_util .select_options {
   display: none;position: absolute;top:2rem;right: 0;left: 0;z-index: 2;
   margin: 0;padding: 0;list-style: none;background-color: #ffffff;
-  box-sizing: border-box;border:0;border-top: 0px solid #222222;
+  box-sizing: border-box;border:0;border-top: 0 solid #222222;
 }
 .sch .sch_util .select_options li {
-  margin: 0;padding:3px 3px;text-indent:0; display:block; text-align:left;
+  margin: 0;padding:0.3rem 0.3rem;text-indent:0; display:block; text-align:left;
   -moz-transition: all 0.08s ease-in;-o-transition: all 0.08s ease-in;
   -webkit-transition: all 0.08s ease-in;transition: all 0.08s ease-in;
 }
@@ -2299,7 +2302,7 @@
 
 /* 전시 카테고리 공통 */
 .sch .category_open{position:relative; padding: 1.1rem 1.5rem; font-size:1.3rem; color:#222; font-weight: 300; text-align:left; background-color: #ffffff; border: 1px solid #dddddd; box-sizing: border-box;}
-.sch .category_open:after {content: ""; width: 0; height: 0; box-sizing: border-box; position: absolute; top: 1.8rem; right: 1.5rem; border: 6px solid transparent; border-color: #888888 transparent transparent transparent;}
+.sch .category_open:after {content: ""; width: 0; height: 0; box-sizing: border-box; position: absolute; top: 1.8rem; right: 1.5rem; border: 0.6rem solid transparent; border-color: #888888 transparent transparent transparent;}
 .sch .category_box{visibility:hidden; position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,.5); z-index:500;}
 .sch .category_box.active{visibility:visible;}
 .sch .category_box .lap{position:absolute; bottom:0; left:0; padding:3rem 0; width:100%; background:#fff;}

src/main/webapp/ux/mo/css/style24_m.css

@@ -475,57 +475,51 @@ main.container .inner h2[data-style~="unusual"] {font-size:2.0rem;top: 0;positio
 /* main.container .inner:last-child {padding-bottom: 0;} */
 /* .select_custom .combo .select > div {position: relative; z-index: -1;} */
 
-
-
-
-	/* 이용약관,개인정보취급방침,업체리스트 */
-	.ps p {font-size:1.2rem;color:#666666;line-height:2.2rem;letter-spacing:-0.025em;}
-	.ps {padding:0;} 
-	.ps table {word-break:keep-all;margin-top: 3.0rem;width: 100%;border-top: 1px solid #222222;}
-	.ps table th,
-	.ps table td {position:relative; padding:1.0rem 1.0rem; font-size:1.1rem;line-height: 1.4;color: #222222;letter-spacing:-0.025em;}
-	.ps table td {border-bottom:1px solid #ddd;border-right: 1px solid #ddd;font-weight:200;}
-	.ps table td:last-child {border-right: 1px solid transparent;}
-	.ps table th {border-top: 0;border-bottom: 0;border-right: 0;font-weight: 600;text-align: center;background: #f5f5f5;}
-  .ptn, #partnersPop .pop_cont {height: auto;background: #ffffff;}
-  .ps.ptn table {margin-top:0;}
-  .ps.ptn table th, .ps.ptn table td {text-align: center;padding: 1.6rem 0;}
-  .ps.ptn table th {font-size: 1.3rem; font-weight: 500; line-height:1.3rem;}
-  .ps.ptn table td {font-size: 1.2rem; font-weight: 300; line-height: 1.2rem;}
-  .hookGrp{margin-top: 1.333rem;}
-	.hookGrp .hook_list{border: 1px solid #f5f5f5;padding: 1.333rem;}
-	.hookGrp .hook_list ul{}
-	.hookGrp .hook_list ul:after{content: ''; clear:both; display: block;}
-	/* .hookGrp .hook_list ul li{float: left;width: 33.333%;} */
-	.hookGrp .hook_list ul li a{display: table; color: #222222;}
-	.hookGrp .hook_list ul li a span{margin: 0px 0px 0.5rem 0;display: block;font-size: 1.1rem;font-weight: 300;}
-	.hookGrp .hook_list ul li a span::after{content: ''; display: block; box-sizing: border-box; border: 1px solid transparent;}
-	.hookGrp .hook_list ul li a:hover,
-	.hookGrp .hook_list ul li a:focus{color: #fd4802;}
-	.hookGrp .hook_list ul li a:hover span:after,
-	.hookGrp .hook_list ul li a:focus span:after{content: '';display: block; color: #fd4802; box-sizing: border-box; border-bottom: 1px solid #fd4802;}
-	.hookGrp .hook_cont {font-size:1.6rem;color:#666666;line-height:2.6rem;letter-spacing:-0.025em;}
-	.hookGrp .hook_cont div{margin-top: 2.6rem;}
-	.hookGrp .hook_cont div:last-child{margin-bottom: 5.0rem;}
-	.hookGrp .hook_cont h4 {font-size:1.4rem;font-weight:500;color:#222222;line-height:1.6rem;letter-spacing:-0.025em;}
-	.hookGrp .hook_cont p {font-size:1.2rem;color:#666666;line-height:2.2rem;letter-spacing:-0.025em;}
-	.hookGrp .hook_cont p em{font-size:1.2rem;font-weight:400;color:#222222;line-height:2.2rem;letter-spacing:-0.025em;}
-	.hookGrp .hook_cont ol li {font-size:1.2rem;padding-left: 0.3rem;}
-
-  .pager {height: 100%;margin-top: 2.0rem;margin-bottom: 2.0rem;}
-  .pager .pageNav {display: table;margin-left: auto;margin-right: auto;}
-  .pager .pageNav > li {display: inline;}
-  .pager .pageNav > li::after {content: '';clear: both; display: inline-block;}
-  .pager .pageNav > li > a, .pager .pageNav > li > span {position: relative;float: left;font-size: 1.6rem;font-weight: 400;padding: 0.6rem 0.2rem;line-height: 1.42857143;color: #666666;text-decoration: none;background-color: #ffffff;}
-  .pager .pageNav .prev a , .pager .pageNav .next a {width: 3.4rem;height: 3.4rem;margin-left: 0;border: 1px solid #888888;background: url('/images/mo/ico_paging.png')no-repeat;background-size: 6.8rem 2.866rem;text-indent: -999.9rem;}
-  .pager .pageNav .prev a {background-position: 0rem 0rem;}
-  .pager .pageNav .next a {background-position: -3.5rem 0rem;}
-  .pager .pageNav .active a {color: #222222;margin-left: 1.5rem;}
-  .pager .pageNav .lastpage a {color: #888888;margin-right: 1.5rem;}
-  .pager .pageNav .lastpage a::before {content: '/';padding-right: 0.3rem;}
-
-
-
+/* 이용약관,개인정보취급방침,업체리스트 */
+.ps p {font-size:1.2rem;color:#666666;line-height:2.2rem;letter-spacing:-0.025em;}
+.ps {padding:0;} 
+.ps table {word-break:keep-all;margin-top: 3.0rem;width: 100%;border-top: 1px solid #222222;}
+.ps table th,
+.ps table td {position:relative; padding:1.0rem 1.0rem; font-size:1.1rem;line-height: 1.4;color: #222222;letter-spacing:-0.025em;}
+.ps table td {border-bottom:1px solid #ddd;border-right: 1px solid #ddd;font-weight:200;}
+.ps table td:last-child {border-right: 1px solid transparent;}
+.ps table th {border-top: 0;border-bottom: 0;border-right: 0;font-weight: 600;text-align: center;background: #f5f5f5;}
+.ptn, #partnersPop .pop_cont {height: auto;background: #ffffff;}
+.ps.ptn table {margin-top:0;}
+.ps.ptn table th, .ps.ptn table td {text-align: center;padding: 1.6rem 0;}
+.ps.ptn table th {font-size: 1.3rem; font-weight: 500; line-height:1.3rem;}
+.ps.ptn table td {font-size: 1.2rem; font-weight: 300; line-height: 1.2rem;}
+.hookGrp{margin-top: 1.333rem;}
+.hookGrp .hook_list{border: 1px solid #f5f5f5;padding: 1.333rem;}
+.hookGrp .hook_list ul{}
+.hookGrp .hook_list ul:after{content: ''; clear:both; display: block;}
+/* .hookGrp .hook_list ul li{float: left;width: 33.333%;} */
+.hookGrp .hook_list ul li a{display: table; color: #222222;}
+.hookGrp .hook_list ul li a span{margin: 0px 0px 0.5rem 0;display: block;font-size: 1.1rem;font-weight: 300;}
+.hookGrp .hook_list ul li a span::after{content: ''; display: block; box-sizing: border-box; border: 1px solid transparent;}
+.hookGrp .hook_list ul li a:hover,
+.hookGrp .hook_list ul li a:focus{color: #fd4802;}
+.hookGrp .hook_list ul li a:hover span:after,
+.hookGrp .hook_list ul li a:focus span:after{content: '';display: block; color: #fd4802; box-sizing: border-box; border-bottom: 1px solid #fd4802;}
+.hookGrp .hook_cont {font-size:1.6rem;color:#666666;line-height:2.6rem;letter-spacing:-0.025em;}
+.hookGrp .hook_cont div{margin-top: 2.6rem;}
+.hookGrp .hook_cont div:last-child{margin-bottom: 5.0rem;}
+.hookGrp .hook_cont h4 {font-size:1.4rem;font-weight:500;color:#222222;line-height:1.6rem;letter-spacing:-0.025em;}
+.hookGrp .hook_cont p {font-size:1.2rem;color:#666666;line-height:2.2rem;letter-spacing:-0.025em;}
+.hookGrp .hook_cont p em{font-size:1.2rem;font-weight:400;color:#222222;line-height:2.2rem;letter-spacing:-0.025em;}
+.hookGrp .hook_cont ol li {font-size:1.2rem;padding-left: 0.3rem;}
+
+.pager {height: 100%;margin-top: 2.0rem;margin-bottom: 2.0rem;}
+.pager .pageNav {display: table;margin-left: auto;margin-right: auto;}
+.pager .pageNav > li {display: inline;}
+.pager .pageNav > li::after {content: '';clear: both; display: inline-block;}
+.pager .pageNav > li > a, .pager .pageNav > li > span {position: relative;float: left;font-size: 1.6rem;font-weight: 400;padding: 0.6rem 0.2rem;line-height: 1.42857143;color: #666666;text-decoration: none;background-color: #ffffff;}
+.pager .pageNav .prev a , .pager .pageNav .next a {width: 3.4rem;height: 3.4rem;margin-left: 0;border: 1px solid #888888;background: url('/images/mo/ico_paging.png')no-repeat;background-size: 6.8rem 2.866rem;text-indent: -999.9rem;}
+.pager .pageNav .prev a {background-position: 0rem 0rem;}
+.pager .pageNav .next a {background-position: -3.5rem 0rem;}
+.pager .pageNav .active a {color: #222222;margin-left: 1.5rem;}
+.pager .pageNav .lastpage a {color: #888888;margin-right: 1.5rem;}
+.pager .pageNav .lastpage a::before {content: '/';padding-right: 0.3rem;}
 
 /* ev_공통 */
 .ev .inner {background: #fff; padding-bottom: 0;}
@@ -1004,6 +998,7 @@ main.container .inner h2[data-style~="unusual"] {font-size:2.0rem;top: 0;positio
 
 .part_goods .point {margin-bottom: 0.7rem; font-size: 1.1rem; color: #888; background: url(/images/mo/ico_point.png) no-repeat left top 1px; background-size:1.2rem; padding-left: 1.6rem;}
 .part_goods .od_calc .sale_price {font-size: 1.1rem; color: #888; font-weight: 300;}
+.part_goods .od_calc .sale_percent {font-size: 1.3rem; color:#fd4802;}
 .part_goods .od_calc .price {font-size: 0;}
 .part_goods .od_calc .price .selling_price {display:inline-block; color:#222; font-size:1.3rem; font-weight:600;}
 .part_goods .od_calc .price .selling_price em {font-size:1.6rem;}
@@ -1585,9 +1580,16 @@ background-size:100%;}
 .od .info_txt ul li:last-child {margin-bottom: 0;}
 .od .info_txt ul li:after {content:''; position: absolute; top:0.6rem; left: 0; background: #858585; width: 0.2rem; height: 0.2rem;}
 
-.od .inner:last-child .btn_group_flex {margin-top: -1.2rem;}
+.od .inner .area_paybtn {margin-top: -1.2rem;}
+.od .inner .area_paybtn .btn_group_flex {margin-top: 0;}
 .od .inner .shipfold .btn_group_flex {margin-top: 3rem;}
 
+.ship_etc {display:none; margin-top: 0.5rem;}
+.ship_etc input[type="text"] {width: 100%; height: 4.5rem; font-size: 1.3rem; color: #888; font-weight: 300;}
+.ship_etc input[type="text"]::placeholder {}
+.ship_etc .desc_txt {position: relative; padding-left: 0.8rem; margin-top: 1rem; font-size: 1.1rem; }
+.ship_etc .desc_txt:after {content:''; position: absolute; top: 0.6rem; left: 0; background: #888; width: 0.2rem; height: 0.2rem;}
+
 /* od_테이블 */
 .od .pay_wrap {padding-top: 4rem;}
 .od .goods_top {position: relative; padding: 1.5rem 0; border-bottom: 1px solid #ddd; font-size: 0; margin-bottom: 2.5rem;}
@@ -1711,6 +1713,8 @@ background-size:100%;}
 .odPayment .fold_cont .area_overseas .info_box {font-size:16px;}
 .odPayment .fold_cont .area_overseas .info_box .t_err {margin-top:5px; font-size:1.1rem;}
 .odPayment .fold_cont .area_overseas .info_box.overs1 {margin-right:0}
+.odPayment .fold_cont .area_overseas .info_box.overs1 .recipient {margin-bottom: 0.5rem; font-size: 1.3rem;}
+.odPayment .fold_cont .area_overseas .info_box.overs1 .recipient em {font-weight: 200;}
 .odPayment .fold_cont .area_overseas .info_box.overs1 .input_wrap {display: block; width: 100%;}
 .odPayment .fold_cont .area_overseas .info_box.overs1 .input_wrap .form_control {width: 100%; color: #222;}
 .odPayment .fold_cont .area_overseas .info_box.overs2 {margin-top:0; margin-right:0; color:#666; font-size: 1.4rem;}
@@ -1719,6 +1723,9 @@ background-size:100%;}
 .odPayment .fold_cont .area_overseas .info_box .agree_overs label::before,
 .odPayment .fold_cont .area_overseas .info_box .agree_overs label::after {top:10px !important; transform:translateY(0%) !important;}
 .odPayment .agree_insurance, .od .agree_insurance {display:none; margin:1rem 0 0;}
+.odPayment .agree_insurance .form_field .agree_insurance label, .od .form_field .agree_insurance label {font-size: 1.3rem;}
+.od .agree_insurance p {margin:1rem 0; font-weight: 200; font-size: 1.2rem;}
+.od .agree_insurance .btn {height:auto; padding:1rem 1.3rem; font-weight: 300; font-size: 1.3rem;}
 .od .foldGroup .fold_head .data .total_gift,
 .od .foldGroup .fold_head .data .total_deduct {color:#fd4802; font-weight:500;}
 
@@ -1852,7 +1859,7 @@ background-size:100%;}
 .adrsModify_pop .default_addrs {margin-top: 1.5rem;}
 /* //주문결제_배송지수정 팝업 */
 
-/* 주문결제_할인쿠폰변경 팝업 */	
+/* 주문결제_할인쿠폰변경 팝업 */
 .modal .modal-footer .btn.btn_primary {background: #fd4802;}
 .modal.couponModify_pop .modal-body .pop_cont {line-height:1; font-size: 1.3rem;}
 .modal.couponModify_pop .modal-footer {margin-top:0;}
@@ -1887,7 +1894,7 @@ background-size:100%;}
 .modal.couponModify_pop .area_cart_coupon {margin-bottom:6rem;}
 .modal.couponModify_pop .area_cart_coupon .form_field > div {border-bottom:1px solid #ddd}
 .modal.couponModify_pop .area_cart_coupon .form_field > div:first-child {border-top:1px solid #ddd;}
-.modal.couponModify_pop .area_cart_coupon .form_field > div label {width:100%;}
+.modal.couponModify_pop .area_cart_coupon .form_field > div label {width:100%; color:#222;}
 .modal.couponModify_pop .area_cart_coupon .cart_coupon {padding:20px 0px;}
 .modal.couponModify_pop .area_cart_coupon .cart_coupon .name {color:#222; font-size:14px; font-weight:300;}
 .modal.couponModify_pop .area_cart_coupon .cart_coupon .txt {margin-top:10px; color:#888; font-size:14px; font-weight:200;}
@@ -1920,7 +1927,8 @@ background-size:100%;}
 .od .area_selgift .agree_gift .txt {font-size: 1.3rem; margin:1rem 0;}
 .od .area_selgift .agree_gift .btn_link_popup {font-size: 1.1rem; color:#666; border-bottom: 1px solid #666;}
 .od .area_selgift .agree_gift_con {display: none; width: 100%; border:1px solid #ddd; border-top: 0; padding:1.8rem;}
-.od .area_selgift .agree_gift_con p {height: 10rem; overflow-y: auto; padding-right: 0.5rem;}
+.od .area_selgift .agree_gift_con p {position: relative; padding-left: 1rem; font-size: 1.2rem; color: #888;}
+.od .area_selgift .agree_gift_con p:before {content:'-'; position: absolute; left: 0; top: 0;}
 
 .od .area_selpoint dl > div {margin-top: 2.4rem; padding-top: 2.4rem; border-top: 1px solid #ddd;}
 .od .area_selpoint dl > div:first-child {margin-top: 0;}
@@ -1929,8 +1937,9 @@ background-size:100%;}
 .od .area_seldiscount dl > div {border-bottom: 1px solid #eee; margin-bottom: 1.5rem; padding-bottom: 1.5rem;}
 .od .area_seldiscount dl > div:last-child {border-bottom: 0;}
 .od .area_seldiscount dl > div:first-child {}
-.od .area_seldiscount #btn_couponModify_pop {width: 100%; display: block; height: 4.5rem; margin:1.5rem 0; border:1px solid #a7a7a7;}
-.od .area_seldiscount dt {position: relative; font-size: 1.4rem; color: #222; font-weight: 300;}
+.od .area_seldiscount dl > div:nth-child(2) {border-bottom: 1px dashed #eee;}
+.od .area_seldiscount #btn_couponModify_pop {width: 100%; display: block; height: 4.5rem; margin:0 0 1.5rem; border:1px solid #a7a7a7;}
+.od .area_seldiscount dt {position: relative; margin-bottom: 1.5rem; font-size: 1.4rem; color: #222; font-weight: 500;}
 .od .area_seldiscount dt .maxdisc_amount {position: absolute; top: 0; right: 0;}
 
 .od .area_seldiscount .input_wrap, .od .area_selpoint .input_wrap {display: block;}
@@ -1950,10 +1959,10 @@ background-size:100%;}
 .od .area_seldiscount .dlvr_fee_box .select_custom .combo .dlvr_coupon .empty {margin-top:2rem; color:#888; font-size:1.3rem; font-weight:300;}
 .od .area_seldiscount .dlvr_fee_box .select_custom .combo .list > li[aria-disabled="true"] .dlvr_coupon p {color:#888;}
 
-.od .tmark_required {color:#fd4802; font-size:1.3rem; font-weight:300;}
+.od .tmark_required {color:#fd4802; font-size:1.2rem; font-weight:300;}
 
 .od .area_selpoint {}
-.od .area_selpoint dl > div dt {font-size: 1.4rem; color: #222;}
+.od .area_selpoint dl > div dt {font-size: 1.4rem; color: #222; font-weight: 500;}
 .od .area_selpoint dl > div dt span {font-size: 1.2rem; color:#888; margin-left: 0.5rem;}
 .od .area_selpoint .form_field > div {margin:1rem 0;}
 .od .area_selpoint .form_field > div.input_wrap {float:none; margin-right:0;}
@@ -1985,8 +1994,8 @@ background-size:100%;}
 .od .paymentinfo .payinfo_blk.on {background:#f5f5f5;}
 .od .paymentinfo .payinfo_blk.on a span::after {top:3px; transform:rotate(-180deg);}
 .od .paymentinfo .payinfo_blk.on .infotxt {display:block; margin:0px 1.9rem 1.9rem;}
-.od .area_paymentinfo .agree_payment {margin:4rem 0 4.2rem; color:#222; font-size:1.4rem; font-weight:200; text-align:center;}
-.od .area_paybtn .btn {height:80px; font-size:20px; font-weight:300;}
+.od .area_paymentinfo .agree_payment {margin:4rem 0 4.8rem; color:#222; font-size:1.4rem; font-weight:200; text-align:center;}
+.od .area_paybtn .btn {height:6rem; font-size:1.6rem; font-weight:500;}
 .od .area_paybtn .btn em {font-weight:500;}
 
 .od .extra_pay {padding:0px 30px 40px; margin-bottom: 20px; border-top:1px solid #222; border-bottom:1px solid #ddd;}
@@ -2022,12 +2031,8 @@ background-size:100%;}
 .od .completed .info_complete .report_box div.closedate dt,
 .od .completed .info_complete .report_box div.closedate dd {margin:0; color:#888; font-size:16px; font-weight:200;}
 .od .completed .info_complete .report_box div.closedate dd span {font-weight:300;}
-.od .completed .od_cont {width:100%;}
-.od .completed .od_cont h3 {margin-bottom:20px; font-size:18px; font-weight:500;}
-.od .completed .od_cont .order_amount dl div {margin-top:20px;}
-.od .completed .od_cont .order_amount dl div:first-child {margin-top:0}
-.od .completed .od_cont [class^='area_']{margin-top:60px}
-.od .completed .od_cont .sec_foot {margin-top:60px}
+
+.od .completed .btn_group_flex {margin-top: 0;}
 .od .completed .btn_group_md {text-align:center;}
 .od .completed .btn_group_md::after {}
 .od .completed .btn_group_md .btn {margin:0px 3px; width:230px;}
@@ -2092,10 +2097,8 @@ background-size:100%;}
 .nonMBorder .cont_head h3 {margin-bottom:40px; font-size:40px; font-weight:500;} 
 .nonMBorder input[type="text"] {float:none; width:100%; height:4.5rem; padding:1.7rem 1.5rem; color:#222; font-size:1.3rem; font-weight:300;}
 .nonMBorder input[type="text"]::placeholder {color:#888; font-weight:200;}
-.nonMBorder .form_field {display:block; margin-top:10px;}
+.nonMBorder .form_field {display:block; margin-top:1rem;}
 .nonMBorder .form_field:first-of-type {margin-top:0px;}
-.nonMBorder .form_field .ui_col_9 input[type="text"] {width:388px;}
-.nonMBorder .form_field .ui_col_3 .btn {width:132px; height:52px; padding:17px 0px 17px; font-weight:200;}
 .nonMBorder .cont_foot {position:relative; width:530px; margin:40px auto 0; color:#888; font-size:16px; line-height:1;}
 .nonMBorder .cont_foot::after {content:''; clear:both; display:block;}
 .nonMBorder .cont_foot p span {display:block;}
@@ -2106,17 +2109,22 @@ background-size:100%;}
 .nonMBorder .btn_group_md .btn {padding:19px; font-weight:300; height:60px;}
 .nonMBorder .btn_group_md .btn_default {border-color:#a7a7a7;}
 .nonMBorder .agree_nombPrivacy {}
-.nonMBorder .agree_nombPrivacy label span {font-size:18px;}
-.nonMBorder .agree_nombPrivacy label span .tmark_required {display:inline-block; margin-top:2px; font-size:14px; vertical-align:top;}
+.nonMBorder .agree_nombPrivacy label span {font-size:1.3rem;}
+.nonMBorder .agree_nombPrivacy label span .tmark_required {display:inline-block; font-size:1.3rem; vertical-align:top;}
 .nonMBorder .agree_nomb_txt_box {margin-bottom:40px; padding:1.5rem; border:1px solid #ddd;}
 .nonMBorder .agree_nomb_txt_box > div {overflow:auto; max-height:160px; color:#888; font-size:14px; line-height:1.5; font-weight:200;}
+.nonMBorder .agree_nomb_txt_box > div.agree_nombPrivacy {margin-bottom: 1rem;}
 .nonMBorder .adress_area {}
 .nonMBorder .adress_area dl {padding:20px 0 0}
 .nonMBorder .adress_area dl div {margin-top:15px;} 
 .nonMBorder .adress_area dl div:first-of-type {margin-top:0}
-.nonMBorder .adress_area dl div dt {float:left;}
-.nonMBorder .adress_area dl div dt span {display:inline-block; width:46px; height:22px; padding:4px 0; margin-top:-4px; margin-right:10px; border:1px solid #ddd; font-size:12px; text-align:center; vertical-align:top;}
+.nonMBorder .adress_area dl div dt {float:left; margin-top:-0.4rem;}
+.nonMBorder .adress_area dl div dt span {display:inline-block; width:46px; height:22px; padding:4px 0; margin-right:10px; border:1px solid #ddd; font-size:12px; text-align:center; vertical-align:top;}
 .nonMBorder .adress_area dl div dd {padding-left:53px; color:#666; font-size:14px;}
+.nonMBorder input[type="text"] {color:#222;}
+.nonMBorder input[type="text"]:read-only {background: #f5f5f5;}
+.nonMBorder .input_wrap .btn_hp_certi {position: absolute; top: 0; right: 0; height: 4.5rem; margin-left: 0; font-size: 1.4rem; font-weight: 300;}
+.nonMBorder .detail_addr {margin-top: -1.1rem;}
 .nonMBorder .btn_addr_sch {position: absolute; right: 0; top: 0; padding: 0; border:none; width: 4.5rem; height: 4.5rem; background: url(/images/mo/ico_search_btn.png) no-repeat center; background-size:1.7rem;}
 
 
@@ -2147,7 +2155,7 @@ main.container .shopping_bag .inner:last-child {padding-bottom: 0;}
 .shopping_bag .goods_dlvr_save {margin-top: 1.8rem; text-align: center;}
 .shopping_bag .goods_dlvr_save a.btn_popup_save {display:inline-block; padding-right:20px; text-align: center; color:#fd4802; font-size:1.1rem; font-weight:200; line-height:14px; text-decoration:underline; background:url('/images/mo/ico_go_save.png') no-repeat 98% 45%; background-size:1.1rem;}
 
-.shopping_bag .od_calc_wrap {font-size: 0; width: 100%;}
+.shopping_bag .od_calc_wrap {position: fixed; left: 0; bottom: 0; z-index: 99; font-size: 0; width: 100%;}
 .shopping_bag .od_calc_wrap button {width: 60%;}
 .shopping_bag .od_calc_wrap button:first-child {width: 40%;}
 
@@ -2185,7 +2193,7 @@ main.container .shopping_bag .inner:last-child {padding-bottom: 0;}
 .shopping_bag .area_order .od_amount_box .btn_link {display:inline-block; padding:0px 13px; height:40px; line-height:38px; color:#222; font-size:14px; font-weight:300; border:1px solid #a7a7a7; box-sizing:border-box;}
 .shopping_bag .info_box .od_exinfo {margin-top: 0.9rem;}
 .shopping_bag .info_box .od_exinfo a {}
-.shopping_bag .info_box .od_exinfo a:after {content:''; border:2px solid transparent; border-left:2px solid #fd4802;} 
+.shopping_bag .info_box .od_exinfo a:after {content:''; display: inline-block; border-top: 0.3rem solid transparent; border-bottom: 0.3rem solid transparent; border-left: 0.3rem solid #fd4802; margin-left: 0.6rem;} 
 .shopping_bag .part_goods .goods_section > .od_calc {margin: 1rem 0 0 3rem; padding:1.3rem 0 0 0; position: relative; line-height: 1; border-top: 1px solid #ddd;}
 
 .od .area_order .od_amount_box .btn_link::after {display:none;}
@@ -2244,23 +2252,27 @@ main.container .shopping_bag .inner:last-child {padding-bottom: 0;}
 .optModifyPop .area_order > div .color {}
 .optModifyPop .select_custom .combo .list {position: static;}
 .optModifyPop .opt_header:after {content:''; display: block; clear:both;}
-.optModifyPop .opt_header {margin-bottom: 1rem;}
+.optModifyPop .opt_header {margin-bottom: 1rem; position: relative;}
 .optModifyPop .opt_header > span {float:left;}
 .optModifyPop .opt_header .color {margin-left: 2rem; color: #666;}
+.optModifyPop .opt_header .form_field {position: absolute; top: 0; right: 0; width:auto;}
+.optModifyPop .area_order .opt_color::before {content: ''; display: block; width:100%;border-top: 1px solid #dddddd;position: relative;top: -1.2rem;left: auto;right: auto;}
 .optModifyPop .area_order .opt_color ul {font-size: 0; width: 100%; white-space: nowrap; overflow-x: auto;}
 .optModifyPop .area_order .opt_color ul li {display: inline-block; margin:0 3px; margin-top:6px}
 .optModifyPop .area_order .opt_color ul li a {display:block; box-sizing:border-box; width:70px; height:105px;}
 .optModifyPop .area_order .opt_color ul li a.on img {border:1px solid #fd4802}
 .optModifyPop .area_order .opt_size {padding-bottom:40px; border-bottom:1px solid #ddd;}
 .optModifyPop .area_order .opt_size .form_field {display:block; width:100%; font-size: 0;}
-.optModifyPop .area_order .opt_size .form_field > div {margin:6px 3px 0;}
-.optModifyPop .area_order .opt_size .form_field > div {float:none; width:auto; display: inline-block;}
+.optModifyPop .area_order .opt_size .form_field > div {float:none; width:20%; display: inline-block; margin:6px 0 0; padding:0 0.78%;}
+.optModifyPop .area_order .opt_size .form_field > div {}
 /* .optModifyPop .area_order .opt_size .form_field > div:nth-child(6n-5) {margin-left:0px;} */
-.optModifyPop .area_order .opt_size .form_field input[type="radio"] + label {display:block; width:50px; height:40px; padding:0; line-height:40px; text-align:center; background:#fff; box-sizing:border-box; border:1px solid #ddd; color:#222; font-weight:200; font-size:14px;}
+.optModifyPop .area_order .opt_size .form_field input[type="radio"] + label {position: relative; display:block; width:100%; height:40px; padding:0; line-height:40px; text-align:center; background:#fff; box-sizing:border-box; border:1px solid #ddd; color:#222; font-weight:200; font-size:14px;}
+.optModifyPop .area_order .opt_size .form_field input[type="radio"] + label span {position:absolute; top:50%; left:0%; width:100%; padding:0 6px; line-height:1.2; transform:translateY(-50%); display:inline-block; text-overflow:ellipsis; overflow:hidden;}
 .optModifyPop .area_order .opt_size .form_field input[type="radio"] + label::before,
 .optModifyPop .area_order .opt_size .form_field input[type="radio"] + label::after {display:none;}
 .optModifyPop .area_order .opt_size .form_field input[type="radio"]:checked + label {border:1px solid #fd4802;}
-.optModifyPop .area_order .opt_size .form_field input[type="radio"]:disabled + label {text-decoration:line-through; background:#f5f5f5; border-color:#f5f5f5; color:#bbb; opacity:1;}
+.optModifyPop .area_order .opt_size .form_field input[type="radio"]:disabled + label {background:#f5f5f5; border-color:#f5f5f5; color:#bbb; opacity:1;}
+.optModifyPop .area_order .opt_size .form_field input[type="radio"]:disabled + label span {text-decoration:line-through;}
 
 .optModifyPop .area_order .opt_select .select_custom .combo .select {height:45px; padding:15px;}
 .optModifyPop .area_order .opt_select .select_custom .combo .list > li {height:45px; padding:15px; font-size:14px; line-height:1;}
@@ -2282,22 +2294,28 @@ main.container .shopping_bag .inner:last-child {padding-bottom: 0;}
 .popup_box .part_goods .od_calc .price {position: static;}
 
 /* popup_다다익선 */
-.moresalePop .area_benefit {padding-top:4px; color:#fd4802; font-size:14px;}
+.moresalePop .area_benefit {padding-top:2.4rem; color:#fd4802; font-size:14px;}
 .moresalePop .area_benefit::after {content:''; clear:both; display:block;}
-.moresalePop .area_benefit .tag {float:left; width:55px; margin-top:-4px;}
+.moresalePop .area_benefit .tag {float:left; width:3.2rem; font-size: 1rem; padding: 0.5rem 0; text-align: center; height:auto;}
 .moresalePop .area_benefit p {float:left;}
-.moresalePop .area_benefit p span {float:left;  position:relative; padding:0px 12px;}
-.moresalePop .area_benefit p span::before {content:''; position:absolute; width:1px; height:14px; left:0px; top:50%; transform:translateY(-50%); background:#ddd;}
+.moresalePop .area_benefit p span {position:relative; display: block; padding:0px 1rem; display: block; line-height: 2.2rem;}
 .moresalePop .area_benefit p span:first-child::before {display:none;}
 .moresalePop .popup_con {padding:0 2rem;}
 .moresalePop .part_goods ul {border-top: 1px solid #eeeeee;}
 .moresalePop .part_goods li {border-bottom: 1px solid #eeeeee; padding:2rem 0;}
 .moresalePop .part_goods li:last-child {border-bottom: 0;}
+.moresalePop .part_goods .sale_price {margin-left: 1rem;}
+.moresalePop .part_goods .sale_percent {margin-left: 1.5rem;}
+.moresalePop .part_goods .od_shoppingbag {margin-top: 1rem;}
 
 /* popup_배송비 SAVE */
+.dlvrSavePop .popup_head {padding-bottom: 0;}
 .dlvrSavePop .popup_con {padding: 0 2rem;}
 .dlvrSavePop .part_goods li {border-bottom: 1px solid #eeeeee; padding:2rem 0;}
 .dlvrSavePop .part_goods li:last-child {border-bottom: 0;}
+.dlvrSavePop .part_goods .sale_price {margin-left: 1rem;}
+.dlvrSavePop .part_goods .sale_percent {margin-left: 1.5rem;}
+.dlvrSavePop .part_goods .od_shoppingbag {margin-top: 1rem;}
 
 /* od_gift_1 */
 main.container .od_gift .inner:last-child {padding-bottom: 0;}
@@ -2365,4 +2383,7 @@ main.container .od_extra .inner:last-child {padding-bottom: 0;}
 .couponSelectPop .list li {border:1px solid #eee; border-bottom: 1px solid transparent;}
 .couponSelectPop .list li:last-child {border-bottom: 1px solid #eee;}
 .couponSelectPop .list li:hover, .couponSelectPop01 .list li:active {border:1px solid #fd4802;}
-.couponSelectPop .list > li[aria-disabled="true"] .dlvr_coupon p {color:#888;}
+.couponSelectPop .list > li[aria-disabled="true"] .dlvr_coupon p {color:#888;}
+
+/* 다음우편번호 api */
+#daumZipcodePop .modal-content {margin-top:5rem;}

src/main/webapp/ux/pc/css/layout.css

@@ -377,9 +377,9 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 #quick_menu .shopingbag .itemsGrp .item_prod .itemPic::after {background: #f5f5f5; opacity:1; z-index: 87;}
 #quick_menu .shopingbag .itemsGrp .item_prod .itemPic .pd_img {z-index: 88;}
 #quick_menu .shopingbag .itemsGrp .item_state.soldout .itemPic:before {content:'SOLD OUT'; position: absolute; top: 50%; left: 50%; font-size: 20px; color:#fff; background: rgba(0,0,0,.5); width: 100%; height: 100%; transform:translate(-50%, -50%); line-height: 420px; z-index: 1; text-align: center;}
-#quick_menu .shopingbag .itemsGrp .item_prod .itemBrand {margin:0px 0 15px; font-size: 14px; font-weight: 300;}
+#quick_menu .shopingbag .itemsGrp .item_prod .itemBrand {margin:0px 0 15px; font-size: 14px; line-height:14px; font-weight: 300;}
 #quick_menu .shopingbag .itemsGrp .item_prod .itemComment {}
-#quick_menu .shopingbag .itemsGrp .item_prod .itemName {margin:0px 0 13px; font-size: 14px; font-weight: 300; lin e-height: 1.5; max-height:44px; overflow:hidden;}
+#quick_menu .shopingbag .itemsGrp .item_prod .itemName {margin:0px 0 13px; font-size: 14px; font-weight: 300; line-height: 1.5; max-height:44px; overflow:hidden;}
 #quick_menu .shopingbag .itemsGrp .item_prod .itemSize {font-size: 12px; margin-bottom: 20px; color: #888;}
 #quick_menu .shopingbag .itemsGrp .item_prod .itemPrice {font-size: 16px; line-height: 1; font-weight: 500; margin:0 0 10px}
 #quick_menu .shopingbag .itemsGrp .item_prod .itemPrice_original {display: inline-block; font-size: 14px; font-weight: 200;}
@@ -3271,7 +3271,7 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 	
 	.modal[class*="reviewdetail_pop"] .detail .review .thumblist {}
 	.modal[class*="reviewdetail_pop"] .detail .review .thumblist ul {height:50px; width:max-content;}
-	.modal[class*="reviewdetail_pop"] .detail .review .thumblist ul::after {content:''; clear:both; display:;}
+	.modal[class*="reviewdetail_pop"] .detail .review .thumblist ul::after {content:''; clear:both;}
 	.modal[class*="reviewdetail_pop"] .detail .review .thumblist li {float:left; margin-right:8px;}
     .modal[class*="reviewdetail_pop"] .detail .review .thumblist li .pic {position:relative; width:50px; height:50px; cursor:pointer; z-index:2;}
 	.modal[class*="reviewdetail_pop"] .detail .review .thumblist li .pic .thumb img,

src/main/webapp/ux/pc/css/main.css

@@ -465,7 +465,7 @@
 .main_recomm .tag_list::after {content:''; clear:both; display:block;}
 .main_recomm .tag_list button {float:left; margin-left:12px; transition:none;}
 .main_recomm .tag_list button:first-of-type {margin-left:0}
-.main_recomm .tag_list button.active {line-height:1; background:#222222; border-color:rgb(245 245 245); position:relative; border-left:1px solid #f5f5f5; border-bottom:1px solid #f5f5f5; border-right:1px solid #f5f5f5; border-top:1px solid #f5f5f5; color:#ffffff; position:relative; top:0; left:0; z-index:9;}
+.main_recomm .tag_list button.active {line-height:1; background:#222222; border-color:rgb(245 245 245); position:relative; border-left:1px solid #f5f5f5; border-bottom:1px solid #f5f5f5; border-right:1px solid #f5f5f5; border-top:1px solid #f5f5f5; color:#ffffff; border: 0; position:relative; top:0; left:0; z-index:9;}
 .main_recomm .tag_list button.active:after{content:""; bottom:0px; right:0px; position:absolute; height:0px; width:0; padding:0px 0px 0px 0px; background:#222222; border-left:0px solid #ffffff; border-top:10px solid #222222; border-right:10px solid #ffffff;}	
 .main_recomm .tagitem {display:none;}
 .main_recomm .tagitem.active {display:block;}

src/main/webapp/ux/pc/js/common-ui.js

@@ -463,7 +463,7 @@ $(document).ready( function() {
 			var navOffsetTop = $('.sticky_nav_list').offset().top - miniGnbH;
 			var navOffsetBottom = navOffsetTop + $('.list_content').outerHeight();
 			var arr = [];
-
+			
 			if (windScroll > navOffsetTop){
 				$('.sticky_nav_list').css('padding-top',stickyTopNavH);
 				$(".sticky_nav").addClass("sticky");
@@ -471,7 +471,7 @@ $(document).ready( function() {
 				$('.sticky_nav_list').css('padding-top','0px');
 				$(".sticky_nav").removeClass("sticky");
 			}
-
+			
 			if(windScroll > navOffsetBottom) {
 				$('.sticky_nav_list').css('padding-top','0px');
 				$(".sticky_nav").removeClass("sticky");
@@ -493,45 +493,6 @@ $(document).ready( function() {
 				}
 			});
 		});
-		/* 스크롤시 효과 */
-		//$(window).scroll(function(){
-		//	var windScroll = $(window).scrollTop();
-		//	var miniGnbH = $('.common_header > .gnb').outerHeight();
-		//	var stickyTopNavH = $('.common_header > .gnb').outerHeight();
-		//	var navOffset = $('.sticky_nav_list').offset().top - miniGnbH;
-		//	if (windScroll > navOffset){
-		//		$('.sticky_nav_list').css('padding-top',stickyTopNavH);
-		//		$(".sticky_nav").addClass("sticky");
-		//	}
-		//	else {
-		//		$('.sticky_nav_list').css('padding-top','0px');
-		//		$(".sticky_nav").removeClass("sticky");
-		//	}
-
-		//	var contentOffset0 = $('.list_content > div').eq(0).offset().top;
-		//	var contentOffset1 = $('.list_content > div').eq(1).offset().top;
-		//	var contentOffset2 = $('.list_content > div').eq(2).offset().top;
-		//	var contentOffset3 = $('.list_content > div').eq(3).offset().top;
-
-		//	var selTab = 0;
-
-		//	$('.sticky_nav li').find('a').removeClass('active');
-
-		//	if (windScroll < contentOffset0) {
-		//		selTab = 0;
-		//	} else if (windScroll < contentOffset1) {
-		//		selTab = 1;
-		//	} else if (windScroll < contentOffset2) {
-		//		selTab = 2;
-		//	} else if (windScroll < contentOffset3) {
-		//		selTab = 3;
-		//	} else {
-		//		selTab = 3;
-		//	}
-
-		//	$('.sticky_nav li').eq(selTab).find('a').addClass('active');
-
-		//});
 
 		/* 상품리스트 sticky_nav_link */
 		$(".sticky_nav li a").on("click", function(){
@@ -547,8 +508,8 @@ $(document).ready( function() {
 	});
 
 
-
-
+	
+	
 	//상품 리스트_필터
 	$('.filter_list ul li').click(function(){ 
 		$(".filter_list ul li").removeClass('on');

src/main/webapp/ux/plugins/gaga/gaga.infinite.scrollSession.js

@@ -0,0 +1,233 @@
+/*
+ * Inifinite Scroll Java Script written by gagamel.
+ *
+ * Copyright (c) 2016 gagamel (nogdoo.com)
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * $Date: 2016-04-28 $
+ *
+ * 사용 예)
+ * 		// HTML 태그는 다음과 같은 구조로 되어 있어야 하며
+ * 		// id 명칭은 infiniteContainer, listBoxOuter, listBox 가 필요하다.
+ * 		<section id="infiniteContainer">
+ * 			<div id="listBoxOuter">
+ * 				<ul id="listBox">
+ * 				</ul>
+ *			</div>
+ *		</section>
+ *
+ * 		// JQUERY History 파일과 인피니트 스크롤 관련 자바스크립트 파일을 import 되어 있어야 한다.
+ * 		<script type="text/javascript" src="/ux/plugins/jquery.history.min.js"></script>
+ * 		<script type="text/javascript" src="/ux/plugins/gaga.infinite.scroll.js"></script>
+ *
+ * 		<script type="text/javascript">
+ * 			// 인피니트 스크롤에 대한 History 정보를 가져오기 위해 함수를 호출한다.
+ *			// History 정보가 없을 경우 fnGetInfiniteScrollDataList 함수가 호출된다.
+ * 			$(function() { gagaInfiniteScroll.getHistory(); });
+ *
+ *			// 인피니트 스크롤 이벤트 발생 시 데이터 가져오기
+ *			var fnGetInfiniteScrollDataList = function(pageNum) {
+ *				// 콜백함수인 gagaInfiniteScroll.jsonToHtml 에서는 fnDrawInfiniteScrollData 함수를 호출한다.
+ *				gagajf.ajaxSubmitForm(document.searchForm, "/goods/list", "json", gagaInfiniteScroll.jsonToHtml);
+ *			}
+ *
+ *			// 인피니트 스크롤 이벤트 발생 시 가져온 데이터를 특정 태그에 append
+ *			// fnDrawInfiniteScrollData(result, pageNum) 함수 구현
+ *			// 		이 함수 내에서의 로직은
+ *			//		1. 가져온 데이터로 HTML 태그를 만든다.
+ *			// 		2. 만든 태그를 append 하는 gagaInfiniteScroll.draw() 함수를 호출
+ *		</script>
+ */
+
+var gagaInfiniteScroll = {
+	pageStatus : {
+		  pageNum : []      // [0,1,2...] 로드된 페이지 (Array)
+		, loadPage : 0      // 로드할 페이지
+		, loadAlign : 'not' // 로드 상태(prev, next, not)
+		, historyScroll : 0 //
+		, nowPage : null    // 현재 페이지
+		, pageUrl : {       // page url
+		}
+		, sortGb : ''
+		, sortGbNm : ''
+		, filterHtml : ''
+		, filterStatHtml : ''
+		, totalCount : ''
+	},
+	obj : {
+		  $ajaxBoxOuter : $('#listBoxOuter')
+		, $ajaxBox : $('#listBox')
+		, $window : $(window)
+		, $loadingBar : '<div style="width: 100%; padding-top: 50px; text-align: center;" id="loadingBar"><img src="/ux/plugins/gaga/loader.gif" style="width:25px; height:25px;"/></div>'
+//		, $loadingBar : '<div style="width: 100%; padding-top: 50px; text-align: center;" id="loadingBar"><img src="/images/hsmob/common/loading_bar_01.gif" width="24px" height=" 22px"/></div>'
+	},
+	scrollCheck : function() {
+		var obj = this.obj, stat = this.pageStatus;
+
+		if (obj.$window.scrollTop() >= obj.$ajaxBox.offset().top + obj.$ajaxBox.height() - obj.$window.height()) { // 더보기
+			if (stat.loadAlign == 'not') {
+				var pageLen = this.pageStatus.pageNum.length - 1;
+				var nextPageNum = this.pageStatus.pageNum[pageLen] + 1;
+				this.pageStatus.pageNum.push(nextPageNum);
+				this.pageStatus.loadPage = nextPageNum;
+				stat.loadAlign = 'next';
+				this.getDataList();
+			};
+		}
+	},
+	getDataList : function() {
+		/*if (this.pageStatus.loadAlign == 'prev') {
+			this.obj.$ajaxBoxOuter.prepend($(this.obj.$loadingBar));
+		} else if (this.pageStatus.loadAlign == 'next') {
+			this.obj.$ajaxBoxOuter.append($(this.obj.$loadingBar));
+		};*/
+
+		$(".wrap-loading").removeClass('display-none');
+
+		// 인피니트 스크롤 이벤트에서 호출될 함수(데이터 가져오기 등)
+		// fnGetInfiniteScrollDataList 함수는 개발단에서 구현해야 한다.
+		fnGetInfiniteScrollDataList(this.pageStatus.loadPage);
+	},
+	getHistory : function() {
+		var historyData = sessionStorage.getItem(document.location.href);
+		if(historyData!=null){
+			historyData = JSON.parse(historyData);
+		}else{
+			historyData = {};
+		}
+
+		if (historyData.pageNum === undefined || historyData.pageNum === '' || historyData.htm === undefined || historyData.htm == '') {
+			this.pageStatus.loadPage = 0;
+			this.pageStatus.pageNum[0] = 0;
+			this.pageStatus.loadAlign = 'next';
+			this.pageStatus.historyScroll = 0;
+
+			this.getDataList();
+		} else {
+			this.pageStatus.loadPage = historyData.pageNum;
+			this.pageStatus.pageNum[0] = historyData.pageNum;
+			this.pageStatus.historyScroll = historyData.dataIndex;
+			this.pageStatus.loadAlign = 'next';
+			this.pageStatus.sortGb = historyData.sortGb;
+			this.pageStatus.sortGbNm = historyData.sortGbNm;
+			this.pageStatus.filterHtml = historyData.filterHtml;
+			this.pageStatus.filterStatHtml = historyData.filterStatHtml;
+			this.pageStatus.totalCount = historyData.totalCount;
+
+			gagaInfiniteScroll.draw(historyData.htm);
+		};
+
+		$(window).on('scroll', function() {
+			gagaInfiniteScroll.scrollCheck();
+		});
+	},
+	draw : function(htm, scrollTop, containerHeight) {
+		if (htm == 'not') {
+			$(".wrap-loading").addClass('display-none');
+			this.pageStatus.loadAlign = 'top';
+		} else {
+			var startH = $('#infiniteContainer').height();
+			var $addHtm = $(htm);
+			var $imgs = $addHtm.find('img');
+			var loadCheck = 0;
+			var len = $imgs.length;
+
+			if (scrollTop && containerHeight) {
+			} else {
+			}
+
+			$addHtm.find('img.lazy').lazyload({root: null,
+						rootMargin: "100px",
+						threshold: 0});
+
+			$.each($imgs, function(index) {
+				$imgs.eq(index).on('load',function() {
+					loadCheck++;
+					imgLpadComp();
+				});
+			});
+
+			var imgLpadComp = function() {
+				gagaInfiniteScroll.pushHistory(
+						  gagaInfiniteScroll.pageStatus.nowPage
+						, $(window).scrollTop()
+						, $('#infiniteContainer').height()
+						, gagaInfiniteScroll.pageStatus.loadPage
+						, 0
+						, gagaInfiniteScroll.obj.$ajaxBox.html());
+				if (scrollTop && containerHeight) {
+					gagaInfiniteScroll.obj.$window.scrollTop.scrollTop(0).scrollTop(scrollTop);
+				} else {
+					gagaInfiniteScroll.obj.$window.scrollTop(gagaInfiniteScroll.obj.$window.scrollTop() + 1);
+				}
+			};
+
+			$(".wrap-loading").addClass('display-none');
+
+			// Append HTML
+			this.obj.$ajaxBox.append($addHtm);
+
+			if (scrollTop && containerHeight) {
+				gagaInfiniteScroll.obj.$window.scrollTop.scrollTop(0).scrollTop(scrollTop);
+			} else {
+				$(window).scrollTop($(window).scrollTop() + 1);
+			}
+
+			this.pageStatus.loadAlign = 'not';
+		}
+	},
+	pushHistory : function(page, sScrollTop, sHeight, sPageNum, sDataIndex, sHtml) {
+		var historyData = {
+				state: page
+				, scroll: sScrollTop
+				, height: sHeight
+				, pageUrl: gagaInfiniteScroll.pageStatus.pageUrl
+				, name: gagaInfiniteScroll.pageStatus.nowPage
+				, pageNum : sPageNum
+				, dataIndex : sDataIndex
+				, htm : sHtml
+				, sortGb : gagaInfiniteScroll.pageStatus.sortGb
+				, sortGbNm : gagaInfiniteScroll.pageStatus.sortGbNm
+				, filterHtml : gagaInfiniteScroll.pageStatus.filterHtml
+				, filterStatHtml : gagaInfiniteScroll.pageStatus.filterStatHtml
+				, totalCount : gagaInfiniteScroll.pageStatus.totalCount
+		};
+		historyData = JSON.stringify(historyData);
+		sessionStorage.setItem(document.location.href, historyData);
+
+	},
+	pushLinkHistory : function(pageNum, dataIndex, obj) { // 링크에서 사용
+		var $pageNum = (pageNum || pageNum == 0) ? pageNum : '';
+		var $dataIndex = (dataIndex || dataIndex == 0) ? dataIndex : '';
+		var $html = (obj) ? $(obj).parents('#listBox').html() : '';
+
+		var historyData = {
+					state : gagaInfiniteScroll.pageStatus.nowPage
+					, scroll : $(window).scrollTop()
+					, height : $('#infiniteContainer').height()
+					, pageUrl : gagaInfiniteScroll.pageStatus.pageUrl
+					, name : gagaInfiniteScroll.pageStatus.nowPage
+					, pageNum : $pageNum
+					, dataIndex : $dataIndex
+					, htm : $html
+					, sortGb : gagaInfiniteScroll.pageStatus.sortGb
+					, sortGbNm : gagaInfiniteScroll.pageStatus.sortGbNm
+					, filterHtml : gagaInfiniteScroll.pageStatus.filterHtml
+					, filterStatHtml : gagaInfiniteScroll.pageStatus.filterStatHtml
+					, totalCount : gagaInfiniteScroll.pageStatus.totalCount
+		};
+		historyData = JSON.stringify(historyData);
+		sessionStorage.setItem(document.location.href, historyData);
+
+		return false;
+	},
+	jsonToHtml : function(result) {
+		// Data 가져온 후 실행될 함수
+		// fnDrawInfiniteScrollData 함수는 개발단에서 구현해야 한다.
+		if (result.dataList == "not") // data가 더 이상 없으면
+			fnDrawInfiniteScrollData('not', result.CURRENT_PAGE - 1);
+		else
+			fnDrawInfiniteScrollData(result, result.CURRENT_PAGE - 1);
+	}
+};

src/main/webapp/ux/style24_link.js

@@ -88,6 +88,8 @@ const _PAGE_SOCIAL_MAIN = _frontUrl + "/social/main/form";						// 소설(핫딜
 //== 이벤트 ==/
 const _PAGE_EVENT_MAIN = _frontUrl + "/planning/event/main/form"; 					// 이벤트 메인
 const _PAGE_EVENT_POLL = _frontUrl + "/planning/event/poll/form"; 					// 이벤트 > 설문조사
+const _PAGE_CUSTOMER_GRADE_BENEFIT = _frontUrl + "/planning/event/custgrade/benefit/form"; // 이벤트 회원등급혜택
+
 
 //== 고객센터 ==/
 const _PAGE_FAQ = _frontUrl + "/callcenter/faq/form";									// 고객센터 > FAQ
@@ -228,13 +230,13 @@ var cfnOpenIpinCertify = function (redirectUrl) {
  */
 function cfnAddCart(cartList) {
 	let jsonData = JSON.stringify(cartList);
-
+	
 	$.ajax( {
 		type: "POST",
 		url : '/cart/save',
 		data : jsonData,
 		contentType: 'application/json',
-		dataType : 'text',
+		dataType : 'json',
 		success : function(result) {
 			if(cartList[0].cartGb == "C") {
 				mcxDialog.confirm("<div class="+"dialog-title"+">"+"상품이 쇼핑백에 추가되었습니다.</div><p>쇼핑백으로 이동하시겠습니까?</p>", {
@@ -244,8 +246,17 @@ function cfnAddCart(cartList) {
 						location.href='/cart/list/form'; 	//내 쇼핑백 이동url
 					}
 				});
-			}else{
-				location.href='/cart/list/form'; 
+			} else if (cartList[0].cartGb == "O"){
+				let orderHtml = "";
+				for(let i = 0 ; i < result.length ; i++) {
+					orderHtml += '<input type="hidden" name="cartSqArr" value="' + result[i].cartSq + '" />';
+				}
+				$("#directOrderForm").html(orderHtml);
+				$("#directOrderForm").submit();
+				
+				//location.href='/cart/list/form';
+			} else {
+				mcxDialog.alert("쇼핑백담기, 바로구매가 아닌 상태입니다. 해당 요청이 맞다면 새로고침 후 다시시도해주세요.");
 			}
 		}
 	});