feat: 특정 줌 레벨까지 마커의 크기를 줄여서 보여주는 기능을 구현한다 #830

kyw0716 · 2023-10-05T07:54:34Z

📄 Summary

줌 레벨이 17 이상이 될 경우 기존의 카페인 마커를 렌더링하고, 16 이상 17 미만일 경우에 작은 마커를 렌더링하도록 하는 기능을 구현했습니다.
가브리엘이 구현한 zoomStore를 활용해 zoom 상태의 변화를 감지해 렌더링할 마커를 선택할 수 있도록 했습니다.
- 원래는 low, middle, high만 있던 zoom 상태에 max 상태를 추가했습니다.
zoom 상태의 변화에 따라 수행되던 로직을 각 컴포넌트의 생명 주기를 통해 수행하도록 수정했습니다.
- MiddleZoomMarkerContainer 에서 경고 모달을 보여주도록 수정했습니다.
- 다른 컨테이너의 렌더링으로 전환될 때 HighZoomMarkerContainer에서 자체적으로 마커들을 지우도록 수정했습니다.

🕰️ Actual Time of Completion

5시간

🙋🏻 More

🚀 Storybook

https://storybook.carffe.in/

close #157

[#157]

- 임시로 데모 만들어본 것입니다. 추후 제거할 가능성이 높습니다. [#157]

[#157]

- 아직 줌레벨을 실시간으로 트래킹해 17 이상인지 여부를 판별하고 있지 않으므로 재요청이 발생한 경우에만 마커가 다르게 찍히고 있습니다. [#157]

[#157]

- 각 상태에 따라 렌더링 되는 컴포넌트에 역할 위임 [#157]

- zoom state에 max 추가 - max가 추가됨에 따라 변경이 필요한 컴포넌트들 수정 - zoom state의 변화에 따라 카페인 마커가 렌더링 되는 기능 구현 - zoom state가 high, max인 경우에 HighZoomMarkerContainer 컴포넌트 마운트 - MaxZoomMarkerContainer를 만들려 했으나 HighZoomMarkerContainer와 공유하는 값들이 많아 일단 보류 [#157]

- zoom state에 따라 CarffeineMarker, DefaultMarker를 선택해 렌더링하는 로직이 두 군데에서 사용되고 있어 이 부분을 함수로 분리해주었습니다. [#157]

feb-dain

코멘트 외에 딱히 변경 사항 없어보입니다! 👍🏻

feb-dain · 2023-10-05T08:19:17Z

...d/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx

+          background: marker.availableCount > 0 ? '#3373DC' : '#EA4335',
+          borderColor: marker.availableCount > 0 ? '#324F8E' : '#B8312F',


MARKER_COLORS가 따로 있어요! CarFfeineMarker.style에서 가져와서 쓰면 될 것 같습니다~

(저도 여기서 색깔 가져다 쓰는 컴포넌트 작업 중이라 상수로 뺄까 그냥 마커 관련이니까 저기에 둘까 고민되네요)

일단 상수를 가져다 사용하는 방법으로 수정했습니다!

feb-dain · 2023-10-05T08:34:16Z

...d/src/components/google-maps/marker/HighZoomMarkerContainer/hooks/useRenderStationMarker.tsx

+      const markerInstance = markerInstances.find(
+        (markerInstance) => markerInstance.stationId === marker.stationId
+      )?.markerInstance;


[질문] markerInstance.markerInstance 제 눈엔 markerInstance에서 markerInstance를 꺼내는 게 뭔가 어색한데 보통 이런 식으로 같은 이름으로 둬도 괜찮나요??

저는 꺼내는거 괜찮은 것 같아요.
다만, 이걸 actions 같은 곳에서 해줬음 어땠나 싶긴 하지만...

아니면 네이밍을 targetMarkerInstance는 어떤가요?

이 네이밍이 사용된 부분들이 좀 있어서 수정은 내일 캠퍼스에서 같이 해보시죠!

gabrielyoon7 · 2023-10-05T08:55:21Z

frontend/package.json

@@ -16,6 +16,7 @@
  "author": "",
  "license": "ISC",
  "dependencies": {
+    "@googlemaps/markerclusterer": "^2.5.0",


이거 사용 가능 한가여?

아 이거 지운다는게 깜빡했네요!

gabrielyoon7 · 2023-10-05T08:56:13Z

frontend/src/stores/google-maps/markerInstanceStore.ts

@@ -6,3 +8,4 @@ export interface StationMarkerInstance {
 }

 export const markerInstanceStore = store<StationMarkerInstance[]>([]);
+export const markerClusterStore = store<MarkerClusterer>(null);


앞으로도 사용 예정이라면 살려둬도 괜찮을 듯 합니다만, markerclusterer를 사용하지 못하는 것으로 들었어서 확인 부탁드립니다

이 부분도 까먹고 놓친 부분이었습니다!

gabrielyoon7 · 2023-10-05T08:56:53Z

frontend/src/stores/google-maps/zoomStore/types.ts

@@ -2,6 +2,7 @@ export interface ZoomBreakpoints {
  low: number;
  middle: number;
  high: number;
+  max: number;


mini ,기본, plus, pro, pro max

장난입니다. 바꾸면 안됩니다

gabrielyoon7 · 2023-10-05T08:57:46Z

frontend/src/stores/google-maps/zoomStore/zoomStore.ts

 };

 export const zoomActions = {
  setZoom: (newZoom: number) => {
    const newZoomState = getZoomState(newZoom);
    if (newZoomState !== zoomStore.getState().state) {
-      zoomStore.setState({ level: newZoom, state: getZoomState(newZoom) });
+      zoomStore.setState({ level: newZoom, state: newZoomState });


제가 만들어 놓은 기능이긴 하다만, level이라는 개념이 계속 필요한가 싶긴 해요

일단은 두고 나중에 고민해보면 좋은 것 같아요

같이 서버 클러스터링 적용해보면서 생각해봅시다!

gabrielyoon7

동작 제대로 하는 것 같아서 어프룹 드립니다. 특이사항이 없는 것 같아요

[#157]

kyw0716 added 14 commits October 2, 2023 22:29

chore: @googlemaps/markerclusterer 패키지 설치

b55749d

[#157]

feat: 마커 클러스터링 기능 추가

98ae805

[#157]

refactor: 불필요한 console.log 삭제

2d0f621

[#157]

refactor: 클러스터링 제거하고 점 마커 도입

86c51d9

- 임시로 데모 만들어본 것입니다. 추후 제거할 가능성이 높습니다. [#157]

refactor: 작은 마커 디자인 추가

be63245

[#157]

refactor: 줌 레벨 16에서의 마커를 점 형태에서 기본 마커 형식을 유지한 작은 마커로 수정

917c9a6

[#157]

comment: 사용하지 않는 주석 제거

794b12a

[#157]

refactor: 줌 레벨 17 이상일 경우 CarffeineMarker가 렌더링 되도록 수정

5d0bf55

- 아직 줌레벨을 실시간으로 트래킹해 17 이상인지 여부를 판별하고 있지 않으므로 재요청이 발생한 경우에만 마커가 다르게 찍히고 있습니다. [#157]

refactor: 불필요한 코드 삭제

99cd8fd

[#157]

refactor: 줌레벨, 마커 크기 비율 상수화

963e62e

[#157]

refactor: zoom 상태에 따른 부수적인 동작 제거

6ba6679

- 각 상태에 따라 렌더링 되는 컴포넌트에 역할 위임 [#157]

Merge remote-tracking branch 'origin/develop' into feat/157

701632f

refactor: 중복되는 로직 함수 분리

41fdf18

- zoom state에 따라 CarffeineMarker, DefaultMarker를 선택해 렌더링하는 로직이 두 군데에서 사용되고 있어 이 부분을 함수로 분리해주었습니다. [#157]

kyw0716 added 🛠️ 리팩터링 개선사항입니다 🌱 기능추가 새로운 기능 요청입니다 FE 프론트엔드 관련 이슈입니다 labels Oct 5, 2023

kyw0716 requested review from feb-dain and gabrielyoon7 as code owners October 5, 2023 07:54

kyw0716 self-assigned this Oct 5, 2023

kyw0716 temporarily deployed to test October 5, 2023 07:54 — with GitHub Actions Inactive

feb-dain requested changes Oct 5, 2023

View reviewed changes

gabrielyoon7 reviewed Oct 5, 2023

View reviewed changes

gabrielyoon7 approved these changes Oct 5, 2023

View reviewed changes

kyw0716 added 3 commits October 5, 2023 18:05

chore: 사용하지 않는 패키지 제거

c8adb00

[#157]

refactor: 사용하지 않는 store 제거

c42c649

[#157]

refactor: 하드코딩 된 마커 색상 값 상수 활용하도록 수정

59192b4

[#157]

kyw0716 temporarily deployed to test October 5, 2023 09:10 — with GitHub Actions Inactive

feb-dain approved these changes Oct 5, 2023

View reviewed changes

kyw0716 added 2 commits October 6, 2023 12:17

refactor: 마커 인스턴스 네이밍 변경

f14e97e

[#157]

fix: 메서드명 변경에 따른 오류 수정

648c030

[#157]

kyw0716 temporarily deployed to test October 6, 2023 03:18 — with GitHub Actions Inactive

fix: 빌드 오류 수정

3b75ebe

[#157]

kyw0716 temporarily deployed to test October 6, 2023 03:23 — with GitHub Actions Inactive

kyw0716 merged commit 2a35093 into develop Oct 6, 2023
2 checks passed

kyw0716 deleted the feat/157 branch October 6, 2023 03:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: 특정 줌 레벨까지 마커의 크기를 줄여서 보여주는 기능을 구현한다 #830

feat: 특정 줌 레벨까지 마커의 크기를 줄여서 보여주는 기능을 구현한다 #830

kyw0716 commented Oct 5, 2023 •

edited by github-actions bot

Loading

feb-dain left a comment

feb-dain Oct 5, 2023

kyw0716 Oct 5, 2023

feb-dain Oct 5, 2023

gabrielyoon7 Oct 5, 2023 •

edited

Loading

kyw0716 Oct 5, 2023

gabrielyoon7 Oct 5, 2023

kyw0716 Oct 5, 2023

gabrielyoon7 Oct 5, 2023

kyw0716 Oct 5, 2023

gabrielyoon7 Oct 5, 2023

gabrielyoon7 Oct 5, 2023

gabrielyoon7 Oct 5, 2023

gabrielyoon7 Oct 5, 2023

gabrielyoon7 Oct 5, 2023

kyw0716 Oct 5, 2023

gabrielyoon7 left a comment

		background: marker.availableCount > 0 ? '#3373DC' : '#EA4335',
		borderColor: marker.availableCount > 0 ? '#324F8E' : '#B8312F',

feat: 특정 줌 레벨까지 마커의 크기를 줄여서 보여주는 기능을 구현한다 #830

feat: 특정 줌 레벨까지 마커의 크기를 줄여서 보여주는 기능을 구현한다 #830

Conversation

kyw0716 commented Oct 5, 2023 • edited by github-actions bot Loading

📄 Summary

🕰️ Actual Time of Completion

🙋🏻 More

🚀 Storybook

feb-dain left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gabrielyoon7 Oct 5, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gabrielyoon7 left a comment

Choose a reason for hiding this comment

kyw0716 commented Oct 5, 2023 •

edited by github-actions bot

Loading

gabrielyoon7 Oct 5, 2023 •

edited

Loading