[GGFE-44] Style Rank Trophy

components/main/Section.tsx

@@ -15,7 +15,7 @@ type pathType = {
 export default function xSection({ path }: SectionProps) {
   const pathCheck: pathType = {
     game: <GameResult />,
-    rank: <RankList toggleMode={'rank'} isMain={true} />,
+    rank: <RankList toggleMode={'RANK'} isMain={true} />,
   };
 
   return (

components/mode/modeItems/ModeToggle.tsx

@@ -2,17 +2,11 @@ import styles from 'styles/mode/ModeToggle.module.scss';
 
 interface ModeToggleProps {
   id: string;
-  text: string;
   checked: boolean;
   onToggle: () => void;
 }
 
-export default function ModeToggle({
-  id,
-  text,
-  checked,
-  onToggle,
-}: ModeToggleProps) {
+export default function ModeToggle({ id, checked, onToggle }: ModeToggleProps) {
   return (
     <div>
       <input
@@ -24,7 +18,7 @@ export default function ModeToggle({
         hidden
       />
       <label htmlFor={id} className={styles.toggleSwitch}>
-        <span className={styles.toggleText}>{text}</span>
+        <span className={styles.toggleText}></span>
         <span className={styles.toggleButton}></span>
       </label>
     </div>

components/mode/modeWraps/RankModeWrap.tsx

@@ -12,14 +12,9 @@ interface RankModeWrapProps {
 }
 
 export default function RankModeWrap({ children, setMode }: RankModeWrapProps) {
-  const { seasonList, season, seasonDropDownHandler, seasonMode } =
-    useSeasonDropDown();
-  const { onToggle, Mode } = useModeToggle(
-    seasonMode === 'NORMAL' ? 'NORMAL' : 'RANK'
-  );
-  const [showSeasons, setShowSeasons] = useState<boolean>(
-    seasonMode !== 'NORMAL'
-  );
+  const { seasonList, season, seasonDropDownHandler } = useSeasonDropDown();
+  const { onToggle, Mode } = useModeToggle('RANK');
+  const [showSeasons, setShowSeasons] = useState<boolean>(true);
 
   useEffect(() => {
     setShowSeasons(Mode === 'RANK');
@@ -32,7 +27,6 @@ export default function RankModeWrap({ children, setMode }: RankModeWrapProps) {
         <ModeToggle
           checked={Mode === 'RANK'}
           onToggle={onToggle}
-          text={Mode === 'RANK' ? '랭크' : '열정'}
           id={'rankToggle'}
         />
         {showSeasons && seasonList && (

components/rank/MyRank.tsx

@@ -3,27 +3,24 @@ import { myRankState, scrollState } from 'utils/recoil/myRank';
 import styles from 'styles/rank/RankList.module.scss';
 import { ToggleMode } from 'types/rankTypes';
 
-export default function MyRank(toggleMode: ToggleMode) {
+interface MyRankProp {
+  toggleMode: ToggleMode;
+}
+
+export default function MyRank(prop: MyRankProp) {
+  const { toggleMode } = prop;
   const myRank = useRecoilValue(myRankState);
   const setIsScroll = useSetRecoilState(scrollState);
-  const rankType = toggleMode === 'RANK' ? '랭크' : '열정';
+  const rankType = toggleMode === 'RANK' ? 'rank' : 'vip';
   const isRanked = myRank[toggleMode] === -1 ? 'unrank' : 'RANK';
   const content = {
     unrank: {
       style: '',
-      message: [
-        `💡 나의 ${
-          rankType + (toggleMode === 'RANK' ? '가' : '이')
-        } 정해지지 않았습니다 💡`,
-      ],
+      message: [`My ${rankType}:`, ` ---`],
     },
     RANK: {
       style: styles.rank,
-      message: [
-        `🚀🚀 나의 ${rankType}`,
-        ` ${myRank[toggleMode]}위`,
-        ' 바로가기 🚀🚀',
-      ],
+      message: [`My ${rankType}:`, ` ${myRank[toggleMode]}`],
     },
   };
 

components/rank/RankList.tsx

@@ -1,22 +1,22 @@
-import { useState } from 'react';
-import { RankUser, NormalUser, Rank, ToggleMode } from 'types/rankTypes';
+import React, { useState, createContext } from 'react';
+import { RankUser, NormalUser, Rank } from 'types/rankTypes';
 import RankListMain from './topRank/RankListMain';
 import RankListFrame from './RankListFrame';
 import RankListItem from './RankListItem';
 import useRankList from 'hooks/rank/useRankList';
+import { ToggleMode } from 'types/rankTypes';
 
 interface RankListProps {
   toggleMode: ToggleMode;
   season?: number;
   isMain?: boolean;
 }
-export default function RankList({
-  toggleMode,
-  season,
-  isMain = false,
-}: RankListProps) {
-  const seasonMode = 'RANK';
+export const ToggleModeContext = createContext<'RANK' | 'NORMAL'>('RANK');
+
+export default function RankList(prop: RankListProps) {
+  const { toggleMode, season, isMain } = prop;
   const [rank, setRank] = useState<Rank>();
+  const [ranker, setRanker] = useState<Rank>();
   const [page, setPage] = useState<number>(1);
   const pageInfo = {
     currentPage: rank?.currentPage,
@@ -29,33 +29,49 @@ export default function RankList({
       targetMode !== 'NORMAL' ? 'ranks/single' : 'exp';
     const seasonQuery = toggleMode === 'RANK' ? `&season=${season}` : '';
     return isMain
-      ? `/pingpong/${modeQuery(seasonMode)}?page=1&size=3`
-      : `/pingpong/${modeQuery(toggleMode)}?page=${page}${seasonQuery}`;
+      ? `/pingpong/${modeQuery(toggleMode)}?page=1&size=3`
+      : `/pingpong/${modeQuery(toggleMode)}?page=${page}&size=20${seasonQuery}`;
+  };
+  const makePathRanker = (): string => {
+    const modeQuery = (targetMode?: string) =>
+      targetMode !== 'NORMAL' ? 'ranks/single' : 'exp';
+    const seasonQuery = toggleMode === 'RANK' ? `&season=${season}` : '';
+    return isMain
+      ? `/pingpong/${modeQuery(toggleMode)}?page=1&size=3`
+      : `/pingpong/${modeQuery(toggleMode)}?page=1&size=3${seasonQuery}`;
   };
 
   useRankList({
     makePath: makePath(),
+    makePathRanker: makePathRanker(),
     toggleMode: toggleMode,
     season: season,
     setRank: setRank,
+    setRanker: setRanker,
     page: page,
     setPage: setPage,
     pageInfo: pageInfo,
   });
 
-  if (isMain) return <RankListMain rank={rank} />;
+  if (isMain) {
+    return <RankListMain rank={ranker} isMain={true} />;
+  }
 
   return (
-    <RankListFrame toggleMode={toggleMode} pageInfo={pageInfo}>
-      {rank?.rankList.map((item: NormalUser | RankUser, index) => (
-        <RankListItem
-          key={index}
-          index={index}
-          toggleMode={toggleMode}
-          user={makeUser(item)}
-        />
-      ))}
-    </RankListFrame>
+    <ToggleModeContext.Provider value={toggleMode}>
+      <div>
+        <RankListMain rank={ranker} isMain={false} />
+        <RankListFrame toggleMode={toggleMode} pageInfo={pageInfo}>
+          {rank?.rankList.map((item: NormalUser | RankUser, index) => (
+            <RankListItem
+              key={index}
+              toggleMode={toggleMode}
+              user={makeUser(item)}
+            />
+          ))}
+        </RankListFrame>
+      </div>
+    </ToggleModeContext.Provider>
   );
 }
 

components/rank/RankListItem.tsx

@@ -13,24 +13,22 @@ interface User {
 }
 
 interface RankListItemProps {
-  index: number;
   user: User;
   toggleMode: ToggleMode;
 }
 
-export default function RankListItem({
-  index,
-  user,
-  toggleMode,
-}: RankListItemProps) {
+export default function RankListItem({ user, toggleMode }: RankListItemProps) {
   const { rank, intraId, statusMessage, point, level } = user;
   const myIntraId = useRecoilValue(userState).intraId;
   const wrapStyle = {
-    evenOdd: index % 2 === 0 ? styles.even : styles.odd,
     topStandard: rank < 4 ? styles.top : styles.standard,
+    rankItem: {
+      RANK: styles.Ranking,
+      NORMAL: styles.Vip,
+    },
     myRankItem: {
-      rank: intraId === myIntraId && level === null ? styles.myRanking : '',
-      normal: intraId === myIntraId && level !== null ? styles.myVip : '',
+      RANK: intraId === myIntraId && level === null ? styles.myRanking : '',
+      NORMAL: intraId === myIntraId && level !== null ? styles.myVip : '',
     },
   };
 
@@ -45,8 +43,8 @@ export default function RankListItem({
 
   return (
     <div
-      className={`${styles.rankItemWrap} ${wrapStyle.evenOdd}
-			${wrapStyle.topStandard} ${wrapStyle.myRankItem[toggleMode]}`}
+      className={`${styles.rankItemWrap} ${wrapStyle.topStandard}
+        ${wrapStyle.myRankItem[toggleMode]} ${wrapStyle.rankItem[toggleMode]}`}
     >
       {rank}
       <div className={styles.intraId}>{makeIntraIdLink()}</div>

components/rank/topRank/RankListItemMain.tsx

@@ -1,35 +1,57 @@
 import Link from 'next/link';
+import React, { useContext } from 'react';
 import { RankUser, NormalUser } from 'types/rankTypes';
 import styles from 'styles/rank/RankListMain.module.scss';
-
+import PlayerImage from 'components/PlayerImage';
+import { ToggleModeContext } from '../RankList';
 interface RankListItemMainProps {
   user: NormalUser | RankUser;
-  isSeasonNormal: boolean;
 }
 
-export default function RankListItemMain({
-  user,
-  isSeasonNormal,
-}: RankListItemMainProps) {
-  const { rank, intraId, statusMessage } = user;
-  const messageFiltered =
-    statusMessage.length > 10
-      ? statusMessage.slice(0, 10) + '...'
-      : statusMessage;
+export default function RankListItemMain({ user }: RankListItemMainProps) {
+  const { rank, intraId, userImageUri } = user;
   const rankFiltered = rank < 0 ? '-' : rank;
+  const toggleMode = useContext(ToggleModeContext);
 
   return (
     <div
-      className={`${styles.mainData}
-			${isSeasonNormal && styles.normal}`}
+      className={`${styles.mainData} ${
+        toggleMode === 'NORMAL' && styles.normal
+      }`}
     >
-      <div className={styles.rankNumber}>{rankFiltered}</div>
-      <div className={styles.intraId}>
-        <Link href={`users/detail?intraId=${intraId}`}>
-          <span>{intraId}</span>
-        </Link>
+      <div
+        className={`${rank === 1 ? styles.leaf : ''} ${
+          toggleMode === 'NORMAL' && styles.normal
+        }`}
+      >
+        <div
+          className={`${rank === 1 ? styles.leaf1 : ''} ${
+            toggleMode === 'NORMAL' && styles.normal
+          }`}
+        >
+          <div className={`${styles.intraId} ${rank === 1 && styles.first}`}>
+            <Link href={`users/detail?intraId=${intraId}`}>
+              <PlayerImage
+                src={userImageUri}
+                styleName={rank === 1 ? 'ranktropybig' : 'ranktropy'}
+                size={50}
+              />
+              <span>{intraId}</span>
+            </Link>
+          </div>
+          <div
+            className={`${
+              rank === 1
+                ? styles.rankNumber1
+                : rank === 2
+                ? styles.rankNumber2
+                : styles.rankNumber3
+            } ${toggleMode === 'NORMAL' && styles.normal}`}
+          >
+            {rankFiltered}
+          </div>
+        </div>
       </div>
-      <div className={styles.statusMessage}>{messageFiltered}</div>
     </div>
   );
 }

components/rank/topRank/RankListMain.tsx

@@ -1,32 +1,27 @@
 import { RankUser, NormalUser, Rank } from 'types/rankTypes';
 import RankListItemMain from './RankListItemMain';
 import styles from 'styles/rank/RankListMain.module.scss';
-
 interface RankListMainProps {
   rank?: Rank;
+  isMain: boolean;
 }
 
-export default function RankListMain({ rank }: RankListMainProps) {
-  //const isNormalSeason = seasonMode === 'normal';
-  const isNormalSeason = false;
-  const content = {
-    normal: { style: styles.normal, title: 'VIP' },
-    rank: { style: '', title: 'Champion' },
-    both: { style: '', title: 'Champion' },
-  };
+export default function RankListMain({ rank, isMain }: RankListMainProps) {
+  const bangElements = Array.from({ length: 5 }, (_, index) => (
+    <div
+      key={index}
+      className={`${rank?.rankList[1].rank === 1 && !isMain && styles.bang}`}
+    />
+  ));
 
   return (
-    <div className={styles.mainContainer}>
-      <div className={`${styles.title} ${content.rank.style}`}>
-        {content.rank.title}
+    <div>
+      <div className={`${styles.bangContainer}`}>{bangElements}</div>
+      <div className={`${styles.mainContainer} ${isMain && styles.isMain}`}>
+        {rank?.rankList.map((item: NormalUser | RankUser) => (
+          <RankListItemMain key={item.intraId} user={item} />
+        ))}
       </div>
-      {rank?.rankList.map((item: NormalUser | RankUser) => (
-        <RankListItemMain
-          key={item.intraId}
-          user={item}
-          isSeasonNormal={isNormalSeason}
-        />
-      ))}
     </div>
   );
 }