Skip to content

Commit 9468c4c

Browse files
dgfh0450dgfh0450
authored
[UNI-212] feat : 위험 주의 마커 요소 여러개인 경우 애니메이션 추가가 (#116)
1 parent 033464c commit 9468c4c

File tree

3 files changed

+97
-24
lines changed

3 files changed

+97
-24
lines changed

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

+68-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Markers } from "../../constant/enum/markerEnum";
22
import { MarkerTypes } from "../../data/types/enum";
3+
import { animate } from "framer-motion";
34

45
const markerImages = import.meta.glob("/src/assets/markers/*.svg", { eager: true });
56

@@ -37,6 +38,70 @@ function createTextElement(type: MarkerTypes, title: string): HTMLElement {
3738
}
3839
}
3940

41+
function createAnimatedTextElement(type: MarkerTypes, titles: string[]): HTMLElement {
42+
const titleContainer = document.createElement("div");
43+
44+
const elements = [];
45+
46+
const _title = [...titles, titles[0]];
47+
48+
for (const title of _title) {
49+
const factorTitle = document.createElement("p");
50+
factorTitle.innerText = title;
51+
factorTitle.className = "block w-[128px] h-[22px] mb-4";
52+
53+
titleContainer.appendChild(factorTitle);
54+
elements.push(factorTitle);
55+
}
56+
57+
switch (type) {
58+
case Markers.CAUTION:
59+
titleContainer.className =
60+
"overflow-hidden w-[160px] h-[38px] py-2 px-4 mb-2 text-kor-body3 font-semibold text-gray-100 bg-system-orange text-center rounded-200";
61+
break;
62+
case Markers.DANGER:
63+
titleContainer.className =
64+
"overflow-hidden w-[160px] h-[38px] py-2 px-4 mb-2 text-kor-body3 font-semibold text-gray-100 bg-system-red text-center rounded-200";
65+
break;
66+
default:
67+
break;
68+
}
69+
70+
const len = _title.length;
71+
72+
if (len >= 3) {
73+
for (let i = 1; i < len; i++) {
74+
elements.forEach((el, index) => {
75+
setTimeout(() => {
76+
animate(
77+
el,
78+
{
79+
y: [-38 * (i - 1), -38 * i],
80+
},
81+
{
82+
duration: 0.5,
83+
},
84+
);
85+
86+
if (i === len - 1) {
87+
setTimeout(() => {
88+
animate(
89+
el,
90+
{
91+
y: [-38 * (len - 1), 0],
92+
},
93+
{ duration: 0 },
94+
);
95+
}, 1000);
96+
}
97+
}, 1000 * i);
98+
});
99+
}
100+
}
101+
102+
return titleContainer;
103+
}
104+
40105
function getImage(type: MarkerTypes): string {
41106
return (markerImages[`/src/assets/markers/${type}.svg`] as { default: string })?.default;
42107
}
@@ -99,7 +164,7 @@ export default function createMarkerElement({
99164
}: {
100165
type: MarkerTypes;
101166
className?: string;
102-
title?: string;
167+
title?: string | string[];
103168
hasTopContent?: boolean;
104169
hasAnimation?: boolean;
105170
number?: number;
@@ -113,13 +178,14 @@ export default function createMarkerElement({
113178
const markerImage = createImageElement(type);
114179

115180
if (title) {
116-
const markerTitle = createTextElement(type, title);
117181
if (hasTopContent) {
182+
const markerTitle = createAnimatedTextElement(type, title as string[]);
118183
container.appendChild(markerTitle);
119184
container.appendChild(markerImage);
120185
return attachAnimation(container, hasAnimation);
121186
}
122187

188+
const markerTitle = createTextElement(type, title as string);
123189
container.appendChild(markerImage);
124190
container.appendChild(markerTitle);
125191
return attachAnimation(container, hasAnimation);

‎uniro_frontend/src/pages/map.tsx

+27-18
Original file line numberDiff line numberDiff line change
@@ -76,28 +76,39 @@ export default function MapPage() {
7676
const navigate = useNavigate();
7777
if (!university) return;
7878

79-
const [FailModal, { status, data, refetch: findFastRoute }] = useQueryError({
80-
queryKey: ['fastRoute', university.id, origin?.nodeId, destination?.nodeId],
81-
queryFn: () => getNavigationResult(university.id, origin ? origin?.nodeId : -1, destination ? destination?.nodeId : -1),
82-
enabled: false,
83-
retry: 0,
84-
},
79+
const [FailModal, { status, data, refetch: findFastRoute }] = useQueryError(
80+
{
81+
queryKey: ["fastRoute", university.id, origin?.nodeId, destination?.nodeId],
82+
queryFn: () =>
83+
getNavigationResult(
84+
university.id,
85+
origin ? origin?.nodeId : -1,
86+
destination ? destination?.nodeId : -1,
87+
),
88+
enabled: false,
89+
retry: 0,
90+
},
8591
undefined,
86-
() => { navigate('/result') },
92+
() => {
93+
navigate("/result");
94+
},
8795
{
8896
fallback: {
8997
400: {
90-
mainTitle: "잘못된 요청입니다.", subTitle: ["새로고침 후 다시 시도 부탁드립니다."]
98+
mainTitle: "잘못된 요청입니다.",
99+
subTitle: ["새로고침 후 다시 시도 부탁드립니다."],
91100
},
92101
404: {
93-
mainTitle: "해당 경로를 찾을 수 없습니다.", subTitle: ["해당 건물이 길이랑 연결되지 않았습니다."]
102+
mainTitle: "해당 경로를 찾을 수 없습니다.",
103+
subTitle: ["해당 건물이 길이랑 연결되지 않았습니다."],
94104
},
95105
422: {
96-
mainTitle: "해당 경로를 찾을 수 없습니다.", subTitle: ["위험 요소 버튼을 클릭하여,", "통행할 수 없는 원인을 파악하실 수 있습니다."]
97-
}
98-
}
99-
}
100-
)
106+
mainTitle: "해당 경로를 찾을 수 없습니다.",
107+
subTitle: ["위험 요소 버튼을 클릭하여,", "통행할 수 없는 원인을 파악하실 수 있습니다."],
108+
},
109+
},
110+
},
111+
);
101112

102113
const results = useSuspenseQueries({
103114
queries: [
@@ -383,17 +394,15 @@ export default function MapPage() {
383394
} else {
384395
if (isSelect) {
385396
if (marker.type === Markers.DANGER) {
386-
const key = marker.factors && (marker.factors[0] as DangerIssueType);
387397
marker.element.content = createMarkerElement({
388398
type: marker.type,
389-
title: key && DangerIssue[key],
399+
title: (marker.factors as DangerIssueType[]).map((key) => DangerIssue[key]),
390400
hasTopContent: true,
391401
});
392402
} else if (marker.type === Markers.CAUTION) {
393-
const key = marker.factors && (marker.factors[0] as CautionIssueType);
394403
marker.element.content = createMarkerElement({
395404
type: marker.type,
396-
title: key && CautionIssue[key],
405+
title: (marker.factors as CautionIssueType[]).map((key) => CautionIssue[key]),
397406
hasTopContent: true,
398407
});
399408
}

‎uniro_frontend/src/pages/reportRisk.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -233,17 +233,15 @@ export default function ReportRiskPage() {
233233

234234
if (isSelect) {
235235
if (marker.type === Markers.DANGER) {
236-
const key = marker.factors && (marker.factors[0] as DangerIssueType);
237236
marker.element.content = createMarkerElement({
238237
type: marker.type,
239-
title: key && DangerIssue[key],
238+
title: (marker.factors as DangerIssueType[]).map((key) => DangerIssue[key]),
240239
hasTopContent: true,
241240
});
242241
} else if (marker.type === Markers.CAUTION) {
243-
const key = marker.factors && (marker.factors[0] as CautionIssueType);
244242
marker.element.content = createMarkerElement({
245243
type: marker.type,
246-
title: key && CautionIssue[key],
244+
title: (marker.factors as CautionIssueType[]).map((key) => CautionIssue[key]),
247245
hasTopContent: true,
248246
});
249247
}

0 commit comments

Comments
 (0)