diff --git a/src/app/page.tsx b/src/app/page.tsx
index c185752d..abafb5ff 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,15 +1,12 @@
 import type { Metadata } from 'next';
 
-import { InfiniteData } from '@tanstack/react-query';
+import { Suspense } from 'react';
 
-import { API } from '@/api';
 import GroupList from '@/components/pages/group-list';
 import { GroupSearchBar } from '@/components/pages/group-list/group-search-bar';
+import { CardSkeleton } from '@/components/shared/card/card-skeleton';
 import { GROUP_LIST_PAGE_SIZE } from '@/lib/constants/group-list';
 import { generateHomeMetadata } from '@/lib/metadata/home';
-import { GetGroupsResponse } from '@/types/service/group';
-
-export const dynamic = 'force-dynamic';
 
 interface HomePageProps {
   searchParams: Promise<{ keyword?: string }>;
@@ -20,26 +17,25 @@ export const generateMetadata = async ({ searchParams }: HomePageProps): Promise
   return await generateHomeMetadata(params.keyword);
 };
 
-export default async function HomePage({ searchParams }: HomePageProps) {
-  const params = await searchParams;
-  const keyword = params.keyword;
-
-  const response = await API.groupService.getGroups({
-    size: GROUP_LIST_PAGE_SIZE,
-    keyword,
-  });
-
-  // React Query의 useInfiniteQuery에 맞는 initialData 형태로 변환
-  const initialData: InfiniteData<GetGroupsResponse, number | undefined> = {
-    pages: [response],
-    pageParams: [undefined], // 첫 페이지는 cursor가 없으므로 undefined
-  };
-
-  // 초기 데이터를 전달해서 무한 스크롤 시작
+export default async function HomePage(_props: HomePageProps) {
   return (
     <>
       <GroupSearchBar />
-      <GroupList initialData={initialData} initialKeyword={keyword} />
+      <Suspense fallback={<GroupListSkeleton />}>
+        <GroupList />
+      </Suspense>
     </>
   );
 }
+
+const GroupListSkeleton = () => (
+  <section className={`min-h-[calc(100vh-168px)] bg-[#F1F5F9]`}>
+    <div className='flex w-full flex-col px-4 py-4'>
+      <div className='flex w-full flex-col gap-4'>
+        {Array.from({ length: GROUP_LIST_PAGE_SIZE }).map((_, i) => (
+          <CardSkeleton key={i} />
+        ))}
+      </div>
+    </div>
+  </section>
+);
diff --git a/src/components/pages/group-list/group-list-content/index.tsx b/src/components/pages/group-list/group-list-content/index.tsx
new file mode 100644
index 00000000..5df5ba23
--- /dev/null
+++ b/src/components/pages/group-list/group-list-content/index.tsx
@@ -0,0 +1,41 @@
+import { useRouter } from 'next/navigation';
+
+import Card from '@/components/shared/card';
+import { formatDateTime } from '@/lib/formatDateTime';
+import { GroupListItemResponse } from '@/types/service/group';
+
+interface GroupListContentProps {
+  items: GroupListItemResponse[];
+  keyword?: string;
+}
+
+export const GroupListContent = ({ items, keyword }: GroupListContentProps) => {
+  const router = useRouter();
+  const hasKeyword = Boolean(keyword);
+
+  return (
+    <div
+      className={`flex w-full flex-col gap-4 ${hasKeyword ? 'mt-3' : 'py-4'}`}
+      aria-label={hasKeyword ? `${keyword} 검색 결과` : '모임 목록'}
+      role='list'
+    >
+      {items.map((meeting) => (
+        <Card
+          key={meeting.id}
+          dateTime={formatDateTime(meeting.startTime)}
+          images={meeting.images}
+          isFinished={meeting.status === 'FINISHED'}
+          isPending={meeting.myMembership?.status === 'PENDING'}
+          location={meeting.location}
+          maxParticipants={meeting.maxParticipants}
+          nickName={meeting.createdBy.nickName}
+          participantCount={meeting.participantCount}
+          profileImage={meeting.createdBy.profileImage}
+          tags={meeting.tags}
+          title={meeting.title}
+          onClick={() => router.push(`/group/${meeting.id}`)}
+        />
+      ))}
+    </div>
+  );
+};
diff --git a/src/components/pages/group-list/group-list-empty/index.tsx b/src/components/pages/group-list/group-list-empty/index.tsx
new file mode 100644
index 00000000..1bbff78c
--- /dev/null
+++ b/src/components/pages/group-list/group-list-empty/index.tsx
@@ -0,0 +1,32 @@
+import { useRouter } from 'next/navigation';
+
+import { EmptyState } from '@/components/layout/empty-state';
+import { Button } from '@/components/ui';
+import {
+  GROUP_LIST_CREATE_BUTTON_WIDTH,
+  GROUP_LIST_EMPTY_BUTTON_TOP_MARGIN,
+  GROUP_LIST_EMPTY_MIN_HEIGHT,
+} from '@/lib/constants/group-list';
+
+export const GroupListEmpty = () => {
+  const router = useRouter();
+
+  return (
+    <div
+      className={`relative flex ${GROUP_LIST_EMPTY_MIN_HEIGHT} flex-col items-center justify-center py-8`}
+    >
+      <EmptyState>
+        아직 모임이 없어요.
+        <br />
+        지금 바로 모임을 만들어보세요!
+      </EmptyState>
+
+      <Button
+        className={`bg-mint-500 text-text-sm-bold text-mono-white hover:bg-mint-600 active:bg-mint-700 relative z-10 ${GROUP_LIST_EMPTY_BUTTON_TOP_MARGIN} h-10 ${GROUP_LIST_CREATE_BUTTON_WIDTH} rounded-xl`}
+        onClick={() => router.push('/create-group')}
+      >
+        모임 만들기
+      </Button>
+    </div>
+  );
+};
diff --git a/src/components/pages/group-list/group-list-infinite-scroll/index.tsx b/src/components/pages/group-list/group-list-infinite-scroll/index.tsx
new file mode 100644
index 00000000..6007ad49
--- /dev/null
+++ b/src/components/pages/group-list/group-list-infinite-scroll/index.tsx
@@ -0,0 +1,48 @@
+import { type RefObject } from 'react';
+
+interface GroupListInfiniteScrollProps {
+  sentinelRef: RefObject<HTMLDivElement | null>;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  completedMessage: string;
+  hasError: boolean;
+}
+
+export const GroupListInfiniteScroll = ({
+  sentinelRef,
+  hasNextPage,
+  isFetchingNextPage,
+  completedMessage,
+  hasError,
+}: GroupListInfiniteScrollProps) => {
+  if (hasNextPage && !hasError) {
+    return (
+      <>
+        <div ref={sentinelRef} aria-hidden='true' className='h-1' />
+        {isFetchingNextPage && (
+          <div
+            className='py-8 text-center text-gray-500'
+            aria-label='더 많은 모임을 불러오는 중입니다'
+            aria-live='polite'
+            role='status'
+          >
+            <div className='flex items-center justify-center gap-2'>
+              <div className='border-t-mint-500 h-5 w-5 animate-spin rounded-full border-2 border-gray-300' />
+              <span>더 많은 모임을 불러오는 중...</span>
+            </div>
+          </div>
+        )}
+      </>
+    );
+  }
+
+  if (!hasNextPage && !hasError) {
+    return (
+      <div className='py-8 text-center text-gray-500' aria-live='polite' role='status'>
+        {completedMessage}
+      </div>
+    );
+  }
+
+  return null;
+};
diff --git a/src/components/pages/group-list/group-list-loading/index.tsx b/src/components/pages/group-list/group-list-loading/index.tsx
new file mode 100644
index 00000000..39643c71
--- /dev/null
+++ b/src/components/pages/group-list/group-list-loading/index.tsx
@@ -0,0 +1,14 @@
+import { CardSkeleton } from '@/components/shared/card/card-skeleton';
+import { GROUP_LIST_MIN_HEIGHT, GROUP_LIST_PAGE_SIZE } from '@/lib/constants/group-list';
+
+export const GroupListLoading = () => (
+  <section className={`${GROUP_LIST_MIN_HEIGHT} bg-[#F1F5F9]`}>
+    <div className='flex w-full flex-col px-4 py-4'>
+      <div className='flex w-full flex-col gap-4'>
+        {Array.from({ length: GROUP_LIST_PAGE_SIZE }).map((_, i) => (
+          <CardSkeleton key={i} />
+        ))}
+      </div>
+    </div>
+  </section>
+);
diff --git a/src/components/pages/group-list/group-list-search-empty/index.tsx b/src/components/pages/group-list/group-list-search-empty/index.tsx
new file mode 100644
index 00000000..0994c1bc
--- /dev/null
+++ b/src/components/pages/group-list/group-list-search-empty/index.tsx
@@ -0,0 +1,13 @@
+import { EmptyState } from '@/components/layout/empty-state';
+import {
+  GROUP_LIST_SEARCH_EMPTY_HEIGHT,
+  GROUP_LIST_SEARCH_EMPTY_TOP_MARGIN,
+} from '@/lib/constants/group-list';
+
+export const GroupListSearchEmpty = () => (
+  <div
+    className={`relative ${GROUP_LIST_SEARCH_EMPTY_TOP_MARGIN} flex ${GROUP_LIST_SEARCH_EMPTY_HEIGHT} flex-col items-center justify-center`}
+  >
+    <EmptyState>검색 결과가 없어요.</EmptyState>
+  </div>
+);
diff --git a/src/components/pages/group-list/index.tsx b/src/components/pages/group-list/index.tsx
index a6240333..dec1e6d7 100644
--- a/src/components/pages/group-list/index.tsx
+++ b/src/components/pages/group-list/index.tsx
@@ -1,23 +1,24 @@
 'use client';
 
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useSearchParams } from 'next/navigation';
 
-import { InfiniteData } from '@tanstack/react-query';
-
-import { EmptyState } from '@/components/layout/empty-state';
+import { API } from '@/api';
 import { ErrorMessage } from '@/components/shared';
-import Card from '@/components/shared/card';
-import { Button } from '@/components/ui';
-import { useInfiniteGroupList } from '@/hooks/use-group/use-group-infinite-list';
+import { useInfiniteScroll } from '@/hooks/use-group/use-group-infinite-list';
 import { useIntersectionObserver } from '@/hooks/use-intersection-observer';
-import { INTERSECTION_OBSERVER_THRESHOLD } from '@/lib/constants/group-list';
-import { formatDateTime } from '@/lib/formatDateTime';
-import { GetGroupsResponse } from '@/types/service/group';
-
-interface GroupListProps {
-  initialData?: InfiniteData<GetGroupsResponse, number | undefined>;
-  initialKeyword?: string;
-}
+import {
+  GROUP_LIST_MIN_HEIGHT,
+  GROUP_LIST_PAGE_SIZE,
+  INTERSECTION_OBSERVER_THRESHOLD,
+} from '@/lib/constants/group-list';
+import { groupKeys } from '@/lib/query-key/query-key-group';
+import { GroupListItemResponse } from '@/types/service/group';
+
+import { GroupListContent } from './group-list-content';
+import { GroupListEmpty } from './group-list-empty';
+import { GroupListInfiniteScroll } from './group-list-infinite-scroll';
+import { GroupListLoading } from './group-list-loading';
+import { GroupListSearchEmpty } from './group-list-search-empty';
 
 const SearchResultCount = ({ keyword, count }: { keyword: string; count: number }) => (
   <div className='mt-4 flex h-5 items-center pl-2'>
@@ -28,20 +29,42 @@ const SearchResultCount = ({ keyword, count }: { keyword: string; count: number
   </div>
 );
 
-export default function GroupList({ initialData, initialKeyword }: GroupListProps) {
-  const router = useRouter();
+export default function GroupList() {
   const searchParams = useSearchParams();
-  const keywordFromUrl = searchParams.get('keyword') || undefined;
-  const keyword = initialKeyword ?? keywordFromUrl;
-
-  const { items, error, fetchNextPage, hasNextPage, isFetchingNextPage, completedMessage } =
-    useInfiniteGroupList({
-      initialData,
-      initialKeyword: keyword,
-    });
+  const keyword = searchParams.get('keyword') || undefined;
+
+  const queryKey = groupKeys.list({ keyword, size: GROUP_LIST_PAGE_SIZE }) as [
+    'group',
+    'list',
+    { keyword?: string; cursor?: number; size: number },
+  ];
+
+  const {
+    items,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isFetching,
+    isLoading,
+    completedMessage,
+    refetch,
+  } = useInfiniteScroll<GroupListItemResponse, typeof queryKey>({
+    queryFn: async ({ cursor, keyword, size }) => {
+      const response = await API.groupService.getGroups({
+        keyword,
+        cursor,
+        size,
+      });
+      return response;
+    },
+    queryKey,
+    keyword,
+    pageSize: GROUP_LIST_PAGE_SIZE,
+    errorMessage: '모임 목록을 불러오는데 실패했습니다.',
+    completedMessage: '모든 모임을 불러왔습니다.',
+  });
 
-  // IntersectionObserver를 통한 무한 스크롤 감지
-  // React Query의 fetchNextPage를 트리거하는 역할만 수행
   const sentinelRef = useIntersectionObserver({
     onIntersect: () => {
       if (hasNextPage && !isFetchingNextPage) {
@@ -53,84 +76,45 @@ export default function GroupList({ initialData, initialKeyword }: GroupListProp
   });
 
   const hasKeyword = Boolean(keyword);
-  const hasNoItems = items.length === 0 && !error;
+  const hasNoItems = items.length === 0 && !error && !isFetching;
+  const hasError = !!error;
+  const hasItems = items.length > 0;
+
+  if (isLoading) {
+    return <GroupListLoading />;
+  }
 
   return (
-    <section className='min-h-[calc(100vh-168px)] bg-[#F1F5F9]'>
+    <section className={`${GROUP_LIST_MIN_HEIGHT} bg-[#F1F5F9]`}>
       <div className='flex w-full flex-col px-4'>
-        {error && items.length === 0 && (
+        {hasError && !hasItems && (
           <div className='py-4'>
-            <ErrorMessage
-              className='py-12'
-              message={error.message}
-              onRetry={() => window.location.reload()}
-            />
+            <ErrorMessage className='py-12' message={error.message} onRetry={() => refetch()} />
           </div>
         )}
 
         {hasKeyword && keyword && <SearchResultCount keyword={keyword} count={items.length} />}
 
-        {!hasKeyword && hasNoItems && (
-          <div className='relative flex min-h-[calc(100vh-200px)] flex-col items-center justify-center py-8'>
-            <EmptyState>
-              아직 모임이 없어요.
-              <br />
-              지금 바로 모임을 만들어보세요!
-            </EmptyState>
-
-            <Button
-              className='bg-mint-500 text-text-sm-bold text-mono-white hover:bg-mint-600 active:bg-mint-700 relative z-10 mt-[250px] h-10 w-[112px] rounded-xl'
-              onClick={() => router.push('/create-group')}
-            >
-              모임 만들기
-            </Button>
-          </div>
-        )}
+        {!hasKeyword && hasNoItems && <GroupListEmpty />}
 
-        {hasKeyword && hasNoItems && (
-          <div className='relative mt-[174px] flex h-[200px] flex-col items-center justify-center'>
-            <EmptyState>검색 결과가 없어요.</EmptyState>
-          </div>
-        )}
+        {hasKeyword && hasNoItems && <GroupListSearchEmpty />}
 
-        {items.length > 0 && (
-          <div className={`flex w-full flex-col gap-4 ${hasKeyword ? 'mt-3' : 'py-4'}`}>
-            {items.map((meeting) => (
-              <Card
-                key={meeting.id}
-                dateTime={formatDateTime(meeting.startTime)}
-                images={meeting.images}
-                isFinished={meeting.status === 'FINISHED'}
-                isPending={meeting.myMembership?.status === 'PENDING'}
-                location={meeting.location}
-                maxParticipants={meeting.maxParticipants}
-                nickName={meeting.createdBy.nickName}
-                participantCount={meeting.participantCount}
-                profileImage={meeting.createdBy.profileImage}
-                tags={meeting.tags}
-                title={meeting.title}
-                onClick={() => router.push(`/group/${meeting.id}`)}
-              />
-            ))}
-          </div>
-        )}
+        {hasItems && <GroupListContent keyword={keyword} items={items} />}
 
-        {error && items.length > 0 && (
+        {hasError && hasItems && (
           <div className='py-4'>
-            <ErrorMessage
-              className='py-8'
-              message={error.message}
-              onRetry={() => window.location.reload()}
-            />
+            <ErrorMessage className='py-8' message={error.message} onRetry={() => refetch()} />
           </div>
         )}
 
-        {/* sentinel 요소 생성: hasNextPage가 true이고 에러가 없으면 렌더 */}
-        {hasNextPage && !error && items.length > 0 && <div ref={sentinelRef} className='h-1' />}
-
-        {/* hasNextPage가 false이면 모든 데이터를 불러온 상태 */}
-        {!hasNextPage && items.length > 0 && !error && (
-          <div className='py-8 text-center text-gray-500'>{completedMessage}</div>
+        {hasItems && (
+          <GroupListInfiniteScroll
+            completedMessage={completedMessage}
+            hasError={hasError}
+            hasNextPage={hasNextPage}
+            isFetchingNextPage={isFetchingNextPage}
+            sentinelRef={sentinelRef}
+          />
         )}
       </div>
     </section>
diff --git a/src/components/shared/card/card-skeleton/index.tsx b/src/components/shared/card/card-skeleton/index.tsx
new file mode 100644
index 00000000..0271dfb8
--- /dev/null
+++ b/src/components/shared/card/card-skeleton/index.tsx
@@ -0,0 +1,39 @@
+export const CardSkeleton = () => {
+  return (
+    <div className='bg-mono-white flex w-full animate-pulse rounded-3xl p-4 shadow-sm'>
+      <div className='flex w-full min-w-0 gap-4'>
+        <div className='flex flex-col justify-between'>
+          <div className='h-32 w-32 rounded-xl bg-gray-200' />
+          <div className='mt-3 flex items-center gap-2'>
+            <div className='h-6 w-6 rounded-full bg-gray-200' />
+            <div className='h-4 w-16 rounded bg-gray-200' />
+          </div>
+        </div>
+
+        <div className='flex min-w-0 flex-1 flex-col justify-between'>
+          <div>
+            <div className='mb-2 h-6 w-3/4 rounded bg-gray-200' />
+
+            <div className='mb-3 flex gap-2'>
+              <div className='h-5 w-16 rounded-full bg-gray-200' />
+              <div className='h-5 w-16 rounded-full bg-gray-200' />
+            </div>
+
+            <div className='mb-3 flex flex-col gap-1'>
+              <div className='flex items-center gap-2'>
+                <div className='h-4 w-4 rounded bg-gray-200' />
+                <div className='h-4 w-32 rounded bg-gray-200' />
+              </div>
+              <div className='flex items-center gap-2'>
+                <div className='h-4 w-4 rounded bg-gray-200' />
+                <div className='h-4 w-40 rounded bg-gray-200' />
+              </div>
+            </div>
+
+            <div className='h-2 w-full rounded-full bg-gray-200' />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/hooks/use-group/use-group-infinite-list/index.ts b/src/hooks/use-group/use-group-infinite-list/index.ts
index 0c007e94..1c1540ab 100644
--- a/src/hooks/use-group/use-group-infinite-list/index.ts
+++ b/src/hooks/use-group/use-group-infinite-list/index.ts
@@ -1,14 +1,6 @@
 import { useMemo } from 'react';
 
-import { InfiniteData, useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
-
-import { API } from '@/api';
-import { GROUP_LIST_PAGE_SIZE } from '@/lib/constants/group-list';
-import { GetGroupsResponse, GroupListItemResponse } from '@/types/service/group';
-
-// 기본 타입 (그룹 목록용)
-type GroupInfiniteData = InfiniteData<GetGroupsResponse, number | undefined>;
-type GroupQueryKey = ['groups', string | undefined];
+import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query';
 
 const STALE_TIME = 3 * 1000; // 3초
 const DEFAULT_ERROR_MESSAGE = '데이터를 불러오는데 실패했습니다.';
@@ -20,7 +12,10 @@ export interface InfiniteScrollResponse<T> {
 }
 
 // 범용 무한 스크롤 파라미터 타입
-export interface UseInfiniteScrollParams<TItem, TQueryKey extends unknown[] = unknown[]> {
+export interface UseInfiniteScrollParams<
+  TItem,
+  TQueryKey extends readonly unknown[] = readonly unknown[],
+> {
   queryFn: (params: {
     cursor?: number;
     keyword?: string;
@@ -28,13 +23,10 @@ export interface UseInfiniteScrollParams<TItem, TQueryKey extends unknown[] = un
   }) => Promise<InfiniteScrollResponse<TItem>>;
 
   queryKey: TQueryKey;
-  initialData?: InfiniteData<InfiniteScrollResponse<TItem>, number | undefined>;
   keyword?: string;
   pageSize?: number;
   staleTime?: number;
   errorMessage?: string;
-  // 콘솔 로그 활성화 여부 (선택, 기본값: true)
-  enableLogging?: boolean;
   // 모든 데이터 로드 완료 메시지 (선택, 기본값: "모든 데이터를 불러왔습니다.")
   completedMessage?: string;
   enabled?: boolean;
@@ -49,120 +41,61 @@ export interface UseInfiniteScrollReturn<TItem> {
   hasNextPage: boolean;
   isFetchingNextPage: boolean;
   isFetching: boolean;
+  isLoading: boolean;
   refetch: () => void;
   // 모든 데이터 로드 완료시 메시지
   completedMessage: string;
 }
 
-// 그룹 목록 전용 파라미터
-interface UseInfiniteGroupListParams {
-  initialData?: GroupInfiniteData;
-  initialKeyword?: string;
-}
-
-// 그룹 목록 전용 반환 타입
-interface UseInfiniteGroupListReturn {
-  items: GroupListItemResponse[];
-  nextCursor: number | null;
-  error: Error | null;
-  fetchNextPage: () => void;
-  hasNextPage: boolean;
-  isFetchingNextPage: boolean;
-  isFetching: boolean;
-  refetch: () => void;
-  completedMessage: string;
-}
-
-/**
- * 범용 Cursor Pagination 기반 무한 스크롤 커스텀 훅
- * React Query의 useInfiniteQuery를 활용하여 자동 중복 호출 방지, 요청 상태 관리, 캐싱 처리
- * 다른 페이지에서도 재사용 가능한 상태입니당 (pr 참고)
- */
 // eslint-disable-next-line func-style
-export function useInfiniteScroll<TItem, TQueryKey extends unknown[] = unknown[]>({
+export function useInfiniteScroll<
+  TItem,
+  TQueryKey extends readonly unknown[] = readonly unknown[],
+>({
   queryFn,
   queryKey,
-  initialData,
   keyword,
   pageSize = 10,
   staleTime = STALE_TIME,
   errorMessage = DEFAULT_ERROR_MESSAGE,
-  enableLogging = true,
   enabled = true,
   completedMessage = '모든 데이터를 불러왔습니다.',
 }: UseInfiniteScrollParams<TItem, TQueryKey>): UseInfiniteScrollReturn<TItem> {
-  const queryClient = useQueryClient();
-
   type InfiniteScrollData = InfiniteData<InfiniteScrollResponse<TItem>, number | undefined>;
 
-  const { data, error, fetchNextPage, hasNextPage, isFetchingNextPage, isFetching, refetch } =
-    useInfiniteQuery<
-      InfiniteScrollResponse<TItem>,
-      Error,
-      InfiniteScrollData,
-      TQueryKey,
-      number | undefined
-    >({
-      queryKey,
-      enabled,
-      queryFn: async ({ pageParam }) => {
-        // 다음 페이지 요청 시작 로그
-        if (pageParam !== undefined && enableLogging) {
-          const queryData = queryClient.getQueryData<InfiniteScrollData>(queryKey);
-          const currentItemsCount =
-            queryData?.pages.flatMap((page: InfiniteScrollResponse<TItem>) => page.items).length ??
-            0;
-
-          console.log('다음 페이지 요청 시작', {
-            '요청 크기': pageSize,
-            '현재 커서': pageParam,
-            '현재 누적 데이터 개수': currentItemsCount,
-            키워드: keyword || '없음',
-          });
-        }
-
-        const response = await queryFn({
-          cursor: pageParam,
-          keyword,
-          size: pageSize,
-        });
-
-        // 다음 페이지 요청 완료 로그
-        if (pageParam !== undefined && enableLogging) {
-          const queryData = queryClient.getQueryData<InfiniteScrollData>(queryKey);
-          const previousItemsCount =
-            queryData?.pages.flatMap((page: InfiniteScrollResponse<TItem>) => page.items).length ??
-            0;
-          const newItemsCount = previousItemsCount + response.items.length;
-
-          console.log('다음 페이지 요청 완료', {
-            '요청 크기': pageSize,
-            '받은 데이터 개수': response.items.length,
-            '이전 누적 데이터 개수': previousItemsCount,
-            '새로운 누적 데이터 개수': newItemsCount,
-            '다음 커서': response.nextCursor,
-            키워드: keyword || '없음',
-          });
-
-          if (response.nextCursor === null) {
-            console.log('모든 데이터 로드 완료', {
-              '총 데이터 개수': newItemsCount,
-              키워드: keyword || '없음',
-              메시지: completedMessage,
-            });
-          }
-        }
+  const {
+    data,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isFetching,
+    isLoading,
+    refetch,
+  } = useInfiniteQuery<
+    InfiniteScrollResponse<TItem>,
+    Error,
+    InfiniteScrollData,
+    TQueryKey,
+    number | undefined
+  >({
+    queryKey,
+    enabled,
+    queryFn: async ({ pageParam }) => {
+      const response = await queryFn({
+        cursor: pageParam,
+        keyword,
+        size: pageSize,
+      });
 
-        return response;
-      },
-      initialPageParam: undefined,
-      getNextPageParam: (lastPage) => {
-        // nextCursor가 null이면 더 이상 요청하지 않음
-        return lastPage.nextCursor ?? undefined;
-      },
-      initialData: initialData as InfiniteScrollData | undefined,
-      staleTime,
-    });
+      return response;
+    },
+    initialPageParam: undefined,
+    getNextPageParam: (lastPage) => {
+      return lastPage.nextCursor ?? undefined;
+    },
+    staleTime,
+  });
 
   // 여러 페이지의 아이템을 하나의 배열로 합치기
   const items = useMemo(() => {
@@ -192,37 +125,8 @@ export function useInfiniteScroll<TItem, TQueryKey extends unknown[] = unknown[]
     hasNextPage: hasNextPage ?? false,
     isFetchingNextPage,
     isFetching,
+    isLoading,
     refetch,
     completedMessage,
   };
 }
-
-/**
- * 그룹 목록 전용 무한 스크롤 훅
- * 내부적으로 useInfiniteScroll을 사용
- */
-export const useInfiniteGroupList = ({
-  initialData,
-  initialKeyword,
-}: UseInfiniteGroupListParams): UseInfiniteGroupListReturn => {
-  const queryKey: GroupQueryKey = ['groups', initialKeyword];
-
-  return useInfiniteScroll<GroupListItemResponse, GroupQueryKey>({
-    queryFn: async ({ cursor, keyword, size }) => {
-      const response = await API.groupService.getGroups({
-        keyword,
-        cursor,
-        size,
-      });
-      return response;
-    },
-    queryKey,
-    initialData,
-    keyword: initialKeyword,
-    pageSize: GROUP_LIST_PAGE_SIZE,
-    staleTime: STALE_TIME,
-    errorMessage: '모임 목록을 불러오는데 실패했습니다.',
-    enableLogging: true,
-    completedMessage: '모든 모임을 불러왔습니다.',
-  });
-};
diff --git a/src/hooks/use-intersection-observer/index.ts b/src/hooks/use-intersection-observer/index.ts
index f0921095..ed545010 100644
--- a/src/hooks/use-intersection-observer/index.ts
+++ b/src/hooks/use-intersection-observer/index.ts
@@ -10,12 +10,17 @@ interface UseIntersectionObserverParams {
 }
 
 export const useIntersectionObserver = ({
-  onIntersect, // 요소가 화면에 보일 때 실행할 콜백 함수
-  enabled = true, // observer 활성화 여부 (기본값: true)
-  threshold = INTERSECTION_OBSERVER_THRESHOLD, // 요소가 얼마나 보여야 감지할지 (기본값: 10%로 설정)
-  root = null, // 관찰 기준 요소 (기본값: null = 뷰포트)
+  onIntersect,
+  enabled = true,
+  threshold = INTERSECTION_OBSERVER_THRESHOLD,
+  root = null,
 }: UseIntersectionObserverParams) => {
   const targetRef = useRef<HTMLDivElement>(null);
+  const onIntersectRef = useRef(onIntersect);
+
+  useEffect(() => {
+    onIntersectRef.current = onIntersect;
+  }, [onIntersect]);
 
   useEffect(() => {
     const target = targetRef.current;
@@ -24,7 +29,7 @@ export const useIntersectionObserver = ({
     const observer = new IntersectionObserver(
       (entries) => {
         if (entries[0]?.isIntersecting) {
-          onIntersect();
+          onIntersectRef.current();
         }
       },
       {
@@ -38,7 +43,7 @@ export const useIntersectionObserver = ({
     return () => {
       observer.disconnect();
     };
-  }, [onIntersect, enabled, threshold, root]);
+  }, [enabled, threshold, root]);
 
   return targetRef;
 };
diff --git a/src/lib/constants/group-list.ts b/src/lib/constants/group-list.ts
index 7856d7ff..733bbb53 100644
--- a/src/lib/constants/group-list.ts
+++ b/src/lib/constants/group-list.ts
@@ -1,2 +1,12 @@
 export const GROUP_LIST_PAGE_SIZE = 10 as const;
 export const INTERSECTION_OBSERVER_THRESHOLD = 0.1 as const;
+
+// 레이아웃 상수
+export const GROUP_LIST_MIN_HEIGHT = 'min-h-[calc(100vh-168px)]' as const;
+export const GROUP_LIST_EMPTY_MIN_HEIGHT = 'min-h-[calc(100vh-200px)]' as const;
+
+// EmptyState 레이아웃 상수
+export const GROUP_LIST_EMPTY_BUTTON_TOP_MARGIN = 'mt-[250px]' as const;
+export const GROUP_LIST_SEARCH_EMPTY_TOP_MARGIN = 'mt-[174px]' as const;
+export const GROUP_LIST_SEARCH_EMPTY_HEIGHT = 'h-[200px]' as const;
+export const GROUP_LIST_CREATE_BUTTON_WIDTH = 'w-[112px]' as const;