[404 Error] 파일 [/order/paySuccess.jsp]을(를) 찾을 수 없습니다.

[상황]

'http://localhost:8080/order/orderJspPage'에서

'카드 결제' 버튼 체크 후 '결제하기' 버튼 누르면

다음과 같은 결제 API가 호출되고,

 

결제 완료 시, order.js에서 구성된 다음의 코드 일부로 인해

'http://localhost:8080/order/paySuccess.jsp'로 페이지가 넘어가야한다.

//order.js

//포트원 API : 카드 결제 요청
// [1-1] card 결제 API 호출
function payment(){
    // 1. 포트원 계정 연동 및 API 연결
    var IMP = window.IMP;
    IMP.init("imp******"); //포트원 API 계정 번호 //시크릿 키 처리 해야함

    // 2-1. order.jsp 전달 된 데이터를 변수에 저장
    const title = document.getElementById("title");
    const lastPrice = document.getElementById("lastPrice");
    const companyName = document.getElementById("companyName")
    const id = document.getElementById("id");
    const name = document.getElementById("name");
    const phone = document.getElementById("phone");
    // 2-2. 주문 고유 번호 전체 생성
    const odNo = "jscd" + dateChange();

    // 3. 결제 API 호출
    // 각 파라미터 : 페이지에 전달 된 데이터 사용
    IMP.request_pay({
        pg: 'kcp', //결제 API 사용 : NHN KCP
        pay_method: 'card', //결제 방법
        merchant_uid: odNo, //주문 고유 번호
        name: title.value, //결제 상품 이름
        amount: lastPrice.value, //결제 상품 최종 가격
        company: companyName.value, //상품 판매 상호명
        buyer_email: id.value, //구매자 이메일 (=아이디)
        buyer_name: name.value, //구매자 이름
        buyer_tel: phone.value, //구매자 전화번호
    }, function (rsp){
        // 4-1. 결제 성공
        if(rsp.success){
            // 4-2. 결제 성공 시 포트원에서 전달 받을 데이터 리스트들을 변수에 저장
            // requestPay()에 넘겨주기 위함
            const rspData = {
                odNo : odNo, //주문 고유 번호
                creditNum : rsp.card_number, //결제카드 번호
                cardType : rsp.card_name, //결제카드 종류
                payType : rsp.pay_method, //결제방법
                status : rsp.status, //결제상태
                instlFees : rsp.card_quota, //할부개월
                payDay : getDate(), //카드 승인일
                payTime : toConvertUnixTimestamp(rsp) //카드 승인시각
            };

            // 4-3. requestPay() 호출 + rspData 데이터 넘겨주기
            requestPay(rspData);

            // 5. 결제 실패 : 실패 알림창 띄우기
        }else{ 
            alert("[결제 실패] 결제를 다시 시도해주세요.");
            console.log("결제 실패" + rsp.error_msg);
        }
    });
}

// [2] 주문 및 결제 정보 데이터 넘기기
function requestPay(rspData){

    //order.jsp 중 <input> id에 value 값 추가
    $("#odNo").val(rspData.odNo);
    $("#creditNum").val(rspData.creditNum);
    $("#cardType").val(rspData.cardType);
    $("#payType").val(rspData.payType);
    $("#status").val(rspData.status);
    $("#instlFees").val(rspData.instlFees);
    $("#payDay").val(rspData.payDay);
    $("#payTime").val(rspData.payTime);

    // 1. serialize() 메서드를 사용하여 폼 데이터를 URL-encoded 문자열로 가져오기
    const formDataString = $('#orderData').serialize();

    // 2. URL-encoded 문자열을 객체로 변환
    const formDataObject = {};
    formDataString.split('&').forEach(pair => {
        const [name, value] = pair.split('=');
        formDataObject[name] = decodeURIComponent(value.replace(/\+/g, ' '));
    });


    // 2.1. creditNum 값을 formDataObject에 추가
    formDataObject.creditNum = rspData.creditNum;
    formDataObject.cardType = rspData.cardType;
    formDataObject.payType = rspData.payType;
    formDataObject.status = rspData.status;
    formDataObject.instlFees = rspData.instlFees;
    formDataObject.payDay = rspData.payDay;
    formDataObject.payTime = rspData.payTime;

    // 3. 객체를 JSON 문자열로 변환
    const formDataJSON = JSON.stringify(formDataObject);

    // JSON 문자열을 콘솔에 출력
    console.log('JSON success' + formDataJSON);

    // formDataJSON을 OrderController.java로 넘김
    $.ajax({
        url: '/order/paySuccess',
        type: 'POST',
        contentType:"application/json; charset=utf-8",
        data: formDataJSON,
        success: function(response) {
            console.log("ajax 성공");

            // 서버로부터 결제 완료 응답을 받은 후 페이지 이동
            window.location.href = "paySuccess.jsp";
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log("ajax 실패: " + textStatus + ", " + errorThrown);
        }
    });
}

 

window.location.href = "paySuccess.jsp";

 

해당 코드가 자바스크립트를 이용하여 해당 페이지로 넘어가게 해주는데,

이 코드 한 줄만으로 페이지를 찾을 순 없다는 사실을 망각했었다.

 

 

[문제 발생]

결제 완료 시 'http://localhost:8080/order/paySuccess.jsp'페이지로 넘어가야 하는데,

아래와 같이 페이지를 찾을 수 없다는 문구가 표시된다.

 

서버에서는 다음과 같은 문구가 표시된다.

WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/order/paySuccess] in DispatcherServlet with name 'appServlet'

 

매핑이 안되었으니 당연히 해당 페이지로 넘어가지질 않겠지.

 

 

[문제 해결 과정]

1. OrderController.java

카드 결제 완료 페이지 연결 매핑 코드 작성

    // 카드 결제 완료 페이지 연결
    @GetMapping("/paySuccess")
    public String paySuccess() {
        return "order/paySuccess";
    }

 

2. order.js

서버로부터 결제 완료 응답 받은 후 '/order/paySuccess' 페이지 이동

    $.ajax({
        url: '/order/paySuccess',
        type: 'POST',
        contentType:"application/json; charset=utf-8",
        data: formDataJSON,
        success: function(response) {
            console.log("ajax 성공");

            // 서버로부터 결제 완료 응답을 받은 후 페이지 이동
            window.location.href = "/order/paySuccess";
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log("ajax 실패: " + textStatus + ", " + errorThrown);
        }
    });

 

 

[문제 해결 완료]

결제가 성공적으로 완료되면

 

1. 'http://localhost:8080/order/paySuccess' 이동 완료

 

2. DB에 데이터 저장 완료

2-1) <stod> 주문 이력 테이블

 

2-2) <payhty> 결제 이력 테이블