feat(demo): error, global error, not found page

Nexters · Nov 3, 2024 · e2b9856 · e2b9856
1 parent ef97f80
commit e2b9856
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 2 deletions.
diff --git a/apps/demo/src/app/bottle/[id]/BottleDetail.tsx b/apps/demo/src/app/bottle/[id]/BottleDetail.tsx
@@ -5,6 +5,8 @@ import { Bottle } from '@/models/bottle';
 import { Asset, FixedBottomCTAButton, spacings } from '@bottlesteam/ui';
 import { useUserAgent } from '@bottlesteam/utils';
 
+const ANDROID_INTENT_SCHEME = 'intent://main#Intent;scheme=bottle;package=com.team.bottles;end';
+
 export function BottleDetail({ bottleDetail: user }: { bottleDetail: Bottle }) {
   const userAgent = useUserAgent();
 
@@ -14,7 +16,7 @@ export function BottleDetail({ bottleDetail: user }: { bottleDetail: Bottle }) {
       return;
     }
     if (userAgent.isAndroid) {
-      window.location.href = 'intent://main#Intent;scheme=bottle;package=com.team.bottles;end';
+      window.location.href = ANDROID_INTENT_SCHEME;
     }
     if (userAgent.isIOS) {
       // TODO: add iOS scheme

diff --git a/apps/demo/src/app/error.tsx b/apps/demo/src/app/error.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import BasketImage from '@/assets/images/basket.webp';
+import { Asset, Button, Header, Layout, Paragraph, spacings } from '@bottlesteam/ui';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import { errorImageContainer } from './layout.css';
+
+interface ErrorPageProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+
+export default function DefaultErrorPage({ error, reset }: ErrorPageProps) {
+  const router = useRouter();
+
+  useEffect(() => {
+    // Log error
+    console.error(error);
+  }, [error]);
+
+  return (
+    <>
+      <Header>
+        <button
+          onClick={() => router.back()}
+          // onClick={() => send({ type: AppBridgeMessageType.WEB_VIEW_CLOSE })}
+          style={{ background: 'none', border: 'none' }}
+        >
+          <Asset type="icon-arrow-left" />
+        </button>
+      </Header>
+      <Layout.Contents>
+        <Paragraph typography="t2" color="black100" style={{ marginTop: spacings.xl, marginBottom: spacings.xxl }}>
+          {'앗, 오류가 발생했어요!\n보틀을 다시 실행해 주세요'}
+        </Paragraph>
+        <div className={errorImageContainer}>
+          <Image alt="basket" src={BasketImage} width={250} height={250} />
+          <Button variant="solid" size="sm" onClick={reset}>
+            다시 시도하기
+          </Button>
+        </div>
+      </Layout.Contents>
+    </>
+  );
+}
diff --git a/apps/demo/src/app/global-error.tsx b/apps/demo/src/app/global-error.tsx
@@ -0,0 +1,12 @@
+'use client';
+
+export default function GlobalError({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  return (
+    <html>
+      <body>
+        <h2>Something went wrong!</h2>
+        <button onClick={() => reset()}>Try again</button>
+      </body>
+    </html>
+  );
+}
diff --git a/apps/demo/src/app/not-found.tsx b/apps/demo/src/app/not-found.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import BasketImage from '@/assets/images/basket.webp';
+import { Asset, Button, Layout, Paragraph, spacings, Header } from '@bottlesteam/ui';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { errorImageContainer } from './layout.css';
+
+export default function DefaultErrorPage() {
+  const router = useRouter();
+
+  return (
+    <>
+      <Header>
+        <button onClick={router.back} style={{ background: 'none', border: 'none' }}>
+          <Asset type="icon-arrow-left" />
+        </button>
+      </Header>
+      <Layout.Contents>
+        <Paragraph typography="t2" color="black100" style={{ marginTop: spacings.xl, marginBottom: spacings.xxl }}>
+          {'앗, 오류가 발생했어요!\n존재하지 않는 페이지에요.'}
+        </Paragraph>
+        <div className={errorImageContainer}>
+          <Image alt="basket" src={BasketImage} width={250} height={250} />
+          <Button variant="solid" size="sm" onClick={router.back}>
+            돌아가기
+          </Button>
+        </div>
+      </Layout.Contents>
+    </>
+  );
+}
diff --git a/apps/demo/src/components/common/user-information/userInformationStyle.css.ts b/apps/demo/src/components/common/user-information/userInformationStyle.css.ts
@@ -54,7 +54,6 @@ export const introductionStyle = style({
   padding: spacings.md,
   display: 'flex',
   flexDirection: 'column',
-  marginTop: spacings.xl,
   gap: spacings.xxl,
 });