feat : 6자 이상 입력으로 수정

backend/src/index.js

@@ -47,19 +47,24 @@ io.on("connection", async (socket) => {
   socket.emit("getBubbles", rows);
 
   socket.on("addBubble", async (data) => {
-    console.log("Received input server: ", data);
+    const text = data.trim();
+    console.log("Received input server: ", text);
+    if (text.length < 6) {
+      console.log("메시지는 6자 이상으로 입력해주세요.");
+      return;
+    }
     const id = uuidv4();
     const createdAt = new Date();
     const deleteAt = new Date(Date.now() + 12 * 60 * 60 * 1000);
     await connection.query("INSERT INTO messages (id,text,created_at,delete_at) VALUES (?,?,?,?)", [
       id,
-      data,
+      text,
       createdAt,
       deleteAt,
     ]);
     io.emit("add", {
       id: id,
-      text: data,
+      text,
       created_at: createdAt,
       delete_at: deleteAt,
     });

frontend/index.html

@@ -6,10 +6,7 @@
     <title>걱정은 버블 🫧</title>
   </head>
   <!-- Google tag (gtag.js) -->
-  <script
-    async
-    src="https://www.googletagmanager.com/gtag/js?id=G-GW3835B2CX"
-  ></script>
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-GW3835B2CX"></script>
   <script>
     window.dataLayer = window.dataLayer || [];
     function gtag() {

frontend/src/components/bubble.js

@@ -11,11 +11,9 @@ export default class Bubble {
     this.strength = 3;
     const tempCanvas = document.createElement("canvas");
     const tempCtx = tempCanvas.getContext("2d");
-    // tempCtx.font = "bold 20px Arial"; // 기본 폰트 설정
     const textWidth = tempCtx.measureText(text).width;
     const textHeight = 20;
     this.radius = Math.max(textWidth, textHeight); // 여백을 포함하여 계산
-
     this.image = new Image();
     this.image.src = imageSrc;
     this.image.onload = () => {

frontend/src/components/toast.js

@@ -0,0 +1,66 @@
+import { $ } from "../utils/querySelector";
+
+export default class Toast {
+  constructor() {}
+
+  toastAnimation(toastContainer) {
+    setTimeout(() => {
+      toastContainer.classList.add("toast_mount_animation");
+    }, 10); // 약간의 지연을 줘서 애니메이션이 제대로 실행되도록
+
+    // 3초 후에 사라지는 애니메이션 추가 및 제거
+    setTimeout(() => {
+      toastContainer.classList.remove("toast_mount_animation");
+      toastContainer.classList.add("toast_unmount_animation");
+
+      // 애니메이션이 끝난 후 요소 제거
+      toastContainer.addEventListener("animationend", () => {
+        document.body.removeChild(toastContainer);
+      });
+    }, 1000);
+  }
+
+  render(message) {
+    const toastContainer = document.createElement("div");
+    toastContainer.className = "toast_container";
+
+    const toast = document.createElement("div");
+    toast.className = "toast";
+
+    const toastMessage = document.createElement("span");
+    toastMessage.className = "toast_message";
+    toastMessage.textContent = message;
+
+    toast.appendChild(this.warningIcon());
+    toast.appendChild(toastMessage);
+    toastContainer.appendChild(toast);
+
+    $("body").appendChild(toastContainer);
+    this.toastAnimation(toastContainer);
+  }
+
+  warningIcon() {
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("width", "24");
+    svg.setAttribute("height", "24");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+
+    // path 요소 생성
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute(
+      "d",
+      "M12 8V12V8ZM12 16H12.01H12ZM21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
+    );
+    path.setAttribute("stroke", "#E2584E");
+    path.setAttribute("stroke-width", "2");
+    path.setAttribute("stroke-linecap", "round");
+    path.setAttribute("stroke-linejoin", "round");
+
+    // SVG에 path 추가
+    svg.appendChild(path);
+
+    return svg;
+  }
+}

frontend/src/controller/inputController.js

@@ -1,11 +1,13 @@
 import io from "socket.io-client";
 import { $ } from "../utils/querySelector";
+import Toast from "../components/toast";
 
 export default class InputController {
   constructor() {
     this.input = $("#message_input");
     this.button = $("#message_submit_button");
     this.socket = io(process.env.SOCKET_IP, { path: "/api" });
+    this.toast = new Toast();
   }
 
   init() {
@@ -15,9 +17,14 @@ export default class InputController {
 
   inputEnterKeyDown() {
     this.input.addEventListener("keydown", ({ key, isComposing }) => {
-      if (this.input.value === "") return;
       if (key === "Enter" && !isComposing) {
-        const message = this.input.value;
+        const message = this.input.value.trim();
+        if (message === "") return;
+        if (message.length < 6) {
+          this.toast.render("메시지는 6자 이상으로 입력해주세요.");
+          console.log("메시지는 6자 이상으로 입력해주세요.");
+          return;
+        }
         this.input.value = "";
         this.socket.emit("addBubble", message);
       }
@@ -26,8 +33,13 @@ export default class InputController {
 
   buttonSubmit() {
     this.button.addEventListener("click", () => {
-      if (this.input.value === "") return;
-      const message = this.input.value;
+      const message = this.input.value.trim();
+      if (message === "") return;
+      if (message.length < 6) {
+        this.toast.render("메시지는 6자 이상으로 입력해주세요.");
+        console.log("메시지는 6자 이상으로 입력해주세요.");
+        return;
+      }
       this.input.value = "";
       this.socket.emit("addBubble", message);
     });

frontend/src/index.js

@@ -5,8 +5,8 @@ import Menu from "./components/menu/menu";
 import MenuController from "./controller/menuController";
 
 window.onload = function () {
-  navigator.mediaDevices
-    .getUserMedia({ audio: true })
+  navigator?.mediaDevices
+    ?.getUserMedia({ audio: true })
     .then(() => {
       AudioContext = window.AudioContext || window.webkitAudioContext;
       audioContext = new AudioContext();

frontend/src/styles/common.css

@@ -3,6 +3,7 @@
 @import "./input.css";
 @import "./canvas.css";
 @import "./menu.css";
+@import "./toast.css";
 
 body {
   width: 100vw;

frontend/src/styles/toast.css

@@ -0,0 +1,42 @@
+.toast_container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  position: fixed;
+  top: -200px;
+  transition: all 0.5s ease;
+  z-index: 100;
+}
+
+.toast_mount_animation {
+  transform: translateY(250px);
+}
+
+.toast_unmount_animation {
+  transform: translateY(-250px);
+}
+
+.toast {
+  background-color: #f8d7da;
+  padding: 8px 10px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  border-radius: 10px;
+  gap: 10px;
+  shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  z-index: 100;
+}
+
+.toast_message {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  font-size: 1.3rem;
+  font-family: "Dongle", sans-serif;
+}
+
+.toast_container {
+  width: 100%;
+}