feat: 페이지 진입시 요청 + 업데이트 리스너 등록

src/presentation/features/booking/BookingStore.ts

@@ -21,11 +21,12 @@ import MakeBooking from '../../../domain/usecases/MakeBooking';
 import BookingView from './BookingView';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import CafeteriaView from '../cafeteria/CafeteriaView';
-import CancelBooking from '../../../domain/usecases/CancelBooking';
 import GetMyBookings from '../../../domain/usecases/GetMyBookings';
+import CancelBooking from '../../../domain/usecases/CancelBooking';
 import CafeteriaStore from '../cafeteria/CafeteriaStore';
 import GetBookingOptions from '../../../domain/usecases/GetBookingOptions';
 import BookingOptionView from './BookingOptionView';
+import ListenForMyBookings from '../../../domain/usecases/ListenForMyBookings';
 import {makeAutoObservable} from 'mobx';
 import GroupedBookingOptionsView from './GroupedBookingOptionsView';
 
@@ -41,6 +42,8 @@ export default class BookingStore {
   protected _usedToBookingFeature = false;
   get usedToBookingFeature() {
     // 항상 false로 오버라이드합니다.
+    // 그래야 OnboardingHintCard가 항상 표시됩니다.
+    // 이거슨 클라이언트의 요청에 의한 것입니다.
     return false;
   }
   set usedToBookingFeature(value) {
@@ -141,6 +144,7 @@ export default class BookingStore {
     // 예약을 1회 이상 한 시점에서는
     // usedToBookingFeature(예약 기능에 익숙한가)가 true.
     this.usedToBookingFeature = true;
+
     await this.persistFlags();
   }
 
@@ -157,6 +161,31 @@ export default class BookingStore {
     );
   }
 
+  /**
+   * SSE로 예약 내역 수신 시작!
+   */
+  async listenForMyBookings() {
+    await ListenForMyBookings.run({
+      onBookings: bookings => {
+        console.log(`예약 내역 업데이트 도착!`);
+
+        const myBookings = bookings;
+        const allCafeteria = this.cafeteriaStore.cafeteria;
+
+        this.myBookings = myBookings.map(b =>
+          BookingView.fromBooking(b, allCafeteria.find(c => c.id === b.cafeteriaId)!),
+        );
+      },
+    });
+  }
+
+  /**
+   * SSE로 예약 내역 수신 중단!
+   */
+  async stopListeningForMyBookings() {
+    await ListenForMyBookings.run({});
+  }
+
   async cancelBooking(bookingId: number) {
     await CancelBooking.run({bookingId});
 

src/presentation/features/booking/History/index.tsx

@@ -40,18 +40,22 @@ function History({navigation}: Props) {
   const {bookingStore} = useStores();
 
   const [loading, fetch] = useApi(() => bookingStore.fetchMyBookings());
-  const [, refresh] = useApi(() => bookingStore.fetchMyBookings());
 
-  const myBookings = bookingStore.myBookings;
   const getMyBookings = () => fetch().catch(handleApiError);
+  const myBookings = bookingStore.myBookings;
 
   useEffect(() => {
+    // 한번 loading view 포함해서 땡겨놓고,
     getMyBookings();
-  }, []);
 
-  useInterval(() => {
-    refresh().catch();
-  }, 1000 /* 1초에 한번씩 */);
+    // 그 다음 변화부터는 listening 시작.
+    bookingStore.listenForMyBookings();
+
+    return () => {
+      // Unmount 시점에는 연결 제거.
+      bookingStore.stopListeningForMyBookings();
+    };
+  }, []);
 
   const emptyView = <NoBookingsView />;