[Feat] 하이라이트 기능 추가 #1138

components/tournament/TournamentBraket.tsx

@@ -3,8 +3,13 @@ import {
   SVGViewer as StaticSVGViewer,
   SingleEliminationBracket as StaticSingleEliminationBracket,
 } from '@g-loot/react-tournament-brackets';
-import { Match } from '@g-loot/react-tournament-brackets/dist/src/types';
+import {
+  Match,
+  Participant,
+} from '@g-loot/react-tournament-brackets/dist/src/types';
 import React from 'react';
+import { useRecoilState } from 'recoil';
+import { clickedTournamentState } from 'utils/recoil/tournament';
 import TournamentMatch from 'components/tournament/TournamentMatch';
 
 if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
@@ -40,6 +45,7 @@ export default function TournamentBraket({
   singleEliminationBracketMatchs,
   containerSize,
 }: TournamentBraketProps) {
+  const [, setHighLightUser] = useRecoilState(clickedTournamentState);
   if (singleEliminationBracketMatchs.length === 0)
     return <h1 style={{ color: 'white' }}>Loading...</h1>;
   // const [width, height] = useWindowSize();
@@ -49,6 +55,9 @@ export default function TournamentBraket({
   return (
     <SingleEliminationBracket
       matches={singleEliminationBracketMatchs}
+      onPartyClick={(party: Participant, won: boolean) => {
+        setHighLightUser(party.name);
+      }}
       matchComponent={TournamentMatch}
       options={{
         style: {

components/tournament/TournamentMatch.tsx

@@ -2,26 +2,43 @@ import {
   MatchComponentProps,
   Participant,
 } from '@g-loot/react-tournament-brackets/dist/src/types';
+import { useEffect } from 'react';
+import { useRecoilValue } from 'recoil';
+import { Highlight } from '@mui/icons-material';
+import { clickedTournamentState } from 'utils/recoil/tournament';
 import PlayerImage from 'components/PlayerImage';
 import styles from 'styles/tournament/TournamentMatch.module.scss';
-
 interface TournamentMatchPartyProps {
   party: Participant;
   teamNameFallback: string;
   resultFallback: (participant: Participant) => string;
   onMouseEnter: (partyId: string | number) => void;
+  onPartyClick: (party: Participant, partyWon: boolean) => void;
+  highLightUser?: string;
 }
 
 function TournamentMatchParty({
   party,
   teamNameFallback,
   onMouseEnter,
+  onPartyClick,
   resultFallback,
 }: TournamentMatchPartyProps) {
+  const highLightUser = useRecoilValue(clickedTournamentState);
+
+  useEffect(() => {
+    console.log(highLightUser);
+  }, [highLightUser]);
+
   return (
     <div
-      className={styles.tournamentPartyWrapper}
+      className={`${styles.tournamentPartyWrapper} ${
+        highLightUser !== 'TBD' && highLightUser === party.name
+          ? styles.highlight
+          : ''
+      }`}
       onMouseEnter={() => onMouseEnter(party.id)}
+      onClick={() => onPartyClick(party, false)}
     >
       <PlayerImage
         src={party.picture ?? '/image/match_qustion.png'}
@@ -55,19 +72,23 @@ export default function TournamentMatch({
   computedStyles,
   teamNameFallback,
   resultFallback,
+  highLightUser,
+  setHighLightUser,
 }: MatchComponentProps) {
   return (
     <div className={styles.tournamentMatchContainer}>
       <TournamentMatchParty
         party={topParty}
         teamNameFallback={teamNameFallback}
         onMouseEnter={onMouseEnter}
+        onPartyClick={onPartyClick}
         resultFallback={resultFallback}
       ></TournamentMatchParty>
       <TournamentMatchParty
         party={bottomParty}
         teamNameFallback={teamNameFallback}
         onMouseEnter={onMouseEnter}
+        onPartyClick={onPartyClick}
         resultFallback={resultFallback}
       ></TournamentMatchParty>
     </div>

styles/tournament/TournamentMatch.module.scss

@@ -19,6 +19,12 @@
   }
 }
 
+.highlight {
+  /* 바깥 테두리에 반짝이는 효과를 주는 스타일 */
+  box-shadow: 0 0 10px 5px rgba(255, 255, 0, 0.5) inset; /* 노란색 그림자, inset을 사용하여 내부가 아닌 외부에 적용 */
+  transition: box-shadow 0.3s ease-in-out; /* 그림자에 부드러운 전환 */
+}
+
 .tournamentMatchContainer {
   display: flex;
   width: 100%;

utils/recoil/tournament.ts

@@ -0,0 +1,7 @@
+import { atom } from 'recoil';
+import { v1 } from 'uuid';
+
+export const clickedTournamentState = atom<string | undefined>({
+  key: `clickedTournamentState/${v1()}`, // unique ID (경기 컴포넌트의 각 아이템을 구분하기 위해서)
+  default: '', // default value (기본적으로 첫 번째 아이템 값)
+});