diff --git a/src/contexts/budget/hooks/useTransactionState.ts b/src/contexts/budget/hooks/useTransactionState.ts index b62dc95..73b2070 100644 --- a/src/contexts/budget/hooks/useTransactionState.ts +++ b/src/contexts/budget/hooks/useTransactionState.ts @@ -7,6 +7,7 @@ import { clearAllTransactions } from '../storage'; import { toast } from '@/hooks/useToast.wrapper'; // 래퍼 사용 +import { addToDeletedTransactions } from '@/utils/sync/transaction/deletedTransactionsTracker'; // 트랜잭션 상태 관리 훅 export const useTransactionState = () => { @@ -19,20 +20,20 @@ export const useTransactionState = () => { // 트랜잭션 로드 함수 - 비동기 처리로 변경 const loadTransactions = async () => { try { - console.log('트랜잭션 로드 시도 중...'); + console.log('[트랜잭션 상태] 트랜잭션 로드 시도 중...'); // 비동기 작업을 마이크로태스크로 지연 await new Promise(resolve => queueMicrotask(() => resolve())); const storedTransactions = loadTransactionsFromStorage(); - console.log('트랜잭션 로드됨:', storedTransactions.length, '개'); + console.log('[트랜잭션 상태] 트랜잭션 로드됨:', storedTransactions.length, '개'); // 상태 업데이트를 마이크로태스크로 지연 queueMicrotask(() => { setTransactions(storedTransactions); }); } catch (error) { - console.error('트랜잭션 로드 오류:', error); + console.error('[트랜잭션 상태] 트랜잭션 로드 오류:', error); } }; @@ -61,9 +62,16 @@ export const useTransactionState = () => { // 트랜잭션 추가 함수 const addTransaction = useCallback((newTransaction: Transaction) => { - console.log('새 트랜잭션 추가:', newTransaction); + console.log('[트랜잭션 상태] 새 트랜잭션 추가:', newTransaction); + + // 현재 시간을 타임스탬프로 추가 + const transactionWithTimestamp = { + ...newTransaction, + localTimestamp: new Date().toISOString() + }; + setTransactions(prev => { - const updated = [newTransaction, ...prev]; + const updated = [transactionWithTimestamp, ...prev]; saveTransactionsToStorage(updated); return updated; }); @@ -71,10 +79,17 @@ export const useTransactionState = () => { // 트랜잭션 업데이트 함수 const updateTransaction = useCallback((updatedTransaction: Transaction) => { - console.log('트랜잭션 업데이트:', updatedTransaction); + console.log('[트랜잭션 상태] 트랜잭션 업데이트:', updatedTransaction); + + // 현재 시간을 타임스탬프로 업데이트 + const transactionWithTimestamp = { + ...updatedTransaction, + localTimestamp: new Date().toISOString() + }; + setTransactions(prev => { const updated = prev.map(transaction => - transaction.id === updatedTransaction.id ? updatedTransaction : transaction + transaction.id === updatedTransaction.id ? transactionWithTimestamp : transaction ); saveTransactionsToStorage(updated); return updated; @@ -85,13 +100,13 @@ export const useTransactionState = () => { const deleteTransaction = useCallback((transactionId: string) => { // 이미 삭제 중이면 중복 삭제 방지 if (isDeleting) { - console.log('이미 삭제 작업이 진행 중입니다.'); + console.log('[트랜잭션 상태] 이미 삭제 작업이 진행 중입니다.'); return; } // 중복 삭제 방지 if (lastDeletedId === transactionId) { - console.log('중복 삭제 요청 무시:', transactionId); + console.log('[트랜잭션 상태] 중복 삭제 요청 무시:', transactionId); return; } @@ -103,19 +118,35 @@ export const useTransactionState = () => { // 삭제 작업을 마이크로태스크로 진행하여 UI 차단 방지 queueMicrotask(() => { try { + console.log(`[트랜잭션 상태] 삭제 시작: ${transactionId}`); + setTransactions(prev => { + // 삭제할 트랜잭션 찾기 + const transactionToDelete = prev.find(t => t.id === transactionId); + if (!transactionToDelete) { + console.log('[트랜잭션 상태] 삭제할 트랜잭션을 찾을 수 없음:', transactionId); + return prev; // 변경 없음 + } + + console.log(`[트랜잭션 상태] 삭제할 트랜잭션: "${transactionToDelete.title}", 금액: ${transactionToDelete.amount}원`); + // 삭제할 항목 필터링 - 성능 최적화 const updated = prev.filter(transaction => transaction.id !== transactionId); // 항목이 실제로 삭제되었는지 확인 if (updated.length === prev.length) { - console.log('삭제할 트랜잭션을 찾을 수 없음:', transactionId); + console.log('[트랜잭션 상태] 삭제할 트랜잭션을 찾을 수 없음:', transactionId); return prev; // 변경 없음 } + // 클라우드 동기화를 위해 삭제된 트랜잭션 ID 추적 + addToDeletedTransactions(transactionId); + console.log(`[트랜잭션 상태] 삭제 트랜잭션 추적 목록에 추가: ${transactionId}`); + // 저장소 업데이트를 마이크로태스크로 진행 queueMicrotask(() => { saveTransactionsToStorage(updated); + console.log(`[트랜잭션 상태] 로컬 저장소 업데이트 완료`); // 토스트 메시지 표시 toast({ @@ -127,7 +158,7 @@ export const useTransactionState = () => { return updated; }); } catch (error) { - console.error('트랜잭션 삭제 중 오류 발생:', error); + console.error('[트랜잭션 상태] 트랜잭션 삭제 중 오류 발생:', error); toast({ title: "삭제 실패", description: "지출 항목 삭제 중 오류가 발생했습니다.", @@ -138,6 +169,7 @@ export const useTransactionState = () => { setTimeout(() => { setIsDeleting(false); setLastDeletedId(null); + console.log('[트랜잭션 상태] 삭제 상태 초기화 완료'); }, 500); } }); @@ -146,14 +178,14 @@ export const useTransactionState = () => { // 트랜잭션 초기화 함수 const resetTransactions = useCallback(() => { - console.log('모든 트랜잭션 초기화'); + console.log('[트랜잭션 상태] 모든 트랜잭션 초기화'); clearAllTransactions(); setTransactions([]); }, []); // 트랜잭션 개수가 변경될 때 로그 기록 useEffect(() => { - console.log('현재 트랜잭션 개수:', transactions.length); + console.log('[트랜잭션 상태] 현재 트랜잭션 개수:', transactions.length); }, [transactions.length]); return { diff --git a/src/hooks/transactions/deleteTransaction.ts b/src/hooks/transactions/deleteTransaction.ts index 4a5b839..1231441 100644 --- a/src/hooks/transactions/deleteTransaction.ts +++ b/src/hooks/transactions/deleteTransaction.ts @@ -1,131 +1,90 @@ -import { useCallback, useRef, useEffect } from 'react'; +import { useCallback } from 'react'; import { Transaction } from '@/components/TransactionCard'; import { useAuth } from '@/contexts/auth/useAuth'; import { toast } from '@/hooks/useToast.wrapper'; import { saveTransactionsToStorage } from './storageUtils'; -import { deleteTransactionFromServer } from '@/utils/sync/transaction/deleteTransaction'; +import { deleteTransactionFromSupabase } from './supabaseUtils'; import { addToDeletedTransactions } from '@/utils/sync/transaction/deletedTransactionsTracker'; /** - * 안정화된 트랜잭션 삭제 훅 - 완전 재구현 버전 + * 트랜잭션 삭제 기능을 위한 훅 */ export const useDeleteTransaction = ( transactions: Transaction[], setTransactions: React.Dispatch> ) => { - // 삭제 상태 추적 - const pendingDeletionRef = useRef>(new Set()); const { user } = useAuth(); - - // 삭제 함수 - 전체 재구현 - const deleteTransaction = useCallback((id: string): Promise => { - return new Promise((resolve) => { - try { - console.log(`[안정화] 트랜잭션 삭제 시작 (ID: ${id})`); - - // 이미 삭제 중인지 확인 - if (pendingDeletionRef.current.has(id)) { - console.warn(`[안정화] 이미 삭제 중인 트랜잭션: ${id}`); - resolve(true); - return; - } - - // 삭제 중인 상태 표시 - pendingDeletionRef.current.add(id); - - // 타임아웃 설정 (300ms) - const timeoutId = setTimeout(() => { - console.warn(`[안정화] 삭제 타임아웃 - 강제 완료 (ID: ${id})`); - pendingDeletionRef.current.delete(id); - resolve(true); // 성공으로 간주 - }, 300); - - // UI 즉시 업데이트 (낙관적 UI 업데이트) - setTransactions(prev => prev.filter(t => t.id !== id)); - - // 비동기 스토리지 작업 실행 - queueMicrotask(() => { - try { - // 트랜잭션 찾기 - const updatedTransactions = transactions.filter(t => t.id !== id); - - // 삭제된 트랜잭션 추적 목록에 추가 - try { - addToDeletedTransactions(id); - console.log(`[안정화] 삭제된 트랜잭션 추적 추가 (ID: ${id})`); - } catch (trackingError) { - console.error('[안정화] 삭제 추적 실패:', trackingError); - } - - // 로컬 스토리지 저장 - try { - saveTransactionsToStorage(updatedTransactions); - console.log(`[안정화] 로컬 스토리지 업데이트 완료 (ID: ${id})`); - } catch (storageError) { - console.error('[안정화] 스토리지 저장 실패:', storageError); - } - - // 서버 동기화 (별도의 비동기 작업) - if (user && user.id) { - setTimeout(() => { - try { - deleteTransactionFromServer(user.id, id) - .catch(err => console.error('[안정화] 서버 삭제 실패:', err)); - } catch (serverError) { - console.error('[안정화] 서버 삭제 요청 실패:', serverError); - } - }, 10); - } - - // 이벤트 발생 - try { - window.dispatchEvent(new Event('transactionDeleted')); - window.dispatchEvent(new CustomEvent('transactionChanged', { - detail: { type: 'delete', id } - })); - } catch (eventError) { - console.error('[안정화] 이벤트 발생 오류:', eventError); - } - - // 토스트 메시지 - toast({ - title: "삭제 완료", - description: "항목이 삭제되었습니다.", - duration: 1500 - }); - - // 성공적으로 처리됨 - clearTimeout(timeoutId); - pendingDeletionRef.current.delete(id); - resolve(true); - } catch (error) { - console.error('[안정화] 삭제 처리 중 오류:', error); - clearTimeout(timeoutId); - pendingDeletionRef.current.delete(id); - resolve(true); // 오류가 있어도 UI는 이미 업데이트됨 - } - }); - } catch (error) { - console.error('[안정화] 삭제 함수 심각한 오류:', error); - - // 항상 pending 상태 제거 보장 - pendingDeletionRef.current.delete(id); - - // 오류가 있어도 UI 차단 방지를 위해 성공 반환 - resolve(true); + + /** + * 트랜잭션 삭제 처리 + */ + const deleteTransaction = useCallback(async (transactionId: string): Promise => { + try { + console.log(`[트랜잭션 삭제] 시작: ID=${transactionId}`); + + // 트랜잭션 존재 확인 + const transaction = transactions.find(t => t.id === transactionId); + if (!transaction) { + console.warn(`[트랜잭션 삭제] 트랜잭션을 찾을 수 없음: ${transactionId}`); + return false; } - }); - }, [transactions, user, setTransactions]); + + console.log(`[트랜잭션 삭제] 삭제 대상: "${transaction.title}", 금액: ${transaction.amount}원`); + + // 트랜잭션 목록에서 제거 + const updatedTransactions = transactions.filter(t => t.id !== transactionId); + + // 로컬 스토리지 업데이트 + saveTransactionsToStorage(updatedTransactions); + console.log(`[트랜잭션 삭제] 로컬 저장소 업데이트 완료`); + + // 상태 업데이트 + setTransactions(updatedTransactions); + + // 클라우드 동기화 (Supabase) + if (user) { + try { + console.log(`[트랜잭션 삭제] Supabase 삭제 시작: ${transactionId}`); + await deleteTransactionFromSupabase(user, transactionId); + console.log(`[트랜잭션 삭제] Supabase 삭제 성공: ${transactionId}`); + } catch (syncError) { + console.error(`[트랜잭션 삭제] Supabase 삭제 실패:`, syncError); + // 삭제 실패하더라도 로컬에서는 삭제됨, 추적 목록에 추가 + addToDeletedTransactions(transactionId); + console.log(`[트랜잭션 삭제] 삭제 트랜잭션 추적 목록에 추가: ${transactionId}`); + } + } else { + // 오프라인 상태이거나 로그인되지 않은 경우 추적 목록에 추가 + addToDeletedTransactions(transactionId); + console.log(`[트랜잭션 삭제] 오프라인 삭제: 추적 목록에 추가 ${transactionId}`); + } + + // 이벤트 발생 + window.dispatchEvent(new Event('transactionUpdated')); + window.dispatchEvent(new CustomEvent('transactionDeleted', { + detail: { id: transactionId } + })); + + // 토스트 메시지 표시 + toast({ + title: "지출이 삭제되었습니다", + description: `${transaction.title} 항목이 삭제되었습니다.`, + duration: 3000 + }); + + console.log(`[트랜잭션 삭제] 완료: ${transactionId}`); + return true; + } catch (error) { + console.error(`[트랜잭션 삭제] 오류 발생:`, error); + toast({ + title: "삭제 실패", + description: "지출 항목 삭제 중 오류가 발생했습니다.", + variant: "destructive" + }); + return false; + } + }, [transactions, setTransactions, user]); - // 컴포넌트 언마운트 시 모든 상태 정리 - useEffect(() => { - // 현재 ref 값을 로컬 변수에 복사하여 클린업 함수에서 사용 - const pendingDeletion = pendingDeletionRef.current; - return () => { - pendingDeletion.clear(); - }; - }, []); - - return deleteTransaction; + return { deleteTransaction }; }; diff --git a/src/hooks/transactions/transactionOperations/updateTransaction.ts b/src/hooks/transactions/transactionOperations/updateTransaction.ts index 942c1e5..0f8340b 100644 --- a/src/hooks/transactions/transactionOperations/updateTransaction.ts +++ b/src/hooks/transactions/transactionOperations/updateTransaction.ts @@ -19,37 +19,87 @@ export const useUpdateTransaction = ( const { user } = useAuth(); return useCallback((updatedTransaction: Transaction) => { - const updatedTransactions = transactions.map(transaction => - transaction.id === updatedTransaction.id ? updatedTransaction : transaction - ); - - // 로컬 스토리지 업데이트 - saveTransactionsToStorage(updatedTransactions); - - // 상태 업데이트 - setTransactions(updatedTransactions); - - // Supabase 업데이트 시도 (날짜 형식 변환 추가) - if (user) { - // ISO 형식으로 날짜 변환 - const transactionWithIsoDate = { - ...updatedTransaction, - dateForSync: normalizeDate(updatedTransaction.date) - }; + try { + console.log(`[트랜잭션] 업데이트 시작: ID=${updatedTransaction.id}, 제목=${updatedTransaction.title}`); - updateTransactionInSupabase(user, transactionWithIsoDate); - } - - // 이벤트 발생 - window.dispatchEvent(new Event('transactionUpdated')); - - // 약간의 지연을 두고 토스트 표시 - setTimeout(() => { + // 트랜잭션 존재 여부 확인 + const existingIndex = transactions.findIndex(t => t.id === updatedTransaction.id); + if (existingIndex === -1) { + console.warn(`[트랜잭션] 업데이트 오류: ID ${updatedTransaction.id}를 찾을 수 없음`); + toast({ + title: "업데이트 실패", + description: "해당 지출 항목을 찾을 수 없습니다.", + variant: "destructive" + }); + return; + } + + // 기존 데이터와 변경 감지 + const oldTransaction = transactions[existingIndex]; + const hasChanges = JSON.stringify(oldTransaction) !== JSON.stringify(updatedTransaction); + + if (!hasChanges) { + console.log(`[트랜잭션] 변경사항 없음: ${updatedTransaction.id}`); + return; + } + + // 변경 내용 로깅 + console.log(`[트랜잭션] 변경 감지: + 제목: ${oldTransaction.title} -> ${updatedTransaction.title} + 금액: ${oldTransaction.amount} -> ${updatedTransaction.amount} + 카테고리: ${oldTransaction.category} -> ${updatedTransaction.category} + 날짜: ${oldTransaction.date} -> ${updatedTransaction.date} + `); + + // 로컬 스토리지 업데이트 + const updatedTransactions = transactions.map(transaction => + transaction.id === updatedTransaction.id ? updatedTransaction : transaction + ); + + saveTransactionsToStorage(updatedTransactions); + console.log(`[트랜잭션] 로컬 저장소 업데이트 완료`); + + // 상태 업데이트 + setTransactions(updatedTransactions); + + // Supabase 업데이트 시도 (날짜 형식 변환 추가) + if (user) { + // ISO 형식으로 날짜 변환 + const transactionWithIsoDate = { + ...updatedTransaction, + dateForSync: normalizeDate(updatedTransaction.date) + }; + + console.log(`[트랜잭션] Supabase 업데이트 시작: ${updatedTransaction.id}`); + updateTransactionInSupabase(user, transactionWithIsoDate) + .then(() => { + console.log(`[트랜잭션] Supabase 업데이트 성공: ${updatedTransaction.id}`); + }) + .catch(err => { + console.error(`[트랜잭션] Supabase 업데이트 실패:`, err); + }); + } else { + console.log(`[트랜잭션] 로그인 상태 아님: Supabase 업데이트 건너뜀`); + } + + // 이벤트 발생 + window.dispatchEvent(new Event('transactionUpdated')); + + // 약간의 지연을 두고 토스트 표시 + setTimeout(() => { + toast({ + title: "지출이 수정되었습니다", + description: `${updatedTransaction.title} 항목이 업데이트되었습니다.`, + duration: 3000 + }); + }, 100); + } catch (error) { + console.error(`[트랜잭션] 업데이트 중 오류 발생:`, error); toast({ - title: "지출이 수정되었습니다", - description: `${updatedTransaction.title} 항목이 업데이트되었습니다.`, - duration: 3000 + title: "업데이트 실패", + description: "지출 수정 중 오류가 발생했습니다.", + variant: "destructive" }); - }, 100); + } }, [transactions, setTransactions, user]); }; diff --git a/src/utils/sync/transaction/deletedTransactionsTracker.ts b/src/utils/sync/transaction/deletedTransactionsTracker.ts index 1d3a44b..aea4932 100644 --- a/src/utils/sync/transaction/deletedTransactionsTracker.ts +++ b/src/utils/sync/transaction/deletedTransactionsTracker.ts @@ -1,3 +1,4 @@ + /** * 삭제된 트랜잭션 ID를 추적하는 유틸리티 * 로컬에서 삭제된 트랜잭션이 서버 동기화 후 다시 나타나는 문제를 해결합니다. @@ -16,7 +17,7 @@ export const addToDeletedTransactions = (id: string): void => { if (!deletedIds.includes(id)) { deletedIds.push(id); localStorage.setItem(DELETED_TRANSACTIONS_KEY, JSON.stringify(deletedIds)); - console.log(`[삭제 추적] ID 추가됨: ${id}`); + console.log(`[삭제 추적] ID 추가됨: ${id}, 현재 총 ${deletedIds.length}개 트랜잭션 추적 중`); } } catch (error) { console.error('[삭제 추적] ID 추가 실패:', error); @@ -31,7 +32,11 @@ export const getDeletedTransactions = (): string[] => { try { const deletedStr = localStorage.getItem(DELETED_TRANSACTIONS_KEY); const deletedIds = deletedStr ? JSON.parse(deletedStr) : []; - return Array.isArray(deletedIds) ? deletedIds : []; + if (!Array.isArray(deletedIds)) { + console.warn('[삭제 추적] 유효하지 않은 형식, 초기화 진행'); + return []; + } + return deletedIds; } catch (error) { console.error('[삭제 추적] 목록 조회 실패:', error); return []; @@ -49,7 +54,7 @@ export const removeFromDeletedTransactions = (id: string): void => { if (deletedIds.length !== updatedIds.length) { localStorage.setItem(DELETED_TRANSACTIONS_KEY, JSON.stringify(updatedIds)); - console.log(`[삭제 추적] ID 제거됨: ${id}`); + console.log(`[삭제 추적] ID 제거됨: ${id}, 남은 추적 개수: ${updatedIds.length}`); } } catch (error) { console.error('[삭제 추적] ID 제거 실패:', error); @@ -67,3 +72,12 @@ export const clearDeletedTransactions = (): void => { console.error('[삭제 추적] 목록 초기화 실패:', error); } }; + +/** + * 특정 ID가 삭제된 트랜잭션인지 확인 + * @param id 확인할 트랜잭션 ID + * @returns 삭제된 트랜잭션인 경우 true + */ +export const isTransactionDeleted = (id: string): boolean => { + return getDeletedTransactions().includes(id); +}; diff --git a/src/utils/sync/transaction/downloadTransaction.ts b/src/utils/sync/transaction/downloadTransaction.ts index 86777a8..c49d021 100644 --- a/src/utils/sync/transaction/downloadTransaction.ts +++ b/src/utils/sync/transaction/downloadTransaction.ts @@ -3,18 +3,25 @@ import { supabase } from '@/lib/supabase'; import { Transaction } from '@/components/TransactionCard'; import { isSyncEnabled } from '../syncSettings'; import { formatDateForDisplay } from './dateUtils'; -import { getDeletedTransactions } from './deletedTransactionsTracker'; +import { getDeletedTransactions, isTransactionDeleted } from './deletedTransactionsTracker'; /** * Download transaction data from Supabase to local storage * 서버에서 로컬 스토리지로 데이터 다운로드 (병합 방식) */ export const downloadTransactions = async (userId: string): Promise => { - if (!isSyncEnabled()) return; + if (!isSyncEnabled()) { + console.log('[동기화] 다운로드: 동기화 비활성화 상태, 작업 건너뜀'); + return; + } try { console.log('[동기화] 서버에서 트랜잭션 데이터 다운로드 시작'); + // 다운로드 시간 기록 (충돌 감지용) + const downloadStartTime = new Date().toISOString(); + console.log(`[동기화] 다운로드 시작 시간: ${downloadStartTime}`); + // 대용량 데이터 처리를 위한 페이지네이션 설정 const pageSize = 500; // 한 번에 가져올 최대 레코드 수 let lastId = null; @@ -53,25 +60,31 @@ export const downloadTransactions = async (userId: string): Promise => { if (data.length < pageSize) { hasMore = false; } + + console.log(`[동기화] 페이지 다운로드 완료: ${data.length}개 항목`); } } + console.log(`[동기화] 서버 데이터 다운로드 완료: 총 ${allServerData.length}개 항목`); + if (allServerData.length === 0) { console.log('[동기화] 서버에 저장된 트랜잭션 없음'); return; // 서버에 데이터가 없으면 로컬 데이터 유지 } - console.log(`[동기화] 서버에서 ${allServerData.length}개의 트랜잭션 다운로드`); - // 삭제된 트랜잭션 ID 목록 가져오기 const deletedIds = getDeletedTransactions(); console.log(`[동기화] 삭제된 트랜잭션 ${deletedIds.length}개 필터링 적용`); + if (deletedIds.length > 0) { + console.log(`[동기화] 삭제 추적 항목: ${deletedIds.slice(0, 5).join(', ')}${deletedIds.length > 5 ? '...' : ''}`); + } + // 서버 데이터를 로컬 형식으로 변환 (삭제된 항목 제외) const serverTransactions = allServerData .filter(t => { const transactionId = t.transaction_id || t.id; - const isDeleted = deletedIds.includes(transactionId); + const isDeleted = isTransactionDeleted(transactionId); if (isDeleted) { console.log(`[동기화] 삭제된 트랜잭션 필터링: ${transactionId}`); } @@ -108,7 +121,8 @@ export const downloadTransactions = async (userId: string): Promise => { date: formattedDate, category: t.category || '기타', type: t.type || 'expense', - notes: t.notes || '' + notes: t.notes || '', + serverTimestamp: t.updated_at || t.created_at || downloadStartTime }; } catch (itemError) { console.error(`[동기화] 트랜잭션 변환 오류 (ID: ${t.transaction_id || t.id}):`, itemError); @@ -120,14 +134,19 @@ export const downloadTransactions = async (userId: string): Promise => { date: new Date().toLocaleString('ko-KR'), category: '기타', type: 'expense', - notes: '데이터 변환 중 오류 발생' + notes: '데이터 변환 중 오류 발생', + serverTimestamp: downloadStartTime }; } }); + console.log(`[동기화] 서버 트랜잭션 변환 완료: ${serverTransactions.length}개 항목`); + // 기존 로컬 데이터 불러오기 const localDataStr = localStorage.getItem('transactions'); - const localTransactions = localDataStr ? JSON.parse(localDataStr) : []; + const localTransactions: Transaction[] = localDataStr ? JSON.parse(localDataStr) : []; + + console.log(`[동기화] 로컬 트랜잭션: ${localTransactions.length}개 항목`); // 로컬 데이터와 서버 데이터 병합 (ID 기준) const transactionMap = new Map(); @@ -135,26 +154,63 @@ export const downloadTransactions = async (userId: string): Promise => { // 로컬 데이터를 맵에 추가 localTransactions.forEach((tx: Transaction) => { if (tx && tx.id) { // 유효성 검사 추가 - transactionMap.set(tx.id, tx); + // 로컬 항목에 타임스탬프 추가 (없는 경우) + const txWithTimestamp = { + ...tx, + localTimestamp: tx.localTimestamp || downloadStartTime + }; + transactionMap.set(tx.id, txWithTimestamp); } }); - // 서버 데이터로 맵 업데이트 (서버 데이터 우선) + // 충돌 카운터 + let overwrittenCount = 0; + let preservedCount = 0; + + // 서버 데이터로 맵 업데이트 (타임스탬프 비교) serverTransactions.forEach(tx => { if (tx && tx.id) { // 유효성 검사 추가 - transactionMap.set(tx.id, tx); + const existingTx = transactionMap.get(tx.id); + + if (!existingTx) { + // 로컬에 없는 새 항목 + transactionMap.set(tx.id, tx); + console.log(`[동기화] 새 항목 추가: ${tx.id} - ${tx.title}`); + } else { + // 타임스탬프 비교로 최신 데이터 결정 + const serverTime = tx.serverTimestamp || downloadStartTime; + const localTime = existingTx.localTimestamp || '1970-01-01T00:00:00Z'; + + if (serverTime > localTime) { + // 서버 데이터가 더 최신 + transactionMap.set(tx.id, tx); + overwrittenCount++; + console.log(`[동기화] 서버 데이터로 업데이트: ${tx.id} - ${tx.title} (서버: ${serverTime}, 로컬: ${localTime})`); + } else { + // 로컬 데이터 유지 + preservedCount++; + console.log(`[동기화] 로컬 데이터 유지: ${tx.id} - ${existingTx.title} (서버: ${serverTime}, 로컬: ${localTime})`); + } + } } }); // 최종 병합된 데이터 생성 const mergedTransactions = Array.from(transactionMap.values()); + console.log(`[동기화] 병합 결과: 총 ${mergedTransactions.length}개 항목 (서버 데이터로 업데이트: ${overwrittenCount}, 로컬 데이터 유지: ${preservedCount})`); + // 로컬 스토리지에 저장 localStorage.setItem('transactions', JSON.stringify(mergedTransactions)); - console.log(`[동기화] 총 ${mergedTransactions.length}개의 트랜잭션 병합 완료`); + console.log(`[동기화] 병합된 트랜잭션 저장 완료`); + + // 백업 저장 + localStorage.setItem('transactions_backup', JSON.stringify(mergedTransactions)); + console.log(`[동기화] 트랜잭션 백업 저장 완료`); // 이벤트 발생시켜 UI 업데이트 window.dispatchEvent(new Event('transactionUpdated')); + console.log(`[동기화] 트랜잭션 업데이트 이벤트 발생`); } catch (error) { console.error('[동기화] 트랜잭션 다운로드 중 오류:', error); console.error('[동기화] 오류 상세:', JSON.stringify(error, null, 2)); diff --git a/src/utils/sync/transaction/uploadTransaction.ts b/src/utils/sync/transaction/uploadTransaction.ts index f87d204..b277167 100644 --- a/src/utils/sync/transaction/uploadTransaction.ts +++ b/src/utils/sync/transaction/uploadTransaction.ts @@ -3,27 +3,83 @@ import { supabase } from '@/lib/supabase'; import { Transaction } from '@/components/TransactionCard'; import { isSyncEnabled } from '../syncSettings'; import { normalizeDate } from './dateUtils'; +import { getDeletedTransactions, removeFromDeletedTransactions } from './deletedTransactionsTracker'; /** * Upload transaction data from local storage to Supabase * 로컬 데이터를 서버에 업로드 (새로운 또는 수정된 데이터만) */ export const uploadTransactions = async (userId: string): Promise => { - if (!isSyncEnabled()) return; + if (!isSyncEnabled()) { + console.log('[동기화] 업로드: 동기화 비활성화 상태, 작업 건너뜀'); + return; + } try { + console.log('[동기화] 트랜잭션 업로드 시작'); + const uploadStartTime = new Date().toISOString(); + + // 로컬 트랜잭션 데이터 로드 const localTransactions = localStorage.getItem('transactions'); - if (!localTransactions) return; + if (!localTransactions) { + console.log('[동기화] 로컬 트랜잭션 데이터 없음, 업로드 건너뜀'); + return; + } + // 트랜잭션 파싱 const transactions: Transaction[] = JSON.parse(localTransactions); - console.log(`로컬 트랜잭션 ${transactions.length}개 동기화 시작`); + console.log(`[동기화] 로컬 트랜잭션 ${transactions.length}개 동기화 시작`); - if (transactions.length === 0) return; // 트랜잭션이 없으면 처리하지 않음 + if (transactions.length === 0) { + console.log('[동기화] 트랜잭션이 없음, 업로드 건너뜀'); + return; // 트랜잭션이 없으면 처리하지 않음 + } + + // 삭제된 트랜잭션 처리 + const deletedIds = getDeletedTransactions(); + if (deletedIds.length > 0) { + console.log(`[동기화] 삭제된 트랜잭션 ${deletedIds.length}개 처리 시작`); + + // 100개씩 나눠서 처리 (대용량 데이터 처리) + const batchSize = 100; + for (let i = 0; i < deletedIds.length; i += batchSize) { + const batch = deletedIds.slice(i, i + batchSize); + console.log(`[동기화] 삭제 배치 처리 중: ${i+1}~${Math.min(i+batch.length, deletedIds.length)}/${deletedIds.length}`); + + // 각 삭제된 ID 처리 (병렬 처리) + const deletePromises = batch.map(async (id) => { + try { + const { error } = await supabase + .from('transactions') + .delete() + .eq('transaction_id', id) + .eq('user_id', userId); + + if (error) { + console.error(`[동기화] 트랜잭션 삭제 실패 (ID: ${id}):`, error); + return { id, success: false }; + } else { + console.log(`[동기화] 트랜잭션 삭제 성공: ${id}`); + removeFromDeletedTransactions(id); + return { id, success: true }; + } + } catch (err) { + console.error(`[동기화] 트랜잭션 삭제 중 오류 (ID: ${id}):`, err); + return { id, success: false }; + } + }); + + // 병렬 처리 대기 + const results = await Promise.all(deletePromises); + const successCount = results.filter(r => r.success).length; + console.log(`[동기화] 삭제 배치 처리 결과: ${successCount}/${batch.length} 성공`); + } + } // 먼저 서버에서 현재 트랜잭션 목록 가져오기 const { data: existingData, error: fetchError } = await supabase .from('transactions') - .select('transaction_id') + .select('transaction_id, updated_at') .eq('user_id', userId); if (fetchError) { @@ -33,8 +89,12 @@ export const uploadTransactions = async (userId: string): Promise => { } // 서버에 이미 있는 트랜잭션 ID 맵 생성 - const existingIds = new Set(existingData?.map(t => t.transaction_id) || []); - console.log(`서버에 이미 존재하는 트랜잭션: ${existingIds.size}개`); + const existingMap = new Map(); + existingData?.forEach(t => { + existingMap.set(t.transaction_id, t.updated_at); + }); + + console.log(`[동기화] 서버에 이미 존재하는 트랜잭션: ${existingMap.size}개`); // 삽입할 새 트랜잭션과 업데이트할 기존 트랜잭션 분리 const newTransactions = []; @@ -42,9 +102,18 @@ export const uploadTransactions = async (userId: string): Promise => { for (const t of transactions) { try { + // 삭제 목록에 있는 트랜잭션은 건너뜀 + if (deletedIds.includes(t.id)) { + console.log(`[동기화] 삭제된 항목 건너뜀: ${t.id}`); + continue; + } + // 날짜 형식 정규화 const normalizedDate = normalizeDate(t.date); + // 현재 시간을 타임스탬프로 사용 + const timestamp = t.localTimestamp || uploadStartTime; + const transactionData = { user_id: userId, title: t.title || '무제', @@ -53,13 +122,24 @@ export const uploadTransactions = async (userId: string): Promise => { category: t.category || '기타', type: t.type || 'expense', transaction_id: t.id, - notes: t.notes || null + notes: t.notes || null, + updated_at: timestamp }; - if (existingIds.has(t.id)) { - updateTransactions.push(transactionData); + // 서버에 이미 존재하는지 확인 + if (existingMap.has(t.id)) { + // 서버 타임스탬프와 비교 + const serverTimestamp = existingMap.get(t.id); + // 로컬 데이터가 더 최신인 경우만 업데이트 + if (!serverTimestamp || timestamp > serverTimestamp) { + updateTransactions.push(transactionData); + console.log(`[동기화] 업데이트 필요: ${t.id} - ${t.title} (로컬: ${timestamp}, 서버: ${serverTimestamp || '없음'})`); + } else { + console.log(`[동기화] 업데이트 불필요: ${t.id} - ${t.title} (로컬: ${timestamp}, 서버: ${serverTimestamp})`); + } } else { newTransactions.push(transactionData); + console.log(`[동기화] 새 항목 추가: ${t.id} - ${t.title}`); } } catch (err) { console.error(`[동기화] 트랜잭션 처리 중 오류 (ID: ${t.id}):`, err); @@ -69,33 +149,37 @@ export const uploadTransactions = async (userId: string): Promise => { // 새 트랜잭션 삽입 (있는 경우) - 배치 처리 if (newTransactions.length > 0) { - console.log(`${newTransactions.length}개의 새 트랜잭션 업로드`); + console.log(`[동기화] ${newTransactions.length}개의 새 트랜잭션 업로드`); // 대용량 데이터 처리를 위해 배치 처리 (최대 100개씩) const batchSize = 100; for (let i = 0; i < newTransactions.length; i += batchSize) { const batch = newTransactions.slice(i, i + batchSize); + console.log(`[동기화] 새 트랜잭션 배치 업로드 중: ${i+1}~${Math.min(i+batch.length, newTransactions.length)}/${newTransactions.length}`); + const { error: insertError } = await supabase .from('transactions') .insert(batch); if (insertError) { - console.error(`[동기화] 새 트랜잭션 배치 업로드 실패 (${i}~${i + batch.length}):`, insertError); + console.error(`[동기화] 새 트랜잭션 배치 업로드 실패:`, insertError); console.error('[동기화] 오류 상세:', JSON.stringify(insertError, null, 2)); // 배치 실패해도 다음 배치 계속 시도 + } else { + console.log(`[동기화] 새 트랜잭션 배치 업로드 성공: ${batch.length}개`); } } } // 기존 트랜잭션 업데이트 (있는 경우) - 배치 처리 if (updateTransactions.length > 0) { - console.log(`${updateTransactions.length}개의 기존 트랜잭션 업데이트`); + console.log(`[동기화] ${updateTransactions.length}개의 기존 트랜잭션 업데이트`); // 대용량 데이터 처리를 위해 배치 처리 (최대 50개씩) - // 업데이트는 개별 쿼리보다 효율적이지만 삽입보다는 복잡하므로 더 작은 배치 크기 사용 const batchSize = 50; for (let i = 0; i < updateTransactions.length; i += batchSize) { const batch = updateTransactions.slice(i, i + batchSize); + console.log(`[동기화] 트랜잭션 업데이트 배치 처리 중: ${i+1}~${Math.min(i+batch.length, updateTransactions.length)}/${updateTransactions.length}`); // 배치 내 트랜잭션을 병렬로 업데이트 (Promise.all 사용) const updatePromises = batch.map(transaction => @@ -115,9 +199,11 @@ export const uploadTransactions = async (userId: string): Promise => { errors.forEach(err => { console.error('[동기화] 업데이트 오류:', err.error); }); + } else { + console.log(`[동기화] 트랜잭션 업데이트 배치 성공: ${batch.length}개`); } } catch (batchError) { - console.error(`[동기화] 트랜잭션 배치 업데이트 실패 (${i}~${i + batch.length}):`, batchError); + console.error(`[동기화] 트랜잭션 배치 업데이트 실패:`, batchError); // 배치 실패해도 다음 배치 계속 시도 } } diff --git a/src/utils/sync/transactionSync.ts b/src/utils/sync/transactionSync.ts index 843854e..7e067d1 100644 --- a/src/utils/sync/transactionSync.ts +++ b/src/utils/sync/transactionSync.ts @@ -10,8 +10,49 @@ export { downloadTransactions }; -// 서버에서 트랜잭션 삭제 함수 - 임시로 No-op 함수 구현 +// 서버에서 트랜잭션 삭제 함수 - 실제 구현 export const deleteTransactionFromServer = async (userId: string, transactionId: string): Promise => { - console.log(`트랜잭션 삭제 요청: userId=${userId}, transactionId=${transactionId}`); - return true; // 임시로 성공 반환 + try { + console.log(`[동기화] 서버 트랜잭션 삭제 시작: userId=${userId}, transactionId=${transactionId}`); + + // Supabase 클라이언트 동적 임포트 (순환 참조 방지) + const { supabase } = await import('@/lib/supabase'); + + // 트랜잭션 존재 여부 확인 + const { data: checkData, error: checkError } = await supabase + .from('transactions') + .select('transaction_id') + .eq('user_id', userId) + .eq('transaction_id', transactionId) + .maybeSingle(); + + if (checkError) { + console.error(`[동기화] 트랜잭션 확인 오류: ${checkError.message}`, checkError); + return false; + } + + // 트랜잭션이 존재하지 않으면 이미 삭제된 것으로 간주 + if (!checkData) { + console.log(`[동기화] 트랜잭션 이미 삭제됨: ${transactionId}`); + return true; + } + + // 서버에서 트랜잭션 삭제 + const { error: deleteError } = await supabase + .from('transactions') + .delete() + .eq('user_id', userId) + .eq('transaction_id', transactionId); + + if (deleteError) { + console.error(`[동기화] 트랜잭션 삭제 실패: ${deleteError.message}`, deleteError); + return false; + } + + console.log(`[동기화] 서버 트랜잭션 삭제 성공: ${transactionId}`); + return true; + } catch (error) { + console.error(`[동기화] 트랜잭션 삭제 중 예외 발생:`, error); + return false; + } };