feat : Add paging

src/API/UserService.js

@@ -3,7 +3,6 @@ import env from '../Components/Common/dotenv';
 const API_User_URL = env.REACT_APP_API_BASE_URL + "/user";
 const accessToken = localStorage.getItem("accessToken");
 
-
 const UserService = {
   getFriendList: async () => {
     try {

src/Components/Chat/ChatScreen.js

 import React, { useState, useEffect } from "react";
 import { useSocket } from "../../Contexts/SocketContext";
-import chatService from "../../API/ChatService"
-import userService from "../../API/UserService"
+import chatService from "../../API/ChatService";
+import userService from "../../API/UserService";
 import Message from "./Message";
 
 function ChatScreen({ roomId, userInfo }) {
@@ -10,18 +10,30 @@ function ChatScreen({ roomId, userInfo }) {
   const [message, setMessage] = useState("");
   const [userId, setUserId] = useState();
   const [startId, setStartId] = useState(null);
+  const [isNearBottom, setIsNearBottom] = useState(true);
+  const [scrollPosition, setScrollPosition] = useState(null);
 
   useEffect(() => {
     fetchUserInfo();
-    fetchMesssages();
-
+    fetchMessages();
     sendMessageWhenReady(socket, { type: "joinRoom", data: { roomId } });
+
     socket.addEventListener("message", handleSocketMessage);
+
     return () => {
       socket.removeEventListener("message", handleSocketMessage);
     };
   }, []);
 
+  useEffect(() => {
+    if(scrollPosition == 0) {
+      fetchMessages();
+      window.scrollTo({
+        top: document.documentElement.scrollHeight-10,
+      });
+    }
+  }, [scrollPosition]);
+
   function sendMessageWhenReady(client, message) {
     if (client.readyState === WebSocket.OPEN) {
       client.send(JSON.stringify(message));
@@ -30,10 +42,18 @@ function ChatScreen({ roomId, userInfo }) {
     }
   }
 
-  const fetchMesssages = async () => {
+  const fetchMessages = async () => {
     const response = await chatService.getMessages(roomId, startId);
     setStartId(response.nextId);
-    setMessages(response.messages);
+    setMessages((prevMessages) => {
+      let newMessages = [];
+      if (startId) {
+        newMessages = response.messages.concat(prevMessages);
+      } else {
+        newMessages = response.messages;
+      }
+      return newMessages;
+    });   
   };
 
   const fetchUserInfo = async () => {
@@ -41,10 +61,6 @@ function ChatScreen({ roomId, userInfo }) {
     setUserId(response.id);
   };
 
-  // useEffect(() => {
-  //   console.log(messages);
-  // }, [messages]);
-
   const handleSocketMessage = (event) => {
     const receivedMessage = JSON.parse(event.data);
 
@@ -69,6 +85,7 @@ function ChatScreen({ roomId, userInfo }) {
       data: { userName: userId, roomId, message },
     });
     setMessage("");
+    handleScrollToBottom(true);
   };
 
   const getUserInfo = (id) => {
@@ -79,18 +96,57 @@ function ChatScreen({ roomId, userInfo }) {
     }
   };
 
+  const handleScroll = () => {
+    setScrollPosition(window.scrollY);
+    const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
+    const num = scrollTop + clientHeight >= scrollHeight - 100;
+    setIsNearBottom(num);
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  useEffect(() => {
+    handleNewMessage();
+  }, [messages]);
+
+  const handleScrollToBottom = () => {
+      window.scrollTo({
+        top: document.documentElement.scrollHeight,
+      });
+  };
+
+  const handleNewMessage = () => {
+    if(isNearBottom) {
+      window.scrollTo({
+        top: document.documentElement.scrollHeight,
+      });
+    }
+  };
+
   return (
-    <main className="main-screen main-chat">
+    <main>
+      <div className="main-screen main-chat">
+        {!isNearBottom && (
+          <button className="scroll-to-bottom-btn" onClick={handleScrollToBottom}>
+            이동
+          </button>
+        )}
         {Array.isArray(messages) &&
           messages.map((msg) => (
             <Message
+              key={msg.id}
               message={msg}
               userId={userId}
               senderInfo={getUserInfo(msg.sender)}
             />
           ))}
-      <div className="reply">
-        <div className="reply__column">
+      </div>
+      <footer className="reply">
         <input
           type="text"
           placeholder="Write a message..."
@@ -102,8 +158,7 @@ function ChatScreen({ roomId, userInfo }) {
             }
           }}
         />
-        </div>
-      </div>
+      </footer>
     </main>
   );
 }

src/Components/Chat/Message.js

 import React from "react";
 import "../../css/components/message.css";
+import env from "../Common/dotenv";
 
 function Message({ message, userId, senderInfo }) {
   const isOwnMessage = message.sender === userId;
@@ -8,20 +9,20 @@ function Message({ message, userId, senderInfo }) {
   }`;
   return (
     <div className={messageRowClass}>
-      {!isOwnMessage && (
+      {!isOwnMessage ? (
         <img
           src={
             senderInfo.profileImage == null || senderInfo.profileImage == ""
-              ? "http://localhost:8040/uploads/default-profile.png"
+              ? `${env.REACT_APP_IMAGE_BASE_URL}/uploads/default-profile.png`
               : senderInfo.profileImage
           }
           alt={senderInfo.name}
         />
-      )}
+      ):""}
       <div className="message-row__content">
-        {!isOwnMessage && (
+        {!isOwnMessage ? (
           <span className="message__author">{senderInfo.name}</span>
-        )}
+        ):""}
         <div className="message__info">
           <span className="message__bubble">{message.content}</span>
           <span className="message__time">{message.timestamp}</span>

src/Components/Chat/UserMessage.js

+import env from "../Common/dotenv"
+
 function UserMessage({
   avatar,
   name,
@@ -14,7 +16,7 @@ function UserMessage({
           <img
             src={
               avatar == null || avatar == ""
-                ? "http://localhost:8040/uploads/default-profile.png"
+                ? `${env.REACT_APP_IMAGE_BASE_URL}/uploads/default-profile.png`
                 : avatar
             }
             className="user-component__avatar user-component__avatar--xl"

src/Components/Common/CommonForm.js

@@ -3,7 +3,6 @@ import { useState } from "react";
 import { EmailButton } from '../Auth/Signin/EmailButton.js';
 import authService from "../../API/AuthService.js";
 
-
 function CommonForm({ onSubmit, buttonText, fields, showVerificationButton, setWarningMessage }) {
   const [emailMessage, setEmailMessage] = useState("전송");
   const [emailValue, setEmailValue] = useState("");

src/Components/Common/dotenv.js

 export const loadEnv = {
     REACT_APP_API_BASE_URL: "http://localhost:8080/api", // include /api prefix
-    REACT_APP_IMAGE_BASE_URL: "http://localhost:8040"
+    REACT_APP_IMAGE_BASE_URL: "http://localhost:8040",
+    REACT_APP_SOCKET_BASE_URL: "ws://localhost:3001"
 };
 
 export default loadEnv;
\ No newline at end of file

src/Components/User/FriendsList.js

@@ -4,6 +4,7 @@ import UserService from "../../API/UserService";
 import ChatService from "../../API/ChatService";
 import AuthService from "../../API/AuthService";
 import Comment from "../../assets/speech-bubble.png";
+import env from "../Common/dotenv"
 
 import { useEffect, useState } from "react";
 
@@ -86,7 +87,7 @@ function FriendsList() {
             key={friend.id}
             avatar={
               friend.profileImage == null || friend.profileImage == ""
-                ? "http://localhost:8040/uploads/default-profile.png"
+                ? `${env.REACT_APP_IMAGE_BASE_URL}/uploads/default-profile.png`
                 : friend.profileImage
             }
             name={friend.name}

src/Components/User/ProfileUpdate.js

 import { useRef, useEffect, useState } from "react";
 import UserService from "../../API/UserService";
-const baseURL = "http://localhost:8040";
+import env from "../Common/dotenv"
 
 function ProfileUpdate({ onClose, origin_image, origin_comment, name }) {
   const [image, setImage] = useState(null);
@@ -20,7 +20,7 @@ function ProfileUpdate({ onClose, origin_image, origin_comment, name }) {
     formData.append("image", file);
 
     try {
-      const response = await fetch(`${baseURL}/api/upload`, {
+      const response = await fetch(`${env.REACT_APP_IMAGE_BASE_URL}/api/upload`, {
         method: "POST",
         body: formData,
       });
@@ -30,7 +30,7 @@ function ProfileUpdate({ onClose, origin_image, origin_comment, name }) {
       }
 
       const data = await response.json();
-      setImageUrl(`${baseURL}${data.imageUrl}`); // 서버로부터 받은 이미지 URL
+      setImageUrl(`${env.REACT_APP_IMAGE_BASE_URL}${data.imageUrl}`); // 서버로부터 받은 이미지 URL
     } catch (error) {
       console.error(error);
     }

src/Components/User/UserComponent.js

 import React from "react";
+import env from "../Common/dotenv"
 import "../../css/components/userProfile.css";
 
 function UserComponent({ avatar, name, subtitle, additionalContent }) {
@@ -14,7 +15,7 @@ function UserComponent({ avatar, name, subtitle, additionalContent }) {
         <img
           src={
             !avatar
-              ? "http://localhost:8040/uploads/default-profile.png"
+              ? `${env.REACT_APP_IMAGE_BASE_URL}/uploads/default-profile.png`
               : avatar
           }
           className="user-component__avatar"

src/Components/User/UserList.js

@@ -5,7 +5,7 @@ import AuthService from "../../API/AuthService";
 
 import Add from "../../assets/add-friend-icon.png";
 
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 function UserList() {
   const [showAddedFriends, setShowAddedFriends] = useState(false);

src/Components/User/UserProfile.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import UserService from "../../API/UserService";
 import AuthService from "../../API/AuthService";
 import ProfileComponent from "./ProfileComponent";
+import env from "../Common/dotenv"
 
 function UserProfile() {
   const accessToken = localStorage.getItem("accessToken");
@@ -17,7 +18,7 @@ function UserProfile() {
         if (response) {
           setSubtitle(response.comment);
           if (response.profileImage == null || response.profileImage == "") {
-            setUserProfile("http://localhost:8040/uploads/default-profile.png");
+            setUserProfile(`${env.REACT_APP_IMAGE_BASE_URL}/uploads/default-profile.png`);
           } else {
             setUserProfile(response.profileImage);
           }

src/Contexts/SocketContext.js

 import React, { createContext, useContext, useEffect } from "react";
+import env from "../Components/Common/dotenv"
 
 const SocketContext = createContext();
 
-const socket = new WebSocket("ws://localhost:3001");
+const socket = new WebSocket(`${env.REACT_APP_SOCKET_BASE_URL}`);
 
 export function useSocket() {
   return useContext(SocketContext);

src/Pages/Chat/Chat.js

@@ -19,7 +19,7 @@ function Chat() {
 
   return (
     <WebSocketProvider>
-      <div id="chat-screen">
+      <div>
         <ChatHeader roomId={roomId} />
         {userInfo ? <ChatScreen roomId={roomId} userInfo={userInfo} /> : ""}
       </div>

src/css/components/chat.css

@@ -107,6 +107,7 @@
   position: fixed;
   bottom: 0;
   width: 100%;
+  height: 3%;
   background-color: white;
   display: flex;
   justify-content: space-between;

src/css/components/chatHeader.css

 .alt-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3%;
+  z-index: 100;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 1rem;
+  padding: 2vh;
   background-color: #0054a6; /* 아주대학교 색상인 파란색으로 변경 */
   color: #fff;
 }

src/css/components/message.css

 .main-screen.main-chat {
   /* background-color: #f9f9f9; */
-  padding: 20px;
+  padding-left: 3vw;
+  padding-right: 3vw;
   overflow-y: auto;
+  margin-top: 7vh;
+  margin-bottom: 7vh;
 }
+
 .message {
   margin-bottom: 20px;
   padding: 10px;
@@ -16,15 +20,6 @@
   margin-bottom: 5px;
 }
 
-.reply {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 10px;
-  background-color: #fff;
-  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
-}
 .reply__column {
   display: flex;
   align-items: center;
@@ -97,10 +92,29 @@
   background-color: #fee500;
 }
 
+.scroll-to-bottom-btn {
+  position: fixed;
+  bottom: 5%;
+  left: 50%;
+  transform: translateX(-50%); 
+  background-color: #0054a6;
+  color: #fff;
+  border: none;
+  border-radius: 25%;
+  padding: 1%;
+  cursor: pointer;
+  display: flex; 
+  align-items: center; 
+  justify-content: center; 
+  white-space: nowrap;
+  margin-bottom: 1%;
+}
+
 .reply {
-  /* display: flex; */
-  justify-content: space-between;
-  padding: 10px;
+  display: flex;
+  justify-content: start;
+  padding: 1vh;
+  height: 3vh;
   background-color: #fff;
   position: fixed;
   bottom: 0;

src/css/components/styles.css

@@ -6,26 +6,6 @@ body, h1, p, input, button, span {
   -moz-osx-font-smoothing: grayscale;
 }
 
-.status-bar {
-  background-color: #0054a6; 
-  color: white;
-  padding: 10px 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 14px;
-}
-
-.status-bar__column span {
-  display: flex;
-  align-items: center;
-}
-
-.status-bar__column span:not(:last-child) {
-  margin-right: 10px;
-}
-
-
 input::placeholder {
   color: #bbb;
 }