Fix#397 페이지 리뉴얼을 위한 모달창 추가

[toothlessdev]

✅ Linked Issue

• resolve [✍️ 기능 변경 요청] 모의수능 재단장을 위한 모달창 추가 #397

Summary by CodeRabbit

• New Features

  • Added an in-app notice overlay with important information and links.
  • Re-enabled competition ranking sections, showing top 3 schools and full rankings.

• Bug Fixes

  • Prevented errors when fewer than three schools are available by conditionally rendering rank badges.

• Style

  • Updated rank badge visuals to use images with improved responsive scaling for better display.

• Content

  • Removed outdated D-day promo in the competition footer and restored the share-focused title and CTAs.

[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 15, 2025 3:58pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Replaced RankBadge SVG usage with Next.js Image and updated corresponding SCSS selectors and scaling. Enabled rank sections on the competition page with computed top3Schools/topRatedSchools props. Added an informational overlay in _app. Adjusted footer content by removing the D-day promo. Made RankListSection badges render conditionally.

Changes

Cohort / File(s)	Summary
RankBadge Image Swap mosu-app/src/features/competition/components/RankBadge/RankBadge.tsx, .../RankBadge/RankBadge.module.scss	Switched decorative SVG component to Next.js Image; updated SCSS selectors from svg to img; adjusted responsive scales (0.75/0.5 → 0.9/0.7); maintained data-rank-based styling.
Competition Page Wiring mosu-app/src/pages/events/competition/index.tsx, mosu-app/src/widgets/competition/RankListSection.tsx	Re-enabled RankListSection/RankTableSection; getStaticProps now returns top3Schools and topRatedSchools; component props updated; added conditional rendering for top3 badges and a debug log.
Global Overlay Introduction mosu-app/src/pages/_app.tsx	Imported and invoked useOverlay; defined Korean notice content; rendered overlay within BannerProvider.
Footer Content Update mosu-app/src/widgets/competition/FooterSection.tsx	Removed D-day promo block; re-enabled title block; CTAs unchanged.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant App as _app.tsx
  participant Overlay as useOverlay Hook
  participant UI as BannerProvider

  User->>App: Load application
  App->>Overlay: useOverlay({ title: "안내사항", initialOpen: true })
  Overlay-->>App: renderOverlay(content)
  App->>UI: Render layout
  App->>UI: renderOverlay(overlayContent)
  UI-->>User: Overlay displayed

Loading

sequenceDiagram
  autonumber
  participant SSG as getStaticProps
  participant Page as Competition Page
  participant RankList as RankListSection
  participant RankTable as RankTableSection
  Note over SSG: Compute topRatedSchools<br/>Derive top3Schools

  SSG-->>Page: props { top3Schools, topRatedSchools }
  Page->>RankList: top3Schools
  alt For each index 0..2
    RankList->>RankList: Conditionally render RankBadge if exists
  end
  Page->>RankTable: topRatedSchools

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• Feature#388 실시간 순위 발표 및 공유 안내 추가 #395: Touches the same competition page and footer with opposing edits (sections vs D-day promo).
• Fix#388 topRatedSchools 정렬 로직 추가 #390: Modifies getStaticProps sorting impacting topRatedSchools/top3 extraction on the same page.
• Feature#379 메인페이지 제휴사 캐러셀 이미지 변경 #380: Alters/affects the useOverlay implementation used by _app.tsx in this PR.

Suggested labels

기능 구현, 도메인 : 이벤트, 도메인 : 공통

Suggested reviewers

• kimgho

Poem

A rabbit hops through ranks of three,
Polishes badges, bright to see.
An overlay moon, a gentle glow,
Shares the news before we go.
Tables set, the scores align—
Click, share, cheer—everything’s fine!
(_/) ⭐🥕

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix#397

---

📜 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 3f8db29 and 5f5c700.

📒 Files selected for processing (6)

• mosu-app/src/features/competition/components/RankBadge/RankBadge.module.scss (1 hunks)
• mosu-app/src/features/competition/components/RankBadge/RankBadge.tsx (1 hunks)
• mosu-app/src/pages/_app.tsx (2 hunks)
• mosu-app/src/pages/events/competition/index.tsx (3 hunks)
• mosu-app/src/widgets/competition/FooterSection.tsx (1 hunks)
• mosu-app/src/widgets/competition/RankListSection.tsx (2 hunks)

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

---

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가 지정되어 있지 않습니다. 리뷰어를 지정해주세요.
⚠️	PR에 라벨이 지정되어 있지 않습니다. 적절한 라벨을 추가해주세요.

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

📝 추가 및 변경된 파일

총 6개 파일 변경

└── 📂 mosu-app/
    └── 📂 src/
        ├── 📂 features/
        │   └── 📂 competition/
        │       └── 📂 components/
        │           └── 📂 RankBadge/
        │               ├── 📄 RankBadge.module.scss
        │               └── ⚛️ RankBadge.tsx
        ├── 📂 pages/
        │   ├── ⚛️ _app.tsx
        │   └── 📂 events/
        │       └── 📂 competition/
        │           └── ⚛️ index.tsx
        └── 📂 widgets/
            └── 📂 competition/
                ├── ⚛️ FooterSection.tsx
                └── ⚛️ RankListSection.tsx

Generated by 🚫 dangerJS against 5f5c700

[github-actions]

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

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