Skip to content

Commit c5563c6

Browse files
jpark0506jpark0506
authored
[UNI-141] feat : 길 조회 1차 적용, 테스트 전 (#67)
1 parent 1118bb9 commit c5563c6

File tree

3 files changed

+152
-130
lines changed

3 files changed

+152
-130
lines changed

‎uniro_frontend/src/data/types/route.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { CautionIssueType, DangerIssueType } from "../../constant/enum/reportEnu
33
import { RoutePoint } from "../../constant/enum/routeEnum";
44
import { Coord } from "./coord";
55
import { MarkerTypes } from "./marker";
6+
import { Node } from "./node";
67

78
export type RouteId = number;
89

‎uniro_frontend/src/pages/reportHazard.tsx

+64-51
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { useEffect, useState } from "react";
22
import useMap from "../hooks/useMap";
3-
import { mockNavigationRoute } from "../data/mock/hanyangRoute";
43
import createAdvancedMarker from "../utils/markers/createAdvanedMarker";
54
import createMarkerElement from "../components/map/mapMarkers";
6-
import { RouteEdge } from "../data/types/route";
5+
import { CoreRoutesList } from "../data/types/route";
76
import { Markers } from "../constant/enum/markerEnum";
87
import { mockHazardEdges } from "../data/mock/hanyangHazardEdge";
98
import { ClickEvent } from "../data/types/event";
@@ -23,6 +22,9 @@ import BackButton from "../components/map/backButton";
2322

2423
import useUniversityInfo from "../hooks/useUniversityInfo";
2524
import useRedirectUndefined from "../hooks/useRedirectUndefined";
25+
import { University } from "../data/types/university";
26+
import { useSuspenseQuery } from "@tanstack/react-query";
27+
import { getAllRoutes } from "../api/route";
2628

2729
interface reportMarkerTypes extends MarkerTypesWithElement {
2830
edge: [google.maps.LatLng | google.maps.LatLngLiteral, google.maps.LatLng | google.maps.LatLngLiteral];
@@ -36,7 +38,12 @@ export default function ReportHazardPage() {
3638
const [message, setMessage] = useState<ReportHazardMessage>(ReportHazardMessage.DEFAULT);
3739

3840
const { university } = useUniversityInfo();
39-
useRedirectUndefined<string | undefined>([university]);
41+
useRedirectUndefined<University | undefined>([university]);
42+
43+
const { data } = useSuspenseQuery({
44+
queryKey: ["routes", university?.id],
45+
queryFn: () => getAllRoutes(university?.id ?? 1001),
46+
});
4047

4148
const resetMarker = (prevMarker: MarkerTypesWithElement) => {
4249
if (prevMarker.type === Markers.REPORT) {
@@ -85,72 +92,78 @@ export default function ReportHazardPage() {
8592
}
8693
};
8794

88-
const drawRoute = (routes: RouteEdge[]) => {
95+
const drawRoute = (coreRouteList: CoreRoutesList) => {
8996
if (!Polyline || !AdvancedMarker || !map) return;
9097

91-
for (const route of routes) {
92-
const coreNode = route.endNode;
98+
for (const coreRoutes of coreRouteList) {
99+
// 가장 끝쪽 Core Node 그리기
100+
const endNode = coreRoutes.routes[coreRoutes.routes.length - 1].node2;
93101

94102
createAdvancedMarker(
95103
AdvancedMarker,
96104
map,
97-
coreNode,
105+
endNode,
98106
createMarkerElement({ type: Markers.WAYPOINT, className: "translate-waypoint" }),
99107
);
100108

101-
const routePolyLine = new Polyline({
102-
map: map,
103-
path: [route.startNode, route.endNode],
104-
strokeColor: "#808080",
105-
});
109+
for (const coreRoute of coreRoutes.routes) {
110+
const routePolyLine = new Polyline({
111+
map: map,
112+
path: [coreRoute.node1, coreRoute.node2],
113+
strokeColor: "#808080",
114+
});
106115

107-
routePolyLine.addListener("click", (e: ClickEvent) => {
108-
const subNodes = createSubNodes(routePolyLine);
116+
routePolyLine.addListener("click", (e: ClickEvent) => {
117+
const subNodes = createSubNodes(routePolyLine);
109118

110-
const edges = subNodes
111-
.map(
112-
(node, idx) =>
113-
[node, subNodes[idx + 1]] as [google.maps.LatLngLiteral, google.maps.LatLngLiteral],
114-
)
115-
.slice(0, -1);
119+
alert(coreRoute.routeId);
116120

117-
const point = LatLngToLiteral(e.latLng);
121+
const edges = subNodes
122+
.map(
123+
(node, idx) =>
124+
[node, subNodes[idx + 1]] as [google.maps.LatLngLiteral, google.maps.LatLngLiteral],
125+
)
126+
.slice(0, -1);
118127

119-
const { edge: nearestEdge, point: nearestPoint } = findNearestSubEdge(edges, point);
128+
const point = LatLngToLiteral(e.latLng);
120129

121-
const newReportMarker = createAdvancedMarker(
122-
AdvancedMarker,
123-
map,
124-
centerCoordinate(nearestEdge[0], nearestEdge[1]),
125-
createMarkerElement({
126-
type: Markers.REPORT,
127-
className: "translate-routemarker",
128-
hasAnimation: true,
129-
}),
130-
);
130+
const { edge: nearestEdge, point: nearestPoint } = findNearestSubEdge(edges, point);
131131

132-
setMessage(ReportHazardMessage.CREATE);
132+
const newReportMarker = createAdvancedMarker(
133+
AdvancedMarker,
134+
map,
135+
centerCoordinate(nearestEdge[0], nearestEdge[1]),
136+
createMarkerElement({
137+
type: Markers.REPORT,
138+
className: "translate-routemarker",
139+
hasAnimation: true,
140+
}),
141+
);
133142

134-
setReportMarker((prevMarker) => {
135-
if (prevMarker) {
136-
resetMarker(prevMarker);
137-
}
143+
setMessage(ReportHazardMessage.CREATE);
144+
145+
setReportMarker((prevMarker) => {
146+
if (prevMarker) {
147+
resetMarker(prevMarker);
148+
}
138149

139-
return {
140-
type: Markers.REPORT,
141-
element: newReportMarker,
142-
edge: nearestEdge,
143-
};
150+
return {
151+
type: Markers.REPORT,
152+
element: newReportMarker,
153+
edge: nearestEdge,
154+
};
155+
});
144156
});
145-
});
157+
}
158+
// 시작하는 쪽의 Core Node 그리기
159+
const startNode = coreRoutes.routes[0].node1;
160+
createAdvancedMarker(
161+
AdvancedMarker,
162+
map,
163+
startNode,
164+
createMarkerElement({ type: Markers.WAYPOINT, className: "translate-waypoint" }),
165+
);
146166
}
147-
148-
createAdvancedMarker(
149-
AdvancedMarker,
150-
map,
151-
routes[0].startNode,
152-
createMarkerElement({ type: Markers.WAYPOINT, className: "translate-waypoint" }),
153-
);
154167
};
155168

156169
const reportHazard = () => {
@@ -162,7 +175,7 @@ export default function ReportHazardPage() {
162175
};
163176

164177
useEffect(() => {
165-
drawRoute(mockNavigationRoute.route);
178+
drawRoute(data);
166179
addHazardMarker();
167180

168181
if (map) {

‎uniro_frontend/src/pages/reportRoute.tsx

+87-79
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import { useEffect, useRef, useState } from "react";
22
import createMarkerElement from "../components/map/mapMarkers";
33
import { Markers } from "../constant/enum/markerEnum";
4-
import { RouteEdge } from "../data/types/route";
54
import useMap from "../hooks/useMap";
65
import createAdvancedMarker from "../utils/markers/createAdvanedMarker";
7-
import { mockNavigationRoute } from "../data/mock/hanyangRoute";
86
import { ClickEvent } from "../data/types/event";
97
import createSubNodes from "../utils/polylines/createSubnodes";
108
import { LatLngToLiteral } from "../utils/coordinates/coordinateTransform";
@@ -17,6 +15,10 @@ import toggleMarkers from "../utils/markers/toggleMarkers";
1715
import BackButton from "../components/map/backButton";
1816
import useUniversityInfo from "../hooks/useUniversityInfo";
1917
import useRedirectUndefined from "../hooks/useRedirectUndefined";
18+
import { University } from "../data/types/university";
19+
import { useSuspenseQuery } from "@tanstack/react-query";
20+
import { getAllRoutes } from "../api/route";
21+
import { CoreRoutesList } from "../data/types/route";
2022

2123
const colors = [
2224
"#f1a2b3",
@@ -50,7 +52,12 @@ export default function ReportRoutePage() {
5052
const [isCautionAcitve, setIsCautionActive] = useState<boolean>(true);
5153

5254
const { university } = useUniversityInfo();
53-
useRedirectUndefined<string | undefined>([university]);
55+
useRedirectUndefined<University | undefined>([university]);
56+
57+
const { data } = useSuspenseQuery({
58+
queryKey: ["routes", university?.id],
59+
queryFn: () => getAllRoutes(university?.id ?? 1001),
60+
});
5461

5562
const addHazardMarker = () => {
5663
if (AdvancedMarker === null || map === null) return;
@@ -119,97 +126,98 @@ export default function ReportRoutePage() {
119126
newPolyLine.current.setPath([]);
120127
};
121128

122-
const drawRoute = (routes: RouteEdge[]) => {
129+
const drawRoute = (coreRouteList: CoreRoutesList) => {
123130
if (!Polyline || !AdvancedMarker || !map) return;
124131

125-
for (const route of routes) {
126-
const coreNode = route.endNode;
132+
for (const coreRoutes of coreRouteList) {
133+
// 가장 끝쪽 Core Node 그리기
134+
const endNode = coreRoutes.routes[coreRoutes.routes.length - 1].node2;
127135

128136
createAdvancedMarker(
129137
AdvancedMarker,
130138
map,
131-
coreNode,
139+
endNode,
132140
createMarkerElement({ type: Markers.WAYPOINT, className: "translate-waypoint" }),
133141
);
142+
for (const coreRoute of coreRoutes.routes) {
143+
const routePolyLine = new Polyline({
144+
map: map,
145+
path: [coreRoute.node1, coreRoute.node2],
146+
strokeColor: "#808080",
147+
});
148+
routePolyLine.addListener("click", (e: ClickEvent) => {
149+
const subNodes = createSubNodes(routePolyLine);
134150

135-
const routePolyLine = new Polyline({
136-
map: map,
137-
path: [route.startNode, route.endNode],
138-
strokeColor: "#808080",
139-
});
140-
141-
routePolyLine.addListener("click", (e: ClickEvent) => {
142-
const subNodes = createSubNodes(routePolyLine);
143-
144-
const edges = subNodes
145-
.map(
146-
(node, idx) =>
147-
[node, subNodes[idx + 1]] as [google.maps.LatLngLiteral, google.maps.LatLngLiteral],
148-
)
149-
.slice(0, -1);
150-
151-
const point = LatLngToLiteral(e.latLng);
151+
const edges = subNodes
152+
.map(
153+
(node, idx) =>
154+
[node, subNodes[idx + 1]] as [google.maps.LatLngLiteral, google.maps.LatLngLiteral],
155+
)
156+
.slice(0, -1);
152157

153-
const { edge: nearestEdge, point: nearestPoint } = findNearestSubEdge(edges, point);
158+
const point = LatLngToLiteral(e.latLng);
154159

155-
const tempWaypointMarker = createAdvancedMarker(
156-
AdvancedMarker,
157-
map,
158-
nearestPoint,
159-
createMarkerElement({
160-
type: Markers.WAYPOINT,
161-
className: "translate-waypoint",
162-
}),
163-
);
160+
const { edge: nearestEdge, point: nearestPoint } = findNearestSubEdge(edges, point);
164161

165-
if (originPoint.current) {
166-
setNewPoints((prevPoints) => {
167-
if (prevPoints.element) {
168-
prevPoints.element.position = nearestPoint;
169-
return {
170-
...prevPoints,
171-
coords: [...prevPoints.coords, nearestPoint],
172-
};
173-
} else {
174-
setIsActive(true);
175-
return {
176-
element: new AdvancedMarker({
177-
map: map,
178-
position: nearestPoint,
179-
content: createMarkerElement({
180-
type: Markers.DESTINATION,
162+
const tempWaypointMarker = createAdvancedMarker(
163+
AdvancedMarker,
164+
map,
165+
nearestPoint,
166+
createMarkerElement({
167+
type: Markers.WAYPOINT,
168+
className: "translate-waypoint",
169+
}),
170+
);
171+
if (originPoint.current) {
172+
setNewPoints((prevPoints) => {
173+
if (prevPoints.element) {
174+
prevPoints.element.position = nearestPoint;
175+
return {
176+
...prevPoints,
177+
coords: [...prevPoints.coords, nearestPoint],
178+
};
179+
} else {
180+
setIsActive(true);
181+
return {
182+
element: new AdvancedMarker({
183+
map: map,
184+
position: nearestPoint,
185+
content: createMarkerElement({
186+
type: Markers.DESTINATION,
187+
}),
181188
}),
182-
}),
183-
coords: [...prevPoints.coords, nearestPoint],
184-
};
185-
}
186-
});
187-
} else {
188-
const originMarker = new AdvancedMarker({
189-
map: map,
190-
position: nearestPoint,
191-
content: createMarkerElement({ type: Markers.ORIGIN }),
192-
});
189+
coords: [...prevPoints.coords, nearestPoint],
190+
};
191+
}
192+
});
193+
} else {
194+
const originMarker = new AdvancedMarker({
195+
map: map,
196+
position: nearestPoint,
197+
content: createMarkerElement({ type: Markers.ORIGIN }),
198+
});
193199

194-
originPoint.current = {
195-
point: nearestPoint,
196-
element: originMarker,
197-
};
200+
originPoint.current = {
201+
point: nearestPoint,
202+
element: originMarker,
203+
};
198204

199-
setNewPoints({
200-
element: null,
201-
coords: [nearestPoint],
202-
});
203-
}
204-
});
205-
}
205+
setNewPoints({
206+
element: null,
207+
coords: [nearestPoint],
208+
});
209+
}
210+
});
211+
}
212+
const startNode = coreRoutes.routes[0].node1;
206213

207-
createAdvancedMarker(
208-
AdvancedMarker,
209-
map,
210-
routes[0].startNode,
211-
createMarkerElement({ type: Markers.WAYPOINT, className: "translate-waypoint" }),
212-
);
214+
createAdvancedMarker(
215+
AdvancedMarker,
216+
map,
217+
startNode,
218+
createMarkerElement({ type: Markers.WAYPOINT, className: "translate-waypoint" }),
219+
);
220+
}
213221
};
214222

215223
useEffect(() => {
@@ -219,7 +227,7 @@ export default function ReportRoutePage() {
219227
}, [newPoints]);
220228

221229
useEffect(() => {
222-
drawRoute(mockNavigationRoute.route);
230+
drawRoute(data);
223231
addHazardMarker();
224232
if (Polyline) {
225233
newPolyLine.current = new Polyline({ map: map, path: [], strokeColor: "#0367FB" });

0 commit comments

Comments
 (0)