Merge pull request #73 from SWM-FIRE/FIRE-329-fe-소켓으로-채팅-주고받음

FIRE-329 fix entrance message

src/components/room/ChattingItem.tsx

@@ -17,7 +17,7 @@ export default function ChattingItem({
     <div>
       {entrance ? (
         <EntranceComponent isMe={isMe}>
-          <Entrance>{user.uid} 님이 입장했습니다.</Entrance>
+          <Entrance>{user.nickname} 님이 입장했습니다.</Entrance>
         </EntranceComponent>
       ) : (
         <Component isMe={isMe}>
@@ -36,20 +36,6 @@ export default function ChattingItem({
         </Component>
       )}
     </div>
-    // <Component isMe={isMe}>
-    //   {isMe && (
-    //     <AvatarComponent>
-    //       <MyAvatar num={Number(user.avatar)} />
-    //     </AvatarComponent>
-    //   )}
-    //   <MessageComponent isMe={isMe}>
-    //     <Nickname isMe={isMe}>{isMe ? '나' : `${user.nickname}`}</Nickname>
-    //     <MessageBox isMe={isMe}>
-    //       <Message isMe={isMe}>{msg}</Message>
-    //       <Time>{time}</Time>
-    //     </MessageBox>
-    //   </MessageComponent>
-    // </Component>
   );
 }
 
@@ -61,13 +47,15 @@ const EntranceComponent = styled.div<userInterface>`
   display: ${({ isMe }) => (isMe ? 'none' : 'flex')};
   align-items: center;
   justify-content: center;
+  margin-top: 2.4rem;
 `;
 
 const Entrance = styled.div`
   border: 1px solid rgb(53, 55, 65);
   border-radius: 2rem;
   padding: 0.7rem;
   background-color: rgb(53, 55, 65);
+  color: #bbbaba;
 `;
 
 const Component = styled.li<userInterface>`

src/pages/Room.tsx

@@ -28,7 +28,6 @@ export default function Room() {
   const { isOpen } = controlModal();
   const { roomId } = useParams();
   const { enablePrevent, disablePrevent } = usePreventLeave();
-  console.log('room rerendering, prev : ', prev);
   const { connectedUsers, appendUser, removeUser } = connectedUsersStore();
 
   useEffect(() => {
@@ -92,7 +91,13 @@ export default function Room() {
   }, []);
 
   const receiveJoin = (uid) => {
-    setMessages([...messages, { prev: '0', uid }]);
+    const API_URL = process.env.REACT_APP_GET_USER_INFO as string;
+    axios.get(API_URL + uid).then((res) => {
+      setMessages([
+        ...messages,
+        { prev: '0', uid, nickname: res.data.nickname },
+      ]);
+    });
     setPrev(Date.now().toString());
   };
 

src/stores/connectUserStore.ts

@@ -0,0 +1,28 @@
+// import create from 'zustand';
+// import User from '../interface/user.interface';
+
+// interface UserInterface {
+//   uid: User;
+// }
+
+// interface connectUsers {
+//   connectedUsers: UserInterface[];
+//   setUsers: (_users: UserInterface[]) => void;
+//   appendUser: (_user: UserInterface) => void;
+//   removeUser: (_user: string) => void;
+// }
+
+// const connectUsersStore = create<connectUsers>((set) => ({
+//   connectedUsers: [],
+//   setUsers: (by) => set(() => ({ connectedUsers: by })),
+//   appendUser: (by) =>
+//     set((state) => ({ connectedUsers: [...state.connectedUsers, by] })),
+//   removeUser: (by) =>
+//     set((state) => ({
+//       connectedUsers: state.connectedUsers.filter(
+//         (user) => user.socketId !== by,
+//       ),
+//     })),
+// }));
+
+// export default connectUsersStore;