[feat] merge main (#183)

my-trash-bin · Dec 16, 2023 · cfed3a2 · cfed3a2
2 parents 65bf717 + 7e8bfec
commit cfed3a2
Show file tree

Hide file tree

Showing 15 changed files with 171 additions and 322 deletions.
diff --git a/project/backend/src/events/events.service.ts b/project/backend/src/events/events.service.ts
@@ -935,13 +935,8 @@ export class EventsService {
       return; // 해당 소켓이 진행중이던 게임 없음
     }
 
-    // const [meSocketId, opponentSocketId] =
-    //   pong.player1Id === userId
-    //     ? [pong.player1SocketId, pong.player2SocketId]
-    //     : [pong.player2SocketId, pong.player1SocketId];
-
     if (!pong.getGameState().gameStart) {
-      pong.setGameStart(); // 스타트 상태로 강제 전환인듯
+      pong.setGameStart();
     }
 
     const isPlayer1win = userId !== pong.player1Id;

diff --git a/project/backend/src/pong/pong.ts b/project/backend/src/pong/pong.ts
@@ -3,20 +3,26 @@ import { EventEmitter } from 'events';
 import { PrismaService } from '../base/prisma.service';
 import { idOf, UserId } from '../common/Id';
 
-// 게임 상수
+// 게임 보드
 const BOARD_WIDTH = 800;
 const BOARD_HEIGHT = 500;
+const GAME_OVER = 7;
+
+// 패들
 const PADDLE_WIDTH = 10;
 const PADDLE_HEIGHT = 80;
 const SMALL_PADDLE_HEIGHT = 50;
 const SMALL_PADDLE_STRIKE = 2;
+
+// 공
 const BALL_SIZE = 15;
-const DEFAULT_SPEED = 3;
-const SMASH_SPEED = 8;
+const DEFAULT_SPEED = 6;
+const SMASH_SPEED = 12;
 const PADDLE_STRIKE = 4;
 const PADDLE_MOVE_STEP = 20;
+
+// 아이템
 const ITEM_SIZE = 100;
-const GAME_OVER = 7;
 
 export interface GameState {
   ball: { x: number; y: number; type: number };
@@ -35,7 +41,6 @@ export class Pong {
   readonly onGameUpdate = new EventEmitter();
 
   private gameState: GameState;
-  private player1Won: boolean;
   private counter = 0;
   constructor(
     private readonly prisma: PrismaService,
@@ -56,7 +61,6 @@ export class Pong {
     this.player2Id = player2Id;
     this.player1SocketId = player1SocketId;
     this.player2SocketId = player2SocketId;
-    this.player1Won = false;
 
     this.gameState = {
       ball: {
@@ -83,20 +87,10 @@ export class Pong {
   }
 
   setGameOver(isPlayer1win: boolean, byPlayerOut = false) {
-    // if (byPlayerOut) {
-    //   // -1로 변하는 로직은 삭제
-    //   if (isPlayer1win) {
-    //     this.gameState.score2 = -1;
-    //   } else {
-    //     this.gameState.score1 = -1;
-    //   }
-    // }
     if (isPlayer1win) {
       this.gameState.score1 = GAME_OVER;
-      // this.gameState.score2 = -1;
     } else {
       this.gameState.score2 = GAME_OVER;
-      // this.gameState.score1 = -1;
     }
     this.gameState.gameOver = true;
   }

diff --git a/project/frontend/src/app/2fa/page.tsx b/project/frontend/src/app/2fa/page.tsx
@@ -10,13 +10,13 @@ function TwofactorPage() {
   const { api } = useContext(ApiContext);
   const router = useRouter();
   const [password, setPassword] = useState('');
-  const { openIsInvalidPassword } = useToast();
+  const { openMessage } = useToast();
   function handlePassword(e: React.ChangeEvent<HTMLInputElement>) {
     setPassword(e.target.value);
   }
   const handleSubmitClick = useCallback(async () => {
     if (!password) {
-      alert('비밀번호가 입력되지 않았습니다.');
+      openMessage('비밀번호를 입력해주세요!');
       return;
     }
     try {
@@ -30,15 +30,15 @@ function TwofactorPage() {
       }
     } catch (error: any) {
       if (error.status === 422) {
-        openIsInvalidPassword();
+        openMessage('비밀번호가 틀렸습니다!');
       } else if (error.status === 401) {
-        alert('JWT가 올바르지 않습니다.');
+        openMessage('로그인이 필요합니다!');
       } else if (error.status === 403) {
-        alert('JWT Phase가 올바르지 않습니다.');
+        openMessage('이미 로그인 되어있습니다!');
       }
       console.error('Error 2fa login:', error);
     }
-  }, [api, password, router, openIsInvalidPassword]);
+  }, [api, password, router, openMessage]);
 
   return (
     <div className="min-h-screen flex items-center justify-center font-jeonju">

diff --git a/project/frontend/src/components/channel/SelectPenalty.tsx b/project/frontend/src/components/channel/SelectPenalty.tsx
@@ -5,21 +5,21 @@ export function SelectPenalty({
   channelId,
   memberId,
 }: Readonly<{ channelId: string; memberId: string }>) {
-  const { openIsKickUser, openIsBanUser, openIsMuteUser, openIsPromoteUser } = useToast();
+  const { openMessage } = useToast();
   const kickBanPromote = (actionType: string) => {
     getSocket().emit('kickBanPromote', {
       actionType,
       channelId,
       memberId,
     });
     if (actionType === 'KICK') {
-      openIsKickUser();
+      openMessage('유저를 내보냈습니다!');
     } else if (actionType === 'BANNED') {
-      openIsBanUser();
+      openMessage('유저를 차단했습니다!');
     } else if (actionType === 'MUTE') {
-      openIsMuteUser();
+      openMessage('유저의 입을 1분간 막았습니다!');
     } else if (actionType === 'PROMOTE') {
-      openIsPromoteUser();
+      openMessage('유저를 관리자로 임명했습니다!');
     }
   };
 

diff --git a/project/frontend/src/components/channel/modals/EnterPasswordModal.tsx b/project/frontend/src/components/channel/modals/EnterPasswordModal.tsx
@@ -15,7 +15,7 @@ export function EnterPasswordModal({
   targetChannelId: string;
 }>) {
   const { api } = useContext(ApiContext);
-  const { openIsBan, openIsInvalidPassword } = useToast();
+  const { openMessage } = useToast();
   const router = useRouter();
   const closeModal = () => {
     setIsModalOpen(false);
@@ -38,11 +38,11 @@ export function EnterPasswordModal({
     } catch (error: any) {
       console.error('Error participate channel:', error);
       if (error?.error.message === '밴된 유저는 채널에 들어갈 수 없습니다.')
-        openIsBan();
+        openMessage('방장이 거부합니다 ㅠ');
       else if (error?.error.message === '올바른 비밀번호 입력이 필요합니다.')
-        openIsInvalidPassword();
+        openMessage('비밀번호가 틀렸어요!');
     }
-  }, [api, targetChannelId, password, router, openIsBan, openIsInvalidPassword]);
+  }, [api, targetChannelId, password, router, openMessage]);
 
   return (
     <ModalLayout

diff --git a/project/frontend/src/components/channel/modals/ParticipationModal.tsx b/project/frontend/src/components/channel/modals/ParticipationModal.tsx
@@ -1,9 +1,9 @@
 import { ApiContext } from '@/app/_internal/provider/ApiContext';
+import useToast from '@/components/common/useToast';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { useCallback, useContext } from 'react';
 import { ModalLayout } from './ModalLayout';
-import useToast from '@/components/common/useToast';
 
 export function ParticipationModal({
   isModalOpen,
@@ -23,7 +23,7 @@ export function ParticipationModal({
   const closeModal = () => {
     setIsModalOpen(false);
   };
-  const { openIsBan, openIsFull } = useToast();
+  const { openMessage } = useToast();
 
   const participateChannel = useCallback(async () => {
     try {
@@ -37,10 +37,10 @@ export function ParticipationModal({
       setMyChannel(true);
     } catch (error: any) {
       if (error?.error.message === '밴된 유저는 채널에 들어갈 수 없습니다.') {
-        openIsBan();
+        openMessage('방장이 거부합니다 ㅠ');
         setIsModalOpen(false);
       } else if (error?.error.message === '최대 사용자 수 초과') {
-        openIsFull();
+        openMessage('방에 더이상 자리가 없어요!');
         setIsModalOpen(false);
       }
     }
@@ -51,8 +51,7 @@ export function ParticipationModal({
     router,
     setIsModalOpen,
     setMyChannel,
-    openIsBan,
-    openIsFull,
+    openMessage,
   ]);
 
   return (

diff --git a/project/frontend/src/components/channel/modals/SettingModal.tsx b/project/frontend/src/components/channel/modals/SettingModal.tsx
@@ -35,7 +35,7 @@ export function SettingModal({
   const [passwordValid, setPasswordValid] = useState(
     channelType !== ChannelType.PROTECTED,
   );
-  const { openSuccessChangeChannnal, openFailChangeChannnal } = useToast();
+  const { openMessage } = useToast();
 
   const channelTypeChangeEvent = (channelType: ChannelType) => {
     switch (channelType) {
@@ -58,10 +58,10 @@ export function SettingModal({
   const mutation = useMutation(api.channelControllerChannelUpdate, {
     onSuccess: () => {
       closeModal();
-      openSuccessChangeChannnal();
+      openMessage('채널 설정 변경!');
     },
     onError: () => {
-      openFailChangeChannnal();
+      openMessage('채널 설정 변경에 실패했습니다!');
     },
   });
 

diff --git a/project/frontend/src/components/common/Navbar.tsx b/project/frontend/src/components/common/Navbar.tsx
@@ -1,9 +1,8 @@
 'use client';
 import { useRouter } from 'next/navigation';
-import { use, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import InviteModal from '../game/InviteModal';
 import MatchingModal from '../game/MatchingModal';
-import useNotAllowedPong from '../game/notAllowedPong';
 import useNewFriend from '../notification/NewFriendToast';
 import { Notification } from '../notification/Notification';
 import useStore from '../pong/Update';
@@ -22,20 +21,7 @@ const Navbar = () => {
   const socket = getGameSocket();
   const router = useRouter();
   const { setIsPlayer1 } = useStore();
-  const { isOpen, closeToast } = useNotAllowedPong();
-  const { isBan, isFull, closeIsBan, closeIsFull,
-    isInvalidPassword, closeIsInvalidPassword,
-    isSuccessChangeChannnal, closeSuccessChangeChannnal,
-    isFailChangeChannnal, closeFailChangeChannnal,
-    isMute, closeIsMute,
-    isOut, closeIsOut,
-    isKick, closeIsKick,
-    isPromote, closeIsPromote,
-    isKickUser, closeIsKickUser,
-    isBanUser, closeIsBanUser,
-    isMuteUser, closeIsMuteUser,
-    isPromoteUser, closeIsPromoteUser,
-   } = useToast();
+  const { message, closeMessage } = useToast();
 
   useEffect(() => {
     const handlePlayerRole = (role: string) => {
@@ -50,60 +36,8 @@ const Navbar = () => {
   }, [socket, setIsPlayer1]);
 
   useEffect(() => {
-    setTimeout(() => closeToast(), 2000);
-  }, [isOpen, closeToast]);
-
-  useEffect(() => {
-    setTimeout(() => closeIsBan(), 2000);
-  }, [isBan, closeIsBan]);
-
-  useEffect(() => {
-    setTimeout(() => closeIsFull(), 2000);
-  }, [isFull, closeIsFull]);
-
-  useEffect(() => {
-    setTimeout(() => closeIsMute(), 2000);
-  }, [isMute, closeIsMute]);
-
-  useEffect(() => {
-    setTimeout(() => closeIsInvalidPassword(), 2000);
-  }, [isInvalidPassword, closeIsInvalidPassword]);
-
-  useEffect(() => {
-    setTimeout(() => closeSuccessChangeChannnal(), 2000);
-  }, [isSuccessChangeChannnal, closeSuccessChangeChannnal]);
-
-  useEffect(() => {
-    setTimeout(() => closeFailChangeChannnal(), 2000);
-  }, [isFailChangeChannnal, closeFailChangeChannnal]);
-
-  useEffect(() => {
-    setTimeout(() => closeIsOut(), 2000);
-  }, [isOut, closeIsOut]);
-
-  useEffect(() => {
-    setTimeout(() => closeIsKick(), 2000);
-  }, [isKick, closeIsKick]);
-
-  useEffect(() => {
-    setTimeout(() => closeIsPromote(), 2000);
-  }, [isPromote, closeIsPromote]);
-
-  useEffect(() => {
-    setTimeout(() => closeIsKickUser(), 2000);
-  }, [isKickUser, closeIsKickUser]);
-
-  useEffect(() => {
-    setTimeout(() => closeIsBanUser(), 2000);
-  }, [isBanUser, closeIsBanUser]);
-
-  useEffect(() => {
-    setTimeout(() => closeIsMuteUser(), 2000);
-  }, [isMuteUser, closeIsMuteUser]);
-
-  useEffect(() => {
-    setTimeout(() => closeIsPromoteUser(), 2000);
-  }, [isPromoteUser, closeIsPromoteUser]);
+    setTimeout(() => closeMessage(), 2000);
+  }, [message, closeMessage]);
 
   useEffect(() => {
     const handleGoPong = (data: {
@@ -147,20 +81,7 @@ const Navbar = () => {
     'fixed w-[300px] h-[100px] left-1/2 p-sm transform -translate-x-1/2 translate-y-1/2 flex justify-center items-center bg-default border-3 border-dark-purple text-dark-purple rounded-md z-50 text-h3';
   return (
     <>
-      {isBan && <div className={css}>방장이 거부합니다 ㅠ</div>}
-      {isKick && <div className={css}>방장이 나가라고 합니다!</div>}
-      {isPromote && <div className={css}>관리자가 되었습니다!</div>}
-      {isKickUser && <div className={css}>유저를 내보냈습니다!</div>}
-      {isBanUser && <div className={css}>유저를 차단했습니다!</div>}
-      {isMuteUser && <div className={css}>유저의 입을 1분간 막았습니다!</div>}
-      {isPromoteUser && <div className={css}>유저를 관리자로 만들었습니다!</div>}
-      {isOut && <div className={css}>채널에서 나갔습니다!</div>}
-      {isMute && <div className={css}>방장이 1분간 조용히 하래요 ㅠ</div>}
-      {isSuccessChangeChannnal && <div className={css}>방을 변경했습니다!</div>}
-      {isFailChangeChannnal && <div className={css}>방 변경에 실패했습니다!</div>}
-      {isInvalidPassword && <div className={css}>비밀번호가 틀렸습니다!</div>}
-      {isFull && <div className={css}>방에 더이상 자리가 없어요!</div>}
-      {isOpen && <div className={css}>게임이 시작되지 않았어요!</div>}
+      {message && <div className={css}>{message}</div>}
       {errorMessage && <div className={css}>{errorMessage}</div>}
       {isNewFriendOpen && (
         <div className={css}>{friendName}님과 친구가 되었습니다!</div>