Merge branch 'dev' into feat/accept-friend-request

.github/workflows/ci.yml

@@ -0,0 +1,66 @@
+name: CI
+
+on:
+  push:
+    branches: [ main ] # push 되었을 때, 실행
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      # jdk 21 환경 구성
+      - name: set up jdk 21
+        uses: actions/setup-java@v4
+        with:
+          distribution: 'zulu'
+          java-version: '21'
+
+      # Gradle wrapper 파일 실행 권한주기
+      - name: Grant execute permission for gradlew
+        run: chmod +x gradlew
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      # Gradle jib를 통한 이미지 배포
+      - name: update image using jib
+        run: ./gradlew --info jib
+
+  tagging:
+    needs:
+      - build
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+
+      - name: set tag
+        run: |
+          echo "IMAGE_TAG=$(git rev-parse --short=8 HEAD)" >> $GITHUB_ENV
+
+      - name: checkout infra repository
+        uses: actions/checkout@v4
+        with:
+          repository: kSideProject/kpring-infra
+          ssh-key: ${{ secrets.SSH_PRIVATE_KEY }}
+          ref: main
+
+      - name: edit infra repository tag
+        run: |
+          echo 'env(IMAGE_TAG)'
+          yq eval -i '.service.tag = env(IMAGE_TAG)' ./charts/server/values.yaml
+          yq eval -i '.service.tag = env(IMAGE_TAG)' ./charts/user/values.yaml
+          yq eval -i '.service.tag = env(IMAGE_TAG)' ./charts/auth/values.yaml
+
+      - name: commit
+        uses: leigholiver/[email protected]
+        with:
+          source: .
+          destination_repo: kSideProject/kpring-infra
+          deploy_key: ${{ secrets.SSH_PRIVATE_KEY }}
+          commit_message: 'ci: update tag to env(IMAGE_TAG)'

auth/build.gradle.kts

@@ -70,7 +70,7 @@ tasks.asciidoctor {
   dependsOn(tasks.test)
 }
 
-val hostname = "152.70.145.249"
+val hostname = "kpring.duckdns.org"
 
 openapi3 {
   setServer("http://$hostname/auth")
@@ -94,7 +94,7 @@ jib {
   to {
     image = "youdong98/kpring-auth-application"
     setAllowInsecureRegistries(true)
-    tags = setOf("latest")
+    tags = setOf("latest", version.toString())
   }
   container {
     jvmFlags = listOf("-Xms512m", "-Xmx512m")

build.gradle.kts

@@ -1,5 +1,6 @@
 import org.jetbrains.kotlin.gradle.tasks.KotlinCompile
 import org.springframework.boot.gradle.tasks.bundling.BootJar
+import java.io.IOException
 
 plugins {
   id("org.springframework.boot") version "3.2.4"
@@ -17,7 +18,7 @@ repositories {
 
 allprojects {
   group = "com.sideproject"
-  version = "0.0.1-SNAPSHOT"
+  version = "git rev-parse --short=8 HEAD".runCommand(workingDir = rootDir)
 
   repositories {
     mavenCentral()
@@ -53,3 +54,25 @@ subprojects {
     debug.set(true)
   }
 }
+
+/**
+ * cli 실행 결과를 반환한기 위한 함수
+ */
+fun String.runCommand(
+  workingDir: File = File("."),
+  timeoutAmount: Long = 60,
+  timeoutUnit: TimeUnit = TimeUnit.SECONDS,
+): String =
+  ProcessBuilder(split("\\s(?=(?:[^'\"`]*(['\"`])[^'\"`]*\\1)*[^'\"`]*$)".toRegex()))
+    .directory(workingDir)
+    .redirectOutput(ProcessBuilder.Redirect.PIPE)
+    .redirectError(ProcessBuilder.Redirect.PIPE)
+    .start()
+    .apply { waitFor(timeoutAmount, timeoutUnit) }
+    .run {
+      val error = errorStream.bufferedReader().readText().trim()
+      if (error.isNotEmpty()) {
+        throw IOException(error)
+      }
+      inputStream.bufferedReader().readText().trim()
+    }

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,12 +1,19 @@
-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 }) => ({
@@ -19,16 +26,25 @@ const ChatRoomSideBar = () => {
   }));
 
   return (
+
+    <DrawerHeader>
+      <ArrowForwardIosIcon
+        onClick={handleChatRoomClose}
+        sx={{ color: "white" }}
+        className="cursor-pointer"
+
     <DrawerHeader >
       <ArrowForwardIosIcon 
       onClick={handleChatRoomClose} 
       sx={{color:"white", 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,20 @@ 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";
+
 import VideoCallToolBar from "../VideoCall/VideoCallToolBar";
 
+
 // 서버를 생성하고 관리하는 컴포넌트
 // 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 +44,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 +54,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 +95,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 +114,6 @@ export const ServerMap = forwardRef<ServerMapTypes, ServerMapProps>(
           <div id="drag" className="cursor-pointer">
             드래그
           </div>
-          <input type="text" id="chat-input"></input>
-          <VideoCallBoxList/>
         </div>
         <div className="fixed bottom-[20px] left-1/2 -translate-x-1/3">
           <VideoCallToolBar/>

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;