[TIL- 6] ProductDetailPage 및 Chat 연동 구현

📌 TIL - 2025.04.18

🛠 오늘 배운 것: ProductDetailPage 및 Chat 연동 구현

---

✅ 주요 구현 사항 요약

📄 ProductDetailViewModel

• AutoDisposeFamilyNotifier로 상품 상세 조회
• like(), delete(), createChat() 구현
• copyWith()로 상태 안전하게 업데이트

🧩 ProductDetailPage 구조

• ProductDetailPicture: 상품 이미지 슬라이드
• ProductDetailBody: 유저/카테고리/내용
• ProductDetailActions: 수정/삭제
• ProductDetailBottomSheet: 좋아요/채팅 버튼

---

✍️ Product 등록 & 수정 화면 통합

📄 ProductWritePage

• Product? 여부로 등록/수정 분기
• TextFormField + 이미지 업로드 + 카테고리 선택

📄 ProductWriteViewModel

Future<bool?> upload({
  required String title,
  required String content,
  required int price,
}) async {
  if (state.imageFiles.isEmpty || state.selectedCategory == null) return null;

  if (arg == null) {
    final result = await productRepository.create(...);
    ...
  } else {
    final result = await productRepository.update(...);
    ...
  }

  return false;
}

---

💬 채팅 기능 구현

🧠 ChatGlobalViewModel (전역)

• chatRooms, chatRoom 상태 통합 관리
• createChat(productId) → 기존 채팅 존재 시 재사용

📄 ProductDetailPage 채팅 버튼

onPressed: () async {
  final chatVm = ref.read(chatGlobalViewModel.notifier);

  var roomId = chatVm.findChatRoomByProductId(productId);
  if (roomId == null) {
    roomId = await chatVm.createChat(productId);
  }

  if (roomId == null) return;

  chatVm.fetchChatDetail(roomId);
  Navigator.push(context, MaterialPageRoute(
    builder: (context) => ChatDetailPage(),
  ));
}

---

🚀 UI 연동 흐름

• ProductListItem → ProductDetailPage(product.id)
• FloatingActionButton → ProductWritePage(null)
• ProductDetailActions → ProductWritePage(state)
• ProductDetailBottomSheet → 채팅하기로 전환

---

🧠 느낀 점 / 회고

• Riverpod Family 구조 덕분에 ViewModel 연결이 명확해졌다
• 수정/등록 페이지 통합 설계는 유지보수성 극대화
• 전역 채팅 ViewModel은 실시간 기능 확장에도 적합
• DateTimeUtils 같은 포맷터는 반드시 유틸로 분리할 것