쪽지 상세읽기 기능의 변천사

첫번째 문제

✔︎ 문제 원인

• 쪽지 상세읽기(Get)를 하면 읽음 상태가 읽지않음(false) → 읽음(true) 으로 변경되는데, 보낸 쪽지함에서 쪽지를 보낸 유저가 읽을 때에도 읽음 상태가 변경되는 문제가 있었습니다.

✔︎ 해결 방법

• 보낸 쪽지 리스트에서 자신이 보낸 쪽지를 읽었을 때는 읽음상태가 바뀌지 않도록 구현하기 위해서 백엔드에서 기존의 코드 변경을 최소화하고, 프론트에서 쪽지 상세읽기 방법을 3개로 구분하여 구현해서 해결했습니다.
• 다른 유저가 보낸 쪽지를 확인할 때 답장보내기 버튼이 '있는' 모달로 연결 : ajax - GET 메소드 이용
  받은 쪽지리스트에서 본인이 보낸 쪽지를 확인할 때 답장보내기 버튼이 '없는' 모달로 연결 : ajax - GET 메소드 이용
• 보낸 쪽지리스트에서 본인이 보낸 쪽지를 확인할 때는 읽음상태를 변경하는 메소드가 있는 GET 메소드를 거치지 않기 위해서, 보낸 쪽지 리스트를 받아오는 GET 메소드에서 Dto로 모달에 보여져야하는 정보(content)를 추가적으로 받아온 후, 위의 2번 모달의 content의 id값에 직접적으로 연결해서 읽음상태가 변경되지 않으면서 정보가 보여지도록 구현했습니다.

기존 방식

| message.js

// 쪽지 상세 읽기
function getMessage(messageId) {
    let token = Cookies.get('token');
    $.ajax({
        type: 'GET',
        url: process.env.BACKEND_HOST + '/message/' + messageId,
        beforeSend: function (xhr) {
            xhr.setRequestHeader('Content-type', 'application/json');
            xhr.setRequestHeader('Authorization', 'Bearer ' + token);
        },
        data: {},
        success: function (response) {
            let message = response;
            let title = message['title'];
            let content = message['content'];
            $('#title').html(title);
            $('#content').html(content);
            window.openDetailMessageModal();
        }
    });
}

변경 후

// 보낸 쪽지 리스트 불러오기
function getCreateMessageList() {
        ・・・
$('#message-list').append(messagesHTML);  
$('#title-send').text(title); 
$('#content-send').text(content);  // 모달의 id값(#content-send)에 Dto로 추가적으로 받아온 정보를 넘겨줌
        ・・・
}

// 쪽지 상세 읽기
function getMessage(messageId) {
    let token = Cookies.get('token');

    $.ajax({
        type: 'GET',
        url: process.env.BACKEND_HOST + '/message/' + messageId,

        beforeSend: function (xhr) {
            xhr.setRequestHeader('Content-type', 'application/json');
            xhr.setRequestHeader('Authorization', 'Bearer ' + token);
        },
        data: {},

        success: function (response) {
            let message = response;
            localStorage.setItem('message', JSON.stringify(message));

            let member = message['member'];
            let sender = message['sender'];
            let title = message['title'];
            let content = message['content'];

            if (member == sender) {
                window.openSendDetailMessageModal();
                $('#title-send').html(title);
                $('#content-send').html(content);
            }
            else {
                window.openReadDetailMessageModal();
                $('#title-read').html(title);
                $('#content-read').html(content);
                $('input[id=receiver_createMessage]').val(sender);
            }
        }
    });
}

두번째 문제

✔︎ 문제 원인

• 기존 보낸쪽지함에서 본인이 보낸 쪽지 내용을 상세읽기할 때
  receiver의 쪽지함에서 쪽지의 읽음상태가 변경(백엔드의 HTTP-GET 메소드에서 쪽지 상세읽기를 할 때 읽음상태는 무조건 변경됨)되지 않게하기 위해서 쪽지 상세읽기 GET메소드를 거치지 않고
  보낸 쪽지 리스트를 불러오는 GET 메소드에서 Html-id값에 직접적으로 data(title, content) 를 보내줬던 방식을 사용했었음.
• 여기서 각 쪽지의 제목 & 내용이 messageId 값에 맞춰 알맞게 들어가는 것이 아닌 리스트의 첫번째 쪽지 id의 data만 중복해서 나오는 에러 확인
• 백엔드에서 sender == receiver일 때, 읽음상태가 변경되지 않도록 분기처리를 하면, 사용자가 본인에게 보낸 쪽지를 확인해도 읽음상태가 변경되지 않는 문제가 있음

✔︎ 문제 해결

• 백엔드에서 본인에게 쪽지를 보낼 수 없도록 수정 (보낼 경우 에러메시지 나타남)
• 기존에 보낸 쪽지리스트 GET 메소드에서 Html-id값에 직접적으로 data를 보내주는 방식은 더이상 사용하지 않음
• 보낸 쪽지에서는 답장보내기 버튼이 없는 모달 & 받은 쪽지를 확인할 때는 답장보내기 버튼이 있는 모달이 뜨도록 → 기존에 사용했던 분기처리만 사용해서 구분

📌 MessageSerivce.java 코드변화