zellyy-finance/docs/issue.md

예산 동기화 문제 해결 이슈

문제 상황

사용자가 예산액을 수정한 후 서버와 동기화를 진행하면, 로컬에서 수정한 예산 데이터가 서버 데이터로 덮어씌워지는 문제가 발생했습니다. 이로 인해 사용자가 설정한 예산 정보가 유지되지 않고 초기화되는 현상이 발생했습니다.

해결 방안

수정된 예산 데이터를 추적하는 시스템을 구현하고, 다운로드 및 업로드 로직을 개선하여 로컬에서 수정된 데이터의 무결성을 보장하는 방식으로 문제를 해결했습니다.

구현 내용

1. 수정된 예산 추적 시스템 구현

• modifiedBudgetsTracker.ts 파일 생성
• 로컬 스토리지에 수정된 예산 정보를 타임스탬프와 함께 저장
• 일반 예산과 카테고리별 예산 모두 추적 가능
• 주요 함수:
  • markBudgetAsModified: 일반 예산 수정 추적
  • markSingleCategoryBudgetAsModified: 단일 카테고리 예산 수정 추적
  • getModifiedBudget, getModifiedCategoryBudgets: 수정 정보 조회
  • clearModifiedBudget, clearModifiedCategoryBudgets: 수정 정보 초기화

2. 다운로드 로직 개선

• downloadBudget.ts 파일 수정
• 서버 데이터와 로컬 수정 데이터의 타임스탬프 비교
• 최신 데이터를 기준으로 병합 로직 구현
• 로컬에서 수정된 예산 정보가 있을 경우 우선 적용

3. 업로드 로직 개선

• uploadBudget.ts 파일 수정
• 타임스탬프 관리 개선 (created_at, updated_at 필드 추가)
• 업로드 성공 후 수정 추적 정보 초기화 기능 추가

4. UI 컴포넌트 연동

• BudgetInputCard.tsx: 예산 변경 시 수정 추적 시스템 연동
• CategoryBudgetInputs.tsx: 카테고리별 예산 변경 시 수정 추적 시스템 연동

5. 코드 품질 개선

• ESLint 오류 수정 (any 타입 구체화, let → const 변경)
• 함수 인터페이스 개선 및 일관성 유지

작동 방식

1. 사용자가 예산 또는 카테고리 예산을 수정하면 해당 정보가 로컬 스토리지에 타임스탬프와 함께 저장됩니다.
2. 서버에서 데이터를 다운로드할 때, 로컬에서 수정된 정보와 서버 데이터의 타임스탬프를 비교하여 최신 데이터를 유지합니다.
3. 서버에 데이터를 업로드한 후에는 수정 추적 정보를 초기화하여 동기화 상태를 정리합니다.

테스트 시나리오

1. 예산 수정 후 동기화: 사용자가 예산을 수정한 후 동기화를 진행해도 수정 내용이 유지되는지 확인
2. 카테고리 예산 수정 후 동기화: 카테고리별 예산을 수정한 후 동기화를 진행해도 수정 내용이 유지되는지 확인
3. 오프라인 상태에서 수정 후 온라인 동기화: 오프라인 상태에서 예산을 수정한 후 온라인 상태가 되었을 때 동기화가 올바르게 작동하는지 확인

향후 개선 사항

1. 예산 수정 충돌 해결 메커니즘 강화
2. 동기화 상태 UI 피드백 개선
3. 오프라인 모드에서의 예산 관리 기능 강화

결론

이번 수정을 통해 예산 데이터의 무결성과 사용자 경험이 크게 향상되었습니다. 사용자가 설정한 예산 정보가 동기화 과정에서도 안전하게 유지되어 앱의 신뢰성이 높아졌습니다.