Merge pull request #64 from Team-TMB/feature/today

[Fix] mutate 함수 이름 일부 변경 및 기타 사항
Team-TMB · Mar 8, 2024 · 0e8a6eb · 0e8a6eb
2 parents 1a96ef7 + 7479187
commit 0e8a6eb
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 32 deletions.
diff --git a/src/components/comment/Comment.tsx b/src/components/comment/Comment.tsx
@@ -41,7 +41,7 @@ function Comment() {
     refetchOnWindowFocus: false,
   });
 
-  const { mutate: post } = useMutation(async () => postTodayComment(value), {
+  const { mutate: postComment } = useMutation(async () => postTodayComment(value), {
     onMutate: () => {
       setComments([
         ...comments,
@@ -74,9 +74,9 @@ function Comment() {
   const onSubmit = useCallback(
     async (event: FormEvent) => {
       event.preventDefault();
-      post();
+      postComment();
     },
-    [post],
+    [postComment],
   );
 
   return (

diff --git a/src/components/comment/CommentList.tsx b/src/components/comment/CommentList.tsx
@@ -24,7 +24,7 @@ function CommentList({
           teamName={item.teamName}
           comment={item.content}
           createdAt={item.createdAt}
-          count={item.likeCount}
+          likeCount={item.likeCount}
           replyId={item.replyId}
           setComments={setComments}
           queryClient={queryClient}

diff --git a/src/components/comment/CommentListItem.tsx b/src/components/comment/CommentListItem.tsx
@@ -17,7 +17,7 @@ interface CommentListItemProps {
   teamName: string;
   comment: string;
   createdAt?: string;
-  count?: number;
+  likeCount?: number;
   replyId?: number;
   setComments: Dispatch<SetStateAction<CommentData[]>>;
   queryClient: QueryClient;
@@ -28,25 +28,17 @@ function CommentListItem({
   teamName,
   comment,
   createdAt,
-  count,
+  likeCount,
   replyId,
   setComments,
 }: CommentListItemProps) {
   const [visibleReply, setVisibleReply] = useState(false);
   const [visibleReplyList, setVisibleReplyList] = useState(false);
   const [like, setLike] = useState(false);
+  // const [count = likeCount, setCount] = useState(0);
   const [visibleBalloon, setVisibleBalloon] = useState(false);
 
-  const onVisible = () => {
-    setVisibleReply(!visibleReply);
-    setVisibleReplyList(!visibleReplyList);
-  };
-
-  const onLike = () => {
-    setLike(!like);
-  };
-
-  const { mutate: remove } = useMutation(
+  const { mutate: removeComment } = useMutation(
     async () => removeTodayComment(replyId as number),
     {
       onMutate: (commentId: number) => {
@@ -58,14 +50,24 @@ function CommentListItem({
     },
   );
 
+  const onVisible = () => {
+    setVisibleReply(!visibleReply);
+    setVisibleReplyList(!visibleReplyList);
+  };
+
+  // 좋아요 기능 작업 중
+  const onLike = () => {
+    setLike(!like);
+  };
+
   const onBalloon = useCallback(() => {
     setVisibleBalloon(!visibleBalloon);
   }, [visibleBalloon]);
 
   const onRemove = useCallback(() => {
-    remove(replyId as number);
+    removeComment(replyId as number);
     setVisibleBalloon(false);
-  }, [remove, replyId]);
+  }, [removeComment, replyId]);
 
   return (
     <>
@@ -101,7 +103,7 @@ function CommentListItem({
           </div>
           <div className="item-block__button__like">
             <Text>좋아요</Text>
-            <span>{count}</span>
+            <span>{likeCount}</span>
             <div
               className={classNames(
                 `${like ? "active-like-btn" : "inactive-like-btn"}`,

diff --git a/src/components/today/ScoreList.tsx b/src/components/today/ScoreList.tsx
@@ -18,6 +18,7 @@ function ScoreList({ game }: ScoreListProps) {
             homeTeam={item.homeTeam}
             awayTeam={item.awayTeam}
             gameTime={item.gameTime}
+            gameId={item.gameId}
           />
         ))}
       </ul>

diff --git a/src/components/today/ScoreListItem.tsx b/src/components/today/ScoreListItem.tsx
@@ -9,24 +9,75 @@ import Title from "../common/Title";
 import { TodayMatchData } from "./Today";
 import { getAwayLogo, getHomeLogo } from "@/lib/util/getLogo";
 import { gameDate } from "@/lib/util/getGameTime";
+import { deleteTodayGameVote, todayGameVote } from "@/lib/api/todayAPI";
+import { useMutation } from "react-query";
 
 // Interface
 interface ScoreListItemProps extends TodayMatchData {}
 
 // Component
-function ScoreListItem({ homeTeam, awayTeam, gameTime }: ScoreListItemProps) {
+function ScoreListItem({
+  homeTeam,
+  awayTeam,
+  gameTime,
+  gameId,
+}: ScoreListItemProps) {
   const [selectHome, setSelectHome] = useState(false);
   const [selectAway, setSelectAway] = useState(false);
+  const [voteHome, setVoteHome] = useState(homeTeam.voteRatio);
+  const [voteAway, setVoteAway] = useState(awayTeam.voteRatio);
 
-  const onClickLeft = useCallback(() => {
+  const { mutate: home } = useMutation(
+    async () => todayGameVote(gameId as number, homeTeam.id),
+    {
+      onMutate: () => {
+        console.warn("홈 팀 선택 완료!");
+      },
+    },
+  );
+
+  const { mutate: homeDelete } = useMutation(
+    async () => deleteTodayGameVote(gameId as number),
+    {
+      onMutate: () => {
+        console.warn("홈 팀 삭제 완료");
+      },
+    },
+  );
+
+  const { mutate: away } = useMutation(
+    async () => todayGameVote(gameId as number, awayTeam.id),
+    {
+      onMutate: () => {
+        console.warn("원정 팀 선택 완료!");
+      },
+    },
+  );
+
+  const { mutate: awayDelete } = useMutation(
+    async () => deleteTodayGameVote(gameId as number),
+    {
+      onMutate: () => {
+        console.warn("원정 팀 삭제 완료");
+      },
+    },
+  );
+
+  const onClickHome = useCallback(() => {
+    // Toggle select home
     setSelectHome(!selectHome);
     setSelectAway(false);
-  }, [selectHome]);
+    !selectHome ? home() : homeDelete();
+    setVoteHome(homeTeam.voteRatio);
+  }, [home, homeDelete, selectHome, homeTeam.voteRatio]);
 
-  const onClickRight = useCallback(() => {
+  const onClickAway = useCallback(() => {
+    // Toggle select away
     setSelectAway(!selectAway);
     setSelectHome(false);
-  }, [selectAway]);
+    !selectAway ? away() : awayDelete();
+    setVoteAway(awayTeam.voteRatio);
+  }, [away, awayDelete, selectAway, awayTeam.voteRatio]);
 
   return (
     <>
@@ -38,12 +89,12 @@ function ScoreListItem({ homeTeam, awayTeam, gameTime }: ScoreListItemProps) {
           className={classNames(
             `score-item-block__left ${selectHome ? "active-left" : ""}`,
           )}
-          onClick={onClickLeft}
+          onClick={onClickHome}
         >
           <div className="team-img">
             <Image
               src={getHomeLogo(homeTeam.teamName)}
-              alt="lions"
+              alt={homeTeam.teamName}
               width={0}
               height={0}
               draggable={false}
@@ -55,19 +106,19 @@ function ScoreListItem({ homeTeam, awayTeam, gameTime }: ScoreListItemProps) {
             ) : (
               <Text large>{homeTeam.teamName}</Text>
             )}
-            <Title medium>{homeTeam.voteRatio}%</Title>
+            <Title medium>{voteHome}%</Title>
           </div>
         </div>
         <div
           className={classNames(
             `score-item-block__right ${selectAway ? "active-right" : ""}`,
           )}
-          onClick={onClickRight}
+          onClick={onClickAway}
         >
           <div className="team-img">
             <Image
               src={getAwayLogo(awayTeam.teamName)}
-              alt="lions"
+              alt={awayTeam.teamName}
               width={0}
               height={0}
               draggable={false}
@@ -79,7 +130,7 @@ function ScoreListItem({ homeTeam, awayTeam, gameTime }: ScoreListItemProps) {
             ) : (
               <Text large>{awayTeam.teamName}</Text>
             )}
-            <Title medium>{awayTeam.voteRatio}%</Title>
+            <Title medium>{voteAway}%</Title>
           </div>
         </div>
       </li>

diff --git a/src/components/today/Today.tsx b/src/components/today/Today.tsx
@@ -30,7 +30,7 @@ export interface TodayMatchData {
 
 function Today() {
   const [game, setGame] = useState<TodayMatchData[]>([]);
-  useQuery({
+  const { data: todayData = game } = useQuery({
     queryKey: ["today"],
     queryFn: () =>
       todayGames()?.then((res) => {
@@ -39,10 +39,12 @@ function Today() {
     refetchOnWindowFocus: false,
   });
 
+  console.warn(todayData);
+
   return (
     <div className="today-block">
       <DateSection />
-      <ScoreList game={game} />
+      <ScoreList game={todayData} />
       <Comment />
     </div>
   );

diff --git a/src/lib/api/todayAPI.ts b/src/lib/api/todayAPI.ts
@@ -86,3 +86,21 @@ export const removeTodayComment = (replyId: number) => {
     console.error(e);
   }
 };
+
+// 댓글 좋아요
+export const likeTodayComment = (replyId: number) => {
+  try {
+    const requestBody = {
+      replyId: replyId,
+    };
+    const res = fetchData(
+      `games/daily-reply/${replyId}/like`,
+      "post",
+      requestBody,
+    );
+    console.warn(res);
+    return res;
+  } catch (e) {
+    console.error(e);
+  }
+};