Merge pull request #391 from mosu-dev/feature#388

Fix#388 학교 경쟁 페이지 및 순위 테이블 스타일 변경

Author: toothlessdev

mosu-app/src/pages/events/competition/index.tsx

@@ -13,17 +13,22 @@ import { RankTableSection } from "@/widgets/competition/RankTableSection";
 export const getStaticProps = async () => {
     const topRatedSchools = await getTopRatedSchools();
 
+    const sortedTopRatedSchools = topRatedSchools.sort((e1, e2) => e2.paidApplicationCount - e1.paidApplicationCount);
+    const top3Schools = sortedTopRatedSchools.slice(0, 3).map((school) => school.schoolName);
+
     return {
         props: {
-            topRatedSchools: topRatedSchools.sort((e1, e2) => e2.paidApplicationCount - e1.paidApplicationCount),
+            top3Schools,
+            topRatedSchools: sortedTopRatedSchools,
         },
         revalidate: 3600, // 1 hour
     };
 };
 
-export default function SchoolCompetitionPage({ topRatedSchools }: InferGetStaticPropsType<typeof getStaticProps>) {
-    const top3Schools = topRatedSchools.slice(0, 3).map((school) => school.schoolName);
-
+export default function SchoolCompetitionPage({
+    top3Schools,
+    topRatedSchools,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
     return (
         <main>
             <SiteMetadata

mosu-app/src/widgets/competition/InfoSection.tsx

@@ -39,7 +39,7 @@ export const InfoSection = () => {
                 <RankInfoCard
                     imgSrc={imgRank3}
                     rank={"6~10위"}
-                    descriptions={["도시락은", "모수가 쏩니다!"]}
+                    descriptions={["전원 치킨", "기프티콘"]}
                     value={"0"}
                     delimiter={"원"}
                 />

mosu-app/src/widgets/competition/RankTableRow.tsx

@@ -1,15 +1,20 @@
 export interface RankTableRowProps {
     rank: number;
     schoolName: string;
-    gapMessage?: string;
+
+    prevRank: number;
+    gap: number;
 }
 
-export const RankTableRow = ({ rank, schoolName, gapMessage }: RankTableRowProps) => {
+export const RankTableRow = ({ rank, schoolName, prevRank, gap }: RankTableRowProps) => {
     return (
         <tr>
             <td>{rank}</td>
             <td>{schoolName}</td>
-            <td>{gapMessage || ""}</td>
+            <td>
+                {prevRank}등까지
+                <span className="color-[#7C9FFF]">{gap}</span>명
+            </td>
         </tr>
     );
 };

mosu-app/src/widgets/competition/RankTableSection.tsx

@@ -20,20 +20,22 @@ export const RankTableSection = ({ topRatedSchools }: RankTableSectionProps) =>
                 </thead>
                 <tbody>
                     {topRatedSchools.map((school, index) => {
-                        let gapMessage = "";
+                        let prevRank = 0;
+                        let gap = 0;
+
                         if (index > 0) {
                             const prevSchoolCount = topRatedSchools[index - 1].paidApplicationCount;
-                            const gap = prevSchoolCount - school.paidApplicationCount;
-                            const prevRank = index;
-                            gapMessage = `${prevRank}등까지 ${gap}명`;
+                            gap = prevSchoolCount - school.paidApplicationCount;
+                            prevRank = index;
                         }
 
                         return (
                             <RankTableRow
                                 key={school.schoolName}
                                 rank={index + 1}
                                 schoolName={school.schoolName}
-                                gapMessage={gapMessage}
+                                prevRank={prevRank}
+                                gap={gap}
                             />
                         );
                     })}