[UNI-128] feat : API 공통 타입 선언 및 fetch 디렉토리 정리 (#57)

Author: jpark0506

uniro_frontend/src/App.tsx

@@ -20,29 +20,29 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 const queryClient = new QueryClient();
 
 function App() {
-  const { location, fallback } = useDynamicSuspense();
-  useNetworkStatus();
-  return (
-    <QueryClientProvider client={queryClient}>
-      <Suspense key={location.key} fallback={fallback}>
-        <Routes>
-          <Route path="/demo" element={<Demo />} />
-          <Route path="/" element={<LandingPage />} />
-          <Route path="/university" element={<UniversitySearchPage />} />
-          <Route path="/building" element={<BuildingSearchPage />} />
-          <Route path="/map" element={<MapPage />} />
-          <Route path="/form" element={<ReportForm />} />
-          <Route path="/result" element={<NavigationResultPage />} />
-          <Route path="/report/route" element={<ReportRoutePage />} />
-          <Route path="/report/hazard" element={<ReportHazardPage />} />
-          /** 에러 페이지 */
-          <Route path="/error" element={<ErrorPage />} />
-          <Route path="/error/offline" element={<OfflinePage />} />
-        </Routes>
-      </Suspense>
-      <ReactQueryDevtools initialIsOpen={false} />
-    </QueryClientProvider>
-  );
+	const { location, fallback } = useDynamicSuspense();
+	useNetworkStatus();
+	return (
+		<QueryClientProvider client={queryClient}>
+			<Suspense key={location.key} fallback={fallback}>
+				<Routes>
+					<Route path="/demo" element={<Demo />} />
+					<Route path="/" element={<LandingPage />} />
+					<Route path="/university" element={<UniversitySearchPage />} />
+					<Route path="/building" element={<BuildingSearchPage />} />
+					<Route path="/map" element={<MapPage />} />
+					<Route path="/form" element={<ReportForm />} />
+					<Route path="/result" element={<NavigationResultPage />} />
+					<Route path="/report/route" element={<ReportRoutePage />} />
+					<Route path="/report/hazard" element={<ReportHazardPage />} />
+					/** 에러 페이지 */
+					<Route path="/error" element={<ErrorPage />} />
+					<Route path="/error/offline" element={<OfflinePage />} />
+				</Routes>
+			</Suspense>
+			<ReactQueryDevtools initialIsOpen={false} />
+		</QueryClientProvider>
+	);
 }
 
 export default App;

uniro_frontend/src/components/navigation/route/routeCard.tsx

@@ -4,7 +4,7 @@ import StraightIcon from "../../../assets/route/straight.svg?react";
 import RightIcon from "../../../assets/route/right.svg?react";
 import LeftIcon from "../../../assets/route/left.svg?react";
 import CautionText from "../../../assets/icon/cautionText.svg?react";
-import { RouteEdge } from "../../../data/types/edge";
+import { RouteEdge } from "../../../data/types/route";
 import { Building } from "../../../data/types/node";
 
 const NumberIcon = ({ index }: { index: number }) => {

uniro_frontend/src/components/navigation/route/routeList.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from "react";
-import { RouteEdge } from "../../../data/types/edge";
+import { RouteEdge } from "../../../data/types/route";
 import { Building } from "../../../data/types/node";
 import { RouteCard } from "./routeCard";
 

uniro_frontend/src/data/factory/edgeFactory.ts

@@ -1,4 +1,4 @@
-import { Direction, HazardEdge, RouteEdge } from "../types/edge";
+import { Direction, HazardEdge, RouteEdge } from "../types/route";
 import { CautionFactor, DangerFactor } from "../types/factor";
 import { CustomNode } from "../types/node";
 

uniro_frontend/src/data/factory/navigationFactory.ts

@@ -1,5 +1,5 @@
 import { hanyangBuildings } from "../mock/hanyangBuildings";
-import { RouteEdge } from "../types/edge";
+import { RouteEdge } from "../types/route";
 import { NavigationRoute } from "../types/route";
 
 // TODO: Distance를 m-> km로 자동 변환해주는 util

uniro_frontend/src/data/mock/hanyangHazardEdge.ts

@@ -1,6 +1,6 @@
 import { createHazardEdge } from "../factory/edgeFactory";
 import { createNode } from "../factory/nodeFactory";
-import { HazardEdge } from "../types/edge";
+import { HazardEdge } from "../types/route";
 import { CustomNode } from "../types/node";
 
 const nodes: CustomNode[] = [

uniro_frontend/src/data/mock/hanyangRoute.ts

@@ -1,7 +1,7 @@
 import { createHazardEdge, createRouteEdges } from "../factory/edgeFactory";
 import { createNavigationRoute } from "../factory/navigationFactory";
 import { createNode } from "../factory/nodeFactory";
-import { HazardEdge } from "../types/edge";
+import { HazardEdge } from "../types/route";
 import { CustomNode } from "../types/node";
 
 const nodes: CustomNode[] = [

uniro_frontend/src/data/types/coord.d.ts

@@ -0,0 +1 @@
+export type Coord = google.maps.LatLngLiteral;

uniro_frontend/src/data/types/edge.d.ts

@@ -1,14 +1,14 @@
-export interface CustomNode {
-	id: string;
-	lng: number;
-	lat: number;
-	isCore?: boolean;
+import { Coord } from "./coord";
+
+export type NodeId = number;
+
+export interface Node extends Coord {
+	nodeId: NodeId;
 }
 
-// 건물 노드의 정보를 담고 있음
-export interface Building extends CustomNode {
+export interface Building extends Node {
 	buildingName: string;
-	buildingImageUrl?: string;
+	buildingImageUrl: string;
 	phoneNumber: string;
 	address: string;
 }

uniro_frontend/src/data/types/node.d.ts

@@ -1,16 +1,39 @@
-import { RoutePoint } from "../../constant/enum/routeEnum";
-import { Building } from "./node";
+import { CautionIssueType, DangerIssueType } from "../../constant/enum/reportEnum";
+import { Coord } from "./coord";
+import { Node } from "./node";
 
-export interface Route {
-	route: RouteEdge[];
+export type RouteId = number;
+
+export type Route = {
+	routeId: RouteId;
+	startNode: Node;
+	endNode: Node;
+};
+
+export type Direction = "origin" | "right" | "straight" | "left" | "uturn" | "destination" | "caution";
+
+export interface CautionRoute extends Route {
+	cautionTypes: CautionIssueType[];
+}
+
+export interface DangerRoute extends Route {
+	dangerTypes: DangerIssueType[];
 }
 
 export interface NavigationRoute extends Route {
+	cautionTypes: CautionIssueType[];
+}
+
+export type RouteDetail = {
+	dist: number;
+	directionType: Direction;
+	coordinates: Coord;
+};
+
+export type NavigationRouteList = {
 	hasCaution: boolean;
 	totalDistance: number;
 	totalCost: number;
-	originBuilding: Building;
-	destinationBuilding: Building;
-}
-
-export type RoutePointType = RoutePoint.ORIGIN | RoutePoint.DESTINATION;
+	routes: NavigationRoute[];
+	routeDetails: RouteDetail[];
+};

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

@@ -3,7 +3,7 @@ import useMap from "../hooks/useMap";
 import { mockNavigationRoute } from "../data/mock/hanyangRoute";
 import createAdvancedMarker from "../utils/markers/createAdvanedMarker";
 import createMarkerElement from "../components/map/mapMarkers";
-import { RouteEdge } from "../data/types/edge";
+import { RouteEdge } from "../data/types/route";
 import { Markers } from "../constant/enum/markerEnum";
 import { mockHazardEdges } from "../data/mock/hanyangHazardEdge";
 import { ClickEvent } from "../data/types/event";

uniro_frontend/src/pages/reportHazard.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import createMarkerElement from "../components/map/mapMarkers";
 import { Markers } from "../constant/enum/markerEnum";
-import { RouteEdge } from "../data/types/edge";
+import { RouteEdge } from "../data/types/route";
 import useMap from "../hooks/useMap";
 import createAdvancedMarker from "../utils/markers/createAdvanedMarker";
 import { mockNavigationRoute } from "../data/mock/hanyangRoute";