Merge pull request #34 from pepero-1/feature/#23

빌드오류 수정(라이어 투표 기능구현중)
KDT1-FE · Nov 13, 2023 · 120d0cd · 120d0cd
2 parents df4dcf5 + 53222d9
commit 120d0cd
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 47 deletions.
diff --git a/src/components/Game/GameChat/index.tsx b/src/components/Game/GameChat/index.tsx
@@ -59,12 +59,12 @@ const GameChat: React.FC<GameChatProps> = ({ gameId, gameData }) => {
     setSelectedUser(selectedUser);
   };
 
-  const handleCalculateVoteClose = (finalLiar: string) => {
-    // finalLiar를 이용하여 특정 동작 수행 (SystemChat)
+  // const handleCalculateVoteClose = (finalLiar: string) => {
+  //   // finalLiar를 이용하여 특정 동작 수행 (SystemChat)
 
-    // 선택한 결과 초기화
-    setSelectedUser("");
-  };
+  //   // 선택한 결과 초기화
+  //   setSelectedUser("");
+  // };
 
   useEffect(() => {
     socket.on("message-to-client", (messageObject) => {
@@ -78,23 +78,24 @@ const GameChat: React.FC<GameChatProps> = ({ gameId, gameData }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [socket]);
 
-  // useEffect(() => {
-  //   // 유저 입장 메시지 수신
-  //   socket.on("join", (responseData: UserResponse) => {
-  //     const systemMessage = `${responseData.joiners.join(
-  //       ", ",
-  //     )} 님이 입장했습니다.`;
-  //     setMessages([...messages, { id: "system", text: systemMessage }]);
-  //     setUsers(responseData.users);
-  //   });
-
-  //   // 유저 퇴장 메시지 수신
-  //   socket.on("leave", (responseData: UserResponse) => {
-  //     const systemMessage = `${responseData.leaver} 님이 퇴장했습니다.`;
-  //     setMessages([...messages, { id: "system", text: systemMessage }]);
-  //     setUsers(responseData.users);
-  //   });
-  // }, []);
+  useEffect(() => {
+    // 유저 입장 메시지 수신
+    socket.on("join", (responseData: UserResponse) => {
+      const systemMessage = `${responseData.joiners!.join(
+        ", ",
+      )} 님이 입장했습니다.`;
+
+      setMessages([...messages, { id: "system", text: systemMessage }]);
+      setUsers(responseData.users);
+    });
+
+    // 유저 퇴장 메시지 수신
+    socket.on("leave", (responseData: UserResponse) => {
+      const systemMessage = `${responseData.leaver} 님이 퇴장했습니다.`;
+      setMessages([...messages, { id: "system", text: systemMessage }]);
+      setUsers(responseData.users);
+    });
+  }, []);
 
   // 메시지 값 변화시(소켓 통신 시) 콘솔에 메시지 데이터 출력
   useEffect(() => {

diff --git a/src/components/Game/Vote/CalculateVote.tsx b/src/components/Game/Vote/CalculateVote.tsx
@@ -15,6 +15,7 @@ import useFireFetch from "../../../hooks/useFireFetch";
 interface CalculateVoteProps {
   voteResults: string;
   onClose: (finalLiar: string) => void;
+  gameId: string;
 }
 
 const CalculateVote: React.FC<CalculateVoteProps> = ({
@@ -31,9 +32,8 @@ const CalculateVote: React.FC<CalculateVoteProps> = ({
       const gameData = await fireFetch.useGetSome("game", "id", gameId);
       const { users, votedFor } = gameData.data[0];
 
-      // 간단한 로직으로 가장 많이 지목된 유저를 선택
       const votesCount: Record<string, number> = {};
-      users.forEach((user) => {
+      users.forEach((user: string) => {
         if (votedFor.includes(user)) {
           votesCount[user] = (votesCount[user] || 0) + 1;
         }
@@ -68,7 +68,6 @@ const CalculateVote: React.FC<CalculateVoteProps> = ({
           <Text>투표 결과 계산 중입니다...</Text>
         </ModalBody>
         <ModalFooter>
-          {/* 계산이 완료되면 버튼 활성화 */}
           {finalLiar && (
             <Button colorScheme="blue" onClick={() => onClose(finalLiar)}>
               계산 완료

diff --git a/src/components/Game/Vote/index.tsx b/src/components/Game/Vote/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import {
   Modal,
   ModalOverlay,
@@ -12,40 +12,47 @@ import {
   RadioGroup,
   Stack,
 } from "@chakra-ui/react";
-import CalculateVote from "./CalculateVote";
 import useFireFetch from "../../../hooks/useFireFetch";
-import { arrayUnion, serverTimestamp } from "firebase/firestore";
+import { arrayUnion } from "firebase/firestore";
+
+interface GameData {
+  id: string;
+  users: string[];
+}
 
 interface VoteProps {
   onClose: (selectedUser: string) => void;
-  gameData: [];
+  gameData: GameData;
 }
 
-const Vote: React.FC<VoteProps> = ({ onClose, gameData }) => {
+const Vote: React.FC<VoteProps> = ({
+  onClose,
+  gameData,
+}): React.ReactElement => {
   const [selectedUser, setSelectedUser] = useState<string>("");
-  const [showCalculateVote, setShowCalculateVote] = useState<boolean>(false);
   const fireFetch = useFireFetch();
 
   const storedToken = localStorage.getItem("token");
-  const tokenData = JSON.parse(storedToken);
+  const tokenData = storedToken ? JSON.parse(storedToken) : null;
 
   const handleUserChange = (value: string) => {
     setSelectedUser(value);
   };
 
   const handleVoteSubmit = () => {
-    const myId = tokenData.id;
-    fireFetch.updateData("game", gameData.id, {
-      votedFor: arrayUnion({ by: myId, liar: selectedUser }),
-    });
-    console.log("voted for " + selectedUser);
-    // setShowCalculateVote(true);
-    onClose();
+    if (selectedUser !== null) {
+      const myId = tokenData.id;
+      fireFetch.updateData("game", gameData.id, {
+        votedFor: arrayUnion({ by: myId, liar: selectedUser }),
+      });
+      console.log(selectedUser + "에 투표했습니다.");
+      onClose(selectedUser);
+    }
   };
 
   return (
     <>
-      <Modal isOpen={!showCalculateVote} onClose={onClose}>
+      <Modal isOpen={true} onClose={() => onClose(selectedUser)}>
         <ModalOverlay />
         <ModalContent>
           <ModalHeader>라이어 투표하기</ModalHeader>
@@ -68,13 +75,6 @@ const Vote: React.FC<VoteProps> = ({ onClose, gameData }) => {
           </ModalFooter>
         </ModalContent>
       </Modal>
-      {showCalculateVote && (
-        <CalculateVote
-          voteResults={selectedUser}
-          gameId={gameData.id}
-          onClose={onClose}
-        />
-      )}
     </>
   );
 };