From 6df605a1840d340067dca8a88d9b2c0859b22c97 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Thu, 3 Apr 2025 09:37:25 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20loading=20ui=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/app/(with-base-layout)/loading.tsx           |  2 ++
 apps/cs/src/pages/image/ui/image-form.tsx            |  4 ++--
 apps/cs/src/shared/ui/skeleton-page.tsx              | 12 ++++++++++++
 packages/common/components/src/ui/skeleton/index.tsx |  2 +-
 4 files changed, 17 insertions(+), 3 deletions(-)
 create mode 100644 apps/cs/app/(with-base-layout)/loading.tsx
 create mode 100644 apps/cs/src/shared/ui/skeleton-page.tsx

diff --git a/apps/cs/app/(with-base-layout)/loading.tsx b/apps/cs/app/(with-base-layout)/loading.tsx
new file mode 100644
index 000000000..3a3b15932
--- /dev/null
+++ b/apps/cs/app/(with-base-layout)/loading.tsx
@@ -0,0 +1,2 @@
+import { SkeletonPage } from "@/shared/ui/skeleton-page";
+export default SkeletonPage;
diff --git a/apps/cs/src/pages/image/ui/image-form.tsx b/apps/cs/src/pages/image/ui/image-form.tsx
index 58ecdd1b1..9ed24c218 100644
--- a/apps/cs/src/pages/image/ui/image-form.tsx
+++ b/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>
diff --git a/apps/cs/src/shared/ui/skeleton-page.tsx b/apps/cs/src/shared/ui/skeleton-page.tsx
new file mode 100644
index 000000000..fca5c8e76
--- /dev/null
+++ b/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 };
diff --git a/packages/common/components/src/ui/skeleton/index.tsx b/packages/common/components/src/ui/skeleton/index.tsx
index 6e10fe239..f10066415 100644
--- a/packages/common/components/src/ui/skeleton/index.tsx
+++ b/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}
     />
   );