[기능 추가] 지도 이동에 따른 매물 리스트 로딩 - [merged] #49

Closed seoyoung059 closed 2 months ago

In GitLab by @242lee on Jul 30, 2024, 12:55

Merges front/DragMap/S11P12A702-323 -> front/RealEstateList/S11P12A702-251

:link: 해당 MR과 연결된 JIRA의 태스크는 무엇인가요?

S11P12A702-323

🔍️ 해당 MR을 통해 해결하려는 문제가 무엇인가요?

어떤 기능을 구현한 건지, 이슈 대응이라면 어떤 이슈인지 MR이 열리게 된 계기와 목적을 Reviewer들이 쉽게 이해할 수 있도록 적어 주세요 다이어그램, 피그마를 첨부해도 좋아요

지도_화면에_따른_리스트_로딩

지도 위치에 따라 달라지는 왼쪽 매물 목록

맵마커로_상세페이지_열기

팀원 의견에 따라 맵 마커 클릭시 상세페이지 등장

✨ 해당 MR에서 핵심적으로 변경된 사항은 무엇일까요?

문제를 해결하면서 주요하게 변경된 사항들을 적어 주세요

지도 이동에 따라 화면에 나타나는 부분만 리스트로 보이게 함.

🔖 핵심 변경 사항 외에 추가적으로 변경된 부분이 있나요?

없으면 "없음" 이라고 기재해 주세요

없음

📝 작업중 고찰하신게 있나요?

이번에 특정 기술 도입 또는 방향성 선택의 이유가 있다면, 그 부분에 대해서 설명해주세요!
const handleBoundsChange = () => {
if (!map) return; // 지도 객체가 없으면 종료

const bounds = map.getBounds(); // 현재 지도의 경계를 가져옵니다.

// 현재 보이는 영역 내의 데이터를 필터링합니다. const visiblePositions = positions.filter(pos => bounds.contain(new kakao.maps.LatLng(pos.lat, pos.lng)) );

onBoundsChange(visiblePositions); // 필터링된 데이터를 부모 컴포넌트로 전달합니다. };



### 1. if (!map) return;:

- map 객체가 없으면 함수가 실행되지 않도록 해서 지도 객체가 아직 초기화되지 않았을 때 오류를 방지.

### 2. const bounds = map.getBounds();:

- `map.getBounds()`메서드를 호출하여 현재 지도의 보이는 영역(경계)만 가져옴.

### 3. const visiblePositions = positions.filter(pos => bounds.contain(new kakao.maps.LatLng(pos.lat, pos.lng)));:

- positions 배열에 있는 모든 데이터 포인트를 순회하며, 각 포인트의 좌표가 현재 지도의 경계 내에 있는지 확인.
- `bounds.contain()` 메서드를 사용하여 포인트의 좌표가 보이는 영역 내에 있는지 확인.

### 4. onBoundsChange(visiblePositions);:

- 필터링된 데이터(현재 보이는 영역 내의 데이터)를 부모 컴포넌트로 전달하여 부모 컴포넌트에서는 이 데이터를 사용하여 UI를 업데이트.

## 🙏 Reviewer 분들이 이런 부분을 신경써서 봐 주시면 좋겠어요

> 개발 과정에서 다른 분들의 의견은 어떠한지 궁금했거나 크로스 체크가 필요하다고 느껴진 코드가 있다면 남겨주세요
> 
> 없으면 "없음" 이라고 기재해 주세요

- 없음

## ✅ 제출 전 필수 확인 사항

- [X]  빌드가 되는 코드인가요? <!-- 빌드가 되지 않는 코드는 절대 merge 될 수 없습니다. -->
- [X]  버그가 발생하지 않는지 충분히 테스트 해봤나요? <!-- 버그가 발생하는걸 알면서 QA를 넘기는건 매우 무책임한 행동입니다. -->

## 📌 MR 진행 시 이러한 점들을 참고해 주세요

- Reviewer 분들은 코드 리뷰 시 좋은 코드의 방향을 제시하되, 코드 수정을 강제하지 말아 주세요.
- Reviewer 분들은 좋은 코드를 발견한 경우, 칭찬과 격려를 아끼지 말아 주세요.
- Comment 작성 시 Prefix로 P1, P2, P3 를 적어 주시면 Assignee가 보다 명확하게 Comment에 대해 대응할 수 있어요
    - P1 : 꼭 반영해 주세요 (Request Changes) - 이슈가 발생하거나 취약점이 발견되는 케이스 등
    - P2 : 반영을 적극적으로 고려해 주시면 좋을 것 같아요 (Comment)
    - P3 : 이런 방법도 있을 것 같아요~ 등의 사소한 의견입니다 (Chore)

In GitLab by @242lee on Jul 30, 2024, 12:55

requested review from @iltae

In GitLab by @242lee on Jul 30, 2024, 12:56

approved this merge request

In GitLab by @iltae on Jul 30, 2024, 13:02

P2 : 마커 눌렀을 때 매물 상세 올라오는 연결도 추가해주시면 좋을 것 같아요

In GitLab by @242lee on Jul 30, 2024, 13:17

added 1 commit

55165279 - :sparkles: Feat: 맵마커로 상세페이지 열기

Compare with previous version

In GitLab by @iltae on Jul 30, 2024, 13:21

P3 : 엄청 빠르네요 너무 고생하셨습니다 !!

In GitLab by @iltae on Jul 30, 2024, 13:21

mentioned in commit 7acb9030bd0a2c3169934a490088570ceff3e16c

seoyoung059 / Ownbang