Merge branch 'main' into others/관리자-토너먼트-유저-추가-검색창-수정-#1175

components/Layout/Layout.tsx

@@ -10,7 +10,7 @@ import Header from 'components/Layout/Header';
 import HeaderStateContext from 'components/Layout/HeaderContext';
 import MainPageProfile from 'components/Layout/MainPageProfile';
 import Megaphone from 'components/Layout/MegaPhone';
-import StyledButton from 'components/StyledButton';
+import StyledButton from 'components/UI/StyledButton';
 import Statistics from 'pages/statistics';
 import useAnnouncementCheck from 'hooks/Layout/useAnnouncementCheck';
 import useGetUserSeason from 'hooks/Layout/useGetUserSeason';

components/UI/BouncingDots.tsx

@@ -0,0 +1,11 @@
+import styles from 'styles/UI/BouncingDots.module.scss';
+
+export default function BouncingDots() {
+  return (
+    <div className={styles.bouncingDots}>
+      <div className={styles.dot}></div>
+      <div className={styles.dot}></div>
+      <div className={styles.dot}></div>
+    </div>
+  );
+}

components/EmptyImage.tsx → components/UI/EmptyImage.tsx

@@ -1,5 +1,5 @@
 import NotiEmptyEmoji from 'public/image/noti_empty.svg';
-import styles from 'styles/EmptyImage.module.scss';
+import styles from 'styles/UI/EmptyImage.module.scss';
 
 function EmptyImage() {
   return (

components/StyledButton.tsx → components/UI/StyledButton.tsx

@@ -1,5 +1,5 @@
 import { MouseEventHandler } from 'react';
-import styles from 'styles/StyledButton.module.scss';
+import styles from 'styles/UI/StyledButton.module.scss';
 
 type StyledButtonProps = {
   onClick: MouseEventHandler<HTMLButtonElement>;

components/store/InventoryList.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { instance } from 'utils/axios';
 import { InfinityScroll } from 'utils/infinityScroll';
-import EmptyImage from 'components/EmptyImage';
 import { InfiniteScrollComponent } from 'components/store/InfiniteScrollComponent';
 import { InvetoryItem } from 'components/store/InventoryItem';
 import StoreLoading from 'components/store/StoreLoading';
+import EmptyImage from 'components/UI/EmptyImage';
 import styles from 'styles/store/Inventory.module.scss';
 
 function fetchInventoryData(page: number) {

components/tournament/TournamentMatch.tsx

@@ -4,22 +4,23 @@ import {
 } from '@g-loot/react-tournament-brackets/dist/src/types';
 import { useRecoilValue } from 'recoil';
 import { clickedTournamentState } from 'utils/recoil/tournament';
+import BouncingDots from 'components/UI/BouncingDots';
 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;
+  state: string;
 }
 
 function TournamentMatchParty({
   party,
   teamNameFallback,
   onMouseEnter,
   onPartyClick,
-  resultFallback,
+  state,
 }: TournamentMatchPartyProps) {
   const highLightUser = useRecoilValue(clickedTournamentState);
 
@@ -50,7 +51,11 @@ function TournamentMatchParty({
         {party.name !== 'TBD' ? party.name : ''}
       </div>
       <div className={styles.score}>
-        {party.resultText ?? resultFallback(party)}
+        {state === 'LIVE' || state === 'WAIT' ? (
+          <BouncingDots />
+        ) : (
+          party.resultText
+        )}
       </div>
     </div>
   );
@@ -82,14 +87,14 @@ export default function TournamentMatch({
         teamNameFallback={teamNameFallback}
         onMouseEnter={onMouseEnter}
         onPartyClick={onPartyClick}
-        resultFallback={resultFallback}
+        state={match.state}
       ></TournamentMatchParty>
       <TournamentMatchParty
         party={bottomParty}
         teamNameFallback={teamNameFallback}
         onMouseEnter={onMouseEnter}
         onPartyClick={onPartyClick}
-        resultFallback={resultFallback}
+        state={match.state}
       ></TournamentMatchParty>
     </div>
   );

pages/index.tsx

@@ -9,7 +9,7 @@ const Home: NextPage = () => {
   return (
     <div className={styles.container}>
       <SearchBar />
-      {tournamentData?.length && (
+      {tournamentData && tournamentData?.length > 0 && (
         <Section path='tournament' sectionTitle={'Tournament'} />
       )}
       <Section path='rank' sectionTitle={'Ranking'} />

pages/login.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
-import StyledButton from 'components/StyledButton';
+import StyledButton from 'components/UI/StyledButton';
 import styles from 'styles/Login.module.scss';
 
 function Login() {

styles/UI/BouncingDots.module.scss

@@ -0,0 +1,30 @@
+.bouncingDots {
+  display: flex;
+  justify-content: space-between;
+  width: 1rem;
+  .dot {
+    width: 0.2rem;
+    height: 0.2rem;
+    background-color: white;
+    border-radius: 50%;
+    animation: wave 1.3s linear infinite;
+    &:nth-child(2) {
+      animation-delay: -1.1s;
+    }
+    &:nth-child(3) {
+      animation-delay: -0.9s;
+    }
+  }
+}
+
+@keyframes wave {
+  0%,
+  60%,
+  100% {
+    margin-top: 0;
+  }
+
+  30% {
+    margin-top: -0.3rem;
+  }
+}

styles/tournament/TournamentMatch.module.scss

@@ -20,8 +20,8 @@
   .partyName {
     margin-left: 1rem;
   }
-
   .score {
+    margin-right: 1rem;
     margin-left: auto;
   }
 }