+
+ );
+};
+
+export default LogListContainer;
diff --git a/uniro_admin_frontend/src/container/mainContainer.tsx b/uniro_admin_frontend/src/container/mainContainer.tsx
new file mode 100644
index 0000000..94fb949
--- /dev/null
+++ b/uniro_admin_frontend/src/container/mainContainer.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+type Props = {
+ children: React.ReactNode;
+};
+
+const MainContainer = ({ children }: Props) => {
+ return {children}
;
+};
+
+export default MainContainer;
diff --git a/uniro_admin_frontend/src/container/mapContainer.tsx b/uniro_admin_frontend/src/container/mapContainer.tsx
new file mode 100644
index 0000000..e20f603
--- /dev/null
+++ b/uniro_admin_frontend/src/container/mapContainer.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import Map from "../component/Map";
+
+type Props = {};
+
+const MapContainer = (props: Props) => {
+ return (
+
+
+ );
+};
+
+export default MapContainer;
diff --git a/uniro_admin_frontend/src/data/mock/logMockData.ts b/uniro_admin_frontend/src/data/mock/logMockData.ts
new file mode 100644
index 0000000..4ad3eb9
--- /dev/null
+++ b/uniro_admin_frontend/src/data/mock/logMockData.ts
@@ -0,0 +1,38 @@
+export const logCardData = [
+ {
+ date: "2025-10-20",
+ change: "변경 추가",
+ },
+ {
+ date: "2025-10-20",
+ change: "변경 추가",
+ },
+ {
+ date: "2025-10-20",
+ change: "변경 추가",
+ },
+ {
+ date: "2025-10-20",
+ change: "변경 추가",
+ },
+ {
+ date: "2025-10-20",
+ change: "변경 추가",
+ },
+ {
+ date: "2025-10-20",
+ change: "변경 추가",
+ },
+ {
+ date: "2025-10-20",
+ change: "변경 추가",
+ },
+ {
+ date: "2025-10-20",
+ change: "변경 추가",
+ },
+ {
+ date: "2025-10-20",
+ change: "변경 추가",
+ },
+];
diff --git a/uniro_admin_frontend/src/data/types/university.ts b/uniro_admin_frontend/src/data/types/university.ts
new file mode 100644
index 0000000..ae33172
--- /dev/null
+++ b/uniro_admin_frontend/src/data/types/university.ts
@@ -0,0 +1,6 @@
+export interface UniversityLatLng {
+ name: string;
+ latlng: google.maps.LatLngLiteral;
+}
+
+export type UniversityRecord = Record
+
+
+ 2025년 2월 3일 15:34
+
+
+
+ );
+}
diff --git a/uniro_frontend/src/components/error/Offline.tsx b/uniro_frontend/src/components/error/Offline.tsx
new file mode 100644
index 0000000..e48ec8a
--- /dev/null
+++ b/uniro_frontend/src/components/error/Offline.tsx
@@ -0,0 +1,13 @@
+import OfflineIcon from "../../assets/error/offline.svg?react";
+
+export default function Offline() {
+ return (
+
+
+ 일시적인 오류로
+
+
+ 일시적인 오류로
데이터를 불러올 수 없습니다.
+
+ 잠시 후 다시 시도해 주세요.
+
+
+ );
+}
diff --git a/uniro_frontend/src/components/error/SearchNull.tsx b/uniro_frontend/src/components/error/SearchNull.tsx
new file mode 100644
index 0000000..fbf5772
--- /dev/null
+++ b/uniro_frontend/src/components/error/SearchNull.tsx
@@ -0,0 +1,13 @@
+import NullIcon from "../../assets/error/search-null.svg?react";
+
+export default function SearchNull({ message }: { message: string }) {
+ return (
+
+
+ 오프라인 상태입니다.
+네트워크에 연결됐는지 확인해 주세요.
+
+
+ );
+}
diff --git a/uniro_frontend/src/components/loading/loading.tsx b/uniro_frontend/src/components/loading/loading.tsx
new file mode 100644
index 0000000..4af3061
--- /dev/null
+++ b/uniro_frontend/src/components/loading/loading.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import useUniversityInfo from "../../hooks/useUniversityInfo";
+type Props = {
+ isLoading: boolean;
+ loadingContent?: string;
+};
+
+const svgModules = import.meta.glob("/src/assets/university/*.svg", { eager: true });
+
+const Loading = ({ isLoading, loadingContent }: Props) => {
+ const { university } = useUniversityInfo();
+ const svgPath = (svgModules[`/src/assets/university/${university}.svg`] as { default: string })?.default;
+ return (
+
+
+ 검색 결과가 없습니다.
+{message}
+
+ 
+
+ {university?.name}
+{loadingContent}
+
+
@@ -46,7 +46,7 @@ interface MapBottomSheetProps {
export function MapBottomSheetFromMarker({ building, onClickLeft, onClickRight }: MapBottomSheetProps) {
if (building.property === undefined) return;
- const { id, lng, lat, isCore, buildingName, buildingImageUrl, phoneNumber, address } = building.property;
+ const { nodeId, lng, lat, buildingName, buildingImageUrl, phoneNumber, address } = building.property;
return (
diff --git a/uniro_frontend/src/components/map/mapMarkers.tsx b/uniro_frontend/src/components/map/mapMarkers.tsx
index cf4ed47..b44877f 100644
--- a/uniro_frontend/src/components/map/mapMarkers.tsx
+++ b/uniro_frontend/src/components/map/mapMarkers.tsx
@@ -1,5 +1,5 @@
-import { MarkerTypes } from "../../data/types/marker";
-import { Markers } from "../../constant/enums";
+import { Markers } from "../../constant/enum/markerEnum";
+import { MarkerTypes } from "../../data/types/enum";
const markerImages = import.meta.glob("/src/assets/markers/*.svg", { eager: true });
@@ -54,17 +54,60 @@ function createContainerElement(className?: string) {
return container;
}
+function attachAnimation(container: HTMLElement, hasAnimation: boolean) {
+ if (hasAnimation) {
+ const outerContainer = document.createElement("div");
+ outerContainer.className = "marker-appear";
+ outerContainer.appendChild(container);
+ return outerContainer;
+ }
+
+ return container;
+}
+
+function createNumberMarkerElement({
+ number,
+ className,
+ hasAnimation = false,
+}: {
+ number: number | string;
+ className?: string;
+ hasAnimation?: boolean;
+}): HTMLElement {
+ const container = createContainerElement(className);
+ const numberText = document.createElement("p");
+ numberText.innerText = `${number}`;
+ numberText.className =
+ "h-[17px] w-[17px] flex items-center justify-center text-white text-kor-body3 text-[10.25px] font-bold bg-[#161616] rounded-full";
+ const markerWrapper = document.createElement("div");
+ markerWrapper.className = "relative flex items-center justify-center";
+ markerWrapper.style.transform = "translateY(8.5px)";
+ markerWrapper.appendChild(numberText);
+
+ container.appendChild(markerWrapper);
+
+ return attachAnimation(container, hasAnimation);
+}
+
export default function createMarkerElement({
type,
title,
className,
hasTopContent = false,
+ hasAnimation = false,
+ number = 0,
}: {
type: MarkerTypes;
className?: string;
title?: string;
hasTopContent?: boolean;
+ hasAnimation?: boolean;
+ number?: number;
}): HTMLElement {
+ if (number && type === Markers.NUMBERED_WAYPOINT) {
+ return createNumberMarkerElement({ number, className, hasAnimation });
+ }
+
const container = createContainerElement(className);
const markerImage = createImageElement(type);
@@ -74,14 +117,15 @@ export default function createMarkerElement({
if (hasTopContent) {
container.appendChild(markerTitle);
container.appendChild(markerImage);
- return container;
+ return attachAnimation(container, hasAnimation);
}
container.appendChild(markerImage);
container.appendChild(markerTitle);
- return container;
+ return attachAnimation(container, hasAnimation);
}
container.appendChild(markerImage);
- return container;
+
+ return attachAnimation(container, hasAnimation);
}
diff --git a/uniro_frontend/src/components/map/reportButton.tsx b/uniro_frontend/src/components/map/reportButton.tsx
index 5944561..f23a3a6 100644
--- a/uniro_frontend/src/components/map/reportButton.tsx
+++ b/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) {
return (
-
제보하기
(mockNavigationRoute);
+const NavigationDescription = ({ isDetailView, navigationRoute }: TopBarProps) => {
+ const { origin, destination } = useRoutePoint();
+ const { totalCost, totalDistance, hasCaution } = navigationRoute;
return (
-
+
+
+ );
+}
diff --git a/uniro_frontend/src/components/navigation/navigationDescription.tsx b/uniro_frontend/src/components/navigation/navigationDescription.tsx
index e3ab1e0..85ad9ee 100644
--- a/uniro_frontend/src/components/navigation/navigationDescription.tsx
+++ b/uniro_frontend/src/components/navigation/navigationDescription.tsx
@@ -1,56 +1,65 @@
-import React, { useState } from "react";
+import React from "react";
import Cancel from "../../assets/icon/close.svg?react";
import CautionIcon from "../../assets/icon/cautionText.svg?react";
import SafeIcon from "../../assets/icon/safeText.svg?react";
import DestinationIcon from "../../assets/icon/destination.svg?react";
import OriginIcon from "../../assets/icon/start.svg?react";
import ResultDivider from "../../assets/icon/resultDivider.svg?react";
-import { NavigationRoute } from "../../data/types/route";
-import { mockNavigationRoute } from "../../data/mock/hanyangRoute";
+import { NavigationRouteList } from "../../data/types/route";
+import useRoutePoint from "../../hooks/useRoutePoint";
+import { formatDistance } from "../../utils/navigation/formatDistance";
+import { Link } from "react-router";
+
const TITLE = "전동휠체어 예상소요시간";
type TopBarProps = {
isDetailView: boolean;
+ navigationRoute: NavigationRouteList;
};
-const NavigationDescription = ({ isDetailView }: TopBarProps) => {
- const [route, _] = useState새로운 길 제보
+불편한 길 제보
+
{TITLE}
- {!isDetailView &&
- {route.totalCost}
+ {Math.floor(totalCost / 60)}
분
- {`${route.totalDistance}m`}
+
+ {formatDistance(totalDistance)}
- {route.hasCaution ?
{route.distance}m
+ {formattedDistance}
{route.distance}m
+ {formattedDistance}
+
+
+ 우회전
+
+
+
{formattedDistance}
{route.distance}m
+ {formattedDistance}
+
+
+ 좌회전
+
+
);
- case "destination":
+ case "finish":
return (
+
{formattedDistance}
{route.distance}m
+ {formattedDistance}
U턴
+ 유턴
출발
-
{originBuilding.buildingName}
- {originBuilding.address}
+ {origin?.buildingName}
+ {origin?.address}
@@ -100,8 +131,8 @@ export const RouteCard = ({
도착
-
{destinationBuilding.buildingName}
- {destinationBuilding.address}
+ {destination?.buildingName}
+ {destination?.address}
{route.distance}m
+ {formattedDistance}
턱이 있어요
+
- {routes.map((route, index) => (
-
-
+ {[
+ {
+ dist: 0,
+ directionType: "origin" as Direction,
+ coordinates: { lat: origin!.lat, lng: origin!.lng },
+ },
+ ...routes,
+ ].map((route, index) => (
+
+
diff --git a/uniro_frontend/src/components/report/formTitle.tsx b/uniro_frontend/src/components/report/formTitle.tsx
new file mode 100644
index 0000000..379875b
--- /dev/null
+++ b/uniro_frontend/src/components/report/formTitle.tsx
@@ -0,0 +1,28 @@
+import { PassableStatus } from "../../constant/enum/reportEnum";
+import { ReportModeType } from "../../data/types/report";
+
+type FormTitleProps = {
+ isPrimary: boolean;
+ reportMode: ReportModeType;
+ passableStatus: PassableStatus;
+};
+
+const createTitleString = ({ isPrimary, reportMode, passableStatus }: FormTitleProps) => {
+ const mainTitle = isPrimary
+ ? "통행 가능 여부"
+ : `통행 ${passableStatus === PassableStatus.DANGER ? "불가" : "주의"} 불편 요소 선택`;
+ const subTitle = isPrimary
+ ? "통행 불가능한 길은 추천 여부에서 제외됩니다."
+ : `불편했던 요소를 ${reportMode === "create" ? "선택" : "수정"}해주세요.`;
+ return { mainTitle, subTitle };
+};
+
+export const FormTitle = ({ isPrimary, reportMode, passableStatus }: FormTitleProps) => {
+ const { mainTitle, subTitle } = createTitleString({ isPrimary, reportMode, passableStatus });
+ return (
+ (getThemeByPassableStatus(passableStatus));
+ return (
+
+ );
+};
diff --git a/uniro_frontend/src/components/report/primaryForm.tsx b/uniro_frontend/src/components/report/primaryForm.tsx
new file mode 100644
index 0000000..a12f32e
--- /dev/null
+++ b/uniro_frontend/src/components/report/primaryForm.tsx
@@ -0,0 +1,39 @@
+import { PassableStatus } from "../../constant/enum/reportEnum";
+import { PrimaryQuestionButton, ReportModeType } from "../../data/types/report";
+
+import { FormTitle } from "./formTitle";
+import { PrimaryFormButton } from "./primaryButton";
+
+const buttonConfig = [
+ { content: "통행이 불가능해요", passableStatus: PassableStatus.DANGER },
+ { content: "통행이 가능하지만 주의가 필요해요", passableStatus: PassableStatus.CAUTION },
+ { content: "통행이 가능해졌어요", passableStatus: PassableStatus.RESTORED, mode: "update" },
+] as PrimaryQuestionButton[];
+
+interface PrimaryFormProps {
+ passableStatus: PassableStatus;
+ handlePrimarySelect: (status: PassableStatus) => void;
+ reportMode: ReportModeType;
+}
+
+export const PrimaryForm = ({ passableStatus, handlePrimarySelect, reportMode }: PrimaryFormProps) => {
+ return (
+ <>
+ ) => {
e.stopPropagation();
onClick();
};
- const svgPath = (svgModules[`/src/assets/university/${img}`] as { default: string })?.default;
-
return (
diff --git a/uniro_frontend/src/constant/edge.ts b/uniro_frontend/src/constant/edge.ts
new file mode 100644
index 0000000..d55001d
--- /dev/null
+++ b/uniro_frontend/src/constant/edge.ts
@@ -0,0 +1 @@
+export const EDGE_LENGTH = 3;
diff --git a/uniro_frontend/src/constant/enums.ts b/uniro_frontend/src/constant/enum/markerEnum.ts
similarity index 75%
rename from uniro_frontend/src/constant/enums.ts
rename to uniro_frontend/src/constant/enum/markerEnum.ts
index e816ddb..9487ca9 100644
--- a/uniro_frontend/src/constant/enums.ts
+++ b/uniro_frontend/src/constant/enum/markerEnum.ts
@@ -7,9 +7,5 @@ export const enum Markers {
SELECTED_BUILDING = "selectedBuilding",
WAYPOINT = "waypoint",
NUMBERED_WAYPOINT = "numberedWayPoint",
-}
-
-export const enum RoutePoint {
- ORIGIN = "origin",
- DESTINATION = "destination",
+ REPORT = "report",
}
diff --git a/uniro_frontend/src/constant/enum/messageEnum.ts b/uniro_frontend/src/constant/enum/messageEnum.ts
new file mode 100644
index 0000000..c2f249d
--- /dev/null
+++ b/uniro_frontend/src/constant/enum/messageEnum.ts
@@ -0,0 +1,6 @@
+export enum ReportRiskMessage {
+ DEFAULT = "선 위를 눌러 제보할 지점을 선택하세요",
+ CREATE = "이 지점으로 새로운 제보를 진행할까요?",
+ UPDATE = "이 지점에 제보된 기존 정보를 바꿀까요?",
+ ERROR = "선 위에서만 선택 가능해요",
+}
diff --git a/uniro_frontend/src/constant/enum/reportEnum.ts b/uniro_frontend/src/constant/enum/reportEnum.ts
new file mode 100644
index 0000000..04ccce6
--- /dev/null
+++ b/uniro_frontend/src/constant/enum/reportEnum.ts
@@ -0,0 +1,28 @@
+export enum PassableStatus {
+ DANGER = "DANGER",
+ CAUTION = "CAUTION",
+ RESTORED = "RESTORED",
+ INITIAL = "INITIAL",
+}
+
+export enum CautionIssue {
+ CURB = "낮은 턱이 있어요",
+ CRACK = "도로에 균열이 있어요",
+ SLOPE = "낮은 비탈길이 있어요",
+ ETC = "그 외 요소",
+}
+
+export enum DangerIssue {
+ CURB = "높은 턱이 있어요",
+ STAIRS = "계단이 있어요",
+ SLOPE = "경사가 매우 높아요",
+ ETC = "그 외 요소",
+}
+
+export enum IssueTypeKey {
+ CURB = "CURB",
+ CRACK = "CRACK",
+ SLOPE = "SLOPE",
+ ETC = "ETC",
+ STAIRS = "STAIRS",
+}
diff --git a/uniro_frontend/src/constant/enum/routeEnum.ts b/uniro_frontend/src/constant/enum/routeEnum.ts
new file mode 100644
index 0000000..aeff459
--- /dev/null
+++ b/uniro_frontend/src/constant/enum/routeEnum.ts
@@ -0,0 +1,4 @@
+export const enum RoutePoint {
+ ORIGIN = "origin",
+ DESTINATION = "destination",
+}
diff --git a/uniro_frontend/src/constant/fallback.tsx b/uniro_frontend/src/constant/fallback.tsx
new file mode 100644
index 0000000..adf8c73
--- /dev/null
+++ b/uniro_frontend/src/constant/fallback.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import Loading from "../components/loading/loading";
+
+export const fallbackConfig: Record = {
+ "/": = {
+ [PassableStatus.DANGER]: "border-system-red text-system-red bg-[#FFF5F7]",
+ [PassableStatus.CAUTION]: "border-system-orange text-system-orange bg-[#FFF7EF]",
+ [PassableStatus.RESTORED]: "border-primary-400 text-primary-400 bg-[#F0F5FE]",
+ [PassableStatus.INITIAL]: "bg-gray-100 border-gray-400",
+};
diff --git a/uniro_frontend/src/container/animatedSheetContainer.tsx b/uniro_frontend/src/container/animatedSheetContainer.tsx
new file mode 100644
index 0000000..bbb5dd8
--- /dev/null
+++ b/uniro_frontend/src/container/animatedSheetContainer.tsx
@@ -0,0 +1,47 @@
+// container/animatedSheetContainer.tsx
+
+import React from "react";
+import { AnimatePresence, motion, MotionProps } from "framer-motion";
+
+type AnimatedSheetContainerProps = {
+ isVisible: boolean;
+ height: number;
+ children: React.ReactNode;
+ className?: string;
+ transition?: MotionProps["transition"];
+ motionProps?: MotionProps;
+};
+
+const AnimatedSheetContainer = ({
+ isVisible,
+ height,
+ children,
+ className = "",
+ transition = { duration: 0.3, type: "tween" },
+ motionProps = {},
+}: AnimatedSheetContainerProps) => {
+ return (
+
+ {isVisible && (
+
+ {children}
+
+ )}
+
+ );
+};
+
+export default AnimatedSheetContainer;
diff --git a/uniro_frontend/src/data/factory/edgeFactory.ts b/uniro_frontend/src/data/factory/edgeFactory.ts
index 77ca341..ccb0549 100644
--- a/uniro_frontend/src/data/factory/edgeFactory.ts
+++ b/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";
diff --git a/uniro_frontend/src/data/factory/navigationFactory.ts b/uniro_frontend/src/data/factory/navigationFactory.ts
index d62f342..37ff378 100644
--- a/uniro_frontend/src/data/factory/navigationFactory.ts
+++ b/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
diff --git a/uniro_frontend/src/data/mock/hanyangHazardEdge.ts b/uniro_frontend/src/data/mock/hanyangHazardEdge.ts
index 0cd4e67..fc54068 100644
--- a/uniro_frontend/src/data/mock/hanyangHazardEdge.ts
+++ b/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[] = [
diff --git a/uniro_frontend/src/data/mock/hanyangRoute.ts b/uniro_frontend/src/data/mock/hanyangRoute.ts
index 40c9594..ebe71b8 100644
--- a/uniro_frontend/src/data/mock/hanyangRoute.ts
+++ b/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[] = [
@@ -17,8 +17,8 @@ const edges: HazardEdge[] = [
createHazardEdge("route2", nodes[1], nodes[2], ["도로에 균열이 있어요"]),
createHazardEdge("route3", nodes[2], nodes[3]),
createHazardEdge("route4", nodes[3], nodes[4]),
- createHazardEdge("route5", nodes[3], nodes[4]),
- createHazardEdge("route6", nodes[3], nodes[4]),
+ // createHazardEdge("route5", nodes[3], nodes[4]),
+ // createHazardEdge("route6", nodes[3], nodes[4]),
];
export const mockNavigationRoute = createNavigationRoute(createRouteEdges(edges));
diff --git a/uniro_frontend/src/data/types/coord.d.ts b/uniro_frontend/src/data/types/coord.d.ts
new file mode 100644
index 0000000..625eadd
--- /dev/null
+++ b/uniro_frontend/src/data/types/coord.d.ts
@@ -0,0 +1 @@
+export type Coord = google.maps.LatLngLiteral;
diff --git a/uniro_frontend/src/data/types/edge.d.ts b/uniro_frontend/src/data/types/edge.d.ts
deleted file mode 100644
index bf2271f..0000000
--- a/uniro_frontend/src/data/types/edge.d.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { CautionFactor, DangerFactor } from "./factor";
-import { CustomNode } from "./node";
-
-export interface Edge {
- id: string;
- startNode: CustomNode;
- endNode: CustomNode;
-}
-
-export type Direction = "origin" | "right" | "straight" | "left" | "uturn" | "destination" | "caution";
-
-// 위험 요소 & 주의 요소
-// 마커를 표시하거나, 길 찾기 결과의 경로를 그릴 때 사용
-export interface HazardEdge extends Edge {
- dangerFactors?: DangerFactor[];
- cautionFactors?: CautionFactor[];
-}
-
-export interface RouteEdge extends HazardEdge {
- distance: number;
- direction: Direction;
-}
diff --git a/uniro_frontend/src/data/types/enum.d.ts b/uniro_frontend/src/data/types/enum.d.ts
new file mode 100644
index 0000000..ab2cc3f
--- /dev/null
+++ b/uniro_frontend/src/data/types/enum.d.ts
@@ -0,0 +1,6 @@
+import { CautionIssue, DangerIssue } from "../../constant/enum/reportEnum";
+import { Markers } from "../../constant/enum/markerEnum";
+
+export type DangerIssueType = keyof typeof DangerIssue;
+export type CautionIssueType = keyof typeof CautionIssue;
+export type MarkerTypes = (typeof Markers)[keyof typeof Markers];
diff --git a/uniro_frontend/src/data/types/event.d.ts b/uniro_frontend/src/data/types/event.d.ts
new file mode 100644
index 0000000..36cf7f4
--- /dev/null
+++ b/uniro_frontend/src/data/types/event.d.ts
@@ -0,0 +1,4 @@
+export type ClickEvent = {
+ latLng: google.maps.LatLng;
+ domEvent: MouseEvent;
+};
diff --git a/uniro_frontend/src/data/types/marker.d.ts b/uniro_frontend/src/data/types/marker.d.ts
index 866d06c..fb5d960 100644
--- a/uniro_frontend/src/data/types/marker.d.ts
+++ b/uniro_frontend/src/data/types/marker.d.ts
@@ -1,13 +1,8 @@
-import { Markers } from "../../constant/enums";
+import { Markers } from "../../constant/enum/markerEnum";
export type AdvancedMarker = google.maps.marker.AdvancedMarkerElement;
-export type MarkerTypes =
- | Markers.BUILDING
- | Markers.CAUTION
- | Markers.DANGER
- | Markers.DESTINATION
- | Markers.ORIGIN
- | Markers.NUMBERED_WAYPOINT
- | Markers.WAYPOINT
- | Markers.SELECTED_BUILDING;
+export type MarkerTypesWithElement = {
+ type: MarkerTypes;
+ element: AdvancedMarker;
+};
diff --git a/uniro_frontend/src/data/types/node.d.ts b/uniro_frontend/src/data/types/node.d.ts
index 52d7ec5..87a812a 100644
--- a/uniro_frontend/src/data/types/node.d.ts
+++ b/uniro_frontend/src/data/types/node.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;
}
diff --git a/uniro_frontend/src/data/types/report.d.ts b/uniro_frontend/src/data/types/report.d.ts
new file mode 100644
index 0000000..b8b7a45
--- /dev/null
+++ b/uniro_frontend/src/data/types/report.d.ts
@@ -0,0 +1,20 @@
+import { CautionIssue, DangerIssue, PassableStatus } from "../../constant/enum/reportEnum";
+
+export type ReportModeType = "create" | "update";
+
+export interface PrimaryQuestionButton {
+ content: string;
+ passableStatus: PassableStatus;
+ mode?: ReportModeType;
+}
+
+export interface IssueQuestionButtons {
+ danger: DangerIssue[];
+ caution: CautionIssue[];
+}
+export interface ReportFormData {
+ passableStatus: PassableStatus;
+ dangerIssues: IssueTypeKey[];
+ cautionIssues: IssueTypeKey[];
+
+}
diff --git a/uniro_frontend/src/data/types/route.d.ts b/uniro_frontend/src/data/types/route.d.ts
index 665455b..1d8ac84 100644
--- a/uniro_frontend/src/data/types/route.d.ts
+++ b/uniro_frontend/src/data/types/route.d.ts
@@ -1,17 +1,58 @@
-import { RoutePoint } from "../../constant/enums";
-import { RouteEdge } from "./edge";
-import { Building } from "./node";
+import { Markers } from "../../constant/enum/markerEnum";
+import { CautionIssueType, DangerIssueType } from "../../constant/enum/reportEnum";
+import { RoutePoint } from "../../constant/enum/routeEnum";
+import { Coord } from "./coord";
+import { MarkerTypes } from "./marker";
+import { Node } from "./node";
-export interface Route {
- route: RouteEdge[];
+export type RouteId = number;
+
+export type Route = {
+ routeId: RouteId;
+ node1: Coord;
+ node2: Coord;
+};
+
+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 {
- hasCaution: boolean;
- totalDistance: number;
- totalCost: number;
- originBuilding: Building;
- destinationBuilding: Building;
+ cautionTypes: CautionIssueType[];
+}
+
+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;
+};
+
+export type NavigationRouteList = {
+ hasCaution: boolean;
+ totalDistance: number;
+ totalCost: number;
+ routes: NavigationRoute[];
+ routeDetails: RouteDetail[];
+};
diff --git a/uniro_frontend/src/data/types/university.d.ts b/uniro_frontend/src/data/types/university.d.ts
new file mode 100644
index 0000000..8f41ad0
--- /dev/null
+++ b/uniro_frontend/src/data/types/university.d.ts
@@ -0,0 +1,5 @@
+export type University = {
+ name: string;
+ imageUrl: string;
+ id: number;
+};
diff --git a/uniro_frontend/src/hooks/useDynamicSuspense.tsx b/uniro_frontend/src/hooks/useDynamicSuspense.tsx
new file mode 100644
index 0000000..9b21075
--- /dev/null
+++ b/uniro_frontend/src/hooks/useDynamicSuspense.tsx
@@ -0,0 +1,16 @@
+import { useLocation } from "react-router";
+import { useFallbackStore } from "./useFallbackStore";
+import { useEffect } from "react";
+import { fallbackConfig } from "../constant/fallback";
+
+export const useDynamicSuspense = () => {
+ const location = useLocation();
+ const { fallback, setFallback } = useFallbackStore();
+
+ useEffect(() => {
+ const newFallback = fallbackConfig[location.pathname] || fallbackConfig["/"];
+ setFallback(newFallback);
+ }, [location.pathname, setFallback]);
+
+ return { location, fallback };
+};
diff --git a/uniro_frontend/src/hooks/useFallbackStore.tsx b/uniro_frontend/src/hooks/useFallbackStore.tsx
new file mode 100644
index 0000000..10b5875
--- /dev/null
+++ b/uniro_frontend/src/hooks/useFallbackStore.tsx
@@ -0,0 +1,14 @@
+import { create } from "zustand";
+import { fallbackConfig } from "../constant/fallback";
+
+interface FallbackStore {
+ fallback: React.ReactNode;
+ setFallback: (fallback: React.ReactNode) => void;
+}
+
+export const useFallbackStore = create((set) => {
+ return {
+ fallback: fallbackConfig["/"],
+ setFallback: (f) => set({ fallback: f }),
+ };
+});
diff --git a/uniro_frontend/src/hooks/useLoading.tsx b/uniro_frontend/src/hooks/useLoading.tsx
new file mode 100644
index 0000000..088f1a1
--- /dev/null
+++ b/uniro_frontend/src/hooks/useLoading.tsx
@@ -0,0 +1,17 @@
+import React, { memo, useCallback, useState } from "react";
+
+const useLoading = (): [boolean, () => void, () => void] => {
+ const [isLoading, setIsLoading] = useState(false);
+
+ const show = useCallback(() => {
+ setIsLoading(true);
+ }, []);
+
+ const hide = useCallback(() => {
+ setIsLoading(false);
+ }, []);
+
+ return [isLoading, show, hide];
+};
+
+export default useLoading;
diff --git a/uniro_frontend/src/hooks/useMap.tsx b/uniro_frontend/src/hooks/useMap.tsx
index 8f643cf..c8d9934 100644
--- a/uniro_frontend/src/hooks/useMap.tsx
+++ b/uniro_frontend/src/hooks/useMap.tsx
@@ -1,7 +1,7 @@
import { useEffect, useRef, useState } from "react";
import { initializeMap } from "../map/initializer/googleMapInitializer";
-const useMap = () => {
+const useMap = (mapOptions?: google.maps.MapOptions) => {
const mapRef = useRef(null);
const [map, setMap] = useState(null);
const [overlay, setOverlay] = useState(null);
@@ -14,7 +14,10 @@ const useMap = () => {
const initMap = async () => {
try {
- const { map, overlay, AdvancedMarkerElement, Polyline } = await initializeMap(mapRef.current);
+ const { map, overlay, AdvancedMarkerElement, Polyline } = await initializeMap(
+ mapRef.current,
+ mapOptions,
+ );
setMap(map);
setOverlay(overlay);
setAdvancedMarker(() => AdvancedMarkerElement);
diff --git a/uniro_frontend/src/hooks/useModal.tsx b/uniro_frontend/src/hooks/useModal.tsx
index b48ce40..2033f7b 100644
--- a/uniro_frontend/src/hooks/useModal.tsx
+++ b/uniro_frontend/src/hooks/useModal.tsx
@@ -1,6 +1,8 @@
import React, { ReactNode, useCallback, useState } from "react";
-export default function useModal(): [React.FC<{ children: ReactNode }>, boolean, () => void, () => void] {
+export default function useModal(
+ onClose?: () => void,
+): [React.FC<{ children: ReactNode }>, boolean, () => void, () => void] {
const [isOpen, setIsOpen] = useState(false);
const open = useCallback(() => {
@@ -8,6 +10,9 @@ export default function useModal(): [React.FC<{ children: ReactNode }>, boolean,
}, []);
const close = useCallback(() => {
+ if (onClose) {
+ onClose();
+ }
setIsOpen(false);
}, []);
diff --git a/uniro_frontend/src/hooks/useNetworkStatus.tsx b/uniro_frontend/src/hooks/useNetworkStatus.tsx
new file mode 100644
index 0000000..4e42695
--- /dev/null
+++ b/uniro_frontend/src/hooks/useNetworkStatus.tsx
@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router";
+
+export default function useNetworkStatus() {
+ const [isOffline, setIsOffline] = useState(false);
+ const navigate = useNavigate();
+
+ const handleOffline = () => {
+ setIsOffline(true);
+ navigate("/error/offline");
+ };
+
+ const handleOnline = () => {
+ setIsOffline(false);
+ navigate(-1);
+ };
+
+ useEffect(() => {
+ window.addEventListener("offline", handleOffline);
+ window.addEventListener("online", handleOnline);
+
+ return () => {
+ window.removeEventListener("offline", handleOffline);
+ window.removeEventListener("online", handleOnline);
+ };
+ });
+}
diff --git a/uniro_frontend/src/hooks/useRedirectUndefined.tsx b/uniro_frontend/src/hooks/useRedirectUndefined.tsx
new file mode 100644
index 0000000..ec4bd18
--- /dev/null
+++ b/uniro_frontend/src/hooks/useRedirectUndefined.tsx
@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router";
+
+export default function useRedirectUndefined(deps: T[], url: string = "/") {
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (deps.some((dep) => dep === undefined)) {
+ navigate(url);
+ }
+ }, [...deps]);
+}
diff --git a/uniro_frontend/src/hooks/useReportRisk.ts b/uniro_frontend/src/hooks/useReportRisk.ts
new file mode 100644
index 0000000..b4e77a9
--- /dev/null
+++ b/uniro_frontend/src/hooks/useReportRisk.ts
@@ -0,0 +1,14 @@
+import { create } from "zustand";
+import { RouteId } from "../data/types/route";
+
+interface ReportedRiskRoute {
+ reportRouteId: RouteId | undefined;
+ setReportRouteId: (selectedRouteId: RouteId) => void;
+}
+
+const useReportRisk = create((set) => ({
+ reportRouteId: undefined,
+ setReportRouteId: (newRouteId: RouteId) => set({ reportRouteId: newRouteId }),
+}));
+
+export default useReportRisk;
diff --git a/uniro_frontend/src/hooks/useRoutePoint.ts b/uniro_frontend/src/hooks/useRoutePoint.ts
index 50b6d88..2dd5389 100644
--- a/uniro_frontend/src/hooks/useRoutePoint.ts
+++ b/uniro_frontend/src/hooks/useRoutePoint.ts
@@ -1,19 +1,46 @@
import { create } from "zustand";
import { Building } from "../data/types/node";
+const originMockInfo = {
+ buildingName: "5호관",
+ buildingImageUrl: "",
+ phoneNumber: "",
+ address: "인하로 100",
+ nodeId: 1,
+ lng: 127.042012,
+ lat: 37.557643,
+};
+
+const destMockInfo = {
+ buildingName: "하이테크",
+ buildingImageUrl: "",
+ phoneNumber: "",
+ address: "인하로 100",
+ nodeId: 2,
+ lng: 127.042012,
+ lat: 37.557643,
+};
+
interface RouteStore {
- origin: Building | undefined;
+ origin: Building;
setOrigin: (origin: Building | undefined) => void;
- destination: Building | undefined;
+ destination: Building;
+ setDemoBuildingInfo: (building: Building) => void;
setDestination: (destination: Building | undefined) => void;
+ setOriginCoord: (lng: number, lat: number) => void;
+ setDestinationCoord: (lng: number, lat: number) => void;
switchBuilding: () => void;
}
/** 출발지, 도착지 관리 전역 상태 */
const useRoutePoint = create((set) => ({
- origin: undefined,
+ origin: originMockInfo,
setOrigin: (newOrigin: Building | undefined) => set(() => ({ origin: newOrigin })),
- destination: undefined,
+ destination: destMockInfo,
+ setDemoBuildingInfo: (building: Building) => set(() => ({ origin: building, destination: building })),
+ setOriginCoord: (lng: number, lat: number) => set(({ origin }) => ({ origin: { ...origin, lng, lat } })),
+ setDestinationCoord: (lng: number, lat: number) =>
+ set(({ destination }) => ({ destination: { ...destination, lng, lat } })),
setDestination: (newDestination: Building | undefined) => set(() => ({ destination: newDestination })),
switchBuilding: () => set(({ origin, destination }) => ({ origin: destination, destination: origin })),
}));
diff --git a/uniro_frontend/src/hooks/useSearchBuilding.ts b/uniro_frontend/src/hooks/useSearchBuilding.ts
index b397f85..8ab44f2 100644
--- a/uniro_frontend/src/hooks/useSearchBuilding.ts
+++ b/uniro_frontend/src/hooks/useSearchBuilding.ts
@@ -1,7 +1,7 @@
import { create } from "zustand";
import { Building } from "../data/types/node";
import { RoutePointType } from "../data/types/route";
-import { RoutePoint } from "../constant/enums";
+import { RoutePoint } from "../constant/enum/routeEnum";
interface SearchModeStore {
mode: RoutePointType;
diff --git a/uniro_frontend/src/hooks/useSuspenseMap.tsx b/uniro_frontend/src/hooks/useSuspenseMap.tsx
new file mode 100644
index 0000000..86aee45
--- /dev/null
+++ b/uniro_frontend/src/hooks/useSuspenseMap.tsx
@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useState } from "react";
+import { createMapResource } from "../map/createMapResource";
+
+interface MapResource {
+ map: google.maps.Map | null;
+ AdvancedMarkerElement: typeof google.maps.marker.AdvancedMarkerElement | null;
+ Polyline: typeof google.maps.Polyline | null;
+}
+
+export function useSuspenseMap(mapOptions?: google.maps.MapOptions) {
+ const [mapElement, setMapElement] = useState(null);
+
+ const [resource, setResource] = useState<{ read(): MapResource }>(() => createMapResource(null, mapOptions));
+
+ const mapRef = useCallback((node: HTMLDivElement | null) => {
+ setMapElement(node);
+ }, []);
+
+ useEffect(() => {
+ setResource(createMapResource(mapElement, mapOptions));
+ return () => {
+ if (mapElement) {
+ mapElement.innerHTML = "";
+ }
+ };
+ }, [mapElement, mapOptions]);
+
+ const { map, AdvancedMarkerElement, Polyline } = resource.read();
+
+ return {
+ mapRef,
+ map,
+ AdvancedMarker: AdvancedMarkerElement,
+ Polyline,
+ };
+}
+
+export default useSuspenseMap;
diff --git a/uniro_frontend/src/hooks/useUniversityInfo.tsx b/uniro_frontend/src/hooks/useUniversityInfo.tsx
new file mode 100644
index 0000000..4097718
--- /dev/null
+++ b/uniro_frontend/src/hooks/useUniversityInfo.tsx
@@ -0,0 +1,26 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { University } from "../data/types/university";
+
+interface UniversityInfoStore {
+ university: University | undefined;
+ setUniversity: (university: University) => void;
+ resetUniversity: () => void;
+}
+const useUniversityInfo = create(
+ persist(
+ (set) => ({
+ university: undefined,
+ setUniversity: (newUniversity: University) => {
+ set(() => ({ university: newUniversity }));
+ },
+ resetUniversity: () => {
+ set(() => ({ university: undefined }));
+ },
+ }),
+ {
+ name: "university-info",
+ },
+ ),
+);
+export default useUniversityInfo;
diff --git a/uniro_frontend/src/index.css b/uniro_frontend/src/index.css
index 3508d62..a65ec74 100644
--- a/uniro_frontend/src/index.css
+++ b/uniro_frontend/src/index.css
@@ -136,3 +136,32 @@
@utility translate-waypoint {
transform: translateY(+4px);
}
+
+@keyframes markerAppear {
+ 0% {
+ transform: scale(0);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+
+.marker-appear {
+ animation: markerAppear 0.2s ease-in-out forwards;
+ transform-origin: bottom center;
+}
+
+.fade-out {
+ animation: fadeOut 0.3s forwards ease-in;
+}
+
+@keyframes fadeOut {
+ 0% {
+ opacity: 1;
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0;
+ transform: scale(0);
+ }
+}
diff --git a/uniro_frontend/src/map/createMapResource.ts b/uniro_frontend/src/map/createMapResource.ts
new file mode 100644
index 0000000..ca2cbf8
--- /dev/null
+++ b/uniro_frontend/src/map/createMapResource.ts
@@ -0,0 +1,50 @@
+import { initializeMap } from "./initializer/googleMapInitializer";
+
+export interface MapResource {
+ map: google.maps.Map | null;
+ AdvancedMarkerElement: typeof google.maps.marker.AdvancedMarkerElement | null;
+ Polyline: typeof google.maps.Polyline | null;
+}
+
+const dummyResource = {
+ read() {
+ return {
+ map: null,
+ AdvancedMarkerElement: null,
+ Polyline: null,
+ } as MapResource;
+ },
+};
+
+export function createMapResource(
+ mapElement: HTMLDivElement | null,
+ mapOptions?: google.maps.MapOptions,
+): { read(): MapResource } {
+ if (!mapElement) {
+ return dummyResource;
+ }
+
+ let status = "pending";
+ let result: MapResource;
+ let suspender = initializeMap(mapElement, mapOptions)
+ .then((res) => {
+ status = "success";
+ result = res;
+ })
+ .catch((e) => {
+ status = "error";
+ result = e;
+ });
+
+ return {
+ read() {
+ if (status === "error") {
+ throw result;
+ } else if (status === "pending") {
+ throw suspender;
+ } else {
+ return result;
+ }
+ },
+ };
+}
diff --git a/uniro_frontend/src/map/initializer/googleMapInitializer.ts b/uniro_frontend/src/map/initializer/googleMapInitializer.ts
index 32d559c..7707924 100644
--- a/uniro_frontend/src/map/initializer/googleMapInitializer.ts
+++ b/uniro_frontend/src/map/initializer/googleMapInitializer.ts
@@ -9,12 +9,14 @@ interface MapWithOverlay {
Polyline: typeof google.maps.Polyline;
}
-export const initializeMap = async (mapElement: HTMLElement | null): Promise => {
+export const initializeMap = async (
+ mapElement: HTMLElement | null,
+ mapOptions?: google.maps.MapOptions,
+): Promise => {
const { Map, OverlayView, AdvancedMarkerElement, Polyline } = await loadGoogleMapsLibraries();
- // useMap hook에서 error을 catch 하도록 함.
if (!mapElement) {
- throw new Error("mapElement is null");
+ throw new Error("Map Element is not provided");
}
const map = new Map(mapElement, {
@@ -33,6 +35,7 @@ export const initializeMap = async (mapElement: HTMLElement | null): Promise
+
+ );
+};
diff --git a/uniro_frontend/src/components/report/primaryButton.tsx b/uniro_frontend/src/components/report/primaryButton.tsx
new file mode 100644
index 0000000..caef3c8
--- /dev/null
+++ b/uniro_frontend/src/components/report/primaryButton.tsx
@@ -0,0 +1,25 @@
+import { useState } from "react";
+import { getThemeByPassableStatus } from "../../utils/report/getThemeByPassableStatus";
+import { PassableStatus } from "../../constant/enum/reportEnum";
+
+export const PrimaryFormButton = ({
+ onClick,
+ formPassableStatus,
+ passableStatus,
+ content,
+}: {
+ onClick: (status: PassableStatus) => void;
+ formPassableStatus: PassableStatus;
+ passableStatus: PassableStatus;
+ content: string;
+}) => {
+ const [selectedThemeString, _] = useState{mainTitle}
+ {subTitle}
+
+ {buttonConfig.map((button, index) => {
+ if (button.mode && button.mode !== reportMode) return null;
+ return (
+
+
+ );
+};
diff --git a/uniro_frontend/src/components/report/reportDivider.tsx b/uniro_frontend/src/components/report/reportDivider.tsx
new file mode 100644
index 0000000..db9bce0
--- /dev/null
+++ b/uniro_frontend/src/components/report/reportDivider.tsx
@@ -0,0 +1,3 @@
+export const ReportDivider = () => {
+ return ;
+};
diff --git a/uniro_frontend/src/components/report/reportTitle.tsx b/uniro_frontend/src/components/report/reportTitle.tsx
new file mode 100644
index 0000000..6845853
--- /dev/null
+++ b/uniro_frontend/src/components/report/reportTitle.tsx
@@ -0,0 +1,10 @@
+import { ReportModeType } from "../../data/types/report";
+export const ReportTitle = ({ reportMode }: { reportMode: ReportModeType }) => {
+ const CREATE_TITLE = "불편한 길을 알려주세요.";
+ const UPDATE_TITLE = "불편한 길을 수정해주세요.";
+ return (
+
+ {reportMode === "create" ? CREATE_TITLE : UPDATE_TITLE}
+
+ );
+};
diff --git a/uniro_frontend/src/components/report/secondaryButton.tsx b/uniro_frontend/src/components/report/secondaryButton.tsx
new file mode 100644
index 0000000..3985d79
--- /dev/null
+++ b/uniro_frontend/src/components/report/secondaryButton.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { getThemeByPassableStatus } from "../../utils/report/getThemeByPassableStatus";
+import { CautionIssue, DangerIssue, IssueTypeKey, PassableStatus } from "../../constant/enum/reportEnum";
+import { CautionIssueType, DangerIssueType } from "../../data/types/enum";
+
+export const SecondaryFormButton = ({
+ onClick,
+ formPassableStatus,
+ isSelected,
+ contentKey,
+}: {
+ onClick: (answer: IssueTypeKey) => void;
+ formPassableStatus: PassableStatus;
+ isSelected: boolean;
+ contentKey: IssueTypeKey;
+}) => {
+ return (
+
+ );
+};
diff --git a/uniro_frontend/src/components/report/secondaryForm.tsx b/uniro_frontend/src/components/report/secondaryForm.tsx
new file mode 100644
index 0000000..b95296c
--- /dev/null
+++ b/uniro_frontend/src/components/report/secondaryForm.tsx
@@ -0,0 +1,51 @@
+import { IssueTypeKey, PassableStatus } from "../../constant/enum/reportEnum";
+import { IssueQuestionButtons, ReportFormData, ReportModeType } from "../../data/types/report";
+
+import { FormTitle } from "./formTitle";
+import { SecondaryFormButton } from "./secondaryButton";
+
+const buttonConfig = {
+ danger: [IssueTypeKey.CURB, IssueTypeKey.STAIRS, IssueTypeKey.SLOPE, IssueTypeKey.ETC],
+ caution: [IssueTypeKey.CURB, IssueTypeKey.CRACK, IssueTypeKey.SLOPE, IssueTypeKey.ETC],
+} as IssueQuestionButtons;
+
+type SecondaryFormProps = {
+ reportMode: ReportModeType;
+ formData: ReportFormData;
+ handleSecondarySelect: (answer: IssueTypeKey) => void;
+};
+
+export const SecondaryForm = ({ formData, handleSecondarySelect, reportMode }: SecondaryFormProps) => {
+ return (
+ <>
+ {(formData.passableStatus === PassableStatus.CAUTION ||
+ formData.passableStatus === PassableStatus.DANGER) && (
+
+ {formData.passableStatus === PassableStatus.CAUTION &&
+ buttonConfig.caution.map((button, index) => {
+ return (
+
+
+ );
+};
diff --git a/uniro_frontend/src/components/universityButton.tsx b/uniro_frontend/src/components/universityButton.tsx
index 2dd99bf..8822ba1 100644
--- a/uniro_frontend/src/components/universityButton.tsx
+++ b/uniro_frontend/src/components/universityButton.tsx
@@ -7,23 +7,19 @@ interface UniversityButtonProps {
onClick: () => void;
}
-const svgModules = import.meta.glob("/src/assets/university/*.svg", { eager: true });
-
export default function UniversityButton({ name, img, selected, onClick }: UniversityButtonProps) {
const handleClick = (e: MouseEvent