[ FE / BE ] 11/24 작업

client/src/App.tsx

@@ -60,6 +60,8 @@ function App() {
       setErrorValue({ errorStr: `${data.to}님이 요청을 거절하셨습니다.`, timeOut: 1000 });
     };
     const handleReceiveAcceptEvent = (data: { chat: ChatInfoType; from: string; to: string }) => {
+      console.log(data);
+      console.log("accept 이벤트 발생했엉");
       handleReceiveAcceptSocket({ setRequest, setJoinChat, setChat, data });
       if (data.from !== user.id) return;
       setErrorValue({ errorStr: `${data.to}님이 요청을 승인하셨습니다.`, timeOut: 1000 });

client/src/Atom/RequestButton.tsx

@@ -28,16 +28,14 @@ export default function RequestButton({ type, data, isTeam }: { type: string; da
   if (isTeam === "team" && mygId) {
     toId = mygId;
   }
-  const {
-    info: { id },
-  } = data;
+  const { from } = data;
 
   const handleAcceptClick = () => {
-    requestAccept({ from: id, to: toId });
+    requestAccept({ from, to: toId });
   };
 
   const handleDenyClick = () => {
-    requestDeny({ from: id, to: toId });
+    requestDeny({ from, to: toId });
   };
 
   const { state } = data;

client/src/Container/InfoImageContainer.tsx

@@ -30,12 +30,13 @@ export default function InfoImageContainer() {
   const imageInputTag = useRef<HTMLInputElement | null>(null);
   const [profileImage, setProfileImage] = useState<string | ArrayBuffer | null>(null);
   const [imageFile, setImageFile] = useState<Blob>(initBlob);
+  const { image: userImage } = useRecoilValue(userState);
+  const { image: teamImage } = useRecoilValue(teamState);
 
-  if (window.location.href.includes("myinfo")) {
-    image = useRecoilValue(userState).image;
-  } else {
-    image = useRecoilValue(teamState).image;
-  }
+  useEffect(() => {
+    image = window.location.href.includes("myinfo") ? userImage : teamImage;
+    setProfileImage(image ?? defaultImage);
+  }, [userImage, teamImage]);
 
   const clickImageTag = () => {
     (imageInputTag.current as HTMLInputElement).click();
@@ -75,10 +76,6 @@ export default function InfoImageContainer() {
     reader.readAsDataURL(imageFile);
   }, [imageFile]);
 
-  useEffect(() => {
-    setProfileImage(image ?? defaultImage);
-  }, []);
-
   return (
     <div css={TeamInfoImageContainerStyle}>
       <ProfileImage type="Big" image={profileImage} onClick={clickImageTag}>

client/src/Organism/Chat/ChatDetail.tsx

@@ -30,7 +30,7 @@ export default function ChatDetail() {
     if (scrollTop !== 0) return;
 
     const chatMessages = await getChatMessage({ index: dataIndex, chatRoomId });
-    if (!chatMessages.length) return;
+    if (!chatMessages.length || chatMessages === "error") return;
 
     setChatInfo((prev) => {
       return {

client/src/Organism/Chat/ChatProfileContainer.tsx

@@ -14,6 +14,7 @@ const ChatProfileContainerStyle = css`
   border-right: 1px solid;
   padding-top: 3vh;
   min-width: 400px;
+  overflow: auto;
 `;
 
 function ChatProfileContainer({ chatsInfo, setClickedRoomIndex }: ChatProfileContainerType) {

client/src/Socket/chatSocket.ts

@@ -9,7 +9,15 @@ export const handleReceiveDenySocket = ({ setRequest, data }: ReceiveDenySocketT
 };
 
 export const handleReceiveAcceptSocket = ({ setRequest, setJoinChat, setChat, data }: ReceiveAcceptSocketType) => {
-  setRequest((prev: RequestType[]) => prev.filter((item) => item.from !== data.from));
+  setRequest((prev: RequestType[]) =>
+    prev.filter((item) => {
+      console.log("item.from", item.from);
+      console.log("item.to", item.to);
+      console.log("data.from", data.from);
+      console.log("data.to", data.to);
+      return item.to !== data.to;
+    })
+  );
   setJoinChat((prev: joinChatType[]) => [
     ...prev,
     {

client/src/Template/Modal/InviteModal.tsx

@@ -5,7 +5,8 @@ import { useSetRecoilState } from "recoil";
 import { Button } from "../../Atom/Button";
 import InputLabel from "../../Molecules/Core/InputLabel";
 import { inviteTeam } from "../../util/data";
-import { errorState } from "../../Recoil/Atom";
+import { errorState, teamState } from "../../Recoil/Atom";
+import { TeamInfoType } from "../../util/type";
 
 const inviteModalStyle = css`
   position: fixed;
@@ -26,6 +27,7 @@ const inviteModalStyle = css`
 
 export default function InviteModal({ setInviteModalState }: { setInviteModalState: Function }) {
   const userIdRef = useRef<HTMLInputElement>(null);
+  const setTeamInfo = useSetRecoilState(teamState);
   const setErrorValue = useSetRecoilState(errorState);
 
   const clickInvite: MouseEventHandler = async () => {
@@ -42,6 +44,13 @@ export default function InviteModal({ setInviteModalState }: { setInviteModalSta
       setErrorValue({ errorStr: "초대 실패했습니다", timeOut: 1000 });
       return;
     }
+    setTeamInfo((prev: TeamInfoType) => {
+      const teamMember = prev.member ?? [];
+      return {
+        ...prev,
+        member: [...teamMember, result],
+      };
+    });
     setInviteModalState(false);
   };
   return (

client/src/Template/TeamSettingTemplate.tsx

@@ -31,6 +31,7 @@ function TeamSettingTemplate() {
 
   useEffect(() => {
     if (teamInfoState.id !== "") return;
+    console.log(teamSelector);
     setTeamInfoState(teamSelector);
   }, [teamSelector]);
 
@@ -60,7 +61,6 @@ function TeamSettingTemplate() {
       teamInfo: teamInfoRef?.current?.value || teamInfoState.info,
       location: locSelected ?? teamInfoState.location,
     });
-
     if (result === "error") {
       setErrorValue({ errorStr: "팀 정보 수정에 실패했습니다.", timeOut: 1000 });
       return;

client/yarn.lock

@@ -3128,6 +3128,13 @@
   "resolved" "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz"
   "version" "2.2.0"
 
+"bindings@^1.5.0":
+  "integrity" "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ=="
+  "resolved" "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz"
+  "version" "1.5.0"
+  dependencies:
+    "file-uri-to-path" "1.0.0"
+
 "bluebird@^3.5.5":
   "integrity" "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
   "resolved" "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz"
@@ -5515,6 +5522,11 @@
     "loader-utils" "^2.0.0"
     "schema-utils" "^3.0.0"
 
+"[email protected]":
+  "integrity" "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw=="
+  "resolved" "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz"
+  "version" "1.0.0"
+
 "[email protected]":
   "integrity" "sha512-LpCHtPQ3sFx67z+uh2HnSyWSLLu5Jxo21795uRDuar/EOuYWXib5EmPaGIBuSnRqH2IODiKA2k5re/K9OnN/Yg=="
   "resolved" "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz"
@@ -5733,6 +5745,19 @@
   "resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   "version" "1.0.0"
 
+"fsevents@^1.2.7":
+  "integrity" "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw=="
+  "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz"
+  "version" "1.2.13"
+  dependencies:
+    "bindings" "^1.5.0"
+    "nan" "^2.12.1"
+
+"fsevents@^2.1.2", "fsevents@^2.1.3", "fsevents@~2.3.1":
+  "integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="
+  "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
+  "version" "2.3.2"
+
 "function-bind@^1.1.1":
   "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
   "resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
@@ -8054,6 +8079,11 @@
     "dns-packet" "^1.3.1"
     "thunky" "^1.0.2"
 
+"nan@^2.12.1":
+  "integrity" "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ=="
+  "resolved" "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz"
+  "version" "2.14.2"
+
 "nanoid@^3.1.30":
   "integrity" "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ=="
   "resolved" "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz"

server/package.json

@@ -30,8 +30,7 @@
         "pm2": "^5.1.2",
         "rtcpeerconnection": "^8.4.0",
         "sequelize": "^6.9.0",
-        "socket.io": "^4.3.2",
-        "wrtc": "^0.4.7"
+        "socket.io": "^4.3.2"
     },
     "devDependencies": {
         "@types/bcrypt": "^5.0.0",

server/src/api/chat/service.ts

@@ -56,7 +56,7 @@ export const findChatRoomsInfo = async ({ uid }: { uid: string }) => {
   return filteredData;
 };
 
-export const findChatRoomInfo = async ({ chatRoomId }: { chatRoomId: number }) => {
+export const findChatRoomInfo = async ({ chatRoomId, type }: { chatRoomId: number; type: string }) => {
   const query = ({ chatRoomId }: { chatRoomId: number }) => {
     return {
       raw: true,
@@ -84,6 +84,9 @@ export const findChatRoomInfo = async ({ chatRoomId }: { chatRoomId: number }) =
     };
   });
   const chatMessage = await findMessages(chatRoomId, 0);
+  if (type === "team") {
+    return { chatRoomId, chatMessage };
+  }
   return { chatRoomId, member: filteredMemberData, chatMessage };
 };
 
@@ -119,12 +122,21 @@ export const createParticipant = async ({ from, to, chatRoomId }: { from: string
   return await Promise.all(promiseArr);
 };
 
+export const createSingleParticipant = async ({ uid, chatRoomId }: { uid: string; chatRoomId: number }) => {
+  return await Participant.create({ uid, chatRoomId });
+};
+
 export const createChatMessage = async ({ chatRoomId, message }: SendChatType) => {
+  console.log(message);
   const createdChatMessage = await Chat.create({ uid: message.from, message: message.message, src: message.source, chatRoomId });
   return createdChatMessage;
 };
 
 export const createReadRow = async ({ chatId, chatRoomId, uid, isRead }: { chatId: number; chatRoomId: number; uid: string; isRead: boolean }) => {
+  console.log("chatId", chatId);
+  console.log("chatRoomId", chatRoomId);
+  console.log("uid", uid);
+  console.log("isRead", isRead);
   ReadTable.create({ chatId, chatRoomId, uid, isRead });
 };
 

server/src/api/core/controller.ts

@@ -31,6 +31,7 @@ export const getJoinChatInfo = async (req: Request, res: Response, next: NextFun
     if (!req.user) return res.send(defaultJoinChatRoom);
     const uid = String(req.user!.uid);
     const data = await findChatRoomNotReadNum({ uid });
+    console.log(data);
     return res.send(data);
   } catch (error) {
     return next(error);
@@ -54,7 +55,9 @@ export const postRequest = async (req: Request, res: Response, next: NextFunctio
   try {
     if (!req.user) return res.status(402).send({ error: "isn`t Login" });
     const { from, to } = req.body;
+    console.log(from, to);
     const toValidation = await validationTeamAndUser(to);
+    console.log(toValidation);
     if (!toValidation) return res.status(403).send({ error: "to isn`t exist" });
     await addRequest({ from, to });
     sendRequest({ from, to });