From 18d1683457165a98a4ed3aa7f672adb5255f1665 Mon Sep 17 00:00:00 2001
From: sumi-0011 <selina2000@naver.com>
Date: Wed, 15 May 2024 17:40:20 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A0=90=EA=B2=80=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20app=EC=97=90=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ErrorPage.tsx | 84 ++++++++++++++++++++++++++++++++++++
 src/pages/_app.page.tsx      |  2 +
 2 files changed, 86 insertions(+)
 create mode 100644 src/components/ErrorPage.tsx

diff --git a/src/components/ErrorPage.tsx b/src/components/ErrorPage.tsx
new file mode 100644
index 00000000..2bfc4e43
--- /dev/null
+++ b/src/components/ErrorPage.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import Image from 'next/image';
+import { css } from '@/styled-system/css';
+
+function ErrorPage() {
+  const targetDate = '2024-05-16T03:00:00.000Z';
+
+  const now = new Date().getTime();
+  const target = new Date(targetDate).getTime();
+
+  // 이후가 되면 null 리턴
+  if (now > target) return null;
+
+  return (
+    <div className={containerCss}>
+      <main className={MainWrapperCss}>
+        <div className={imageWrapperCss}>
+          <Image src={'/images/crying-face.png'} width={80} height={80} alt={'crying-face'} />
+        </div>
+        <div className={titleWrapperCss}>
+          <div className={titleCss}>서버 점검 안내</div>
+          <p className={subTitleCss}>
+            서버 이전 작업으로 인해, 점검중입니다.
+            <br />
+            양해 부탁드립니다.
+            <br />
+            <br />
+            점검 예정 시간 : ~ 2024년 5월 16일 3시
+          </p>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export default ErrorPage;
+
+const containerCss = css({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  zIndex: 99999,
+  background: '#18181D',
+  maxWidth: '475px',
+  margin: 'auto',
+  height: '100%',
+  overflow: 'hidden',
+});
+
+const MainWrapperCss = css({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+
+  width: '100%',
+  height: '100vh',
+  padding: '118px 16px 50px 16px',
+});
+
+const imageWrapperCss = css({
+  marginBottom: '18px',
+});
+
+const titleWrapperCss = css({
+  display: 'flex',
+  gap: '6px',
+  flexDirection: 'column',
+  alignItems: 'center',
+  marginBottom: '60px',
+});
+
+const titleCss = css({
+  textStyle: 'subtitle2',
+  color: 'text.primary',
+});
+
+const subTitleCss = css({
+  textStyle: 'body5',
+  color: 'gray.gray600',
+  textAlign: 'center',
+});
diff --git a/src/pages/_app.page.tsx b/src/pages/_app.page.tsx
index dd2ce6e2..a2934d3b 100644
--- a/src/pages/_app.page.tsx
+++ b/src/pages/_app.page.tsx
@@ -1,5 +1,6 @@
 import { Suspense } from 'react';
 import type { AppProps } from 'next/app';
+import ErrorPage from '@/components/ErrorPage';
 import MonitoringInitializer from '@/components/MonitoringInitializer';
 import NotificationSnackBarProvider from '@/components/NotificationSnackBar/NotificationSnackBarProvider';
 import SnackBarProvider from '@/components/SnackBar/SnackBarProvider';
@@ -24,6 +25,7 @@ export default function App({ Component, pageProps }: AppProps) {
               <TemplateComponent>
                 <div className={css(containerCss)}>
                   <Component {...pageProps} />
+                  <ErrorPage />
                 </div>
               </TemplateComponent>
             </Suspense>