[UNI-208] refactor : 지도 메인 페이지 바텀 시트 react-spring-bottom-sheet 라이브러리 제거

[dgfh0450]

#️⃣ 작업 내용

1. react-spring-bottom-sheet 라이브러리 제거
2. 라이브러리 삭제 후 framer motion으로 변경

Refactoring 레퍼런스

• @jpark0506 준혁님께서 만들어두신 navigationResult.tsx의 bottomSheet를 활용하였습니다.

        <AnimatedContainer
		isVisible={isDetailView}
		className="absolute bottom-0 w-full left-0 bg-white rounded-t-2xl shadow-xl overflow-auto"
		positionDelta={MAX_SHEET_HEIGHT}
		transition={{ type: "spring", damping: 20, duration: 0.3 }}
		motionProps={{
			drag: "y",
			dragControls,
			dragListener: false,
			dragConstraints: {
				top: 0,
				bottom: MIN_SHEET_HEIGHT,
			},
			onDrag: handleDrag,
			onDragEnd: handleDrag,
		}}
	>
		<BottomSheetHandle dragControls={dragControls} />
		<div
			ref={scrollRef}
			className="w-full overflow-y-auto"
			style={{
				height: MAX_SHEET_HEIGHT - BOTTOM_SHEET_HANDLE_HEIGHT,
			}}
			onScroll={preventScroll}
		>
			<NavigationDescription isDetailView={true} navigationRoute={result[0].data!} />
			<RouteList routes={result[0].data!.routeDetails} />
		</div>
	</AnimatedContainer>

• AnimatedContainer를 확장하기 쉽게 만들어주신 덕분에 편하게 마이그레이션할 수 있었습니다.
• 기존 react-spring-bottom-sheet를 AnimatedContainer로 변경하였습니다.

export default function MapBottomSheet({ isVisible, selectedMarker, selectRoutePoint }: MapBottomSheetProps) {
	const { dragControls, scrollRef, preventScroll } = useNavigationBottomSheet();
	const { mode } = useSearchBuilding();

	return (
		<AnimatedContainer
			isVisible={isVisible}
			className="absolute bottom-0 w-full left-0 bg-white rounded-t-2xl shadow-xl overflow-auto z-20"
			positionDelta={500}
			transition={{
				type: "tween", duration: 0.3
			}}
		>
			<BottomSheetHandle dragControls={dragControls} />
			<div
				ref={scrollRef}
				className="w-full overflow-y-auto h-fit"
				onScroll={preventScroll}
			>
				{selectedMarker &&
					(selectedMarker.from === "Marker" ? (
						<MapBottomSheetFromMarker
							building={selectedMarker}
							onClickLeft={() => selectRoutePoint(RoutePoint.ORIGIN)}
							onClickRight={() => selectRoutePoint(RoutePoint.DESTINATION)}
						/>
					) : (
						<MapBottomSheetFromList
							building={selectedMarker}
							onClick={selectRoutePoint}
							buttonText={mode === RoutePoint.ORIGIN ? "출발지 설정" : "도착지 설정"}
						/>
					))}
			</div>
		</AnimatedContainer>
	)
}

• 다음과 같이, 지도 페이지의 기존에 컴포넌트 및 동작을 그대로 옮겨왔습니다.
• 또한, 기존에 TopSheet도 motion.div로 만들어둔 것을 AnimatedContainer로 변환하였습니다.

export default function MapTopSheet({ isVisible }: MapTopSheetProps) {
	const { origin, setOrigin, destination, setDestination, switchBuilding } = useRoutePoint();
	const { setMode } = useSearchBuilding();

	return (
		<AnimatedContainer
			isVisible={isVisible}
			className="absolute top-0 w-full left-0  py-[18px] px-5  bg-white rounded-b-2xl shadow-xl overflow-auto z-20"
			positionDelta={300}
			transition={{
				type: "spring",
				damping: 20,
				duration: 0.3,
			}}
			isTop={true}
		>
			<p className="flex flex-row items-center mb-[10px] text-kor-body2 font-medium text-gray-800 underline underline-offset-4">
				<LocationIcon stroke="#4D4D4D" className="mr-1" />
				<Link to="/university">한양대학교</Link>
			</p>
			<div className="flex flex-row space-x-1">
				<div className="flex-1 flex flex-col space-y-[10px]">
					<RouteInput
						onClick={() => setMode(RoutePoint.ORIGIN)}
						placeholder="출발지를 입력하세요"
						value={origin ? origin.buildingName : ""}
						onCancel={() => setOrigin(undefined)}
					>
						<OriginIcon />
					</RouteInput>
					<RouteInput
						onClick={() => setMode(RoutePoint.DESTINATION)}
						placeholder="도착지를 입력하세요"
						value={destination ? destination.buildingName : ""}
						onCancel={() => setDestination(undefined)}
					>
						<Destination />
					</RouteInput>
				</div>
				<div className="flex items-center">
					<button onClick={switchBuilding} className="cursor-pointer p-1 rounded-[8px] active:bg-gray-200">
						<SwitchIcon />
					</button>
				</div>
			</div>
		</AnimatedContainer>
	);
}

• 지금 기존 BottomSheet와 동일하게 동작하는 것을 확인할 수 있습니다.
• 또한, 라이브러리 삭제로 인해, 번들의 사이즈가 대폭 감소된 것을 확인할 수 있었습니다.

동작확인

2025-02-13.12.41.22.mp4

react-spring-bottom-sheet 제거 전 빌드 결과

• 번들 크기 652KB

react-spring-bottom-sheet 제거 후 빌드 결과

• 번들 크기 505KB

[coderabbitai]

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]

dragControls는 drag를 해당 바텀 시트 Handle을 통해서 다른 컴포넌트인 바텀시트를 이동하는 것을 조정하는 것이라서, props ? 처리해도 괜찮을 것 같습니다!

[jpark0506]

LGTM~ 이전하시느라 고생하셨습니다!!! 번들이 줄어든 유의미한 결과가 있어 좋은 것 같습니다