[UNI-49] feat : 지도 페이지 구현 (지도 메인, 장소 상세, 건물 검색, 경로 검색) (UNI-50, UNI-55)

uniro_frontend/package.json

@@ -17,8 +17,9 @@
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-router": "^7.1.3",
-		"react-sheet-slide": "^1.5.0",
-		"tailwindcss": "^4.0.0"
+		"react-spring-bottom-sheet": "^3.4.1",
+		"tailwindcss": "^4.0.0",
+		"zustand": "^5.0.3"
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.17.0",

uniro_frontend/src/App.tsx

@@ -3,6 +3,8 @@ import "./App.css";
 import Demo from "./pages/demo";
 import LandingPage from "./pages/landing";
 import UniversitySearchPage from "./pages/search";
+import MapPage from "./pages/map";
+import BuildingSearchPage from "./pages/buildingSearch";
 import NavigationResultPage from "./pages/navigationResult";
 
 function App() {
@@ -11,6 +13,8 @@ function App() {
 			<Route path="/" element={<Demo />} />
 			<Route path="/landing" element={<LandingPage />} />
 			<Route path="/university" element={<UniversitySearchPage />} />
+			<Route path="/building" element={<BuildingSearchPage />} />
+			<Route path="/map" element={<MapPage />} />
 			<Route path="/result" element={<NavigationResultPage />} />
 		</Routes>
 	);

uniro_frontend/src/components/building/buildingCard.tsx

@@ -0,0 +1,37 @@
+import { Building } from "../../data/types/node";
+import { Link } from "react-router";
+import CallIcon from "../../assets/call-thin.svg?react";
+import LocationIcon from "../../assets/location-thin.svg?react";
+
+interface BuildingListProps {
+	building: Building;
+	onClick: () => void;
+}
+
+export default function BuildingCard({ building, onClick }: BuildingListProps) {
+	const { buildingName, buildingImageUrl, address, phoneNumber } = building;
+	return (
+		<li>
+			<Link
+				className="w-full h-full px-4 py-2 rounded-200 flex flex-row items-center space-x-4 active:bg-gray-200"
+				onClick={onClick}
+				to="/map"
+			>
+				<div className="flex-1">
+					<p className="text-start text-kor-body1 font-medium text-gray-900">{buildingName}</p>
+					<p className="flex fle-row  items-center text-start text-kor-body3 font-regular text-gray-700">
+						<LocationIcon className="mr-[2px]" />
+						{address}
+					</p>
+					<p className="flex fle-row  items-center text-start text-kor-body3 font-regular text-gray-700">
+						<CallIcon className="mr-[2px]" />
+						{phoneNumber}
+					</p>
+				</div>
+				<div>
+					<img src={building.buildingImageUrl} className="w-[66px] h-[66px] object-cover rounded-100" />
+				</div>
+			</Link>
+		</li>
+	);
+}

uniro_frontend/src/components/map/TopSheet.tsx

@@ -0,0 +1,55 @@
+import RouteInput from "../map/routeSearchInput";
+import OriginIcon from "../../assets/map/origin.svg?react";
+import Destination from "../../assets/map/destination.svg?react";
+import LocationIcon from "../../../public/icons/location-thick.svg?react";
+import SwitchIcon from "../../assets/switch.svg?react";
+import { Link } from "react-router";
+import { motion } from "framer-motion";
+import useRoutePoint from "../../hooks/useRoutePoint";
+import useSearchBuilding from "../../hooks/useSearchBuilding";
+import { RoutePoint } from "../../constant/enums";
+
+export default function TopSheet({ open }: { open: boolean }) {
+	const { origin, setOrigin, destination, setDestination, switchBuilding } = useRoutePoint();
+	const { setMode } = useSearchBuilding();
+
+	return (
+		<motion.div
+			animate={{ y: open ? 0 : -200 }}
+			initial={{ y: -200 }}
+			exit={{ y: -200 }}
+			transition={{ type: "tween", duration: 0.3 }}
+			className="absolute top-0 w-full bg-gray-100 py-[18px] px-5 z-10 rounded-b-[24px]"
+		>
+			<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>
+		</motion.div>
+	);
+}

uniro_frontend/src/components/map/floatingButtons.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import DangerIcon from "../../assets/danger.svg?react";
+import CautionIcon from "../../assets/caution.svg?react";
+
+interface ToggleButtonProps {
+	isActive: boolean;
+	onClick: () => void;
+}
+
+export function DangerToggleButton({ isActive, onClick }: ToggleButtonProps) {
+	return (
+		<button
+			onClick={onClick}
+			className={`w-fit h-fit p-[14px] flex items-center justify-center rounded-full border-[1.5px] active:bg-gray-200 active:border-gray-400 active:text-gray-700 ${isActive ? "bg-system-red border-gray-100 text-gray-100" : "bg-gray-100 border-gray-400 text-gray-700"}`}
+		>
+			<DangerIcon />
+		</button>
+	);
+}
+
+export function CautionToggleButton({ isActive, onClick }: ToggleButtonProps) {
+	return (
+		<button
+			onClick={onClick}
+			className={`w-fit h-fit p-[14px] flex items-center justify-center rounded-full border-[1.5px] active:bg-gray-200 active:border-gray-400 active:text-gray-700 ${isActive ? "bg-system-orange border-gray-100 text-gray-100" : "bg-gray-100 border-gray-400 text-gray-700"}`}
+		>
+			<CautionIcon />
+		</button>
+	);
+}