[UNI-221] feat : 지도 메인페이지 UX 개선 및 길찾기 사용자 로직 변경 by dgfh0450 · Pull Request #127 · softeer5th/Team2-Getit

dgfh0450 · 2025-02-13T08:39:22Z

#️⃣ 작업 내용

지도 메인페이지 UX / UI 개선
TopSheet, BottomSheet 재설정
시작 도착 선택시 해당 마커를 보일 수 있도록 지도 이동
지도 검색 페이지, 뒤로가기 버튼 추가

주요 기능

상단 Input Top Sheet 2가지 생성

	<MapTopBuildingSheet isVisible={(selectedMarker?.type === Markers.BUILDING ? false : true) && searchMode === "BUILDING"} />
	<MapTopRouteSheet isVisible={(selectedMarker?.type === Markers.BUILDING ? false : true) && searchMode != "BUILDING"} />
	<div ref={mapRef} className="w-full h-full" />
	<MapBottomSheet
		selectRoutePoint={selectRoutePoint}
		selectedMarker={selectedMarker}
		isVisible={selectedMarker?.type === Markers.BUILDING ? true : false}
	/>

시트를 보여주는 시나리오는 총 3가지가 존재합니다.
1. 건물을 선택하여 BottomSheet 보여주기
1. 건물을 검색하기 위한 건물 검색 TopSheet 보여주기
1. 경로를 검색하기 위한 경로 검색 TopSheet 보여주기
2번과 3번을 구분하기 위해, 기존에 있던 useSearchBuilding에서 2가지 모드를 3가지 BUILDING, ORIGIN, DESTINATION으로 재정의하고 검색 모드가 BUILDING인지 아닌지로 구분하였습니다.
그리고 모드가 바뀜에 따라 TopSheet간의 전환이 자연스럽게 진행하도록 애니메이션을 적용하였습니다.

사용자 건물 선택 로직 (시나리오 변경)

직접 UX를 설계하는 과정이 필요하여 제 나름대로 설계를 하고 Flow 차트를 그려봤습니다.
1. 건물 검색 버튼
1. 경로 검색 버튼
1. 바텀 시트
3가지의 주요 컴포넌트 간의 관계도 입니다.

동적 지도 이동

출발, 도착을 선택한 경우에 해당 위치에 맞게 지도를 조정하고자 @jpark0506 준혁님께서 작성해주신 moveToBound 함수를 약간 변형하여 사용하였습니다.

const moveToBound = (coord: Coord) => {
		buildingBoundary.current = new google.maps.LatLngBounds();
		buildingBoundary.current.extend(
			coord
		);
		// 라이브러리를 다양한 화면을 관찰해보았을 때, h-가 377인것을 확인했습니다.
		map?.fitBounds(buildingBoundary.current, {
			top: 0,
			right: 0,
			bottom: BOTTOM_SHEET_HEIGHT,
			left: 0,
		});
	};

이동시킬 좌표를 입력받아서 이동되도록 변경하였고

	/** 출발 도착 설정시, 출발 도착지가 한 눈에 보이도록 지도 조정 */
	useEffect(() => {
		if (origin && destination) {
			const newBound = new google.maps.LatLngBounds();
			newBound.extend(origin);
			newBound.extend(destination)
			map?.fitBounds(newBound)
		}

	}, [origin, destination]);

출발 도착지가 결정된 경우에, 자연스럽게 이동할 수 있도록 두 점을 포함하였습니다.
이 과정에서 매우 먼 거리를 출발 도착으로 선정한경우, 줌이 바뀌어 마커가 안보이는 경우가 발생하였습니다.

useEffect(() => {
		if (!map) return;

		if (prevZoom.current >= 17 && zoom <= 16) {
			if (isCautionAcitve) {
				toggleMarkers(
					false,
					cautionMarkers.map((marker) => marker.element),
					map,
				);
			}
			if (isDangerAcitve) {
				toggleMarkers(
					false,
					dangerMarkers.map((marker) => marker.element),
					map,
				);
			}

			toggleMarkers(true, universityMarker ? [universityMarker] : [], map);
			toggleMarkers(false, buildingMarkers.filter(el => el.nodeId !== origin?.nodeId && el.nodeId !== destination?.nodeId).map(el => el.element), map);
	}, [map, zoom]);

그리하여, 줌이 변경되더라도, 출발, 도착 건물 마커는 toggle되지 않도록하였습니다.
또한, 출발 도착을 변경하는 경우에도 마커가 해제되는 문제를 발견하여

	/** 도착지 결정 시, Marker Content 변경 */
	useEffect(() => {
		if (!destination || !destination.nodeId) return;

		const destinationMarker = findBuildingMarker(destination.nodeId);
		if (!destinationMarker) return;

		destinationMarker.map = map;

		destinationMarker.content = createMarkerElement({
			type: Markers.DESTINATION,
			title: destination.buildingName,
			className: "translate-routemarker",
		});

		return () => {
			const curZoom = map?.getZoom() as number;

			destinationMarker.content = createMarkerElement({
				type: Markers.BUILDING,
				title: destination.buildingName,
				className: "translate-marker",
			});
			if (curZoom <= 16) destinationMarker.map = null;
		};
	}, [destination, buildingMarkers]);

다음과 같이, 항상 map을 map으로 설정하고 cleanUp에서 zoom을 가져오도록하여 출발 도착이 해제되는 경우에만 지도에서 지우도록 하였습니다.
이때, zoom State를 사용할경우, cleanUp이 되는 즉, 전체적으로 state가 변경되기 전의 zoom을 가져와 map.getZoom()으로 라이브 줌을 가져올 수 있도록 하였습니다.

애니메이션 적용

하단 CTA 버튼과 플로팅 버튼에 애니메이션을 부여하여 자연스러운 노출, 소멸을 유도하였습니다.

버그 수정,

기존에 [UNI-111] fix, feat, refactor : QA 문제 해결 (지도 페이지 뷰포트, 마커 동적 스타일 변경, 지도 줌 레벨 감지, 제보하기 모달 PC 환경 스타일) #48 에서 수정했던 출발, 도착 마커가 선택하더라도 스타일이 변경되지 않는 수정사항이 로직 변경으로 인해 다시 발생하여 수정하였습니다.

동작 화면

상단 검색 전환

2025-02-13.5.28.08.mp4

길 찾기 유저 로직 변화

2025-02-13.5.33.52.mp4

출발 도착 선택 시, 지도 동적 이동

2025-02-13.5.34.22.mp4

CTA, 플로팅 버튼 애니메이션

2025-02-13.5.34.46.mp4

coderabbitai · 2025-02-13T08:39:30Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

jpark0506

LGTM~ UI가 많이 바뀌었을텐데, 사용성 잘 개선된 것 같습니다~ 고생하셨습니다!

jpark0506 · 2025-02-14T01:00:30Z

uniro_frontend/src/pages/map.tsx


+	/** 출발 도착 설정시, 출발 도착지가 한 눈에 보이도록 지도 조정 */
+	useEffect(() => {
+		if (origin && destination) {
+			const newBound = new google.maps.LatLngBounds();
+			newBound.extend(origin);
+			newBound.extend(destination)
+			map?.fitBounds(newBound)
+		}
+
+	}, [origin, destination]);


UX 측면에서 좋은 것 같습니다!

jpark0506 · 2025-02-14T01:05:25Z

uniro_frontend/src/pages/buildingSearch.tsx

 	},)

+	const handleBack = () => {
+		navigate(-1);


unversity가 저장되어 있는 상태에서 바로 접근이 가능한 페이지라,

Suggested change

navigate(-1);

navigate("/map");

으로 넘어가는 방식도 괜찮을 것 같습니다!

dgfh0450 added 7 commits February 13, 2025 16:14

[UNI-221] feat : 상단 검색 인풋 2가지 (건물 검색, 경로 검색) 생성 및 globalState 변수명 변경,

f54f34d

[UNI-221] feat : BottomSheet 컨텐츠 고정 및 건물 선택 리스트 -> 지도 페이지 로직 재설정

1726f52

[UNI-221] feat : 지도 검색 페이지, 뒤로가기 버튼 추가

305c2d2

[UNI-221] feat : 길찾기 결과 페이지에서 지도로 이동시, 출발 도착 마커 노출 적용

c61856d

[UNI-221] fix : 출발 도착 마커 선택 시, 스타일이 변경되지 않도록 수정

54fdf5e

[UNI-221] feat : CTA, 플로팅 버튼 애니메이션 적용

b3ca24b

[UNI-221] fix : 건물 검색 Input, value 제거

4b35170

dgfh0450 added 🚀 feat 기능 개발 🧇 fe 프론트엔드 task labels Feb 13, 2025

dgfh0450 requested a review from jpark0506 February 13, 2025 08:39

dgfh0450 self-assigned this Feb 13, 2025

jpark0506 approved these changes Feb 14, 2025

View reviewed changes

jpark0506 merged commit c3b4cbe into fe Feb 14, 2025

dgfh0450 deleted the feat/UNI-221 branch February 17, 2025 06:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[UNI-221] feat : 지도 메인페이지 UX 개선 및 길찾기 사용자 로직 변경#127

[UNI-221] feat : 지도 메인페이지 UX 개선 및 길찾기 사용자 로직 변경#127
jpark0506 merged 7 commits intofefrom
feat/UNI-221

dgfh0450 commented Feb 13, 2025

Uh oh!

coderabbitai bot commented Feb 13, 2025

Review skipped

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

jpark0506 left a comment

Uh oh!

jpark0506 Feb 14, 2025

Uh oh!

jpark0506 Feb 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

dgfh0450 commented Feb 13, 2025

#️⃣ 작업 내용

주요 기능

상단 Input Top Sheet 2가지 생성

사용자 건물 선택 로직 (시나리오 변경)

동적 지도 이동

애니메이션 적용

버그 수정,

동작 화면

상단 검색 전환

길 찾기 유저 로직 변화

출발 도착 선택 시, 지도 동적 이동

CTA, 플로팅 버튼 애니메이션

Uh oh!

coderabbitai bot commented Feb 13, 2025

Review skipped

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

jpark0506 left a comment

Choose a reason for hiding this comment

Uh oh!

jpark0506 Feb 14, 2025

Choose a reason for hiding this comment

Uh oh!

jpark0506 Feb 14, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

CodeRabbit Configuration File (`.coderabbit.yaml`)