[Refactor] WTH-358 : 출석 어드민 기수 조회 시 전체 기수 부터 표시되게 수정

src/components/admin/attendance/AttendanceCard.tsx

@@ -10,6 +10,7 @@ import {
   Button,
   Icon,
   Badge,
+  Skeleton,
 } from '@/components/ui';
 import type { AttendanceMember } from '@/types/admin/attendance';
 import { cn } from '@/lib/cn';
@@ -27,6 +28,7 @@ interface AttendanceCardProps extends React.HTMLAttributes<HTMLDivElement> {
   onDirtyChange?: (dirty: boolean) => void;
   onExpand?: () => void;
   isSaving?: boolean;
+  isMembersLoading?: boolean;
   defaultExpanded?: boolean;
 }
 
@@ -40,6 +42,7 @@ function AttendanceCard({
   onDirtyChange,
   onExpand,
   isSaving = false,
+  isMembersLoading = false,
   defaultExpanded = false,
   ...props
 }: AttendanceCardProps) {
@@ -156,7 +159,19 @@ function AttendanceCard({
           <AttendanceTableRow isEditing={isEditing} position="top" />
 
           {/* Member rows */}
-          {filteredMembers.length > 0 ? (
+          {isMembersLoading ? (
+            Array.from({ length: 5 }, (_, i) => (
+              <div key={i} className="border-line flex border-r border-b border-l">
+                <div className="flex min-w-0 flex-1 flex-col gap-200 px-400 py-300">
+                  <Skeleton className="h-[20px] w-24 rounded-sm" />
+                  <Skeleton className="h-[16px] w-40 rounded-sm" />
+                </div>
+                <div className="border-line flex w-[158px] items-center justify-center border-l">
+                  <Skeleton className="h-[20px] w-16 rounded-sm" />
+                </div>
+              </div>
+            ))
+          ) : filteredMembers.length > 0 ? (
             filteredMembers.map((member) => (
               <AttendanceMemberRow
                 key={member.id}

src/components/admin/attendance/AttendancePageContent.tsx

@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useSearchParams } from 'next/navigation';
 
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, Card } from '@/components/ui';
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, Card, Skeleton } from '@/components/ui';
 import { CardinalDropdown } from '@/components/admin';
 import { useNavigationGuard, useCardinalSelector } from '@/hooks';
 import { useFlattenedSessions } from '@/hooks/admin';
@@ -12,9 +12,7 @@ import { formatKoreanDate } from '@/lib/formatTime';
 import { AttendanceSessionCard } from './AttendanceSessionCard';
 
 function AttendancePageContent() {
-  const { cardinals, setSelectedCardinalId, activeCardinal } = useCardinalSelector({
-    autoSelectLatest: true,
-  });
+  const { cardinals, setSelectedCardinalId, activeCardinal } = useCardinalSelector();
   const [dirtyCardIds, setDirtyCardIds] = useState<Set<number>>(new Set());
   const [pendingCardinalId, setPendingCardinalId] = useState<number | null>(null);
   const [cardinalDialogOpen, setCardinalDialogOpen] = useState(false);
@@ -32,7 +30,7 @@ function AttendancePageContent() {
   }, []);
 
   const handleCardinalSelect = useCallback(
-    (id: number) => {
+    (id: number | null) => {
       if (isDirty) {
         setPendingCardinalId(id);
         setCardinalDialogOpen(true);
@@ -53,7 +51,7 @@ function AttendancePageContent() {
   };
 
   const cardinalNumber = activeCardinal?.cardinalNumber ?? null;
-  const { sessions } = useFlattenedSessions(cardinalNumber);
+  const { sessions, isLoading } = useFlattenedSessions(cardinalNumber);
 
   const searchParams = useSearchParams();
   const targetSessionIdParam = searchParams.get('sessionId');
@@ -73,36 +71,42 @@ function AttendancePageContent() {
   }, [sessions, targetSessionId]);
 
   return (
-    <div className="flex min-w-3xl flex-col gap-400 p-700">
+    <div className="flex min-w-0 flex-col gap-400 p-700">
       <CardinalDropdown
         cardinals={cardinals}
         activeCardinal={activeCardinal}
         onSelect={handleCardinalSelect}
+        onSelectAll={() => handleCardinalSelect(null)}
       />
 
-      {sessions.length > 0 ? (
-        <Card className="mt-400 gap-400 px-600 pt-600 pb-[64px]">
-          {sessions.map((session) => {
-            const isTarget = session.id === targetSessionId;
-            return (
-              <div key={session.id} ref={isTarget ? targetCardRef : undefined}>
-                <AttendanceSessionCard
-                  sessionId={session.id}
-                  date={formatKoreanDate(new Date(session.start))}
-                  title={session.title}
-                  isCurrentWeek={session.isCurrentWeek}
-                  defaultExpanded={isTarget}
-                  onDirtyChange={handleDirtyChange}
-                />
-              </div>
-            );
-          })}
+      {isLoading ? (
+        <Card className="mt-400 gap-400 overflow-x-auto px-600 pt-600 pb-[64px]">
+          <div className="min-w-172.5">
+            {Array.from({ length: 4 }, (_, i) => (
+              <Skeleton key={i} className="mt-400 h-[72px] w-full rounded-md first:mt-0" />
+            ))}
+          </div>
+        </Card>
+      ) : sessions.length > 0 ? (
+        <Card className="mt-400 gap-400 overflow-x-auto px-600 pt-600 pb-[64px]">
+          <div className="flex min-w-172.5 flex-col gap-400">
+            {sessions.map((session) => (
+              <AttendanceSessionCard
+                key={session.id}
+                sessionId={session.id}
+                date={formatKoreanDate(new Date(session.start))}
+                title={session.title}
+                isCurrentWeek={session.isCurrentWeek}
+                onDirtyChange={handleDirtyChange}
+              />
+            ))}
+          </div>
         </Card>
       ) : (
-        <Card className="mt-400 flex items-center justify-center px-600 py-800">
-          <span className="typo-body1 text-text-alternative">
-            {activeCardinal ? '등록된 정기모임이 없습니다.' : '기수를 선택해 주세요.'}
-          </span>
+        <Card className="mt-400 flex items-center justify-center overflow-x-auto px-600 py-800">
+          <div className="min-w-172.5 text-center">
+            <span className="typo-body1 text-text-alternative">등록된 정기모임이 없습니다.</span>
+          </div>
         </Card>
       )}
 

src/components/admin/attendance/AttendanceSessionCard.tsx

@@ -24,7 +24,7 @@ function AttendanceSessionCard({
   onDirtyChange,
 }: AttendanceSessionCardProps) {
   const [expanded, setExpanded] = useState(defaultExpanded);
-  const { data: members = [] } = useAdminAttendance(sessionId, { enabled: expanded });
+  const { data: members = [], isLoading } = useAdminAttendance(sessionId, { enabled: expanded });
   const { mutateAsync, isPending } = useUpdateAttendanceStatus(sessionId);
 
   const handleDirtyChange = (dirty: boolean) => onDirtyChange?.(sessionId, dirty);
@@ -40,6 +40,7 @@ function AttendanceSessionCard({
       isCurrentWeek={isCurrentWeek}
       defaultExpanded={defaultExpanded}
       members={members}
+      isMembersLoading={isLoading}
       onSave={handleSave}
       onDirtyChange={handleDirtyChange}
       onExpand={() => setExpanded(true)}

src/hooks/queries/admin/useAdminAttendanceQueries.ts

@@ -13,10 +13,10 @@ export function useAdminSessions(cardinal: number | null) {
   return useQuery({
     queryKey: ['admin', 'sessions', clubId, cardinal],
     queryFn: async () => {
-      const res = await adminAttendanceApi.getSessions(clubId!, cardinal!);
+      const res = await adminAttendanceApi.getSessions(clubId!, cardinal ?? undefined);
       return res.data.data;
     },
-    enabled: !!clubId && cardinal !== null,
+    enabled: !!clubId,
   });
 }
 

src/lib/apis/adminAttendance.ts

@@ -7,9 +7,9 @@ import type {
 } from '@/types/admin/attendance';
 
 export const adminAttendanceApi = {
-  getSessions: (clubId: string, cardinal: number) =>
+  getSessions: (clubId: string, cardinal?: number) =>
     apiClient.get<ApiResponse<SessionListResponse>>(`/admin/clubs/${clubId}/sessions`, {
-      params: { cardinal },
+      params: cardinal != null ? { cardinal } : undefined,
     }),
 
   getAttendanceBySession: (clubId: string, sessionId: number) =>