[Fix] 스케줄 페이지 구조 리팩토링 및 스켈레톤 추가

src/app/schedule/_components/current.tsx → src/app/schedule/_components/current/index.tsx

@@ -3,22 +3,25 @@
 import { API } from '@/api';
 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 { 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 { Meetings } from './meetings';
+import { Meetings } from '../meetings/index';
 
 export default function Current() {
+  const queryKey = groupKeys.myGroupsList('current') as ['myGroups', 'current'];
+
   const {
     items,
     error,
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
-    isFetching,
+    isLoading,
     completedMessage,
-  } = useInfiniteScroll<GroupListItemResponse>({
+    refetch,
+  } = useInfiniteScroll<GroupListItemResponse, typeof queryKey>({
     queryFn: async ({ cursor, size }) => {
       return await API.groupService.getMyGroups({
         type: 'current',
@@ -27,8 +30,8 @@ export default function Current() {
         myStatuses: ['ATTEND', 'PENDING'],
       });
     },
-    queryKey: groupKeys.myGroupsList('current') as ['myGroups', 'current'],
-    pageSize: 10,
+    queryKey,
+    pageSize: GROUP_LIST_PAGE_SIZE,
     errorMessage: '현재 모임 목록을 불러오는데 실패했습니다.',
     completedMessage: '모든 현재 모임을 불러왔습니다.',
   });
@@ -45,12 +48,14 @@ export default function Current() {
 
   return (
     <Meetings
+      refetch={refetch}
       completedMessage={completedMessage}
       emptyStatePath='/'
       emptyStateType='current'
       error={error}
       hasNextPage={hasNextPage}
-      isLoading={isFetching && items.length === 0}
+      isFetchingNextPage={isFetchingNextPage}
+      isLoading={isLoading}
       meetings={items}
       sentinelRef={sentinelRef}
       showActions={true}

src/app/schedule/_components/history.tsx → src/app/schedule/_components/history/index.tsx

@@ -3,27 +3,30 @@
 import { API } from '@/api';
 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 { 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 { Meetings } from './meetings';
+import { Meetings } from '../meetings/index';
 
 export default function History() {
+  const queryKey = groupKeys.myGroupsList('past') as ['myGroups', 'past'];
+
   const {
     items,
     error,
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
-    isFetching,
+    isLoading,
     completedMessage,
-  } = useInfiniteScroll<GroupListItemResponse>({
+    refetch,
+  } = useInfiniteScroll<GroupListItemResponse, typeof queryKey>({
     queryFn: async ({ cursor, size }) => {
       return await API.groupService.getMyGroups({ type: 'past', cursor, size });
     },
-    queryKey: groupKeys.myGroupsList('past') as ['myGroups', 'past'],
-    pageSize: 10,
+    queryKey,
+    pageSize: GROUP_LIST_PAGE_SIZE,
     errorMessage: '모임 이력을 불러오는데 실패했습니다.',
     completedMessage: '모든 모임 이력을 불러왔습니다.',
   });
@@ -40,12 +43,14 @@ export default function History() {
 
   return (
     <Meetings
+      refetch={refetch}
       completedMessage={completedMessage}
       emptyStatePath='/'
       emptyStateType='past'
       error={error}
       hasNextPage={hasNextPage}
-      isLoading={isFetching && items.length === 0}
+      isFetchingNextPage={isFetchingNextPage}
+      isLoading={isLoading}
       meetings={items}
       sentinelRef={sentinelRef}
       showActions={false}

src/app/schedule/_components/constants.tsx → src/app/schedule/_components/meetings/constants.tsx

@@ -3,6 +3,7 @@ import { type ReactNode } from 'react';
 export type TabType = 'current' | 'myPost' | 'past';
 
 const DEFAULT_BUTTON_WIDTH = 'w-31';
+export const SCHEDULE_MIN_HEIGHT = 'min-h-[calc(100vh-156px)]' as const;
 
 export const EMPTY_STATE_CONFIG: Record<
   TabType,

src/app/schedule/_components/meetings/index.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { type RefObject } from 'react';
+
+import { ErrorMessage } from '@/components/shared';
+import { GroupListItemResponse } from '@/types/service/group';
+
+import { type TabType } from './constants';
+import { MeetingsContent } from './meetings-content';
+import { MeetingsEmpty } from './meetings-empty';
+import { MeetingsInfiniteScroll } from './meetings-infinite-scroll';
+import { MeetingsLoading } from './meetings-loading';
+
+type MeetingsProps = {
+  meetings: GroupListItemResponse[];
+  tabType: TabType;
+  emptyStateType: TabType;
+  emptyStatePath: string;
+  showActions: boolean;
+  error?: Error | null;
+  hasNextPage?: boolean;
+  isLoading?: boolean;
+  isFetchingNextPage?: boolean;
+  sentinelRef?: RefObject<HTMLDivElement | null>;
+  completedMessage?: string;
+  refetch?: () => Promise<unknown>;
+};
+
+export const Meetings = ({
+  meetings,
+  tabType,
+  emptyStateType,
+  emptyStatePath,
+  showActions,
+  error,
+  hasNextPage,
+  isLoading,
+  isFetchingNextPage,
+  sentinelRef,
+  completedMessage,
+  refetch,
+}: MeetingsProps) => {
+  const isEmpty = meetings.length === 0;
+  const hasError = !!error;
+  const hasItems = meetings.length > 0;
+  const hasNoItems = isEmpty && !error && !isLoading;
+  const showErrorOnly = hasError && isEmpty;
+  const showErrorWithData = hasError && !isEmpty;
+  const showEmptyState = hasNoItems;
+
+  const handleRetry = () => {
+    if (refetch) {
+      refetch();
+    } else {
+      window.location.reload();
+    }
+  };
+
+  if (isLoading) {
+    return <MeetingsLoading />;
+  }
+
+  return (
+    <>
+      {showEmptyState && (
+        <MeetingsEmpty emptyStatePath={emptyStatePath} emptyStateType={emptyStateType} />
+      )}
+
+      {hasItems && (
+        <section className='flex w-full flex-col gap-4 px-4 py-4'>
+          {showErrorOnly && (
+            <div className='py-4'>
+              <ErrorMessage className='py-12' message={error.message} onRetry={handleRetry} />
+            </div>
+          )}
+
+          <MeetingsContent meetings={meetings} showActions={showActions} tabType={tabType} />
+
+          {showErrorWithData && (
+            <div className='py-4'>
+              <ErrorMessage className='py-8' message={error.message} onRetry={handleRetry} />
+            </div>
+          )}
+
+          <MeetingsInfiniteScroll
+            completedMessage={completedMessage || ''}
+            hasError={hasError}
+            hasNextPage={hasNextPage || false}
+            isFetchingNextPage={isFetchingNextPage || false}
+            sentinelRef={sentinelRef}
+          />
+        </section>
+      )}
+    </>
+  );
+};