Feature#388 학교대항전 이벤트 페이지 구현

[toothlessdev]

✅ Linked Issue

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

Summary by CodeRabbit

• New Features

  • Introduced a new “학교대항전” competition page with hero, prize info cards, and a responsive layout.
  • Displays live top 3 badges and a full ranking table; rankings refresh hourly.
  • Added sharing: share via Kakao or auto-copy the event link if unavailable.
  • Included clear CTAs to apply and detailed participation notes.

• Style

  • New visual design elements: gradients, responsive typography, and rank-specific badges.

• Chores

  • Enabled importing SVGs as React components for sharper visuals.

[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:02pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Adds a new “학교대항전” event page with SSG data from a new service, multiple UI sections/components (hero, info, rank badges/cards, rank list/table, footer), Kakao Share integration via a new useScript hook and Kakao SDK typings, plus build config to support SVGR.

Changes

Cohort / File(s)	Summary
Build tooling: SVGR support mosu-app/next.config.ts, mosu-app/package.json	Adds Webpack rule to process .svg via @svgr/webpack and adds it as a devDependency.
Kakao SDK typing + script loader hook mosu-app/src/@types/kakao.d.ts, mosu-app/src/shared/hooks/useScript.ts	Introduces TypeScript declarations for Kakao JS SDK and a React hook to inject external scripts with load/error handling.
Competition page: SSG and layout composition mosu-app/src/pages/events/competition/index.tsx	New Next.js page using getStaticProps to fetch top-rated schools, composes Hero, Info, RankList, RankTable, and Footer sections.
Data service: top-rated schools mosu-app/src/features/competition/services/getTopRatedSchools.ts	Adds API call to /applications/schools/paid-count, returns parsed data with Axios error adaptation.
Rank badge component mosu-app/src/features/competition/components/RankBadge/RankBadge.tsx, .../RankBadge.module.scss, .../RankBadge/index.tsx	New badge UI with rank-specific styling and decorative SVGs; exports component and props.
Rank info card component mosu-app/src/features/competition/components/RankInfoCard/RankInfoCard.tsx, .../RankInfoCard.module.scss, .../RankInfoCard/index.tsx	Adds card UI describing rewards per rank; exports component and props.
Hero section mosu-app/src/widgets/competition/HeroSection.tsx, .../HeroSection.module.scss	Static hero section with responsive image styling.
Info section mosu-app/src/widgets/competition/InfoSection.tsx, .../InfoSection.module.scss	Renders event info, banner, and three RankInfoCards with assets.
Rank list section (Top 3) mosu-app/src/widgets/competition/RankListSection.tsx, .../RankListSection.module.scss	Displays top 3 schools using RankBadge; no bounds checks on array indices.
Rank table section mosu-app/src/widgets/competition/RankTableSection.tsx, .../RankTableSection.module.scss, .../RankTableRow.tsx	Renders table of schools with gap-to-previous metric; includes row subcomponent.
Footer section with share mosu-app/src/widgets/competition/FooterSection.tsx, .../FooterSection.module.scss	Footer UI with CTA buttons and Kakao share integration; clipboard fallback if Kakao not ready.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant User
  participant Next.js as Next.js (Build)
  participant Service as getTopRatedSchools
  participant API as Backend API

  Note over Next.js: Static Generation (at build/time-based revalidate)
  Next.js->>Service: getTopRatedSchools()
  Service->>API: GET /applications/schools/paid-count
  API-->>Service: BaseResponse<[{ schoolName, paidApplicationCount }...]>
  Service-->>Next.js: data (array)
  Next.js-->>User: Pre-rendered page (props: topRatedSchools)

  Note over User,Next.js: Client render of Hero/Info/RankList/RankTable/Footer

Loading

sequenceDiagram
  autonumber
  participant User
  participant Footer as FooterSection
  participant Hook as useScript
  participant Kakao as Kakao JS SDK

  Footer->>Hook: Load kakao.min.js (async)
  Hook-->>Footer: onLoad -> window.Kakao.init(KEY)

  User->>Footer: Click "친구에게 공유"
  alt Kakao ready
    Footer->>Kakao: Share.sendCustom({ templateId: 124102 })
    Kakao-->>Footer: Share dialog flow
  else Kakao not ready
    Footer->>User: Clipboard write of page URL + alert
  end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Assessment against linked issues

Objective	Addressed	Explanation
Implement competition event page with sections and styling (#388)	✅
Fetch and display top-rated schools with SSG (#388)	✅
Show Top 3 highlight and full ranking with gap metric (#388)	✅
Integrate share functionality (Kakao) with fallback (#388)	✅

Assessment against linked issues: Out-of-scope changes

Code Change	Explanation
Add SVGR Webpack rule (mosu-app/next.config.ts)	No SVG component imports added in this PR; relevance to the event page not evident. Possibly preparatory but not tied to stated objective.
Add devDependency @svgr/webpack (mosu-app/package.json)	Supports the SVGR rule above; utility not exercised by the implemented features in this PR.

Poem

I twitch my ears at rankings bright,
Three schools hop into the light—
Numbers dance, the tables sing,
Share with friends—let trophies ring! 🏆
With scripts in tow and badges new,
We bound ahead—first place, woo! 🐇✨

---

📜 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 e07913c and 10ae5b2.

⛔ Files ignored due to path filters (6)

• mosu-app/src/features/competition/assets/img-award-1th.png is excluded by !**/*.png
• mosu-app/src/features/competition/assets/img-award-2nd.png is excluded by !**/*.png
• mosu-app/src/features/competition/assets/img-award-3rd.png is excluded by !**/*.png
• mosu-app/src/features/competition/assets/img-award-decorator.svg is excluded by !**/*.svg
• mosu-app/src/features/competition/assets/img-hero.png is excluded by !**/*.png
• mosu-app/src/features/competition/assets/img-particle.png is excluded by !**/*.png

📒 Files selected for processing (23)

• mosu-app/next.config.ts (1 hunks)
• mosu-app/package.json (1 hunks)
• mosu-app/src/@types/kakao.d.ts (1 hunks)
• 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/features/competition/components/RankBadge/index.tsx (1 hunks)
• mosu-app/src/features/competition/components/RankInfoCard/RankInfoCard.module.scss (1 hunks)
• mosu-app/src/features/competition/components/RankInfoCard/RankInfoCard.tsx (1 hunks)
• mosu-app/src/features/competition/components/RankInfoCard/index.tsx (1 hunks)
• mosu-app/src/features/competition/services/getTopRatedSchools.ts (1 hunks)
• mosu-app/src/pages/events/competition/index.tsx (1 hunks)
• mosu-app/src/shared/hooks/useScript.ts (1 hunks)
• mosu-app/src/widgets/competition/FooterSection.module.scss (1 hunks)
• mosu-app/src/widgets/competition/FooterSection.tsx (1 hunks)
• mosu-app/src/widgets/competition/HeroSection.module.scss (1 hunks)
• mosu-app/src/widgets/competition/HeroSection.tsx (1 hunks)
• mosu-app/src/widgets/competition/InfoSection.module.scss (1 hunks)
• mosu-app/src/widgets/competition/InfoSection.tsx (1 hunks)
• mosu-app/src/widgets/competition/RankListSection.module.scss (1 hunks)
• mosu-app/src/widgets/competition/RankListSection.tsx (1 hunks)
• mosu-app/src/widgets/competition/RankTableRow.tsx (1 hunks)
• mosu-app/src/widgets/competition/RankTableSection.module.scss (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
⚠️	package.json이 변경되었습니다. 새로운 의존성이 추가되었다면 필요성을 설명해주세요.

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

📦 Package 변경사항

• mosu-app/package.json

📝 추가 및 변경된 파일

총 29개 파일 변경

└── 📂 mosu-app/
    ├── 📘 next.config.ts
    ├── 📋 package.json
    └── 📂 src/
        ├── 📂 @types/
        │   └── 📘 kakao.d.ts
        ├── 📂 features/
        │   └── 📂 competition/
        │       ├── 📂 assets/
        │       │   ├── 🖼️ img-award-1th.png
        │       │   ├── 🖼️ img-award-2nd.png
        │       │   ├── 🖼️ img-award-3rd.png
        │       │   ├── 🖼️ img-award-decorator.svg
        │       │   ├── 🖼️ img-hero.png
        │       │   └── 🖼️ img-particle.png
        │       ├── 📂 components/
        │       │   ├── 📂 RankBadge/
        │       │   │   ├── 📄 RankBadge.module.scss
        │       │   │   ├── ⚛️ RankBadge.tsx
        │       │   │   └── ⚛️ index.tsx
        │       │   └── 📂 RankInfoCard/
        │       │       ├── 📄 RankInfoCard.module.scss
        │       │       ├── ⚛️ RankInfoCard.tsx
        │       │       └── ⚛️ index.tsx
        │       └── 📂 services/
        │           └── 📘 getTopRatedSchools.ts
        ├── 📂 pages/
        │   └── 📂 events/
        │       └── 📂 competition/
        │           └── ⚛️ index.tsx
        ├── 📂 shared/
        │   └── 📂 hooks/
        │       └── 📘 useScript.ts
        └── 📂 widgets/
            └── 📂 competition/
                ├── 📄 FooterSection.module.scss
                ├── ⚛️ FooterSection.tsx
                ├── 📄 HeroSection.module.scss
                ├── ⚛️ HeroSection.tsx
                ├── 📄 InfoSection.module.scss
                ├── ⚛️ InfoSection.tsx
                ├── 📄 RankListSection.module.scss
                ├── ⚛️ RankListSection.tsx
                ├── ⚛️ RankTableRow.tsx
                ├── 📄 RankTableSection.module.scss
                └── ⚛️ RankTableSection.tsx

Generated by 🚫 dangerJS against 10ae5b2

[github-actions]

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

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