From d55e6f656b3fbe1f3a29215dfea10e0d13c8c3db Mon Sep 17 00:00:00 2001 From: Eunjin3395 Date: Mon, 23 Sep 2024 18:30:08 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=90=9B=20[Fix]=20=EC=B1=84=ED=8C=85?= =?UTF-8?q?=EB=B0=A9=20=EB=AA=A9=EB=A1=9D=20=EC=A1=B0=ED=9A=8C=20API=20end?= =?UTF-8?q?point=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/scripts/api.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/public/scripts/api.js b/public/scripts/api.js index bf6411d..24c7b5a 100644 --- a/public/scripts/api.js +++ b/public/scripts/api.js @@ -83,10 +83,14 @@ async function getFriendListApi(cursor) { } } -async function getChatroomListApi() { +async function getChatroomListApi(cursor) { try { const jwtToken = localStorage.getItem("jwtToken"); - const response = await fetch(`${API_SERVER_URL}/v1/member/chatroom`, { + let url = `${API_SERVER_URL}/v1/member/chatroom`; + if (cursor) { + url += `?cursor=${cursor}`; + } + const response = await fetch(url, { headers: { Authorization: `Bearer ${jwtToken}`, // Include JWT token in header }, From 01370b5b290cf4ef1110f25ce948ac86dc4672d4 Mon Sep 17 00:00:00 2001 From: Eunjin3395 Date: Mon, 23 Sep 2024 18:33:31 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=90=9B=20[Fix]=20=EC=B1=84=ED=8C=85?= =?UTF-8?q?=EB=B0=A9=20=EB=AA=A9=EB=A1=9D=20=ED=99=94=EB=A9=B4=20=EB=A0=8C?= =?UTF-8?q?=EB=8D=94=EB=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/scripts/eventListeners.js | 79 +++++++++++++++++++++++++++++++- public/scripts/socket.js | 2 + public/styles.css | 6 +++ 3 files changed, 85 insertions(+), 2 deletions(-) diff --git a/public/scripts/eventListeners.js b/public/scripts/eventListeners.js index 4e142df..b138912 100644 --- a/public/scripts/eventListeners.js +++ b/public/scripts/eventListeners.js @@ -318,16 +318,19 @@ fetchChatroomsButton.addEventListener("click", () => { } // (#8-1) 채팅방 목록 조회 api 요청 - getChatroomListApi().then((result) => { + getChatroomListApi(null).then((result) => { if (result) { // (#8-2) 채팅방 목록 조회 성공 응답 받음 // 채팅방 목록 element 초기화 const chatroomListElement = document.getElementById("chatroomList"); chatroomListElement.innerHTML = ""; + hasNextChatroom = result.has_next; + nextChatroomCursor = result.next_cursor; + // (#8-3) 채팅방 목록 렌더링 // api result data를 돌면서 html 요소 생성 - result.forEach((chatroom) => { + result.chatroomViewDTOList.forEach((chatroom) => { const li = document.createElement("li"); li.classList.add("chatroom-item"); li.setAttribute("data-chatroom-uuid", chatroom.uuid); // data-chatroom-uuid 값 세팅 @@ -361,6 +364,78 @@ fetchChatroomsButton.addEventListener("click", () => { }); }); +// 채팅방 목록 내부에서 스크롤이 가장 아래에 닿았을 때 +document.addEventListener("DOMContentLoaded", () => { + const chatroomListElement = document.getElementById("chatroomList"); + + chatroomListElement.addEventListener("scroll", () => { + // 스크롤이 가장 아래에 닿았는지 확인 + const isScrollAtBottom = chatroomListElement.scrollTop + chatroomListElement.clientHeight >= chatroomListElement.scrollHeight; + + if (isScrollAtBottom) { + // 더 조회해올 다음 친구 목록이 있다면 + if (hasNextChatroom) { + fetchNextChatrooms(nextChatroomCursor); + } else { + console.log("=== End of Chatroom List, No fetch ==="); + } + } + }); +}); + +// nextChatroomCursor 기반으로 다음 채팅방 목록 조회 api 요청 및 화면 렌더링 +function fetchNextChatrooms(cursor) { + const jwtToken = localStorage.getItem("jwtToken"); + if (!jwtToken) { + console.error("JWT token is missing."); + return; + } + + getChatroomListApi(cursor).then((result) => { + if (result) { + // (#8-2) 채팅방 목록 조회 성공 응답 받음 + // 채팅방 목록 element 초기화 + const chatroomListElement = document.getElementById("chatroomList"); + + hasNextChatroom = result.has_next; + nextChatroomCursor = result.next_cursor; + + // (#8-3) 채팅방 목록 렌더링 + // api result data를 돌면서 html 요소 생성 + result.chatroomViewDTOList.forEach((chatroom) => { + const li = document.createElement("li"); + li.classList.add("chatroom-item"); + li.setAttribute("data-chatroom-uuid", chatroom.uuid); // data-chatroom-uuid 값 세팅 + + li.innerHTML = ` +
+ Profile Image +
+
+ ${chatroom.targetMemberName} +

${chatroom.lastMsg ? chatroom.lastMsg : " "}

+
+
+

${new Date(chatroom.lastMsgAt).toLocaleString()}

+

${chatroom.notReadMsgCnt}

+ +
+ `; + chatroomListElement.appendChild(li); + }); + + // 채팅방 입장 버튼에 eventListener 추가 + const enterChatroomButtons = document.querySelectorAll(".enter-chatroom-btn"); + enterChatroomButtons.forEach((button) => { + button.addEventListener("click", (event) => { + const chatroomUuid = event.target.getAttribute("data-chatroom-uuid"); + enterChatroom(chatroomUuid); + }); + }); + } + }); +} + // 채팅방 입장 시 function enterChatroom(chatroomUuid) { console.log(`Entering chatroom with UUID: ${chatroomUuid}`); diff --git a/public/scripts/socket.js b/public/scripts/socket.js index df09e20..4973b54 100644 --- a/public/scripts/socket.js +++ b/public/scripts/socket.js @@ -6,7 +6,9 @@ let currentViewingChatroomUuid = null; // 현재 이 사용자가 보고 있는 let messagesFromThisChatroom = []; // 현재 보고 있는 채팅방의 메시지 목록 let hasNextChat = false; // 채팅 내역 조회를 위해, 다음 채팅내역이 존재하는지 여부 저장 let hasNextFriend = false; // 친구 목록 조회를 위해, 다음 친구 목록이 존재하는지 여부 저장 +let hasNextChatroom = false; // 채팅방 목록 조회를 위해, 다음 채팅방 목록이 존재하는지 여부 저장 let nextFriendCursor = null; // 다음 친구 목록 조회를 위한 커서 +let nextChatroomCursor = null; // 다음 채팅방 목록 조회를 위한 커서 let currentSystemFlag = null; // 현재 채팅방에서 메시지 전송 시 보내야할 systemFlag 저장 const loginStatus = document.getElementById("loginStatus"); diff --git a/public/styles.css b/public/styles.css index 41340b7..a40c1da 100644 --- a/public/styles.css +++ b/public/styles.css @@ -154,6 +154,12 @@ p[data-new-count] { #chatroomList { padding-left: 5px; + flex: 1; + overflow-y: auto; +} +#chatroomsList li { + display: flex; /* Use flexbox for alignment */ + align-items: center; /* Center items vertically */ } #friendsList {