From 64e8a9be2952d7acbe0855af7bb525e7cd82deb9 Mon Sep 17 00:00:00 2001 From: useonglee Date: Wed, 16 Jun 2021 20:51:02 +0900 Subject: [PATCH 1/9] Fix remove useEffect deps when updating chat --- src/components/Chat/ChatContainer/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Chat/ChatContainer/index.tsx b/src/components/Chat/ChatContainer/index.tsx index 27aeddb..34eb5f6 100644 --- a/src/components/Chat/ChatContainer/index.tsx +++ b/src/components/Chat/ChatContainer/index.tsx @@ -102,7 +102,7 @@ const WorkSpaceChat = (): JSX.Element => { dispatch(sendMessage([chat])); } }); - }, [chatData]); + }, []); // TODO: 스크롤바는 항상 맨 밑에 위치한다. useEffect(() => { From 9406ceb72d120dfcb41e32a97b6073a2358abb75 Mon Sep 17 00:00:00 2001 From: useonglee Date: Wed, 16 Jun 2021 21:00:11 +0900 Subject: [PATCH 2/9] Remove chat data useSelector --- src/components/Chat/Textarea/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Chat/Textarea/index.tsx b/src/components/Chat/Textarea/index.tsx index 8a3f347..25abfa5 100644 --- a/src/components/Chat/Textarea/index.tsx +++ b/src/components/Chat/Textarea/index.tsx @@ -2,7 +2,7 @@ import React, { useCallback, KeyboardEvent, FormEvent, useRef, useEffect, useSta import { changeImage, clickUploadImage } from '../../../utils/imageUpload'; import { getProfileInfoSelector } from '../../../reducer/profile'; import { getChatUploadImageData, newChatData } from '../../../utils/ChatSocketData'; -import { getChatDataSelector, sendMessage } from '../../../reducer/chat'; +import { sendMessage } from '../../../reducer/chat'; import { Socket } from 'socket.io-client'; import autosize from 'autosize'; @@ -32,7 +32,6 @@ interface Props { const Textarea = ({ socket, onSubmitForm, onChangeChat, chat }: Props): JSX.Element => { const profileInfo = useSelector(getProfileInfoSelector); - const chatData = useSelector(getChatDataSelector); const dispatch = useDispatch(); const { part: room } = useParams<{ projectUrl: string; part: string }>(); From 9b97c914502505c35e431f20289dd9b2d99a12ea Mon Sep 17 00:00:00 2001 From: useonglee Date: Wed, 16 Jun 2021 21:00:26 +0900 Subject: [PATCH 3/9] Remove logger --- src/reducer/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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()], }); From 03b7fab63012bb98a47a685d0cae2b6cf48c96d5 Mon Sep 17 00:00:00 2001 From: useonglee Date: Wed, 16 Jun 2021 21:01:02 +0900 Subject: [PATCH 4/9] Set changed scroll position value --- src/components/Landing/LandingPart-1/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Landing/LandingPart-1/index.tsx b/src/components/Landing/LandingPart-1/index.tsx index 026db68..5023cde 100644 --- a/src/components/Landing/LandingPart-1/index.tsx +++ b/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` }`, From 8d0c0f057caa87b03996181378ba29fb6a61dcc7 Mon Sep 17 00:00:00 2001 From: useonglee Date: Wed, 16 Jun 2021 21:01:27 +0900 Subject: [PATCH 5/9] Set changed margin-top value to back to top button --- src/components/Landing/LandingPart-1/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Landing/LandingPart-1/styles.ts b/src/components/Landing/LandingPart-1/styles.ts index 526175f..106c1dd 100644 --- a/src/components/Landing/LandingPart-1/styles.ts +++ b/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; } From 3a7d9f996bfe7daaef685561e5a96ce969de4282 Mon Sep 17 00:00:00 2001 From: useonglee Date: Wed, 16 Jun 2021 23:58:49 +0900 Subject: [PATCH 6/9] Set commented out web RTC page --- src/components/WRTC.tsx | 257 ++++++++++++++++++++-------------------- src/pages/WebRTC.tsx | 8 +- 2 files changed, 131 insertions(+), 134 deletions(-) diff --git a/src/components/WRTC.tsx b/src/components/WRTC.tsx index 8ef92f6..b034408 100644 --- a/src/components/WRTC.tsx +++ b/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; @@ -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(null); - - useEffect(() => { - peer.on('stream', stream => { - if (ref.current) { - ref.current.srcObject = stream; - } - }); - }, []); - - return ; -}; -const videoConstraints = { - height: window.innerHeight / 2, - width: window.innerWidth / 2, -}; - -const WRTC = (): JSX.Element => { - const [peers, setPeers] = useState([]); - 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(null); - const peersRef = useRef([]); - 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; +// const StyledVideo = styled.video` +// height: 40%; +// width: 50%; +// `; +// const Video = ({ peer }: { peer: Peer.Instance }): JSX.Element => { +// const ref = useRef(null); + +// useEffect(() => { +// peer.on('stream', stream => { +// if (ref.current) { +// ref.current.srcObject = stream; +// } +// }); +// }, []); + +// return ; +// }; +// const videoConstraints = { +// height: window.innerHeight / 2, +// width: window.innerWidth / 2, +// }; + +// const WRTC = (): JSX.Element => { +// const [peers, setPeers] = useState([]); +// 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(null); +// const peersRef = useRef([]); +// 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; From 99e6d4b1264d33b86627c097ca90cfcab601b865 Mon Sep 17 00:00:00 2001 From: useonglee Date: Thu, 17 Jun 2021 00:03:12 +0900 Subject: [PATCH 7/9] Fix #422 get chat uploadImage id when uploading image --- src/components/Chat/ChatContainer/index.tsx | 9 ++++----- src/components/Chat/ChatZone/index.tsx | 7 ++++++- src/components/Chat/Textarea/index.tsx | 10 ++++++++-- src/reducer/chat.ts | 9 +++++++-- src/utils/ChatSocketData.ts | 2 ++ 5 files changed, 27 insertions(+), 10 deletions(-) diff --git a/src/components/Chat/ChatContainer/index.tsx b/src/components/Chat/ChatContainer/index.tsx index 34eb5f6..4cf0737 100644 --- a/src/components/Chat/ChatContainer/index.tsx +++ b/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,8 +96,8 @@ const WorkSpaceChat = (): JSX.Element => { }); // TODO: 채팅 이미지 업로드 - socket?.on('sendImage', ({ chat }: ChatDataType) => { - if (chat?.uploadImage) { + socket?.on('sendImage', (chat: ChatDataType) => { + if (chat) { dispatch(sendMessage([chat])); } }); diff --git a/src/components/Chat/ChatZone/index.tsx b/src/components/Chat/ChatZone/index.tsx index 6191f5a..994c624 100644 --- a/src/components/Chat/ChatZone/index.tsx +++ b/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); diff --git a/src/components/Chat/Textarea/index.tsx b/src/components/Chat/Textarea/index.tsx index 25abfa5..912ac5d 100644 --- a/src/components/Chat/Textarea/index.tsx +++ b/src/components/Chat/Textarea/index.tsx @@ -2,7 +2,7 @@ import React, { useCallback, KeyboardEvent, FormEvent, useRef, useEffect, useSta import { changeImage, clickUploadImage } from '../../../utils/imageUpload'; import { getProfileInfoSelector } from '../../../reducer/profile'; import { getChatUploadImageData, newChatData } from '../../../utils/ChatSocketData'; -import { sendMessage } from '../../../reducer/chat'; +import { getChatDataSelector, sendMessage } from '../../../reducer/chat'; import { Socket } from 'socket.io-client'; import autosize from 'autosize'; @@ -32,6 +32,7 @@ interface Props { const Textarea = ({ socket, onSubmitForm, onChangeChat, chat }: Props): JSX.Element => { const profileInfo = useSelector(getProfileInfoSelector); + const chatData = useSelector(getChatDataSelector); const dispatch = useDispatch(); const { part: room } = useParams<{ projectUrl: string; part: string }>(); @@ -72,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); 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/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; From 6aa24a23be5d97a86bb19554071ec0b4f8dee076 Mon Sep 17 00:00:00 2001 From: useonglee Date: Thu, 17 Jun 2021 00:03:34 +0900 Subject: [PATCH 8/9] Remove scroll event --- src/components/Landing/LandingPart-8/index.tsx | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/src/components/Landing/LandingPart-8/index.tsx b/src/components/Landing/LandingPart-8/index.tsx index add91af..6d07cd8 100644 --- a/src/components/Landing/LandingPart-8/index.tsx +++ b/src/components/Landing/LandingPart-8/index.tsx @@ -1,11 +1,10 @@ -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(0); const [showLoginModal, setShowLoginModal] = useState(false); const AnimatedItem = { @@ -13,17 +12,6 @@ const LandingEighth = (): JSX.Element => { 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 ( From 8626e829f2498a639b91925cde23a89dd68e9f99 Mon Sep 17 00:00:00 2001 From: useonglee Date: Thu, 17 Jun 2021 00:04:11 +0900 Subject: [PATCH 9/9] Remove unused list --- src/components/Common/HeaderUserMenu/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Common/HeaderUserMenu/index.tsx b/src/components/Common/HeaderUserMenu/index.tsx index 3e940e2..404977a 100644 --- a/src/components/Common/HeaderUserMenu/index.tsx +++ b/src/components/Common/HeaderUserMenu/index.tsx @@ -53,8 +53,8 @@ const HeaderUserMenu = ({ show, setShowModal, onClose }: Props): JSX.Element => 팀원 모집하기 새 레시피 만들기 레시피 바로가기 - 구매내역 - 고객센터 + {/* 구매내역 + 고객센터 */} 로그아웃