Merge pull request #94 from SWM-FIRE/FIRE-407-fe-socket으로-join-room-emit-보내고-처리하기

FIRE-407 add alert message

Author: haryung-lee

src/adapters/roomConnection.ts

@@ -1,12 +1,14 @@
 import { useEffect } from 'react';
 import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
 import connectedUsersStore from '../stores/connectedUsersStore';
 import roomSocket from './roomSocket';
 import messageStore from '../stores/messagesStore';
 import userPcStore from '../stores/userPcStore';
 import { API } from '../config';
 
 export const roomConnection = (roomId) => {
+  const navigate = useNavigate();
   const { connectedUsers, appendUser, removeUser, findUser } =
     connectedUsersStore();
   const { appendMessages } = messageStore();
@@ -40,6 +42,12 @@ export const roomConnection = (roomId) => {
       console.log('[roomConnection] joinedRoom', room);
     });
 
+    roomSocket.off('roomFull').on('roomFull', (room) => {
+      alert(`해당 방이 꽉 찼습니다.`);
+      console.log(room);
+      navigate('/main');
+    });
+
     roomSocket
       .off('existingRoomUsers')
       .on('existingRoomUsers', ({ users, current }) => {

src/components/main/Block.tsx

@@ -6,7 +6,6 @@ import blockInterface from '../../interface/block.interface';
 import MyAvatar from '../../assets/avatar/MyAvatar';
 import ThemeImage from '../atoms/ThemeImages';
 import { ReactComponent as Bar } from '../../assets/svg/Room/Bar.svg';
-import useRoom from '../../hooks/useRoom';
 
 export default function Block({
   isMain,
@@ -21,17 +20,15 @@ export default function Block({
 }: blockInterface) {
   const navigate = useNavigate();
   const { nickname } = UserStore();
-  const { data } = useRoom(itemId);
 
   const enterRoom = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
     if (!nickname) {
       alert('로그인이 필요합니다.');
       return;
     }
-
-    if (data.current === data.total) {
-      alert('방이 이미 초과되었습니다.');
+    if (current === total) {
+      alert(`해당 방이 꽉 찼습니다.`);
       return;
     }
 

src/components/main/CreateRoomForm.tsx

@@ -53,7 +53,8 @@ export default function CreateRoomForm() {
     setTags(tags.filter((_, i) => i !== index));
   };
 
-  const onSubmit = () => {
+  const onSubmit = (e) => {
+    e.preventDefault();
     axios
       .post(API.ROOM, {
         moderator: {