From b884898bc4a7c9292ac4258c367d20a95e3e6d9e Mon Sep 17 00:00:00 2001 From: seongminn Date: Wed, 29 Nov 2023 12:03:32 +0900 Subject: [PATCH 01/11] =?UTF-8?q?fix:=20github.com=20img=20url=20=ED=97=88?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- next.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/next.config.js b/next.config.js index 1ba0668..69d9d61 100644 --- 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', ], }, }; From 1e835ba3cd59a352448fbe80b85f9fa71e132811 Mon Sep 17 00:00:00 2001 From: seongminn Date: Wed, 29 Nov 2023 12:04:32 +0900 Subject: [PATCH 02/11] =?UTF-8?q?chore:=20matchId=20size=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/match.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/api/match.ts b/src/api/match.ts index a6bb35c..69a860e 100644 --- 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( - `games?${queryString}&cursor=${cursor || ''}&size=${size}`, + `games?${queryString}&cursor=${cursor || ''}`, ); return data; From 0956f73b1fab7a57f9c632b44103644c70857a09 Mon Sep 17 00:00:00 2001 From: seongminn Date: Wed, 29 Nov 2023 12:36:38 +0900 Subject: [PATCH 03/11] =?UTF-8?q?chore:=20=EC=9D=91=EC=9B=90=ED=95=98?= =?UTF-8?q?=EA=B8=B0=EC=97=90=20=ED=8C=80=EB=AA=85=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/match/[id]/page.tsx | 4 +++- src/app/rummikube/[id]/page.tsx | 4 +++- src/components/match/Cheer/index.tsx | 16 +++++++------ src/components/rummikub/Cheer/index.tsx | 25 ++++++++++--------- src/queries/useMatchCheerById/Fetcher.tsx | 18 ++++++++++---- src/queries/useMatchCheerById/query.ts | 29 +++++++++++++++++------ 6 files changed, 64 insertions(+), 32 deletions(-) diff --git a/src/app/match/[id]/page.tsx b/src/app/match/[id]/page.tsx index 60e9dfd..ca28357 100644 --- a/src/app/match/[id]/page.tsx +++ b/src/app/match/[id]/page.tsx @@ -69,7 +69,9 @@ export default function Match({ params }: { params: { id: string } }) { loadingFallback={} > - {data => } + {({ cheers, matchTeams }) => ( + + )} diff --git a/src/app/rummikube/[id]/page.tsx b/src/app/rummikube/[id]/page.tsx index 6a7a2fc..8b0b170 100644 --- a/src/app/rummikube/[id]/page.tsx +++ b/src/app/rummikube/[id]/page.tsx @@ -72,7 +72,9 @@ export default function Rummikute({ params }: { params: { id: string } }) { loadingFallback={} > - {data => } + {({ cheers, matchTeams }) => ( + + )} diff --git a/src/components/match/Cheer/index.tsx b/src/components/match/Cheer/index.tsx index 197cdbe..634ab79 100644 --- a/src/components/match/Cheer/index.tsx +++ b/src/components/match/Cheer/index.tsx @@ -1,27 +1,29 @@ import { FallbackProps } from '@/components/common/ErrorBoundary'; -import { MatchCheerType } from '@/types/match'; +import { MatchCheerType, MatchTeamType } from '@/types/match'; import CheerTeam from '../CheerTeam'; type CheerProps = { cheers: MatchCheerType[]; + matchTeams: MatchTeamType[]; }; -export default function Cheer({ cheers }: CheerProps) { - const [firstTeam, secondTeam] = cheers; +export default function Cheer({ cheers, matchTeams }: CheerProps) { + const [firstTeamCheer, secondTeamCheer] = cheers; + const [firstTeam, secondTeam] = matchTeams; return (
- 🤜 - {firstTeam.cheerCount} + 🤜 {firstTeam.gameTeamName} + {firstTeamCheer.cheerCount}
VS
- {secondTeam.cheerCount} - 🤛 + {secondTeamCheer.cheerCount} + {secondTeam.gameTeamName} 🤛
); diff --git a/src/components/rummikub/Cheer/index.tsx b/src/components/rummikub/Cheer/index.tsx index 7f3c925..af88e36 100644 --- a/src/components/rummikub/Cheer/index.tsx +++ b/src/components/rummikub/Cheer/index.tsx @@ -1,24 +1,27 @@ 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 = { cheers: MatchCheerType[]; + matchTeams: MatchTeamType[]; }; -export default function Cheer({ cheers }: CheerProps) { - const [firstTeam, secondTeam, thirdTeam, fourthTeam] = cheers; +export default function Cheer({ cheers, matchTeams }: CheerProps) { + const [firstTeamCheer, secondTeamCheer, thirdTeamCheer, fourthTeamCheer] = + cheers; + const [firstTeam, secondTeam, thirdTeam, fourthTeam] = matchTeams; return (
- 🤜 - {firstTeam.cheerCount} + 🤜 {firstTeam.gameTeamName} + {firstTeamCheer.cheerCount} - 🤜 - {thirdTeam.cheerCount} + 🤜 {secondTeam.gameTeamName} + {thirdTeamCheer.cheerCount}
@@ -26,12 +29,12 @@ export default function Cheer({ cheers }: CheerProps) {
- {secondTeam.cheerCount} - 🤛 + {secondTeamCheer.cheerCount} + {thirdTeam.gameTeamName} 🤛 - {fourthTeam.cheerCount} - 🤛 + {fourthTeamCheer.cheerCount} + {fourthTeam.gameTeamName} 🤛
diff --git a/src/queries/useMatchCheerById/Fetcher.tsx b/src/queries/useMatchCheerById/Fetcher.tsx index c48bdb5..2fe143a 100644 --- a/src/queries/useMatchCheerById/Fetcher.tsx +++ b/src/queries/useMatchCheerById/Fetcher.tsx @@ -1,21 +1,29 @@ import { ReactNode } from 'react'; -import { MatchCheerType } from '@/types/match'; +import { MatchCheerType, MatchTeamType } from '@/types/match'; import { useMatchCheerById } from './query'; type MatchCheerByIdFetcherProps = { matchId: string; - children: (data: MatchCheerType[]) => ReactNode; + children: ({ + cheers, + matchTeams, + }: { + cheers: MatchCheerType[]; + matchTeams: MatchTeamType[]; + }) => ReactNode; }; export default function MatchCheerByIdFetcher({ matchId, children, }: MatchCheerByIdFetcherProps) { - const { cheers, error } = useMatchCheerById(matchId); + const { cheers, matchTeams, cheersError, matchTeamsError } = + useMatchCheerById(matchId); - if (error) throw error; + if (cheersError) throw cheersError; + if (matchTeamsError) throw matchTeamsError; - return children(cheers); + return children({ cheers, matchTeams }); } diff --git a/src/queries/useMatchCheerById/query.ts b/src/queries/useMatchCheerById/query.ts index 9fe850c..ec84fad 100644 --- a/src/queries/useMatchCheerById/query.ts +++ b/src/queries/useMatchCheerById/query.ts @@ -1,15 +1,30 @@ -import { useSuspenseQuery } from '@tanstack/react-query'; +import { useSuspenseQueries } from '@tanstack/react-query'; -import { getMatchCheerById } from '@/api/match'; +import { getMatchById, getMatchCheerById } from '@/api/match'; +import { MatchType } from '@/types/match'; export const useMatchCheerById = (matchId: string) => { - const { data, error } = useSuspenseQuery({ - queryKey: ['match-cheer', matchId], - queryFn: () => getMatchCheerById(matchId), + const [ + { data: cheers, error: cheersError }, + { data: matchTeams, error: matchTeamsError }, + ] = useSuspenseQueries({ + queries: [ + { + queryKey: ['match-cheer', matchId], + queryFn: () => getMatchCheerById(matchId), + }, + { + queryKey: ['match-detail', 'for-cheer', matchId], + queryFn: () => getMatchById(matchId), + select: (data: MatchType) => data.gameTeams, + }, + ], }); return { - cheers: data, - error, + cheers, + matchTeams, + cheersError, + matchTeamsError, }; }; From b0452078415928bdc53786448d876454361fac24 Mon Sep 17 00:00:00 2001 From: seongminn Date: Wed, 29 Nov 2023 12:46:19 +0900 Subject: [PATCH 04/11] =?UTF-8?q?fix:=20query=20string=EC=9D=B4=20?= =?UTF-8?q?=EC=A0=9C=EB=8C=80=EB=A1=9C=20=EC=83=9D=EC=84=B1=EB=90=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix: 쿼리스트링이 undefined를 반환하는 문제 해결 --- src/utils/queryString.ts | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/utils/queryString.ts b/src/utils/queryString.ts index 997ccb1..851d73f 100644 --- a/src/utils/queryString.ts +++ b/src/utils/queryString.ts @@ -1,3 +1,11 @@ +const toSnakeCase = (text: string) => { + return text + .replace(/_/g, '_') + .replace(/([A-Z])/g, '_$1') + .replace(/^-/, '') + .toLowerCase(); +}; + export const convertObjectToQueryString = (params: { [key: string]: string | string[]; }) => { @@ -5,9 +13,11 @@ export const convertObjectToQueryString = (params: { Object.entries(params).forEach(([key, value]) => { if (Array.isArray(value)) { - value.forEach(valueItem => queryString.append(key, valueItem)); + value.forEach(valueItem => { + queryString.append(toSnakeCase(key), valueItem || ''); + }); } else { - queryString.append(key, String(value)); + queryString.append(toSnakeCase(key), value ?? ''); } }); From 44bca33fab6e49634aada12b295a292bb505567f Mon Sep 17 00:00:00 2001 From: seongminn Date: Wed, 29 Nov 2023 15:20:06 +0900 Subject: [PATCH 05/11] =?UTF-8?q?fix:=20=EB=A3=A8=EB=AF=B8=ED=81=90?= =?UTF-8?q?=EB=B8=8C=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20url=20not=20found=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/rummikub/MatchItem/index.tsx | 42 +++++++-------------- 1 file changed, 13 insertions(+), 29 deletions(-) diff --git a/src/components/rummikub/MatchItem/index.tsx b/src/components/rummikub/MatchItem/index.tsx index b880ea9..931d806 100644 --- 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" /> - +
-
- - -
-
- - -
-
- - -
-
- - -
+ {match.gameTeams.map(team => ( +
+ + +
+ ))}
From 55ec08a331a3dcd6e3900ebb1e20072e4d48f1a0 Mon Sep 17 00:00:00 2001 From: seongminn Date: Wed, 29 Nov 2023 15:21:56 +0900 Subject: [PATCH 06/11] =?UTF-8?q?chore:=20=EB=8C=93=EA=B8=80=20=EC=83=89?= =?UTF-8?q?=EC=83=81=20=EC=88=9C=EC=84=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/match/CommentItem/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/match/CommentItem/index.tsx b/src/components/match/CommentItem/index.tsx index a01ba94..d557e98 100644 --- 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; From 6cb93e160854c9a1d9d0336bcf6d98fd5f7e1a63 Mon Sep 17 00:00:00 2001 From: seongminn Date: Wed, 29 Nov 2023 16:37:48 +0900 Subject: [PATCH 07/11] =?UTF-8?q?feat:=20=EC=9D=91=EC=9B=90=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/match.ts | 11 +++++ src/app/match/[id]/page.tsx | 6 ++- src/components/match/Cheer/index.tsx | 23 +++++++--- src/components/match/CheerTeam/index.tsx | 56 ++++++++++++++++++++---- src/hooks/useQueryDebounce.ts | 17 +++++++ src/queries/useCheerMutation/query.ts | 25 +++++++++++ 6 files changed, 122 insertions(+), 16 deletions(-) create mode 100644 src/hooks/useQueryDebounce.ts create mode 100644 src/queries/useCheerMutation/query.ts diff --git a/src/api/match.ts b/src/api/match.ts index 69a860e..b57a418 100644 --- a/src/api/match.ts +++ b/src/api/match.ts @@ -44,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( `/games/${gameId}/comments?cursor=${cursor}`, diff --git a/src/app/match/[id]/page.tsx b/src/app/match/[id]/page.tsx index ca28357..367ffff 100644 --- a/src/app/match/[id]/page.tsx +++ b/src/app/match/[id]/page.tsx @@ -70,7 +70,11 @@ export default function Match({ params }: { params: { id: string } }) { > {({ cheers, matchTeams }) => ( - + )} diff --git a/src/components/match/Cheer/index.tsx b/src/components/match/Cheer/index.tsx index 634ab79..51b8488 100644 --- a/src/components/match/Cheer/index.tsx +++ b/src/components/match/Cheer/index.tsx @@ -4,26 +4,35 @@ import { MatchCheerType, MatchTeamType } from '@/types/match'; import CheerTeam from '../CheerTeam'; type CheerProps = { + matchId: string; cheers: MatchCheerType[]; matchTeams: MatchTeamType[]; }; -export default function Cheer({ cheers, matchTeams }: CheerProps) { +export default function Cheer({ matchId, cheers, matchTeams }: CheerProps) { const [firstTeamCheer, secondTeamCheer] = cheers; const [firstTeam, secondTeam] = matchTeams; return (
- - 🤜 {firstTeam.gameTeamName} - {firstTeamCheer.cheerCount} + + {firstTeam.gameTeamName} 🤜
VS
- - {secondTeamCheer.cheerCount} - {secondTeam.gameTeamName} 🤛 + + 🤛 {secondTeam.gameTeamName}
); diff --git a/src/components/match/CheerTeam/index.tsx b/src/components/match/CheerTeam/index.tsx index f3e3e8d..510a10b 100644 --- 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(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 ( -
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} > - -
+ {cheerCount + count} + {children} + ); } diff --git a/src/hooks/useQueryDebounce.ts b/src/hooks/useQueryDebounce.ts new file mode 100644 index 0000000..2a5cb7b --- /dev/null +++ b/src/hooks/useQueryDebounce.ts @@ -0,0 +1,17 @@ +import { useEffect, useState } from 'react'; + +export default function useQueryDebounce(value: T, delay = 200) { + const [debounceValue, setDebounceValue] = useState(value); + + useEffect(() => { + const handler: NodeJS.Timeout = setTimeout(() => { + setDebounceValue(value); + }, delay); + + return () => { + clearTimeout(handler); + }; + }, [value, delay]); + + return debounceValue; +} diff --git a/src/queries/useCheerMutation/query.ts b/src/queries/useCheerMutation/query.ts new file mode 100644 index 0000000..769b3d3 --- /dev/null +++ b/src/queries/useCheerMutation/query.ts @@ -0,0 +1,25 @@ +import { useMutation, useQueryClient } from '@tanstack/react-query'; + +import { postCheer } from '@/api/match'; + +export default function useCheerMutation({ + gameTeamId, + matchId, +}: { + gameTeamId: number; + matchId: string; +}) { + const queryClient = useQueryClient(); + + return useMutation({ + mutationKey: ['cheer'], + mutationFn: (cheerCount: number) => + postCheer({ matchId, gameTeamId, cheerCount }), + onMutate: async () => { + const previousCount = queryClient.getQueryData(['match-cheer', matchId]); + + return { previousCount }; + }, + retry: false, + }); +} From 2f259da05064b11099898fe14c74c8037a83354c Mon Sep 17 00:00:00 2001 From: seongminn Date: Wed, 29 Nov 2023 16:43:57 +0900 Subject: [PATCH 08/11] =?UTF-8?q?feat:=20=EB=A3=A8=EB=AF=B8=ED=81=90?= =?UTF-8?q?=EB=B8=8C=EC=97=90=20=EC=9D=91=EC=9B=90=ED=95=98=EA=B8=B0=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/rummikube/[id]/page.tsx | 6 +++- src/components/rummikub/Cheer/index.tsx | 39 ++++++++++++++++--------- 2 files changed, 31 insertions(+), 14 deletions(-) diff --git a/src/app/rummikube/[id]/page.tsx b/src/app/rummikube/[id]/page.tsx index 8b0b170..09b4f6d 100644 --- a/src/app/rummikube/[id]/page.tsx +++ b/src/app/rummikube/[id]/page.tsx @@ -73,7 +73,11 @@ export default function Rummikute({ params }: { params: { id: string } }) { > {({ cheers, matchTeams }) => ( - + )} diff --git a/src/components/rummikub/Cheer/index.tsx b/src/components/rummikub/Cheer/index.tsx index af88e36..2e66c83 100644 --- a/src/components/rummikub/Cheer/index.tsx +++ b/src/components/rummikub/Cheer/index.tsx @@ -3,11 +3,12 @@ import CheerTeam from '@/components/match/CheerTeam'; import { MatchCheerType, MatchTeamType } from '@/types/match'; type CheerProps = { + matchId: string; cheers: MatchCheerType[]; matchTeams: MatchTeamType[]; }; -export default function Cheer({ cheers, matchTeams }: CheerProps) { +export default function Cheer({ matchId, cheers, matchTeams }: CheerProps) { const [firstTeamCheer, secondTeamCheer, thirdTeamCheer, fourthTeamCheer] = cheers; const [firstTeam, secondTeam, thirdTeam, fourthTeam] = matchTeams; @@ -15,26 +16,38 @@ export default function Cheer({ cheers, matchTeams }: CheerProps) { return (
- - 🤜 {firstTeam.gameTeamName} - {firstTeamCheer.cheerCount} + + {firstTeam.gameTeamName} 🤜 - - 🤜 {secondTeam.gameTeamName} - {thirdTeamCheer.cheerCount} + + {secondTeam.gameTeamName} 🤜
VS
- - {secondTeamCheer.cheerCount} - {thirdTeam.gameTeamName} 🤛 + + 🤛 {thirdTeam.gameTeamName} - - {fourthTeamCheer.cheerCount} - {fourthTeam.gameTeamName} 🤛 + + 🤛 {fourthTeam.gameTeamName}
From 50ca65c90840acc737c0200ca52e15781165e089 Mon Sep 17 00:00:00 2001 From: seongminn Date: Wed, 29 Nov 2023 16:45:03 +0900 Subject: [PATCH 09/11] =?UTF-8?q?style:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=EA=B0=84=EA=B2=A9=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit style: 아이콘 간격 수정 --- src/components/rummikub/MatchBanner/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/rummikub/MatchBanner/index.tsx b/src/components/rummikub/MatchBanner/index.tsx index 6875146..0a2d15a 100644 --- 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" /> -
+
Date: Wed, 29 Nov 2023 16:52:18 +0900 Subject: [PATCH 10/11] =?UTF-8?q?fix:=20=EB=B9=84=EB=94=94=EC=98=A4=20id?= =?UTF-8?q?=20=EC=97=86=EC=9D=84=20=EC=8B=9C=20=EC=97=90=EB=9F=AC=20?= =?UTF-8?q?=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/match/Video/index.tsx | 3 ++- src/queries/useMatchVideoById/Fetcher.tsx | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/match/Video/index.tsx b/src/components/match/Video/index.tsx index cbeaeaf..702b23a 100644 --- 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 (
⚠️ {message} diff --git a/src/queries/useMatchVideoById/Fetcher.tsx b/src/queries/useMatchVideoById/Fetcher.tsx index 257355b..7dc1db7 100644 --- a/src/queries/useMatchVideoById/Fetcher.tsx +++ b/src/queries/useMatchVideoById/Fetcher.tsx @@ -15,6 +15,8 @@ export default function MatchVideoFetcher({ }: MatchVideoFetcherProps) { const { videoId, error } = useMatchVideoById(matchId); + if (!videoId.videoId) throw new Error('경기 영상이 등록되지 않았어요!'); + if (error) throw error; return children(videoId); From 08a1b7e30f636bbfe7e078f6816e2aebcdae7c9b Mon Sep 17 00:00:00 2001 From: seongminn Date: Wed, 29 Nov 2023 17:34:38 +0900 Subject: [PATCH 11/11] =?UTF-8?q?style:=20=EB=8C=93=EA=B8=80=20=EC=9C=A0?= =?UTF-8?q?=EC=A0=80=20=EB=AA=A9=EB=A1=9D=20=EC=A0=90=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/match/CommentForm/index.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/components/match/CommentForm/index.tsx b/src/components/match/CommentForm/index.tsx index 818206d..3ee630e 100644 --- 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({ }) } > -
+
{matchTeams.map(team => ( ))}