Feat/#165: 게임 결과 입력하는 칸 추가 및 자동으로 다음 라운드 페이지가 보이도록 추가

__mocks__/handlers/matchHandlers.ts

@@ -4,9 +4,10 @@ import { rest } from 'msw';
 
 const players: GetMatchPlayerScoreInfos = {
   requestMatchPlayerId: 3,
-  currentMatchRound: 1,
-  totalMatchRound: 3,
-  matchPlayerScoreInfos: [
+  matchRound: 1,
+  matchCurrentSet: 1,
+  matchSetCount: 3,
+  matchPlayerInfos: [
     {
       matchPlayerId: 1,
       participantId: 1,

src/components/RoundCheckIn/CallAdminChat.tsx

@@ -44,7 +44,7 @@ const CallAdminChat = ({
     )?.participantId;
 
     const newMessage = {
-      channelId: channelLink,
+      channelLink,
       content: inputMessage,
       matchId,
       participantId: requestUserParticipantId,
@@ -70,6 +70,12 @@ const CallAdminChat = ({
     return user.gameId;
   };
 
+  const findRequestUser = (playerParticipantId: number): number => {
+    const user = players.find((player) => player.participantId === playerParticipantId);
+    if (!user) return -1;
+    return user.matchPlayerId;
+  };
+
   useEffect(() => {
     if (!client) return;
     const subscription = client.subscribe(`/match/${matchId}/chat`, (data) => {
@@ -97,18 +103,26 @@ const CallAdminChat = ({
           chats.map((message, idx) => (
             <ChattingInfo key={idx}>
               <ChattingContent>
-                <ImageWrapper>
-                  <Image
-                    src={findUserIMG(message.participantId)}
-                    alt='프로필사진'
-                    width={45}
-                    height={45}
-                  />
-                </ImageWrapper>
-                <ContentWrapper>
-                  <ContentName>{findUserName(message.participantId)}</ContentName>
-                  <ContentText>{message.content}</ContentText>
-                </ContentWrapper>
+                {requestUser === findRequestUser(message.participantId) ? (
+                  <MyChattingContent>
+                    <MyContentText>{message.content}</MyContentText>
+                  </MyChattingContent>
+                ) : (
+                  <>
+                    <ImageWrapper>
+                      <Image
+                        src={findUserIMG(message.participantId)}
+                        alt='프로필사진'
+                        width={45}
+                        height={45}
+                      />
+                    </ImageWrapper>
+                    <ContentWrapper>
+                      <ContentName>{findUserName(message.participantId)}</ContentName>
+                      <ContentText>{message.content}</ContentText>
+                    </ContentWrapper>
+                  </>
+                )}
               </ChattingContent>
             </ChattingInfo>
           ))}
@@ -169,6 +183,7 @@ const ImageWrapper = styled.div`
 
 const ContentWrapper = styled.div`
   margin-left: 0.5rem;
+  max-width: 70%;
 `;
 
 const ContentName = styled.div`
@@ -184,6 +199,17 @@ const ContentText = styled.div`
   font-size: 1.3rem;
 `;
 
+const MyContentText = styled.div`
+  padding: 0.5rem;
+  border: 1px solid black;
+  background: yellow;
+  border-radius: 1rem 0 1rem 1rem;
+  display: flex;
+  align-items: center;
+  font-size: 1.3rem;
+  margin-right: 1rem;
+`;
+
 const ChattingInfo = styled.div`
   min-height: 5rem;
   display: flex;
@@ -193,6 +219,13 @@ const ChattingInfo = styled.div`
 
 const ChattingContent = styled.div`
   display: flex;
+  width: 100%;
+`;
+
+const MyChattingContent = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
 `;
 
 const InputChat = styled.input`

src/components/RoundCheckIn/CheckInPage.tsx

@@ -3,6 +3,7 @@ import { MatchMessages, MatchPlayerScoreInfos } from '@components/RoundCheckIn';
 import CallAdminChat from '@components/RoundCheckIn/CallAdminChat';
 import styled from '@emotion/styled';
 import { Client } from '@stomp/stompjs';
+import { ChangeEventHandler, MouseEventHandler, useEffect, useState } from 'react';
 
 interface CheckInPageProps {
   ParticipantCheckin: () => void;
@@ -11,6 +12,8 @@ interface CheckInPageProps {
   players: MatchPlayerScoreInfos[];
   matchMessage: MatchMessages[];
   requestUser: number;
+  checkInUser: number[];
+  currentMatchRound: number;
 }
 
 const CheckInPage = ({
@@ -20,18 +23,83 @@ const CheckInPage = ({
   players,
   matchMessage,
   requestUser,
+  checkInUser,
+  currentMatchRound,
 }: CheckInPageProps) => {
+  const [ready, setReady] = useState<boolean>(false);
+  const [isSendingRanking, setIsSendingRanking] = useState<boolean>(false);
+  const [rank, setRank] = useState<string>('');
+
+  const handleRankingChange: ChangeEventHandler<HTMLSelectElement> = (e) => {
+    if (!e.target) return;
+    setRank(e.target.value);
+  };
+
+  const onClickRankingButton: MouseEventHandler<HTMLElement> = () => {
+    if (rank === '') {
+      alert('결과를 입력해주세요');
+      return;
+    }
+
+    if (!confirm(`게임 결과 ${rank}등이 맞나요?`)) return;
+
+    if (rank === '1' || rank === '2') {
+      if (!client || currentMatchRound === -1) {
+        alert('서버에 에러가 발생했습니다. 새로고침 후 입력 부탁드립니다');
+        return;
+      }
+
+      client.publish({
+        destination: `/app/match/${matchId}/${currentMatchRound}/score-update`,
+      });
+    }
+    setIsSendingRanking(true);
+  };
+
+  useEffect(() => {
+    const findUser = checkInUser.find((user) => requestUser === user);
+    if (findUser === undefined) {
+      setReady(false);
+      return;
+    }
+
+    setReady(true);
+  }, [checkInUser]);
+
   return (
     <Container>
       <RemainTimeWrapper>
         <Icon kind='clock' />
         <RemainTimeItem>남은시간</RemainTimeItem>
-        <RemainTimeItem>04:59</RemainTimeItem>
+        <RemainTimeItem></RemainTimeItem>
       </RemainTimeWrapper>
       <ButtonWrapper>
-        <Button onClick={() => ParticipantCheckin()}>준비</Button>
-        <Button>기권</Button>
+        {players.length !== 0 && players.length <= checkInUser.length ? (
+          <>
+            <RankingSelect value={rank} onChange={handleRankingChange} disabled={isSendingRanking}>
+              <option value=''>경기 후 게임 결과를 입력해주세요</option>
+              {players.map((player, idx) => (
+                <option key={idx} value={idx + 1}>
+                  {idx + 1}등
+                </option>
+              ))}
+            </RankingSelect>
+            <RankingSubmitButton disabled={isSendingRanking} onClick={onClickRankingButton}>
+              전송
+            </RankingSubmitButton>
+          </>
+        ) : (
+          <>
+            <Button disabled={ready} onClick={() => ParticipantCheckin()}>
+              준비
+            </Button>
+            <Button disabled={ready} onClick={() => alert('해당 경기는 기권이 불가능합니다')}>
+              기권
+            </Button>
+          </>
+        )}
       </ButtonWrapper>
+
       <ChattingWrapper>
         <CallAdminChat
           client={client}
@@ -81,6 +149,7 @@ const Button = styled.button`
   height: 5rem;
   color: white;
   background: #637083;
+  background: ${(props) => (props.disabled ? '#ced4da' : '#637083')};
   border: none;
   border-radius: 0.5rem;
 
@@ -90,3 +159,22 @@ const Button = styled.button`
 `;
 
 const ChattingWrapper = styled.div``;
+
+const RankingSelect = styled.select`
+  height: 5rem;
+  width: ${(props) => (props.disabled ? '100%' : '70%')};
+`;
+
+const RankingSubmitButton = styled.button`
+  width: 26%;
+  height: 5rem;
+  color: white;
+  background: #637083;
+  border: none;
+  border-radius: 0.5rem;
+  display: ${(props) => (props.disabled ? 'none' : 'block')};
+
+  &: hover {
+    cursor: pointer;
+  }
+`;

src/components/RoundCheckIn/index.tsx

@@ -7,6 +7,7 @@ import { connectToStomp } from '@config/stomp';
 import { Client, StompSubscription } from '@stomp/stompjs';
 import authAPI from '@apis/authAPI';
 import { useRouter } from 'next/router';
+import { css } from '@emotion/react';
 
 export interface MatchPlayerScoreInfos {
   matchPlayerId: number;
@@ -31,8 +32,9 @@ export interface MatchMessages {
 
 export interface GetMatchPlayerScoreInfos {
   requestMatchPlayerId: number;
-  currentMatchRound: number;
-  totalMatchRound: number;
+  matchRound: number;
+  matchCurrentSet: number;
+  matchSetCount: number;
   matchPlayerInfos: MatchPlayerScoreInfos[];
   matchMessage: MatchMessages[];
 }
@@ -73,21 +75,54 @@ const RoundCheckIn = ({ channelLink, matchId }: RoundCheckInProps) => {
     const tmpClient = connectToStomp();
     tmpClient.activate();
 
-    let subscription: StompSubscription;
+    let checkInSubscription: StompSubscription;
+
     tmpClient.onConnect = () => {
       setClient(tmpClient);
-      subscription = tmpClient.subscribe(`/match/${matchId}`, (data) => {
-        setCheckInUser((prevUsers) => [...prevUsers, Number(JSON.parse(data.body).matchPlayerId)]);
+      checkInSubscription = tmpClient.subscribe(`/match/${matchId}`, (data) => {
+        const readyUserPlayerId = Number(JSON.parse(data.body).matchPlayerId);
+        if (checkInUser.includes(readyUserPlayerId)) return;
+        setCheckInUser((prevUsers) => [...prevUsers, readyUserPlayerId]);
       });
     };
 
     return () => {
       if (!client) return;
-      if (subscription) subscription.unsubscribe();
+      if (checkInSubscription) checkInSubscription.unsubscribe();
+
       client.deactivate();
     };
   }, []);
 
+  useEffect(() => {
+    if (!matchPlayers || !client) return;
+
+    const nextRoundSubscription = client.subscribe(
+      `/match/${matchId}/${matchPlayers.matchCurrentSet}`,
+      (data) => {
+        alert('다음 라운드가 진행됩니다');
+        const responseData = JSON.parse(data.body);
+        if (!matchPlayers) return;
+        setMatchPlayers((prevMatchPlayer) => {
+          if (!prevMatchPlayer) return;
+          return {
+            ...prevMatchPlayer,
+            matchRound: responseData.matchRound,
+            matchCurrentSet: responseData.matchCurrentSet,
+            matchSetCount: responseData.matchSetCount,
+            matchPlayerInfos: responseData.matchPlayerInfoList,
+          };
+        });
+        setCheckInUser([]);
+      },
+    );
+
+    return () => {
+      if (!client) return;
+      if (nextRoundSubscription) nextRoundSubscription.unsubscribe();
+    };
+  }, [matchPlayers, client]);
+
   const participantCheckin = () => {
     if (!client || !matchPlayers) return;
 
@@ -101,8 +136,23 @@ const RoundCheckIn = ({ channelLink, matchId }: RoundCheckInProps) => {
     <Container>
       <ContainerHeader>
         <RoundInfo>
-          {matchPlayers ? matchPlayers.currentMatchRound : 0} of{' '}
-          {matchPlayers ? matchPlayers.totalMatchRound : 0}
+          <div
+            css={css`
+              font-size: 1.5em;
+              display: inline-block;
+            `}
+          >
+            {matchPlayers ? matchPlayers.matchRound : 0} ROUND{' '}
+          </div>
+          <div
+            css={css`
+              display: inline-block;
+              padding-left: 3rem;
+            `}
+          >
+            {matchPlayers ? matchPlayers.matchCurrentSet : 0} of{' '}
+            {matchPlayers ? matchPlayers.matchSetCount : 0}
+          </div>
         </RoundInfo>
         <FlexWrapper>
           <CheckInfo>
@@ -128,6 +178,8 @@ const RoundCheckIn = ({ channelLink, matchId }: RoundCheckInProps) => {
           players={matchPlayers ? matchPlayers.matchPlayerInfos : []}
           matchMessage={matchPlayers ? matchPlayers.matchMessage : []}
           requestUser={matchPlayers ? matchPlayers.requestMatchPlayerId : -1}
+          checkInUser={checkInUser}
+          currentMatchRound={matchPlayers ? matchPlayers.matchCurrentSet : -1}
         />
       </FlexWrapper>
     </Container>