Overnap
Builds for 1 pipeline failed in 1 minute 33 seconds

handleUpdateRoomUser가 실시간 반영되도록 수정

...@@ -23,12 +23,8 @@ export const RoomInfo: React.FC = () => { ...@@ -23,12 +23,8 @@ export const RoomInfo: React.FC = () => {
23 const handleUpdateRoomUser = useCallback((rawMessage: RawMessage) => { 23 const handleUpdateRoomUser = useCallback((rawMessage: RawMessage) => {
24 if (rawMessage.type == MessageType.ROOM_USER_UPDATE) { 24 if (rawMessage.type == MessageType.ROOM_USER_UPDATE) {
25 const data = rawMessage.message as UpdateRoomUser; 25 const data = rawMessage.message as UpdateRoomUser;
26 - if (data.state == 'added') { 26 + console.log(data);
27 - setRoomData({ 27 + if (data.state == 'removed') {
28 - ...roomData,
29 - users: [data.user, ...roomData.users] // TODO: immutable.js로 바꾸면 좋을 듯
30 - });
31 - } else if (data.state == 'removed') {
32 const newUsers = roomData.users; 28 const newUsers = roomData.users;
33 const index = newUsers.indexOf(data.user); 29 const index = newUsers.indexOf(data.user);
34 if (index < 0) { 30 if (index < 0) {
...@@ -40,24 +36,34 @@ export const RoomInfo: React.FC = () => { ...@@ -40,24 +36,34 @@ export const RoomInfo: React.FC = () => {
40 ...roomData, 36 ...roomData,
41 users: newUsers 37 users: newUsers
42 }); 38 });
39 + } else if (data.state == 'added') {
40 + setRoomData({
41 + ...roomData,
42 + users: [data.user, ...roomData.users]
43 + });
43 } 44 }
44 } 45 }
45 - }, []); 46 + }, [roomData]);
46 47
47 useEffect(() => { 48 useEffect(() => {
48 - setRoomData(location.state.roomData);
49 socket.on('msg', handleUpdateRoomUser); 49 socket.on('msg', handleUpdateRoomUser);
50 - 50 +
51 return () => { 51 return () => {
52 socket.off('msg', handleUpdateRoomUser); 52 socket.off('msg', handleUpdateRoomUser);
53 - 53 + }
54 + }, [roomData]);
55 +
56 + useEffect(() => {
57 + setRoomData(location.state.roomData);
58 +
59 + return () => {
54 const rawMessage: RawMessage = { 60 const rawMessage: RawMessage = {
55 type: MessageType.ROOM_LEAVE, 61 type: MessageType.ROOM_LEAVE,
56 message: '' 62 message: ''
57 } 63 }
58 socket.emit('msg', rawMessage, (response : MessageResponse<undefined>) => {}); 64 socket.emit('msg', rawMessage, (response : MessageResponse<undefined>) => {});
59 } 65 }
60 - }, []); 66 + }, [])
61 67
62 return ( 68 return (
63 <div className='m-3 w-5/6 flex items-center place-content-between'> 69 <div className='m-3 w-5/6 flex items-center place-content-between'>
......