[Feat/user] 서버 맵에서 채팅 박스 추가 및

front/src/api/server.ts

@@ -70,3 +70,20 @@ export const createServer = async (
     throw new Error("");
   }
 };
+
+// 서버 탈퇴
+export const leaveServer = async (serverId: string, token: string) => {
+  console.log(serverId, token);
+  try {
+    await axiosInstance({
+      ...SERVER_API.DELETE_REQUEST.leaveServer(serverId),
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    console.log("서버탈퇴 성공");
+  } catch (error) {
+    throw new Error("탈퇴실패");
+  }
+};

front/src/api/user.ts

@@ -90,6 +90,34 @@ export const searchUser = async (
     console.log(error);
   }
 };
+// 사용자 프로필 수정
+export const editUserProfile = async (
+  userId: string,
+  token: string,
+  editValues: UserTypes.EditProfileFormValues
+) => {
+  try {
+    const response = await axiosInstance({
+      ...USER_API.PATCH_REQUEST.editProfile,
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "multipart/form-data",
+      },
+      data: {
+        userId,
+        email: editValues.email,
+        username: editValues.nickname,
+        password: editValues.password,
+        newPassword: editValues.newPassword,
+      },
+    });
+    console.log(response.data);
+
+    // return response.data;
+  } catch (error) {
+    console.log(error);
+  }
+};
 
 // 사용자 프로필 조회
 export const getUserProfile = async (
@@ -188,3 +216,19 @@ export const deleteFriend = async (
     console.log(error);
   }
 };
+
+// 회원 탈퇴
+export const deleteUser = async (userId: string, token: string) => {
+  try {
+    const response = await axiosInstance({
+      ...USER_API.DELETE_REQUEST.deleteAccount(userId),
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    console.log(response.data);
+  } catch (error) {
+    console.log(error);
+  }
+};

front/src/components/Phaser/MapTheme/BeachMap.ts

@@ -1,16 +1,27 @@
 import { Scene } from "phaser";
-import { createRandomAvatar, randomSkin } from "../Scenes/Avatar";
-import { controlAvatarAnimations } from "../Avatar/controlAvatar";
+import { createRandomAvatar } from "../Scenes/Avatar";
+import { setupCameraControls } from "../Scenes/cameraControls";
 
 export class BeachMap extends Scene {
   private avatar!: Phaser.GameObjects.Container;
   private keyboards!: Phaser.Types.Input.Keyboard.CursorKeys | null;
+  private spaceKey!: Phaser.Input.Keyboard.Key | undefined;
+  private isJumping: boolean = false;
+  private nickname: string;
 
-  constructor() {
+  constructor(nickname: string) {
     super("BeachMap");
+    this.nickname = nickname;
+  }
+
+  init(data: { nickname: string }) {
+    this.nickname = data.nickname;
   }
 
   create() {
+    this.spaceKey = this.input.keyboard?.addKey(
+      Phaser.Input.Keyboard.KeyCodes.SPACE
+    );
     const beachMap = this.make.tilemap({ key: "beach" });
     const beachTilesets = beachMap.addTilesetImage(
       "beach_tilesets",
@@ -33,15 +44,21 @@ export class BeachMap extends Scene {
         faceColor: new Phaser.Display.Color(48, 38, 37, 255),
       });
 
-      this.avatar = createRandomAvatar(this, 550, 350);
+      this.avatar = createRandomAvatar(this, 550, 350, this.nickname);
+      this.cameras.main.startFollow(this.avatar);
+      this.cameras.main.setZoom(2);
+      this.avatar.setDepth(10);
+
       this.add.existing(this.avatar);
       this.avatar.setScale(2);
-      this.cameras.main.startFollow(this.avatar);
 
       if (bottomGroundLayer)
         this.physics.add.collider(this.avatar, bottomGroundLayer);
     }
 
+    setupCameraControls(this, this.avatar);
+    this.isJumping = false;
+
     if (this.input.keyboard) {
       this.keyboards = this.input.keyboard.createCursorKeys();
     } else {

front/src/components/Phaser/MapTheme/CampingMap.ts

@@ -7,13 +7,53 @@ export class CampingMap extends Scene {
   private avatar!: Phaser.GameObjects.Container;
   private keyboards!: Phaser.Types.Input.Keyboard.CursorKeys | null;
   private spaceKey!: Phaser.Input.Keyboard.Key | undefined;
+  private chatText!: Phaser.GameObjects.Text | null;
   private isJumping: boolean = false;
+  private nickname: string = "";
+  private boundHandleChatMessage: (event: Event) => void;
 
-  constructor() {
+  constructor(nickname: string) {
     super("CampingMap");
+    this.nickname = nickname;
+    this.boundHandleChatMessage = this.handleChatMessage.bind(this);
+  }
+
+  handleChatMessage = (event: Event) => {
+    const customEvent = event as CustomEvent<string>;
+    const message = customEvent.detail;
+
+    if (!this.scene.isActive() || !this.avatar) {
+      return;
+    }
+
+    if (this.chatText) {
+      this.chatText.destroy();
+    }
+
+    this.chatText = this.add.text(this.avatar.x, this.avatar.y - 50, message, {
+      font: "14px Arial",
+      color: "#ffffff",
+      backgroundColor: "#000000",
+      padding: { x: 10, y: 5 },
+    });
+
+    this.chatText.setOrigin(0.5, 1);
+
+    this.time.delayedCall(3000, () => {
+      if (this.chatText) {
+        this.chatText.destroy();
+        this.chatText = null;
+      }
+    });
+  };
+
+  init(data: { nickname: string }) {
+    this.nickname = data.nickname || "Guest";
   }
 
   create() {
+    window.addEventListener("chatMessage", this.boundHandleChatMessage);
+    // this.avatar = this.add.container(300, 300);
     this.spaceKey = this.input.keyboard?.addKey(
       Phaser.Input.Keyboard.KeyCodes.SPACE
     );
@@ -22,7 +62,6 @@ export class CampingMap extends Scene {
       "camping_tilesets",
       "camping_tilesets"
     );
-
     if (campingTilesets) {
       const layers = [
         "bottom_ground_layer",
@@ -42,9 +81,9 @@ export class CampingMap extends Scene {
         "rv_layer",
       ];
 
-      this.avatar = createRandomAvatar(this, 520, 350);
-
+      this.avatar = createRandomAvatar(this, 520, 350, this.nickname);
       this.add.existing(this.avatar);
+
       this.cameras.main.startFollow(this.avatar);
       this.cameras.main.setZoom(2);
       this.avatar.setDepth(10);
@@ -140,4 +179,8 @@ export class CampingMap extends Scene {
       );
     }
   }
+
+  shutdown() {
+    window.removeEventListener("chatMessage", this.boundHandleChatMessage);
+  }
 }

front/src/components/Phaser/Scenes/Avatar.ts

@@ -13,7 +13,8 @@ export const randomSkin = getRandomAssets(skins);
 export const createRandomAvatar = (
   scene: Scene,
   x: number,
-  y: number
+  y: number,
+  nickname: string
 ): Phaser.GameObjects.Container => {
   if (scene.textures.exists(randomSkin)) {
     const avatarContainer = scene.add.container(x, y);
@@ -85,7 +86,7 @@ export const createRandomAvatar = (
     const userNickName = scene.add.text(
       0,
       skinSprite.height / 2 + 10,
-      "nickname",
+      nickname,
       {
         font: "10px Arial",
         color: "#ffffff",

front/src/components/Phaser/ServerMap.tsx

@@ -7,31 +7,43 @@ import { EventBus } from "./EventBus";
 import { ServerMapProps, ServerMapTypes } from "../../types/map";
 import VideoCallBoxList from "../VideoCall/VideoCallBoxList";
 import VideoCallToolBar from "../VideoCall/VideoCallToolBar";
+import { useThemeStore } from "@/store/useThemeStore";
+import useUserProfile from "@/hooks/user/useUserProfile";
+import ChatInput from "../organisms/ChatBox";
+import ChatBox from "../organisms/ChatBox";
 
 export const ServerMap = forwardRef<ServerMapTypes, ServerMapProps>(
-  function ServerMap({ currentActiveScene, selectedTheme }, ref) {
+  function ServerMap({ currentActiveScene }, ref) {
     const mapRef = useRef<Phaser.Game | null>(null!);
+    const nickname = useUserProfile();
 
+    console.log(nickname.userProfile?.data.username);
+
+    const selectedTheme = useThemeStore((state) => state.selectedTheme);
     useLayoutEffect(() => {
-      if (mapRef.current === null) {
-        mapRef.current = StartGame(selectedTheme, "map-container");
+      if (mapRef.current) {
+        mapRef.current.destroy(true);
+        mapRef.current = null;
+      }
 
-        if (typeof ref === "function") {
-          ref({ server: mapRef.current, scene: null });
-        } else if (ref) {
-          ref.current = { server: mapRef.current, scene: null };
-        }
+      mapRef.current = StartGame(
+        selectedTheme,
+        "map-container",
+        nickname.userProfile?.data.username || ""
+      );
+      if (typeof ref === "function") {
+        ref({ server: mapRef.current, scene: null });
+      } else if (ref) {
+        ref.current = { server: mapRef.current, scene: null };
       }
 
       return () => {
         if (mapRef.current) {
           mapRef.current.destroy(true);
-          if (mapRef.current !== null) {
-            mapRef.current = null;
-          }
+          mapRef.current = null;
         }
       };
-    }, [ref]);
+    }, [selectedTheme, ref]);
 
     useEffect(() => {
       EventBus.on("current-scene-ready", (scene_instance: Phaser.Scene) => {
@@ -52,10 +64,9 @@ export const ServerMap = forwardRef<ServerMapTypes, ServerMapProps>(
 
     return (
       <div id="map-container">
-        <div className="absolute flex left-36 top-20">
-          <VideoCallBoxList />
+        <div className="absolute">
+          <ChatBox />
         </div>
-
         <div className="fixed bottom-[20px] left-1/2 -translate-x-1/3">
           <VideoCallToolBar />
         </div>

front/src/components/Phaser/main.ts

@@ -34,15 +34,27 @@ const config: Phaser.Types.Core.GameConfig = {
   },
 };
 
-export const EnterServer = (theme: ThemeType | null, parent: string) => {
-  let scenes: Phaser.Types.Scenes.SceneType[] = [];
+export const EnterServer = (
+  theme: ThemeType | null,
+  parent: string,
+  nickname: string
+) => {
+  const game = new Game({ ...config, parent, scene: [] });
 
   if (theme?.name === "숲") {
-    scenes = [CampingPreloader, CampingMap];
+    game.scene.add("CampingPreloader", CampingPreloader, true);
+    game.scene.add("CampingMap", CampingMap, false);
+
+    game.scene.start("CampingPreloader");
+    game.scene.start("CampingMap", { nickname });
   } else if (theme?.name === "오피스") {
-    scenes = [BeachPreloader, BeachMap];
+    game.scene.add("BeachPreloader", BeachPreloader, true);
+    game.scene.add("BeachMap", BeachMap, false);
+
+    game.scene.start("BeachPreloader");
+    game.scene.start("BeachMap", { nickname });
   }
-  return new Game({ ...config, parent, scene: scenes });
+  return game;
 };
 
 export default EnterServer;

front/src/components/atoms/BookmarkStar.tsx

@@ -17,7 +17,7 @@ const FavoriteStar: React.FC<BookmarkStarProps> = ({ id }) => {
   };
   return (
     <div onClick={handleBookmarkClick}>
-      {!isBookmark ? <IoStarOutline /> : <IoStar />}
+      {!isBookmark ? <IoStarOutline size={28} /> : <IoStar size={28} />}
     </div>
   );
 };

front/src/components/atoms/Button.tsx

@@ -4,22 +4,25 @@ type ButtonProps<
   children: React.ReactNode;
   icon?: React.ReactNode;
   onClick?: (e: E) => void;
-  color: string;
+  style?: string;
   disabled?: boolean;
+  type?: "button" | "submit" | "reset";
 };
 
 // TODO: 스타일 변경
 const Button: React.FC<ButtonProps> = ({
   children,
   icon,
   onClick,
-  color,
+  style,
+  type,
   disabled = false,
 }) => {
   return (
     <button
-      className={`flex justify-center items-center text-center ${color} px-3 py-1.5 rounded-md w-full`}
+      className={`flex justify-center items-center gap-1 text-center px-3 py-2 rounded-md w-full font-bold ${style}`}
       onClick={onClick}
+      type={type}
       disabled={disabled}>
       {icon}
       {children}

front/src/components/atoms/Divider.tsx

@@ -1,7 +1,11 @@
 import React from "react";
 
-const Divider = () => {
-  return <div className="w-full h-[1px] bg-black m-3"></div>;
+interface DividerProps {
+  style: string;
+}
+
+const Divider: React.FC<DividerProps> = ({ style }) => {
+  return <div className={`w-full h-[.5px] ${style}`}></div>;
 };
 
 export default Divider;

front/src/components/atoms/Message.tsx

@@ -6,7 +6,7 @@ type MessageProps = {
 
 // TODO: 스타일 변경
 const Message: React.FC<MessageProps> = ({ value }) => {
-  return <p className="text-red-500">{value}</p>;
+  return <p className="text-error text-small font-bold">{value}</p>;
 };
 
 export default Message;