feat: loading ui 적용

apps/cs/app/(with-base-layout)/loading.tsx

@@ -0,0 +1,2 @@
+import { SkeletonPage } from "@/shared/ui/skeleton-page";
+export default SkeletonPage;

apps/cs/src/pages/image/ui/image-form.tsx

@@ -215,8 +215,8 @@ function ImageForm({ form, imgSn, handleSave, handleDelete }: ImageFormProps) {
                                 customPreview={
                                   <>
                                     <Label htmlFor="atflCd">
-                                      <div className="relative h-[27rem] w-[48rem] rounded-sm border border-border">
-                                        <p className="absolute left-0 top-0 p-2 text-base leading-none">
+                                      <div className="relative h-[27rem] w-[48rem] overflow-hidden rounded-sm border border-border bg-accent">
+                                        <p className="absolute bottom-3 left-0 p-2 text-base leading-none">
                                           {(upload?.file as File)?.name}
                                         </p>
                                         <div></div>

apps/cs/src/shared/ui/skeleton-page.tsx

@@ -0,0 +1,12 @@
+import { Skeleton } from "@common/components/ui/skeleton";
+
+function SkeletonPage() {
+  return (
+    <div className="flex flex-col gap-4 p-6">
+      <Skeleton className="h-[6rem] rounded-xl" />
+      <Skeleton className="h-[60rem] rounded-xl" />
+    </div>
+  );
+}
+
+export { SkeletonPage };

packages/common/components/src/ui/skeleton/index.tsx

@@ -6,7 +6,7 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn("animate-pulse rounded-md bg-muted", className)}
+      className={cn("animate-pulse rounded-md bg-[rgba(0,0,0,0.1)]", className)}
       {...props}
     />
   );