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

[toothlessdev]

✅ Linked Issue

• [✨ 기능 요청] 학교대항전 이벤트 페이지 구현 #388

Summary by CodeRabbit

• New Features

  • Rank table now shows the gap to the previous rank with a clear numeric indicator for easier comparison.
  • Top 3 schools are highlighted consistently across sections for quicker recognition.

• Style

  • Updated reward copy for ranks 6–10 to “전원 치킨 기프티콘” for clearer messaging.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
mosu-client	Building	Preview	Comment	Sep 8, 2025 5:33pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Precomputed and exposed top3Schools and sorted topRatedSchools in getStaticProps. Updated page props accordingly. RankTableSection now computes prevRank and gap numerically per row and passes them to RankTableRow. RankTableRow’s API changed from gapMessage to prevRank and gap, altering the last cell rendering. Minor text tweak in InfoSection.

Changes

Cohort / File(s)	Summary
Competition page data flow mosu-app/src/pages/events/competition/index.tsx	getStaticProps sorts topRatedSchools, derives top3Schools, and returns both. Page component signature updated to accept { top3Schools, topRatedSchools }. Wiring to RankListSection and RankTableSection adjusted.
Rank table API and rendering mosu-app/src/widgets/competition/RankTableRow.tsx, mosu-app/src/widgets/competition/RankTableSection.tsx	RankTableRowProps changed: removed gapMessage?: string; added prevRank: number, gap: number. RankTableRow now renders "{prevRank}등까지" and a colored gap count. RankTableSection computes prevRank and gap per row (first row defaults to 0) and passes them to RankTableRow.
Info section copy update mosu-app/src/widgets/competition/InfoSection.tsx	Updated the 6~10위 RankInfoCard descriptions from ["도시락은", "모수가 쏩니다!"] to ["전원 치킨", "기프티콘"].

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Next.js as Next.js (build)
  participant Page as SchoolCompetitionPage
  participant RankList as RankListSection
  participant RankTable as RankTableSection
  participant Row as RankTableRow

  Next.js->>Next.js: getStaticProps()\n- sort topRatedSchools\n- derive top3Schools
  Next.js-->>Page: props { top3Schools, topRatedSchools }
  User->>Page: Request /events/competition
  Page->>RankList: props { top3Schools }
  Page->>RankTable: props { topRatedSchools }
  loop for each school (i)
    RankTable->>Row: props { rank=i+1, schoolName, prevRank=i, gap=diff vs prev }
    Row-->>RankTable: render row with "{prevRank}등까지" and gap
  end
  RankTable-->>Page: table rendered
  Page-->>User: HTML

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

I thump my paws—new ranks arrayed,
Top three plucked where stars are weighed.
Gaps now counted, crisp and clear,
Numbers hop from row to peer.
A cheeky cluck, a gift appears—
Chicken cheers for trailing tiers!
Onward, code—no bugs to fear. 🐇✨

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f5b5372 and b9133b1.

📒 Files selected for processing (4)

• mosu-app/src/pages/events/competition/index.tsx (1 hunks)
• mosu-app/src/widgets/competition/InfoSection.tsx (1 hunks)
• mosu-app/src/widgets/competition/RankTableRow.tsx (1 hunks)
• mosu-app/src/widgets/competition/RankTableSection.tsx (1 hunks)

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature#388

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

	Warnings
⚠️	PR에 Reviewers가 지정되어 있지 않습니다. 리뷰어를 지정해주세요.

	Messages
📖	✅ PR 제목에 이슈 번호가 포함되어 있습니다.
📖	✅ PR에 라벨이 지정되어 있습니다.
📖	✅ PR에 Assignees가 지정되어 있습니다.
📖	✅ package.json에 변경사항이 없습니다.
📖	✅ 브랜치 이름 'feature#388'이 컨벤션을 따릅니다.
📖	✅ TypeScript 컴파일이 성공적으로 완료되었습니다.
📖	✅ ESLint 검사 결과 문제가 없습니다.

📝 추가 및 변경된 파일

총 4개 파일 변경

└── 📂 mosu-app/
    └── 📂 src/
        ├── 📂 pages/
        │   └── 📂 events/
        │       └── 📂 competition/
        │           └── ⚛️ index.tsx
        └── 📂 widgets/
            └── 📂 competition/
                ├── ⚛️ InfoSection.tsx
                ├── ⚛️ RankTableRow.tsx
                └── ⚛️ RankTableSection.tsx

Generated by 🚫 dangerJS against b9133b1

[github-actions]

📚 Storybook이 Chromatic에 배포되었습니다!

• 🔗 Storybook Preview: https://www.chromatic.com/build?appId=68627ee20725077171386a15&number=229
• 🚀 Chromatic Build: https://www.chromatic.com/build?appId=68627ee20725077171386a15&number=229