From ca8fdc4fbaa8e77a8cb6709496c285591ca45b40 Mon Sep 17 00:00:00 2001
From: koreacomp5 <comp5@pluxity.com>
Date: Thu, 9 Oct 2025 15:33:01 +0900
Subject: [PATCH] =?UTF-8?q?5.3=20=EA=B8=80=EB=A1=9C=EB=B2=8C=20=EB=A1=9C?=
 =?UTF-8?q?=EB=94=A9/=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4/=EC=97=90?=
 =?UTF-8?q?=EB=9F=AC=20=EA=B2=BD=EA=B3=84=20=ED=8C=A8=ED=84=B4=20=EC=A0=95?=
 =?UTF-8?q?=EB=A6=BD=20o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/components/ui/Skeleton.tsx | 19 +++++++++++++++++++
 src/app/error.tsx                  | 17 +++++++++++++++++
 src/app/loading.tsx                | 18 ++++++++++++++++++
 todolist.txt                       |  2 +-
 4 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 src/app/components/ui/Skeleton.tsx
 create mode 100644 src/app/error.tsx
 create mode 100644 src/app/loading.tsx

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 (
+    <div
+      style={{
+        width,
+        height,
+        borderRadius: 6,
+        background:
+          "linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%)",
+        backgroundSize: "400% 100%",
+        animation: "shine 1.2s ease-in-out infinite",
+      }}
+    >
+      <style>{`@keyframes shine{0%{background-position:100% 0}100%{background-position:0 0}}`}</style>
+    </div>
+  );
+}
+
+
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 (
+    <div style={{ padding: 24 }}>
+      <h2>문제가 발생했습니다.</h2>
+      <p>{error.message}</p>
+      <button onClick={() => reset()}>다시 시도</button>
+    </div>
+  );
+}
+
+
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 (
+    <div style={{ padding: 24 }}>
+      <div style={{
+        width: 48,
+        height: 48,
+        borderRadius: "50%",
+        border: "4px solid #eee",
+        borderTopColor: "#111",
+        animation: "spin 1s linear infinite",
+        margin: "24px auto",
+      }} />
+      <style>{`@keyframes spin{to{transform:rotate(360deg)}}`}</style>
+    </div>
+  );
+}
+
+
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 테마/다크모드 및 반응형 설정
 
 [메인 화면]