refactor: 마커 애니메이션을 추가한다 (#870)

* design: 마커 애니메이션 추가 [#867] * design: 마커 애니메이션 추가 [#867] * refactor: 불필요한 코드 제거 [#867] * style: prettier 적용 [#867] * style: prettier 적용 [#867] * refactor: IntersectionObserver 제거 [#867] * feat: 모든 마커에 애니메이션 적용 [#867] * fix: 도시 마커를 클릭했을 때 줌이 제대로 동작하지 않는 문제를 수정 [#867] * refactor: 혼잡도 그래프에서 정보가 없는 경우의 색상을 조절 [#867] * design: 스켈레톤 색상 조절 [#867] * refactor: 서버 마커 클러스터링 요청 개선 [#867] * refactor: 지역 위치 개선 [#867] * feat: ClusterMarkers 클릭 시 확대되는 기능 구현 [#867] * style: prettier 전체 적용 [#867] * style: prettier 전체 적용 [#867] * refactor: 피드백 반영 [#867]
woowacourse-teams · Oct 17, 2023 · 209b6fb · 209b6fb
1 parent 1408b96
commit 209b6fb
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 24 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -90,5 +90,35 @@
     body {
       overflow: hidden;
     }
+
+    @keyframes grow {
+      0% {
+        transform: translateY(0) scaleY(0.1);
+        opacity: 0;
+      }
+
+      5% {
+        opacity: 0.7;
+      }
+
+      30% {
+        transform: translateY(0) scaleY(0.5);
+        opacity: 1;
+      }
+
+      50% {
+        transform: translateY(0) scaleY(1.2);
+        opacity: 1;
+      }
+
+      100% {
+        transform: translateY(0) scaleY(1);
+        opacity: 1;
+      }
+    }
+
+    .marker-animation {
+      animation: grow 300ms ease-out 0s;
+    }
   </style>
 </html>
diff --git a/frontend/src/components/common/Skeleton/Skeleton.style.ts b/frontend/src/components/common/Skeleton/Skeleton.style.ts
@@ -24,7 +24,7 @@ export const StyledSkeleton = styled.div<StyledSkeletonType>`
 
   width: ${({ width }) => width || '100%'};
   height: ${({ height }) => height || '1rem'};
-  background: linear-gradient(-90deg, var(--lighter-color), #fafafa, var(--lighter-color), #fafafa);
+  background: linear-gradient(-90deg, #c6cbd9, #fafafa, #c6cbd9, #fafafa);
   background-size: 400%;
   animation: ${skeletonAnimation} 5s infinite ease-out;
   border-radius: ${({ $borderRadius }) => $borderRadius || '6px'};

diff --git a/...onents/google-maps/marker/LargeDeltaAreaMarkerContainer/LargeDeltaAreaMarkerContainer.tsx b/...onents/google-maps/marker/LargeDeltaAreaMarkerContainer/LargeDeltaAreaMarkerContainer.tsx
@@ -13,7 +13,7 @@ const LargeDeltaAreaMarkerContainer = () => {
     getRemainedMarkerInstances,
     removeMarkersOutsideBounds,
     removeAllMarkers,
-    renderFooMarkers,
+    renderClusterMarkers,
   } = useRenderClusterMarkers();
 
   useEffect(() => {
@@ -38,7 +38,7 @@ const LargeDeltaAreaMarkerContainer = () => {
   );
 
   removeMarkersOutsideBounds(markerInstanceStore.getState(), clusterMarkers);
-  renderFooMarkers(newMarkerInstances, clusterMarkers);
+  renderClusterMarkers(newMarkerInstances, clusterMarkers);
 
   markerInstanceStore.setState([...remainedMarkerInstances, ...newMarkerInstances]);
 

diff --git a/...rc/components/google-maps/marker/LargeDeltaAreaMarkerContainer/hooks/useClusterMarkers.ts b/...rc/components/google-maps/marker/LargeDeltaAreaMarkerContainer/hooks/useClusterMarkers.ts
@@ -47,8 +47,8 @@ export const fetchClusterMarkers = async () => {
   // TODO: 가로 몇개, 세로 몇개로 나누어서 요청을 보낼지 정해야됨
   const requestQueryParams = getQueryFormattedUrl({
     ...displayPositionString,
-    latitudeDivisionSize: '3',
-    longitudeDivisionSize: '4',
+    latitudeDivisionSize: '8',
+    longitudeDivisionSize: '12',
   });
 
   const clusterMarkers = await fetch(`${SERVER_URL}/stations/clusters?${requestQueryParams}`, {

diff --git a/...ponents/google-maps/marker/LargeDeltaAreaMarkerContainer/hooks/useRenderClusterMarker.tsx b/...ponents/google-maps/marker/LargeDeltaAreaMarkerContainer/hooks/useRenderClusterMarker.tsx
@@ -2,9 +2,11 @@ import { createRoot } from 'react-dom/client';
 
 import { getStoreSnapshot } from '@utils/external-state/tools';
 
-import { getGoogleMapStore } from '@stores/google-maps/googleMapStore';
+import { getGoogleMapStore, googleMapActions } from '@stores/google-maps/googleMapStore';
 import type { MarkerInstance } from '@stores/google-maps/markerInstanceStore';
 
+import { INITIAL_ZOOM_LEVEL } from '@constants/googleMaps';
+
 import type { ClusterMarker } from '@type';
 
 import FooMarker from '../components/FooMarker';
@@ -34,8 +36,7 @@ export const useRenderClusterMarkers = () => {
       };
     });
 
-    // TODO: 구현하면 주석 풀기
-    // bindMarkerClickHandler(newMarkerInstances);
+    bindMarkerClickHandler(newMarkerInstances, newMarkers);
 
     return newMarkerInstances;
   };
@@ -68,10 +69,17 @@ export const useRenderClusterMarkers = () => {
     );
   };
 
-  const renderFooMarkers = (markerInstances: MarkerInstance[], markers: ClusterMarker[]) => {
+  const renderClusterMarkers = (markerInstances: MarkerInstance[], markers: ClusterMarker[]) => {
     markerInstances.forEach(({ instance: markerInstance, id }) => {
       const container = document.createElement('div');
 
+      container.style.opacity = '0';
+      container.classList.add('marker-animation');
+      container.addEventListener('animationend', () => {
+        container.classList.remove('marker-animation');
+        container.style.opacity = '1';
+      });
+
       markerInstance.content = container;
       markerInstance.map = googleMap;
 
@@ -81,16 +89,26 @@ export const useRenderClusterMarkers = () => {
     });
   };
 
-  const bindMarkerClickHandler = (markerInstances: MarkerInstance[]) => {
-    // TODO: 클릭시 발생할 이벤트 구현
-    console.log('아직 클릭 이벤트는 뭘 할지 정하지 않았어요!');
+  const bindMarkerClickHandler = (
+    markerInstances: MarkerInstance[],
+    newMarkers: ClusterMarker[]
+  ) => {
+    markerInstances.forEach(({ instance: markerInstance, id: stationId }) => {
+      markerInstance.addListener('click', () => {
+        const targetMarker = newMarkers.find((marker) => marker.id === stationId);
+        googleMapActions.moveTo(
+          { lat: targetMarker.latitude, lng: targetMarker.longitude },
+          INITIAL_ZOOM_LEVEL
+        );
+      });
+    });
   };
 
   return {
     createNewMarkerInstances,
     removeMarkersOutsideBounds,
     getRemainedMarkerInstances,
-    renderFooMarkers,
+    renderClusterMarkers,
     removeAllMarkers,
   };
 };
diff --git a/...components/google-maps/marker/MaxDeltaAreaMarkerContainer/hooks/useRenderRegionMarker.tsx b/...components/google-maps/marker/MaxDeltaAreaMarkerContainer/hooks/useRenderRegionMarker.tsx
@@ -4,8 +4,6 @@ import { useExternalValue } from '@utils/external-state';
 
 import { getGoogleMapStore, googleMapActions } from '@stores/google-maps/googleMapStore';
 
-import { DELTA_AREA_BREAKPOINTS } from '@constants/googleMaps';
-
 import RegionMarker from '../components/RegionMarker';
 import type { Region } from '../types';
 
@@ -17,6 +15,13 @@ export const useRenderRegionMarker = () => {
 
     const container = document.createElement('div');
 
+    container.style.opacity = '0';
+    container.classList.add('marker-animation');
+    container.addEventListener('animationend', () => {
+      container.classList.remove('marker-animation');
+      container.style.opacity = '1';
+    });
+
     const markerInstance = new google.maps.marker.AdvancedMarkerElement({
       position: { lat: latitude, lng: longitude },
       map: googleMap,
@@ -27,8 +32,7 @@ export const useRenderRegionMarker = () => {
     createRoot(container).render(<RegionMarker count={count} regionName={regionName} />);
 
     markerInstance.addListener('click', () => {
-      // TODO: 중간 단계 (서버) 클러스터링 구현 이후에 ZOOM_BREAKPOINTS.middle로 변경 예정
-      googleMapActions.moveTo({ lat: latitude, lng: longitude }, DELTA_AREA_BREAKPOINTS.large);
+      googleMapActions.moveTo({ lat: latitude, lng: longitude }, 12);
     });
 
     return () => {

diff --git a/...s/google-maps/marker/SmallMediumDeltaAreaMarkerContainer/hooks/useRenderStationMarker.tsx b/...s/google-maps/marker/SmallMediumDeltaAreaMarkerContainer/hooks/useRenderStationMarker.tsx
@@ -113,6 +113,12 @@ export const useRenderStationMarker = () => {
         });
 
         markerInstance.map = googleMap;
+        defaultMarkerDesign.element.style.opacity = '0';
+        defaultMarkerDesign.element.classList.add('marker-animation');
+        defaultMarkerDesign.element.addEventListener('animationend', () => {
+          defaultMarkerDesign.element.classList.remove('marker-animation');
+          defaultMarkerDesign.element.style.opacity = '1';
+        });
         markerInstance.content = defaultMarkerDesign.element;
       }
     });
@@ -124,7 +130,12 @@ export const useRenderStationMarker = () => {
   ) => {
     markerInstances.forEach(({ instance: markerInstance, id: stationId }) => {
       const container = document.createElement('div');
-
+      container.style.opacity = '0';
+      container.classList.add('marker-animation');
+      container.addEventListener('animationend', () => {
+        container.classList.remove('marker-animation');
+        container.style.opacity = '1';
+      });
       markerInstance.content = container;
       markerInstance.map = googleMap;
 

diff --git a/frontend/src/components/ui/StationDetailsWindow/congestion/bar/Bar.tsx b/frontend/src/components/ui/StationDetailsWindow/congestion/bar/Bar.tsx
@@ -34,7 +34,7 @@ const Bar = ({ ratio, hour }: BarProps) => {
         max={100}
         color={
           isRatioUnknown
-            ? '#ebebeb'
+            ? '#c8c8c8'
             : `linear-gradient(${`0.25turn, ${gradient.start}, ${gradient.middle}, ${gradient.end}`})`
         }
       />

diff --git a/frontend/src/constants/storageKeys.ts b/frontend/src/constants/storageKeys.ts
@@ -6,4 +6,4 @@ export const LOCAL_KEY_TOKEN = 'CARFFEINE_TOKEN';
 export const SESSION_KEY_REPORTED_STATIONS = 'CARFFEINE_REPORTED_STATIONS';
 export const SESSION_KEY_MEMBER_TOKEN = 'CARFFEINE_MEMBER_TOKEN';
 export const SESSION_KEY_MEMBER_INFO = 'CARFFEINE_MEMBER_INFO';
-export const SESSION_KEY_LAST_REQUEST_POSITION = 'CARFFEINE_LAST_REQUEST_POSITION';
+export const SESSION_KEY_LAST_REQUEST_POSITION = 'CARFFEINE_LAST_REQUEST_POSITION';
diff --git a/frontend/src/mocks/data/regions.ts b/frontend/src/mocks/data/regions.ts
@@ -9,8 +9,8 @@ export const regions: Region[] = [
   },
   {
     regionName: '인천광역시',
-    latitude: 37.469221,
-    longitude: 126.573234,
+    latitude: 37.3865,
+    longitude: 126.647,
     count: 2665,
   },
   {
@@ -45,8 +45,8 @@ export const regions: Region[] = [
   },
   {
     regionName: '경기도',
-    latitude: 37.567167,
-    longitude: 127.190292,
+    latitude: 37.2895,
+    longitude: 127.0535,
     count: 14710,
   },
   {