Skip to content

[UNI-141] feat : 길 조회 API 연결 #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 6, 2025
Merged

[UNI-141] feat : 길 조회 API 연결 #67

merged 1 commit into from
Feb 6, 2025

Conversation

jpark0506
Copy link
Contributor

#️⃣ 작업 내용

  1. 길 조회 API를 연결했습니다.

소통을 위해 잠깐 필요한 부분

image

제가 길을 백엔드에 잘못 줘서.. 아마 꺾이는 길에서 계속 5번 라우트가 뜰 예정입니다. 정상이니까 당황하지 마시고, 오히려 제보 테스트에 사용하면 좋을 거 같습니다~!

핵심 기능

길 조회 API 연결

#65 이 PR에서 길 조회 API를 만들어 놓았었는데, transformer까지 적용시켜 잘 만들어놓았습니다. 좀 불편한 부분은 nodeId를 다이렉트로 map 형태로 가져올 수 있는 데이터가 없는데 처음 시작과 끝에서 그릴 때 처음 index와 마지막 index를 활용해야 한다는 점이 cost입니다.

연결한 페이지는

  1. 제보 페이지
  2. 길 추가 페이지

두가지 페이지에 모두 다 연결했습니다.

적용한 방식

기존 로직은 하나의 Path에 대해서 그리는 방식이었는데, 조금 응용해서 2중 for문을 사용했습니다.
데이터 불러오는 속도 자체는 매우 빨라서, 사용자 입장에서 Overhead가 적은 것 같습니다. 나중에 개발자 창으로 Data가 얼마나 오는지 같이 확인해보면 좋을 것 같습니다.

const drawRoute = (coreRouteList: CoreRoutesList) => {
		if (!Polyline || !AdvancedMarker || !map) return;

		for (const coreRoutes of coreRouteList) {
			// 가장 끝쪽 Core Node 그리기
			const endNode = coreRoutes.routes[coreRoutes.routes.length - 1].node2;

			createAdvancedMarker(
				AdvancedMarker,
				map,
				endNode,
				createMarkerElement({ type: Markers.WAYPOINT, className: "translate-waypoint" }),
			);

			for (const coreRoute of coreRoutes.routes) {
				const routePolyLine = new Polyline({
					map: map,
					path: [coreRoute.node1, coreRoute.node2],
					strokeColor: "#808080",
				});

				routePolyLine.addListener("click", (e: ClickEvent) => {
					const subNodes = createSubNodes(routePolyLine);

					alert(coreRoute.routeId);

					const edges = subNodes
						.map(
							(node, idx) =>
								[node, subNodes[idx + 1]] as [google.maps.LatLngLiteral, google.maps.LatLngLiteral],
						)
						.slice(0, -1);

					const point = LatLngToLiteral(e.latLng);

					const { edge: nearestEdge, point: nearestPoint } = findNearestSubEdge(edges, point);

					const newReportMarker = createAdvancedMarker(
						AdvancedMarker,
						map,
						centerCoordinate(nearestEdge[0], nearestEdge[1]),
						createMarkerElement({
							type: Markers.REPORT,
							className: "translate-routemarker",
							hasAnimation: true,
						}),
					);

					setMessage(ReportHazardMessage.CREATE);

					setReportMarker((prevMarker) => {
						if (prevMarker) {
							resetMarker(prevMarker);
						}

						return {
							type: Markers.REPORT,
							element: newReportMarker,
							edge: nearestEdge,
						};
					});
				});
			}
			// 시작하는 쪽의 Core Node 그리기
			const startNode = coreRoutes.routes[0].node1;
			createAdvancedMarker(
				AdvancedMarker,
				map,
				startNode,
				createMarkerElement({ type: Markers.WAYPOINT, className: "translate-waypoint" }),
			);
		}
	};

2중 for문을 돌며, 동현님이 만들어놓으신 그대로 endNode부터 marker를 찍고 Polyline을 그린 후 event를 걸고, startNode를 그렸습니다.
근데 이렇게 2중 for문을 도는 것보다, coreNode들만 마커를 따로 찍고, 나머지들에 대해서 Polyline을 그리는 방식으로 변경하는 것도 좋을 것 같습니다. 우선은 만드신 로직 그대로 적용하고 싶어서 유지했습니다. (제보 페이지도 그대로 로직은 남겨둔채 2중 For문으로 변경했습니다.)

동작 화면

제보 화면

image

길 추가 화면

역시.. 잘 만들어놓으셔서 바로 적용이 되네요

image image

@jpark0506 jpark0506 added 🚀 feat 기능 개발 🧇 fe 프론트엔드 task labels Feb 6, 2025
@jpark0506 jpark0506 requested a review from dgfh0450 February 6, 2025 12:03
@jpark0506 jpark0506 self-assigned this Feb 6, 2025
@softeer5th softeer5th deleted a comment from coderabbitai bot Feb 6, 2025
Copy link
Contributor

@dgfh0450 dgfh0450 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! 마무리해주셔서 감사합니다
고생하셨어요~

Comment on lines +129 to +147
const drawRoute = (coreRouteList: CoreRoutesList) => {
if (!Polyline || !AdvancedMarker || !map) return;

for (const route of routes) {
const coreNode = route.endNode;
for (const coreRoutes of coreRouteList) {
// 가장 끝쪽 Core Node 그리기
const endNode = coreRoutes.routes[coreRoutes.routes.length - 1].node2;

createAdvancedMarker(
AdvancedMarker,
map,
coreNode,
endNode,
createMarkerElement({ type: Markers.WAYPOINT, className: "translate-waypoint" }),
);
for (const coreRoute of coreRoutes.routes) {
const routePolyLine = new Polyline({
map: map,
path: [coreRoute.node1, coreRoute.node2],
strokeColor: "#808080",
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!
좋습니다! 다행히 로직들이 정상적으로 동작해서 다행입니다..!

coreRouteList, CoreRoute 등 적절한 타입 덕분에 코드 가독이 좋습니다!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🧇 fe 프론트엔드 task 🚀 feat 기능 개발
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants