카테고리 없음
3-1. 받은 / 보낸 쪽지 목록
ssoyul
2023. 9. 4. 16:49
받은 쪽지와 보낸 쪽지는 불러오는 내용과 '답장' 버튼의 유무 정도 차이만 있다.
우선 네비바에 있는 '쪽지함'의 경로는 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();
}