Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
toothlessdev merged 1 commit into from
Sep 15, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions mosu-app/src/features/competition/components/RankBadge/RankBadge.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
4 changes: 2 additions & 2 deletions mosu-app/src/features/competition/components/RankBadge/RankBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
47 changes: 47 additions & 0 deletions mosu-app/src/pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
};
Expand All @@ -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
Expand Down
19 changes: 8 additions & 11 deletions mosu-app/src/pages/events/competition/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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
Expand All @@ -43,8 +40,8 @@ export default function SchoolCompetitionPage(
/>
<HeroSection />
<InfoSection />
{/* <RankListSection top3Schools={top3Schools} /> */}
{/* <RankTableSection topRatedSchools={topRatedSchools} /> */}
<RankListSection top3Schools={top3Schools} />
<RankTableSection topRatedSchools={topRatedSchools} />
<FooterSection />
</main>
);
Expand Down
20 changes: 2 additions & 18 deletions mosu-app/src/widgets/competition/FooterSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 5 additions & 3 deletions mosu-app/src/widgets/competition/RankListSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand All @@ -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>
Expand Down