Merge pull request #78 from hsglc/feature/error-pages

feat: generate error page
Trendyol · Feb 3, 2024 · 1732f57 · 1732f57
2 parents ff603f4 + 1414b76
commit 1732f57
Show file tree

Hide file tree

Showing 10 changed files with 176 additions and 17 deletions.
diff --git a/gurubu-client/public/left-arrow.svg b/gurubu-client/public/left-arrow.svg
diff --git a/gurubu-client/src/app/components/error/go-back-button.tsx b/gurubu-client/src/app/components/error/go-back-button.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+
+export const GoBackButton = () => {
+  const router = useRouter();
+
+  return (
+    <button
+      className="not-found-page__navigation__go-back"
+      onClick={() => {
+        router.back();
+      }}>
+      <Image priority src="/left-arrow.svg" alt="left-arrow" width={24} height={24} />
+      Go back
+    </button>
+  );
+};
diff --git a/gurubu-client/src/app/error.tsx b/gurubu-client/src/app/error.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import Link from "next/link";
+import { GoBackButton } from "./components/error/go-back-button";
+import "./styles/error/style.scss";
+
+export default function GlobalError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  return (
+    <main className="not-found-page">
+      <h1 className="not-found-page__title">500 error</h1>
+      <h2 className="not-found-page__subtitle">{error && error.message}</h2>
+      <p className="not-found-page__description">
+        We searched high and low, but couldn’t find what you’re looking for. Let’s find a better place for you to go.
+      </p>
+      <div className="not-found-page__navigation">
+        <GoBackButton />
+        <Link className="not-found-page__navigation__take-me-home" href="/">
+          Take me home
+        </Link>
+      </div>
+    </main>
+  );
+}
diff --git a/gurubu-client/src/app/not-found.tsx b/gurubu-client/src/app/not-found.tsx
@@ -0,0 +1,26 @@
+import Link from "next/link";
+import { GoBackButton } from "./components/error/go-back-button";
+import "./styles/error/style.scss";
+
+export default function NotFound() {
+  return (
+    <html>
+      <body>
+        <main className="not-found-page">
+          <h1 className="not-found-page__title">404 error</h1>
+          <h2 className="not-found-page__subtitle">We lost this page</h2>
+          <p className="not-found-page__description">
+            We searched high and low, but couldn’t find what you’re looking for. Let’s find a better place for you to
+            go.
+          </p>
+          <div className="not-found-page__navigation">
+            <GoBackButton />
+            <Link className="not-found-page__navigation__take-me-home" href="/">
+              Take me home
+            </Link>
+          </div>
+        </main>
+      </body>
+    </html>
+  );
+}
diff --git a/gurubu-client/src/app/room/[id]/not-found.tsx b/gurubu-client/src/app/room/[id]/not-found.tsx
@@ -10,4 +10,4 @@ export default function NotFound() {
       </Link>
     </div>
   );
-}
+}
diff --git a/gurubu-client/src/app/styles/error/not-found.scss b/gurubu-client/src/app/styles/error/not-found.scss
@@ -0,0 +1,70 @@
+.not-found-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  &__title {
+    color: $primary-700;
+    line-height: $line-height-paragraph-4;
+    font-weight: $semibold;
+    font-size: $font-size-paragraph-3;
+    padding-bottom: $space-medium;
+  }
+  &__subtitle {
+    color: $gray-900;
+    line-height: $line-height-header-1;
+    font-weight: $semibold;
+    font-size: $font-size-header-1;
+    padding-bottom: $space-xlarge;
+    letter-spacing: $letter-spacing-1;
+    text-align: center;
+  }
+  &__description {
+    color: $gray-600;
+    line-height: $line-height-paragraph-2;
+    font-weight: $regular;
+    font-size: $font-size-body-4;
+    padding-bottom: $space-xxxlarge;
+    max-width: 576px;
+    text-align: center;
+  }
+
+  &__navigation {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: $space-medium;
+
+    &__go-back {
+      padding: 16px 28px;
+      border-radius: $radius-large;
+      border: 1px solid $gray-300;
+      display: flex;
+      align-items: center;
+      gap: $space-medium;
+      color: $gray-700;
+      font-weight: $semibold;
+      font-size: $font-size-paragraph-2;
+      cursor: pointer;
+      height: 60px;
+      background: $white;
+    }
+    &__take-me-home {
+      height: 60px;
+      border-radius: $radius-large;
+      padding: 16px 28px;
+      background: $primary-600;
+      color: $white;
+      font-weight: $semibold;
+      font-size: $font-size-paragraph-2;
+      border: 1px solid $primary-600;
+      display: flex;
+      align-items: center;
+    }
+  }
+  &__link:hover {
+    background-color: $yellow-400;
+  }
+}
diff --git a/gurubu-client/src/app/styles/error/style.scss b/gurubu-client/src/app/styles/error/style.scss
@@ -0,0 +1,5 @@
+@import "../variables.scss";
+@import "../mixins.scss";
+@import "./not-found.scss";
+
+
diff --git a/gurubu-client/src/app/styles/page/greeting.scss b/gurubu-client/src/app/styles/page/greeting.scss
@@ -12,13 +12,13 @@
   }
   &__title {
     color: $blue-900;
-    font-size: $font-size-header-3;
-    line-height: $line-height-header-3;
+    font-size: $font-size-header-4;
+    line-height: $line-height-header-4;
     font-weight: $black;
 
     @include media(xl){
-      font-size: $font-size-header-1;
-      line-height: $line-height-header-1;
+      font-size: $font-size-header-2;
+      line-height: $line-height-header-2;
     }
   }
   &__description {

diff --git a/gurubu-client/src/app/styles/room/nickname-form.scss b/gurubu-client/src/app/styles/room/nickname-form.scss
@@ -14,14 +14,14 @@
     gap: $space-xsmall;
     font-family: var(--font-space-grotesk);
     color: $black;
-    font-size: $font-size-header-3;
-    font-weight: $font-size-header-3;
+    font-size: $font-size-header-5;
+    font-weight: $bold;
     margin-bottom: $space-xlarge;
   }
   &__title {
     color: $title-color;
     font-size: $font-size-paragraph-2;
-    line-height: $line-height-header-3;
+    line-height: $line-height-header-4;
     font-weight: $semibold;
   }
   &__input-wrapper {

diff --git a/gurubu-client/src/app/styles/variables.scss b/gurubu-client/src/app/styles/variables.scss
@@ -18,6 +18,9 @@ $voting-card-color: linear-gradient(
   #ced3e8 101.29%
 );
 
+$primary-700: #6941C6;
+$primary-600: #7F56D9;
+
 $title-color: #101828;
 
 $blue-900: #091133;
@@ -33,11 +36,11 @@ $blue-100: #e7ecff;
 
 $gray-900: #141719;
 $gray-800: #393e41;
-$gray-700: #454e54;
-$gray-600: #5d6970;
+$gray-700: #344054;
+$gray-600: #475467;
 $gray-500: #76848c;
 $gray-400: #939ea4;
-$gray-300: #b0b8bc;
+$gray-300: #D0D5DD;
 $gray-200: #cdd1d4;
 $gray-100: #e9ebec;
 $gray-50: #fbfbfd;
@@ -62,13 +65,16 @@ $success-500: #17B26A;
 $red-700: #DC2626;
 
 // font size
-$font-size-header-1: 50px;
-$font-size-header-2: 42px;
-$font-size-header-3: 26px;
+$font-size-header-1: 60px;
+$font-size-header-2: 50px;
+$font-size-header-3: 42px;
+$font-size-header-4: 26px;
+$font-size-header-5: 24px;
 
 $font-size-body-1: 48px;
 $font-size-body-2: 36px;
 $font-size-body-3: 28px;
+$font-size-body-4: 20px;
 
 $font-size-paragraph-1: 22px;
 $font-size-paragraph-2: 18px;
@@ -77,9 +83,10 @@ $font-size-paragraph-4: 14px;
 $font-size-paragraph-5: 12px;
 
 // line height
-$line-height-header-1: 66px;
-$line-height-header-2: 60px;
-$line-height-header-3: 38px;
+$line-height-header-1: 72px;
+$line-height-header-2: 66px;
+$line-height-header-3: 60px;
+$line-height-header-4: 38px;
 
 $line-height-body-1: 48px;
 $line-height-body-2: 38px;
@@ -115,6 +122,12 @@ $space-xxlarge: 32px;
 $space-xxxlarge: 48px;
 $space-xxxxlarge: 96px;
 
+$space-body: 384px;
+
+// letter-spacing
+
+$letter-spacing-1: -1.2px;
+
 $space-body: 384px;
 // radius