FIRE-362-fe-새-소켓에-적응하기

.env

@@ -5,4 +5,6 @@ REACT_APP_ROOM=http://172.16.101.93:8282/room
 REACT_APP_SEND_USER_INFORMATION_URL=https://모도코.com/api/v1/users
 REACT_APP_SOCKET_CHAT_URL=https://모도코.com/socket/chat
 REACT_APP_SOCKET_VIDEO_URL=https://모도코.com/socket/video
+REACT_APP_SOCKET_ROOM_URL=https://모도코.com/socket/room
+REACT_APP_SOCKET_TEST=http://localhost:3001/socket/room
 REACT_APP_GET_USER_INFO=https://모도코.com/api/v1/users/

src/App.tsx

@@ -4,6 +4,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import './fonts/font.css';
 import Layout from './components/layout/Layout';
 import Room from './pages/Room';
+import LandingPage from './pages/LandingPage';
 import Main from './pages/Main';
 
 const queryClient = new QueryClient();
@@ -14,12 +15,14 @@ function App() {
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Layout />}>
-            <Route index element={<Main />} />
+            <Route index element={<LandingPage />} />
           </Route>
           <Route path="/room">
             <Route path=":roomId" element={<Room />} />
           </Route>
-          <Route path="/main" element={<Main />} />
+          <Route path="/main" element={<Layout />}>
+            <Route index element={<Main />} />
+          </Route>
         </Routes>
       </BrowserRouter>
     </QueryClientProvider>

src/adapters/receiveMessage.ts

@@ -0,0 +1,54 @@
+import { useEffect } from 'react';
+import connectedUsersStore from '../stores/connectedUsersStore';
+import messageStore from '../stores/messagesStore';
+import roomSocket from './roomSocket';
+
+const onChatMessage = () => {
+  const { connectedUsers } = connectedUsersStore();
+  const { messages, appendMessages } = messageStore();
+
+  useEffect(() => {
+    const isHide = (msg, receiveMsg) => {
+      let isHideNicknameAndAvatar = true;
+
+      if (msg.length !== 0) {
+        if (msg[msg.length - 1].createdAt !== receiveMsg.createdAt) {
+          isHideNicknameAndAvatar = false;
+        } else if (msg[msg.length - 1].uid !== receiveMsg.sender) {
+          isHideNicknameAndAvatar = false;
+        }
+      } else isHideNicknameAndAvatar = false;
+      return isHideNicknameAndAvatar;
+    };
+
+    const receiveMessage = (receiveMsg) => {
+      const isMe = receiveMsg.sender === localStorage.getItem('uid');
+      const userInfo = isMe
+        ? [
+            {
+              uid: receiveMsg.sender,
+              nickname: localStorage.getItem('nickname'),
+              avatar: localStorage.getItem('avatar'),
+            },
+          ]
+        : connectedUsers.filter((user) => user.uid === receiveMsg.sender);
+      if (userInfo.length !== 0) {
+        appendMessages({
+          uid: userInfo[0].uid,
+          nickname: userInfo[0].nickname,
+          avatar: userInfo[0].avatar,
+          message: receiveMsg.message,
+          createdAt: receiveMsg.createdAt,
+          type: 'message',
+          isHideTime: false,
+          isHideNicknameAndAvatar: isHide(messages, receiveMsg),
+        });
+      } else console.log('[receiveChatting] userInfo가 존재하지 않음');
+    };
+    roomSocket.off('chatMessage').on('chatMessage', (message) => {
+      receiveMessage(message);
+    });
+  }, [connectedUsers]);
+};
+
+export default onChatMessage;

src/adapters/roomConnection.ts

@@ -0,0 +1,51 @@
+import { useEffect } from 'react';
+import axios from 'axios';
+import connectedUsersStore from '../stores/connectedUsersStore';
+import roomSocket from './roomSocket';
+
+export const roomConnection = (roomId) => {
+  const { appendUser, removeUser } = connectedUsersStore();
+  useEffect(() => {
+    const newUID = localStorage.getItem('uid');
+
+    const setConnected = (user, res) => {
+      appendUser({
+        nickname: res.data.nickname,
+        uid: user.uid,
+        avatar: res.data.avatar,
+        socketId: user.sid,
+      });
+    };
+
+    const payload = { room: roomId, uid: newUID };
+    roomSocket.emit('joinRoom', payload);
+
+    roomSocket.off('newUser').on('newUser', ({ sid, uid }) => {
+      axios
+        .get((process.env.REACT_APP_GET_USER_INFO as string) + uid)
+        .then((res) => {
+          setConnected({ sid, uid }, res);
+          console.log('new', res.data.nickname, 'joined');
+        });
+      console.log('new user joined', sid, uid);
+    });
+
+    roomSocket
+      .off('existingRoomUsers')
+      .on('existingRoomUsers', ({ users, current }) => {
+        console.log('i am ', current.sid);
+        users.map((user) => {
+          axios
+            .get((process.env.REACT_APP_GET_USER_INFO as string) + user.uid)
+            .then((res) => {
+              setConnected(user, res);
+            });
+          return user;
+        });
+      });
+
+    roomSocket.off('leftRoom').on('leftRoom', ({ sid }) => {
+      removeUser(sid);
+    });
+  }, []);
+};

src/adapters/roomSocket.ts

@@ -0,0 +1,5 @@
+import { io } from 'socket.io-client';
+
+const roomSocket = io(process.env.REACT_APP_SOCKET_ROOM_URL as string);
+
+export default roomSocket;

src/components/main/CreateRoom.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export default function CreateRoom() {
+  return (
+    <Container>
+      <DetailContainer>
+        <Title>새로 방 생성</Title>
+        <Detail>우리모두 모여서 도란도란 코딩해요.</Detail>
+      </DetailContainer>
+      <Enter>방 만들기 →</Enter>
+    </Container>
+  );
+}
+
+const Enter = styled.button`
+  position: absolute;
+  bottom: 6.4rem;
+  width: 12.6rem;
+  height: 4.8rem;
+  font-size: 1.6rem;
+  font-family: SFProDisplayRegular;
+  color: #fcfcfd;
+  border: solid 0.2rem #777e90;
+  border-radius: 9rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+`;
+
+const DetailContainer = styled.div`
+  position: relative;
+  margin-top: 3.2rem;
+  width: 29.3rem;
+  height: 14.7rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Detail = styled.div`
+  margin-top: 1.6rem;
+  color: #777e90;
+  font-size: 1.4rem;
+`;
+
+const Title = styled.div`
+  color: #fcfcfd;
+  font-size: 2.4rem;
+`;
+
+const Container = styled.div`
+  background-color: #23262f;
+  margin-right: 2.4rem;
+  border-radius: 2rem;
+  width: 34rem;
+  height: 50rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+`;

src/components/main/MainTitle.tsx

@@ -0,0 +1,42 @@
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+import Search from './Search';
+import { ReactComponent as MainFire } from '../../assets/svg/MainFire.svg';
+
+export default function TitleContainer() {
+  const navigate = useNavigate();
+  const randomEnter = () => {
+    navigate(`/room/random`);
+  };
+
+  return (
+    <Container>
+      <MainFire />
+      <Search />
+      <RandomEnter onClick={randomEnter}>랜덤 입장</RandomEnter>
+    </Container>
+  );
+}
+
+const RandomEnter = styled.button`
+  width: 16.1rem;
+  height: 5.4rem;
+  background-color: white;
+  margin-top: 4rem;
+  border-radius: 6.2rem;
+  cursor: pointer;
+  color: black;
+  font-size: 1.8rem;
+  font-family: JostRegular;
+  font-weight: 700;
+`;
+
+const Container = styled.div`
+  position: relative;
+  margin-top: 6rem;
+  width: 100%;
+  height: 35rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;