Merge pull request #485 from geumyoung00/fix/auction-skeleton-#477

[fix ]auction list 스켈레톤 맞춤

Author: dolmeengii

apps/web/src/components/auction/auction-card-skeleton.tsx

@@ -1,11 +1,10 @@
 const AuctionItemCardSkeleton = () => {
   return (
-    <div className="flex w-full animate-pulse items-center justify-between gap-2.5">
-      <div className="w-26.5 h-26.5 rounded-lg bg-neutral-200" />
-      <div className="flex-1 space-y-2.5 [&_div]:rounded [&_div]:bg-neutral-200">
-        <div className="h-6 w-3/4" />
+    <div className="mb-2 flex w-full animate-pulse justify-between gap-2.5">
+      <div className="size-21.5 rounded-lg border-neutral-200 bg-neutral-200" />
+      <div className="mt-2 flex-1 space-y-2 [&_div]:rounded [&_div]:bg-neutral-200">
+        <div className="h-5 w-3/4" />
         <div className="h-4 w-3/5" />
-        <div className="w-15 h-6" />
       </div>
     </div>
   );

apps/web/src/components/auction/categories-filter.tsx

@@ -11,9 +11,9 @@ const CategoriesFilter = () => {
 
   if (isLoading || !categoriesData) {
     return (
-      <div className="my-3 flex gap-2">
+      <div className="mb-3 mt-2 flex gap-2">
         {Array.from({ length: 6 }).map((_, i) => (
-          <div key={i} className="w-89 h-[35px] animate-pulse rounded bg-neutral-200" />
+          <div key={i} className="w-89 h-[35px] animate-pulse rounded-md bg-neutral-200" />
         ))}
       </div>
     ); // 로딩 상태에서의 스켈레톤 UI

apps/web/src/components/common/auction-card/card.tsx

@@ -55,12 +55,10 @@ const AuctionItemCard = ({
       className="relative mb-2 flex w-full items-center justify-between gap-2.5 overflow-hidden"
     >
       <div className="z-auto">
-        {/* <BadgeBidStatus status={finalStatus} /> */}
         <Thumbnail
           url={thumbnailUrl}
           alt={`${title} 썸네일`}
           size={86}
-          className="size-24"
           priority={idx! < 5}
           quality={50}
           fetchPriority={idx === 0 ? 'high' : undefined}

apps/web/src/components/common/auction-card/list.tsx

@@ -47,7 +47,7 @@ const AuctionItemList = ({
 
   if (isLoading) {
     return (
-      <div className="flex min-h-[100vhd] flex-col gap-4">
+      <div className="flex min-h-[100vhd] flex-col">
         {Array.from({ length: 5 }).map((_, i) => (
           <AuctionItemCardSkeleton key={i} />
         ))}