42organization · 42sungwook · Jun 15, 2023 · May 31, 2023 · Jun 1, 2023 · Jun 1, 2023
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -12,6 +12,10 @@ const preview: Preview = {
         date: /Date$/,
       },
     },
+    backgrounds: {
+      default: 'purple',
+      values: [{ name: 'purple', value: '#301451' }],
+    },
   },
   decorators: [
     (Story: StoryFn) => (

diff --git a/components/game/GameResult.tsx b/components/game/GameResult.tsx
@@ -15,7 +15,7 @@ export default function GameResult({ mode, season }: GameResultProps) {
     <div>
       {path && (
         <QueryClientProvider client={queryClient}>
-          <GameResultList path={path} />
+          <GameResultList path={path} radioMode={mode} />
         </QueryClientProvider>
       )}
     </div>

diff --git a/components/game/GameResultList.tsx b/components/game/GameResultList.tsx
@@ -1,46 +1,66 @@
+import React from 'react';
+import { FaChevronDown } from 'react-icons/fa';
 import { Game } from 'types/gameTypes';
 import GameResultEmptyItem from './GameResultEmptyItem';
 import GameResultBigItem from './big/GameResultBigItem';
 import GameResultSmallItem from './small/GameResultSmallItem';
 import styles from 'styles/game/GameResultItem.module.scss';
 import useGameResultList from 'hooks/game/useGameResultList';
+import { SeasonMode } from 'types/mainType';
 
 interface GameResultListProps {
   path: string;
+  radioMode?: SeasonMode;
 }
 
-export default function GameResultList({ path }: GameResultListProps) {
+export default function GameResultList({
+  path,
+  radioMode,
+}: GameResultListProps) {
   const { data, status, fetchNextPage, isLast, clickedGameItem, pathName } =
     useGameResultList(path);
 
+  const isGamePage = pathName === '/game';
+
   if (status === 'loading') return <GameResultEmptyItem status={status} />;
 
   if (status === 'success' && !data?.pages[0].games.length)
     return <GameResultEmptyItem status={status} />;
 
   return (
-    <div>
+    <div className={styles['gameResultWrapper']}>
       {status === 'success' && (
         <>
-          {data?.pages.map((gameList, index) => (
-            <div key={index}>
-              {gameList.games.map((game: Game) => {
+          {data?.pages.map((gameList, pageIndex) => (
+            <React.Fragment key={pageIndex}>
+              {gameList.games.map((game: Game, index) => {
+                const type = Number.isInteger(index / 2) ? 'LIGHT' : 'DARK';
                 return clickedGameItem === game.gameId ? (
-                  <GameResultBigItem key={game.gameId} game={game} />
+                  <GameResultBigItem
+                    key={game.gameId}
+                    game={game}
+                    zIndexList={!isGamePage}
+                    radioMode={radioMode}
+                  />
                 ) : (
-                  <GameResultSmallItem key={game.gameId} game={game} />
+                  <GameResultSmallItem
+                    key={game.gameId}
+                    type={type}
+                    game={game}
+                    zIndexList={!isGamePage}
+                    radioMode={radioMode}
+                  />
                 );
               })}
-            </div>
+            </React.Fragment>
           ))}
-          {pathName === '/game' && !isLast && (
-            <div className={styles.getButton}>
-              <input
-                type='button'
-                value='더 보기'
-                onClick={() => fetchNextPage()}
-              />
-            </div>
+          {isGamePage && !isLast && (
+            <button
+              className={styles['getButton']}
+              onClick={() => fetchNextPage()}
+            >
+              <FaChevronDown />
+            </button>
           )}
         </>
       )}

diff --git a/components/game/big/GameResultBigItem.tsx b/components/game/big/GameResultBigItem.tsx
@@ -5,30 +5,39 @@ import { clickedGameItemState } from 'utils/recoil/game';
 import GameResultBigScore from 'components/game/big/GameResultBigScore';
 import GameResultBigTeam from 'components/game/big/GameResultBigTeam';
 import styles from 'styles/game/GameResultItem.module.scss';
+import { SeasonMode } from 'types/mainType';
 
 interface GameResultBigItemProps {
   game: Game;
+  radioMode?: SeasonMode;
+  zIndexList: boolean;
 }
 
-function GameResultBigItem({ game }: GameResultBigItemProps) {
+function GameResultBigItem({
+  game,
+  zIndexList,
+  radioMode,
+}: GameResultBigItemProps) {
   const { mode, team1, team2, status, time, gameId } = game;
   const setClickedItemId = useSetRecoilState(clickedGameItemState);
   return (
     <div
-      className={`${styles.bigContainer}
-			${styles[mode.toLowerCase()]}`}
       onClick={() => setClickedItemId(gameId)}
       id={String(gameId)}
+      className={`${styles['bigItemContainer']} ${
+        zIndexList ? styles['zIndexList'] : ''
+      } ${radioMode ? styles[radioMode.toLowerCase()] : ''}`}
     >
-      <GameResultBigTeam team={team1} />
+      <GameResultBigTeam team={team1} zIndexList={zIndexList} />
       <GameResultBigScore
         mode={mode}
         status={status}
         time={time}
         scoreTeam1={team1.score}
         scoreTeam2={team2.score}
+        radioMode={radioMode}
       />
-      <GameResultBigTeam team={team2} />
+      <GameResultBigTeam team={team2} zIndexList={zIndexList} />
     </div>
   );
 }

diff --git a/components/game/big/GameResultBigScore.tsx b/components/game/big/GameResultBigScore.tsx
@@ -1,5 +1,6 @@
 import { getTimeAgo } from 'utils/handleTime';
 import { GameStatus, GameMode } from 'types/gameTypes';
+import { SeasonMode } from 'types/mainType';
 import styles from 'styles/game/GameResultItem.module.scss';
 
 interface GameResultBigScoreProps {
@@ -8,6 +9,7 @@ interface GameResultBigScoreProps {
   time: string;
   scoreTeam1?: number;
   scoreTeam2?: number;
+  radioMode?: SeasonMode;
 }
 
 export default function GameResultBigScore({
@@ -16,18 +18,23 @@ export default function GameResultBigScore({
   time,
   scoreTeam1,
   scoreTeam2,
+  radioMode,
 }: GameResultBigScoreProps) {
   return (
     <div className={styles.bigScoreBoard}>
-      {makeScoreStatus(status, time)}
+      {makeScoreStatus(status, time, radioMode)}
       <div className={styles.gameScore}>
         {mode === 'NORMAL' ? 'VS' : `${scoreTeam1} : ${scoreTeam2}`}
       </div>
     </div>
   );
 }
 
-function makeScoreStatus(status: GameStatus, time: string) {
+function makeScoreStatus(
+  status: GameStatus,
+  time: string,
+  radioMode: SeasonMode
+) {
   switch (status) {
     case 'LIVE':
       return <div className={styles.gameStatusLive}>Live</div>;
@@ -40,7 +47,14 @@ function makeScoreStatus(status: GameStatus, time: string) {
         </div>
       );
     case 'END':
-      return <div className={styles.gameStatusEnd}>{getTimeAgo(time)}</div>;
+      return (
+        <div
+          className={`${styles['gameStatusEnd']} 
+          ${radioMode ? styles[radioMode.toLowerCase()] : ''}`}
+        >
+          {getTimeAgo(time)}
+        </div>
+      );
     default:
       return null;
   }

diff --git a/components/game/big/GameResultBigTeam.tsx b/components/game/big/GameResultBigTeam.tsx
@@ -5,13 +5,17 @@ import styles from 'styles/game/GameResultItem.module.scss';
 
 interface GameResultBigTeamProps {
   team: Team;
+  zIndexList?: boolean;
 }
 
 export function isRankPlayerType(arg: Player | RankPlayer): arg is RankPlayer {
   return 'wins' in arg;
 }
 
-export default function GameResultBigTeam({ team }: GameResultBigTeamProps) {
+export default function GameResultBigTeam({
+  team,
+  zIndexList,
+}: GameResultBigTeamProps) {
   return (
     <div className={styles.bigTeam}>
       {team.players.map((player, index) => (
@@ -26,12 +30,13 @@ export default function GameResultBigTeam({ team }: GameResultBigTeamProps) {
               <div className={styles.userId}>{player.intraId}</div>
             </div>
           </Link>
-          <div className={styles.winRate}>
-            <span>
-              {isRankPlayerType(player)
-                ? `${player.wins}승 ${player.losses}패`
-                : `Lv. ${player.level}`}
-            </span>
+          <div
+            className={`${styles['winRate']} 
+            ${zIndexList && styles['zIndexWinRate']}`}
+          >
+            {isRankPlayerType(player)
+              ? `${player.wins}승 ${player.losses}패`
+              : `Lv. ${player.level}`}
           </div>
         </div>
       ))}

diff --git a/components/game/small/GameResultSmallItem.tsx b/components/game/small/GameResultSmallItem.tsx
@@ -5,20 +5,32 @@ import { clickedGameItemState } from 'utils/recoil/game';
 import GameResultSmallScore from 'components/game/small/GameResultSmallScore';
 import GameResultSmallTeam from 'components/game/small/GameResultSmallTeam';
 import styles from 'styles/game/GameResultItem.module.scss';
+import { SeasonMode } from 'types/mainType';
 
 interface GameResultSmallItemProps {
   game: Game;
+  type: 'LIGHT' | 'DARK';
+  zIndexList: boolean;
+  radioMode?: SeasonMode;
 }
 
-function GameResultSmallItem({ game }: GameResultSmallItemProps) {
+function GameResultSmallItem({
+  game,
+  type,
+  zIndexList,
+  radioMode,
+}: GameResultSmallItemProps) {
   const { mode, team1, team2, gameId } = game;
   const setClickedItemId = useSetRecoilState(clickedGameItemState);
+
   return (
     <div
-      className={`${styles.smallContainer}
-			${styles[mode.toLowerCase()]}`}
-      onClick={() => setClickedItemId(gameId)}
       id={String(gameId)}
+      className={`${styles['smallItemContainer']} 
+      ${styles[type.toLowerCase()]} ${
+        radioMode !== undefined ? styles[radioMode.toLowerCase()] : ''
+      } ${zIndexList ? styles['zIndexList'] : ''}`}
+      onClick={() => setClickedItemId(gameId)}
     >
       <GameResultSmallTeam team={team1} position={'Left'} />
       <GameResultSmallScore

diff --git a/components/game/small/GameResultSmallTeam.tsx b/components/game/small/GameResultSmallTeam.tsx
@@ -12,22 +12,18 @@ export default function GameResultSmallTeam({
   position,
 }: GameResultSmallTeamProps) {
   return (
-    <div className={styles.smallTeam}>
-      <div className={styles[position]}>
-        {team.players.map((player, index) => (
-          <PlayerImage
-            key={index}
-            src={player.userImageUri}
-            styleName={'gameResultSmall' + position}
-            size={20}
-          />
-        ))}
-        <span>
-          {team.players.map((player) => (
-            <div key={player.intraId}>{player.intraId}</div>
-          ))}
-        </span>
-      </div>
+    <div className={`${styles['smallTeam']} ${styles[position]}`}>
+      {team.players.map((player, index) => (
+        <PlayerImage
+          key={index}
+          src={player.userImageUri}
+          styleName={'gameResultSmall'}
+          size={20}
+        />
+      ))}
+      {team.players.map((player) => (
+        <span key={player.intraId}>{player.intraId}</span>
+      ))}
     </div>
   );
 }
diff --git a/components/main/Section.tsx b/components/main/Section.tsx
@@ -1,26 +1,34 @@
-import Link from 'next/link';
 import React from 'react';
+import { useRouter } from 'next/router';
+import { FaChevronRight } from 'react-icons/fa';
 import GameResult from 'components/game/GameResult';
 import RankList from 'components/rank/RankList';
 import styles from 'styles/main/Section.module.scss';
 
 type SectionProps = {
+  sectionTitle: string;
   path: string;
 };
 
 type pathType = {
   [key: string]: JSX.Element;
 };
 
-export default function xSection({ path }: SectionProps) {
+export default function Section({ sectionTitle, path }: SectionProps) {
+  const router = useRouter();
   const pathCheck: pathType = {
     game: <GameResult />,
     rank: <RankList toggleMode={'rank'} isMain={true} />,
   };
 
   return (
-    <div className={styles.sectionWrap}>
-      <Link href={`/${path}`}>더보기 &#9657;</Link>
+    <div className={styles['sectionWrap']}>
+      <div className={styles['titleWrap']}>
+        <span>{sectionTitle}</span>
+        <button onClick={() => router.push(`/${path}`)}>
+          <FaChevronRight />
+        </button>
+      </div>
       <section>{pathCheck[path]}</section>
     </div>
   );

diff --git a/components/mode/modeItems/ModeRadiobox.tsx b/components/mode/modeItems/ModeRadiobox.tsx
@@ -4,17 +4,25 @@ import styles from 'styles/mode/ModeRadiobox.module.scss';
 interface ModeRadioboxProps {
   mode: SeasonMode;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  zIndexList?: boolean;
 }
 
-export default function ModeRadiobox({ mode, onChange }: ModeRadioboxProps) {
+export default function ModeRadiobox({
+  mode,
+  onChange,
+  zIndexList,
+}: ModeRadioboxProps) {
   const modes: { type: SeasonMode; name: string }[] = [
     { type: 'BOTH', name: '전체' },
     { type: 'NORMAL', name: '일반' },
     { type: 'RANK', name: '랭크' },
   ];
 
   return (
-    <div className={styles.modeButtons}>
+    <div
+      className={`${styles.modeButtons} 
+      ${zIndexList && styles['zIndexListButton']}`}
+    >
       {modes.map(({ type, name }) => (
         <label key={type} htmlFor={type}>
           <input
@@ -24,7 +32,9 @@ export default function ModeRadiobox({ mode, onChange }: ModeRadioboxProps) {
             onChange={onChange}
             checked={mode === type}
           />
-          <div className={styles.modeButton}>{name}</div>
+          <div className={`${styles.modeButton} ${styles[mode.toLowerCase()]}`}>
+            {name}
+          </div>
         </label>
       ))}
     </div>