Merge branch 'dev' into Fix/#187

__mocks__/handlers/matchHandlers.ts

@@ -105,7 +105,7 @@ const players: GetMatchPlayerScoreInfos = {
       matchPlayerResultStatus: '진행중',
     },
   ],
-  matchMessage: [
+  matchMessages: [
     {
       channelId: 123,
       content: '안녕하세요',

src/@types/admin.ts

@@ -0,0 +1,5 @@
+export interface CallAdmin {
+  matchRound: number;
+  matchName: string;
+  callName: string;
+}

src/@types/bracket.ts

@@ -12,12 +12,13 @@ interface PlayerInfo {
 }
 interface MatchInfo {
   matchName: string;
-  matchStatus: string;
+  matchId: number;
+  matchStatus: 'READY' | 'PROGRESS' | 'END';
   matchRound: number;
   matchCurrentSet: number;
   matchSetCurrent: number;
   matchPlayerInfoList: PlayerInfo[];
-  matchId: number;
+  alarm: boolean;
 }
 
 export interface BracketContents {

src/@types/icon.ts

@@ -13,4 +13,5 @@ export type IconKind =
   | 'sendEmail'
   | 'modify'
   | 'setting'
-  | 'cancel';
+  | 'cancel'
+  | 'shortcut';

src/components/Content/ContentModify.tsx

@@ -63,6 +63,7 @@ const ContentModify = ({ title, content, onUpdateContent }: ContentModifyProps)
                   css={css`
                     text-align: start;
                     white-space: pre-line;
+                    padding: 3rem;
                   `}
                 >
                   <PreviewTitle>{titleRef.current ? titleRef.current.value : ''}</PreviewTitle>

src/components/Icon/index.tsx

@@ -16,6 +16,7 @@ import {
   MdSettings,
   MdCancel,
   MdIndeterminateCheckBox,
+  MdOutlineShortcut,
 } from 'react-icons/md';
 import { MouseEventHandler } from 'react';
 
@@ -35,6 +36,7 @@ const ICON: { [key in IconKind]: IconType } = {
   setting: MdSettings,
   cancel: MdCancel,
   disqualification: MdIndeterminateCheckBox,
+  shortcut: MdOutlineShortcut,
 };
 
 interface IconProps {

src/components/RoundAlarm/RoundAlarmBody.tsx

@@ -0,0 +1,91 @@
+import authAPI from '@apis/authAPI';
+import Icon from '@components/Icon';
+import styled from '@emotion/styled';
+import { BracketContents } from '@type/bracket';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+
+interface Props {
+  curRound: number;
+  havingAlarm: boolean;
+}
+
+const RoundAlarmBody = ({ curRound, havingAlarm }: Props) => {
+  const router = useRouter();
+
+  console.log(havingAlarm);
+
+  const [roundInfo, setRoundInfo] = useState<BracketContents>();
+
+  useEffect(() => {
+    const getRoundInfo = async () => {
+      try {
+        const res = await authAPI({
+          method: 'get',
+          url: `/api/match/${router.query.channelLink as string}/${curRound}`,
+        });
+
+        setRoundInfo(res.data);
+      } catch (error) {}
+    };
+
+    getRoundInfo();
+  }, []);
+
+  const moveToCheckIn = (matchId: number) => {
+    authAPI({
+      method: 'post',
+      url: `/api/match/${router.query.channelLink as string}/${matchId}/call-off`,
+    });
+
+    router.push(`/contents/${router.query.channelLink as string}/checkIn/${matchId}`);
+  };
+
+  return (
+    <Ground>
+      {roundInfo?.matchInfoDtoList.map((match) => {
+        return (
+          <GroupContainer key={match.matchId} onClick={() => moveToCheckIn(match.matchId)}>
+            <GroupTitle>{match.matchName}</GroupTitle>
+            <Icon kind='shortcut' size={25} />
+
+            {(match.alarm || havingAlarm) && <AlarmCircle />}
+          </GroupContainer>
+        );
+      })}
+    </Ground>
+  );
+};
+
+const Ground = styled.div`
+  margin: 2rem 0;
+`;
+
+const GroupContainer = styled.div`
+  width: 15rem;
+  height: 4rem;
+  display: flex;
+  align-items: center;
+  border: 0.2rem solid #132043;
+
+  justify-content: space-around;
+
+  position: relative;
+
+  cursor: pointer;
+`;
+
+const GroupTitle = styled.div`
+  font-size: 2rem;
+`;
+
+const AlarmCircle = styled.div`
+  position: absolute;
+  width: 0.8rem;
+  height: 0.8rem;
+  right: 0.4rem;
+  background-color: #c70039;
+  border-radius: 0.4rem;
+`;
+
+export default RoundAlarmBody;

src/components/RoundAlarm/RoundAlarmHeader.tsx

@@ -0,0 +1,52 @@
+import styled from '@emotion/styled';
+
+interface Props {
+  liveRound: number;
+  curRound: number;
+}
+
+type bracketStatus = 'PAST' | 'PRESENT' | 'FUTURE';
+
+const RoundAlarmHeader = ({ liveRound, curRound }: Props) => {
+  return (
+    <>
+      {liveRound > curRound && <Button status='PAST'>Round {curRound}</Button>}
+      {liveRound === curRound && <Button status='PRESENT'>Round {curRound}</Button>}
+      {liveRound < curRound && <Button status='FUTURE'>Round {curRound}</Button>}
+    </>
+  );
+};
+
+const Button = styled.button<{ status: bracketStatus }>`
+  width: 12rem;
+  height: 4rem;
+  border: none;
+  padding: 0;
+  margin: 0;
+
+  font-size: 1.6rem;
+  color: white;
+
+  ${(prop) =>
+    prop.status === 'PAST' &&
+    `
+    background-color : #7C81AD;
+    cursor: pointer;
+  `}
+
+  ${(prop) =>
+    prop.status === 'PRESENT' &&
+    `
+    background-color : #4B527E;
+    cursor: pointer;
+  `}
+
+  ${(prop) =>
+    prop.status === 'FUTURE' &&
+    `
+    background-color : #2E4374;
+    cursor: not-allowed
+  `}
+`;
+
+export default RoundAlarmHeader;

src/components/RoundCheckIn/CallAdminChat.tsx

@@ -3,28 +3,34 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import Image from 'next/image';
 import { Client } from '@stomp/stompjs';
-import React, { useEffect, useState, ChangeEvent } from 'react';
+import React, { useEffect, useState, ChangeEvent, useRef } 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[]>([]);
   const [inputMessage, setInputMessage] = useState('');
   const router = useRouter();
   const { channelLink } = router.query;
+  const chatEndRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = () => {
+    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
 
   const handleInputMessage = (e: ChangeEvent<HTMLInputElement>) => {
     setInputMessage(e.target.value);
@@ -57,16 +63,37 @@ const CallAdminChat = ({
     setInputMessage('');
   };
 
+  const callAdmin = () => {
+    if (!client) {
+      return;
+    }
+
+    if (!window.confirm('관리자를 호출하시겠어요?\n호출한 이후에는 취소할 수 없습니다.')) {
+      console.log('cancel');
+      return;
+    }
+
+    const requestUserParticipantId = players.find(
+      (player) => player.matchPlayerId === requestUser,
+    )?.participantId;
+
+    client.publish({
+      destination: `/app/match/${
+        router.query.channelLink as string
+      }/${requestUserParticipantId}/${matchId}/call-admin`,
+    });
+  };
+
   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,15 +115,19 @@ const CallAdminChat = ({
   }, [client]);
 
   useEffect(() => {
-    if (!matchMessage || matchMessage.length === 0) return;
-    setChats(matchMessage);
-  }, [matchMessage]);
+    if (!matchMessages || matchMessages.length === 0) return;
+    setChats(matchMessages.reverse());
+  }, [matchMessages]);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [chats]);
 
   return (
     <Container>
       <Header>
         <div>Chat</div>
-        <CallAdminButton>Call Admin</CallAdminButton>
+        <CallAdminButton onClick={callAdmin}>Call Admin</CallAdminButton>
       </Header>
       <ChattingWrapper>
         {chats.length !== 0 &&
@@ -126,6 +157,7 @@ const CallAdminChat = ({
               </ChattingContent>
             </ChattingInfo>
           ))}
+        <div ref={chatEndRef} />
       </ChattingWrapper>
       <div
         css={css`
@@ -170,6 +202,8 @@ const CallAdminButton = styled.button`
   width: 9rem;
   border: none;
   border-radius: 0.3rem;
+
+  cursor: pointer;
 `;
 
 const ChattingWrapper = styled.div`

src/components/RoundCheckIn/CheckInPage.tsx

@@ -12,7 +12,7 @@ interface CheckInPageProps {
   client: Client | undefined;
   matchId: string;
   players: MatchPlayerScoreInfos[];
-  matchMessage: MatchMessages[];
+  matchMessages: MatchMessages[];
   requestUser: number;
   checkInUser: number[];
   currentMatchRound: number;
@@ -23,7 +23,7 @@ const CheckInPage = ({
   client,
   matchId,
   players,
-  matchMessage,
+  matchMessages,
   requestUser,
   checkInUser,
   currentMatchRound,
@@ -120,7 +120,7 @@ const CheckInPage = ({
           client={client}
           matchId={matchId}
           players={players}
-          matchMessage={matchMessage}
+          matchMessages={matchMessages}
           requestUser={requestUser}
         />
       </ChattingWrapper>