Merge pull request #162 from boostcampwm-2021/dev

NogariHouse Release v1.0.1

client/src/components/chat/detail-view/footer/index.tsx

@@ -30,7 +30,7 @@ export default function ChatRoomFooter({
       key: `${nowDate.getTime()}_${user.userDocumentId}`,
     });
     chatSocket?.emit('chat:alertMsg', { participants, chatDocumentId });
-    chatSocket?.emit('chat:updateCount', participants);
+    chatSocket?.emit('chat:updateCount', participants, chatDocumentId);
     addChattingLog({
       userDocumentId: user.userDocumentId, userName: user.userName, profileUrl: user.profileUrl, message, date: makeDateToHourMinute(new Date()),
     });

client/src/components/chat/detail-view/index.tsx

@@ -15,6 +15,7 @@ import roomDocumentIdState from '@atoms/room-document-id';
 import roomViewState from '@atoms/room-view-type';
 import useChatSocket from '@src/utils/chat-socket';
 import isOpenRoomState from '@atoms/is-open-room';
+import chatSocketMessage from '@constants/socket-message/chat';
 import NotFoundChatView from '@src/components/chat/not-found-view';
 import LoadingSpinner from '@styles/loading-spinner';
 import { chatReducer, initialState } from './reducer';
@@ -99,13 +100,13 @@ function ChatRoomDetailView() {
 
   useEffect(() => {
     if (!chatSocket) return;
-    chatSocket.emit('chat:roomJoin', chatDocumentId);
-    chatSocket.on('chat:sendMsg', (payload: any) => {
+    chatSocket.emit(chatSocketMessage.roomJoin, chatDocumentId);
+    chatSocket.on(chatSocketMessage.sendMsg, (payload: any) => {
       dispatch({ type: 'ADD_CHATTING_LOG', payload: { chatLog: payload } });
     });
     return () => {
-      chatSocket.off('chat:sendMsg');
-      chatSocket.emit('chat:leave', chatDocumentId);
+      chatSocket.off(chatSocketMessage.sendMsg);
+      chatSocket.emit(chatSocketMessage.leave, chatDocumentId);
     };
   }, [chatSocket]);
 

client/src/components/chat/main-view/style.ts

@@ -4,6 +4,8 @@ import { whiteScroll } from '@styles/scrollbar-style';
 const ChatUserCardWrap = styled.div`
   height: calc(100% - 80px);
   width: 100%;
+
+  overflow-x: hidden;
   ${whiteScroll};
 `;
 

client/src/components/chat/new-view/header/chat-new-header.tsx

@@ -4,6 +4,7 @@ import { useHistory } from 'react-router-dom';
 import useChatSocket from '@utils/chat-socket';
 import { postChatRoom } from '@api/chat';
 import userState from '@atoms/user';
+import chatSocketMessage from '@constants/socket-message/chat';
 import { SelectHeaderWrap, SelectHeader, BtnStyle } from '@src/assets/styles/select-view-style';
 
 const DoneBtn = ({ selectedUserList }: any) => {
@@ -20,7 +21,7 @@ const DoneBtn = ({ selectedUserList }: any) => {
           state: { participantsInfo: selectedUserList },
         });
         if (res.isNew) {
-          chatSocket.emit('chat:makeChat', {
+          chatSocket.emit(chatSocketMessage.makeChat, {
             chatDocumentId: res.chatDocumentId,
             participantsInfo: [...selectedUserList, { userDocumentId: user.userDocumentId, userName: user.userName, profileUrl: user.profileUrl }],
           });

client/src/components/common/default-header/index.tsx

@@ -16,6 +16,8 @@ import { nowCountState, nowFetchingState, nowItemsListState } from '@atoms/main-
 import isOpenSliderMenuState from '@atoms/is-open-slider-menu';
 import isOpenRoomState from '@atoms/is-open-room';
 import SliderMenu from '@common/menu-modal';
+import chatSocketMessage from '@constants/socket-message/chat';
+import userSocketMessage from '@constants/socket-message/user';
 import { IconAndLink } from '@interfaces/index';
 import { getUnReadMsgCount } from '@api/chat';
 import getIsActivityChecked from '@api/activity';
@@ -59,20 +61,20 @@ function DefaultHeader() {
 
   useEffect(() => {
     getUnReadMsgCount().then((res: any) => setUnReadMsgCount(res.unReadMsgCount));
-    chatSocket.emit('chat:viewJoin', user.userDocumentId);
-    chatSocket.on('chat:updateCount', () => {
-      if (!window.location.pathname.includes('/chat-rooms/')) setUnReadMsgCount((oldCount) => oldCount + 1);
+    chatSocket.emit(chatSocketMessage.viewJoin, user.userDocumentId);
+    chatSocket.on(chatSocketMessage.updateCount, (chatDocumentId) => {
+      if (!window.location.pathname.includes(`${chatDocumentId}`)) setUnReadMsgCount((oldCount) => oldCount + 1);
     });
     return () => {
-      chatSocket.off('chat:updateCount');
+      chatSocket.off(chatSocketMessage.updateCount);
     };
   }, [chatSocket]);
 
   useEffect(() => {
     if (!userSocket) return;
-    userSocket.on('user:getActivity', () => setActivityChecked(true));
+    userSocket.on(userSocketMessage.getActivity, () => setActivityChecked(true));
     return () => {
-      userSocket.off('user:getActivity');
+      userSocket.off(userSocketMessage.getActivity);
     };
   }, [userSocket]);
 

client/src/components/common/room-card/index.tsx

@@ -75,7 +75,7 @@ export default function RoomCard({
         </RoomCardProfileDiv>
         <RoomCardUsers>
           {userNameList(userNames)}
-          <ParticipantsNumberSpan>{`${participantsInfo.length} people`}</ParticipantsNumberSpan>
+          <ParticipantsNumberSpan>{`${participantsInfo.length} / 6 people`}</ParticipantsNumberSpan>
         </RoomCardUsers>
       </RoomCardInfo>
     </RoomCardLayout>

client/src/components/main/left-sidebar/index.tsx

@@ -6,6 +6,7 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 import followingListState from '@atoms/following-list';
 import userState from '@atoms/user';
 import { IToast } from '@atoms/toast-list';
+import userSocketMessage from '@constants/socket-message/user';
 import toastListSelector from '@selectors/toast-list';
 import useUserSocket from '@utils/user-socket';
 import ActiveFollowingCard from './active-following-card';
@@ -44,17 +45,17 @@ function LeftSideBar() {
     if (!user.isLoggedIn) return;
     const userSocket = useUserSocket();
 
-    userSocket.on('user:firstFollowingList', (firstActiveFollowingList) => {
+    userSocket.on(userSocketMessage.firstFollowingList, (firstActiveFollowingList) => {
       setFirstFollowingList(firstActiveFollowingList);
     });
-    userSocket.on('user:newActiveUser', (newActiveUserData) => {
+    userSocket.on(userSocketMessage.newActiveUser, (newActiveUserData) => {
       const newDocumentId = newActiveUserData.userDocumentId;
       if (followingList.includes(newDocumentId)) addNewActiveFollowing(newActiveUserData);
     });
-    userSocket.on('user:newLeaveUser', (leaveUserDocumentId) => {
+    userSocket.on(userSocketMessage.newLeaveUser, (leaveUserDocumentId) => {
       deleteLeaveActiveFollowing(leaveUserDocumentId);
     });
-    userSocket.on('user:hands', (handsData: { from: Partial<IActiveFollowingUser>, to: string }) => {
+    userSocket.on(userSocketMessage.hands, (handsData: { from: Partial<IActiveFollowingUser>, to: string }) => {
       if (handsData.to === user.userDocumentId) {
         const newToast: IToast = {
           type: 'info',
@@ -76,15 +77,15 @@ function LeftSideBar() {
   useEffect(() => {
     const userSocket = useUserSocket();
     if (userSocket) {
-      userSocket.emit('user:join', {
+      userSocket.emit(userSocketMessage.join, {
         ...user, followingList,
       });
     }
   }, [followingList]);
 
   const onClickHands = (userDocumentId: string) => (e: MouseEvent) => {
     e.stopPropagation();
-    useUserSocket().emit('user:hands', userDocumentId);
+    useUserSocket().emit(userSocketMessage.hands, userDocumentId);
   };
 
   return (

client/src/components/main/style.ts

@@ -40,7 +40,7 @@ export const MainSectionLayout = styled.div`
   }
 
   @media (max-width: 768px){
-    heigth: calc(100% - 100px);
+    height: calc(100%-100px);
   }
 
   @media (min-width: 1025px) {

client/src/components/profile/modal/change-profile-image/index.tsx

@@ -8,6 +8,7 @@ import { isOpenChangeProfileImageModalState } from '@atoms/is-open-modal';
 import { ModalBox, BackgroundWrapper } from '@styles/modal';
 import userState from '@atoms/user';
 import DefaultButton from '@common/default-button';
+import userSocketMessage from '@constants/socket-message/user';
 import { changeProfileImage } from '@api/user';
 import useUserSocket from '@utils/user-socket';
 import {
@@ -49,7 +50,7 @@ function ShareModal() {
       });
       const userSocket = useUserSocket();
       if (userSocket) {
-        userSocket.emit('user:join', {
+        userSocket.emit(userSocketMessage.join, {
           ...user, profileUrl: newProfileUrl, followingList,
         });
       }

client/src/components/room/in-view/index.tsx

@@ -2,12 +2,14 @@ import React, { useEffect, useState, RefObject } from 'react';
 import { useSetRecoilState, useResetRecoilState } from 'recoil';
 import { FiPlus, FiMic, FiMicOff } from 'react-icons/fi';
 
+import toastListSelector from '@selectors/toast-list';
 import roomDocumentIdState from '@atoms/room-document-id';
 import roomViewState from '@atoms/room-view-type';
 import isOpenRoomState from '@atoms/is-open-room';
 import { isOpenRoomModalState } from '@atoms/is-open-modal';
 import DefaultButton from '@common/default-button';
 import { IParticipant, InRoomUserBox, InRoomOtherUserBox } from '@components/room/in-view/in-room-user-box';
+import roomSocketMessage from '@constants/socket-message/room';
 import { getRoomInfo } from '@api/room';
 import { useRtc, IRTC } from '@hooks/useRtc';
 import {
@@ -27,6 +29,7 @@ function InRoomModal() {
   const resetRoomDocumentId = useResetRecoilState(roomDocumentIdState);
   const setIsOpenRoom = useSetRecoilState(isOpenRoomState);
   const setIsOpenModal = useSetRecoilState(isOpenRoomModalState);
+  const setToastList = useSetRecoilState(toastListSelector);
   const [roomInfo, setRoomInfo] = useState<IRooms>();
   const [isMic, setMic] = useState(false);
   const [
@@ -37,7 +40,14 @@ function InRoomModal() {
     getRoomInfo(roomDocumentId)
       .then((res: any) => {
         if (!res) setRoomView('notFoundRoomView');
-        else setRoomInfo(res);
+        else if (res.participants.length > 5) {
+          setRoomView('createRoomView');
+          setToastList({
+            type: 'danger',
+            title: '방 접속 실패',
+            description: '입장 가능 인원수가 초과되어 입장이 불가능 합니다',
+          });
+        } else setRoomInfo(res);
       });
 
     return () => {
@@ -48,7 +58,7 @@ function InRoomModal() {
   useEffect(() => {
     let isMount = true;
 
-    socket?.on('room:mic', ({ userData }: any) => {
+    socket?.on(roomSocketMessage.mic, ({ userData }: any) => {
       if (isMount) {
         const newParticipants = participants.reduce((acc: Array<IRTC>, cur: IRTC) => {
           if (userData.userDocumentId === cur.userDocumentId) {
@@ -69,12 +79,12 @@ function InRoomModal() {
 
     return () => {
       isMount = false;
-      socket?.off('room:mic');
+      socket?.off(roomSocketMessage.mic);
     };
   }, [socket, participants]);
 
   const micToggle = (isMicOn : boolean) => {
-    socket?.emit('room:mic', { roomDocumentId, userDocumentId: user.userDocumentId, isMicOn });
+    socket?.emit(roomSocketMessage.mic, { roomDocumentId, userDocumentId: user.userDocumentId, isMicOn });
     setMic(isMicOn);
     myStreamRef.current!
       .getAudioTracks()

client/src/components/room/modal/follower-select-header.tsx

@@ -7,6 +7,7 @@ import userState from '@atoms/user';
 import roomViewState from '@atoms/room-view-type';
 import { isOpenRoomModalState } from '@atoms/is-open-modal';
 import roomDoucumentIdState from '@atoms/room-document-id';
+import chatSocketMessage from '@constants/socket-message/chat';
 import { makeDateToHourMinute } from '@utils/index';
 import useChatSocket from '@utils/chat-socket';
 import { SelectHeaderWrap, SelectHeader, BtnStyle } from '@src/assets/styles/select-view-style';
@@ -41,7 +42,7 @@ export default function FollowerSelectRoomHeader({ onClick, selectedUsers }: any
       date: makeDateToHourMinute(nowDate),
       key: `${nowDate.getTime()}_${user.userDocumentId}`,
     };
-    chatSocket.emit('chat:inviteRoom', inviteInfo);
+    chatSocket.emit(chatSocketMessage.inviteRoom, inviteInfo);
     setToastList({
       type: 'success',
       title: '방 초대',