From b27f2d1d3cd5eb10e93b864088826490968e4773 Mon Sep 17 00:00:00 2001 From: klmhyeonwoo Date: Mon, 27 Jan 2025 00:08:49 +0900 Subject: [PATCH 1/2] fix: #38 Modify Layout --- app/components/confetti.tsx | 4 ++-- app/components/progress/question.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/confetti.tsx b/app/components/confetti.tsx index 601e81d..34b0a4f 100644 --- a/app/components/confetti.tsx +++ b/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, }, diff --git a/app/components/progress/question.tsx b/app/components/progress/question.tsx index 3f1ab2b..ebfecb3 100644 --- a/app/components/progress/question.tsx +++ b/app/components/progress/question.tsx @@ -9,7 +9,7 @@ export default function Question() { useEffect(() => { let show = setTimeout(() => { increasePhase(); - }, 3000); + }, 2000); return () => clearTimeout(show); }, []); From 53660c1e0f0b2f4255618e3bb526560fd9902f5a Mon Sep 17 00:00:00 2001 From: klmhyeonwoo Date: Mon, 27 Jan 2025 01:41:53 +0900 Subject: [PATCH 2/2] feat: Add 404 --- app/root.tsx | 9 ++- app/routes/$.tsx | 34 +++++++++++ public/images/404/404_bg.svg | 24 ++++++++ public/images/404/rabbit_error.svg | 9 +++ style/module/error-page.module.css | 95 ++++++++++++++++++++++++++++++ 5 files changed, 168 insertions(+), 3 deletions(-) create mode 100644 app/routes/$.tsx create mode 100644 public/images/404/404_bg.svg create mode 100644 public/images/404/rabbit_error.svg create mode 100644 style/module/error-page.module.css diff --git a/app/root.tsx b/app/root.tsx index 9ef66bc..e0fc0b6 100644 --- a/app/root.tsx +++ b/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(); + const { isRestrictedBrowser, platform } = useLoaderData() || { + isRestrictedBrowser: false, + platform: { isKakao: false, isInstagram: false }, + }; useEffect(() => { if (platform.isKakao) { diff --git a/app/routes/$.tsx b/app/routes/$.tsx new file mode 100644 index 0000000..3e77250 --- /dev/null +++ b/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 ( + <> +
+
+

앗! 페이지를 찾을 수 없어!

+ + 링크를 다시 확인하거나
+ 아래 버튼을 눌러서 시작화면으로 돌아와줘 + +
+ 토끼 이미지 +
+
+ +
+ + ); +} diff --git a/public/images/404/404_bg.svg b/public/images/404/404_bg.svg new file mode 100644 index 0000000..d14dcdd --- /dev/null +++ b/public/images/404/404_bg.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/404/rabbit_error.svg b/public/images/404/rabbit_error.svg new file mode 100644 index 0000000..42dece1 --- /dev/null +++ b/public/images/404/rabbit_error.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/style/module/error-page.module.css b/style/module/error-page.module.css new file mode 100644 index 0000000..c76bbf3 --- /dev/null +++ b/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; +}