Merge pull request #88 from Gamegoo-repo/fix/78

[Fix/78] 채팅방 목록 조회 API 변경에 따른 프론트 코드 수정

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
       },

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 = `
+                                                            <div>
+                                                                <img src="${chatroom.targetMemberImg}" alt="Profile Image" width="30" height="30">
+                                                            </div>
+                                                            <div class="chatroom-info">
+                                                                <span>${chatroom.targetMemberName}</span>
+                                                                <p last-msg-text>${chatroom.lastMsg ? chatroom.lastMsg : " "}</p>
+                                                            </div>
+                                                            <div>
+                                                                <p last-msg-time>${new Date(chatroom.lastMsgAt).toLocaleString()}</p>
+                                                                <p data-new-count>${chatroom.notReadMsgCnt}</p>
+                                                                <button class="enter-chatroom-btn" data-chatroom-uuid="${chatroom.uuid}">채팅방 입장</button>
+                                                            </div>
+                                                        `;
+        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}`);

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");

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 {