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}
+
reset()}>다시 시도
+
+ );
+}
+
+
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 테마/다크모드 및 반응형 설정
[메인 화면]