#773 채팅 140자 넘으면 입력 막기 & 글자 수 circular progress bar로 표시

packages/web/package.json

@@ -20,6 +20,7 @@
     "prop-types": "^15.8.1",
     "qs": "^6.11.0",
     "react": "^18.2.0",
+    "react-circular-progressbar": "^2.1.0",
     "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
     "react-ga4": "^1.4.1",

packages/web/src/components/Chat/MessageForm/InputText/BodyText.tsx

@@ -10,9 +10,15 @@ import theme from "@/tools/theme";
 
 type BodyTextProps = {
   sendMessage: ReturnType<typeof useSendMessage>;
+  onTextChange: (msgLength: number) => void; // 글자 수를 부모에게 전달하여 circular progressbar에 사용
+  maxChatMsgLength: number; // 채팅 입력 최대 길이입니다.
 };
 
-const BodyText = ({ sendMessage }: BodyTextProps) => {
+const BodyText = ({
+  sendMessage,
+  onTextChange,
+  maxChatMsgLength,
+}: BodyTextProps) => {
   const wrapRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>();
   const [height, setHeight] = useState<CSS["height"]>("32px");
@@ -45,8 +51,13 @@ const BodyText = ({ sendMessage }: BodyTextProps) => {
   const [isMessageValidState, setIsMessageValidState] =
     useState<boolean>(false);
   const getIsMessageValid = useCallback(
-    (message: string): boolean =>
-      regExpTest.chatMsg(message) && !isSendingMessage,
+    (message: string): boolean => {
+      return (
+        regExpTest.chatMsg(message) &&
+        regExpTest.chatMsgLength(message) &&
+        !isSendingMessage
+      );
+    },
     [isSendingMessage]
   );
   useEffect(
@@ -82,6 +93,15 @@ const BodyText = ({ sendMessage }: BodyTextProps) => {
       if (isSendingMessage) refreshTextArea();
       setIsMessageValidState(getIsMessageValid(textareaRef.current.value));
 
+      if (textareaRef.current.value.length > maxChatMsgLength) {
+        textareaRef.current.value = textareaRef.current.value.substring(
+          0,
+          maxChatMsgLength
+        );
+      }
+
+      onTextChange(textareaRef.current.value.length);
+
       if (isEnterPressed.current && !isShiftPressed.current) {
         onSend();
         return;
@@ -110,6 +130,7 @@ const BodyText = ({ sendMessage }: BodyTextProps) => {
     if (textareaRef.current) wrapRef.current.removeChild(textareaRef.current);
     const textarea = document.createElement("textarea");
     textarea.oninput = onChange;
+    // textarea.maxLength = maxChatMsgLength;
     textarea.addEventListener("keydown", onKeyDown);
     textarea.addEventListener("keyup", onKeyUp);
     textarea.placeholder = "채팅을 입력해주세요";

packages/web/src/components/Chat/MessageForm/InputText/index.tsx

@@ -1,3 +1,7 @@
+import { useState } from "react";
+import { CircularProgressbar, buildStyles } from "react-circular-progressbar";
+import "react-circular-progressbar/dist/styles.css";
+
 import useSendMessage from "@/hooks/chat/useSendMessage";
 
 import BodyImage from "./BodyImage";
@@ -17,8 +21,67 @@ const InputText = ({
   sendMessage,
 }: InputTextProps) => {
   const inputMode = uploadedImage ? "image" : "text";
+  const [chatMsgLength, setChatMsgLength] = useState<number>(0);
+  const maxChatMsgLength = 140; // 채팅 입력 최대 길이입니다.
   const children = {
-    text: <BodyText sendMessage={sendMessage} />,
+    text: (
+      <div
+        style={{
+          display: "flex",
+          flex: 1,
+          flexDirection: "row",
+          alignItems: "center",
+        }}
+      >
+        <div
+          style={{
+            width: "28px",
+            height: "28px",
+            marginLeft: "0px",
+            position: "relative",
+          }}
+        >
+          <CircularProgressbar
+            value={chatMsgLength}
+            maxValue={maxChatMsgLength}
+            strokeWidth={10}
+            styles={buildStyles({
+              // Rotation of path and trail, in number of turns (0-1)
+              rotation: 0.25,
+
+              // Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
+              strokeLinecap: "butt",
+
+              // Text size
+              textSize: "28px",
+
+              // How long animation takes to go from one chatMsgLength to another, in seconds
+              pathTransitionDuration: 0.2,
+
+              // Can specify path transition in more detail, or remove it entirely
+              // pathTransition: 'none',
+
+              // Colors
+              pathColor: `${
+                chatMsgLength < maxChatMsgLength
+                  ? `rgba(110, 54, 120)`
+                  : `rgba(180, 0, 0)`
+              }`,
+              textColor: "#000000",
+              trailColor: "#d6d6d6",
+              backgroundColor: "#3e98c7",
+            })}
+          />
+        </div>
+        <div style={{ flex: 1 }}>
+          <BodyText
+            sendMessage={sendMessage}
+            onTextChange={setChatMsgLength}
+            maxChatMsgLength={maxChatMsgLength}
+          />
+        </div>
+      </div>
+    ),
     image: (
       <BodyImage
         uploadedImage={uploadedImage as File}

packages/web/src/components/Chat/MessagesBody/MessageSet/MessageText.tsx

@@ -12,7 +12,7 @@ const MessageText = ({ text, color }: MessageTextProps) => (
       color,
       wordBreak: "break-all",
       ...theme.font14,
-      whiteSpace: "pre-line",
+      whiteSpace: "break-spaces",
     }}
     className="selectable"
   >

packages/web/src/hooks/chat/useSendMessage.tsx

@@ -26,7 +26,7 @@ export default (
         if (["text", "account"].includes(type)) {
           // 메시지가 정규식 검사에서 통과하지 못했다면 전송을 막습니다.
           if (!text) throw new Error();
-          if (type === "text" && !regExpTest.chatMsg(text)) throw new Error();
+          if (type === "text" && !regExpTest.chatMsg(text) && !regExpTest.chatMsgLength(text)) throw new Error();
           if (type === "account" && !regExpTest.account(text))
             throw new Error();
 

packages/web/src/tools/regExpTest.js

@@ -1,7 +1,8 @@
 // 모든 정규식들은 아래 링크의 규칙을 기반으로 함
 // https://www.notion.so/sparcs/Input-value-Regular-Expression-4f3e778c3b884cfe9a1b5a733c8da8fb
 
-const chatMsg = (x) => RegExp("^[\\s\\S]{1,500}$").test(x);
+const chatMsg = (x) => RegExp("^\\s{0,}\\S{1}[\\s\\S]{0,}$").test(x);
+const chatMsgLength = (x) => RegExp("^[\\s\\S]{1,140}$").test(x);
 
 const nickname = (x) => {
   return RegExp("^[A-Za-z가-힣ㄱ-ㅎㅏ-ㅣ0-9-_ ]{3,25}$").test(x);
@@ -31,6 +32,7 @@ const account = (x) => {
 
 export default {
   chatMsg,
+  chatMsgLength,
   nickname,
   phoneNumber,
   roomName,