diff --git a/src/components/comment/Comment.tsx b/src/components/comment/Comment.tsx index 3eed8835..b75f7e5c 100644 --- 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 index 1bf78b9e..f4f9d607 100644 --- 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 index 33df2c4f..3df43f4d 100644 --- 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>; 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({
좋아요 - {count} + {likeCount}
))} diff --git a/src/components/today/ScoreListItem.tsx b/src/components/today/ScoreListItem.tsx index 5f7de1e8..0d4ea8e7 100644 --- 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} >
lions{homeTeam.teamName} )} - {homeTeam.voteRatio}% + {voteHome}%
lions{awayTeam.teamName} )} - {awayTeam.voteRatio}% + {voteAway}%
diff --git a/src/components/today/Today.tsx b/src/components/today/Today.tsx index afbeba3b..9f599478 100644 --- 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([]); - useQuery({ + const { data: todayData = game } = useQuery({ queryKey: ["today"], queryFn: () => todayGames()?.then((res) => { @@ -39,10 +39,12 @@ function Today() { refetchOnWindowFocus: false, }); + console.warn(todayData); + return (
- +
); diff --git a/src/lib/api/todayAPI.ts b/src/lib/api/todayAPI.ts index 8c266574..94024c1c 100644 --- 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); + } +};