11 to 9, Day 10

Today, ToDoList

• Toy Project - NGMA
  • 짝꿍 신청
  • 나에게 신청한 내역 확인

---

짝꿍 신청하기

    @PostMapping("/pick")
    @ResponseBody
    public ResponseEntity<?> pick(@AuthenticationPrincipal UserAccount userAccount,
                                  @RequestBody AccountDto accountDto) {
        Account lover = accountService.getUserByEmail(accountDto.getEmail());

        accountService.pickLover(userAccount.getAccount(), lover);
        return ResponseEntity.ok().body("{}");
    }

function submitCoupleForm(){
    $.ajax({
        type: "POST",
        url: "http://localhost:8080/account/pick",
        contentType: "application/json",
        dataType: "json",
        cache:false,
        data: JSON.stringify($("form#coupleForm").serializeObject()),
        success: function(response){
            alert("확인");
            $("#coupleModal").modal('hide');
            loadCoupleState();
        },
        error: function(request){
            $(".form-control-error").empty();
            $(".form-control-error").append(request.responseText);
        }
    });
}

트러블

submitCoupleForm() 함수에서 ajax를 통해 짝꿍 신청을 하는데, 핸들러의 return ResponseEntity.ok().body();로 인해 응답 본문에 아무런 데이터도 넣지 않았더니 ajax 결과가 success로 판단되지 않았다.

그래서 응답 본문에 일단 아무거나 넣어줌. return ResponseEntity.ok().body("{}"); 요부분은 추후 수정이 필요할 듯 하다.

---

나에게 신청한 내역 확인

계정의 LoverState를 확인하여 사용자의 상태를 체크하는 중 printWaiterTable() 함수를 이용하여 만약 신청을 받은 상태이면 신청 내역 테이블 출력.

function loadCoupleState() {
    $.ajax({
        url: "http://localhost:8080/account/loverState",
        type: "GET",
        dataType: "json",
        success: function(data) {
            checkLoverState(data);
        },
        error: function(e) {
            alert("loverstate 값을 가져오지 못했습니다.");
        }
    });
}

function checkLoverState(loverState) {
    printWaiterTable(loverState.hasWaiters);
    loverStateResult(loverState.name);
}

function printWaiterTable(hasWaiters) {
    if ( hasWaiters == true ) {
        $("table#coupleTable").empty();
        $("table#coupleTable").load('/main-part/waiter-main.html');
        loadWaiters();
    }
}

function loadWaiters() {
    $.ajax({
        url: "http://localhost:8080/account/waiter",
        type: "GET",
        dataType: "json",
        success: function(data) {
            addWaiterRow(data);
        },
        error: function(e) {
            alert("waiters 값을 가져오지 못했습니다.");
        }
    });
}

function addWaiterRow(lover) {
    var tableBody = $("tbody#coupleTableBody");
    $(tableBody).children("tr").remove();
    $.each(lover, function (i, item) {
        var newRow = $("<tr></tr>").appendTo(tableBody);
        $(newRow).append("<td>"+item.name+"</td>");
        $(newRow).append("<td>"+item.email+"</td>");
        $(newRow).append("<td>"+"<a class=\"btn btn-outline-primary btn-sm\" type=\"button\" id=\"waiterCheck\" data-bs-toggle=\"modal\" data-bs-target=\"#waiterModal\">확인</a>"+"</td>");
        $(newRow).append("<td>"+"<a class=\"btn btn-outline-secondary btn-sm\" type=\"button\" id=\"waiterReject\" data-bs-toggle=\"modal\" data-bs-target=\"#waiterModal\">거절</a>"+"</td>");
    });
}

트러블

function loadLover() {
    var email;
    var name;

    $.ajax({
        url: "http://localhost:8080/account/lover",
        type: "GET",
        dataType: "json",
        success: function(data) {
            email = data.email;
            name = data.name;
        },
        error: function(e) {
            alert("lover 값을 가져오지 못했습니다.");
        }
    });

    return name;
}

위의 과거 코드는 ajax로 데이터를 받는 부분에서 ajax가 비동기 방식인 것을 깊게 생각하지 않았더니 ajax 통신보다 name 변수 반환을 먼저 해버려서 name에 undefined가 들어감..

function loadLover() {
    var nameAndEmail;

    $.ajax({
        type: "GET",
        url: "http://localhost:8080/account/lover",
        dataType: "json",
        async: false,
        success: function(data) {
            nameAndEmail = accountNameAndEmail(data);
        },
        error: function(e) {
            alert("lover 값을 가져오지 못했습니다.");
        }
    });

    return nameAndEmail;
}

function accountNameAndEmail(data) {
    return data.name.toString()+"("+data.email.toString()+")";
}

때문에 async: false 옵션을 주면 해결이 되긴 했는데, 이 옵션을 쓰는거 보다는 다른 로직으로 처리하는게 좋을 거 같다.

그래서 callback 함수 기반으로 코딩함.

function loverStateResult(state) {
    $("div#loverStateResult").empty();
    if ( state == "NOTHING" ) {
        $("div#loverStateResult").append("<p class=\"text-sm-start\">아직 연결된 짝꿍이 없으시네요, 나의 짝꿍에게 신청해보세요!</p><a class=\"btn btn-outline-primary\" type=\"button\" id=\"couple\" data-bs-toggle=\"modal\" data-bs-target=\"#coupleModal\">짝꿍 요청하기</a>");
    } else if ( state == "WAITING" ) {
        loadLover(waitingComment);
    } else {
        loadLover(matchedComment);
    }
}

function loadLover(callback) {
    $.ajax({
        type: "GET",
        url: "http://localhost:8080/account/lover",
        dataType: "json",
        success: function(data) {
            callback(data);
        },
        error: function(e) {
            alert("lover 값을 가져오지 못했습니다.");
        }
    });
}

function waitingComment(data) {
    $("div#loverStateResult").append("<p class=\"text-sm-start\">아직 "+data.name.toString()+"("+data.email.toString()+")님으로부터 승인을 대기중입니다. 상대방의 확인이 끝날 때 까지 기다려주세요.</p>");
}

function matchedComment(data) {
    $("div#loverStateResult").append("<p class=\"text-sm-start\">"+data.name.toString()+"("+data.email.toString()+")님과 짝꿍입니다!</p>");
}

async: false 를 쓰지 않아도 데이터를 안전하게 받을 수 있다!

---

내일 할 것.

• 신청 받은 내역 확인/거절 프로세스 만들기
• 내가 신청한 이력을 취소할 수 있는 기능 만들기