From 2dc57a4ee7c94a04663bfcc3aaf82ee8943f8478 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A4=80=EC=98=81?= <ff1451@gmail.com>
Date: Tue, 24 Mar 2026 20:30:36 +0900
Subject: [PATCH 1/2] =?UTF-8?q?refactor:=20=EA=B4=91=EA=B3=A0=20=EA=B0=9C?=
 =?UTF-8?q?=EC=88=98=20=EC=B8=A1=EC=A0=95=20=EC=8B=9C=EA=B8=B0=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20=EB=B0=8F=20=EA=B8=B0=EB=B3=B8=EA=B0=92=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/hooks/useAdvertisementInterval.ts | 40 ++++++++++-----------
 src/utils/hooks/useAdvertisements.ts        |  2 ++
 2 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/utils/hooks/useAdvertisementInterval.ts b/src/utils/hooks/useAdvertisementInterval.ts
index f2becfc..be73929 100644
--- a/src/utils/hooks/useAdvertisementInterval.ts
+++ b/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,28 +47,21 @@ 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 = () => {
@@ -73,7 +69,7 @@ export const useAdvertisementInterval = ({
       frameId = window.requestAnimationFrame(measureAdvertisementInterval);
     };
 
-    scheduleMeasurement();
+    measureAdvertisementInterval();
 
     const visualViewport = window.visualViewport;
     const resizeObserver =
diff --git a/src/utils/hooks/useAdvertisements.ts b/src/utils/hooks/useAdvertisements.ts
index 86b2a24..d562c4a 100644
--- a/src/utils/hooks/useAdvertisements.ts
+++ b/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,
   };
 };

From 0d7246f4a1b556267960b184df2490b4b4ba2c6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A4=80=EC=98=81?= <ff1451@gmail.com>
Date: Tue, 24 Mar 2026 20:30:56 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EC=8A=A4=EC=BC=88=EB=A0=88?=
 =?UTF-8?q?=ED=86=A4=20UI=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Chat/index.tsx                      | 33 +++++++++++++++++--
 .../ClubList/components/AdvertisementCard.tsx | 15 +++++++++
 src/pages/Club/ClubList/index.tsx             | 12 ++++---
 3 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/src/pages/Chat/index.tsx b/src/pages/Chat/index.tsx
index a8959cc..670cc11 100644
--- a/src/pages/Chat/index.tsx
+++ b/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>
         );
       })}
diff --git a/src/pages/Club/ClubList/components/AdvertisementCard.tsx b/src/pages/Club/ClubList/components/AdvertisementCard.tsx
index 69f1ec4..8261106 100644
--- a/src/pages/Club/ClubList/components/AdvertisementCard.tsx
+++ b/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;
diff --git a/src/pages/Club/ClubList/index.tsx b/src/pages/Club/ClubList/index.tsx
index daa27e6..c36a5b0 100644
--- a/src/pages/Club/ClubList/index.tsx
+++ b/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>
             );
           })}