Merge pull request #172 from TheUpperPart/Feat/#171

Feat: 관리의 채팅도 제대로된 프로필로 보이도록 추가
TheUpperPart · Oct 17, 2023 · 28c1c53 · 28c1c53
2 parents 9205bd5 + 221f07a
commit 28c1c53
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 18 deletions.
diff --git a/__mocks__/handlers/boardHandlers.ts b/__mocks__/handlers/boardHandlers.ts
@@ -10,7 +10,7 @@ interface BoardsInfo {
   [key: string]: {
     myMatchRound: number;
     myMatchId: number;
-    channelBoardLoadDtdList: Channels[];
+    channelBoardLoadDtoList: Channels[];
   };
 }
 
@@ -45,7 +45,7 @@ const boardsInfo: BoardsInfo = {
   '123': {
     myMatchRound: 0,
     myMatchId: 0,
-    channelBoardLoadDtdList: [
+    channelBoardLoadDtoList: [
       {
         boardId: 'aaa',
         boardTitle: '공지사항',
@@ -66,7 +66,7 @@ const boardsInfo: BoardsInfo = {
   '234': {
     myMatchRound: 1,
     myMatchId: 1,
-    channelBoardLoadDtdList: [
+    channelBoardLoadDtoList: [
       {
         boardId: 'bbb',
         boardTitle: '리그 공지사항',
@@ -87,7 +87,7 @@ const boardsInfo: BoardsInfo = {
   '456': {
     myMatchRound: 2,
     myMatchId: 2,
-    channelBoardLoadDtdList: [
+    channelBoardLoadDtoList: [
       {
         boardId: 'eee',
         boardTitle: '리그 공지사항',

diff --git a/__mocks__/handlers/matchHandlers.ts b/__mocks__/handlers/matchHandlers.ts
@@ -105,7 +105,7 @@ const players: GetMatchPlayerScoreInfos = {
       matchPlayerResultStatus: '진행중',
     },
   ],
-  matchMessage: [
+  matchMessages: [
     {
       channelId: 123,
       content: '안녕하세요',

diff --git a/src/components/RoundCheckIn/CallAdminChat.tsx b/src/components/RoundCheckIn/CallAdminChat.tsx
@@ -5,20 +5,21 @@ import Image from 'next/image';
 import { Client } from '@stomp/stompjs';
 import React, { useEffect, useState, ChangeEvent } from 'react';
 import { useRouter } from 'next/router';
+import { BASE_PROFILE_IMG } from '@config/index';
 
 interface CallAdminChatProps {
   client: Client | undefined;
   matchId: string;
   players: MatchPlayerScoreInfos[];
-  matchMessage: MatchMessages[];
+  matchMessages: MatchMessages[];
   requestUser: number;
 }
 
 const CallAdminChat = ({
   client,
   matchId,
   players,
-  matchMessage,
+  matchMessages,
   requestUser,
 }: CallAdminChatProps) => {
   const [chats, setChats] = useState<MatchMessages[]>([]);
@@ -60,13 +61,13 @@ const CallAdminChat = ({
   const findUserIMG = (playerParticipantId: number): string => {
     const user = players.find((player) => player.participantId === playerParticipantId);
 
-    if (!user) return '';
+    if (!user) return BASE_PROFILE_IMG;
     return user.profileSrc;
   };
 
   const findUserName = (playerParticipantId: number): string => {
     const user = players.find((player) => player.participantId === playerParticipantId);
-    if (!user) return '';
+    if (!user) return '관리자';
     return user.gameId;
   };
 
@@ -88,9 +89,9 @@ const CallAdminChat = ({
   }, [client]);
 
   useEffect(() => {
-    if (!matchMessage || matchMessage.length === 0) return;
-    setChats(matchMessage);
-  }, [matchMessage]);
+    if (!matchMessages || matchMessages.length === 0) return;
+    setChats(matchMessages);
+  }, [matchMessages]);
 
   return (
     <Container>

diff --git a/src/components/RoundCheckIn/CheckInPage.tsx b/src/components/RoundCheckIn/CheckInPage.tsx
@@ -10,7 +10,7 @@ interface CheckInPageProps {
   client: Client | undefined;
   matchId: string;
   players: MatchPlayerScoreInfos[];
-  matchMessage: MatchMessages[];
+  matchMessages: MatchMessages[];
   requestUser: number;
   checkInUser: number[];
   currentMatchRound: number;
@@ -21,7 +21,7 @@ const CheckInPage = ({
   client,
   matchId,
   players,
-  matchMessage,
+  matchMessages,
   requestUser,
   checkInUser,
   currentMatchRound,
@@ -105,7 +105,7 @@ const CheckInPage = ({
           client={client}
           matchId={matchId}
           players={players}
-          matchMessage={matchMessage}
+          matchMessages={matchMessages}
           requestUser={requestUser}
         />
       </ChattingWrapper>

diff --git a/src/components/RoundCheckIn/index.tsx b/src/components/RoundCheckIn/index.tsx
@@ -36,7 +36,7 @@ export interface GetMatchPlayerScoreInfos {
   matchCurrentSet: number;
   matchSetCount: number;
   matchPlayerInfos: MatchPlayerScoreInfos[];
-  matchMessage: MatchMessages[];
+  matchMessages: MatchMessages[];
 }
 
 interface RoundCheckInProps {
@@ -176,7 +176,7 @@ const RoundCheckIn = ({ channelLink, matchId }: RoundCheckInProps) => {
           client={client}
           matchId={matchId}
           players={matchPlayers ? matchPlayers.matchPlayerInfos : []}
-          matchMessage={matchPlayers ? matchPlayers.matchMessage : []}
+          matchMessages={matchPlayers ? matchPlayers.matchMessages : []}
           requestUser={matchPlayers ? matchPlayers.requestMatchPlayerId : -1}
           checkInUser={checkInUser}
           currentMatchRound={matchPlayers ? matchPlayers.matchCurrentSet : -1}

diff --git a/src/config/index.ts b/src/config/index.ts
@@ -5,4 +5,7 @@ if (process.env.NODE_ENV === 'development') {
   SERVER_URL = 'http://localhost:8080';
 }
 
-export { SERVER_URL, SOCKET_URL };
+const BASE_PROFILE_IMG =
+  'data:image/png;base64,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';
+
+export { SERVER_URL, SOCKET_URL, BASE_PROFILE_IMG };
diff --git a/src/contexts/CustomContextMenu.tsx b/src/contexts/CustomContextMenu.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+interface CustomContextMenuProps {
+  x: number;
+  y: number;
+}
+
+const CustomContextMenu = ({ x, y }: CustomContextMenuProps) => {
+  return (
+    <ContextMenu style={{ top: y, left: x }}>
+      <ul>
+        <li>메뉴 항목 1</li>
+        <li>메뉴 항목 2</li>
+        {/* 추가적인 메뉴 항목들 */}
+      </ul>
+    </ContextMenu>
+  );
+};
+
+export default CustomContextMenu;
+
+const ContextMenu = styled.div`
+  position: absolute;
+  background-color: #ffffff;
+  border: 1px solid #ccc;
+  padding: 5px 10px;
+  z-index: 1000;
+  color: black;
+`;