투표 결과창 구현

실시간 투표 결과 시스템 구현

프로젝트 개요

이 프로젝트는 Flutter와 Firebase를 사용하여 실시간 투표 결과를 표시하는 시스템을 구현했습니다. 사용자들은 생성된 투표 방에 참여하고, 결과를 실시간으로 확인할 수 있습니다.

주요 기능

1. 실시간 투표 결과 표시
2. 투표 방 목록 조회
3. 각 투표의 상세 정보 표시 (참가자 수, 시작/종료 일자, 찬성/반대 비율)
4. 투표 상태에 따른 UI 업데이트 (진행 중/종료)
5. 푸시 알림 기능 통합

기술 스택

• Flutter
• Firebase (Firestore, Cloud Functions)
• Riverpod (상태 관리)
• Freezed (코드 생성)
• FCM (Firebase Cloud Messaging)

구현 내용

1. 실시간 데이터 처리 (ResultViewModel)

• Firestore의 실시간 스트림을 활용하여 투표 결과를 지속적으로 업데이트합니다.
• 각 투표 방에 대한 개별 스트림을 관리하여 효율적인 데이터 동기화를 구현했습니다.

void _handleRoomsSnapshot(QuerySnapshot snapshot) {
  for (var change in snapshot.docChanges) {
    switch (change.type) {
      case DocumentChangeType.added:
        _subscribeToVoteUpdates(change.doc.id);
        break;
      // ... 기타 케이스 처리
    }
  }
  _updateResults(snapshot.docs);
}

2. 상태 관리 (ResultViewState)

• Freezed 라이브러리를 사용하여 타입 안전한 상태 관리를 구현했습니다.
• 로딩, 에러, 성공 상태를 명확히 구분하여 UI에 반영할 수 있도록 했습니다.
•  

Copy@freezed
class ResultViewState with _$ResultViewState {
  const factory ResultViewState.loading() = _Loading;
  const factory ResultViewState.error(String message) = _Error;
  const factory ResultViewState.success(List<VoteResultItem> results) = _Success;
}

3. 동적 UI 구현 (ResultView)

• 투표 결과에 따라 동적으로 UI를 업데이트합니다.
• 진행 중인 투표와 종료된 투표를 시각적으로 구분하여 표시합니다.
• 찬성/반대 비율을 그래픽으로 표현하여 직관적인 이해를 돕습니다.
•  

Widget _buildPercentageBar(/*...*/) {
  return Expanded(
    child: Column(
      children: [
        Text('찬성: ${forPercentage.toStringAsFixed(1)}% ($guiltyCount표)'),
        LinearProgressIndicator(
          value: forPercentage / 100,
          // ... 스타일링
        ),
        // ... 반대 비율 표시
      ],
    ),
  );
}

4. 푸시 알림 통합

• Firebase Cloud Messaging을 사용하여 푸시 알림 기능을 구현했습니다.
• 새로운 투표 방 생성 시 사용자에게 알림을 보낼 수 있습니다.
•  

void setupPushNotifications() async {
  final fcm = FirebaseMessaging.instance;
  await fcm.requestPermission();
  final fcmToken = await fcm.getToken();
  print('FCM Token: $fcmToken');
  // 토큰을 서버에 저장하는 로직 추가
}

 

결과 및 성과

1. 실시간 데이터 동기화로 사용자 경험 향상
2. 효율적인 상태 관리로 앱 성능 최적화
3. 직관적인 UI로 사용자 참여도 증가
4. 푸시 알림 기능으로 사용자 재방문율 향상

향후 개선 사항

1. 투표 결과에 대한 더 다양한 시각화 옵션 추가
2. 사용자 맞춤형 알림 설정 기능 구현
3. 성능 최적화를 위한 페이지네이션 도입
4. 데이터 캐싱 전략 수립으로 오프라인 지원 강화

이 프로젝트를 통해 실시간 데이터 처리, 복잡한 상태 관리, 동적 UI 구현 등 다양한 기술적 도전을 극복하며 실무 역량을 크게 향상시켰습니다. 특히 Firebase의 실시간 데이터베이스와 Flutter의 강력한 UI 구현 능력을 결합하여 사용자 중심의 애플리케이션을 개발하는 경험을 쌓았습니다.