[예림] 오픈뱅킹 API 연동 및 리팩토링

[cocoaocean]

✏️ 기능 설명

오픈뱅킹 프론트에서 백엔드(Swagger v2) API를 연동해 계좌·카드 등록/동기화/조회, 거래내역, Ledger 기능을 제공한다. 동시에 중복된 달력/필터/스타일/데이터 처리 로직을 정리하기 위해 v-calendar 도입, 공통 컴포넌트·Composables 추출, 스타일 토큰화로 프론트 구조를 개선한다. 공통 응답 포맷(status, message, data)과 JWT 인증은 일관 처리한다.

📌 할 일

• 계좌 플로우 연동: 등록 → 동기화 → 목록/합계 → 거래내역 조회
• 카드 플로우 연동: 등록 → 동기화 → 목록 → 거래내역 조회
• Ledger 목록 연동: 기간·출처(계좌/카드) 필터 적용
• 기본 기간 적용: 오늘-3개월 ~ 오늘, ISO 포맷 유지
• 공통 UX: 성공/실패 토스트, 빈 상태(거래 0건), 5xx 재시도 버튼
• 인증 예외: 401 수신 시 즉시 로그아웃 및 로그인 화면 이동
• Swagger v2 파라미터 교차 확인(필드명·날짜 포맷만 점검)
• v-calendar 도입 및 전역 등록, DateRangePicker 공통 컴포넌트 교체(프리셋: 이번달/지난달/7일/30일)
• 공통 컴포넌트 분리: TransactionFilterBar, TransactionList/Item, EmptyState, SkeletonList
• Composables 추출: useCalendarRange(범위 검증), useTransactionsFilter(카테고리/금액/검색/정렬), useFormatters(+옵션 usePagination)
• 리팩토링 커밋 분할: 달력 → 필터 → 스타일 순서로 작은 PR

👊🏻 참고 자료

• Swagger v2: /swagger-ui.html (엔드포인트·스키마 확인)
• 공통 응답 예시
  • 성공: {"status":200,"message":"OK","data":{...}}
  • 오류: {"status":400|404|500,"message":"에러","data":null}