refactor: 무한스크롤 훅을 위한 msw 개조

[#537]
woowacourse-teams · Aug 16, 2023 · 05223f3 · 05223f3
1 parent 46f8907
commit 05223f3
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 4 deletions.
diff --git a/frontend/src/mocks/data.ts b/frontend/src/mocks/data.ts
@@ -46,7 +46,7 @@ const generateRandomStationId = () => {
   return `${randomLetter1}${randomLetter2}${randomNumber}`;
 };
 
-export const stations: Station[] = Array.from({ length: 3000 }, (_, index) => {
+export const stations: Station[] = Array.from({ length: 10 }, (_, index) => {
   const randomStationId = generateRandomStationId();
   return {
     stationId: randomStationId,

diff --git a/frontend/src/mocks/handlers/station-markers/stationHandlers.ts b/frontend/src/mocks/handlers/station-markers/stationHandlers.ts
@@ -23,6 +23,21 @@ export const stationHandlers = [
     const selectedChargerTypes = searchParams.get('chargerTypes')?.split(',');
     const selectedCapacities = searchParams.get('capacities')?.split(',')?.map(Number);
     const selectedCompanies = searchParams.get('companies')?.split(',');
+    const lastStationId = searchParams.get('lastStationId');
+
+    console.log(
+      latitude,
+      longitude,
+      latitudeDelta,
+      longitudeDelta,
+      isChargerTypeFilterSelected,
+      isCapacityFilterSelected,
+      isCompanyNameFilterSelected,
+      selectedChargerTypes,
+      selectedCapacities,
+      selectedCompanies,
+      lastStationId
+    );
 
     const northEastBoundary = {
       latitude: latitude + latitudeDelta,
@@ -73,13 +88,43 @@ export const stationHandlers = [
       });
 
     console.log('찾은 충전소 갯수: ' + foundStations.length);
+    //
+    // return res(
+    //   ctx.delay(1000),
+    //   ctx.status(200),
+    //   ctx.json({
+    //     stations: foundStations,
+    //   })
+    // );
+    if (foundStations.length === 0) {
+      return res(
+        ctx.json({
+          stations: [],
+          hasNextPage: false,
+        }),
+        ctx.delay(1000),
+        ctx.status(200)
+      );
+    }
+
+    if (Math.random() < 0.3) {
+      return res(
+        ctx.json({
+          stations: foundStations.slice(0, 3),
+          hasNextPage: false,
+        }),
+        ctx.delay(1000),
+        ctx.status(200)
+      );
+    }
 
     return res(
-      ctx.delay(1000),
-      ctx.status(200),
       ctx.json({
         stations: foundStations,
-      })
+        hasNextPage: true,
+      }),
+      ctx.delay(1000),
+      ctx.status(200)
     );
   }),
 ];