Mafia-together ver 2.0 prod deploy (#154)

* feat : 서버 api 요청 주소 변경

* chore : dev cicd 파이프라인 작성

* chore : dev CI/CD 파이프라인 수정

* chore : prod CI/CD 작성

* refactor: 채팅을 웹소켓으로 교체한다 (#138)

* fix: 새로고침하면 본인 직업이 날라가는 문제 해결 (#140)

* fix: 새로고침 할때 가끔 채팅구독이 안되는 문제 해결 (#142)

연결될때 useState를 변경해서 구독을 트리거 함

* feat: 대기방 정보 SSE로 교체 (#144)

* feat: 대기방 정보 SSE로 교체

* chore: 사용안하는 코드 및 log제거

* feat: 마피아 스킬을 웹소켓으로 교체 (#146)

* Feature/148 채팅에서 직업 보여주기 (#150)

* chore: 글씨 제거

* feat: 채팅에서 직업 찾아서 보여주기

* Feature/#147 깃허브 액션에 env 추가 (#151)

* feat: 초대코드 도메인 두번 들어가는 형상 제거

* feat: 웹소켓 baseURL에 도메인 변수를 활용하도록 수정

* feat: 도메인 상수를 env를 활용하도록 수정

* feat: 깃허브 액션에 env 추가

* fix: 마피아일 때 기존 타켓 요청이 안가는 버그 수정

---------

Co-authored-by: waterricecake <[email protected]>
Co-authored-by: waterricecake <[email protected]>

.github/workflows/build.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version: '20'
 
       - name: Install dependencies
         run: npm install

.github/workflows/frontend-dev-CICD.yml

@@ -0,0 +1,36 @@
+name: Dev CI/CD
+
+on:
+  push:
+    branches: [dev]
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    runs-on:
+      group: Default
+      labels: [self-hosted, dev]
+    permissions:
+      pull-requests: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run build
+        run: npm run build
+        env:
+          VITE_DOMAIN: ${{ secrets.VITE_DOMAIN_DEV }}
+
+      - name: 빌드 파일
+        run: cp -rf ./dist ~/

.github/workflows/frontend-prod-CICD.yml

@@ -0,0 +1,42 @@
+name: Prod CI/CD
+
+on:
+  push:
+    branches: [prod]
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    runs-on:
+      group: Default
+      labels: [self-hosted, dev]
+    permissions:
+      pull-requests: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run build
+        run: npm run build
+        env:
+          VITE_DOMAIN: ${{ secrets.VITE_DOMAIN_PROD }}
+
+      - name: Copy to Prod Server
+        uses: appleboy/scp-action@master
+        with:
+          username: ${{ secrets.PROD_USER_NAME }}
+          host: ${{ secrets.PROD_SERVER }}
+          key: ${{ secrets.PROD_PEM_KEY }}
+          source: './dist'
+          target: '~/'

.gitignore

@@ -25,4 +25,5 @@ dist-ssr
 *.sw?
 
 # env
-.env.development
+.env
+.env.development

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@stomp/stompjs": "^7.0.0",
     "@tanstack/react-query": "^5.32.0",
     "axios": "^1.6.8",
     "event-source-polyfill": "^1.0.31",

src/axios/http.ts

@@ -1,7 +1,7 @@
 import { useSuspenseQuery } from '@tanstack/react-query';
 
 import {
-  Chat,
+  ChatArray,
   ChatRequest,
   DeadResult,
   GameExist,
@@ -41,33 +41,10 @@ export const getValidRoomCode = async (code: string | null) => {
   return http.get<RoomCodeExistsResponse>(`/lobbies/code/exist?code=${code}`);
 };
 
-export const useChatsQuery = () => {
-  const { data: chats, ...rest } = useSuspenseQuery({
-    queryKey: ['chats', localStorage.getItem('auth')],
-    queryFn: () => getChats(),
-    refetchInterval: 500,
-    staleTime: 500,
-  });
-  return {
-    chats,
-    ...rest,
-  };
-};
-
 export const getRoomsStatus = () => {
   return http.get<GameStatus>('/games/status');
 };
 
-export const useGamesInfoQuery = () => {
-  const { data: gameInfo, ...rest } = useSuspenseQuery({
-    queryKey: ['games', 'info', localStorage.getItem('auth')],
-    queryFn: () => getGamesInfo(),
-    refetchInterval: 500,
-    staleTime: 500,
-  });
-  return { gameInfo, ...rest };
-};
-
 export const getGamesInfo = () => {
   return http.get<GameInfo>(`/games/info`);
 };
@@ -85,7 +62,7 @@ export const existGame = () => {
 };
 
 export const getChats = () => {
-  return http.get<Chat[]>(`/chat`);
+  return http.get<ChatArray>(`/chat`);
 };
 
 export const postChats = (payload: ChatRequest) => {

src/axios/instances.ts

@@ -1,6 +1,7 @@
 import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';
 
-export const BASE_URL = 'https://mafia-together.com/api';
+export const DOMAIN = import.meta.env.VITE_DOMAIN;
+export const BASE_URL = `https://${DOMAIN}/api`;
 
 export const axiosInstance = axios.create({
   baseURL: BASE_URL,

src/components/chat/Chat.tsx

@@ -0,0 +1,45 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { useRecoilState } from 'recoil';
+
+import { roomInfoState } from '../../recoil/roominfo/atom';
+import { VariablesCSS } from '../../styles/VariablesCSS';
+import { ChatArray } from '../../type';
+import { ChatForm } from './ChatForm';
+import { Chats } from './Chats';
+
+type PropsType = {
+  publishChat: (content: string) => void;
+  chats: ChatArray;
+  setChats: React.Dispatch<React.SetStateAction<ChatArray>>;
+};
+
+export const Chat = ({ publishChat, chats, setChats }: PropsType) => {
+  /* 방 정보 */
+  const [roomInfo] = useRecoilState(roomInfoState);
+
+  // 내가 살아있는지
+  const isAlive = roomInfo?.isAlive;
+
+  return (
+    <>
+      {/* 채팅목록 */}
+      <div css={middle}>
+        <Chats chats={chats} setChats={setChats} />
+      </div>
+
+      {/* 살아있는 경우에만 input창이 보인다. */}
+      {isAlive && <ChatForm publishChat={publishChat} />}
+    </>
+  );
+};
+
+const middle = css`
+  height: calc(100% - ${VariablesCSS.top} - 55px - 20px);
+  overflow: scroll;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;

src/components/chat/ChatForm.tsx

@@ -2,22 +2,26 @@
 import { css } from '@emotion/react';
 import { useState } from 'react';
 
-import { postChats } from '../../axios/http';
 import { VariablesCSS } from '../../styles/VariablesCSS';
 
 function isInvalidInputChat(inputChat: string) {
   inputChat = inputChat.trim();
   return inputChat.length === 0;
 }
 
-export const ChatForm = () => {
+type PropsType = {
+  publishChat: (content: string) => void;
+};
+
+export const ChatForm = ({ publishChat }: PropsType) => {
   const [inputChat, setInputChat] = useState<string>('');
   return (
     <form
       css={chatForm}
       onSubmit={event => {
         event.preventDefault();
-        postChats({ contents: inputChat });
+        publishChat(inputChat);
+        // postChats({ content: inputChat });
         setInputChat('');
       }}
     >

src/components/chat/ChatGroup.tsx

@@ -1,9 +1,12 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import { forwardRef } from 'react';
+import { useRecoilState } from 'recoil';
 
+import { roomInfoState } from '../../recoil/roominfo/atom';
 import { VariablesCSS } from '../../styles/VariablesCSS';
 import { Chat } from '../../type';
+import { getPlayerJob } from '../../util/job';
 import PlayerChat from '../player/PlayerChat';
 import ChatMessage from './ChatMessage';
 
@@ -15,13 +18,19 @@ interface PropsType {
 export default forwardRef(function ChatGroup(props: PropsType, ref: any) {
   const { chats } = props;
 
+  const [roomInfo] = useRecoilState(roomInfoState);
+
   return (
     <div ref={ref} css={container(props)}>
-      <PlayerChat job={chats[0].job} />
+      <PlayerChat job={getPlayerJob(roomInfo.players, chats[0].name)} />
       <div css={right(props)}>
         <p css={nameText}>{chats[0].name}</p>
-        {chats.map(chat => (
-          <ChatMessage contents={chat.contents} isOwner={chat.isOwner} key={`${chat.timestamp}`} />
+        {chats.map((chat, idx) => (
+          <ChatMessage
+            contents={chat.content}
+            isOwner={chat.isOwner}
+            key={`${chat.timeStamp} ${idx}`}
+          />
         ))}
       </div>
     </div>

src/components/chat/Chats.tsx

@@ -1,13 +1,16 @@
 import { useEffect, useRef } from 'react';
 
-import { useChatsQuery } from '../../axios/http';
-import { Chat } from '../../type';
+import { Chat, ChatArray } from '../../type';
 import ChatGroup from './ChatGroup';
 
-export const Chats = () => {
+type PropsType = {
+  chats: ChatArray;
+  setChats: React.Dispatch<React.SetStateAction<ChatArray>>;
+};
+
+export const Chats = ({ chats }: PropsType) => {
   const chatRef = useRef<HTMLDivElement | null>(null);
 
-  const { chats } = useChatsQuery();
   useEffect(() => {
     if (!chatRef.current) return;
     chatRef.current.scrollIntoView({ block: 'end' });