Merge pull request #40 from 00NFT/bugfix/layoutStyle

fix: #38 Modify Layout

app/components/confetti.tsx

@@ -40,7 +40,7 @@ export default function Confetti({ condition }: { condition: boolean }) {
             count: 1,
           },
           rate: {
-            quantity: 6,
+            quantity: 25,
             delay: 1000,
           },
 
@@ -62,7 +62,7 @@ export default function Confetti({ condition }: { condition: boolean }) {
             count: 1,
           },
           rate: {
-            quantity: 6,
+            quantity: 25,
             delay: 1000,
           },
 

app/components/progress/question.tsx

@@ -9,7 +9,7 @@ export default function Question() {
   useEffect(() => {
     let show = setTimeout(() => {
       increasePhase();
-    }, 3000);
+    }, 2000);
 
     return () => clearTimeout(show);
   }, []);

app/root.tsx

@@ -1,5 +1,5 @@
 import type { LinksFunction, LoaderFunction, MetaFunction } from "@remix-run/node";
-import { json, Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from "@remix-run/react";
+import { json, Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData, useRouteError } from "@remix-run/react";
 import "../style/fonts.css";
 import "../style/global.css";
 import { QueryProvider } from "./providers/query-provider";
@@ -28,7 +28,7 @@ export const meta: MetaFunction = () => {
 };
 
 export const loader: LoaderFunction = ({ request }) => {
-  const userAgent = request.headers.get("user-agent");
+  const userAgent = request.headers.get("user-agent") || "";
   const isKakao = userAgent?.includes("KAKAO");
   const isInstagram = userAgent?.includes("Instagram");
   const isRestrictedBrowser = isKakao || isInstagram;
@@ -37,7 +37,10 @@ export const loader: LoaderFunction = ({ request }) => {
 };
 
 export function Layout({ children }: { children: React.ReactNode }) {
-  const { isRestrictedBrowser, platform } = useLoaderData<typeof loader>();
+  const { isRestrictedBrowser, platform } = useLoaderData<typeof loader>() || {
+    isRestrictedBrowser: false,
+    platform: { isKakao: false, isInstagram: false },
+  };
 
   useEffect(() => {
     if (platform.isKakao) {

app/routes/$.tsx

@@ -0,0 +1,34 @@
+import { LinksFunction } from "@remix-run/node";
+import styles from "../../style/module/error-page.module.css";
+import { useNavigate } from "@remix-run/react";
+import { Button } from "~/components/button";
+
+export const links: LinksFunction = () => [{ rel: "stylesheet", href: "/style/module/error-page.module.css" }];
+
+export default function CatchAllRoute() {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate("/");
+  };
+
+  return (
+    <>
+      <div className={styles.container}>
+        <div className={styles.textWrapper}>
+          <h1>앗! 페이지를 찾을 수 없어!</h1>
+          <span>
+            링크를 다시 확인하거나 <br />
+            아래 버튼을 눌러서 시작화면으로 돌아와줘
+          </span>
+        </div>
+        <img src="/images/404/rabbit_error.svg" alt="토끼 이미지" className={styles.rabbit} />
+      </div>
+      <div className={styles.buttonsWrapper}>
+        <Button onClick={handleClick} buttonType="secondary">
+          시작 화면으로 가기
+        </Button>
+      </div>
+    </>
+  );
+}

style/module/error-page.module.css

@@ -0,0 +1,95 @@
+/* style.module.css */
+
+@keyframes spin {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+.container {
+  position: relative;
+  padding-top: 42px;
+  height: 100vh;
+
+  background: #151528 url("/images/404/404_bg.svg") center/cover no-repeat;
+  background-color: #151528;
+}
+
+.rabbit {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  animation: spin 10s linear infinite;
+}
+
+.textWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  row-gap: 22px;
+  align-items: center;
+  text-align: center;
+  color: white;
+  font-weight: 400;
+
+  position: relative;
+  top: 20%;
+}
+
+.textWrapper h1 {
+  font-size: 20px;
+}
+
+.textWrapper span {
+  font-size: 14px;
+}
+
+.buttonsWrapper {
+  position: fixed;
+  bottom: 0;
+
+  width: 100%;
+  max-width: var(--layout-max-width);
+  margin: 0 auto;
+  padding: 12px 24px 32px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  justify-content: center;
+}
+
+.buttonsWrapper a {
+  text-align: center;
+}
+
+.buttonsWrapper span {
+  color: #6b7ca1;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.buttonsWrapper button {
+  background-color: white;
+  padding: 16px 0;
+  border-radius: 8px;
+  font-size: 16px;
+}
+
+.cardButton {
+  font-size: 14px;
+  padding: 16px 0;
+  border-radius: 8px;
+
+  color: white;
+  background-color: #151528;
+}
+
+.homeButton {
+  font-size: 12px;
+  color: #7d7d7d;
+}