[TIL-250421] - Flutter 중고마켓 프로젝트

📌 오늘의 TIL - Flutter 중고마켓 프로젝트

✅ ProductDetailPage 구현

• Product 모델링: 상품 상세 페이지 구현을 위한 모델 정의 및 JSON 파싱 구현 완료.
• ProductRepository: 상세 조회(fetchDetail), 좋아요(like), 삭제(delete) 기능 구현.
• ProductDetailViewModel: AutoDisposeFamilyNotifier를 활용해 productId를 기반으로 상세 조회 및 상태 관리.
• View 위젯 구성:
  • ProductDetailPicture: 이미지 슬라이더
  • ProductDetailBody: 프로필, 카테고리, 날짜, 내용
  • ProductDetailBottomSheet: 가격, 좋아요, 채팅하기 버튼
  • ProductDetailActions: 삭제 및 수정 버튼 (로그인 유저와 일치 시)

// 좋아요 누를 때
final result = await vm.like();
if (result) {
  ref.read(homeTabViewModel.notifier).fetchProducts();
}

✅ ProductWritePage 구현

• ProductWriteViewModel: Product 객체 여부에 따라 등록 vs 수정 분기.
• ProductCategoryRepository: 카테고리 목록을 서버에서 조회.
• 이미지 업로드: ImagePickerHelper 사용 후 서버에 업로드하고 상태 갱신.
• 위젯 구성:
  • ProductCategoryBox: PopupMenu로 카테고리 선택
  • ProductWritePictureArea: 이미지 업로드 영역

// 이미지 업로드 처리
final result = await fileRepository.upload(
  filename: file.filename,
  mimeType: file.mimeType,
  bytes: file.bytes,
);
if (result != null) {
  state = state.copyWith(imageFiles: [...state.imageFiles, result]);
}

✅ Chat 기능 구현 (채팅방 목록 및 채팅 상세)

• Chat 모델링: ChatMessage, ChatProduct, ChatRoom 구현.
• ChatRepository: 채팅방 목록/상세/생성 API 연동.
• ChatGlobalViewModel: 전역 상태관리자로 모든 채팅방과 현재 채팅방 상태 관리.
• ChatListView / ChatDetailPage 구현:
  • 상대방 닉네임 및 마지막 메시지 출력
  • 메시지 발신자에 따라 ChatListSendItem 또는 ChatListReceiveItem 렌더링

// 채팅방 없으면 생성 후 이동
var roomId = chatVm.findChatRoomByProductId(productId);
if (roomId == null) {
  final result = await chatVm.createChat(productId);
  if (result != null) roomId = result;
}
if (roomId != null) {
  chatVm.fetchChatDetail(roomId);
  Navigator.push(...);
}

💡 배운 점 정리

• NotifierProvider.autoDispose.family를 사용하면 특정 ID 기반으로 상태를 분리해서 관리할 수 있음.
• 상세 페이지/수정 페이지 코드 재활용 시, 상태 초기화를 Product? null 여부로 판단하면 깔끔하게 해결 가능.
• 채팅방 등 실시간 상태는 전역 상태 관리자로 통합 관리하는 것이 효율적.

🧠 다음 목표

• WebSocket을 이용한 실시간 채팅 전송/수신 기능 구현
• 상품 검색 기능 추가
• 무한스크롤 및 pull-to-refresh 기능 도입