From 661eb3597a13804f53822a7b2a8f643c006fe324 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 8 Apr 2025 17:00:59 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=B0=B0=EB=84=88=20=EB=AA=A9=EB=A1=9D?=
 =?UTF-8?q?=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EC=97=90=20=EC=8A=A4=EC=BC=88?=
 =?UTF-8?q?=EB=A0=88=ED=86=A4=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/banner/model/banner-table-columns.tsx | 17 +++++++++--------
 packages/common/components/src/ui/index.ts      |  1 +
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/apps/cs/src/pages/banner/model/banner-table-columns.tsx b/apps/cs/src/pages/banner/model/banner-table-columns.tsx
index 2468821f4..3d993f766 100644
--- a/apps/cs/src/pages/banner/model/banner-table-columns.tsx
+++ b/apps/cs/src/pages/banner/model/banner-table-columns.tsx
@@ -2,11 +2,12 @@
 
 import dayjs from "dayjs";
 import Image from "next/image";
+import { useQuery } from "@tanstack/react-query";
 import type { ColumnDef } from "@tanstack/react-table";
-import { Checkbox } from "@common/components/ui";
+import { Checkbox, Skeleton } from "@common/components/ui";
 import { AttachmentApi } from "@/entities/attachment";
+import { ENDPOINT } from "@/shared/config";
 import type { Banner } from "./banner-interface";
-import { useEffect, useState } from "react";
 
 export const columns: ColumnDef<Banner>[] = [
   {
@@ -61,13 +62,13 @@ export const columns: ColumnDef<Banner>[] = [
 ];
 
 const BannerImage = ({ atflCd }: { atflCd: string }) => {
-  const [imageUrl, setImageUrl] = useState("");
+  const { data: imageUrl, isLoading } = useQuery({
+    queryKey: [ENDPOINT.ATTACH_SERVICE.IMAGES, atflCd],
+    queryFn: () => AttachmentApi.getImageUrlByAtflCd(atflCd),
+    enabled: !!atflCd,
+  });
 
-  useEffect(() => {
-    (async () => {
-      setImageUrl(await AttachmentApi.getImageUrlByAtflCd(atflCd));
-    })();
-  }, [atflCd]);
+  if (isLoading) return <Skeleton className="h-[4rem] w-[16rem]" />;
 
   if (!imageUrl) return null;
 
diff --git a/packages/common/components/src/ui/index.ts b/packages/common/components/src/ui/index.ts
index 4ff471de1..bea09fa74 100644
--- a/packages/common/components/src/ui/index.ts
+++ b/packages/common/components/src/ui/index.ts
@@ -20,6 +20,7 @@ export * from "./progress";
 export * from "./radio-group";
 export * from "./select";
 export * from "./slider";
+export * from "./skeleton";
 export * from "./switch";
 export * from "./table";
 export * from "./tabs";