[FEAT] 에러/로딩/온보딩 상태 페이지 Lottie 애니메이션 적용

apps/timo-web/app/[locale]/[...rest]/page.tsx

@@ -0,0 +1,5 @@
+import { notFound } from "next/navigation";
+
+export default function CatchAll() {
+  notFound();
+}

apps/timo-web/app/[locale]/error.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import { useTranslations } from "next-intl";
+import { useEffect } from "react";
+
+import { StatusScreen } from "@/components/status-screen/StatusScreen";
+import { Link } from "@/i18n/navigation";
+
+interface ErrorPageProps {
+  error: Error & { digest?: string };
+}
+
+export default function ErrorPage({ error }: ErrorPageProps) {
+  const t = useTranslations("Error");
+
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <StatusScreen
+      lottieSrc="/lottie/500.json"
+      title={t("title")}
+      description={t("description")}
+      action={
+        <div className="flex items-center gap-3">
+          <Link
+            href="/"
+            className="typo-headline-m-16 rounded-[8px] border border-gray-500 px-4 py-2.5 text-gray-900"
+          >
+            {t("homeButton")}
+          </Link>
+        </div>
+      }
+    />
+  );
+}

apps/timo-web/app/[locale]/loading.tsx

@@ -0,0 +1,13 @@
+import { LottiePlayer } from "@/components/lottie/LottiePlayer";
+
+export default function Loading() {
+  return (
+    <div className="flex min-h-screen w-full items-center justify-center">
+      <LottiePlayer
+        src="/lottie/loading.json"
+        className="w-[143px]"
+        ariaLabel="로딩 중"
+      />
+    </div>
+  );
+}

apps/timo-web/app/[locale]/not-found.tsx

@@ -0,0 +1,24 @@
+import { getTranslations } from "next-intl/server";
+
+import { StatusScreen } from "@/components/status-screen/StatusScreen";
+import { Link } from "@/i18n/navigation";
+
+export default async function NotFound() {
+  const t = await getTranslations("NotFound");
+
+  return (
+    <StatusScreen
+      lottieSrc="/lottie/404.json"
+      title={t("title")}
+      description={t("description")}
+      action={
+        <Link
+          href="/"
+          className="typo-headline-m-16 rounded-[8px] border border-gray-500 px-4 py-2.5 text-gray-900"
+        >
+          {t("homeButton")}
+        </Link>
+      }
+    />
+  );
+}

apps/timo-web/app/[locale]/onboarding/page.tsx

@@ -1,3 +1,12 @@
+import { LottiePlayer } from "@/components/lottie/LottiePlayer";
+
 export default function OnboardingPage() {
-  return <></>;
+  return (
+    <div className="relative h-screen w-full">
+      <LottiePlayer
+        src="/lottie/onboarding.json"
+        className="absolute top-1/2 left-[197px] w-[500px] -translate-y-1/2"
+      />
+    </div>
+  );
 }

apps/timo-web/app/global-error.tsx

@@ -1,24 +1,86 @@
 "use client";
 
 import * as Sentry from "@sentry/nextjs";
-import { useEffect } from "react";
+import localFont from "next/font/local";
+import { NextIntlClientProvider, useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+
+import { StatusScreen } from "@/components/status-screen/StatusScreen";
+import { Link } from "@/i18n/navigation";
+import { routing } from "@/i18n/routing";
+import enMessages from "@/messages/en.json";
+import koMessages from "@/messages/ko.json";
+
+import "./[locale]/globals.css";
+
+type Locale = (typeof routing.locales)[number];
+
+const messagesByLocale: Record<Locale, typeof enMessages> = {
+  en: enMessages,
+  ko: koMessages,
+};
+
+const pretendard = localFont({
+  src: "../fonts/PretendardVariable.woff2",
+  variable: "--font-family-pretendard",
+  weight: "45 920",
+  display: "swap",
+});
 
 interface GlobalErrorProps {
   error: Error & { digest?: string };
   reset: () => void;
 }
 
-export default function GlobalError({ error, reset }: GlobalErrorProps) {
+function getLocaleFromPathname(): Locale {
+  const segment = window.location.pathname.split("/")[1];
+  return routing.locales.includes(segment as Locale)
+    ? (segment as Locale)
+    : routing.defaultLocale;
+}
+
+function GlobalErrorContent() {
+  const t = useTranslations("GlobalError");
+
+  return (
+    <StatusScreen
+      lottieSrc="/lottie/error.json"
+      title={t("title")}
+      description={t("description")}
+      action={
+        <div className="flex items-center gap-3">
+          <Link
+            href="/"
+            className="typo-headline-m-16 rounded-[8px] border border-gray-500 px-4 py-2.5 text-gray-900"
+          >
+            {t("homeButton")}
+          </Link>
+        </div>
+      }
+    />
+  );
+}
+
+export default function GlobalError({ error }: GlobalErrorProps) {
+  const [locale, setLocale] = useState<Locale>(routing.defaultLocale);
+
   useEffect(() => {
     Sentry.captureException(error);
   }, [error]);
 
+  useEffect(() => {
+    setLocale(getLocaleFromPathname());
+  }, []);
+
   return (
-    <html lang="ko">
+    <html lang={locale} className={pretendard.variable}>
       <body>
-        <h1>문제가 발생했어요</h1>
-        <p>잠시 후 다시 시도해주세요.</p>
-        <button onClick={reset}>다시 시도</button>
+        <NextIntlClientProvider
+          locale={locale}
+          messages={messagesByLocale[locale]}
+        >
+          <GlobalErrorContent />
+        </NextIntlClientProvider>
       </body>
     </html>
   );

apps/timo-web/components/lottie/LottiePlayer.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { cn } from "@repo/timo-design-system/utils";
+import Lottie from "lottie-react";
+import { useEffect, useState } from "react";
+
+export interface LottiePlayerProps {
+  src: string;
+  loop?: boolean;
+  className?: string;
+  ariaLabel?: string;
+}
+
+export const LottiePlayer = ({
+  src,
+  loop = true,
+  className,
+  ariaLabel,
+}: LottiePlayerProps) => {
+  const [animationData, setAnimationData] = useState<object | null>(null);
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    fetch(src, { signal: controller.signal })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`Lottie 애니메이션 로드 실패: ${response.status}`);
+        }
+        return response.json();
+      })
+      .then(setAnimationData)
+      .catch(() => {
+        // 애니메이션 로드 실패 시 컨테이너만 비운 상태로 유지 (레이아웃 시프트 방지)
+      });
+
+    return () => controller.abort();
+  }, [src]);
+
+  return (
+    <div className={cn("w-full", className)}>
+      {animationData && (
+        <Lottie
+          animationData={animationData}
+          loop={loop}
+          role="img"
+          aria-label={ariaLabel}
+        />
+      )}
+    </div>
+  );
+};

apps/timo-web/components/status-screen/StatusScreen.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+
+import { LottiePlayer } from "@/components/lottie/LottiePlayer";
+
+export interface StatusScreenProps {
+  lottieSrc: string;
+  title: string;
+  description: string;
+  action?: ReactNode;
+}
+
+export const StatusScreen = ({
+  lottieSrc,
+  title,
+  description,
+  action,
+}: StatusScreenProps) => {
+  return (
+    <div className="flex min-h-screen w-full flex-col items-center justify-center gap-[90px] px-6 text-center">
+      <LottiePlayer src={lottieSrc} className="w-[397px]" ariaLabel={title} />
+      <div className="flex w-full flex-col items-center gap-10">
+        <div className="flex flex-col gap-1.5">
+          <h1 className="typo-headline-b-30 text-timo-black">{title}</h1>
+          <p className="typo-body-r-12 text-timo-gray-900">{description}</p>
+        </div>
+        {action}
+      </div>
+    </div>
+  );
+};

apps/timo-web/messages/en.json

@@ -41,6 +41,21 @@
     "todoLimitLine1": "You can add up to <blue>20 incomplete to-dos</blue>.",
     "todoLimitLine2": "To add a new to-do, please complete an existing one."
   },
+  "Error": {
+    "title": "A problem has occurred.",
+    "description": "We are currently undergoing maintenance for a better experience. Please try again later.",
+    "homeButton": "Return to home"
+  },
+  "NotFound": {
+    "title": "Page not found",
+    "description": "You may have entered an invalid address or used an incorrect path.",
+    "homeButton": "Return to home"
+  },
+  "GlobalError": {
+    "title": "An issue has occurred.",
+    "description": "Please try again later or go back to home.",
+    "homeButton": "Return to home"
+  },
   "Onboarding": {
     "button": {
       "next": "Next",

apps/timo-web/messages/ko.json

@@ -41,6 +41,21 @@
     "todoLimitLine1": "완료되지 않은 투두는 <blue>최대 20개</blue>까지 추가할 수 있어요.",
     "todoLimitLine2": "새로운 투두를 추가하려면 기존 투두를 완료해주세요."
   },
+  "Error": {
+    "title": "잠시 문제가 발생했어요.",
+    "description": "더 나은 경험을 위해 잠시 점검 중입니다. 잠시후 다시 이용해 주세요.",
+    "homeButton": "홈으로 돌아가기"
+  },
+  "NotFound": {
+    "title": "페이지를 찾을 수 없어요.",
+    "description": "존재하지 않는 주소를 입력하셨거나, 잘못된 경로를 이용하셨어요",
+    "homeButton": "홈으로 돌아가기"
+  },
+  "GlobalError": {
+    "title": "문제가 발생했어요.",
+    "description": "잠시 후 다시 시도하거나 홈으로 이동해주세요.",
+    "homeButton": "홈으로 돌아가기"
+  },
   "Onboarding": {
     "button": {
       "next": "다음",

apps/timo-web/package.json

@@ -19,6 +19,7 @@
     "@tanstack/react-query": "^5.101.1",
     "@tanstack/react-query-devtools": "^5.101.1",
     "axios": "^1.18.1",
+    "lottie-react": "^2.4.1",
     "next": "16.2.0",
     "next-intl": "^4.13.1",
     "react": "^19.2.0",