상태변경 전후비교 및 결과팝업

1, 상태 변경 전후 비교
Mapper

//관리자용 주문상태 변경
		//변경 전 기존상태 확인
		@Select("select ostatus from ord "
				+ "where oid=#{oid}")
		String getOrdStatusByOid(String oid);
		
		//변경 진행
		@Update("update ord set ostatus=#{ostatus} "
				+ "where oid=#{oid}")		
		void updOrdStatus(OrdVo vo);

Service

//관리자용 주문상태 변경
		//변경 전 기존 상태확인
		public String getOrdStatusByOid(String oid) {
		    return ordMapper.getOrdStatusByOid(oid);
		}
		
		//변경 진행
		public void updOrdStatus(OrdVo vo) {
			ordMapper.updOrdStatus(vo);
		}

Ctrl

@PostMapping("updOrdStatus")
	public String updOrdStatus(OrdVo vo) {
		System.out.println("updOrdStatus");

		// 업데이트 전의 상태를 조회
	    String before = ordSvc.getOrdStatusByOid(vo.getOid());
	    System.out.println("변경할 oid: " + vo.getOid());
	    System.out.println("변경전: " + before);
	    
		ordSvc.updOrdStatus(vo);		
		
		// 업데이트 후의 상태를 조회
	    String after = ordSvc.getOrdStatusByOid(vo.getOid());
	    System.out.println("변경후: " + after);
	    
		return "redirect:orderList";
	}

예시로 콘솔에서 찍어본 결과:

변경할 oid: ORD053
변경전: 결제완료
변경후: 도착

2, 변경 결과 팝업
html

<form action="/ord/updOrdStatus" method="post" 
				onsubmit="return validateStatusChange(this);">
				
	                <select class="selectStatus" name="ostatus" id="orderStatus">

	                    <option th:value="${m.ostatus}" th:text="${m.ostatus}"></option>
	                    
	                    <option value="결제완료">결제완료</option>
	                    <option value="상품준비">상품준비</option>
	                    <option value="발송완료">발송완료</option>
	                    <option value="도착">도착</option>
	                    <option value="환불">환불</option>
	                </select>&nbsp;
                
					<!-- 기존 상태 (서버에서 동적으로 렌더링) -->
					<input type="hidden" id="currentStatus" th:value="${m.ostatus}"> 
	                <input type="hidden" name="oid" th:value="${m.oid}">
	                
					<button type="submit" class="subbtnsmall">변경</button>
				</form>
                
<div id="changeStatusSucceed" class="changeStatusSucceed" style="display: none;">
상태가 변경되었습니다.
</div>

<div id="changeStatusFailed" class="changeStatusFailed" style="display: none;">
변경사항이 없습니다.
</div>

js

<script>
    function validateStatusChange(form) {
        const currentStatus = document.getElementById('currentStatus').value;
        const selectedStatus = form.ostatus.value;

        // 변경사항이 없을 때
        if (currentStatus === selectedStatus) {
            showFailedPopup();
            return false; // 폼 제출 중단
        }

        // 변경되었을 때 폼 제출 후 성공 팝업 띄우기
        const xhr = new XMLHttpRequest();
        xhr.open(form.method, form.action, true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        
        xhr.onload = function () {
            if (xhr.status === 200) {
                showSuccessPopup();
            }
        };

        // 폼 데이터를 직렬화하고 서버로 전송
        const formData = new FormData(form);
        const params = new URLSearchParams(formData).toString();
        xhr.send(params);

        return false; // 폼 제출 중단 (AJAX로 처리하므로)
    }

    function showSuccessPopup() {
        const popup = document.getElementById('changeStatusSucceed');
        popup.style.display = 'block';
        popup.classList.add('show');
        
        setTimeout(function() {
            popup.classList.remove('show');
            popup.style.display = 'none';
        }, 5000); // 팝업이 5초 후에 사라짐
    }

    function showFailedPopup() {
        const popup = document.getElementById('changeStatusFailed');
        popup.style.display = 'block';
        popup.classList.add('show');

        setTimeout(function() {
            popup.classList.remove('show');
            popup.style.display = 'none';
        }, 5000); // 팝업이 5초 후에 사라짐
    }
</script>

css

/*주문상태 변경결과 팝업*/
.changeStatusSucceed {
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 15px;
    background-color: #589ddd;
    color: white;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.changeStatusSucceed.show {
    visibility: visible;
    opacity: 0.7; /* 투명도 */
}

.changeStatusFailed {
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 15px;
    background-color: rgb(217, 155, 153);
    color: white;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.changeStatusFailed.show {
    visibility: visible;
    opacity: 0.7; /* 투명도 */
}