Merge pull request #111 from hufs-sports-live/fix/all

[FIX] 필요한 변경 사항을 모두 수정합니다.
HiimKwak · Nov 29, 2023 · 6da952a · 6da952a
2 parents 91d560f + 08a1b7e
commit 6da952a
Show file tree

Hide file tree

Showing 18 changed files with 249 additions and 88 deletions.
diff --git a/next.config.js b/next.config.js
@@ -4,6 +4,7 @@ const nextConfig = {
     domains: [
       'hufstreaming.s3.ap-northeast-2.amazonaws.com',
       'hufscheer-server.s3.ap-northeast-2.amazonaws.com',
+      'github.com',
     ],
   },
 };

diff --git a/src/api/match.ts b/src/api/match.ts
@@ -20,14 +20,11 @@ export type MatchListParams = {
   cursor?: number;
 };
 
-export const getMatchList = async (
-  { cursor, ...params }: MatchListParams,
-  size = 3,
-) => {
+export const getMatchList = async ({ cursor, ...params }: MatchListParams) => {
   const queryString = convertObjectToQueryString(params);
 
   const { data } = await instance.get<MatchListType[]>(
-    `games?${queryString}&cursor=${cursor || ''}&size=${size}`,
+    `games?${queryString}&cursor=${cursor || ''}`,
   );
 
   return data;
@@ -47,6 +44,17 @@ export const getMatchCheerById = async (matchId: string) => {
   return data;
 };
 
+export const postCheer = async ({
+  matchId,
+  ...payload
+}: {
+  matchId: string;
+  gameTeamId: number;
+  cheerCount: number;
+}) => {
+  return await instance.post(`/games/${matchId}/cheer`, payload);
+};
+
 export const getGameComments = async (gameId: string, cursor = 1) => {
   const response = await instance.get<MatchCommentType[]>(
     `/games/${gameId}/comments?cursor=${cursor}`,

diff --git a/src/app/match/[id]/page.tsx b/src/app/match/[id]/page.tsx
@@ -69,7 +69,13 @@ export default function Match({ params }: { params: { id: string } }) {
         loadingFallback={<Loader />}
       >
         <MatchCheerByIdFetcher matchId={params.id}>
-          {data => <Cheer cheers={data} />}
+          {({ cheers, matchTeams }) => (
+            <Cheer
+              matchId={params.id}
+              cheers={cheers}
+              matchTeams={matchTeams}
+            />
+          )}
         </MatchCheerByIdFetcher>
       </AsyncBoundary>
       <Panel options={options} defaultValue="라인업">

diff --git a/src/app/rummikube/[id]/page.tsx b/src/app/rummikube/[id]/page.tsx
@@ -72,7 +72,13 @@ export default function Rummikute({ params }: { params: { id: string } }) {
         loadingFallback={<Loader />}
       >
         <MatchCheerByIdFetcher matchId={params.id}>
-          {data => <Cheer cheers={data} />}
+          {({ cheers, matchTeams }) => (
+            <Cheer
+              matchId={params.id}
+              cheers={cheers}
+              matchTeams={matchTeams}
+            />
+          )}
         </MatchCheerByIdFetcher>
       </AsyncBoundary>
       <Panel options={options} defaultValue="라인업">

diff --git a/src/components/match/Cheer/index.tsx b/src/components/match/Cheer/index.tsx
@@ -1,27 +1,38 @@
 import { FallbackProps } from '@/components/common/ErrorBoundary';
-import { MatchCheerType } from '@/types/match';
+import { MatchCheerType, MatchTeamType } from '@/types/match';
 
 import CheerTeam from '../CheerTeam';
 
 type CheerProps = {
+  matchId: string;
   cheers: MatchCheerType[];
+  matchTeams: MatchTeamType[];
 };
 
-export default function Cheer({ cheers }: CheerProps) {
-  const [firstTeam, secondTeam] = cheers;
+export default function Cheer({ matchId, cheers, matchTeams }: CheerProps) {
+  const [firstTeamCheer, secondTeamCheer] = cheers;
+  const [firstTeam, secondTeam] = matchTeams;
 
   return (
     <div className="min-h-10 relative my-5 flex h-full w-full justify-center gap-5 p-2">
-      <CheerTeam className="bg-cheer-left">
-        🤜
-        <span className="ml-3">{firstTeam.cheerCount}</span>
+      <CheerTeam
+        className="flex-row-reverse bg-cheer-left"
+        matchId={matchId}
+        gameTeamId={firstTeam.gameTeamId}
+        cheerCount={firstTeamCheer.cheerCount}
+      >
+        <span>{firstTeam.gameTeamName} 🤜</span>
       </CheerTeam>
       <div className="absolute top-1/2 -translate-y-1/2 rounded-xl bg-white px-5 py-1 text-center font-bold text-gray-4">
         VS
       </div>
-      <CheerTeam className="bg-cheer-right">
-        <span className="mr-3">{secondTeam.cheerCount}</span>
-        🤛
+      <CheerTeam
+        matchId={matchId}
+        className="bg-cheer-right"
+        gameTeamId={secondTeam.gameTeamId}
+        cheerCount={secondTeamCheer.cheerCount}
+      >
+        <span>🤛 {secondTeam.gameTeamName}</span>
       </CheerTeam>
     </div>
   );

diff --git a/src/components/match/CheerTeam/index.tsx b/src/components/match/CheerTeam/index.tsx
@@ -1,23 +1,63 @@
-import { ComponentProps } from 'react';
+'use client';
 
+import { useQueryClient } from '@tanstack/react-query';
+import { ComponentProps, useEffect, useState } from 'react';
+
+import useQueryDebounce from '@/hooks/useQueryDebounce';
+import useCheerMutation from '@/queries/useCheerMutation/query';
 import { $ } from '@/utils/core';
 
+interface CheerTeamType extends ComponentProps<'button'> {
+  matchId: string;
+  cheerCount: number;
+  gameTeamId: number;
+}
+
 export default function CheerTeam({
+  matchId,
+  gameTeamId,
+  cheerCount,
   children,
   className,
   ...props
-}: ComponentProps<'div'>) {
+}: CheerTeamType) {
+  const [count, setCount] = useState(0);
+  const { mutate } = useCheerMutation({ matchId, gameTeamId });
+  const debouncedCount = useQueryDebounce<number>(count, 1000 * 5);
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    const handleCheerClick = (cheerCount: number) => {
+      mutate(cheerCount, {
+        onSuccess: () => {
+          queryClient.invalidateQueries({ queryKey: ['match-cheer', matchId] });
+        },
+        onError: (data, variables, context) => {
+          queryClient.setQueryData(
+            ['match-cheer', matchId],
+            context?.previousCount,
+          );
+        },
+        onSettled: () => {
+          setCount(0);
+        },
+      });
+    };
+
+    handleCheerClick(debouncedCount);
+  }, [debouncedCount, matchId, mutate, queryClient]);
+
   return (
-    <div
+    <button
+      onClick={() => setCount(prev => prev + 1)}
       className={$(
-        'flex h-14 w-full cursor-pointer items-center justify-evenly rounded-xl shadow-lg',
+        'flex h-14 w-full cursor-pointer items-center justify-center gap-2 rounded-xl text-white shadow-lg',
         className,
       )}
       {...props}
     >
-      <button className="flex w-full items-center justify-center text-white">
-        {children}
-      </button>
-    </div>
+      <span>{cheerCount + count}</span>
+      <span>{children}</span>
+    </button>
   );
 }
diff --git a/src/components/match/CommentForm/index.tsx b/src/components/match/CommentForm/index.tsx
@@ -1,7 +1,8 @@
 import { UseMutateFunction } from '@tanstack/react-query';
-import { ChangeEvent, FormEvent, useState } from 'react';
+import { ChangeEvent, FormEvent, Fragment, useState } from 'react';
 
 import { MatchCommentPayload, MatchTeamType } from '@/types/match';
+import { $ } from '@/utils/core';
 
 type CommentFormProps = {
   matchId: string;
@@ -10,6 +11,13 @@ type CommentFormProps = {
   scrollToBottom: () => void;
 };
 
+const teamColor = [
+  'bg-cheer-left',
+  'bg-[#fb923c] ',
+  'bg-cheer-right',
+  'bg-[#22c55e]',
+] as const;
+
 export default function CommentForm({
   matchId,
   matchTeams,
@@ -44,7 +52,7 @@ export default function CommentForm({
           })
         }
       >
-        <fieldset className="absolute top-0 flex w-full -translate-y-full items-center justify-start gap-4 rounded-lg bg-white px-5 py-3">
+        <fieldset className="absolute top-0 flex w-full -translate-y-full items-center justify-between gap-4 rounded-lg bg-white px-5 py-3">
           {matchTeams.map(team => (
             <label key={team.gameTeamId} className="flex items-center">
               <input
@@ -54,7 +62,10 @@ export default function CommentForm({
                 onChange={handleRadioClick}
                 className="dark:border-gray-6 dark:bg-gray-6 mr-1 h-4 w-4 border-gray-3 bg-gray-1 text-primary focus:ring-2 focus:ring-primary dark:ring-offset-black dark:focus:ring-primary"
               />
-              {team.gameTeamName}
+              🙋
+              <div
+                className={$('h-2 w-2 rounded-full', teamColor[team.order - 1])}
+              ></div>
             </label>
           ))}
         </fieldset>

diff --git a/src/components/match/CommentItem/index.tsx b/src/components/match/CommentItem/index.tsx
@@ -12,8 +12,8 @@ type CommentItemProps = {
 
 const teamColor = [
   'bg-[#ffb2b2]',
-  'bg-[#fdd3b1]',
   'bg-[#b2c3ff]',
+  'bg-[#fdd3b1]',
   'bg-[#a6e7be]',
 ] as const;
 

diff --git a/src/components/match/Video/index.tsx b/src/components/match/Video/index.tsx
@@ -34,8 +34,9 @@ Video.ErrorFallback = function ErrorFallback({
     message =
       VIDEO_API_ERROR_MESSAGE[code as keyof typeof VIDEO_API_ERROR_MESSAGE];
   } else if (error instanceof Error) {
-    message = '경기 영상이 등록되지 않았거나 불러올 수가 없어요!';
+    message = '경기 영상이 등록되지 않았어요!';
   }
+
   return (
     <div className="flex h-full w-full flex-col items-center justify-center gap-5 rounded-xl py-10">
       <span className="text-gary-5">⚠️ {message}</span>

diff --git a/src/components/rummikub/Cheer/index.tsx b/src/components/rummikub/Cheer/index.tsx
@@ -1,37 +1,53 @@
 import { FallbackProps } from '@/components/common/ErrorBoundary';
 import CheerTeam from '@/components/match/CheerTeam';
-import { MatchCheerType } from '@/types/match';
+import { MatchCheerType, MatchTeamType } from '@/types/match';
 
 type CheerProps = {
+  matchId: string;
   cheers: MatchCheerType[];
+  matchTeams: MatchTeamType[];
 };
 
-export default function Cheer({ cheers }: CheerProps) {
-  const [firstTeam, secondTeam, thirdTeam, fourthTeam] = cheers;
+export default function Cheer({ matchId, cheers, matchTeams }: CheerProps) {
+  const [firstTeamCheer, secondTeamCheer, thirdTeamCheer, fourthTeamCheer] =
+    cheers;
+  const [firstTeam, secondTeam, thirdTeam, fourthTeam] = matchTeams;
 
   return (
     <div className="min-h-10 relative my-5 flex h-full w-full justify-center gap-5 p-2">
       <div className="flex w-full flex-col gap-3">
-        <CheerTeam className="bg-cheer-left">
-          🤜
-          <span className="ml-3">{firstTeam.cheerCount}</span>
+        <CheerTeam
+          {...firstTeamCheer}
+          matchId={matchId}
+          className="flex-row-reverse bg-cheer-left"
+        >
+          <span>{firstTeam.gameTeamName} 🤜</span>
         </CheerTeam>
-        <CheerTeam className="bg-[#fb923c] ">
-          🤜
-          <span className="ml-3">{thirdTeam.cheerCount}</span>
+        <CheerTeam
+          {...secondTeamCheer}
+          matchId={matchId}
+          className="flex-row-reverse bg-[#fb923c] "
+        >
+          <span>{secondTeam.gameTeamName} 🤜</span>
         </CheerTeam>
       </div>
       <div className="absolute top-1/2 -translate-y-1/2 rounded-xl bg-white px-5 py-1 text-center font-bold text-gray-4">
         VS
       </div>
       <div className="flex w-full flex-col gap-3">
-        <CheerTeam className="bg-cheer-right">
-          <span className="mr-3">{secondTeam.cheerCount}</span>
-          🤛
+        <CheerTeam
+          {...thirdTeamCheer}
+          matchId={matchId}
+          className="bg-cheer-right"
+        >
+          <span>🤛 {thirdTeam.gameTeamName}</span>
         </CheerTeam>
-        <CheerTeam className="bg-[#22c55e]">
-          <span className="mr-3">{fourthTeam.cheerCount}</span>
-          🤛
+        <CheerTeam
+          {...fourthTeamCheer}
+          matchId={matchId}
+          className="bg-[#22c55e]"
+        >
+          <span>🤛 {fourthTeam.gameTeamName}</span>
         </CheerTeam>
       </div>
     </div>

diff --git a/src/components/rummikub/MatchBanner/index.tsx b/src/components/rummikub/MatchBanner/index.tsx
@@ -14,7 +14,7 @@ export default function RummiKubMatchBanner(match: MatchType) {
           className="z-[0] h-[180px] fill-primary"
         />
         <MatchCard.Status className="mt-5 text-black" />
-        <div className="z-10 flex items-center justify-center gap-4">
+        <div className="z-10 flex items-center justify-center gap-7">
           <div className="flex flex-col items-center justify-center">
             <MatchCard.Team
               teamIndex={1}

diff --git a/src/components/rummikub/MatchItem/index.tsx b/src/components/rummikub/MatchItem/index.tsx
@@ -12,37 +12,21 @@ export default function RummiKubMatchItem(match: MatchType) {
           height={170}
           className="z-[0] h-[180px] fill-primary"
         />
-        <MatchCard.Status className="mt-5 text-black" />
+        <MatchCard.Status className="my-2 text-black" />
 
         <div className="z-10 flex items-center justify-center gap-4">
-          <div className="flex flex-col items-center justify-center">
-            <MatchCard.Team
-              teamIndex={1}
-              className="flex flex-col items-center justify-center [&>img]:my-0"
-            />
-            <MatchCard.Score teamIndex={1} />
-          </div>
-          <div className="flex flex-col items-center justify-center">
-            <MatchCard.Team
-              teamIndex={2}
-              className="flex flex-col items-center justify-center [&>img]:my-0"
-            />
-            <MatchCard.Score teamIndex={2} />
-          </div>
-          <div className="flex flex-col items-center justify-center">
-            <MatchCard.Team
-              teamIndex={3}
-              className="flex flex-col items-center justify-center [&>img]:my-0"
-            />
-            <MatchCard.Score teamIndex={3} />
-          </div>
-          <div className="flex flex-col items-center justify-center">
-            <MatchCard.Team
-              teamIndex={4}
-              className="flex flex-col items-center justify-center [&>img]:my-0"
-            />
-            <MatchCard.Score teamIndex={4} />
-          </div>
+          {match.gameTeams.map(team => (
+            <div
+              key={team.gameTeamId}
+              className="flex flex-col items-center justify-center"
+            >
+              <MatchCard.Team
+                teamIndex={team.order}
+                className="flex flex-col items-center justify-center [&>img]:my-0"
+              />
+              <MatchCard.Score teamIndex={team.order} />
+            </div>
+          ))}
         </div>
         <div className="flex items-center justify-center"></div>
       </div>