~20250428 작업사항

1 files changed, 104 insertions, 25 deletions

diff --git a/lib/form-list/table/formLists-table-toolbar-actions.tsx b/lib/form-list/table/formLists-table-toolbar-actions.tsx
index 96494607..cf874985 100644
--- a/lib/form-list/table/formLists-table-toolbar-actions.tsx
+++ b/lib/form-list/table/formLists-table-toolbar-actions.tsx
@@ -2,71 +2,150 @@
 
 import * as React from "react"
 import { type Table } from "@tanstack/react-table"
-import { Download, RefreshCcw, Upload } from "lucide-react"
+import { Download, RefreshCcw } from "lucide-react"
 import { toast } from "sonner"
 
 import { exportTableToExcel } from "@/lib/export"
 import { Button } from "@/components/ui/button"
 import { ExtendedFormMappings } from "../validation"
 
-
-
 interface ItemsTableToolbarActionsProps {
   table: Table<ExtendedFormMappings>
 }
 
 export function FormListsTableToolbarActions({ table }: ItemsTableToolbarActionsProps) {
   const [isLoading, setIsLoading] = React.useState(false)
+  const [syncId, setSyncId] = React.useState<string | null>(null)
+  const pollingRef = React.useRef<NodeJS.Timeout | null>(null)
+
+  // Clean up polling on unmount
+  React.useEffect(() => {
+    return () => {
+      if (pollingRef.current) {
+        clearInterval(pollingRef.current)
+      }
+    }
+  }, [])
 
-  const syncForms = async () => {
+  const startFormSync = async () => {
     try {
       setIsLoading(true)
-
-      // API 엔드포인트 호출
-      const response = await fetch('/api/cron/forms')
-
+      
+      // API 엔드포인트 호출 - 작업 시작만 요청
+      const response = await fetch('/api/cron/forms/start', {
+        method: 'POST'
+      })
+      
       if (!response.ok) {
         const errorData = await response.json()
-        throw new Error(errorData.error || 'Failed to sync forms')
+        throw new Error(errorData.error || 'Failed to start form sync')
       }
-
+      
       const data = await response.json()
-
-      // 성공 메시지 표시
-      toast.success(
-        `Forms synced successfully! ${data.result.items} items processed.`
-      )
-
-      // 페이지 새로고침으로 테이블 데이터 업데이트
-      window.location.reload()
+      
+      // 작업 ID 저장
+      if (data.syncId) {
+        setSyncId(data.syncId)
+        toast.info('Form sync started. This may take a while...')
+        
+        // 상태 확인을 위한 폴링 시작
+        startPolling(data.syncId)
+      } else {
+        throw new Error('No sync ID returned from server')
+      }
     } catch (error) {
-      console.error('Error syncing forms:', error)
+      console.error('Error starting form sync:', error)
       toast.error(
         error instanceof Error
           ? error.message
-          : 'An error occurred while syncing forms'
+          : 'An error occurred while starting form sync'
       )
-    } finally {
       setIsLoading(false)
     }
   }
-
+  
+  const startPolling = (id: string) => {
+    // 이전 폴링이 있다면 제거
+    if (pollingRef.current) {
+      clearInterval(pollingRef.current)
+    }
+    
+    // 5초마다 상태 확인
+    pollingRef.current = setInterval(async () => {
+      try {
+        const response = await fetch(`/api/cron/forms/status?id=${id}`)
+        
+        if (!response.ok) {
+          throw new Error('Failed to get sync status')
+        }
+        
+        const data = await response.json()
+        
+        if (data.status === 'completed') {
+          // 폴링 중지
+          if (pollingRef.current) {
+            clearInterval(pollingRef.current)
+            pollingRef.current = null
+          }
+          
+          // 상태 초기화
+          setIsLoading(false)
+          setSyncId(null)
+          
+          // 성공 메시지 표시
+          toast.success(
+            `Forms synced successfully! ${data.result?.items || 0} items processed.`
+          )
+          
+          // 테이블 데이터 업데이트 - 전체 페이지 새로고침 대신 데이터만 갱신
+          table.resetRowSelection()
+          // 여기서 테이블 데이터를 다시 불러오는 함수를 호출
+          // 예: refetchTableData() 
+          // 또는 SWR/React Query 등을 사용하고 있다면 mutate() 호출
+          
+          // 리로드가 꼭 필요하다면 아래 주석 해제
+          // window.location.reload()
+        } else if (data.status === 'failed') {
+          // 에러 처리
+          if (pollingRef.current) {
+            clearInterval(pollingRef.current)
+            pollingRef.current = null
+          }
+          
+          setIsLoading(false)
+          setSyncId(null)
+          toast.error(data.error || 'Sync failed')
+        } else if (data.status === 'processing') {
+          // 진행 상태 업데이트 (선택적)
+          if (data.progress) {
+            toast.info(`Sync in progress: ${data.progress}%`, {
+              id: `sync-progress-${id}`,
+            })
+          }
+        }
+      } catch (error) {
+        console.error('Error checking sync status:', error)
+      }
+    }, 5000) // 5초마다 체크
+  }
 
   return (
     <div className="flex items-center gap-2">
-      {/** 4) Export 버튼 */}
+      {/** Sync Forms 버튼 */}
       <Button
         variant="samsung"
         size="sm"
         className="gap-2"
+        onClick={startFormSync}
+        disabled={isLoading}
       >
         <RefreshCcw className={`size-4 ${isLoading ? 'animate-spin' : ''}`} aria-hidden="true" />
         <span className="hidden sm:inline">
           {isLoading ? 'Syncing...' : 'Get Forms'}
         </span>
       </Button>
-
-      {/** 4) Export 버튼 */}
+      
+      {/** Export 버튼 */}
       <Button
         variant="outline"
         size="sm"