Skip to content

Commit 6483fb8

Browse files
jpark0506jpark0506
authored
[UNI-345] refac : 길 찾기 페이지 레이아웃 관련 리팩토링 (#202)
1 parent a87fa57 commit 6483fb8

File tree

12 files changed

+159
-65
lines changed

12 files changed

+159
-65
lines changed

‎uniro_frontend/src/api/transformer/route.ts

+5
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export const transformFastRoute = (data: GetFastestRouteResponse): NavigationRou
5858
// PEDES-SAFE는 항상 존재, PEDES-CAUTION은 존재하지 않
5959
record[`PEDES & SAFE`] = {
6060
hasCaution: route.hasCaution,
61+
hasDanger: route.hasDanger,
6162
totalDistance: route.totalDistance,
6263
totalCost: route.pedestrianTotalCost ?? 0,
6364
routes: route.routes,
@@ -68,6 +69,7 @@ export const transformFastRoute = (data: GetFastestRouteResponse): NavigationRou
6869
if (route.manualTotalCost && route.hasCaution) {
6970
record[`MANUAL & CAUTION`] = {
7071
hasCaution: route.hasCaution,
72+
hasDanger: route.hasDanger,
7173
totalDistance: route.totalDistance,
7274
totalCost: route.manualTotalCost ?? 0,
7375
routes: route.routes,
@@ -77,6 +79,7 @@ export const transformFastRoute = (data: GetFastestRouteResponse): NavigationRou
7779
if (route.electricTotalCost && route.hasCaution) {
7880
record[`ELECTRIC & CAUTION`] = {
7981
hasCaution: route.hasCaution,
82+
hasDanger: route.hasDanger,
8083
totalDistance: route.totalDistance,
8184
totalCost: route.electricTotalCost ?? 0,
8285
routes: route.routes,
@@ -88,6 +91,7 @@ export const transformFastRoute = (data: GetFastestRouteResponse): NavigationRou
8891
if (route.manualTotalCost && !route.hasCaution) {
8992
record[`MANUAL & SAFE`] = {
9093
hasCaution: route.hasCaution,
94+
hasDanger: route.hasDanger,
9195
totalDistance: route.totalDistance,
9296
totalCost: route.manualTotalCost ?? 0,
9397
routes: route.routes,
@@ -97,6 +101,7 @@ export const transformFastRoute = (data: GetFastestRouteResponse): NavigationRou
97101
if (route.electricTotalCost && !route.hasCaution) {
98102
record[`ELECTRIC & SAFE`] = {
99103
hasCaution: route.hasCaution,
104+
hasDanger: route.hasDanger,
100105
totalDistance: route.totalDistance,
101106
totalCost: route.electricTotalCost ?? 0,
102107
routes: route.routes,

‎uniro_frontend/src/api/type/response/route.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export type GetSingleRouteRiskResponse = {
2626
export type GetFastestRouteResponse = {
2727
routeType?: NavigationRouteType;
2828
hasCaution: boolean;
29+
hasDanger: boolean;
2930
totalDistance: number;
3031
pedestrianTotalCost?: number | null;
3132
manualTotalCost?: number | null;

‎uniro_frontend/src/assets/icon/dangerText.svg

+4
Loading

‎uniro_frontend/src/component/NavgationMap.tsx

+13-4
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,14 @@ const NavigationMap = ({
6868
bottomPadding = 0,
6969
currentRouteIdx,
7070
handleCautionMarkerClick,
71-
setCautionRouteIdx,
7271
}: MapProps) => {
72+
const buttonStateRef = useRef(buttonState);
73+
74+
// Listener들이 항상 최신 buttonStateRef를 참조하도록 ref 사용
75+
useEffect(() => {
76+
buttonStateRef.current = buttonState;
77+
}, [buttonState]);
78+
7379
const { mapRef, map, AdvancedMarker, Polyline } = useMap();
7480
const { origin, destination } = useRoutePoint();
7581

@@ -201,7 +207,9 @@ const NavigationMap = ({
201207
hasAnimation: true,
202208
});
203209
const originMarker = createAdvancedMarker(AdvancedMarker, map, origin, originMarkerElement);
204-
210+
originMarker.addListener("click", () => {
211+
handleCautionMarkerClick(0);
212+
});
205213
// 도착지 마커
206214
const destinationMarkerElement = createMarkerElement({
207215
type: Markers.DESTINATION,
@@ -210,7 +218,9 @@ const NavigationMap = ({
210218
hasAnimation: true,
211219
});
212220
const destinationMarker = createAdvancedMarker(AdvancedMarker, map, destination, destinationMarkerElement);
213-
221+
destinationMarker.addListener("click", () => {
222+
handleCautionMarkerClick(routeResult[buttonStateRef.current].routeDetails.length);
223+
});
214224
// bounds 업데이트
215225
boundsRef.current?.extend(origin);
216226
boundsRef.current?.extend(destination);
@@ -266,7 +276,6 @@ const NavigationMap = ({
266276

267277
const marker = createAdvancedMarker(AdvancedMarker, map, coordinates, markerElement, () => {
268278
handleCautionMarkerClick(index + 1);
269-
setCautionRouteIdx(index + 1);
270279
});
271280
markers.push(marker);
272281
}

‎uniro_frontend/src/components/map/TopSheet.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import SearchIcon from "../../assets/icon/search.svg?react";
1+
import SearchIcon from "../../assets/icon/search.svg?react";
22
import OriginIcon from "../../assets/map/origin.svg?react";
33
import SwitchIcon from "../../assets/switch.svg?react";
44
import DestinationIcon from "../../assets/map/destination.svg?react";

‎uniro_frontend/src/components/map/mapSearchInput.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export function BuildingInput({ placeholder, children, onClick }: RouteInputProp
2020
<Link
2121
onClick={onClick}
2222
to="/building"
23-
className={`text-start flex-1 text-kor-body2 text-gray-700 font-medium`}
23+
className={`text-start flex-1 text-kor-body2 text-gray-700 font-medium max-sm:text-[12px]`}
2424
>
2525
{placeholder}
2626
</Link>

‎uniro_frontend/src/components/navigation/card/bottomCard.tsx

+8-5
Original file line numberDiff line numberDiff line change
@@ -77,15 +77,18 @@ const BottomCard: React.FC<BottomCardProps> = ({ routeInfo, type, selected, onCl
7777
onClick={onClick}
7878
>
7979
<div className="flex-1 flex-col items-start justify-start">
80-
<div className="flex-1 flex flex-row items-center justify-start text-left">
81-
<div className="flex h-full text-eng-heading1 font-bold font-[SF Pro Display] mr-0.5 pb-1">
80+
<div className="flex-1 flex flex-row max-sm:flex-col max-sm:items-start items-center justify-start text-left">
81+
<div className="flex flex-row items-end h-full text-eng-heading1 font-bold font-[SF Pro Display] mr-0.5 pb-1">
8282
{routeInfo?.totalCost ? Math.floor(routeInfo.totalCost / 60) : "-"}
83+
<span className="items-end h-full text-[16px] -mb-1 font-semibold max-sm:text-[12px] ml-[1px]">
84+
분
85+
</span>
8386
</div>
84-
<div className="flex items-baseline text-kor-heading1 h-full text-[16px] -mb-1 font-semibold">
85-
분<span className="font-normal ml-2 -mb-1">{theme.label}</span>
87+
<div className="flex items-baseline text-kor-heading1 h-full text-[16px] -mb-1 font-semibold max-sm:text-[12px]">
88+
<div className="font-normal ml-[1px] sm:ml-1 sm:-mb-1">{theme.label}</div>
8689
</div>
8790
</div>
88-
<div className="text-left ml-1 mr-0.5 mt-1 text-[14px]">
91+
<div className="text-left ml-[1px] mr-0.5 mt-1 text-[14px]">
8992
{routeInfo?.totalDistance ? formatDistance(routeInfo.totalDistance) : "- m"}
9093
</div>
9194
</div>

‎uniro_frontend/src/components/navigation/navigationDescription.tsx

+56-26
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import Cancel from "../../assets/icon/close.svg?react";
33
import CautionIcon from "../../assets/icon/cautionText.svg?react";
44
import SafeIcon from "../../assets/icon/safeText.svg?react";
55
import DestinationIcon from "../../assets/icon/destination.svg?react";
6+
import DangerIcon from "../../assets/icon/dangerText.svg?react";
67
import OriginIcon from "../../assets/icon/start.svg?react";
78
import ResultDivider from "../../assets/icon/resultDivider.svg?react";
8-
import { NavigationButtonRouteType, NavigationRouteList, NavigationRouteType } from "../../data/types/route";
9+
import { NavigationButtonRouteType, NavigationRouteList } from "../../data/types/route";
910
import useRoutePoint from "../../hooks/useRoutePoint";
1011
import { formatDistance } from "../../utils/navigation/formatDistance";
1112
import { Link } from "react-router";
@@ -23,6 +24,7 @@ type TopBarProps = {
2324
type AnimatedValueProps = {
2425
value: number | string;
2526
className?: string;
27+
children?: React.ReactNode;
2628
};
2729

2830
const createTitle = (buttonType: NavigationButtonRouteType) => {
@@ -31,7 +33,7 @@ const createTitle = (buttonType: NavigationButtonRouteType) => {
3133
if (buttonType.includes("ELECTRIC")) return "전동휠체어 예상소요시간";
3234
};
3335

34-
const AnimatedValue = ({ value, className }: AnimatedValueProps) => {
36+
const AnimatedValue = ({ value, className, children }: AnimatedValueProps) => {
3537
return (
3638
<AnimatePresence mode="wait">
3739
<motion.div
@@ -43,11 +45,24 @@ const AnimatedValue = ({ value, className }: AnimatedValueProps) => {
4345
transition={{ duration: 0.2 }}
4446
>
4547
{value}
48+
{children}
4649
</motion.div>
4750
</AnimatePresence>
4851
);
4952
};
5053

54+
const returnTitleText = (hasCaution: boolean, hasDanger: boolean) => {
55+
if (hasDanger) return "위험";
56+
if (hasCaution) return "주의";
57+
return "안전";
58+
};
59+
60+
const returnIcon = (hasCaution: boolean, hasDanger: boolean) => {
61+
if (hasDanger) return <DangerIcon />;
62+
if (hasCaution) return <CautionIcon />;
63+
return <SafeIcon />;
64+
};
65+
5166
const NavigationDescription = ({ isDetailView, navigationRoute, buttonType, resetCurrentRouteIdx }: TopBarProps) => {
5267
const { origin, destination } = useRoutePoint();
5368

@@ -73,38 +88,53 @@ const NavigationDescription = ({ isDetailView, navigationRoute, buttonType, rese
7388
)}
7489
</div>
7590
<div className="mt-4"></div>
76-
<div className="w-full flex flex-row items-center justify-between space-x-4">
77-
<div className="flex flex-row items-center justify-center">
78-
<AnimatedValue
79-
value={navigationRoute?.totalCost ? Math.floor(navigationRoute.totalCost / 60) : " - "}
80-
className="text-eng-heading1 font-bold font-[SF Pro Display] mr-0.5 pb-1"
81-
/>
91+
<div className="w-full flex flex-row items-center justify-between ml-4">
92+
<div
93+
className={`w-full grid grid-cols-[14.2857%_auto_14.2857%_auto_71.4286%] items-center gap-x-2 ${navigationRoute.totalCost / 60 >= 100 && "max-sm:ml-3"}`}
94+
>
95+
<div className="flex items-center justify-end">
96+
<AnimatedValue
97+
value={navigationRoute?.totalCost ? Math.floor(navigationRoute.totalCost / 60) : " - "}
98+
className={`flex flex-row text-eng-heading1 font-bold font-[SF Pro Display] mr-0.5 pb-1 gap-1 justify-end items-end ${navigationRoute.totalCost / 60 >= 100 && "text-[28px] ml-1"}`}
99+
>
100+
<div className="flex items-baseline text-kor-heading1 h-full text-[16px] -mb-1 text-right">
101+
분
102+
</div>
103+
</AnimatedValue>
104+
</div>
82105

83-
<div className="flex items-baseline text-kor-heading1 h-full text-[16px] -mb-1">분</div>
84-
</div>
85-
<div className="h-[11px] border-[0.5px] border-gray-600" />
86-
<div className="flex flex-row items-center justify-center truncate">
87-
<AnimatedValue
88-
value={navigationRoute?.totalDistance ? formatDistance(navigationRoute.totalDistance) : " - m "}
89-
/>
90-
</div>
91-
<div className="h-[11px] border-[0.5px] border-gray-600" />
92-
<div className="flex flex-1 flex-row items-center justify-start ">
93-
{navigationRoute ? navigationRoute.hasCaution ? <CautionIcon /> : <SafeIcon /> : null}
94-
<span className="ml-1 text-kor-body3 text-gray-700">
95-
{navigationRoute
96-
? `가는 길에 주의 요소가 ${navigationRoute?.hasCaution ? "있어요" : "없어요"}`
97-
: " 배리어프리 경로가 존재하지 않습니다. "}
98-
</span>
106+
<div className="h-[11px] border-[0.5px] border-gray-600" />
107+
108+
<div className="flex items-center justify-center truncate">
109+
<AnimatedValue
110+
className="text-kor-body3 text-gray-700"
111+
value={
112+
navigationRoute?.totalDistance ? formatDistance(navigationRoute.totalDistance) : " - m "
113+
}
114+
/>
115+
</div>
116+
117+
<div className="h-[11px] border-[0.5px] border-gray-600" />
118+
119+
<div className="flex items-center justify-start">
120+
{returnIcon(navigationRoute.hasCaution, navigationRoute.hasDanger)}
121+
<span className="ml-1 text-kor-body3 text-gray-700 max-sm:text-xs">
122+
{navigationRoute
123+
? `가는 길에 ${returnTitleText(navigationRoute.hasCaution, navigationRoute.hasDanger)} 요소가 ${
124+
navigationRoute.hasCaution || navigationRoute.hasDanger ? "있어요" : "없어요"
125+
}`
126+
: " 배리어프리 경로가 존재하지 않습니다."}
127+
</span>
128+
</div>
99129
</div>
100130
</div>
101131
<div className="w-full flex flex-row items-center justify-between mt-4">
102-
<div className="flex-1 flex flex-row items-start justify-start">
132+
<div className="flex-1 flex flex-row items-center justify-start">
103133
<OriginIcon />
104134
<span className="">{origin?.buildingName}</span>
105135
</div>
106136
<ResultDivider />
107-
<div className="flex-1 flex flex-row items-start justify-start">
137+
<div className="flex-1 flex flex-row items-center justify-start">
108138
<DestinationIcon />
109139
<span>{destination?.buildingName}</span>
110140
</div>

0 commit comments

Comments
 (0)