diff --git a/app/result/[id]/page.tsx b/app/result/[id]/page.tsx index 0cf2001..e3ce303 100644 --- a/app/result/[id]/page.tsx +++ b/app/result/[id]/page.tsx @@ -33,7 +33,7 @@ export default function Page() { } return midpointData.data.map((midpoint, index) => { - const { endStation, endStationLine, userRoutes } = midpoint; + const { endStation, endStationLine, userRoutes, hot } = midpoint; const routesWithColor = userRoutes.map((route) => { return { @@ -107,18 +107,52 @@ export default function Page() { transferPath: myRoute?.transferPath || [], transferPathLines, userRoutes: routesWithColor, + hot, }; }); }, [midpointData, myNickname, id]); // 카테고리 텍스트 생성 함수 - const getCategoryText = (category: string | undefined): string => { - if (!category) return '밍글링 추천 1위'; + const getCategoryText = ( + category: string | undefined, + hot: boolean | undefined, + rank: number, + ): string => { + const purposeText = '[모임 목적]'; + const lastChar = purposeText.charCodeAt(purposeText.length - 1); + const hasJongseong = (lastChar - 0xac00) % 28 !== 0; + const purposeTextWithPostfix = `${purposeText}${hasJongseong ? '이' : '가'} 많은 장소`; + + + if (hot === true && rank === 1) { + return `밍글링 추천 1위 · ${purposeTextWithPostfix}`; + } + + + else if (hot === true && rank === 2) { + return `밍글링 추천 2위 · ${purposeTextWithPostfix}`; + } + + + else if (hot === true) { + return purposeTextWithPostfix; + } + + + else if (rank === 1) { + return '밍글링 추천 1위'; + } + + else if (rank === 2) { + return '밍글링 추천 2위'; + } + + else if (!category) return '밍글링 추천 1위'; // 카테고리 종성에 따라 "이/가"를 다르게 렌더링 - const lastChar = category.charCodeAt(category.length - 1); - const hasJongseong = (lastChar - 0xac00) % 28 !== 0; - return `${category}${hasJongseong ? '이' : '가'} 많은 장소`; + const categoryLastChar = category.charCodeAt(category.length - 1); + const categoryHasJongseong = (categoryLastChar - 0xac00) % 28 !== 0; + return `${category}${categoryHasJongseong ? '이' : '가'} 많은 장소`; }; const [selectedResultId, setSelectedResultId] = useState(1); @@ -151,7 +185,7 @@ export default function Page() { <>
-
+
- +
@@ -207,7 +234,7 @@ export default function Page() { locationResults.map((result) => { const category = meetingData?.data?.purposes?.[meetingData.data.purposes.length - 1]; - const categoryText = getCategoryText(category); + const categoryText = getCategoryText(category, result.hot, result.id); const handleRecommendClick = (e: React.MouseEvent) => { e.stopPropagation(); @@ -309,12 +336,13 @@ export default function Page() { )} - +
diff --git a/components/modal/transferModal.tsx b/components/modal/transferModal.tsx index f6c798a..4bc9d7b 100644 --- a/components/modal/transferModal.tsx +++ b/components/modal/transferModal.tsx @@ -116,43 +116,6 @@ export default function TransferModal({ } }; - // stations 배열에서 호선별 경로 추출 함수 - const extractRouteSteps = (route: UserRoute) => { - const steps: Array<{ linenumber: string; station: string; isLast: boolean }> = []; - - if (!route.stations || route.stations.length === 0) { - return steps; - } - - let currentLine = route.stations[0]?.linenumber || ''; - - route.stations.forEach((station, index) => { - if (station.linenumber !== currentLine || index === route.stations.length - 1) { - if (currentLine) { - steps.push({ - linenumber: currentLine, - station: station.station, - isLast: index === route.stations.length - 1, - }); - } - currentLine = station.linenumber; - } - }); - - if (route.stations.length > 0) { - const lastStation = route.stations[route.stations.length - 1]; - if (steps.length === 0 || steps[steps.length - 1].station !== lastStation.station) { - steps.push({ - linenumber: lastStation.linenumber, - station: lastStation.station, - isLast: true, - }); - } - } - - return steps; - }; - return ( !open && onClose()}> ) : ( userRoutes.map((route, index) => { - const routeSteps = extractRouteSteps(route); - return (
- {routeSteps.map((step, idx) => ( -
-
- train - {step.linenumber} -
+ +
+
+ train + {route.startStationLine} +
+ {route.transferPath && route.transferPath.length > 0 && (
arrow-down
-
- ))} + )} +
-
- 하차 + + {route.transferPath && + route.transferPath.map((transfer, idx) => ( +
+
+ train + {transfer.linenumber} +
+ + {idx < route.transferPath.length - 1 && ( +
+ arrow-down +
+ )} +
+ ))} + + +
+
+ arrow-down +
+
+ 하차 +
- {routeSteps.map((step, idx) => ( - {step.station}역 - ))} + + {route.startStation}역 + + + {route.transferPath && + route.transferPath.map((transfer, idx) => ( + {transfer.station}역 + ))} - {endStation || routeSteps[routeSteps.length - 1]?.station}역 + {/* 종료역 */} + {endStation}역
diff --git a/public/icon/share-white.svg b/public/icon/share-white.svg new file mode 100644 index 0000000..607b4f7 --- /dev/null +++ b/public/icon/share-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/types/api.ts b/types/api.ts index 9cfd103..8cb0264 100644 --- a/types/api.ts +++ b/types/api.ts @@ -70,6 +70,7 @@ export type MeetingStatusResponse = ApiResponse; export interface MidpointData { endStation: string; endStationLine: string; + hot: boolean; latitude: number; longitude: number; userRoutes: {