feat: add error page

Nexters · Sep 29, 2024 · 54c50b7 · 54c50b7
1 parent cba3ad2
commit 54c50b7
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/src/client/renderer.tsx b/src/client/renderer.tsx
@@ -5,6 +5,7 @@ import { App } from './view/App';
 import { NotFoundPage } from './view/pages/404';
 import { ExpiredPage } from './view/pages/expired';
 import { Platform } from '../server/types/platform';
+import { ErrorPage } from './view/pages/error';
 
 const defaultHtml = (assetPath: string, content: string) => `    
     <!DOCTYPE html>
@@ -67,3 +68,8 @@ export const renderExpired = (props: AppProps) => {
   const content = renderToStaticMarkup(<ExpiredPage {...props} />);
   return defaultHtml(props.assetPath, content);
 };
+
+export const renderError = (props: AppProps) => {
+  const content = renderToStaticMarkup(<ErrorPage {...props} />);
+  return defaultHtml(props.assetPath, content);
+};
diff --git a/src/client/view/pages/error/index.tsx b/src/client/view/pages/error/index.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { WarningTemplate } from '../../components/template/WarningTemplate';
+import { DefaultContainer } from '../../components/_common/DefaultContainer';
+import { css } from '@linaria/core';
+import { AppProps } from '../../types/app';
+import { AppDownload } from '../../components/banner/AppDownload';
+import { useShowAppDownloadBanner } from '../../components/banner/useShowAppDownloadBanner';
+
+export const ErrorPage = (props: AppProps) => {
+  const showDownloadBanner = useShowAppDownloadBanner();
+  return (
+    <DefaultContainer {...props}>
+      <div className={container}>
+        {showDownloadBanner && <AppDownload />}
+        <WarningTemplate
+          iconName={'warning'}
+          title={'에러가 발생했어요'}
+          iconSize={53}
+        />
+      </div>
+    </DefaultContainer>
+  );
+};
+
+const container = css`
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;