3-1. 받은 / 보낸 쪽지 목록

받은 쪽지와 보낸 쪽지는 불러오는 내용과 '답장' 버튼의 유무 정도 차이만 있다.

 

우선 네비바에 있는 '쪽지함'의 경로는 mypage/message 로 받은 쪽지 목록이 바로 출력되게 만들었으며,

다른 사용자에게 보낸 쪽지의 경우 '보낸 쪽지' 버튼을 클릭할 시에만 활성화되도록 설정했다.

 

1. JSP, JavaScript

2. Controller

3. Service (DAO)

4. DTO

5. SQL (Mapper)

 

---

1. JSP, JavaScript

 

쪽지 목록 불러오기

<button type="button" id="btn-recv">받은 쪽지</button>
<button type="button" id="btn-send">보낸 쪽지</button>

 

버튼을 누르게 되면 ready 함수 안에 있는 아래의 JavaScript가 실행된다.

 

JavaScript

//받은 쪽지
$("#btn-recv").click(function() {
    $.ajax({
      url: '/mypage/message',
      type: 'GET',
      success: function(data) {
        console.log("받은 쪽지 목록을 가져옴")

        $(".left-bottom table").empty()

        if(!Array.isArray(data) || data.length === 0) {
            $(".left-bottom table").append('<div></div>')
        } else {
            let rows = ''

            $.each(data, function(index, message) {
                rows += '<tr class="title-line" style="font-weight: 200">'
                rows += '<td class="msg-img">'		+ message.image			+ '</td>'
                rows += '<td class="msg-nicknm">'	+ message.user_nicknm	+ '</td>'
                rows += '<td class="msg-sort">'		+ message.send_user_no	+ '</td>'
                rows += '<td class="msg-content">'	+ message.content		+ '</td>'
                rows += '<td class="msg-time">'		+ message.send_date		+ '</td>'
                rows += '<td class="msg-del"><button class="delBtn" style="border: none; color: red;"><i class="fas fa-times"></i></button></td>'
                rows += '</tr>'
            })
            $(".left-bottom table").append(rows)
        }
        location.href="/mypage/message"
      },
      error: function() {
        alert("error")
        sendButton.click();
      }
    })
})

 

//보낸 쪽지
$("#btn-send").click(function() {
    $.ajax({
      url: '/mypage/message/send',
      type: 'GET',
      success: function(data) {
        console.log("보낸 쪽지 목록을 가져옴")

        $(".left-bottom table").empty()

        if(!Array.isArray(data) || data.length === 0) {
            $(".left-bottom table").append('<div></div>')
        } else {
            let rows = ''

            $.each(data, function(index, message) {
                rows += '<tr class="title-line" style="font-weight: 200">'
                rows += '<td class="msg-img">'		+ message.image			+ '</td>'
                rows += '<td class="msg-nicknm">'	+ message.user_nicknm	+ '</td>'
                rows += '<td class="msg-sort">'		+ message.receive_user_no	+ '</td>'
                rows += '<td class="msg-content">'	+ message.content		+ '</td>'
                rows += '<td class="msg-time">'		+ message.send_date		+ '</td>'
                rows += '<td class="msg-del"><button class="delBtn" style="border: none; color: red;"><i class="fas fa-times"></i></button></td>'
                rows += '</tr>'
            })
            $(".left-bottom table").append(rows)
        }
        location.href="/mypage/message/send"
        },
      error: function() {
        alert("error")
        recvButton.click();
      }
    })
  })

 

 

JSP

위의 내용은 아래 jsp에 해당된다

<table>
    <c:if test="${totalCnt == null || totalCnt == 0}">
        <div style="display: flex; margin-top: 20px; justify-content: center; color: #8f8f8f;">보관된 쪽지가 없습니다.</div>
    </c:if>
    <c:forEach var="messageDTO" items="${list }">
        <tr class="title-line" style="font-weight: 200">
            <td class="msg-no" style="display: none; ">${messageDTO.message_no}</td>
            <input name="message_no" type="hidden" value="${messageDTO.message_no}" />
            <td class="msg-img">
                <a href="javascript:goProfile('${(messageDTO.send_user_no != sessionScope.user_no) ? messageDTO.send_user_no : messageDTO.receive_user_no}', '${messageDTO.user_nicknm}')">
                    <img src="${messageDTO.image }" class="user-image" alt="프로필사진" />
                </a>
            </td>
            <td class="msg-nicknm">${messageDTO.user_nicknm }</td>
            <td class="msg-sort" style="display: none; ">${(messageDTO.send_user_no != sessionScope.user_no) ? messageDTO.send_user_no : messageDTO.receive_user_no}</td>
            <c:if test="${messageDTO.read_yn == true }">
                <td class="msg-content" style="cursor: pointer; color: rgb(138, 138, 138);"><c:out value="${messageDTO.content }"></c:out></td>
            </c:if>
            <c:if test="${messageDTO.read_yn == false }">
                <td class="msg-content" style="cursor: pointer;"><c:out value="${messageDTO.content }"></c:out></td>
            </c:if>
            <td class="msg-time"><fmt:formatDate value="${messageDTO.send_date}" pattern="yyyy-MM-dd HH:mm" type="date" /></td>
            <td class="msg-del"><button class="delBtn" name="deleteBtn" style="border: none; color: red;" id="del" data-bs-toggle="modal" data-bs-target="#exampleModa2"><i class="fas fa-times"></i></button></td>
        </tr>			            
    </c:forEach>			           
</table>

 

또한, 받은 쪽지함과 보낸 쪽지함을 구분하기 위해 위와 같이 현재 페이지에 있는 버튼에 색상을 부여했는데, 이는 경로(주소창)를 따라가는 방식으로 설정을 해놨다.

 

JavaScript

const recvButton = $("#btn-recv")
const sendButton = $("#btn-send")

const currentPath = window.location.pathname;
  if (currentPath === '/mypage/message') {
  recvButton.addClass('active');
  sendButton.removeClass('active');
} else if (currentPath === '/mypage/message/send') {
  recvButton.removeClass('active');
  sendButton.addClass('active');
}

 

CSS

button.active {
  background-color: #33FF33;
  color: black;
  font-weight: 600;
}

 

---

 

쪽지 내용 불러오기

 

 

'msg-content' 클래스를 클릭할 시 해당 쪽지의 내용이 오른쪽 박스에 나타나게 되며

read_yn 컬럼이 false에서 true로 업데이트 된다.

 

'받은 쪽지'함에서 'msg-content' 클래스를 클릭하면 오른쪽에 '답장' 버튼이 나타나지만

'보낸 쪽지'함에서 해당 클래스를 선택하면 '답장' 버튼은 나타나지 않는다.

 

JavaScript

// 쪽지 내용, 상대 닉네임 불러오기, 내용 있을 시 답장 버튼 불러옴
$(".msg-content").click(function() {
    var $this = $(this); // 클로저를 활용하여 $(this)를 변수에 저장

    var content = $(this).text()
    var message_no = $(event.target).closest("tr").find("input[name='message_no']").val();
    $(".msg-view-content").text(content)

    if ((content !== "") && recvButton.hasClass("active")) {
        $(".msg-write-btn").show()
    } else {
        $(".msg-write-btn").hide()
    }

    //선택한 쪽지의 번호와 보낸 유저의 번호를 답장 창 url로 넘기기
    var msgNo = $(this).siblings(".msg-no").text()
    var sendUserNo = $(this).siblings(".msg-sort").text()
    $('input[name=msgno]').val(msgNo)
    $('input[name=sendno]').val(sendUserNo)

    var url = "/messagewindow/open?send_user_no=" + encodeURIComponent(sendUserNo) + "&message_no=" + encodeURIComponent(msgNo)
    $("#msg-write").attr("data-url", url) // 답장 버튼에 URL을 저장

    var sendUserNk = $(this).siblings(".msg-nicknm").text()
    $("#msg-number").text(msgNo)
    $("#msgNick").text(sendUserNk)

	//받은 쪽지의 내용을 읽었을 때 해당 쪽지를 읽음 상태로 업데이트
    $.ajax({
        url: '/mypage/message/updateReadCheck',
        type: 'POST',
        data: {message_no: message_no},
        success: function(response) {
            if(response === "success") {
                $this.css("color", "rgb(138, 138, 138)");
            }
        },
        error: function() {
            console.log("읽음 처리 실패");
        },	    	
    })
})

 

JSP

<c:if test="${messageDTO.read_yn == true }">
    <td class="msg-content" style="cursor: pointer; color: rgb(138, 138, 138);"><c:out value="${messageDTO.content }"></c:out></td>
</c:if>
<c:if test="${messageDTO.read_yn == false }">
    <td class="msg-content" style="cursor: pointer;"><c:out value="${messageDTO.content }"></c:out></td>
</c:if>

또한 read_yn의 컬럼이 true 인지 false인지에 따라 나타나는 색상을 다르게 설정해주었다.

이는 내가 읽은 쪽지와 읽지 않은 쪽지를 구별하기 위함이다.

 

 

2. Controller

//받은 쪽지함
@GetMapping(value = "/message")
public String message(MessageSearchItem msc, Model m, HttpSession session) {
    try {

        UserDTO userDTO = loginUserDao.select((String) session.getAttribute("id"));
        m.addAttribute("userDTO", userDTO);
        msc.setUser_no(userDTO.getUser_no());

        int totalCnt = messageService.getRecvResultCnt(msc);

        MessagePageResolver msgPageResolver = new MessagePageResolver(totalCnt, msc);

        //리스트 불러오기
        List<MessageDTO> listAll = messageService.loadRecvListAll(msc);
        //빈배열 생성
        List<MessageDTO> msgList = new ArrayList<>();			

        //삭제 상태가 아닌 쪽지들만 넣기
        for(MessageDTO messageDTO : listAll) {
            if(!messageDTO.isDelete_by_receiver()) {
                msgList.add(messageDTO);
            }
        }

        int startIndex = ((msc.getPage() - 1) * msc.getPageSize()) < 0 ? 0 : (msc.getPage() - 1) * msc.getPageSize();
        int endIndex = Math.min(startIndex + msc.getPageSize(), msgList.size());
        List<MessageDTO> list = msgList.subList(startIndex, endIndex);

        System.out.println("-------------list.size()--------------" +list.size());	        

        m.addAttribute("list", list);
        m.addAttribute("mpr", msgPageResolver);
        m.addAttribute("totalCnt", list.size());

    } catch (Exception e) {e.printStackTrace();}
    return "/mypage/myprofile/message";
}

 

//보낸 쪽지함
@GetMapping(value = "/message/send")
public String sendMessage(MessageSearchItem msc, Model m, HttpSession session, Integer page) {
    try {
        UserDTO userDTO = loginUserDao.select((String)session.getAttribute("id"));
        m.addAttribute("userDTO", userDTO);
        msc.setUser_no(userDTO.getUser_no());

        int totalCnt = messageService.getSendResultCnt(msc);

        m.addAttribute("totalCnt", totalCnt);
        MessagePageResolver msgPageResolver = new MessagePageResolver(totalCnt, msc);
        //먼저 불러오고
        List<MessageDTO> listAll = messageService.loadSendListAll(msc);
        //빈배열 생성
        List<MessageDTO> msgList = new ArrayList<>();			

        //삭제 상태가 아닌 쪽지들만 넣기
        //false여야 넣어짐
        for(MessageDTO messageDTO : listAll) {
            if(!messageDTO.isDelete_by_sender()) {
                msgList.add(messageDTO);
            }
        }

        int startIndex = ((msc.getPage() - 1) * msc.getPageSize()) < 0 ? 0 : (msc.getPage() - 1) * msc.getPageSize();
        int endIndex = Math.min(startIndex + msc.getPageSize(), msgList.size());
        List<MessageDTO> list = msgList.subList(startIndex, endIndex);       

        m.addAttribute("list", list);
        m.addAttribute("mpr", msgPageResolver);
        m.addAttribute("totalCnt", list.size());

    } catch (Exception e) {e.printStackTrace();}
    return "/mypage/myprofile/message";
}

 

//읽은 메시지로 수정하기 - 받은 쪽지함에서만 정상 작동
@PostMapping ("/message/updateReadCheck")
public ResponseEntity<String> updateReadCheck(HttpSession session, Integer message_no) {
    Integer user_no = (Integer) session.getAttribute("user_no");
    try {
        MessageDTO messageDTO = messageService.pickOneRecv(message_no);
        if (messageDTO.isRead_yn() == true) {
            System.out.println("==================이미 읽은 쪽지입니다");
            return ResponseEntity.ok("already_read");
        }
        if (user_no.equals(messageDTO.getReceive_user_no())) {
            System.out.println("==================쪽지를 읽어들였습니다");
            messageService.readYes(messageDTO);
            return ResponseEntity.ok("success");
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
    return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
}