Merge pull request #48 from yu-senier-project/feat/message

fix: 파일 모아보기, 채팅 무한스크롤, 채팅방UI수정(채팅방, 초대, 방생성)

src/apis/registerApis.js

@@ -50,6 +50,7 @@ export const sendAuthCode = async (formData, companyEmail, toggle) => {
     const res = await axios.get(
       `${BaseUrl}/api/v1/email-auth/request/${formData.email}@${companyEmail}`
     );
+
     return { statusCode: res.status, data: res.data };
   } catch (err) {
     alert("이메일 전송에 실패했습니다.");

src/modal/FileModal.jsx

@@ -0,0 +1,71 @@
+// FileModal.jsx
+import React, { useState } from "react";
+import Modal from "@mui/material/Modal";
+import Box from "@mui/material/Box";
+import "../styles/message/fileModal.scss";
+
+const style = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: '80%',
+  bgcolor: 'background.paper',
+  boxShadow: 24,
+  p: 4,
+};
+
+const imageStyle = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 'auto',
+    height: 'auto',
+    maxWidth: '80%',
+    maxHeight: '80%',
+    bgcolor: 'background.paper',
+    boxShadow: 24,
+    p: 4,
+  };
+
+
+export default function FileModal({ open, handleClose, files = [] }) {
+  const [selectedImage, setSelectedImage] = useState(null);
+
+  const handleImageClick = (fileUrl) => {
+    setSelectedImage(fileUrl);
+  };
+
+  const handleImageClose = () => {
+    setSelectedImage(null);
+  };
+
+  return (
+    <>
+      <Modal open={open} onClose={handleClose}>
+        <Box sx={style}>
+          <div className="file-grid">
+            {files.length !== 0 ? (
+              files.map((file, index) => (
+                <div className="file-grid-item" key={index} onClick={() => handleImageClick(file.fileUrl)}>
+                  <img src={file.fileUrl} alt={`file-${index}`} className="file-grid-image" />
+                </div>
+              ))
+            ) : (
+              <p className="no-files-message">파일이 없습니다!</p>
+            )}
+          </div>
+        </Box>
+      </Modal>
+
+      {selectedImage && (
+        <Modal open={true} onClose={handleImageClose}>
+          <Box sx={imageStyle}>
+            <img src={selectedImage} alt="Selected" style={{ width: '100%', height: '100%' }} />
+          </Box>
+        </Modal>
+      )}
+    </>
+  );
+}

src/modal/MessageInviteModal_Invite.jsx

@@ -2,24 +2,37 @@ import React, { useState, useCallback, useEffect } from "react";
 import Modal from "@mui/material/Modal";
 import Input from "../component/basic/Input";
 import apiClient from "../util/BaseUrl";
-import axios from "axios";
 import { debounce } from "lodash";
 import Button from "../component/basic/Button";
 import CloseButton from "../component/basic/CloseButton";
 import useMessageStore from "../store/message/useMessageStore";
 import "../styles/message/addroom.scss";
 
-function MessageInviteModal({ open, handleClose, selectedRoom, memberId }) {
+function MessageInviteModal({ open, handleClose, selectedRoom, memberId, close,setMessages }) {
   const [people, setPeople] = useState([]);
   const [search, setSearch] = useState("");
-  const { addRoom, fetchRooms, roomNumber } = useMessageStore();
+  const { addRoom, fetchRooms, roomNumber,fetchMessages } = useMessageStore();
   const [existsPeople, setExistsPeople] = useState([]);
   const [selectedPeople, setSelectedPeople] = useState([]);
+  const [addPeople, setAddPeople] = useState([]);
+
+  useEffect(() => {
+    const fetchSelectedPeople = async () => {
+      try {
+        const response = await apiClient.get(`/api/v1/chat-room/${selectedRoom}/participant`);
+        console.log(response);
+        setSelectedPeople(response.data);
+      } catch (error) {
+        console.error('Error fetching selected people:', error);
+      }
+    };
+
+    fetchSelectedPeople();
+  }, [selectedRoom]);
 
   const debouncedFetchPeople = useCallback(
     debounce(async (value) => {
       if (value.trim()) {
-        const memberId = localStorage.getItem("memberId");
         try {
           const { data } = await apiClient.get(
             `/api/v1/member/for-invite/search?memberId=${memberId}&nickname=${value}&roomId=${selectedRoom}`
@@ -35,7 +48,7 @@ function MessageInviteModal({ open, handleClose, selectedRoom, memberId }) {
         setPeople([]);
       }
     }, 300),
-    [selectedRoom, existsPeople]
+    [selectedRoom, existsPeople, memberId]
   );
 
   const handleSearchChange = (e) => {
@@ -45,19 +58,27 @@ function MessageInviteModal({ open, handleClose, selectedRoom, memberId }) {
   };
 
   const handleSelectPerson = (nickname, memberId) => {
-    setExistsPeople((prev) => {
+    setSelectedPeople((prev) => {
       const isSelected = prev.some((person) => person.memberId === memberId);
       if (isSelected) {
         return prev.filter((person) => person.memberId !== memberId);
       } else {
         return [...prev, { nickname, memberId }];
       }
     });
+
+    setAddPeople((prev) => {
+      const isAdded = prev.some((person) => person.memberId === memberId);
+      if (isAdded) {
+        return prev.filter((person) => person.memberId !== memberId);
+      } else {
+        return [...prev, { nickname, memberId }];
+      }
+    });
   };
 
   const getExistsPeople = async () => {
     try {
-      console.log('qwer');
       const response = await apiClient.get(`/api/v1/chat-room/${selectedRoom}/participant?memberId=${memberId}`);
       console.log(response.data);
       setExistsPeople(response.data);
@@ -72,103 +93,139 @@ function MessageInviteModal({ open, handleClose, selectedRoom, memberId }) {
     }
   }, [open]);
 
-  const handleInvitePeople = () => {
-    // axios.post(`http://13.51.99.142:8080/api/v1/chat-room/1/invite?memberId=1&inviteList[nickname]=string&inviteList[memberId]=0`,).then().catch()
+  const handleInvitePeople = async () => {
+    try {
+      const inviteList = addPeople.map(person => ({
+        memberId: person.memberId,
+        nickname: person.nickname
+      }));
 
+      const data = {
+        inviteList: inviteList
+      };
+      console.log(data);
 
-    setPeople([]);
-    handleClose();
+      const response = await apiClient.post(
+        `/api/v1/chat-room/${selectedRoom}/invite?memberId=${memberId}`,
+        data
+      );
+
+      console.log('Invite response:', response);
+      setPeople([]);
+      setSearch();
+      fetchMessages(selectedRoom)
+      handleClose();
+    } catch (error) {
+      console.error('Error inviting people:', error);
+    }
   };
 
   const handleModalClose = () => {
     setPeople([]);
     setSearch("");
     setExistsPeople([]);
     setSelectedPeople([]);
-    handleClose();
+    setAddPeople([]);
+    close();
   };
 
   const renderPeopleList = () => {
     if (people.length > 0) {
+      const filteredPeople = people.filter(
+        (person) => !selectedPeople.some((selected) => selected.memberId === person.memberId)
+      );
       return (
-        <ul>
-          {people.map((person) => (
-            <li key={person.memberId} className="person-item">
-              <img src={person.avatar || "https://via.placeholder.com/40"} alt={person.nickname} className="avatar" />
-              <span>{person.nickname}</span>
-              <button
-                onClick={() =>
-                  handleSelectPerson(person.nickname, person.memberId)
-                }
-                className={
-                  existsPeople.some(
-                    (selected) => selected.memberId === person.memberId
-                  )
-                    ? "button-selected"
-                    : ""
-                }
-              >
-                추가
-              </button>
-            </li>
-          ))}
-        </ul>
+        <div style={{ display: "flex" }}>
+          <div className="left-section">
+            <p>유저 리스트</p>
+            <ul>
+              {filteredPeople.map((person) => (
+                <li key={person.memberId}>
+                  <img src={person.profile ? person.profile : "/image/dp.jpg"} alt="Profile" className="profile-image" />
+                  {person.nickname}
+                  <button
+                    onClick={() => handleSelectPerson(person.nickname, person.memberId)}
+                  >
+                    선택
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="right-section">
+            <p>참여중인 유저</p>
+            <ul>
+              {selectedPeople.map((person) => (
+                <li key={person.memberId}>
+                  <img src={person.profile ? person.profile : "/image/dp.jpg"} alt="Profile" className="profile-image" />
+                  {person.nickname}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
       );
     } else if (search.length > 0) {
-      return <p>검색 결과가 없습니다.</p>;
-    }
-    return null;
-  };
-
-  const renderSelectedPeople = () => {
-    if (existsPeople.length > 0) {
       return (
-        <ul className="selected-people-list">
-          {existsPeople.map((person) => (
-            <li key={person.memberId} className="selected-person-item">
-              <img src={person.avatar || "https://via.placeholder.com/40"} alt={person.nickname} className="avatar" />
-              <span>{person.nickname}</span>
-            </li>
-          ))}
-        </ul>
+        <div style={{ display: "flex" }}>
+          <div className="left-section"><p>검색결과가 없습니다</p></div>
+          <div className="right-section">
+            <p>참여중인 유저</p>
+            <ul>
+              {selectedPeople.map((person) => (
+                <li key={person.memberId}>
+                  <img src={person.profile ? person.profile : "/image/dp.jpg"} alt="Profile" className="profile-image" />
+                  {person.nickname}
+                  <button
+                    onClick={() => handleSelectPerson(person.nickname, person.memberId)}
+                  >
+                    선택
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
       );
     }
-    return <p>추가된 사람이 없습니다.</p>;
+    return null;
   };
 
-  return (
-    <Modal
-      open={open}
-      onClose={handleModalClose}
-      aria-labelledby="modal-modal-title"
-      aria-describedby="modal-modal-description"
-    >
+  const modalContent = () => {
+    return (
       <div className="addroom-modal">
         <div className="header">
-          <button className="close-button" onClick={handleModalClose}>
-            <CloseButton />
-          </button>
-        </div>
-        <div className="title">
-          {/* <b>초대하기</b> */}
+          <CloseButton onCloseButton={handleModalClose} />
         </div>
-        <div className="modal-content">
-          <div className="left-section">
-            <Input
-              size="Large"
-              name="invite"
-              value={search}
-              onChange={handleSearchChange}
-            />
-            <div className="people-list">{renderPeopleList()}</div>
-          </div>
+        <b>채팅초대</b>
+        <Input size="Large" name="invite" value={search} onChange={handleSearchChange} />
+        {search ? <div className="people-list">{renderPeopleList()}</div> : <div style={{ display: "flex" }}>
+          <div className="left-section"></div>
           <div className="right-section">
-            <b>추가된 사람</b>
-            <div className="selected-people">{renderSelectedPeople()}</div>
-            <Button text="다음" size="Large" onClick={handleInvitePeople} />
+            <p>참여중인 유저</p>
+            <ul>
+              {selectedPeople.map((person) => (
+                <li key={person.memberId}>
+                  <img src={person.profile ? person.profile : "/image/dp.jpg"} alt="Profile" className="profile-image" />
+                  {person.nickname}
+                  <button
+                    onClick={() => handleSelectPerson(person.nickname, person.memberId)}
+                  >
+                    선택
+                  </button>
+                </li>
+              ))}
+            </ul>
           </div>
-        </div>
+        </div>}
+        <Button text="다음" size="Large" onClick={handleInvitePeople} />
       </div>
+    );
+  };
+
+  return (
+    <Modal open={open} onClose={handleModalClose} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description">
+      {modalContent()}
     </Modal>
   );
 }

src/modal/RegistrationModal.jsx

@@ -199,7 +199,6 @@ function RegistrationModal({ open, handleClose }) {
           setModalStep={setModalStep}
           handleCloseWithReset={handleCloseWithReset}
           handleDateChange={handleDateChange}
-
           date={date}
           years={years}
           months={months}
@@ -219,7 +218,6 @@ function RegistrationModal({ open, handleClose }) {
           minutes={minutes}
           seconds={seconds}
           sendUserInfo={sendUserInfo}
-
           setModalStep={setModalStep}
           setIsDuplicate={setIsDuplicate}
           handleCloseWithReset={handleCloseWithReset}