Hotwire Native에서 Flutter BLoC으로 — 네이티브 앱 전환 실전기

# app/services/api/v1/json_web_token.rb
module Api
  module V1
    class JsonWebToken
      ALGORITHM = 'HS256'
      ACCESS_TTL = 15.minutes
      REFRESH_TTL = 30.days

      def self.encode(payload, ttl = ACCESS_TTL)
        payload[:exp] = ttl.from_now.to_i
        header = Base64.urlsafe_encode64({ alg: ALGORITHM, typ: 'JWT' }.to_json)
        body = Base64.urlsafe_encode64(payload.to_json)
        signature = sign("#{header}.#{body}")
        "#{header}.#{body}.#{signature}"
      end
    end
  end
end

# app/controllers/api/v1/base_controller.rb
class Api::V1::BaseController < ActionController::Base
  before_action :authenticate_api_user!
  
  private
  
  def authenticate_api_user!
    token = request.headers['Authorization']&.split(' ')&.last
    payload = Api::V1::JsonWebToken.decode(token)
    @current_api_session = Session.find(payload[:session_id])
    @current_api_user = @current_api_session.user
  rescue
    render json: { error: { message: '인증이 필요합니다' } }, status: :unauthorized
  end
end

// 인터셉터 순서가 중요하다
dio.interceptors.addAll([
  _authInterceptor(),         // 1. Bearer 토큰 자동 첨부
  _tokenRefreshInterceptor(), // 2. 401 시 토큰 갱신 + 원래 요청 재시도
  _errorInterceptor(),        // 3. DioException → AppException 변환
  if (kDebugMode) PrettyDioLogger(), // 4. 개발 시 로그
]);

InterceptorsWrapper _tokenRefreshInterceptor() {
  bool isRefreshing = false;
  return InterceptorsWrapper(
    onError: (error, handler) async {
      if (error.response?.statusCode != 401 || isRefreshing) {
        return handler.next(error);
      }
      isRefreshing = true;
      try {
        final newToken = await _refreshToken();
        // 원래 요청을 새 토큰으로 재시도
        final retryResponse = await dio.fetch(
          error.requestOptions..headers['Authorization'] = 'Bearer $newToken',
        );
        handler.resolve(retryResponse);
      } catch (_) {
        handler.next(error);
      } finally {
        isRefreshing = false;
      }
    },
  );
}

// 이 코드가 시뮬레이터에서 무한 대기한다
await pushNotificationService.initialize();
// ↑ 내부에서 FirebaseMessaging.instance.requestPermission()을 호출하는데,
//   시뮬레이터에는 APNs가 없어서 응답이 안 온다

// Before (행 걸림)
await pushNotificationService.initialize();
runApp(...);

// After (non-blocking)
pushNotificationService.initialize().catchError((e) {
  debugPrint('Push init failed: $e');
});
runApp(...); // 즉시 실행됨

BlocListener<AuthBloc, AuthState>(
  listener: (context, state) {
    if (state is AuthAuthenticated) {
      pushNotificationService.registerWithServer();
    }
    if (state is AuthUnauthenticated) {
      pushNotificationService.unregisterFromServer();
    }
  },
)

class GwColors {
  static const primary500 = Color(0xFFFF6B2C);  // --color-primary-500
  static const surfacePrimary = Color(0xFFFFFFFF);
  static const surfaceSecondary = Color(0xFFFAFAF9);
  static const textPrimary = Color(0xFF1C1917);
  static const textSecondary = Color(0xFF78716C);
  static const borderDefault = Color(0xFFE7E5E4);
  // ... 50+ 토큰
}

// 사이드바 유저 카드 — Liquid Glass 스타일
ClipRRect(
  borderRadius: GwRadius.lgAll,
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
    child: Container(
      decoration: BoxDecoration(
        color: Colors.white.withAlpha(18),  // 7% white
        border: Border.all(color: Colors.white.withAlpha(31)),
      ),
      child: // 유저 프로필 정보
    ),
  ),
)

class DashboardCubit extends Cubit<DashboardState> {
  Future<void> loadDashboard() async {
    emit(state.copyWith(status: LoadStatus.loading));
    try {
      final data = await _repo.getDashboard();
      emit(state.copyWith(data: data, status: LoadStatus.success));
    } catch (e) {
      emit(state.copyWith(status: LoadStatus.failure));
    }
  }
}

// 전역: 앱 전체에서 항상 필요한 것만
MultiBlocProvider(
  providers: [
    BlocProvider(create: (_) => AuthBloc(...)..add(AuthAppStarted())),
    BlocProvider(create: (_) => NotificationCubit(...)),
  ],
  child: MaterialApp.router(...),
)

// 로컬: 화면 진입 시 생성, 이탈 시 자동 해제
GoRoute(
  path: '/chats/:id',
  builder: (context, state) => BlocProvider(
    create: (_) => ChatDetailBloc(...)..add(ChatLoadRequested(channelId)),
    child: ChatDetailScreen(),
  ),
)

GoRouter(
  initialLocation: '/splash',
  refreshListenable: GoRouterRefreshStream(authBloc.stream),
  redirect: (context, state) {
    final authState = authBloc.state;
    final location = state.matchedLocation;
    
    // 아직 초기화 중 → 스플래시 유지
    if (authState is AuthInitial || authState is AuthLoading) {
      return location == '/splash' ? null : '/splash';
    }
    // 미인증 → 로그인으로
    if (authState is AuthUnauthenticated) {
      return location == '/login' ? null : '/login';
    }
    // 인증됨 + 온보딩 필요 → 온보딩으로
    if (authState is AuthAuthenticated && authState.needsOnboarding) {
      return location == '/onboarding' ? null : '/onboarding';
    }
    // 인증 완료인데 스플래시/로그인에 있으면 → 대시보드로
    if (authState is AuthAuthenticated && 
        (location == '/splash' || location == '/login')) {
      return '/dashboard';
    }
    return null; // 리다이렉트 불필요
  },
)

class ChatWebSocketService {
  Future<void> connect() async {
    final token = await _storage.getAccessToken();
    _channel = WebSocketChannel.connect(
      Uri.parse('wss://server.com/cable?token=$token'),
    );
  }

  Stream<ChatMessageDto> subscribeToChat(int channelId) {
    _channel?.sink.add(jsonEncode({
      'command': 'subscribe',
      'identifier': jsonEncode({
        'channel': 'ChatChannel',
        'chat_channel_id': channelId,
      }),
    }));
    // ActionCable 프로토콜: ping 메시지 필터링
    return _channel!.stream
      .map((data) => jsonDecode(data))
      .where((json) => json['type'] == null) // ping/confirm 제외
      .map((json) => ChatMessageDto.fromJson(json['message']));
  }
}

MarkdownBody(
  data: content ?? '',
  selectable: true,
  onTapLink: (text, href, title) {
    if (href != null) launchUrl(Uri.parse(href));
  },
  styleSheet: MarkdownStyleSheet(
    p: TextStyle(fontSize: 14, height: 1.6, color: GwColors.textPrimary),
    strong: TextStyle(fontWeight: FontWeight.w600),
    code: TextStyle(backgroundColor: GwColors.surfaceTertiary),
  ),
)