최근 변경 앱 페이지네이션 적용

devfront/src/features/clients/ClientsPage.tsx

@@ -86,6 +86,9 @@ type RecentClientChange = {
   detailLabels: Array<{ label: string; value: string }>;
 };
 
+const recentClientChangesInitialCount = 5;
+const recentClientChangesBatchSize = 5;
+
 const recentClientActions = new Set([
   "CREATE_CLIENT",
   "UPDATE_CLIENT",
@@ -317,6 +320,8 @@ function ClientsPage() {
   const [isRequestModalOpen, setIsRequestModalOpen] = useState(false);
   const [isRecentChangesGuideOpen, setIsRecentChangesGuideOpen] =
     useState(false);
+  const [visibleRecentClientChangesCount, setVisibleRecentClientChangesCount] =
+    useState(recentClientChangesInitialCount);
   const [sortConfig, setSortConfig] =
     useState<SortConfig<ClientSortKey> | null>({
       key: "createdAt",
@@ -501,7 +506,10 @@ function ClientsPage() {
         };
       })
       .filter((item): item is RecentClientChange => Boolean(item))
-      .slice(0, 4);
+      .sort(
+        (left, right) =>
+          new Date(right.timestamp).getTime() - new Date(left.timestamp).getTime(),
+      );
   }, [clients, recentAuditData?.items]);
 
   const recentClientActorIds = useMemo(() => {
@@ -543,6 +551,32 @@ function ClientsPage() {
     return new Set(recentClientChangesWithActors.map((item) => item.clientId)).size;
   }, [recentClientChangesWithActors]);
 
+  const visibleRecentClientChanges = useMemo(() => {
+    return recentClientChangesWithActors.slice(
+      0,
+      visibleRecentClientChangesCount,
+    );
+  }, [recentClientChangesWithActors, visibleRecentClientChangesCount]);
+
+  const hasMoreRecentClientChanges =
+    recentClientChangesWithActors.length > visibleRecentClientChanges.length;
+
+  useEffect(() => {
+    if (
+      visibleRecentClientChangesCount > recentClientChangesWithActors.length
+    ) {
+      setVisibleRecentClientChangesCount(
+        Math.max(
+          recentClientChangesInitialCount,
+          recentClientChangesWithActors.length,
+        ),
+      );
+    }
+  }, [
+    recentClientChangesWithActors.length,
+    visibleRecentClientChangesCount,
+  ]);
+
   const isLoading =
     isLoadingClients ||
     isLoadingStats ||
@@ -1085,7 +1119,7 @@ function ClientsPage() {
           </Button>
         </CardHeader>
         <CardContent className="space-y-3 pt-0">
-          {recentClientChanges.length === 0 ? (
+          {visibleRecentClientChanges.length === 0 ? (
             <div className="rounded-xl border border-dashed border-border/60 bg-muted/20 p-5 text-sm text-muted-foreground">
               {t(
                 "msg.dev.clients.recent_changes.empty",
@@ -1093,7 +1127,7 @@ function ClientsPage() {
               )}
             </div>
           ) : (
-            recentClientChangesWithActors.map((item) => {
+            visibleRecentClientChanges.map((item) => {
               const { date, time } = formatAuditDateParts(item.timestamp);
               return (
                 <div
@@ -1148,6 +1182,24 @@ function ClientsPage() {
               );
             })
           )}
+          {hasMoreRecentClientChanges ? (
+            <div className="pt-2 text-center">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() =>
+                  setVisibleRecentClientChangesCount((current) =>
+                    Math.min(
+                      current + recentClientChangesBatchSize,
+                      recentClientChangesWithActors.length,
+                    ),
+                  )
+                }
+              >
+                {t("ui.common.load_more", "더보기")}
+              </Button>
+            </div>
+          ) : null}
         </CardContent>
       </Card>