5.3 글로벌 로딩/스켈레톤/에러 경계 패턴 정립 o

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>
+  );
+}
+
+

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>
+  );
+}
+
+

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>
+  );
+}
+
+