Fix#397: 페이지 리뉴얼을 위한 middleware 추가

mosu-app/src/middleware.ts

@@ -0,0 +1,19 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export const config = {
+    matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
+};
+
+export function middleware(request: NextRequest) {
+    const isMaintenanceMode = process.env.MAINTENANCE_MODE === "true";
+
+    if (request.nextUrl.pathname === "/maintenance") {
+        return NextResponse.next();
+    }
+
+    if (isMaintenanceMode) {
+        return NextResponse.redirect(new URL("/maintenance", request.url));
+    }
+
+    return NextResponse.next();
+}

mosu-app/src/pages/_app.tsx

@@ -17,8 +17,6 @@ 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 };
 };
@@ -34,55 +32,10 @@ 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

mosu-app/src/pages/maintenance.tsx

@@ -0,0 +1,84 @@
+export default function MaintenancePage() {
+    return (
+        <div className="w-full bg-black">
+            <div className="mx-auto w-full max-w-3xl border border-black bg-black p-8 shadow-2xl">
+                <header className="mb-8 text-center">
+                    <h1 className="mb-2 text-4xl font-extrabold text-blue-400">모의가 아닌 진짜 수능</h1>
+                    <p className="text-lg text-gray-400">새로운 응시 방식 도입 및 홈페이지 리뉴얼 안내</p>
+                </header>
+
+                <section className="mb-8">
+                    <h2 className="mb-4 border-l-4 border-blue-400 pl-4 text-2xl font-bold text-gray-200">
+                        응시 방식 변경
+                    </h2>
+                    <div className="space-y-4 text-gray-300">
+                        <p>
+                            기존 시험지 지참 방식으로만 운영되던 「모의가 아닌 진짜 수능」이 시대인재 서바이벌 프로를
+                            도입하여 두 가지 응시 선택지를 제공합니다.
+                        </p>
+                        <ol className="list-inside list-decimal space-y-2 text-gray-400">
+                            <li>개인 시험지 지참 방식</li>
+                            <li>서바이벌 프로 및 더 프리미엄 모의고사 응시</li>
+                        </ol>
+                    </div>
+                </section>
+
+                <hr className="my-8 border-gray-700" />
+
+                <section className="mb-8">
+                    <h2 className="mb-4 border-l-4 border-blue-400 pl-4 text-2xl font-bold text-gray-200">
+                        접수 방법 및 안내
+                    </h2>
+                    <div className="space-y-4 text-gray-300">
+                        <p>
+                            금일부터 홈페이지 리뉴얼 작업이 진행됨에 따라, 당분간은 선착순 사전 예약 신청 방식으로
+                            접수를 받습니다.
+                        </p>
+                        <div className="rounded-lg bg-gray-700 p-4 text-center shadow-inner">
+                            <p className="mb-2 text-lg font-semibold text-gray-100">선착순 사전 예약 신청 링크</p>
+                            <a
+                                href="https://docs.google.com/forms/d/1wR4EWZn1uQTkNFkNdfsAUairlKgTwf4kFxvMS8SdJdI/viewform"
+                                className="inline-block transform rounded-full bg-blue-500 px-6 py-2 font-bold text-white transition-colors duration-300 hover:scale-105 hover:bg-blue-600"
+                                target="_blank"
+                            >
+                                예약 신청 바로가기
+                            </a>
+                        </div>
+                    </div>
+                </section>
+
+                <hr className="my-8 border-gray-700" />
+
+                <section className="mb-8">
+                    <h2 className="mb-4 border-l-4 border-blue-400 pl-4 text-2xl font-bold text-gray-200">향후 일정</h2>
+                    <div className="space-y-4 text-gray-300">
+                        <ul className="list-inside list-disc space-y-2 text-gray-400">
+                            <li>홈페이지 리뉴얼 완료 후, 예약자분들께 문자로 상세 안내가 발송될 예정입니다.</li>
+                            <li>기존 신청자분들께도 별도의 안내 문자가 발송됩니다.</li>
+                        </ul>
+                    </div>
+                </section>
+
+                <hr className="my-8 border-gray-700" />
+
+                <footer className="text-center text-gray-400">
+                    <p className="mb-2">더 자세한 내용은 아래 채널을 통해 확인해 주세요.</p>
+                    <div className="flex justify-center space-x-4">
+                        <a
+                            href="https://pf.kakao.com/_xhHxjxin"
+                            className="text-blue-400 transition-colors duration-300 hover:text-blue-300"
+                        >
+                            카카오톡 채널
+                        </a>
+                        <a
+                            href="https://www.instagram.com/mosu2627"
+                            className="text-blue-400 transition-colors duration-300 hover:text-blue-300"
+                        >
+                            공식 인스타그램
+                        </a>
+                    </div>
+                </footer>
+            </div>
+        </div>
+    );
+}