From 5f5c700a8e8370307d4937f96f451c7bd749e5a8 Mon Sep 17 00:00:00 2001
From: toothlessdev <toothless042@gmail.com>
Date: Tue, 16 Sep 2025 00:49:14 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A6=AC?=
 =?UTF-8?q?=EB=89=B4=EC=96=BC=EC=9D=84=20=EC=9C=84=ED=95=9C=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=EC=B0=BD=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RankBadge/RankBadge.module.scss           | 14 +++---
 .../components/RankBadge/RankBadge.tsx        |  4 +-
 mosu-app/src/pages/_app.tsx                   | 47 +++++++++++++++++++
 .../src/pages/events/competition/index.tsx    | 19 ++++----
 .../src/widgets/competition/FooterSection.tsx | 20 +-------
 .../widgets/competition/RankListSection.tsx   |  8 ++--
 6 files changed, 71 insertions(+), 41 deletions(-)

diff --git a/mosu-app/src/features/competition/components/RankBadge/RankBadge.module.scss b/mosu-app/src/features/competition/components/RankBadge/RankBadge.module.scss
index aebce03a..a75d03d8 100644
--- a/mosu-app/src/features/competition/components/RankBadge/RankBadge.module.scss
+++ b/mosu-app/src/features/competition/components/RankBadge/RankBadge.module.scss
@@ -7,28 +7,28 @@
     header {
         display: flex;
 
-        svg {
+        img {
             scale: 1;
             @media (max-width: 1023px) {
-                scale: 0.75;
+                scale: 0.9;
             }
             @media (max-width: 768px) {
-                scale: 0.5;
+                scale: 0.7;
             }
         }
 
-        svg:first-child {
+        img:first-child {
             transform: scaleX(-1);
         }
 
-        svg[data-rank="1"] {
+        img[data-rank="1"] {
             path {
                 fill: #bcc9ff;
             }
         }
 
-        svg[data-rank="2"],
-        svg[data-rank="3"] {
+        img[data-rank="2"],
+        img[data-rank="3"] {
             path {
                 fill: #a2ffff;
             }
diff --git a/mosu-app/src/features/competition/components/RankBadge/RankBadge.tsx b/mosu-app/src/features/competition/components/RankBadge/RankBadge.tsx
index a36ab07b..553f8770 100644
--- a/mosu-app/src/features/competition/components/RankBadge/RankBadge.tsx
+++ b/mosu-app/src/features/competition/components/RankBadge/RankBadge.tsx
@@ -14,12 +14,12 @@ export const RankBadge = ({ rank, schoolName }: RankBadgeProps) => {
     return (
         <div className={styles.rank_badge}>
             <header className={styles.rank_badge__award}>
-                <ImgAwardDecorator data-rank={rank} />
+                <Image src={ImgAwardDecorator} alt="Award decorator" width={24} height={24} data-rank={rank} />
                 <div>
                     <Image src={imgAward} alt="" />
                     <h2>{rank}위</h2>
                 </div>
-                <ImgAwardDecorator data-rank={rank} />
+                <Image src={ImgAwardDecorator} alt="Award decorator" width={24} height={24} data-rank={rank} />
             </header>
             <footer>
                 <h1 data-rank={rank}>{schoolName}</h1>
diff --git a/mosu-app/src/pages/_app.tsx b/mosu-app/src/pages/_app.tsx
index 7358b37f..f075362f 100644
--- a/mosu-app/src/pages/_app.tsx
+++ b/mosu-app/src/pages/_app.tsx
@@ -17,6 +17,8 @@ import { GlobalLayout } from "@/apps/ui/GlobalLayout";
 
 import { BannerProvider } from "@/features/banner/contexts/BannerProvider";
 
+import { useOverlay } from "@/shared/hooks/useOverlay";
+
 type AppPropsWithLayout = AppProps & {
     Component: NextPage & { layout?: (page: React.ReactNode) => React.ReactNode };
 };
@@ -32,10 +34,55 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
     const Page = Layout(<Component {...pageProps} />);
     const router = useRouter();
 
+    const { render: renderOverlay } = useOverlay({
+        title: "안내사항",
+        initialOpen: true,
+    });
+
+    const overlayContent = (
+        <div className="text-sm">
+            <p className="mb-4">
+                「모의가 아닌 진짜 수능」은 기존에 시험지 지참 방식으로만 운영되었으나, 이번에 시대인재 서바이벌 프로를
+                도입하여 학생들에게 ① 개인 시험지 지참 방식 또는 ② 서바이벌 프로 및 더 프리미엄 모의고사 응시 두 가지
+                선택지를 제공하게 되었습니다.
+            </p>
+            <p className="mb-4">
+                이에 따라 금일부터 홈페이지 리뉴얼 작업이 진행되며, 당분간은 홈페이지 결제가 아닌 선착순 사전 예약 신청
+                방식으로 접수를 받습니다.
+            </p>
+            <p className="mb-4">
+                리뉴얼 완료 후에는 예약자분들께 문자로 상세 안내를 드릴 예정이며, 기존 신청자분들께도 별도로 안내 문자가
+                발송될 예정입니다.
+            </p>
+            <p className="mb-4">
+                <a
+                    href="https://docs.google.com/forms/d/1wR4EWZn1uQTkNFkNdfsAUairlKgTwf4kFxvMS8SdJdI/viewform"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-blue-500 hover:underline"
+                >
+                    선착순 사전 예약하기
+                </a>
+            </p>
+            <p className="mb-4">자세한 사항은 카카오톡 채널 또는 공식 인스타그램을 통해 확인 부탁드립니다.</p>
+            <p>
+                카카오톡 채널 :
+                <a href="https://pf.kakao.com/_xhHxjxin" className="text-blue-500 hover:underline">
+                    https://pf.kakao.com/_xhHxjxin
+                </a>
+            </p>
+            <p>인스타그램 : </p>
+            <a href="https://www.instagram.com/mosu2627/" className="text-blue-500 hover:underline">
+                https://www.instagram.com/mosu2627/
+            </a>
+        </div>
+    );
+
     return (
         <CookiesProvider>
             <QueryClientProvider client={queryClient}>
                 <BannerProvider>
+                    {renderOverlay(overlayContent)}
                     {process.env.NEXT_PUBLIC_GTM_ID && <GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GTM_ID} />}
                     {process.env.NEXT_PUBLIC_GA_ID && <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} />}
                     <ToastContainer
diff --git a/mosu-app/src/pages/events/competition/index.tsx b/mosu-app/src/pages/events/competition/index.tsx
index 8e3cd690..dad9a882 100644
--- a/mosu-app/src/pages/events/competition/index.tsx
+++ b/mosu-app/src/pages/events/competition/index.tsx
@@ -7,9 +7,8 @@ import { getTopRatedSchools } from "@/features/competition/services/getTopRatedS
 import { FooterSection } from "@/widgets/competition/FooterSection";
 import { HeroSection } from "@/widgets/competition/HeroSection";
 import { InfoSection } from "@/widgets/competition/InfoSection";
-
-// import { RankListSection } from "@/widgets/competition/RankListSection";
-// import { RankTableSection } from "@/widgets/competition/RankTableSection";
+import { RankListSection } from "@/widgets/competition/RankListSection";
+import { RankTableSection } from "@/widgets/competition/RankTableSection";
 
 export const getStaticProps = async () => {
     const topRatedSchools = await getTopRatedSchools();
@@ -29,12 +28,10 @@ export const getStaticProps = async () => {
     };
 };
 
-export default function SchoolCompetitionPage(
-    {
-        // top3Schools,
-        // topRatedSchools,
-    }: InferGetStaticPropsType<typeof getStaticProps>,
-) {
+export default function SchoolCompetitionPage({
+    top3Schools,
+    topRatedSchools,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
     return (
         <main>
             <SiteMetadata
@@ -43,8 +40,8 @@ export default function SchoolCompetitionPage(
             />
             <HeroSection />
             <InfoSection />
-            {/* <RankListSection top3Schools={top3Schools} /> */}
-            {/* <RankTableSection topRatedSchools={topRatedSchools} /> */}
+            <RankListSection top3Schools={top3Schools} />
+            <RankTableSection topRatedSchools={topRatedSchools} />
             <FooterSection />
         </main>
     );
diff --git a/mosu-app/src/widgets/competition/FooterSection.tsx b/mosu-app/src/widgets/competition/FooterSection.tsx
index 5f1c251e..b60c9fbe 100644
--- a/mosu-app/src/widgets/competition/FooterSection.tsx
+++ b/mosu-app/src/widgets/competition/FooterSection.tsx
@@ -34,28 +34,12 @@ export const FooterSection = () => {
         <section className={styles.footer_section}>
             <Image src={imgParticle} alt="" />
 
-            <article className={styles.footer_section__dday}>
-                <h1>
-                    <span>
-                        <span className={styles.footer_section__dday__highlight}>9월 13일</span> 토요일
-                    </span>
-                    <span>실시간 순위 발표 예정</span>
-                </h1>
-                <h2>
-                    <span>친구에게 공유하고</span>
-                    <span>
-                        <span className={styles.footer_section__dday__highlight}>전원</span> 치킨 한마리씩
-                    </span>
-                    <span>받아가자!</span>
-                </h2>
-            </article>
-
-            {/* <article className={styles.footer_section__title}>
+            <article className={styles.footer_section__title}>
                 <h1>
                     <span>친구에게 공유하고</span>
                     <span>1등학교 가자!</span>
                 </h1>
-            </article> */}
+            </article>
             <article className={styles.footer_section__cta}>
                 <button>
                     <Link href="/apply">지금 신청하기</Link>
diff --git a/mosu-app/src/widgets/competition/RankListSection.tsx b/mosu-app/src/widgets/competition/RankListSection.tsx
index dba87642..c1317913 100644
--- a/mosu-app/src/widgets/competition/RankListSection.tsx
+++ b/mosu-app/src/widgets/competition/RankListSection.tsx
@@ -7,6 +7,8 @@ export interface RankListSectionProps {
 }
 
 export const RankListSection = ({ top3Schools }: RankListSectionProps) => {
+    console.log(typeof top3Schools, top3Schools);
+
     return (
         <section className={styles.rank_list_section}>
             <article className={styles.rank_list_section__title}>
@@ -18,10 +20,10 @@ export const RankListSection = ({ top3Schools }: RankListSectionProps) => {
             </article>
 
             <article className={styles.rank_list_section__badges}>
-                <RankBadge rank={1} schoolName={top3Schools[0]} />
+                {top3Schools[0] && <RankBadge rank={1} schoolName={top3Schools[0]} />}
                 <div className={styles.rank_list_section__badges__sub}>
-                    <RankBadge rank={2} schoolName={top3Schools[1]} />
-                    <RankBadge rank={3} schoolName={top3Schools[2]} />
+                    {top3Schools[1] && <RankBadge rank={2} schoolName={top3Schools[1]} />}
+                    {top3Schools[2] && <RankBadge rank={3} schoolName={top3Schools[2]} />}
                 </div>
             </article>
         </section>