♠♠기술 구현

장바구니 홈화면 모델 바꾸기

흑백 개발자 2024. 11. 12. 00:04
728x90
  1. ProductId를 받아서
  2. CartModel을 생성하고
  3. Firestore의 cartItems에 추가하는 흐름

 

장바구니 기능 구현 프로세스

1. 데이터 모델 설계

CartModel

class CartModel {
  final String productId;
  final String productName;
  final String productImageUrl;
  final int productPrice;
  final int quantity;

  CartModel({
    required this.productId,
    required this.productName,
    required this.productImageUrl,
    required this.productPrice,
    this.quantity = 1,
  });

  // Firestore와의 데이터 변환을 위한 메서드
  Map<String, dynamic> toMap() {...}
  factory CartModel.fromMap(Map<String, dynamic> map) {...}
}

UserModel 내 장바구니 구조

class UserModel {
  // ... 다른 필드들
  List<CartModel> cartItems;    // 일반배송 상품
  List<CartModel> pickupItems;  // 픽업배송 상품
}

 

2. 저장소(Repository) 계층 구현

ShoppingCartRepository

주요 기능:

  1. 장바구니 데이터 로드
  2. 상품 추가
  3. 배송 방식 변경
  4. 수량 변경
  5. 상품 삭제
class ShoppingCartRepository {
  final FirebaseFirestore _firestore;

  // 장바구니 데이터 로드
  Future<Map<String, List<CartModel>>> loadCartItems() async {
    // 1. userId로 사용자 문서 조회
    // 2. cartItems와 pickupItems 가져오기
    // 3. CartModel로 변환하여 반환
  }

  // 장바구니에 상품 추가
  Future<void> addToCart(String productId) async {
    // 1. 상품 정보 조회
    // 2. CartModel 형태로 변환
    // 3. users 컬렉션의 cartItems에 추가
  }

  // 배송 방식 변경 (일반 -> 픽업)
  Future<void> moveToPickup(List<String> productIds) async {
    // 1. 선택된 상품 찾기
    // 2. cartItems에서 제거
    // 3. pickupItems로 이동
    // 4. Firestore 트랜잭션으로 업데이트
  }

  // 기타 메서드들...
}

 

3. 상태 관리 (BLoC 패턴)

CartBloc

// Events
abstract class CartEvent extends Equatable {...}
class LoadCart extends CartEvent {}
class UpdateItemSelection extends CartEvent {...}
class MoveToPickup extends CartEvent {...}
// ... 기타 이벤트들

// States
class CartState extends Equatable {
  final List<CartModel> regularDeliveryItems;
  final List<CartModel> pickupItems;
  final Map<String, bool> selectedItems;
  final Map<String, int> itemQuantities;
  final bool isAllSelected;
  final bool isLoading;
  // ... 기타 상태 필드들
}

// Bloc
class CartBloc extends Bloc<CartEvent, CartState> {
  final ShoppingCartRepository _cartRepository;

  // 이벤트 핸들러들 구현
  Future<void> _onLoadCart(LoadCart event, Emitter<CartState> emit) async {...}
  Future<void> _onMoveToPickup(MoveToPickup event, Emitter<CartState> emit) async {...}
  // ... 기타 핸들러들
}

4. UI 구현

장바구니 화면 구조

class ShoppingCartScreen extends StatefulWidget {
  @override
  _ShoppingCartScreenState createState() => _ShoppingCartScreenState();
}

class _ShoppingCartScreenState extends State<ShoppingCartScreen> {
  // 1. TabController로 일반배송/픽업 탭 관리
  // 2. BlocBuilder로 상태에 따른 UI 업데이트
  // 3. 각종 이벤트 핸들링 (배송방식 변경, 수량 조정 등)
}

5. Firestore 데이터 구조

{
  "users": {
    "user_id": {
      "cartItems": [
        {
          "productId": "product123",
          "productName": "상품명",
          "productImageUrl": "이미지URL",
          "productPrice": 10000,
          "quantity": 1
        }
      ],
      "pickupItems": [
        // 동일한 구조
      ]
    }
  }
}

6. 주요 기능 플로우

장바구니 추가

  1. 홈 화면에서 장바구니 아이콘 클릭
  2. HomeBloc에서 AddToCart 이벤트 발생
  3. ShoppingCartRepository를 통해 Firestore에 저장
  4. 상품 정보를 CartModel 형태로 변환하여 저장

배송방식 변경

  1. 장바구니 화면에서 상품 선택
  2. '배송방식 변경' 버튼 클릭
  3. CartBloc에서 MoveToPickup/MoveToRegularDelivery 이벤트 발생
  4. ShoppingCartRepository에서 트랜잭션으로 데이터 이동
  5. UI 업데이트

7. 성능 및 안정성 고려사항

  1. 트랜잭션 사용으로 데이터 일관성 보장
  2. 에러 처리 및 예외 상황 대응
  3. 로딩 상태 관리
  4. 캐싱 전략
728x90