[refactor] 광고 카드 레이아웃 밀림 수정

src/pages/Chat/index.tsx

@@ -142,6 +142,27 @@ function ChatAdvertisementListItem({ advertisement, onClick }: ChatAdvertisement
   );
 }
 
+function ChatAdvertisementListItemSkeleton() {
+  return (
+    <div aria-hidden="true" className="flex items-center gap-3 bg-white px-5 py-3">
+      <div className="bg-indigo-25 h-12 w-12 shrink-0 animate-pulse rounded-sm" />
+
+      <div className="min-w-0 flex-1">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex min-w-0 flex-1 items-center gap-1">
+            <div className="bg-indigo-25 h-6 w-32 max-w-full animate-pulse rounded" />
+            <div className="bg-indigo-25 h-5 w-10 shrink-0 animate-pulse rounded-full" />
+          </div>
+        </div>
+
+        <div className="mt-0.5 flex items-center gap-3">
+          <div className="bg-indigo-25 h-5 w-40 max-w-full animate-pulse rounded" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function ChatListPage() {
   const { chatRoomList } = useChat();
   const rooms = chatRoomList.rooms;
@@ -153,8 +174,10 @@ function ChatListPage() {
     itemCount: rooms.length,
     enabled: rooms.length > 0,
   });
-  const advertisementCount = Math.floor(rooms.length / chatRoomSlotsPerAdvertisement);
-  const { advertisements, trackAdvertisementClick } = useAdvertisements({
+  const advertisementCount = chatRoomSlotsPerAdvertisement
+    ? Math.floor(rooms.length / chatRoomSlotsPerAdvertisement)
+    : 0;
+  const { advertisements, isLoadingAdvertisements, trackAdvertisementClick } = useAdvertisements({
     advertisementCount,
     scope: 'chat-list',
   });
@@ -171,7 +194,8 @@ function ChatListPage() {
   return (
     <div className="flex min-h-0 flex-1 flex-col bg-white py-3">
       {rooms.map((room, index) => {
-        const shouldRenderAdvertisement = (index + 1) % chatRoomSlotsPerAdvertisement === 0;
+        const shouldRenderAdvertisement =
+          chatRoomSlotsPerAdvertisement !== null && (index + 1) % chatRoomSlotsPerAdvertisement === 0;
         const advertisement = shouldRenderAdvertisement
           ? advertisements[Math.floor(index / chatRoomSlotsPerAdvertisement)]
           : undefined;
@@ -185,6 +209,9 @@ function ChatListPage() {
             {advertisement && (
               <ChatAdvertisementListItem advertisement={advertisement} onClick={trackAdvertisementClick} />
             )}
+            {!advertisement && shouldRenderAdvertisement && isLoadingAdvertisements && (
+              <ChatAdvertisementListItemSkeleton />
+            )}
           </Fragment>
         );
       })}

src/pages/Club/ClubList/components/AdvertisementCard.tsx

@@ -34,4 +34,19 @@ function AdvertisementCard({ advertisement, onClick }: AdvertisementCardProps) {
   );
 }
 
+export function AdvertisementCardSkeleton() {
+  return (
+    <div aria-hidden="true" className="border-indigo-5 flex w-full items-start gap-3 rounded-2xl border bg-white p-4">
+      <div className="bg-indigo-25 h-12 w-12 shrink-0 animate-pulse rounded-[10px]" />
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center justify-between gap-3">
+          <div className="bg-indigo-25 h-6 w-32 max-w-full animate-pulse rounded" />
+          <div className="bg-indigo-25 h-6 w-14 shrink-0 animate-pulse rounded-full" />
+        </div>
+        <div className="bg-indigo-25 mt-2 h-5 w-40 max-w-full animate-pulse rounded" />
+      </div>
+    </div>
+  );
+}
+
 export default AdvertisementCard;

src/pages/Club/ClubList/index.tsx

@@ -3,7 +3,7 @@ import { useAdvertisementInterval } from '@/utils/hooks/useAdvertisementInterval
 import { useAdvertisements } from '@/utils/hooks/useAdvertisements';
 import { useInfiniteScroll } from '@/utils/hooks/useInfiniteScroll';
 import useScrollRestore from '@/utils/hooks/useScrollRestore';
-import AdvertisementCard from './components/AdvertisementCard';
+import AdvertisementCard, { AdvertisementCardSkeleton } from './components/AdvertisementCard';
 import ClubCard from './components/ClubCard';
 import SearchBar from './components/SearchBar';
 import { useGetClubs } from './hooks/useGetClubs';
@@ -29,8 +29,8 @@ function ClubList() {
     itemCount: allClubs.length,
     enabled: allClubs.length > 0,
   });
-  const advertisementCount = Math.floor(allClubs.length / clubSlotsPerAdvertisement);
-  const { advertisements, trackAdvertisementClick } = useAdvertisements({
+  const advertisementCount = clubSlotsPerAdvertisement ? Math.floor(allClubs.length / clubSlotsPerAdvertisement) : 0;
+  const { advertisements, isLoadingAdvertisements, trackAdvertisementClick } = useAdvertisements({
     advertisementCount,
     scope: 'club-list',
   });
@@ -45,7 +45,8 @@ function ClubList() {
 
         <div className="flex flex-col gap-2">
           {allClubs.map((club, index) => {
-            const shouldRenderAdvertisement = (index + 1) % clubSlotsPerAdvertisement === 0;
+            const shouldRenderAdvertisement =
+              clubSlotsPerAdvertisement !== null && (index + 1) % clubSlotsPerAdvertisement === 0;
             const advertisement = shouldRenderAdvertisement
               ? advertisements[Math.floor(index / clubSlotsPerAdvertisement)]
               : undefined;
@@ -57,6 +58,9 @@ function ClubList() {
                   itemRef={index === 0 ? firstClubCardRef : index === 1 ? secondClubCardRef : undefined}
                 />
                 {advertisement && <AdvertisementCard advertisement={advertisement} onClick={trackAdvertisementClick} />}
+                {!advertisement && shouldRenderAdvertisement && isLoadingAdvertisements && (
+                  <AdvertisementCardSkeleton />
+                )}
               </Fragment>
             );
           })}

src/utils/hooks/useAdvertisementInterval.ts

@@ -1,4 +1,4 @@
-import { startTransition, useEffectEvent, useLayoutEffect, useState, type RefObject } from 'react';
+import { useEffectEvent, useLayoutEffect, useState, type RefObject } from 'react';
 import { useLayoutElementsContext } from '@/contexts/useLayoutElementsContext';
 
 const DEFAULT_ITEMS_PER_ADVERTISEMENT = 4;
@@ -26,7 +26,10 @@ export const useAdvertisementInterval = ({
   enabled,
 }: UseAdvertisementIntervalParams) => {
   const { mainRef, bottomNavRef } = useLayoutElementsContext();
-  const [itemsPerAdvertisement, setItemsPerAdvertisement] = useState<number>(DEFAULT_ITEMS_PER_ADVERTISEMENT);
+  const [itemsPerAdvertisement, setItemsPerAdvertisement] = useState<number | null>(null);
+  const resetAdvertisementInterval = useEffectEvent(() => {
+    setItemsPerAdvertisement((previous) => (previous === null ? previous : null));
+  });
 
   const measureAdvertisementInterval = useEffectEvent(() => {
     const scrollContainer = mainRef.current;
@@ -44,36 +47,29 @@ export const useAdvertisementInterval = ({
       ? Math.max(0, secondItemRect.top - firstItemRect.top - firstItemRect.height)
       : DEFAULT_ITEM_GAP;
     const slotHeight = firstItemRect.height + gap;
-
-    if (availableHeight <= 0 || slotHeight <= 0) {
-      startTransition(() => {
-        setItemsPerAdvertisement((previous) =>
-          previous === DEFAULT_ITEMS_PER_ADVERTISEMENT ? previous : DEFAULT_ITEMS_PER_ADVERTISEMENT
-        );
-      });
-      return;
-    }
-
-    const visibleSlotCount = Math.max(2, Math.floor((availableHeight + gap) / slotHeight));
-    const nextItemsPerAdvertisement = Math.max(1, visibleSlotCount - 1);
-
-    startTransition(() => {
-      setItemsPerAdvertisement((previous) =>
-        previous === nextItemsPerAdvertisement ? previous : nextItemsPerAdvertisement
-      );
-    });
+    const nextItemsPerAdvertisement =
+      availableHeight <= 0 || slotHeight <= 0
+        ? DEFAULT_ITEMS_PER_ADVERTISEMENT
+        : Math.max(1, Math.max(2, Math.floor((availableHeight + gap) / slotHeight)) - 1);
+
+    setItemsPerAdvertisement((previous) =>
+      previous === nextItemsPerAdvertisement ? previous : nextItemsPerAdvertisement
+    );
   });
 
   useLayoutEffect(() => {
-    if (!enabled) return;
+    if (!enabled) {
+      resetAdvertisementInterval();
+      return;
+    }
 
     let frameId = 0;
     const scheduleMeasurement = () => {
       cancelAnimationFrame(frameId);
       frameId = window.requestAnimationFrame(measureAdvertisementInterval);
     };
 
-    scheduleMeasurement();
+    measureAdvertisementInterval();
 
     const visualViewport = window.visualViewport;
     const resizeObserver =

src/utils/hooks/useAdvertisements.ts

@@ -29,9 +29,11 @@ export const useAdvertisements = ({ advertisementCount, scope }: UseAdvertisemen
   const advertisements: Advertisement[] = advertisementQueries
     .flatMap((query) => query.data?.advertisements ?? [])
     .slice(0, advertisementCount);
+  const isLoadingAdvertisements = advertisementQueries.some((query) => query.isPending);
 
   return {
     advertisements,
+    isLoadingAdvertisements,
     trackAdvertisementClick,
   };
 };