[Feat/server] 채팅 Text Input 띄어쓰기 이슈 해결과 Global Style 파일 생성

front/src/components/Chat/ChatInputField.tsx

@@ -0,0 +1,37 @@
+import { TextField } from "@mui/material";
+import useChatInputStore from "../../store/useChatInputStore";
+import { Send } from "@mui/icons-material";
+
+const ChatInputField = () => {
+  const chatInputValue = useChatInputStore((state) => state.inputValue);
+  const setChatInputValue = useChatInputStore((state) => state.setInputValue);
+
+  const handleSendMessage = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (chatInputValue.trim() !== "") {
+      setChatInputValue(chatInputValue);
+
+      const event = new CustomEvent("updateBalloonText", {
+        detail: chatInputValue,
+      });
+      window.dispatchEvent(event);
+
+      setChatInputValue("");
+    }
+  };
+
+  return (
+    <form onSubmit={handleSendMessage}>
+      <TextField
+        type="text"
+        value={chatInputValue}
+        onChange={(e) => setChatInputValue(e.target.value)}
+        sx={{ wordBreak: "break" }}
+      />
+
+      <Send></Send>
+    </form>
+  );
+};
+
+export default ChatInputField;

front/src/components/Chat/ChatRoomSideBar.tsx

@@ -1,14 +1,17 @@
-import React, { useCallback } from 'react'
-import useChatRoomStore from '../../store/useChatRoomStore'
-import { Box, styled } from '@mui/material';
+import { useCallback } from "react";
+import useChatRoomStore from "../../store/useChatRoomStore";
+import { Box, styled } from "@mui/material";
 import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 
+import ChatInputField from "./ChatInputField";
+
 const ChatRoomSideBar = () => {
-  const setIsChatRoomShow = useChatRoomStore((state)=> state.setIsChatRoomShow);
-  const handleChatRoomClose = useCallback(()=>{
+  const setIsChatRoomShow = useChatRoomStore(
+    (state) => state.setIsChatRoomShow
+  );
+  const handleChatRoomClose = useCallback(() => {
     setIsChatRoomShow(false);
-  },[setIsChatRoomShow])
-
+  }, [setIsChatRoomShow]);
 
   const DrawerHeader = styled("div")(({ theme }) => ({
     display: "flex",
@@ -20,17 +23,18 @@ const ChatRoomSideBar = () => {
   }));
 
   return (
-    <DrawerHeader >
-      <ArrowForwardIosIcon 
-      onClick={handleChatRoomClose} 
-      sx={{color:"white"}}
-      className="cursor-pointer"
+    <DrawerHeader>
+      <ArrowForwardIosIcon
+        onClick={handleChatRoomClose}
+        sx={{ color: "white" }}
+        className="cursor-pointer"
       />
       <Box>
-        <div >다이렉트 메세지</div>
+        <div>다이렉트 메세지</div>
+        <ChatInputField />
       </Box>
     </DrawerHeader>
-  )
-}
+  );
+};
 
-export default ChatRoomSideBar
+export default ChatRoomSideBar;

front/src/components/Layout/Header.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import MuiAppBar from "@mui/material/AppBar";
-import { Box, Drawer, Toolbar, Typography, styled } from "@mui/material";
+import { Box, Drawer, Input, Toolbar, Typography, styled } from "@mui/material";
 import SupervisedUserCircleIcon from "@mui/icons-material/SupervisedUserCircle";
 import ChatBubbleIcon from "@mui/icons-material/ChatBubble";
 import FriendsRightSideBar from "./FriendsRightSideBar";
@@ -106,4 +106,4 @@ const Header = () => {
   );
 };
 
-export default Header;
+export default Header;

front/src/components/Map/ServerMap.tsx

@@ -2,16 +2,16 @@ import { forwardRef, useEffect, useLayoutEffect, useRef } from "react";
 import { EventBus } from "./EventBus";
 import { ServerMapProps, ServerMapTypes } from "../../types/map";
 import EnterServer from "./main";
-import { MainMap } from "./ServerMap/MainMap";
 import VideoCallBoxList from "../VideoCall/VideoCallBoxList";
-
+import useChatInputStore from "../../store/useChatInputStore";
 
 // 서버를 생성하고 관리하는 컴포넌트
 // forwardRef를 사용해 부모 컴포넌트로부터 ref를 전달 받음
 export const ServerMap = forwardRef<ServerMapTypes, ServerMapProps>(
   function ServerMap({ currentActiveScene }, ref) {
     // Phaser.Game 인스턴스를 저장하기 위한 ref 생성
     const mapRef = useRef<Phaser.Game | null>(null!);
+    const chatInputValue = useChatInputStore((state) => state.inputValue);
 
     // 브라우저 화면 크기에 따라서 맵의 크기도 리사이즈 되는 함수
     const resizeMap = () => {
@@ -40,7 +40,7 @@ export const ServerMap = forwardRef<ServerMapTypes, ServerMapProps>(
         resizeMap();
         window.addEventListener("resize", resizeMap, false);
 
-        // 확대 & 축소 이벤트
+        // 화면 확대
         document.getElementById("zoom-in")?.addEventListener("click", () => {
           if (mapRef.current) {
             const mainCamera = mapRef.current.scene.scenes[1].cameras.main;
@@ -50,6 +50,7 @@ export const ServerMap = forwardRef<ServerMapTypes, ServerMapProps>(
           }
         });
 
+        //  화면 축소
         document.getElementById("zoom-out")?.addEventListener("click", () => {
           if (mapRef.current) {
             const mainCamera = mapRef.current.scene.scenes[1].cameras.main;
@@ -90,29 +91,14 @@ export const ServerMap = forwardRef<ServerMapTypes, ServerMapProps>(
       };
     }, [currentActiveScene, ref]);
 
-    useEffect(() => {
-      const inputField = document.getElementById(
-        "chat-input"
-      ) as HTMLInputElement;
-      console.log(inputField);
-      const handleKeyEnter = (event: KeyboardEvent) => {
-        if (event.key === "Enter") {
-          const target = event.target as HTMLInputElement;
-
-          const mainScene = mapRef.current?.scene.getScene(
-            "MainMap"
-          ) as MainMap;
-          mainScene?.setBalloonText(target.value);
-        }
-      };
-      inputField?.addEventListener("keydown", handleKeyEnter);
-      return () => {
-        inputField?.removeEventListener("keydown", handleKeyEnter);
-      };
-    }, []);
+    useEffect(() => {}, []);
 
     return (
-      <div id="map-container" className="relative">
+      <div id="map-container">
+        <div className="absolute flex left-36 top-20">
+          <VideoCallBoxList />
+        </div>
+
         <div className="absolute flex left-36 top-20">
           <div id="menu"></div>
           <div id="zoom-in" className="cursor-pointer">
@@ -124,8 +110,6 @@ export const ServerMap = forwardRef<ServerMapTypes, ServerMapProps>(
           <div id="drag" className="cursor-pointer">
             드래그
           </div>
-          <input type="text" id="chat-input"></input>
-          <VideoCallBoxList/>
         </div>
       </div>
     );

front/src/components/Map/ServerMap/MainMap.ts

@@ -7,9 +7,6 @@ export class MainMap extends Scene {
   private mapInstance!: Phaser.Game;
   private character!: Phaser.Physics.Arcade.Sprite;
   private keyboards!: Phaser.Types.Input.Keyboard.CursorKeys;
-  private isDragging: boolean = false;
-  private dragStartX: number = 0;
-  private dragStartY: number = 0;
   private speechBalloon!: Phaser.GameObjects.Text;
 
   constructor() {
@@ -60,6 +57,11 @@ export class MainMap extends Scene {
             resolution: 2,
           })
           .setOrigin(0.5);
+
+        window.addEventListener("updateBalloonText", (event: Event) => {
+          const customEvent = event as CustomEvent<string>;
+          this.setBalloonText(customEvent.detail);
+        });
       } catch (error) {
         console.error(error);
       }
@@ -83,6 +85,20 @@ export class MainMap extends Scene {
 
     this.character.setVelocity(0);
 
+    this.input.keyboard?.on("keydown", (e: KeyboardEvent) => {
+      if (document.activeElement?.tagName === "INPUT") {
+        this.input.keyboard?.removeCapture(
+          Phaser.Input.Keyboard.KeyCodes.SPACE
+        );
+        this.input.keyboard?.removeCapture(Phaser.Input.Keyboard.KeyCodes.UP);
+        this.input.keyboard?.removeCapture(Phaser.Input.Keyboard.KeyCodes.DOWN);
+        this.input.keyboard?.removeCapture(Phaser.Input.Keyboard.KeyCodes.LEFT);
+        this.input.keyboard?.removeCapture(
+          Phaser.Input.Keyboard.KeyCodes.RIGHT
+        );
+      }
+    });
+
     if (this.keyboards.down.isDown) {
       this.character.setVelocityY(100);
       this.character.anims.play("basic_character_move_down", true);
@@ -100,6 +116,7 @@ export class MainMap extends Scene {
     }
     this.speechBalloon.setPosition(this.character.x, this.character.y - 50);
   }
+
   setBalloonText(text: string) {
     if (this.speechBalloon) {
       this.speechBalloon.setText(text);

front/src/store/useChatInputStore.ts

@@ -0,0 +1,13 @@
+import create from "zustand";
+
+interface ChatInputState {
+  inputValue: string;
+  setInputValue: (value: string) => void;
+}
+
+const useChatInputStore = create<ChatInputState>((set) => ({
+  inputValue: "",
+  setInputValue: (value) => set({ inputValue: value }),
+}));
+
+export default useChatInputStore;

front/src/style/globalStyles.ts

@@ -0,0 +1,29 @@
+// Colors
+export const globalColors = {
+  white: "#ffffff",
+  black: "",
+  primary: "#2a2f4f",
+  secondary: "#917fb3",
+  pink: "#e5beec",
+  lightPink: "#fde2f3",
+  scale: {
+    50: "#f8f7fb",
+    100: "#f2f0f7",
+    200: "#e6e4f0",
+    300: "#d3cee4",
+    400: "#b9b2d3",
+    500: "#9f91c1",
+    600: "#917fb3", // Secondary
+    700: "#7a659c",
+    800: "#655582",
+    900: "#54476b",
+    950: "#362d48",
+  },
+};
+
+// Font Size
+export const globalFontSize = {
+  title: "2.5rem",
+  subtitle: "2.2rem",
+  body: "1.8rem",
+};

front/src/theme/themeConfig.ts

@@ -1,18 +1,41 @@
 import { createTheme } from "@mui/material/styles";
+import { globalColors } from "../style/globalStyles";
 
 const theme = createTheme({
   palette: {
     primary: {
-      light: "#FDE2F3",
-      main: "#917FB3",
-      dark: "#E5BEEC",
-      contrastText: "#fff",
+      light: globalColors.lightPink,
+      main: globalColors.secondary,
+      dark: globalColors.pink,
+      contrastText: globalColors.white,
     },
     secondary: {
-      light: "#2A2F4F",
-      main: "#2A2F4F",
-      dark: "#E5BEEC",
-      contrastText: "#fff",
+      light: globalColors.primary,
+      main: globalColors.primary,
+      dark: globalColors.pink,
+      contrastText: globalColors.white,
+    },
+  },
+
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        contained: {
+          backgroundColor: globalColors.primary,
+          color: globalColors.white,
+          "&:hover": {
+            backgroundColor: globalColors.secondary,
+          },
+        },
+        outlined: {
+          borderColor: globalColors.primary,
+          color: globalColors.primary,
+          "&:hover": {
+            borderColor: globalColors.secondary,
+            color: globalColors.secondary,
+          },
+        },
+      },
     },
   },
 });