[Feat] 랜딩페이지 토너먼트 배너 UI 변경 #1149

components/main/Section.tsx

@@ -2,8 +2,8 @@ import { useRouter } from 'next/router';
 import React from 'react';
 import { FaChevronRight } from 'react-icons/fa';
 import GameResult from 'components/game/GameResult';
+import TournamentPreview from 'components/main/TournamentPreview/TournamentPreview';
 import RankListMain from 'components/rank/topRank/RankListMain';
-import TournamentMegaphone from 'components/tournament/TournamentMegaphone';
 import styles from 'styles/main/Section.module.scss';
 
 type SectionProps = {
@@ -18,7 +18,7 @@ export default function Section({ sectionTitle, path }: SectionProps) {
   const pathCheck: pathType = {
     game: <GameResult />,
     rank: <RankListMain isMain={true} season={0} />,
-    tournament: <TournamentMegaphone />,
+    tournament: <TournamentPreview />,
   };
 
   return (

components/main/TournamentPreview/TournamentPreview.tsx

@@ -0,0 +1,56 @@
+import { useRouter } from 'next/router';
+import { useState, useRef } from 'react';
+import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import { TournamentInfo } from 'types/tournamentTypes';
+import useBeforeLiveTournamentData from 'hooks/tournament/useBeforeLiveTournamentData';
+import useInterval from 'hooks/useInterval';
+import styles from 'styles/main/TournamentPreview/TournamentPreview.module.scss';
+import TournamentPreviewItem from './TournamentPreviewItem';
+
+export default function TournamentPreview() {
+  const data: TournamentInfo[] | undefined = useBeforeLiveTournamentData();
+  const [selectedIndex, setSelectedIndex] = useState<number>(0);
+  const virtuoso = useRef<VirtuosoHandle>(null);
+  const router = useRouter();
+
+  useInterval(() => {
+    if (!data || data?.length === 0) {
+      return;
+    }
+    const nextIndex = (selectedIndex + 1) % data.length;
+    setSelectedIndex(nextIndex);
+    if (virtuoso.current !== null) {
+      virtuoso.current.scrollToIndex({
+        index: nextIndex,
+        align: 'start',
+        behavior: 'smooth',
+      });
+    }
+  }, 5000);
+
+  return (
+    <div
+      className={styles.rollingBanner}
+      onClick={() => router.push('tournament')}
+    >
+      {data && data.length > 0 && (
+        <Virtuoso
+          className={styles.virtuoso}
+          totalCount={data.length}
+          data={data}
+          ref={virtuoso}
+          itemContent={(index) => (
+            <TournamentPreviewItem
+              id={data[index].tournamentId}
+              title={data[index].title}
+              startTime={data[index].startTime}
+              endTime={data[index].endTime}
+              status={data[index].status}
+            />
+          )}
+          style={{ height: '100%' }}
+        />
+      )}
+    </div>
+  );
+}

components/main/TournamentPreview/TournamentPreviewItem.tsx

@@ -0,0 +1,45 @@
+import styles from 'styles/main/TournamentPreview/TournamentPreviewItem.module.scss';
+
+interface TournamentPreviewItemProps {
+  id: number;
+  title: string;
+  startTime: string;
+  endTime: string;
+  status: string;
+}
+
+export default function TournamentPreviewItem({
+  title,
+  startTime,
+  endTime,
+  status,
+}: TournamentPreviewItemProps) {
+  function formatTime(timeString: string) {
+    const date = new Date(timeString);
+    return date.toLocaleTimeString('ko-KR', {
+      year: 'numeric',
+      month: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+      day: 'numeric',
+      hour12: true,
+    });
+  }
+
+  const formattedStartTime = formatTime(startTime);
+  const formattedEndTime = formatTime(endTime);
+
+  const statusColor = status === 'LIVE' ? 'live' : 'scheduled';
+
+  return (
+    <div className={styles.itemWrapper}>
+      <div className={styles.titleStatusWrapper}>
+        <h4>{title}</h4>
+        <div className={`${styles.statusWrapper} ${styles[statusColor]}`}>
+          {status === 'LIVE' ? '경기 중' : '예정'}
+        </div>
+      </div>
+      <time>{formattedStartTime}</time> ~ <time>{formattedEndTime}</time>
+    </div>
+  );
+}

hooks/tournament/useBeforeLiveTournamentData.ts

@@ -0,0 +1,35 @@
+import { useCallback } from 'react';
+import { useQuery } from 'react-query';
+import { useSetRecoilState } from 'recoil';
+import { TournamentInfo } from 'types/tournamentTypes';
+import { instance } from 'utils/axios';
+import { errorState } from 'utils/recoil/error';
+
+export default function useBeforeLiveTournamentData() {
+  const setError = useSetRecoilState(errorState);
+  const fetchTournamentData = useCallback(async () => {
+    const liveRes = await instance.get(
+      '/pingpong/tournaments?page=1&status=LIVE'
+    );
+    const beforeRes = await instance.get(
+      '/pingpong/tournaments?page=1&status=BEFORE'
+    );
+    const combinedData = [
+      ...liveRes.data.tournaments,
+      ...beforeRes.data.tournaments,
+    ];
+    return combinedData;
+  }, []);
+
+  const { data, isError } = useQuery<TournamentInfo[]>(
+    'beforeLiveTournamentData',
+    fetchTournamentData,
+    { retry: 1, staleTime: 60000 }
+  );
+
+  if (isError) {
+    setError('JC04');
+  }
+
+  return data;
+}

pages/index.tsx

@@ -1,23 +1,20 @@
 import type { NextPage } from 'next';
 import SearchBar from 'components/main/SearchBar';
 import Section from 'components/main/Section';
+import useBeforeLiveTournamentData from 'hooks/tournament/useBeforeLiveTournamentData';
 import styles from 'styles/main/Home.module.scss';
 
 const Home: NextPage = () => {
+  const tournamentData = useBeforeLiveTournamentData();
+
   return (
     <div className={styles.container}>
-      <div className={styles.search}>
-        <SearchBar />
-      </div>
-      <div className={styles.tournament}>
+      <SearchBar />
+      {tournamentData && (
         <Section path='tournament' sectionTitle={'Tournament'} />
-      </div>
-      <div className={styles.rank}>
-        <Section path='rank' sectionTitle={'Ranking'} />
-      </div>
-      <div className={styles.game}>
-        <Section path='game' sectionTitle={'Current Play'} />
-      </div>
+      )}
+      <Section path='rank' sectionTitle={'Ranking'} />
+      <Section path='game' sectionTitle={'Current Play'} />
     </div>
   );
 };

styles/main/TournamentPreview/TournamentPreview.module.scss

@@ -0,0 +1,13 @@
+.rollingBanner {
+  width: 100%;
+  height: 5rem;
+  color: white;
+  background: #8034f7;
+  border-radius: 1rem;
+}
+
+.virtuoso {
+  // NOTE : 라이브러리에서 인라인 스타일로 overflow-y: auto를 주고 있어 스크롤바가 생김
+  // 이를 상쇄하기 위해서 !important를 사용함.
+  overflow-y: hidden !important;
+}

styles/main/TournamentPreview/TournamentPreviewItem.module.scss

@@ -0,0 +1,35 @@
+.itemWrapper {
+  width: 100%;
+  height: 5rem;
+  padding: 1rem;
+
+  .titleStatusWrapper {
+    display: flex;
+    align-items: center;
+
+    h4 {
+      margin: 0;
+    }
+
+    .statusWrapper {
+      display: flex;
+      padding: 0.3rem;
+      margin-left: 0.5rem;
+      font-size: 0.7rem;
+      border-radius: 0.5rem;
+      align-items: center;
+
+      &.live {
+        background-color: red;
+      }
+      &.scheduled {
+        background-color: green;
+      }
+    }
+  }
+
+  time {
+    font-size: 0.8rem;
+    color: yellow;
+  }
+}