diff --git a/uniro_admin_frontend/src/data/types/coord.d.ts b/uniro_admin_frontend/src/data/types/coord.d.ts
new file mode 100644
index 0000000..625eadd
--- /dev/null
+++ b/uniro_admin_frontend/src/data/types/coord.d.ts
@@ -0,0 +1 @@
+export type Coord = google.maps.LatLngLiteral;
diff --git a/uniro_admin_frontend/src/data/types/node.d.ts b/uniro_admin_frontend/src/data/types/node.d.ts
new file mode 100644
index 0000000..5e653b1
--- /dev/null
+++ b/uniro_admin_frontend/src/data/types/node.d.ts
@@ -0,0 +1,14 @@
+import { Coord } from "./coord";
+
+export type NodeId = number;
+
+export interface Node extends Coord {
+ nodeId: NodeId;
+}
+
+export interface Building extends Node {
+ buildingName: string;
+ buildingImageUrl: string;
+ phoneNumber: string;
+ address: string;
+}
diff --git a/uniro_admin_frontend/src/data/types/route.d.ts b/uniro_admin_frontend/src/data/types/route.d.ts
new file mode 100644
index 0000000..ca0df11
--- /dev/null
+++ b/uniro_admin_frontend/src/data/types/route.d.ts
@@ -0,0 +1,54 @@
+import {
+ CautionIssueType,
+ DangerIssueType,
+} from "../../constant/enum/reportEnum";
+import { RoutePoint } from "../../constant/enum/routeEnum";
+import { Coord } from "./coord";
+import { Node } from "./node";
+
+export type RouteId = number;
+
+export type Route = {
+ routeId: RouteId;
+ node1: Coord;
+ node2: Coord;
+};
+
+export interface CautionRoute extends Route {
+ cautionTypes: CautionIssueType[];
+}
+
+export interface DangerRoute extends Route {
+ dangerTypes: DangerIssueType[];
+}
+
+export interface CoreRoute {
+ routeId: RouteId;
+ node1: Node;
+ node2: Node;
+}
+
+export interface CoreRoutes {
+ coreNode1Id: NodeId;
+ coreNode2Id: NodeId;
+ routes: CoreRoute[];
+}
+
+export type CoreRoutesList = CoreRoutes[];
+
+export type RoutePointType = RoutePoint.ORIGIN | RoutePoint.DESTINATION;
+
+export type RouteDetail = {
+ dist: number;
+ directionType: Direction;
+ coordinates: Coord;
+ cautionFactors: CautionIssueType[];
+};
+
+export type NavigationRouteList = {
+ hasCaution: boolean;
+ totalDistance: number;
+ totalCost: number;
+ routes: Route[];
+ routeDetails: RouteDetail[];
+};
diff --git a/uniro_admin_frontend/src/main.tsx b/uniro_admin_frontend/src/main.tsx
index bef5202..5a81f29 100644
--- a/uniro_admin_frontend/src/main.tsx
+++ b/uniro_admin_frontend/src/main.tsx
@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import AppRouter from "./AppRouter.tsx";
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById("root")!).render(
-
- ,
-)
+
+
+);
diff --git a/uniro_admin_frontend/src/page/buildingPage.tsx b/uniro_admin_frontend/src/page/buildingPage.tsx
new file mode 100644
index 0000000..7af7627
--- /dev/null
+++ b/uniro_admin_frontend/src/page/buildingPage.tsx
@@ -0,0 +1,476 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import MainContainer from "../container/mainContainer";
+import BuildingListContainer from "../container/building/buildingListContainer";
+import BuildingMapContainer from "../container/building/buildingMapContainer";
+import BuildingAddContainer from "../container/building/buildingAddContainer";
+import useMap from "../hooks/useMap";
+import { Coord } from "../data/types/coord";
+import useSearchBuilding from "../hooks/useUniversityRecord";
+
+import createMarkerElement from "../components/map/mapMarkers";
+import { QueryClient, useQueries } from "@tanstack/react-query";
+import { getAllRoutes } from "../api/route";
+import { CoreRoute, CoreRoutesList } from "../data/types/route";
+import { getAllBuildings } from "../api/nodes";
+import createAdvancedMarker from "../utils/markers/createAdvanedMarker";
+import { Node, NodeId } from "../data/types/node";
+import { Markers } from "../constant/enum/markerEnum";
+import findNearestSubEdge from "../utils/polylines/findNearestEdge";
+
+const BuildingPage = () => {
+ const queryClient = new QueryClient();
+ const result = useQueries({
+ queries: [
+ { queryKey: ["1001", "routes"], queryFn: () => getAllRoutes(1001) },
+ {
+ queryKey: [1001, "buildings"],
+ queryFn: () =>
+ getAllBuildings(1001, {
+ leftUpLat: 38,
+ leftUpLng: 127,
+ rightDownLat: 37,
+ rightDownLng: 128,
+ }),
+ },
+ ],
+ });
+
+ // 선택한 지점은 가장 높은 레벨의 컴포넌트에서 관리
+ const [routes, buildings] = result;
+
+ // mode는 두개로 분류 (건물 추가 / 수정 모드 , 건물과 주변 길 잇는 모드(출입문 연결)
+ const [mode, setMode] = useState<"add" | "connect" | "view">("add");
+
+ const { map, mapLoaded, mapRef, AdvancedMarker, Polyline } = useMap();
+
+ const [selectedBuildingId, setSelectedBuildingId] = useState
(
+ 0
+ );
+ const { getCurrentUniversityLngLat } = useSearchBuilding();
+
+ // mode = add or view일 때 선택한 빌딩 좌표
+ const [selectedCoord, setSelectedCoord] = useState(
+ undefined
+ );
+
+ // mode = connect일 때 선택한 좌표들
+ const [selectedNode, setSelectedNode] = useState([]);
+ // mode = connect일 때 연결한 하나의 좌표
+ const [_, setSelectedSingleNode] = useState(null);
+
+ // mode = connect일 때 선택한 Edge
+ const [selectedEdge, setSelectedEdge] = useState<{
+ info: CoreRoute;
+ marker1: google.maps.marker.AdvancedMarkerElement;
+ marker2: google.maps.marker.AdvancedMarkerElement;
+ polyline: google.maps.Polyline;
+ }>();
+
+ /// mode = connect일 때 그려진 작은 하나의 Edge(선택한 Edge)
+ const [singleRoute, setSingleRoute] = useState<{
+ start: Coord;
+ end: Coord;
+ polyline: google.maps.Polyline;
+ }>();
+
+ // event의 mode가 참조가 안되어서 만든 State
+ const [buildingMarkers, setBuildingMarkers] = useState<
+ google.maps.marker.AdvancedMarkerElement[]
+ >([]);
+
+ const [polylineList, setPolylineList] = useState([]);
+
+ // 새로 선택한 건물 마커를 관리하기 위한 ref
+ const markerRef = useRef(
+ null
+ );
+
+ // 마커 생성
+ const createMarker = useCallback(
+ (coord: Coord) => {
+ if (!map || !AdvancedMarker) return null;
+ return new AdvancedMarker({ position: coord, map });
+ },
+ [map, AdvancedMarker]
+ );
+
+ const handleMapClick = (e: google.maps.MapMouseEvent) => {
+ if (!e.latLng) return;
+
+ setSelectedBuildingId(0);
+ setMode("add");
+ setSelectedCoord({
+ lat: e.latLng.lat(),
+ lng: e.latLng.lng(),
+ });
+ };
+
+ const drawRoute = (
+ coreRouteList: CoreRoutesList,
+ mode: "add" | "connect" | "view"
+ ) => {
+ if (!Polyline || !AdvancedMarker || !map) return;
+
+ for (const coreRoutes of coreRouteList) {
+ const { routes: subRoutes } = coreRoutes;
+
+ // 가장 끝쪽 Core Node 그리기
+ const endNode = subRoutes[subRoutes.length - 1].node2;
+
+ const endMarker = new AdvancedMarker({
+ map: map,
+ position: endNode,
+ content: createMarkerElement({
+ type: "waypoint",
+ className: "translate-waypoint",
+ }),
+ });
+
+ endMarker.addListener("click", () => {
+ if (mode === "view" || mode === "add") setSelectedBuildingId(0);
+ });
+
+ const subNodes = [subRoutes[0].node1, ...subRoutes.map((el) => el.node2)];
+
+ const polyline = new Polyline({
+ map: map,
+ path: subNodes.map((el) => {
+ return { lat: el.lat, lng: el.lng };
+ }),
+ strokeColor: "#808080",
+ });
+
+ //polyline을 선택 방지
+ google.maps.event.addListener(
+ polyline,
+ "click",
+ (e: { latLng: google.maps.LatLng }) => {
+ if (mode === "view" || mode === "add") setSelectedBuildingId(0);
+ if (mode === "connect") {
+ const edges: CoreRoute[] = subRoutes.map(
+ ({ routeId, node1, node2 }) => {
+ return { routeId, node1, node2 };
+ }
+ );
+
+ const { edge: nearestEdge } = findNearestSubEdge(edges, {
+ lat: e.latLng.lat(),
+ lng: e.latLng.lng(),
+ });
+ const { node1, node2 } = nearestEdge;
+
+ const polyline = new Polyline({
+ map: map,
+ path: [
+ { lat: node1.lat, lng: node1.lng },
+ { lat: node2.lat, lng: node2.lng },
+ ],
+ strokeColor: "#000000",
+ zIndex: 100,
+ });
+
+ const marker1 = new AdvancedMarker({
+ map: map,
+ position: { lat: node1.lat, lng: node1.lng },
+ content: createMarkerElement({
+ type: "waypoint_red",
+ className: "translate-waypoint",
+ }),
+ zIndex: 100,
+ });
+
+ const marker2 = new AdvancedMarker({
+ map: map,
+ position: { lat: node2.lat, lng: node2.lng },
+ content: createMarkerElement({
+ type: "waypoint_blue",
+ className: "translate-waypoint",
+ }),
+ zIndex: 100,
+ });
+ setSelectedEdge({
+ info: nearestEdge,
+ marker1,
+ marker2,
+ polyline,
+ });
+
+ setSelectedNode([node1, node2]);
+ }
+ }
+ );
+ setPolylineList((prev) => [...prev, polyline]);
+
+ const startNode = subRoutes[0].node1;
+
+ const startMarker = new AdvancedMarker({
+ map: map,
+ position: startNode,
+ content: createMarkerElement({
+ type: "waypoint",
+ className: "translate-waypoint",
+ }),
+ });
+
+ startMarker.addListener("click", () => {
+ if (mode === "view" || mode === "add") setSelectedBuildingId(0);
+ });
+ }
+ };
+
+ const drawSingleRoute = (start: Coord, end: Coord) => {
+ if (!Polyline || !AdvancedMarker || !map) return;
+
+ if (singleRoute) {
+ singleRoute.polyline.setMap(null);
+ }
+
+ if (selectedBuildingId === 0) {
+ return;
+ }
+
+ const polyline = new Polyline({
+ map: map,
+ path: [start, end],
+ strokeColor: "#808080",
+ });
+
+ setSingleRoute({ start, end, polyline });
+ };
+
+ const eraseRoute = () => {
+ if (singleRoute) {
+ singleRoute.polyline.setMap(null);
+ }
+ };
+
+ const erasePolylineList = () => {
+ for (const polyline of polylineList) {
+ polyline.setMap(null);
+ }
+ setPolylineList([]);
+ };
+
+ const addBuildings = () => {
+ if (google.maps.marker.AdvancedMarkerElement === null || map === null)
+ return;
+
+ const buildingList = buildings.data;
+
+ if (buildingList === undefined) return;
+ console.log(buildingList);
+ for (const building of buildingList) {
+ const { nodeId, lat, lng } = building;
+
+ const buildingMarker = createAdvancedMarker(
+ google.maps.marker.AdvancedMarkerElement,
+ map,
+ new google.maps.LatLng(lat, lng),
+ createMarkerElement({
+ type: Markers.BUILDING,
+ className: "translate-marker",
+ })
+ );
+
+ buildingMarker.addListener("click", () => {
+ setSelectedBuildingId(nodeId);
+ map.setCenter({ lat, lng });
+ map.setZoom(18);
+ console.log("click", mode);
+ if (mode === "view" || mode === "add") {
+ setMode("view");
+ }
+ });
+
+ setBuildingMarkers((prev) => [...prev, buildingMarker]);
+ }
+ };
+
+ const clearBuildingMarkers = () => {
+ for (const marker of buildingMarkers) {
+ marker.map = null;
+ }
+ setBuildingMarkers([]);
+ };
+
+ // 지도가 로드되면 클릭 이벤트를 추가
+ useEffect(() => {
+ if (!map || !mapLoaded) return;
+
+ if (routes.data) {
+ if (routes.data) {
+ drawRoute(routes.data, mode);
+ }
+ }
+ if (buildings.data) {
+ addBuildings();
+ }
+
+ if (mode === "add") {
+ google.maps.event.clearListeners(map, "click");
+ google.maps.event.clearListeners(map, "rightclick");
+ map.addListener("click", handleMapClick);
+ map.addListener("rightclick", () => {
+ setSelectedCoord(undefined);
+ setSelectedBuildingId(0);
+
+ if (markerRef.current) markerRef.current.map = null;
+ });
+ }
+
+ if (mode === "connect") {
+ setSelectedCoord(undefined);
+ setSelectedBuildingId(0);
+ google.maps.event.clearListeners(map, "click");
+ google.maps.event.clearListeners(map, "rightclick");
+ }
+
+ map.setCenter(getCurrentUniversityLngLat());
+ eraseRoute();
+
+ return () => {
+ google.maps.event.clearListeners(map, "click");
+ google.maps.event.clearListeners(map, "rightclick");
+ clearBuildingMarkers();
+ };
+ }, [map, mapLoaded, getCurrentUniversityLngLat, routes.data, buildings.data]);
+
+ useEffect(() => {
+ if (!map || !mapLoaded) return;
+
+ if (routes.data) {
+ clearBuildingMarkers();
+ erasePolylineList();
+ drawRoute(routes.data, mode);
+ }
+
+ if (mode === "add") {
+ addBuildings();
+ google.maps.event.clearListeners(map, "click");
+ google.maps.event.clearListeners(map, "rightclick");
+ map.addListener("click", handleMapClick);
+ map.addListener("rightclick", () => {
+ setSelectedCoord(undefined);
+ setSelectedBuildingId(0);
+
+ if (markerRef.current) markerRef.current.map = null;
+ });
+ }
+
+ if (mode === "connect") {
+ addBuildings();
+ setSelectedCoord(undefined);
+ setSelectedBuildingId(0);
+ google.maps.event.clearListeners(map, "click");
+ google.maps.event.clearListeners(map, "rightclick");
+ }
+ return () => {
+ google.maps.event.clearListeners(map, "click");
+ google.maps.event.clearListeners(map, "rightclick");
+ };
+ }, [mode]);
+
+ // 선택한 좌표가 바뀌면 마커를 생성하거나 제거
+ useEffect(() => {
+ if (!selectedCoord || !map) return;
+
+ if (markerRef.current) markerRef.current.map = null;
+ markerRef.current = createMarker(selectedCoord);
+
+ return () => {
+ if (markerRef.current) markerRef.current.map = null;
+ };
+ }, [selectedCoord, map, AdvancedMarker, createMarker]);
+
+ const setCenterToCoordinate = (nodeId: number, coord: Coord) => {
+ if (map) {
+ map.setZoom(18);
+ map.setCenter(coord);
+ setSelectedBuildingId(nodeId);
+ setMode("view");
+ }
+ };
+
+ // 새로고침 기능
+ const refreshBuildings = () => {
+ queryClient.invalidateQueries({ queryKey: [1001, "buildings"] });
+ buildings.refetch();
+ };
+
+ const changeToConnectMode = () => {
+ setMode("connect");
+ setSelectedBuildingId(0);
+ if (map) {
+ map.setZoom(17);
+ map.setCenter(getCurrentUniversityLngLat());
+ }
+ };
+
+ const resetConnectMode = () => {
+ setSelectedBuildingId(0);
+ setSelectedEdge(undefined);
+ setSelectedNode([]);
+ setSelectedSingleNode(null);
+ eraseRoute();
+ };
+
+ const resetToAddMode = () => {
+ setMode("add");
+ setSelectedBuildingId(0);
+ setSelectedEdge(undefined);
+ setSelectedNode([]);
+ setSelectedSingleNode(null);
+ if (map) {
+ map.setZoom(17);
+ map.setCenter(getCurrentUniversityLngLat());
+ }
+ };
+
+ useEffect(() => {
+ return () => {
+ if (!selectedEdge) return;
+ const { marker1, marker2, polyline } = selectedEdge;
+ marker1.map = null;
+ marker2.map = null;
+ polyline.setMap(null);
+ if (singleRoute) {
+ eraseRoute();
+ }
+ };
+ }, [selectedEdge]);
+
+ return (
+
+
+
+ building.nodeId === selectedBuildingId
+ ) || null
+ }
+ />
+
+ );
+};
+
+export default BuildingPage;
diff --git a/uniro_admin_frontend/src/page/logPage.tsx b/uniro_admin_frontend/src/page/logPage.tsx
new file mode 100644
index 0000000..d0f7365
--- /dev/null
+++ b/uniro_admin_frontend/src/page/logPage.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import MainContainer from "../container/mainContainer";
+import LogListContainer from "../container/logListContainer";
+import MapContainer from "../container/mapContainer";
+
+const LogPage = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default LogPage;
diff --git a/uniro_admin_frontend/src/page/simulationPage.tsx b/uniro_admin_frontend/src/page/simulationPage.tsx
new file mode 100644
index 0000000..36431ed
--- /dev/null
+++ b/uniro_admin_frontend/src/page/simulationPage.tsx
@@ -0,0 +1,186 @@
+import React, { useEffect, useState } from "react";
+import MainContainer from "../container/mainContainer";
+import { useQueries } from "@tanstack/react-query";
+import { transformAllRoutes } from "../utils/route";
+import useMap from "../hooks/useMap";
+import useSearchBuilding from "../hooks/useUniversityRecord";
+import { CoreRoute, CoreRoutesList } from "../data/types/route";
+import createMarkerElement from "../components/map/mapMarkers";
+import findNearestSubEdge from "../utils/polylines/findNearestEdge";
+
+type AdvancedMarker = google.maps.marker.AdvancedMarkerElement;
+type Polyline = google.maps.Polyline;
+
+const getRoutes = () => {
+ return fetch(`${import.meta.env.VITE_REACT_SERVER_BASE_URL}/1001/routes`)
+ .then((res) => res.json())
+ .then(transformAllRoutes);
+};
+
+const SimulationPage = () => {
+ const result = useQueries({
+ queries: [{ queryKey: ["1001", "routes"], queryFn: getRoutes }],
+ });
+ const { currentUniversity, getCurrentUniversityLngLat } = useSearchBuilding();
+
+ const { mapRef, map, mapLoaded, AdvancedMarker, Polyline } = useMap();
+ const [routes] = result;
+ const [selectedEdge, setSelectedEdge] = useState<{
+ info: CoreRoute;
+ marker1: AdvancedMarker;
+ marker2: AdvancedMarker;
+ polyline: Polyline;
+ }>();
+
+ const drawRoute = (coreRouteList: CoreRoutesList) => {
+ if (!Polyline || !AdvancedMarker || !map) return;
+
+ for (const coreRoutes of coreRouteList) {
+ const { coreNode1Id, coreNode2Id, routes: subRoutes } = coreRoutes;
+
+ // 가장 끝쪽 Core Node 그리기
+ const endNode = subRoutes[subRoutes.length - 1].node2;
+
+ new AdvancedMarker({
+ map: map,
+ position: endNode,
+ content: createMarkerElement({
+ type: "waypoint",
+ className: "translate-waypoint",
+ }),
+ });
+
+ const subNodes = [subRoutes[0].node1, ...subRoutes.map((el) => el.node2)];
+
+ const routePolyLine = new Polyline({
+ map: map,
+ path: subNodes.map((el) => {
+ return { lat: el.lat, lng: el.lng };
+ }),
+ strokeColor: "#808080",
+ });
+
+ routePolyLine.addListener(
+ "click",
+ (e: { latLng: google.maps.LatLng }) => {
+ const edges: CoreRoute[] = subRoutes.map(
+ ({ routeId, node1, node2 }) => {
+ return { routeId, node1, node2 };
+ }
+ );
+
+ const { edge: nearestEdge } = findNearestSubEdge(edges, {
+ lat: e.latLng.lat(),
+ lng: e.latLng.lng(),
+ });
+
+ const { node1, node2 } = nearestEdge;
+
+ const newPolyline = new Polyline({
+ map: map,
+ path: [
+ { lat: node1.lat, lng: node1.lng },
+ { lat: node2.lat, lng: node2.lng },
+ ],
+ strokeColor: "#000000",
+ zIndex: 100,
+ });
+
+ const marker1 = new AdvancedMarker({
+ map: map,
+ position: { lat: node1.lat, lng: node1.lng },
+ content: createMarkerElement({
+ type: "waypoint_red",
+ className: "translate-waypoint",
+ }),
+ zIndex: 100,
+ });
+
+ const marker2 = new AdvancedMarker({
+ map: map,
+ position: { lat: node2.lat, lng: node2.lng },
+ content: createMarkerElement({
+ type: "waypoint_blue",
+ className: "translate-waypoint",
+ }),
+ zIndex: 100,
+ });
+
+ setSelectedEdge({
+ info: nearestEdge,
+ marker1: marker1,
+ marker2: marker2,
+ polyline: newPolyline,
+ });
+ }
+ );
+
+ const startNode = subRoutes[0].node1;
+
+ new AdvancedMarker({
+ map: map,
+ position: startNode,
+ content: createMarkerElement({
+ type: "waypoint",
+ className: "translate-waypoint",
+ }),
+ });
+ }
+ };
+
+ useEffect(() => {
+ if (routes.data) {
+ drawRoute(routes.data);
+ }
+ }, [routes]);
+
+ useEffect(() => {
+ if (!map || !mapLoaded) return;
+ const universityLatLng = getCurrentUniversityLngLat();
+ console.log("Setting center to:", universityLatLng);
+ map.setCenter(universityLatLng);
+ }, [currentUniversity, mapLoaded]);
+
+ useEffect(() => {
+ return () => {
+ if (!selectedEdge) return;
+ const { marker1, marker2, polyline } = selectedEdge;
+ marker1.map = null;
+ marker2.map = null;
+ polyline.setMap(null);
+ };
+ }, [selectedEdge]);
+
+ return (
+
+
+
+
+
+ | 선택된 간선 정보 | {" "}
+ ID |
+
+
+ | node1 (red) | {selectedEdge?.info.node1.nodeId} |
+
+
+ | node2 (red) | {selectedEdge?.info.node2.nodeId} |
+
+
+ | route (black) | {selectedEdge?.info.routeId} |
+
+
+
+