diff --git a/src/app/components/ui/Skeleton.tsx b/src/app/components/ui/Skeleton.tsx new file mode 100644 index 0000000..680c9a5 --- /dev/null +++ b/src/app/components/ui/Skeleton.tsx @@ -0,0 +1,19 @@ +export function Skeleton({ width = "100%", height = 16 }: { width?: number | string; height?: number | string }) { + return ( +
+ +
+ ); +} + + diff --git a/src/app/error.tsx b/src/app/error.tsx new file mode 100644 index 0000000..0f89235 --- /dev/null +++ b/src/app/error.tsx @@ -0,0 +1,17 @@ +"use client"; +import { useEffect } from "react"; + +export default function GlobalError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) { + useEffect(() => { + console.error(error); + }, [error]); + return ( +
+

문제가 발생했습니다.

+

{error.message}

+ +
+ ); +} + + diff --git a/src/app/loading.tsx b/src/app/loading.tsx new file mode 100644 index 0000000..0908bd5 --- /dev/null +++ b/src/app/loading.tsx @@ -0,0 +1,18 @@ +export default function Loading() { + return ( +
+
+ +
+ ); +} + + diff --git a/todolist.txt b/todolist.txt index b0f8b6f..ad0c713 100644 --- a/todolist.txt +++ b/todolist.txt @@ -29,7 +29,7 @@ [공통/레이아웃] 5.1 앱 레이아웃/헤더/푸터/사이드바 구성 o 5.2 공통 컴포넌트(버튼/입력/모달/토스트) 제작 o -5.3 글로벌 로딩/스켈레톤/에러 경계 패턴 정립 +5.3 글로벌 로딩/스켈레톤/에러 경계 패턴 정립 o 5.4 테마/다크모드 및 반응형 설정 [메인 화면]