feat: 배너 목록 이미지에 스켈레톤 적용

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;
 

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";