Merge pull request #62 from pepero-1/feature/#53

입장메세지 수정, 게임종료시 reload
KDT1-FE · Nov 15, 2023 · 1e1a60b · 1e1a60b
2 parents 7abc135 + 52eed7a
commit 1e1a60b
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 11 deletions.
diff --git a/src/components/Game/GameChat/index.tsx b/src/components/Game/GameChat/index.tsx
@@ -43,7 +43,7 @@ interface GameChatProps {
 
 interface UserResponse {
   users: string[];
-  joiners?: string[];
+  joiners?: any[];
   leaver?: string;
 }
 
@@ -61,13 +61,10 @@ const GameChat: React.FC<GameChatProps> = ({
   setCurrent,
 }) => {
   const user = useRecoilValue(userState);
-  console.log("Chat/ liar:" + liar);
   const [message] = useState<Message>({
     id: "",
     text: "",
   });
-  console.log("current,", current);
-  // console.log("GameChat/ gameData:", gameData);
   const [messages, setMessages]: any = useState([]);
   const messageRef = useRef<HTMLInputElement | null>(null);
   const [, setUsers] = useState<string[]>([]);
@@ -147,10 +144,20 @@ const GameChat: React.FC<GameChatProps> = ({
   useEffect(() => {
     // 유저 입장 메시지 수신
     socket.on("join", (responseData: UserResponse) => {
-      const systemMessage = `${responseData.joiners!.join} 님이 입장했습니다.`;
-
-      setMessages([...messages, { id: "system", text: systemMessage }]);
-      setUsers(responseData.users);
+      console.log(
+        "responseData:",
+        responseData,
+        "responseData.joiners:",
+        responseData.joiners,
+      );
+      if (responseData.joiners) {
+        const idParts = responseData.joiners[0].id.split(":");
+        const joinId =
+          idParts.length > 1 ? idParts[1] : responseData.joiners[0].id;
+        const systemMessage = `${joinId} 님이 입장했습니다.`;
+        setMessages([...messages, { id: "system", text: systemMessage }]);
+        setUsers(responseData.users);
+      }
     });
 
     // 유저 퇴장 메시지 수신

diff --git a/src/components/Game/GameStart/index.tsx b/src/components/Game/GameStart/index.tsx
@@ -23,6 +23,8 @@ interface GameStartProps {
   status: string;
   users: string[];
   host: string;
+  current: string;
+  setCurrent: React.Dispatch<React.SetStateAction<string>>;
 }
 
 interface UserWithSort {
@@ -37,6 +39,7 @@ const GameStart: React.FC<GameStartProps> = ({
   status,
   users,
   host,
+  setCurrent,
 }) => {
   const user = useRecoilValue(userState);
 
@@ -107,7 +110,7 @@ const GameStart: React.FC<GameStartProps> = ({
   };
 
   // 게임 종료
-  const hadleEnd = () => {
+  const handleEnd = () => {
     const gameInfo = JSON.stringify({
       category: "",
       keyword: "",
@@ -120,8 +123,9 @@ const GameStart: React.FC<GameStartProps> = ({
     fireFetch.updateData("game", gameId as string, { votedFor: [] });
     fireFetch.updateData("game", gameId as string, { status: "대기중" });
 
-    socketMain.emit("message-to-server", gameId + ":" + "~!a%2@##");
+    setCurrent("게임종료");
 
+    socketMain.emit("message-to-server", gameId + ":" + "~!a%2@##");
     // setShowStartModal(false);
   };
 
@@ -142,7 +146,7 @@ const GameStart: React.FC<GameStartProps> = ({
           w="200px"
           h="100%"
           mr="20px"
-          onClick={hadleEnd}
+          onClick={handleEnd}
           isDisabled={host !== user.id}
         >
           게임 종료

diff --git a/src/pages/Game/index.tsx b/src/pages/Game/index.tsx
@@ -106,6 +106,12 @@ const Game = () => {
     }
   }, [gameData.data]);
 
+  useEffect(() => {
+    if (current === "게임종료") {
+      window.location.reload();
+    }
+  }, [current]);
+
   // 게임 나가기 api 선언 (호출 X)
   const leave = useFetch({
     url: "https://fastcampus-chat.net/chat/leave",
@@ -188,6 +194,8 @@ const Game = () => {
             status={status}
             users={users}
             host={gameData.data[0].host}
+            current={current}
+            setCurrent={setCurrent}
           />
         </GridItem>
         <GridItem>