Merge pull request #298 from boostcampwm-2021/refactor/ChatRoom

Refactor/chat room

client/src/Component/Atom/Video.tsx

@@ -2,23 +2,10 @@ import React, { useEffect, useRef, useState } from "react";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 
-const GameStyle = css`
-  top: -10%;
-  width: 150px;
-  height: 150px;
-`;
-
-const GatherStyle = css`
-  width: 150px;
-  height: 150px;
-`;
-
-const containerStyle = (props: { type: string }) => css`
+const containerStyle = css`
   width: 240px;
   height: 240px;
   border: 1px solid #000000;
-  ${props.type === "Game" && GameStyle}
-  ${props.type === "Gather" && GatherStyle}
 `;
 
 const VideoContainer = styled.video`
@@ -29,11 +16,10 @@ const VideoContainer = styled.video`
 
 interface Props {
   stream: MediaStream;
-  type: string;
   muted?: boolean;
 }
 
-export const Video = ({ type, stream, muted }: Props) => {
+export const Video = ({ stream, muted }: Props) => {
   const videoRef = useRef<HTMLVideoElement>(null);
   const [isMuted, setIsMuted] = useState<boolean>(false);
 
@@ -45,7 +31,7 @@ export const Video = ({ type, stream, muted }: Props) => {
   }, [stream, muted]);
 
   return (
-    <div css={containerStyle({ type })}>
+    <div css={containerStyle}>
       <VideoContainer ref={videoRef} muted={isMuted} autoPlay />
     </div>
   );

client/src/Component/Molecules/Chat/ChatInput/ChatInput.hook.tsx

@@ -0,0 +1,40 @@
+import { postChat } from "@Util/data";
+import { ChangeEvent, ChangeEventHandler, useRef } from "react";
+import ClientSocket from "Socket";
+
+type chatRoomInfo = {
+  uid: string;
+  chatRoomId: number;
+};
+
+export const useChatMessageControl = ({ uid, chatRoomId }: chatRoomInfo) => {
+  const messageRef = useRef<HTMLInputElement>(null);
+  const sendMessage = () => {
+    if (!messageRef.current?.value) return;
+    sendChat({ uid, chatRoomId, message: messageRef.current.value });
+    messageRef.current.value = "";
+  };
+  const handleEnterPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.code !== "Enter") return;
+    sendMessage();
+  };
+  return { messageRef, sendMessage, handleEnterPress };
+};
+
+type sendChatPropsType = chatRoomInfo & { message: string };
+const sendChat = ({ uid, chatRoomId, message }: sendChatPropsType) => {
+  const { socket } = new ClientSocket(uid);
+  socket?.emit("sendChat", { chatRoomId, message: { from: uid, message, read: false, source: "" } });
+};
+
+export const useChatImageControl = ({ uid, chatRoomId }: chatRoomInfo) => {
+  const imageInputTag = useRef<HTMLInputElement>(null);
+  const handleImageButtonClick = () => (imageInputTag.current as HTMLInputElement).click();
+
+  const changeImage: ChangeEventHandler<HTMLInputElement> = (event: ChangeEvent<HTMLInputElement>) => {
+    if (!event.target.files) return;
+    postChat(chatRoomId, uid, event.target.files[0]);
+  };
+
+  return { imageInputTag, handleImageButtonClick, changeImage };
+};

client/src/Component/Molecules/Chat/ChatInput/ChatInput.tsx

@@ -0,0 +1,57 @@
+import { css } from "@emotion/react";
+import { useRecoilValue } from "recoil";
+import { Input } from "@Atom/.";
+import { userChatRoomInfo } from "@Recoil/ChatData";
+import { useChatImageControl, useChatMessageControl } from "./ChatInput.hook";
+
+export const ChatInput = () => {
+  const { chatRoomId, id: uid } = useRecoilValue(userChatRoomInfo);
+  const { messageRef, sendMessage, handleEnterPress } = useChatMessageControl({ uid, chatRoomId });
+  const { imageInputTag, handleImageButtonClick, changeImage } = useChatImageControl({ uid, chatRoomId });
+
+  return (
+    <div css={InputContainer}>
+      <div css={sendImageStyle} aria-hidden="true" onClick={handleImageButtonClick} />
+      <Input placeholder="메시지를 입력하세요" ref={messageRef} onKeyPress={handleEnterPress} />
+      <div css={sendButtonStyle} aria-hidden="true" onClick={sendMessage} />
+      <input ref={imageInputTag} type="file" accept="image/*" css={ImageInputStlye} onChange={changeImage} />
+    </div>
+  );
+};
+
+const ImageSendButton = "/Asset/ImageSendButton.svg";
+const SendButton = "/Asset/SendButton.svg";
+
+const InputContainer = css`
+  display: flex;
+  justify-content: center;
+  padding-top: 10px;
+  align-items: center;
+  height: fit-content;
+`;
+
+const sendImageStyle = css`
+  background-image: url(${ImageSendButton});
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 25px;
+  height: 25px;
+  margin-right: 10px;
+  cursor: pointer;
+`;
+
+const sendButtonStyle = css`
+  background-image: url(${SendButton});
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 25px;
+  height: 25px;
+  margin-left: 10px;
+  cursor: pointer;
+`;
+
+const ImageInputStlye = css`
+  display: none;
+`;