Pull Request - Branch Chat: chat update

src/components/Chat/ChatContainer/index.tsx

@@ -10,6 +10,7 @@ import {
 	editMessage,
 	getAllMessages,
 	getChatDataSelector,
+	messageId,
 	sendMessage,
 } from '../../../reducer/chat';
 
@@ -79,9 +80,7 @@ const WorkSpaceChat = (): JSX.Element => {
 		});
 		// TODO: 채팅 고유 아이디
 		socket?.on('nowMessageId', ({ id, chatLength }: ChatIdType) => {
-			if (chatData[chatLength]) {
-				chatData[chatLength].id = id;
-			}
+			dispatch(messageId({ id, chatLength }));
 		});
 
 		// TODO: 채팅 수정
@@ -97,12 +96,12 @@ const WorkSpaceChat = (): JSX.Element => {
 		});
 
 		// TODO: 채팅 이미지 업로드
-		socket?.on('sendImage', ({ chat }: ChatDataType) => {
-			if (chat?.uploadImage) {
+		socket?.on('sendImage', (chat: ChatDataType) => {
+			if (chat) {
 				dispatch(sendMessage([chat]));
 			}
 		});
-	}, [chatData]);
+	}, []);
 
 	// TODO: 스크롤바는 항상 맨 밑에 위치한다.
 	useEffect(() => {

src/components/Chat/ChatZone/index.tsx

@@ -59,7 +59,12 @@ const ChatZone = ({ socket, scrollbarRef, order, setOrder, isEnd }: Props): JSX.
 	useEffect(() => {
 		if (chatUploadImage) {
 			const newChat: ChatDataType = newChatData(-1, '', chatUploadImage, room, profileInfo);
-			const getImageData: ChatUpdateDataType = getChatUploadImageData(room, profileInfo, chatUploadImage);
+			const getImageData: ChatUpdateDataType = getChatUploadImageData(
+				room,
+				profileInfo,
+				chatUploadImage,
+				chatData.length,
+			);
 
 			dispatch(sendMessage([newChat]));
 			socket?.emit('sendImage', getImageData);

src/components/Chat/Textarea/index.tsx

@@ -73,7 +73,12 @@ const Textarea = ({ socket, onSubmitForm, onChangeChat, chat }: Props): JSX.Elem
 	useEffect(() => {
 		if (chatUploadImage) {
 			const newChat: ChatDataType = newChatData(-1, '', chatUploadImage, room, profileInfo);
-			const getImageData: ChatUpdateDataType = getChatUploadImageData(room, profileInfo, chatUploadImage);
+			const getImageData: ChatUpdateDataType = getChatUploadImageData(
+				room,
+				profileInfo,
+				chatUploadImage,
+				chatData.length,
+			);
 
 			dispatch(sendMessage([newChat]));
 			socket?.emit('sendImage', getImageData);

src/components/Common/HeaderUserMenu/index.tsx

@@ -53,8 +53,8 @@ const HeaderUserMenu = ({ show, setShowModal, onClose }: Props): JSX.Element =>
 						<MenuItem onClick={onGoToRecruitCreate}>팀원 모집하기</MenuItem>
 						<MenuItem onClick={onGoToProjectCreate}>새 레시피 만들기</MenuItem>
 						<MenuItem onClick={onGoToProject}>레시피 바로가기</MenuItem>
-						<MenuItem>구매내역</MenuItem>
-						<MenuItem>고객센터</MenuItem>
+						{/* <MenuItem>구매내역</MenuItem>
+						<MenuItem>고객센터</MenuItem> */}
 						<MenuItem onClick={onLogout}>로그아웃</MenuItem>
 					</MenuContainer>
 				</UserMenu>

src/components/Landing/LandingPart-1/index.tsx

@@ -44,8 +44,8 @@ const LandingFirst = (): JSX.Element => {
 							opacity: `${scrollPosition > 100 ? `1` : `0`}`,
 							color: `${
 								(scrollPosition > 100 && scrollPosition < 2530) ||
-								(scrollPosition > 6650 && scrollPosition < 10360) ||
-								scrollPosition > 11420
+								(scrollPosition > 6680 && scrollPosition < 10330) ||
+								scrollPosition > 11375
 									? `#000`
 									: `#fff`
 							}`,

src/components/Landing/LandingPart-1/styles.ts

@@ -83,7 +83,7 @@ export const BackToTopButtonWrapper = styled.div`
 	}
 
 	& > p {
-		margin-top: 2px;
+		margin-top: 4px;
 		font-family: NanumSquareB;
 		font-size: 14px;
 	}

src/components/Landing/LandingPart-8/index.tsx

@@ -1,29 +1,17 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import useScrollFadeIn from '../../../hooks/useScrollFadeIn';
 import LoginModal from '../../Common/LoginModal';
 import Modal from '../../Common/Modal';
 import { LandingEighthContainer, LoginButton, Message, MessageWrapper } from './styles';
 
 const LandingEighth = (): JSX.Element => {
-	const [scrollPosition, setScrollPosition] = useState<number>(0);
 	const [showLoginModal, setShowLoginModal] = useState<boolean>(false);
 
 	const AnimatedItem = {
 		message: useScrollFadeIn({ direction: 'late-up', duration: 1.2, delay: 0 }),
 		button: useScrollFadeIn({ direction: 'late-up', duration: 0.8, delay: 0.5 }),
 	};
 
-	console.log(scrollPosition);
-	const onScroll = () => {
-		setScrollPosition(window.pageYOffset);
-	};
-
-	useEffect(() => {
-		window.addEventListener('scroll', onScroll);
-		// 컴포넌트가 언마운트 되기 직전에 이벤트를 끝낸다. 메모리 누수 방지
-		return () => window.removeEventListener('scroll', onScroll);
-	}, []);
-
 	return (
 		<LandingEighthContainer>
 			<MessageWrapper>

src/components/WRTC.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
-import Peer from 'simple-peer';
-import useSocket from '../hooks/useSocket';
-import { useHistory, useParams } from 'react-router';
-import { scryRenderedComponentsWithType } from 'react-dom/test-utils';
+export {};
+// import React, { useEffect, useRef, useState } from 'react';
+// import styled from 'styled-components';
+// import Peer from 'simple-peer';
+// import useSocket from '../hooks/useSocket';
+// import { useHistory, useParams } from 'react-router';
+// import { scryRenderedComponentsWithType } from 'react-dom/test-utils';
 // declare global {
 // 	interface MediaDevices {
 // 		getDisplayMedia(constraints?: MediaStreamConstraints): Promise<MediaStream>;
@@ -16,125 +17,125 @@ import { scryRenderedComponentsWithType } from 'react-dom/test-utils';
 // 		// more....
 // 	}
 // }
-const StyledVideo = styled.video`
-	height: 40%;
-	width: 50%;
-`;
-const Video = ({ peer }: { peer: Peer.Instance }): JSX.Element => {
-	const ref = useRef<HTMLVideoElement>(null);
-
-	useEffect(() => {
-		peer.on('stream', stream => {
-			if (ref.current) {
-				ref.current.srcObject = stream;
-			}
-		});
-	}, []);
-
-	return <StyledVideo autoPlay playsInline ref={ref} />;
-};
-const videoConstraints = {
-	height: window.innerHeight / 2,
-	width: window.innerWidth / 2,
-};
-
-const WRTC = (): JSX.Element => {
-	const [peers, setPeers] = useState<Peer.Instance[]>([]);
-	const history = useHistory();
-	const currentAddress = history.location.pathname.split('/')[3];
-	const { projectUrl, part } = useParams<{ projectUrl: string; part: string }>();
-	const [socket, connectSocket, disconnectSocket] = useSocket(projectUrl, currentAddress);
-	const userVideo = useRef<any>(null);
-	const peersRef = useRef<any>([]);
-	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 (
-		<div>
-			<StyledVideo muted ref={userVideo} autoPlay playsInline />
-			{peers.map((peer, index) => {
-				return <Video key={index} peer={peer} />;
-			})}
-		</div>
-	);
-};
-
-export default WRTC;
+// const StyledVideo = styled.video`
+// 	height: 40%;
+// 	width: 50%;
+// `;
+// const Video = ({ peer }: { peer: Peer.Instance }): JSX.Element => {
+// 	const ref = useRef<HTMLVideoElement>(null);
+
+// 	useEffect(() => {
+// 		peer.on('stream', stream => {
+// 			if (ref.current) {
+// 				ref.current.srcObject = stream;
+// 			}
+// 		});
+// 	}, []);
+
+// 	return <StyledVideo autoPlay playsInline ref={ref} />;
+// };
+// const videoConstraints = {
+// 	height: window.innerHeight / 2,
+// 	width: window.innerWidth / 2,
+// };
+
+// const WRTC = (): JSX.Element => {
+// 	const [peers, setPeers] = useState<Peer.Instance[]>([]);
+// 	const history = useHistory();
+// 	const currentAddress = history.location.pathname.split('/')[3];
+// 	const { projectUrl, part } = useParams<{ projectUrl: string; part: string }>();
+// 	const [socket, connectSocket, disconnectSocket] = useSocket(projectUrl, currentAddress);
+// 	const userVideo = useRef<any>(null);
+// 	const peersRef = useRef<any>([]);
+// 	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 (
+// 		<div>
+// 			<StyledVideo muted ref={userVideo} autoPlay playsInline />
+// 			{peers.map((peer, index) => {
+// 				return <Video key={index} peer={peer} />;
+// 			})}
+// 		</div>
+// 	);
+// };
+
+// export default WRTC;