호출순서에 따라 구현이 안되는 문제

일반배송, 픽업 탭에서 밑에 가격 계산을 따로 했는데, 일반배송의 가격이 픽업 눌러도 업데이트가 안되었다.
이유가 픽업탭을 눌러도 상품체크전에 가격 계산이 된것.
호출순서를 바꿔서 탭 누르면 상품배송 선택하고 거기에 가격계산 하도록 초기화로 순서를 정했다.

 

장바구니의 탭 전환 시 가격 정보 업데이트 문제 해결 과정을 정리하겠습니다.

1. 문제 상황:

• 탭 전환 시 하단 가격 정보가 때때로 이전 탭의 정보를 유지함
• 탭 전환과 가격 업데이트의 비동기적 처리로 인한 타이밍 이슈 발생

1. 원인 분석:

• 탭 컨트롤러가 탭 변경을 감지하고 상품 선택 상태를 변경하는 과정이 가격 계산보다 늦게 실행될 수 있음
• 상태 관리가 TabController와 Bloc 간에 동기화되지 않음

1. 해결 방법:
2.  

// 1. CartState에 현재 탭 상태 추가
class CartState extends Equatable {
  // 기존 상태들...
  final bool isRegularDeliveryTab; // 현재 탭 상태 추가

  const CartState({
    // 기존 파라미터들...
    this.isRegularDeliveryTab = true, // 기본값은 일반배송
  });
}

// 2. 탭 변경을 처리할 새로운 이벤트 추가
class UpdateCurrentTab extends CartEvent {
  final bool isRegularDeliveryTab;
  const UpdateCurrentTab(this.isRegularDeliveryTab);
}

// 3. CartBloc에 탭 변경 핸들러 추가 - 순차적 처리 보장
void _onUpdateCurrentTab(UpdateCurrentTab event, Emitter<CartState> emit) {
  // 3-1. 먼저 현재 탭 정보 업데이트
  emit(state.copyWith(isRegularDeliveryTab: event.isRegularDeliveryTab));
  
  // 3-2. 현재 탭의 아이템들 선택 상태 업데이트
  final currentItems = event.isRegularDeliveryTab 
      ? state.regularDeliveryItems 
      : state.pickupItems;
      
  final updatedSelectedItems = Map<String, bool>.from(state.selectedItems);
  for (var item in currentItems) {
    updatedSelectedItems[item.productId] = true;
  }

  // 3-3. 선택 상태 업데이트된 최종 상태 emit
  emit(state.copyWith(
    selectedItems: updatedSelectedItems,
    isAllSelected: true,
  ));
}

// 4. 탭 변경 리스너에서 순차적 이벤트 처리
_tabController.addListener(() {
  final cartBloc = context.read<CartBloc>();
  cartBloc.add(UpdateCurrentTab(_tabController.index == 0));
});

// 5. 하단바에서 현재 탭 상태에 따른 가격 계산
bottomNavigationBar: CartBottomBarWidget(
  currentItems: state.isRegularDeliveryTab
      ? state.regularDeliveryItems 
      : state.pickupItems,
  selectedItems: state.selectedItems,
  itemQuantities: state.itemQuantities,
),

1. 해결 효과:

• 탭 변경 → 상태 업데이트 → 가격 계산의 순서가 보장됨
• Bloc 내부에서 상태 변경이 순차적으로 처리됨
• TabController와 Bloc의 상태가 동기화되어 일관성 유지
• 가격 정보가 현재 탭의 상태를 정확히 반영

1. 핵심 포인트:

• 상태 관리의 중앙화 (CartBloc에서 탭 상태까지 관리)
• 이벤트 처리의 순차적 실행 보장
• 명확한 데이터 흐름 구조 설계

이러한 해결 방식을 통해 탭 전환 시 가격 정보가 안정적으로 업데이트되도록 개선되었습니다.