([]);
+// const roomID = 'General';
+
+// connectSocket();
+// useEffect(() => {
+// const MD = navigator.mediaDevices as any;
+// MD.getUserMedia({ video: videoConstraints, audio: true }).then((stream: any) => {
+// userVideo.current.srcObject = stream;
+
+// socket?.emit('join room', roomID);
+// socket?.on('all users', (users: any[]) => {
+// console.log('유저목록:', users);
+// const peers: ((prevState: never[]) => never[]) | Peer.Instance[] = [];
+// users.forEach(userID => {
+// const peer = createPeer(userID, socket?.id, stream);
+// peersRef.current.push({
+// peerID: userID,
+// peer,
+// });
+// peers.push(peer);
+// });
+// setPeers(peers);
+// console.log(peers);
+// });
+
+// socket?.on('user joined', (payload: { signal: any; callerID: any }) => {
+// const peer = addPeer(payload.signal, payload.callerID, stream);
+// peersRef.current.push({
+// peerID: payload.callerID,
+// peer,
+// });
+
+// setPeers(users => [...users, peer]);
+// });
+
+// socket?.on('receiving returned signal', (payload: { id: any; signal: any }) => {
+// const item = peersRef.current.find((p: { peerID: any }) => p.peerID === payload.id);
+// console.log('receiving :', payload, item);
+// item.peer.signal(payload.signal);
+// });
+// });
+// }, []);
+
+// useEffect(() => {
+// return () => {
+// socket?.emit('leave room', 'General');
+// disconnectSocket();
+// };
+// }, []);
+
+// function createPeer(userToSignal: any, callerID: any, stream: MediaStream) {
+// const peer = new Peer({
+// initiator: true,
+// trickle: false,
+// stream,
+// });
+
+// peer.on('signal', signal => {
+// console.log('create : peer on signal :', signal);
+// socket?.emit('sending signal', { userToSignal, callerID, signal });
+// });
+
+// return peer;
+// }
+
+// function addPeer(incomingSignal: string | Peer.SignalData, callerID: any, stream: MediaStream) {
+// const peer = new Peer({
+// initiator: false,
+// trickle: false,
+// stream,
+// });
+
+// peer.on('signal', signal => {
+// console.log('add : peer on signal :', signal);
+// socket?.emit('returning signal', { signal, callerID });
+// });
+
+// peer.signal(incomingSignal);
+
+// return peer;
+// }
+
+// return (
+//
+//
+// {peers.map((peer, index) => {
+// return ;
+// })}
+//
+// );
+// };
+
+// export default WRTC;
diff --git a/src/pages/WebRTC.tsx b/src/pages/WebRTC.tsx
index 5a794b8..a4e2654 100644
--- a/src/pages/WebRTC.tsx
+++ b/src/pages/WebRTC.tsx
@@ -1,14 +1,10 @@
import React from 'react';
import WorkSpaceFrame from '../components/Common/WorkSpaceFrame';
-import WRTC from '../components/WRTC';
+// import WRTC from '../components/WRTC';
const WebRTC = (): JSX.Element => {
- return (
-
-
-
- );
+ return {/* */};
};
export default WebRTC;
diff --git a/src/reducer/chat.ts b/src/reducer/chat.ts
index 1dae398..a5efd24 100644
--- a/src/reducer/chat.ts
+++ b/src/reducer/chat.ts
@@ -1,7 +1,7 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { RootStateOrAny } from 'react-redux';
-import { ChatDataType, editChatType } from '../types/types';
+import { ChatDataType, ChatIdType, editChatType } from '../types/types';
// TODO: 초기 상태
const initialState: ChatDataType[] = [
@@ -56,12 +56,17 @@ export const chatSlice = createSlice({
if (payload.chat) {
copyState.splice(payload.index, 1, payload.chat);
}
+
return [...copyState];
},
+ messageId: (state, { payload }: PayloadAction) => {
+ const { chatLength, id } = payload;
+ state[chatLength].id = id;
+ },
changeRoom: () => initialState,
},
});
-export const { getAllMessages, sendMessage, deleteMessage, editMessage, changeRoom } = chatSlice.actions;
+export const { getAllMessages, sendMessage, deleteMessage, editMessage, messageId, changeRoom } = chatSlice.actions;
export const getChatDataSelector = (state: RootStateOrAny): ChatDataType[] => state.chatSlice;
diff --git a/src/reducer/index.ts b/src/reducer/index.ts
index b147b36..6b2221e 100644
--- a/src/reducer/index.ts
+++ b/src/reducer/index.ts
@@ -1,6 +1,6 @@
import { profileEditInfoSlice } from './profileEdit';
import { combineReducers, configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
-import logger from 'redux-logger';
+// import logger from 'redux-logger';
import { profileInfoSlice } from './profile';
import { recruitCreateSlice } from './recruitCreate';
@@ -25,5 +25,5 @@ const reducer = combineReducers({
export default configureStore({
reducer,
- middleware: [...getDefaultMiddleware(), logger],
+ middleware: [...getDefaultMiddleware()],
});
diff --git a/src/utils/ChatSocketData.ts b/src/utils/ChatSocketData.ts
index 974459f..1abd413 100644
--- a/src/utils/ChatSocketData.ts
+++ b/src/utils/ChatSocketData.ts
@@ -78,11 +78,13 @@ export const getChatUploadImageData = (
room: string,
profileInfo: profileInfoDataType,
uploadImage: string,
+ chatLength: number,
): ChatUpdateDataType => {
const result = {
room: room,
name: profileInfo.name,
uploadImage: uploadImage,
+ chatLength: chatLength,
};
return result;