[UNI-108] feat : 페이지간 라우터 연결 및 뒤로가기 공통 컴포넌트 생성 (#43)

* [UNI-108] feat : 학교 검색 페이지 -> 지도 메인 페이지 라우터 연결

* [UNI-108] feat : 지도 메인 페이지 -> 경로 검색 결과 페이지 라우터 연결

* [UNI-108] feat : 지도 메인 페이지 -> 제보 (불편한 길, 새로운 길) 모달 생성 및 라우터 연결

* [UNI-108] feat : 새로운 길 제보 페이지 상단 안내 문구 추가 (추후 변경 로직 추가 필요)

* [UNI-108] feat : 공통 뒤로가기 버튼 컴포넌트 생성

* [UNI-108] feat : 뒤로가기 버튼 제보하기 페이지 & 경로 결과 페이지 적용

---------

Co-authored-by: Junhyeok Park(박준혁) <[email protected]>

Author: dgfh0450

uniro_frontend/src/components/map/backButton.tsx

@@ -0,0 +1,21 @@
+import { useNavigate } from "react-router";
+import ChevronLeft from "../../../public/icons/chevron-left.svg?react";
+
+interface BackButtonProps {
+    className?: string;
+    onClick?: () => void
+}
+
+export default function BackButton({ className = "", onClick }: BackButtonProps) {
+    const navigate = useNavigate();
+
+    const handleBack = () => {
+        navigate(-1);
+    }
+
+    return (
+        <button className={`w-[52px] h-[52px] flex items-center justify-center border border-gray-400 rounded-full bg-gray-100 active:bg-gray-200 ${className}`} onClick={onClick ?? handleBack}>
+            <ChevronLeft width={35} height={35} />
+        </button>
+    )
+}

uniro_frontend/src/components/map/reportButton.tsx

@@ -1,14 +1,14 @@
-import { Link } from "react-router";
 import ReportIcon from "../../assets/report.svg?react";
+import { ButtonHTMLAttributes } from "react";
 
-export default function ReportButton() {
+export default function ReportButton({ ...rest }: ButtonHTMLAttributes<HTMLButtonElement>) {
 	return (
-		<Link
-			to="/"
+		<button
+			{...rest}
 			className="rounded-full w-fit h-[50px] px-6 py-3 flex flex-row items-center bg-gray-900 text-gray-100"
 		>
 			제보하기
 			<ReportIcon className="ml-3" stroke="#FFFFFF" />
-		</Link>
+		</button>
 	);
 }

uniro_frontend/src/components/map/reportModal.tsx

@@ -0,0 +1,31 @@
+import { Link } from "react-router";
+import ChevronRight from "../../../public/icons/chevron-right.svg?react";
+
+interface ReportModalProps {
+	close: () => void;
+}
+
+export default function ReportModal({ close }: ReportModalProps) {
+	return (
+		<div
+			className="fixed inset-0 flex flex-col items-center justify-end bg-[rgba(0,0,0,0.2)] z-20 py-6 px-4 space-y-[10px]"
+			onClick={close}
+		>
+			<Link
+				to={"/report/route"}
+				className="w-full h-[58px] flex items-center justify-between px-5 bg-gray-100 rounded-400 text-kor-body2 font-semibold text-primary-500"
+			>
+				<p>새로운 길 제보</p>
+				<ChevronRight fill="none" />
+			</Link>
+
+			<Link
+				to={"/report/hazard"}
+				className="w-full h-[58px] flex items-center justify-between px-5 bg-gray-100 rounded-400 text-kor-body2 font-semibold text-primary-500"
+			>
+				<p>불편한 길 제보</p>
+				<ChevronRight fill="none" />
+			</Link>
+		</div>
+	);
+}

uniro_frontend/src/pages/map.tsx

@@ -19,9 +19,15 @@ import { RoutePoint } from "../constant/enum/routeEnum";
 import { Markers } from "../constant/enum/markerEnum";
 import createAdvancedMarker from "../utils/markers/createAdvanedMarker";
 import toggleMarkers from "../utils/markers/toggleMarkers";
+
+import { Link } from "react-router";
+import useModal from "../hooks/useModal";
+import ReportModal from "../components/map/reportModal";
+
 import useUniversityInfo from "../hooks/useUniversityInfo";
 import useRedirectUndefined from "../hooks/useRedirectUndefined";
 
+
 export type SelectedMarkerTypes = {
 	type: MarkerTypes;
 	element: AdvancedMarker;
@@ -45,6 +51,8 @@ export default function MapPage() {
 	const { origin, setOrigin, destination, setDestination } = useRoutePoint();
 	const { mode, building: selectedBuilding } = useSearchBuilding();
 
+	const [_, isOpen, open, close] = useModal();
+
 	const { university } = useUniversityInfo();
 	useRedirectUndefined<string | undefined>([university]);
 
@@ -298,21 +306,22 @@ export default function MapPage() {
 			</BottomSheet>
 			{origin && destination && origin.id !== destination.id ? (
 				/** 출발지랑 도착지가 존재하는 경우 길찾기 버튼 보이기 */
-				<div className="absolute bottom-6 space-y-2 w-full px-4">
+				<Link to="/result" className="absolute bottom-6 space-y-2 w-full px-4">
 					<Button variant="primary">길찾기</Button>
-				</div>
+				</Link>
 			) : (
 				/** 출발지랑 도착지가 존재하지 않거나, 같은 경우 기존 Button UI 보이기 */
 				<>
 					<div className="absolute right-4 bottom-6 space-y-2">
-						<ReportButton />
+						<ReportButton onClick={open} />
 					</div>
 					<div className="absolute right-4 bottom-[90px] space-y-2">
 						<CautionToggleButton isActive={isCautionAcitve} onClick={toggleCautionButton} />
 						<DangerToggleButton isActive={isDangerAcitve} onClick={toggleDangerButton} />
 					</div>
 				</>
 			)}
+			{isOpen && <ReportModal close={close} />}
 		</div>
 	);
 }

uniro_frontend/src/pages/navigationResult.tsx

@@ -12,8 +12,10 @@ import NavigationMap from "../component/NavgationMap";
 import NavigationDescription from "../components/navigation/navigationDescription";
 import BottomSheetHandle from "../components/navigation/bottomSheet/bottomSheetHandle";
 
-import useLoading from "../hooks/useLoading";
 import Loading from "../components/loading/loading";
+import BackButton from "../components/map/backButton";
+
+import useLoading from "../hooks/useLoading";
 import useUniversityInfo from "../hooks/useUniversityInfo";
 import useRedirectUndefined from "../hooks/useRedirectUndefined";
 
@@ -107,9 +109,7 @@ const NavigationResultPage = () => {
 				positionDelta={60}
 				isTop={true}
 			>
-				<button onClick={hideDetailView}>
-					<GoBack />
-				</button>
+				<BackButton onClick={hideDetailView} />
 			</AnimatedContainer>
 
 			<AnimatedContainer

uniro_frontend/src/pages/reportHazard.tsx

@@ -18,6 +18,9 @@ import { ReportHazardMessage } from "../constant/enum/messageEnum";
 import { motion } from "framer-motion";
 import useReportHazard from "../hooks/useReportHazard";
 import AnimatedContainer from "../container/animatedContainer";
+
+import BackButton from "../components/map/backButton";
+
 import useUniversityInfo from "../hooks/useUniversityInfo";
 import useRedirectUndefined from "../hooks/useRedirectUndefined";
 
@@ -196,6 +199,7 @@ export default function ReportHazardPage() {
 					{message}
 				</motion.p>
 			</div>
+			<BackButton className="absolute top-[73px] left-4 z-5" />
 			<div ref={mapRef} className="w-full h-full" />
 			<AnimatedContainer
 				isVisible={reportMarker ? true : false}

uniro_frontend/src/pages/reportRoute.tsx

@@ -14,6 +14,7 @@ import Button from "../components/customButton";
 import { CautionToggleButton, DangerToggleButton } from "../components/map/floatingButtons";
 import { mockHazardEdges } from "../data/mock/hanyangHazardEdge";
 import toggleMarkers from "../utils/markers/toggleMarkers";
+import BackButton from "../components/map/backButton";
 import useUniversityInfo from "../hooks/useUniversityInfo";
 import useRedirectUndefined from "../hooks/useRedirectUndefined";
 
@@ -256,6 +257,12 @@ export default function ReportRoutePage() {
 
 	return (
 		<div className="relative w-full h-dvh">
+			<div className="w-full h-[57px] flex items-center justify-center absolute top-0 bg-black opacity-50 z-10 py-3 px-4">
+				<p className="text-gray-100 text-kor-body2 font-medium text-center">
+					선 위 또는 기존 지점을 선택하세요
+				</p>
+			</div>
+			<BackButton className="absolute top-[73px] left-4 z-5" />
 			<div ref={mapRef} className="w-full h-full" />
 			{isActive && (
 				<div className="absolute w-full bottom-6 px-4">

uniro_frontend/src/pages/universitySearch.tsx

@@ -13,7 +13,7 @@ export default function UniversitySearchPage() {
 	return (
 		<div className="relative flex flex-col h-screen w-full max-w-[450px] mx-auto py-5">
 			<div className="w-full px-[14px] pb-[17px] border-b-[1px] border-gray-400">
-				<Input onLengthChange={() => {}} placeholder="우리 학교를 검색해보세요" handleVoiceInput={() => {}} />
+				<Input onLengthChange={() => { }} placeholder="우리 학교를 검색해보세요" handleVoiceInput={() => { }} />
 			</div>
 			<div className="overflow-y-scroll flex-1">
 				<ul
@@ -24,6 +24,7 @@ export default function UniversitySearchPage() {
 				>
 					{UniversityList.map(({ name, img }) => (
 						<UniversityButton
+							key={name}
 							selected={selectedUniv === name}
 							onClick={() => {
 								setSelectedUniv(name);
@@ -36,7 +37,7 @@ export default function UniversitySearchPage() {
 			</div>
 			<div className="px-[14px]">
 				{selectedUniv !== "" && (
-					<Link to="/" onClick={() => setUniversity(selectedUniv)}>
+					<Link to="/map" onClick={() => setUniversity(selectedUniv)}>
 						<Button variant="primary">다음</Button>
 					</Link>
 				)}