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