마이페이지 반품 화면 임시 커밋

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

@@ -357,15 +357,11 @@ public class TsfMypageController extends TsfBaseController {
 
 		mav.addObject("customerInfo", customer);
 
-		// 주문목록 조회
-		Collection<GagaMap> orderList = orderService.getOrderListForMypage(order);
-
-		if (orderList.size() == 0) {
-			mav.setViewName("redirect:/mypage/order/list/form");
-			return mav;
-		}
-
-		mav.addObject("orderList", orderList);
+		// 반품 가능 리스트 조회
+		GagaMap map = orderChangeService.getReturnListForMypage(order);
+		Order oneData = (Order) map.get("oneData");
+		mav.addObject("exchangeList", map);
+		mav.addObject("oneData", oneData);
 
 		// 주문 배송지 정보 조회
 		mav.addObject("deliveryAddrInfo", orderService.getOrderDeliveryAddrInfo(order));
@@ -378,6 +374,36 @@ public class TsfMypageController extends TsfBaseController {
 		return mav;
 	}
 
+	/**
+	 * 마이페이지 교환 옵션 변경 팝업
+	 *
+	 * @param Order
+	 * @return ModelAndView
+	 * @author card007
+	 * @since 2021. 03. 30
+	 */
+	@PostMapping("/change/option/popup/form")
+	@ResponseBody
+	public ModelAndView changeOptionPopupForm(Order order) {
+		ModelAndView mav = new ModelAndView();
+
+		// custNo 설정
+		if (TsfSession.isLogin()) {
+			order.setCustNo(TsfSession.getInfo().getCustNo());
+		} else {
+			order.setCustNo(0);
+		}
+
+		// 교환 옵션 정보 조회
+		
+
+		// mav.addObject("exchangeOptionInfo", );
+		mav.setViewName(super.getDeviceViewName("mypage/ChangeOptionPopupForm"));
+
+		return mav;
+	}
+	
+
 	/**
 	 * 마이페이지 등급쿠폰 다운 처리
 	 *

src/main/webapp/WEB-INF/views/web/common/layout/MypageLayoutWeb.html

@@ -36,8 +36,60 @@
 <!-- Footer -->
 <footer id="footer" th:replace="~{web/common/fragments/FooterWeb :: footer}"></footer>
 
+<!---------------------------------------- 팝업영역 -------------------------------->
+<!-- 배송지변경 팝업 -->
+<div class="modal fade 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>
+	<a href="#close-modal" rel="modal:close" id="adrsChangePop_close" class="close-modal">Close</a>
+</div>
+<!-- //배송지변경 팝업 -->
+<!-- 배송지추가 팝업 -->
+<div class="modal fade 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="adrsAddPop_close" class="close-modal">Close</a>
+</div>
+<!-- //배송지추가 팝업 -->
+<!-- 배송지수정 팝업 -->
+<div class="modal fade 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="adrsModifyPop_close" class="close-modal">Close</a>
+</div>
+<!-- //배송지수정 팝업 -->
+<!-- 배송요청사항수정 팝업 -->
+<div class="modal fade rqstModify_pop" id="rqstModifyPop" tabindex="-1" role="dialog" aria-labelledby="rqstModifyLabel" aria-hidden="true">
+	<div class="modal-dialog" role="document">
+		<div class="modal-content">
+			<!-- 배송요청사항수정 팝업 내용 -->
+		</div>
+	</div>
+	<a href="#close-modal" rel="modal:close" id="rqstModifyPop_close" class="close-modal">Close</a>
+</div>
+<!-- //배송요청사항수정 팝업 -->
+<!--교환상품 옵션변경 팝업 -->
+<div class="modal fade exchange_pop" id="exchangePop" tabindex="-1" role="dialog" aria-labelledby="exchangeLabel" aria-hidden="true">
+	<div class="modal-dialog" role="document">
+		<div class="modal-content">
+			<!--교환상품 옵션변경 팝업 내용 -->
+		</div>
+	</div>
+	<a href="#close-modal" rel="modal:close" id="exchangePop_close" class="close-modal">Close</a>
+</div>
+<!-- //교환상품 옵션변경 팝업 -->
+
 <th:block th:replace="~{web/common/fragments/ScriptsWeb :: scripts}"></th:block>
-<script th:src="@{'/ux/pc/js/mypage.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/mypage.js"></script>
+<script th:src="@{'/biz/mypage.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/mypage.js"></script>
 
 <script th:inline="javascript">
 /*<![CDATA[*/

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

@@ -0,0 +1,205 @@
+<!-- 배송지변경 팝업 -->
+<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>
+						<input id="chk_exchange_item1" name="chk_exchange_item" type="checkbox" checked=""><label for="chk_exchange_item1"><span>슬림핏 체크 네이비컬러 스탠드카라 셋업수트 자켓 / Black</span></label>
+					</div>
+					<div>
+						<input id="chk_exchange_item2" name="chk_exchange_item" type="checkbox"><label for="chk_exchange_item2"><span>베이직 셔츠 / Green</span> </label>
+					</div>
+					<div>
+						<input id="chk_exchange_item3" name="chk_exchange_item" type="checkbox"><label for="chk_exchange_item3"><span>체크 베이직 셔츠 / Green / M</span></label>
+					</div>
+				</div>
+			</div>
+			<div class="modify_option_area">
+				<div class="modify_box">
+					<div class="name_blk">
+						슬림핏 체크 네이비컬러 스탠드카라 셋업수트 자켓 / Black
+					</div>
+					<div class="select_blk">
+						<!-- 옵션교환 라디오 형태 -->
+						<div class="sel_radio">
+							<div class="form_field">
+								<div>
+									<input type="radio" name="rdi-modifysize1" id="rdi-modifysize11" value="" checked="">
+									<label for="rdi-modifysize11"><span>90</span></label>
+								</div>
+								<div>
+									<input type="radio" name="rdi-modifysize1" id="rdi-modifysize12" value="" disabled="">
+									<label for="rdi-modifysize12"><span>95</span></label>
+								</div>
+								<div>
+									<input type="radio" name="rdi-modifysize1" id="rdi-modifysize13" value="">
+									<label for="rdi-modifysize13"><span>100</span></label>
+								</div>
+								<div>
+									<input type="radio" name="rdi-modifysize1" id="rdi-modifysize14" value="">
+									<label for="rdi-modifysize14"><span>105</span></label>
+								</div>
+								<div>
+									<input type="radio" name="rdi-modifysize1" id="rdi-modifysize15" value="">
+									<label for="rdi-modifysize15"><span>110</span></label>
+								</div>
+								<div>
+									<input type="radio" name="rdi-modifysize1" id="rdi-modifysize16" value="">
+									<label for="rdi-modifysize16"><span>115</span></label>
+								</div>
+								<div>
+									<input type="radio" name="rdi-modifysize1" id="rdi-modifysize17" value="">
+									<label for="rdi-modifysize17"><span>free</span></label>
+								</div>
+								<div>
+									<input type="radio" name="rdi-modifysize1" id="rdi-modifysize18" value="">
+									<label for="rdi-modifysize18"><span>size1</span></label>
+								</div>
+								<div>
+									<input type="radio" name="rdi-modifysize1" id="rdi-modifysize19" value="">
+									<label for="rdi-modifysize19"><span>size2</span></label>
+								</div>
+							</div>
+						</div>
+						<!-- //옵션교환 라디오 형태 -->
+						<!-- 옵션교환 셀렉트박스 형태 -->
+						<div class="sel_select">
+							<div class="form_field">
+								<div class="select_custom exchange_option1">
+									<div class="combo">
+										<div class="select">옵션 선택</div>
+										<ul class="list">
+											<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가  -->
+											<li class="selected">옵션 선택</li>
+											<li>상품옵션01</li>
+											<li>상품옵션02</li>
+											<li>상품옵션03</li>
+											<li aria-disabled="true">상품옵션04</li>
+											<li>상품옵션05</li>
+											<li aria-disabled="true" data-soldout="true">상품옵션06</li>
+										</ul>
+									</div>
+								</div>
+							</div>
+						</div>
+						<!-- //옵션교환 셀렉트박스 형태 -->
+					</div>
+					<div class="allcheck_blk">
+						<div class="form_field">
+							<div>
+								<input id="chk_exchange_all1" name="chk_exchange_all1" type="checkbox" checked=""><label for="chk_exchange_all1"><span>선택 옵션으로 전체 교환</span></label>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="modify_box">
+					<div class="name_blk">
+						베이직 셔츠 / Green
+					</div>
+					<div class="select_blk">
+						<!-- 옵션교환 라디오 형태 -->
+						<div class="sel_radio">
+							<div class="form_field">
+								<div>
+									<input type="radio" name="rdi-modifysize2" id="rdi-modifysize21" value="" checked="">
+									<label for="rdi-modifysize21"><span>90</span></label>
+								</div>
+								<div>
+									<input type="radio" name="rdi-modifysize2" id="rdi-modifysize22" value="" disabled="">
+									<label for="rdi-modifysize22"><span>95</span></label>
+								</div>
+								<div>
+									<input type="radio" name="rdi-modifysize2" id="rdi-modifysize23" value="">
+									<label for="rdi-modifysize23"><span>100</span></label>
+								</div>
+								<div>
+									<input type="radio" name="rdi-modifysize2" id="rdi-modifysize24" value="">
+									<label for="rdi-modifysize24"><span>105</span></label>
+								</div>
+								<div>
+									<input type="radio" name="rdi-modifysize2" id="rdi-modifysize25" value="">
+									<label for="rdi-modifysize25"><span>110</span></label>
+								</div>
+								<div>
+									<input type="radio" name="rdi-modifysize2" id="rdi-modifysize26" value="">
+									<label for="rdi-modifysize26"><span>115</span></label>
+								</div>
+								<div>
+									<input type="radio" name="rdi-modifysize2" id="rdi-modifysize27" value="">
+									<label for="rdi-modifysize27"><span>free</span></label>
+								</div>
+								<div>
+									<input type="radio" name="rdi-modifysize2" id="rdi-modifysize28" value="">
+									<label for="rdi-modifysize28"><span>size1</span></label>
+								</div>
+								<div>
+									<input type="radio" name="rdi-modifysize2" id="rdi-modifysize29" value="">
+									<label for="rdi-modifysize29"><span>size2</span></label>
+								</div>
+							</div>
+						</div>
+						<!-- //옵션교환 라디오 형태 -->
+					</div>
+					<div class="allcheck_blk">
+						<div class="form_field">
+							<div>
+								<input id="chk_exchange_all2" name="chk_exchange_all2" type="checkbox" checked=""><label for="chk_exchange_all2"><span>선택 옵션으로 전체 교환</span></label>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="modify_box">
+					<div class="name_blk">
+						체크 베이직 셔츠 / Green
+					</div>
+					<div class="select_blk">
+						<!-- 옵션교환 셀렉트박스 형태 -->
+						<div class="sel_select">
+							<div class="form_field">
+								<div class="select_custom exchange_option2">
+									<div class="combo">
+										<div class="select">옵션 선택</div>
+										<ul class="list">
+											<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가  -->
+											<li class="selected">옵션 선택</li>
+											<li>상품옵션01</li>
+											<li>상품옵션02</li>
+											<li>상품옵션03</li>
+											<li aria-disabled="true">상품옵션04</li>
+											<li>상품옵션05</li>
+											<li aria-disabled="true" data-soldout="true">상품옵션06</li>
+										</ul>
+									</div>
+								</div>
+							</div>
+						</div>
+						<!-- //옵션교환 셀렉트박스 형태 -->
+					</div>
+					<div class="allcheck_blk">
+						<div class="form_field">
+							<div>
+								<input id="chk_exchange_all3" name="chk_exchange_all3" type="checkbox" checked=""><label for="chk_exchange_all3"><span>선택 옵션으로 전체 교환</span></label>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</form>
+	</div>
+</div>
+<div class="modal-footer">
+	<button type="button" id="" class="btn btn_dark"><span>옵션 저장</span></button>
+</div>
+<script th:inline="javascript">
+//컨텐츠 호출
+$(document).ready( function() {
+	var exchange_option_selecter1 = new sCombo('#exchangePop .select_custom.exchange_option1');
+	var exchange_option_selecter2 = new sCombo('#exchangePop .select_custom.exchange_option2');
+});
+</script>

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

@@ -78,8 +78,8 @@
 												<span class="count"><em th:text="${cancel.ordQty - cancel.cnclRtnQty}"></em>개</span>
 											</p>
 											<p>
-												<span class="price_org" th:if="${(cancel.listPrice * (cancel.ordQty - cancel.cnclRtnQty)) > (cancel.ordAmt - cancel.cnclRtnAmt)}"><em th:text="${#numbers.formatInteger(cancel.listPrice * (cancel.ordQty - cancel.cnclRtnQty), 1, 'COMMA')}"></em>원</span>
-												<span class="price_sale"><em th:text="${#numbers.formatInteger(cancel.ordAmt - cancel.cnclRtnAmt, 1, 'COMMA')}"></em>원</span>
+												<span class="price_org" th:if="${(cancel.ordAmt - cancel.cnclRtnAmt - cancel.cpn1DcAmt) > (cancel.realOrdAmt + cancel.pntDcAmt + cancel.gfcdUseAmt)}"><em th:text="${#numbers.formatInteger(cancel.ordAmt - cancel.cnclRtnAmt - cancel.cpn1DcAmt, 1, 'COMMA')}"></em>원</span>
+												<span class="price_sale"><em th:text="${#numbers.formatInteger(cancel.realOrdAmt + cancel.pntDcAmt + cancel.gfcdUseAmt, 1, 'COMMA')}"></em>원</span>
 											</p>
 										</div>
 									</div>

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

@@ -19,229 +19,270 @@
 <body>
 
 <th:block layout:fragment="content">
-	<div class="my_cont">
-		<div class="sec_head">
-			<h3>교환 신청</h3>
-			<div class="od_detail">
-				(주문번호 : <span class="num" th:text="${ordNo}"></span>)
+	<div class="content myOrderView"> <!-- 페이지특정 클래스 = myOrderView -->
+		<div class="cont_body">
+			<!-- CONT-BODY -->
+			<div class="lnb">
+				<div class="lnb_tit">
+					<h2>마이페이지</h2>
+				</div>
+				<div class="lnb_list">
+					<ul id="mypageLnbList"></ul>
+				</div>
 			</div>
-		</div>
-		<div class="sec_body mypage_body">
-			<div class="order_list return_list">
-				<section class="order_row">
-					<th:block th:if="${orderList}" th:each="oneData, status : ${orderList}">
-						<div class="part_deliver">
-							<div class="tbl_tit">
-								<!-- 주문일/선물일 설정 -->
-								<span class="start_t" th:unless="${oneData.giftPackYn == 'Y'}">주문일</span>
-								<span class="gift_t" th:if="${oneData.giftPackYn == 'Y'}">선물일</span>
-								<!-- //주문일/선물일 설정 -->
-
-								<span class="order_date" th:text="${oneData.ordDt}"></span>
-
-								<!-- 배송구분 설정 -->
-								<span class="order_label02" th:if="${oneData.shotDelv}">총알배송</span>
-								<span class="order_label01" th:if="${oneData.selfMall}">STYLE24 일반배송</span>
-								<span class="order_label01" th:if="${oneData.supplyMall}">업체직배송</span>
-								<!-- //배송구분 설정 -->
-								<a href="javascript:void(0)" class="detail_btn" th:attr="ordNo=${oneData.ordNo}" onclick="fnGoToOrderDetail(this)">주문상세보기</a>
-							</div>
-							<th:block th:if="${oneData.orderList}" th:each="order, status : ${oneData.orderList}">
-								<div class="tbl type2">
-									<table id="exchangeList">
-										<colgroup>
-											<col width="1020">
-											<col width="180">
-										</colgroup>
-										<tbody>
-										<th:block th:if="${order.ordDtlList}" th:each="ordDtl, status : ${order.ordDtlList}" th:with="imageUrl=${@environment.getProperty('upload.goods.view')}">
-											<input type="hidden" name="ordDtlNo" th:value="${ordDtl.ordDtlNo}"/>
-											<input type="hidden" name="ordDtlStat" th:value="${ordDtl.ordDtlStat}"/>
-											<input type="hidden" name="reviewSq" th:value="${ordDtl.reviewSq}"/>
-											<tr>
-												<td>
-													<div class="info_item">
-														<div class="thumb_box">
-															<a href="">
-																<img th:src="${imageUrl + '/' + ordDtl.sysImgNm}" width="100%" alt="">
-															</a>
-														</div>
-														<div class="info_box">
-															<p class="od_name">
-																<a href="">
-																	<span class="brand" th:text="${ordDtl.brandNm}"></span>
-																	<span class="name" th:text="${ordDtl.goodsNm}"></span>
-																</a>
-															</p>
-															<p class="od_opt">
-																<span class="option"><em th:text="${ordDtl.optCd1}"></em><em th:text="${ordDtl.optCd2}"></em></span>
-																<span class="count">수량 <em th:text="${ordDtl.ordQty}"></em>개</span>
-															</p>
-														</div>
-														<div class="info_calc">
-															<p class="price">
-																<span class="selling_price" th:text="|${#numbers.formatInteger(ordDtl.ordAmt, 1, 'COMMA')}원|"></span>
-															</p>
-															<p class="point"><span th:text="${#numbers.formatInteger(ordDtl.savePntAmt, 1, 'COMMA')}"></span>p</p>
+			<div class="cont">
+				<div class="sec_head">
+					<h3 class="subH1">교환 신청</h3>
+					<span class="order_number">주문번호&nbsp;:&nbsp;<em th:text="${oneData.ordNo}"></em></span>
+				</div>
+				<div class="sec_body">
+					<div class="part_goods">
+						<div class="goods_head">
+							<p th:unless="${oneData.giftPackYn == 'Y'}">주문일 <span th:text="${oneData.ordDt}"></span></p>
+							<p th:if="${oneData.giftPackYn == 'Y'}">선물일 <span th:text="${oneData.ordDt}"></span></p>
+						</div>
+						<div class="goods_cont">
+							<th:block th:if="${exchangeList.returnList}" th:each="exchange, status : ${exchangeList.returnList}" th:with="imageUrl=${@environment.getProperty('upload.goods.view')}">
+							<!-- 주문상품 -->
+							<div class="goods_info">
+								<div class="order_desc">
+									<div class="goods_box">
+										<div class="gd_item">
+											<a href="javascript:void(0)" th:attr="goodsCd=${exchange.goodsCd}" onclick="fnGoToGoodsDetail(this)">
+												<span class="thumb">
+													<img th:src="${imageUrl + '/' + exchange.sysImgNm}" width="100%" alt="">
+												</span>
+												<p>
+													<span class="brand" th:text="${exchange.brandNm}"></span>
+													<span class="tag primary" th:if="${exchange.shotDelvYn == 'Y'}">총알배송</span>
+													<span class="tag" th:if="${exchange.shotDelvYn == 'N' and exchange.selfGoodsYn == 'Y'}">STYLE24 일반배송</span>
+													<span class="tag" th:if="${exchange.selfGoodsYn == 'N'}">업체직배송</span>
+												</p>
+												<p>
+													<span class="name" th:text="${exchange.goodsNm}"></span>
+												</p>
+											</a>
+										</div>
+										<div class="gd_opt">
+											<div class="option_wrap">
+												<span class="title sr-only">주문 옵션</span>
+												<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>
+										<div class="gd_calc">
+											<p>
+												<span class="count"><em th:text="${exchange.ordQty - exchange.cnclRtnQty}"></em>개</span>
+											</p>
+											<p>
+												<span class="price_org" th:if="${(exchange.ordAmt - exchange.cnclRtnAmt - exchange.cpn1DcAmt) > (exchange.realOrdAmt + exchange.pntDcAmt + exchange.gfcdUseAmt)}"><em th:text="${#numbers.formatInteger(exchange.ordAmt - exchange.cnclRtnAmt - exchange.cpn1DcAmt, 1, 'COMMA')}"></em>원</span>
+												<span class="price_sale"><em th:text="${#numbers.formatInteger(exchange.realOrdAmt + exchange.pntDcAmt + exchange.gfcdUseAmt, 1, 'COMMA')}"></em>원</span>
+											</p>
+										</div>
+									</div>
+									<div class="button_box">
+										<div class="count_modify">
+											<span class="txt">수량</span>
+											<form class="form_wrap">
+												<div class="form_field">
+													<div class="select_custom select_count">
+														<div class="combo">
+															<input type="hidden" name="chgQty" value="0" th:attr="ordDtlNo=${exchange.ordDtlNo}, ordCanChgQty=${exchange.ordCanChgQty}"/>
+															<div class="select">선택</div>
+															<ul class="list">
+																<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" 추가  -->
+																<li class="selected" qty="0" onclick="fnChangeExchangeQty(this);">선택</li>
+																<li th:if="${exchange.ordCanChgQty > 0}" th:each="num : ${#numbers.sequence(1,exchange.ordCanChgQty)}" th:attr="qty=${num}" th:text="${num}" onclick="fnChangeExchangeQty(this);"></li>
+															</ul>
 														</div>
 													</div>
-												</td>
-												<td class="cnt_sel">
-													<span class="cnt_t">수량</span>
-													<select class="select_dress" name="chgQty">
-														<option value="">선택</option>
-														<option th:if="${ordDtl.ordQty > 0}" th:each="num : ${#numbers.sequence(1,ordDtl.ordQty)}" th:value="${num}" th:text="${num}"></option>
-													</select>
-													<button class="btn btn_dark btn_sm" th:attr="ordDtlNo=${ordDtl.ordDtlNo}" onclick="fnChangeOption(this);">옵션 변경</button>
-												</td>
-											</tr>
-										</th:block>
-										</tbody>
-									</table>
+												</div>
+											</form>
+											<button type="button" id="btn_exchange_pop" class="btn btn_dark btn_sm" th:attr="ordNo=${exchange.ordNo}, ordDtlNo=${exchange.ordDtlNo}" onclick="fnChangeOption(this)"><span>교환 옵션 변경</span></button>
+										</div>
+									</div>
+								</div>
+								<div class="order_text">
+									<p>교환하실 상품의 수량 및 옵션을 선택하신 후 교환 신청을 하실 수 있습니다.</p>
 								</div>
-							</th:block>
-							<div class="order_confirm">
-								<p class="cf_txt cf_desc c_primary">교환하실 상품의 수량 및 옵션을 선택하신 후 교환 신청을 하실 수 있습니다.</p>
 							</div>
+							<!-- //주문상품 -->
+							</th:block>
 						</div>
-					</th:block>
-				</section>
-				<section class="order_row">
-					<div class="tbl_tit">
-						<h3 class="subH3">교환 사유</h3>
 					</div>
+					<h4 class="subH3">교환 사유</h4>
 					<div class="tbl type1">
 						<table>
-							<colgroup>
-								<col width="*">
-							</colgroup>
 							<tbody>
-							<tr>
-								<td>
-									<select id="mounth" name="chgReason" onchange="fnChangeReason(this);">
-										<option value="">교환 사유를 선택하세요</option>
-										<option th:if="${exchangeReason}" th:each="oneData, status : ${exchangeReason}" th:value="${oneData.cd}" th:text="${oneData.cdNm}"></option>
-									</select>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<textarea class="doc_exchange" name="chgMemo" id="chgMemo" placeholder="자세한 사유를 입력해주세요." onkeyup="cfnGetTextLength(this, 200, $('#exchange_cnt'));"></textarea>
-									<p class="txt_cnt"><span id="exchange_cnt" class="c_primary">0</span>/200</p>
-								</td>
-							</tr>
+								<tr>
+									<td>
+										<div class="form_field">
+											<div class="select_custom select_reason">
+												<div class="combo">
+													<input type="hidden" name="chgReason"/>
+													<div class="select">교환 사유를 선택하세요.</div>
+													<ul class="list">
+														<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" 추가  -->
+														<li class="selected">교환 사유를 선택하세요.</li>
+														<li th:if="${exchangeReason}" th:each="oneData, status : ${exchangeReason}" th:attr="chgReason=${oneData.cd}" th:text="${oneData.cdNm}" onclick="fnChangeExchangeReason(this);"></li>
+													</ul>
+												</div>
+											</div>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<div class="form_field">
+											<div class="input_wrap">
+												<textarea class="doc_reason" name="chgMemo" id="chgMemo" cols="30" rows="10" placeholder="자세한 사유를 입력해주세요." style="resize: none;"></textarea>
+												<p class="txt_cnt"><span id="reason_cnt" class="c_primary">0</span>/200</p>
+											</div>
+										</div>
+									</td>
+								</tr>
 							</tbody>
 						</table>
 					</div>
-				</section>
-				<section class="order_row" id="chgerLocation">
-					<div class="order_tit">
-						<h3 class="subH3">상품 회수지</h3>
-						<span class="del_t">택배사에서 반품 상품을 직접 회수할 장소 선택</span>
-						<button type="button" class="btn_popup" onclick="fnChangeDeliveryAddr('chger');"><span>회수지 선택</span></button>
-					</div>
+					<h4 class="subH3">반품 방식 선택</h4>
 					<div class="tbl type1">
 						<table>
-							<colgroup>
-								<col width="200">
-								<col width="*">
-							</colgroup>
 							<tbody>
 							<tr>
-								<th>성명</th>
-								<td id="chgerNm" th:text="${deliveryAddrInfo.recipNm}"></td>
-								<input type="hidden" name="chgerNm" th:value="${deliveryAddrInfo.recipNm}">
-							</tr>
-							<tr>
-								<th>연락처</th>
-								<td id="chgerPhnno" th:text="${deliveryAddrInfo.recipPhnno}"></td>
-								<input type="hidden" name="chgerPhnno" th:value="${deliveryAddrInfo.recipPhnno}">
-							</tr>
-							<tr>
-								<th>주소</th>
-								<td id="chgerAddr" th:text="|${deliveryAddrInfo.recipBaseAddr} ${deliveryAddrInfo.recipDtlAddr}|"></td>
-								<input type="hidden" name="chgerBaseAddr" th:value="${deliveryAddrInfo.recipBaseAddr}">
-								<input type="hidden" name="chgerDtlAddr" th:value="${deliveryAddrInfo.recipDtlAddr}">
+								<td>
+									<div class="retrieve_method">
+										<div class="form_field">
+											<div>
+												<input type="radio" name="wdGb" id="withdraw" value="W" checked>
+												<label for="withdraw"><span>방문회수<em>택배사에서 고객에게 방문하여 회수</em></span></label>
+											</div>
+											<div>
+												<input type="radio" name="wdGb" id="direct" value="D">
+												<label for="direct"><span>직접배송<em>고객이 반품지로 직접 반송</em></span></label>
+											</div>
+										</div>
+									</div>
+								</td>
 							</tr>
 							</tbody>
 						</table>
 					</div>
-				</section>
-				<section class="order_row" id="returnLocation">
-					<div class="order_tit">
-						<h3 class="subH3">반품하실 배송지</h3>
-					</div>
-					<div class="tbl type1">
-						<table>
-							<colgroup>
-								<col width="200">
-								<col width="*">
-							</colgroup>
-							<tbody>
-							<tr>
-								<th>성명</th>
-								<td th:text="${deliveryAddrInfo.rtnLocNm}"></td>
-								<input type="hidden" name="rtnLocNm" th:value="${deliveryAddrInfo.rtnLocNm}">
-							</tr>
-							<tr>
-								<th>연락처</th>
-								<td th:text="${deliveryAddrInfo.rtnLocTelno}"></td>
-								<input type="hidden" name="rtnLocTelno" th:value="${deliveryAddrInfo.rtnLocTelno}">
-							</tr>
-							<tr>
-								<th>주소</th>
-								<td th:text="|${deliveryAddrInfo.rtnLocBaseAddr} ${deliveryAddrInfo.rtnLocDtlAddr}|"></td>
-								<input type="hidden" name="rtnLocBaseAddr" th:value="${deliveryAddrInfo.rtnLocBaseAddr}">
-								<input type="hidden" name="rtnLocDtlAddr" th:value="${deliveryAddrInfo.rtnLocDtlAddr}">
-							</tr>
-							</tbody>
-						</table>
+					<div class="retrieve_box visit" style="display:block;" id="chgerLocation">
+						<h4 class="subH3">교환 회수지 주소 <span class="tit_info">택배사에서 교환 상품을 직접 회수할 장소 선택</span></h4>
+						<div class="tbl type1">
+							<table>
+								<colgroup>
+									<col width="210">
+									<col width="*">
+								</colgroup>
+								<tbody>
+									<tr>
+										<th>성명</th>
+										<td id="chgerNm" th:text="${deliveryAddrInfo.recipNm}"></td>
+										<input type="hidden" name="chgerNm" th:value="${deliveryAddrInfo.recipNm}">
+									</tr>
+									<tr>
+										<th>연락처</th>
+										<td id="chgerPhnno" th:text="${deliveryAddrInfo.recipPhnno}"></td>
+										<input type="hidden" name="chgerPhnno" th:value="${deliveryAddrInfo.recipPhnno}">
+									</tr>
+									<tr>
+										<th>주소</th>
+										<td>
+											<th:block  th:id="chgerAddr" th:text="|${deliveryAddrInfo.recipBaseAddr} ${deliveryAddrInfo.recipDtlAddr}|"></th:block>
+											<button type="button" class="btn btn_default btn_sm" onclick="fnChangeDeliveryAddr('chger');"><span>회수지 변경</span></button>
+										</td>
+										<input type="hidden" name="chgerZipcode" th:value="${deliveryAddrInfo.chgerZipcode}">
+										<input type="hidden" name="chgerBaseAddr" th:value="${deliveryAddrInfo.recipBaseAddr}">
+										<input type="hidden" name="chgerDtlAddr" th:value="${deliveryAddrInfo.recipDtlAddr}">
+										<input type="hidden" name="chgerRtnMemo" th:value="${deliveryAddrInfo.chgerRtnMemo}">
+									</tr>
+								</tbody>
+							</table>
+						</div>
 					</div>
-				</section>
-				<section class="order_row">
-					<div class="order_tit">
-						<h3 class="subH3">교환 상품 받으실 주소</h3>
-						<span class="del_t">교환받을 상품을 수령할 장소 선택</span>
-						<button type="button" class="btn_popup" onclick="fnChangeDeliveryAddr('recip');"><span>회수지 선택</span></button>
+					<div class="retrieve_box direct" style="display:none;" id="returnLocation">
+						<h4 class="subH3">반송 정보</h4>
+						<div class="tbl type1">
+							<table>
+								<colgroup>
+									<col width="210">
+									<col width="*">
+								</colgroup>
+								<tbody>
+								<tr>
+									<th>
+										반송주소
+									</th>
+									<td th:text="|${deliveryAddrInfo.rtnLocBaseAddr} ${deliveryAddrInfo.rtnLocDtlAddr}|"></td>
+								</tr>
+								<tr>
+									<th>
+										반송 송장번호
+									</th>
+									<td>
+										<form class="form_wrap">
+											<div class="form_field">
+												<div class="input_wrap">
+													<input type="text" class="form_control" name="wdInvoiceNo" placeholder="송장번호를 입력해주세요.">
+												</div>
+											</div>
+										</form>
+									</td>
+								</tr>
+								</tbody>
+							</table>
+						</div>
 					</div>
+					<h4 class="subH3">교환 상품 배송지</h4>
 					<div class="tbl type1">
 						<table>
 							<colgroup>
-								<col width="200">
+								<col width="210">
 								<col width="*">
 							</colgroup>
 							<tbody>
-							<tr>
-								<th>성명</th>
-								<td id="recipNm" th:text="${deliveryAddrInfo.recipNm}"></td>
-								<input type="hidden" name="recipNm" th:value="${deliveryAddrInfo.recipNm}">
-							</tr>
-							<tr>
-								<th>연락처</th>
-								<td id="recipPhnno" th:text="${deliveryAddrInfo.recipPhnno}"></td>
-								<input type="hidden" name="recipPhnno" th:value="${deliveryAddrInfo.recipPhnno}">
-							</tr>
-							<tr>
-								<th>주소</th>
-								<td id="recipAddr" th:text="|${deliveryAddrInfo.recipBaseAddr} ${deliveryAddrInfo.recipDtlAddr}|"></td>
-								<input type="hidden" name="recipBaseAddr" th:value="${deliveryAddrInfo.recipBaseAddr}">
-								<input type="hidden" name="recipDtlAddr" th:value="${deliveryAddrInfo.recipDtlAddr}">
-							</tr>
+								<tr>
+									<th>
+										배송지 정보
+									</th>
+									<td>
+										<div class="block_line">
+											<ul>
+												<li>
+													<span th:text="${deliveryAddrInfo.recipNm}"></span>
+												</li>
+												<li>
+													<span th:text="${deliveryAddrInfo.recipPhnno}"></span>
+												</li>
+												<li>
+													<span th:text="|${deliveryAddrInfo.recipBaseAddr} ${deliveryAddrInfo.recipDtlAddr}|"></span>
+													<button type="button" class="btn btn_default btn_sm" onclick="fnChangeDeliveryAddr()"><span>배송지 변경</span></button>
+												</li>
+												<li>
+													배송요청 사항&nbsp;:&nbsp;<span id="delvMemo" th:text="${deliveryAddrInfo.delvMemo}"></span>
+													<button type="button" class="btn_underline" onclick="fnChangeDeliveryMemo()"><span>변경하기</span></button>
+												</li>
+											</ul>
+										</div>
+									</td>
+								</tr>
 							</tbody>
 						</table>
 					</div>
-				</section>
-				<section class="order_row" id="addDeliveryFee" style="display:none">
-					<div class="ship_fee">
-						<p><span class="c_primary" id="addPayCost">2,500원</span> 배송비 추가 결제가 필요합니다.</p>
-						<input type="hidden" name="addPayCost"/>
+					<div class="info_footer_area" id="addDeliveryFee" style="display:none">
+						<p>
+							<span id="addPayCost">2,500원</span> 배송비 추가 결제가 필요합니다.
+							<input type="hidden" name="addPayCost"/>
+						</p>
+					</div>
+					<div class="btn_footer_area">
+						<button type="button" class="btn btn_default btn_md" onclick="cfnGoToPage(_PAGE_MYPAGE_CRS_LIST)"><span>취소</span></button>
+						<button type="button" id="btn_confirm_exchange" class="btn btn_dark btn_md" onclick="fnExchange()"><span>교환 신청</span></button>
 					</div>
-				</section>
-				<div class="btn_wrap">
-					<button type="button" class="btn btn_default cancle_btn" onclick="cfnGoToPage(_PAGE_MYPAGE_CRS_LIST)"><span>교환 취소</span></button>
-					<button tyep="submit" class="btn btn_primary submit_btn" onclick="fnExchange()"><span id="exchangeButton">교환 신청</span></button>
 				</div>
 			</div>
+			<!-- // CONT-BODY -->
 		</div>
 	</div>
 <script src="/ux/plugins/gaga/gaga.paging.js"></script>
@@ -258,6 +299,22 @@
 	var fnChangeOption = function(param) {
 		// TODO
 		// 옵션변경 처리
+		var jsonObj = {};
+		jsonObj.ordNo = $(param).attr('ordNo');
+		jsonObj.ordDtlNo = $(param).attr('ordDtlNo');
+
+		$.ajax({
+			type		: "POST",
+			url 		: "/mypage/change/option/popup/form",
+			data		: jsonObj,
+			dataType 	: "html",
+			success 	: function(result) {
+				if (result != null) {
+					$("#exchangePop .modal-content").html(result);
+					$("#exchangePop").modal("show");
+				}
+			}
+		});
 	}
 
 	// 교환 처리
@@ -267,15 +324,15 @@
 	}
 	
 	// 교환 사유 변경 이벤트
-	var fnChangeReason = function(param) {
+	var fnChangeExchangeReason = function(param) {
 		let chgReason = $(param).val();
 		// TODO
 		// 사유 변경 처리
-		alert('a');
-		console.log($('#exchangeList tr'));
-		$.each($('#exchangeList tr'), function(idx, item) {
-			console.log(item);
-		})
+	}
+	
+	// 교환 수량 변경 이벤트
+	var fnChangeExchangeQty = function(param) {
+		
 	}
 </script>
 

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

@@ -0,0 +1,285 @@
+<!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/MypageLayoutWeb">
+<!--
+ *******************************************************************************
+ * @source  : MypageExchangeFormWeb.html
+ * @desc    : 마이페이지 > 교환신청 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2021 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.02.22   card007     최초 작성
+ *******************************************************************************
+ -->
+<body>
+
+<th:block layout:fragment="content">
+	<div class="my_cont">
+		<div class="sec_head">
+			<h3>교환 신청</h3>
+			<div class="od_detail">
+				(주문번호 : <span class="num" th:text="${ordNo}"></span>)
+			</div>
+		</div>
+		<div class="sec_body mypage_body">
+			<div class="order_list return_list">
+				<section class="order_row">
+					<th:block th:if="${orderList}" th:each="oneData, status : ${orderList}">
+						<div class="part_deliver">
+							<div class="tbl_tit">
+								<!-- 주문일/선물일 설정 -->
+								<span class="start_t" th:unless="${oneData.giftPackYn == 'Y'}">주문일</span>
+								<span class="gift_t" th:if="${oneData.giftPackYn == 'Y'}">선물일</span>
+								<!-- //주문일/선물일 설정 -->
+
+								<span class="order_date" th:text="${oneData.ordDt}"></span>
+
+								<!-- 배송구분 설정 -->
+								<span class="order_label02" th:if="${oneData.shotDelv}">총알배송</span>
+								<span class="order_label01" th:if="${oneData.selfMall}">STYLE24 일반배송</span>
+								<span class="order_label01" th:if="${oneData.supplyMall}">업체직배송</span>
+								<!-- //배송구분 설정 -->
+								<a href="javascript:void(0)" class="detail_btn" th:attr="ordNo=${oneData.ordNo}" onclick="fnGoToOrderDetail(this)">주문상세보기</a>
+							</div>
+							<th:block th:if="${oneData.orderList}" th:each="order, status : ${oneData.orderList}">
+								<div class="tbl type2">
+									<table id="exchangeList">
+										<colgroup>
+											<col width="1020">
+											<col width="180">
+										</colgroup>
+										<tbody>
+										<th:block th:if="${order.ordDtlList}" th:each="ordDtl, status : ${order.ordDtlList}" th:with="imageUrl=${@environment.getProperty('upload.goods.view')}">
+											<input type="hidden" name="ordDtlNo" th:value="${ordDtl.ordDtlNo}"/>
+											<input type="hidden" name="ordDtlStat" th:value="${ordDtl.ordDtlStat}"/>
+											<input type="hidden" name="reviewSq" th:value="${ordDtl.reviewSq}"/>
+											<tr>
+												<td>
+													<div class="info_item">
+														<div class="thumb_box">
+															<a href="">
+																<img th:src="${imageUrl + '/' + ordDtl.sysImgNm}" width="100%" alt="">
+															</a>
+														</div>
+														<div class="info_box">
+															<p class="od_name">
+																<a href="">
+																	<span class="brand" th:text="${ordDtl.brandNm}"></span>
+																	<span class="name" th:text="${ordDtl.goodsNm}"></span>
+																</a>
+															</p>
+															<p class="od_opt">
+																<span class="option"><em th:text="${ordDtl.optCd1}"></em><em th:text="${ordDtl.optCd2}"></em></span>
+																<span class="count">수량 <em th:text="${ordDtl.ordQty}"></em>개</span>
+															</p>
+														</div>
+														<div class="info_calc">
+															<p class="price">
+																<span class="selling_price" th:text="|${#numbers.formatInteger(ordDtl.ordAmt, 1, 'COMMA')}원|"></span>
+															</p>
+															<p class="point"><span th:text="${#numbers.formatInteger(ordDtl.savePntAmt, 1, 'COMMA')}"></span>p</p>
+														</div>
+													</div>
+												</td>
+												<td class="cnt_sel">
+													<span class="cnt_t">수량</span>
+													<select class="select_dress" name="chgQty">
+														<option value="">선택</option>
+														<option th:if="${ordDtl.ordQty > 0}" th:each="num : ${#numbers.sequence(1,ordDtl.ordQty)}" th:value="${num}" th:text="${num}"></option>
+													</select>
+													<button class="btn btn_dark btn_sm" th:attr="ordDtlNo=${ordDtl.ordDtlNo}" onclick="fnChangeOption(this);">옵션 변경</button>
+												</td>
+											</tr>
+										</th:block>
+										</tbody>
+									</table>
+								</div>
+							</th:block>
+							<div class="order_confirm">
+								<p class="cf_txt cf_desc c_primary">교환하실 상품의 수량 및 옵션을 선택하신 후 교환 신청을 하실 수 있습니다.</p>
+							</div>
+						</div>
+					</th:block>
+				</section>
+				<section class="order_row">
+					<div class="tbl_tit">
+						<h3 class="subH3">교환 사유</h3>
+					</div>
+					<div class="tbl type1">
+						<table>
+							<colgroup>
+								<col width="*">
+							</colgroup>
+							<tbody>
+							<tr>
+								<td>
+									<select id="mounth" name="chgReason" onchange="fnChangeReason(this);">
+										<option value="">교환 사유를 선택하세요</option>
+										<option th:if="${exchangeReason}" th:each="oneData, status : ${exchangeReason}" th:value="${oneData.cd}" th:text="${oneData.cdNm}"></option>
+									</select>
+								</td>
+							</tr>
+							<tr>
+								<td>
+									<textarea class="doc_exchange" name="chgMemo" id="chgMemo" placeholder="자세한 사유를 입력해주세요." onkeyup="cfnGetTextLength(this, 200, $('#exchange_cnt'));"></textarea>
+									<p class="txt_cnt"><span id="exchange_cnt" class="c_primary">0</span>/200</p>
+								</td>
+							</tr>
+							</tbody>
+						</table>
+					</div>
+				</section>
+				<section class="order_row" id="chgerLocation">
+					<div class="order_tit">
+						<h3 class="subH3">상품 회수지</h3>
+						<span class="del_t">택배사에서 반품 상품을 직접 회수할 장소 선택</span>
+						<button type="button" class="btn_popup" onclick="fnChangeDeliveryAddr('chger');"><span>회수지 선택</span></button>
+					</div>
+					<div class="tbl type1">
+						<table>
+							<colgroup>
+								<col width="200">
+								<col width="*">
+							</colgroup>
+							<tbody>
+							<tr>
+								<th>성명</th>
+								<td id="chgerNm" th:text="${deliveryAddrInfo.recipNm}"></td>
+								<input type="hidden" name="chgerNm" th:value="${deliveryAddrInfo.recipNm}">
+							</tr>
+							<tr>
+								<th>연락처</th>
+								<td id="chgerPhnno" th:text="${deliveryAddrInfo.recipPhnno}"></td>
+								<input type="hidden" name="chgerPhnno" th:value="${deliveryAddrInfo.recipPhnno}">
+							</tr>
+							<tr>
+								<th>주소</th>
+								<td id="chgerAddr" th:text="|${deliveryAddrInfo.recipBaseAddr} ${deliveryAddrInfo.recipDtlAddr}|"></td>
+								<input type="hidden" name="chgerBaseAddr" th:value="${deliveryAddrInfo.recipBaseAddr}">
+								<input type="hidden" name="chgerDtlAddr" th:value="${deliveryAddrInfo.recipDtlAddr}">
+							</tr>
+							</tbody>
+						</table>
+					</div>
+				</section>
+				<section class="order_row" id="returnLocation">
+					<div class="order_tit">
+						<h3 class="subH3">반품하실 배송지</h3>
+					</div>
+					<div class="tbl type1">
+						<table>
+							<colgroup>
+								<col width="200">
+								<col width="*">
+							</colgroup>
+							<tbody>
+							<tr>
+								<th>성명</th>
+								<td th:text="${deliveryAddrInfo.rtnLocNm}"></td>
+								<input type="hidden" name="rtnLocNm" th:value="${deliveryAddrInfo.rtnLocNm}">
+							</tr>
+							<tr>
+								<th>연락처</th>
+								<td th:text="${deliveryAddrInfo.rtnLocTelno}"></td>
+								<input type="hidden" name="rtnLocTelno" th:value="${deliveryAddrInfo.rtnLocTelno}">
+							</tr>
+							<tr>
+								<th>주소</th>
+								<td th:text="|${deliveryAddrInfo.rtnLocBaseAddr} ${deliveryAddrInfo.rtnLocDtlAddr}|"></td>
+								<input type="hidden" name="rtnLocBaseAddr" th:value="${deliveryAddrInfo.rtnLocBaseAddr}">
+								<input type="hidden" name="rtnLocDtlAddr" th:value="${deliveryAddrInfo.rtnLocDtlAddr}">
+							</tr>
+							</tbody>
+						</table>
+					</div>
+				</section>
+				<section class="order_row">
+					<div class="order_tit">
+						<h3 class="subH3">교환 상품 받으실 주소</h3>
+						<span class="del_t">교환받을 상품을 수령할 장소 선택</span>
+						<button type="button" class="btn_popup" onclick="fnChangeDeliveryAddr('recip');"><span>회수지 선택</span></button>
+					</div>
+					<div class="tbl type1">
+						<table>
+							<colgroup>
+								<col width="200">
+								<col width="*">
+							</colgroup>
+							<tbody>
+							<tr>
+								<th>성명</th>
+								<td id="recipNm" th:text="${deliveryAddrInfo.recipNm}"></td>
+								<input type="hidden" name="recipNm" th:value="${deliveryAddrInfo.recipNm}">
+							</tr>
+							<tr>
+								<th>연락처</th>
+								<td id="recipPhnno" th:text="${deliveryAddrInfo.recipPhnno}"></td>
+								<input type="hidden" name="recipPhnno" th:value="${deliveryAddrInfo.recipPhnno}">
+							</tr>
+							<tr>
+								<th>주소</th>
+								<td id="recipAddr" th:text="|${deliveryAddrInfo.recipBaseAddr} ${deliveryAddrInfo.recipDtlAddr}|"></td>
+								<input type="hidden" name="recipBaseAddr" th:value="${deliveryAddrInfo.recipBaseAddr}">
+								<input type="hidden" name="recipDtlAddr" th:value="${deliveryAddrInfo.recipDtlAddr}">
+							</tr>
+							</tbody>
+						</table>
+					</div>
+				</section>
+				<section class="order_row" id="addDeliveryFee" style="display:none">
+					<div class="ship_fee">
+						<p><span class="c_primary" id="addPayCost">2,500원</span> 배송비 추가 결제가 필요합니다.</p>
+						<input type="hidden" name="addPayCost"/>
+					</div>
+				</section>
+				<div class="btn_wrap">
+					<button type="button" class="btn btn_default cancle_btn" onclick="cfnGoToPage(_PAGE_MYPAGE_CRS_LIST)"><span>교환 취소</span></button>
+					<button tyep="submit" class="btn btn_primary submit_btn" onclick="fnExchange()"><span id="exchangeButton">교환 신청</span></button>
+				</div>
+			</div>
+		</div>
+	</div>
+<script src="/ux/plugins/gaga/gaga.paging.js"></script>
+<script th:inline="javascript">
+	$(document).ready(function() {
+		// 마이페이지 LNB 설정
+		fnSetMypageLnbList(2);
+		
+		// 마이페이지 location 설정
+		fnSetMypageLocation('취소/반품/환불내역', '_PAGE_MYPAGE_CRS_LIST', '교환 신청');
+	});
+
+	// 교환 옵션 변경 팝업
+	var fnChangeOption = function(param) {
+		// TODO
+		// 옵션변경 처리
+	}
+
+	// 교환 처리
+	var fnExchange = function() {
+		// TODO
+		// 교환신청 처리
+	}
+	
+	// 교환 사유 변경 이벤트
+	var fnChangeReason = function(param) {
+		let chgReason = $(param).val();
+		// TODO
+		// 사유 변경 처리
+		alert('a');
+		console.log($('#exchangeList tr'));
+		$.each($('#exchangeList tr'), function(idx, item) {
+			console.log(item);
+		})
+	}
+</script>
+
+</th:block>
+
+</body>
+</html>

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

@@ -314,12 +314,10 @@
 												<li>
 													<span th:text="|${deliveryAddrInfo.recipBaseAddr} ${deliveryAddrInfo.recipDtlAddr}|"></span>
 													<button type="button" class="btn btn_default btn_sm" th:if="${allCanYn == 'Y'}" onclick="fnChangeDeliveryAddr()"><span>배송지 변경</span></button>
-													<button type="button" class="btn btn_default btn_sm" th:unless="${allCanYn == 'Y'}" onclick="fnChangeDeliveryAddr()"><span>배송지 변경</span></button>
 												</li>
 												<li>
 													배송요청 사항&nbsp;:&nbsp;<span id="delvMemo" th:text="${deliveryAddrInfo.delvMemo}"></span>
-													<button type="button" class="btn_underline"th:if="${allCanYn == 'Y'}" onclick="fnChangeDeliveryMemo()"><span>변경하기</span></button>
-													<button type="button" class="btn_underline"th:unless="${allCanYn == 'Y'}" onclick="fnChangeDeliveryMemo()"><span>변경하기</span></button>
+													<button type="button" class="btn_underline" th:if="${allCanYn == 'Y'}" onclick="fnChangeDeliveryMemo()"><span>변경하기</span></button>
 												</li>
 											</ul>
 										</div>
@@ -442,58 +440,9 @@
 				<input type="hidden" name="ordNo"/>
 				<input type="hidden" name="ordDtlNo"/>
 			</form>
-			<form id="reviewForm" name="reviewForm" th:action="@{'/mypage/review/form'}" th:method="get">
-				<input type="hidden" name="ordNo"/>
-				<input type="hidden" name="ordDtlNo"/>
-			</form>
 			<!-- // CONT-BODY -->
 		</div>
 	</div>
-
-	<!-- 배송지변경 팝업 -->
-	<div class="modal fade 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>
-		<a href="#close-modal" rel="modal:close" id="adrsChangePop_close" class="close-modal">Close</a>
-	</div>
-	<!-- //배송지변경 팝업 -->
-
-	<!-- 배송지추가 팝업 -->
-	<div class="modal fade 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="adrsAddPop_close" class="close-modal">Close</a>
-	</div>
-	<!-- //배송지추가 팝업 -->
-
-	<!-- 배송지수정 팝업 -->
-	<div class="modal fade 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="adrsModifyPop_close" class="close-modal">Close</a>
-	</div>
-	<!-- //배송지수정 팝업 -->
-
-	<!-- 배송요청사항수정 팝업 -->
-	<div class="modal fade rqstModify_pop" id="rqstModifyPop" tabindex="-1" role="dialog" aria-labelledby="rqstModifyLabel" aria-hidden="true">
-		<div class="modal-dialog" role="document">
-			<div class="modal-content">
-				<!-- 배송요청사항수정 팝업 내용 -->
-			</div>
-		</div>
-		<a href="#close-modal" rel="modal:close" id="rqstModifyPop_close" class="close-modal">Close</a>
-	</div>
-	<!-- //배송요청사항수정 팝업 -->
-
 <script src="/ux/plugins/gaga/gaga.paging.js"></script>
 <script th:inline="javascript">
 	let ordNo = [[${ordNo}]];

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

@@ -79,8 +79,8 @@
 												<span class="count"><em th:text="${return.ordQty - return.cnclRtnQty}"></em>개</span>
 											</p>
 											<p>
-												<span class="price_org" th:if="${(return.listPrice * (return.ordQty - return.cnclRtnQty)) > (return.ordAmt - return.cnclRtnAmt)}"><em th:text="${#numbers.formatInteger(return.listPrice * (return.ordQty - return.cnclRtnQty), 1, 'COMMA')}"></em>원</span>
-												<span class="price_sale"><em th:text="${#numbers.formatInteger(return.ordAmt - return.cnclRtnAmt, 1, 'COMMA')}"></em>원</span>
+												<span class="price_org" th:if="${(return.ordAmt - return.cnclRtnAmt - return.cpn1DcAmt) > (return.realOrdAmt + return.pntDcAmt + return.gfcdUseAmt)}"><em th:text="${#numbers.formatInteger(return.ordAmt - return.cnclRtnAmt - return.cpn1DcAmt, 1, 'COMMA')}"></em>원</span>
+												<span class="price_sale"><em th:text="${#numbers.formatInteger(return.realOrdAmt + return.pntDcAmt + return.gfcdUseAmt, 1, 'COMMA')}"></em>원</span>
 											</p>
 										</div>
 									</div>
@@ -127,7 +127,7 @@
 													<ul class="list">
 														<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" 추가  -->
 														<li class="selected">반품 사유를 선택하세요.</li>
-														<li th:if="${returnReason}" th:each="oneData, status : ${returnReason}" th:attr="chgReason=${oneData.cd}" th:text="${oneData.cdNm}" onclick="fnChangeReason(this);"></li>
+														<li th:if="${returnReason}" th:each="oneData, status : ${returnReason}" th:attr="chgReason=${oneData.cd}" th:text="${oneData.cdNm}" onclick="fnChangeReturnReason(this);"></li>
 													</ul>
 												</div>
 											</div>
@@ -191,8 +191,8 @@
 									</tr>
 									<tr>
 										<th>주소</th>
-										<td id="chgerAddr">
-											<th:block th:text="|${deliveryAddrInfo.recipBaseAddr} ${deliveryAddrInfo.recipDtlAddr}|"></th:block>
+										<td>
+											<th:block  th:id="chgerAddr" th:text="|${deliveryAddrInfo.recipBaseAddr} ${deliveryAddrInfo.recipDtlAddr}|"></th:block>
 											<button type="button" class="btn btn_default btn_sm" onclick="fnChangeDeliveryAddr('chger');"><span>회수지 변경</span></button>
 										</td>
 										<input type="hidden" name="chgerZipcode" th:value="${deliveryAddrInfo.chgerZipcode}">
@@ -325,38 +325,6 @@
 			</div>
 			<!-- // CONT-BODY -->
 		</div>
-		<!-- 배송지변경 팝업 -->
-		<div class="modal fade 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>
-			<a href="#close-modal" rel="modal:close" id="adrsChangePop_close" class="close-modal">Close</a>
-		</div>
-		<!-- //배송지변경 팝업 -->
-
-		<!-- 배송지추가 팝업 -->
-		<div class="modal fade 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="adrsAddPop_close" class="close-modal">Close</a>
-		</div>
-		<!-- //배송지추가 팝업 -->
-
-		<!-- 배송지수정 팝업 -->
-		<div class="modal fade 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="adrsModifyPop_close" class="close-modal">Close</a>
-		</div>
-		<!-- //배송지수정 팝업 -->
 	</div>
 <script src="/ux/plugins/gaga/gaga.paging.js"></script>
 <script th:inline="javascript">
@@ -579,7 +547,7 @@
 	});
 	
 	// 반품 사유 변경 이벤트
-	var fnChangeReason = function(param) {
+	var fnChangeReturnReason = function(param) {
 		var customerReasonArr = ['G688_10', 'G688_11', 'G688_12', 'G688_13', 'G688_15' , 'G688_21', 'G688_30'];
 		let chgReason = $(param).attr('chgReason');
 

src/main/webapp/biz/mypage.js

@@ -145,6 +145,24 @@ var fnReSendSms = function(param) {
 
 // 반품/취소/교환 버튼 클릭 이벤트
 var fnCreateChange = function(param, gubun) {
+	let ordCanChgQty = $(param).attr('ordCanChgQty');
+
+	// 반품/취소/교환 가능 여부 체크
+	if (ordCanChgQty == 0) {
+		let str = '';
+		if (gubun == 'cancel') {
+			str = '취소 가능한 수량이 없습니다.';
+		} else if (gubun == 'return') {
+			str = '반품 가능한 수량이 없습니다.';
+		} else if (gubun == 'exchange') {
+			str = '교환 가능한 수량이 없습니다.';
+		}
+
+		mcxDialog.alert(str);
+		return false;
+	}
+
+	// 반품/취소/교환 페이지 이동
 	let ordNo = $(param).attr('ordNo');
 	let ordDtlNo = $(param).attr('ordDtlNo');
 
@@ -199,7 +217,7 @@ var fnChangeDeliveryAddr = function(param) {
 			gagajf.showProgressbar(true);
 		},
 		success 	: function(result) {
-			$("#adrsAddPop").html(result);
+			$("#adrsAddPop .modal-dialog .modal-content").html(result);
 			$("#adrsAddPop").modal("show");
 		}
 	});
@@ -229,7 +247,7 @@ $("#btn_rqstModify_pop").on("click", function(e){
 		dataType 	: "html",
 		success 	: function(result) {
 			if (result != null) {
-				$("#rqstModifyPop").html(result);
+				$("#rqstModifyPop .modal-dialog .modal-content").html(result);
 				$("#rqstModifyPop").modal("show");
 			}
 		}
@@ -256,7 +274,7 @@ var fnChangeDeliveryMemo = function() {
 		dataType 	: "html",
 		success 	: function(result) {
 			if (result != null) {
-				$("#rqstModifyPop").html(result);
+				$("#rqstModifyPop .modal-dialog .modal-content").html(result);
 				$("#rqstModifyPop").modal("show");
 			}
 		}