From 0ff6423290f6193b8a46bbd20767f19612d29d40 Mon Sep 17 00:00:00 2001 From: kimtaewoo <70637743+kim3360@users.noreply.github.com> Date: Tue, 17 Feb 2026 20:02:25 +0900 Subject: [PATCH 1/2] =?UTF-8?q?fix=20:=20=EC=A4=91=EA=B0=84=EC=A7=80?= =?UTF-8?q?=EC=A0=90=20UI=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/result/[id]/page.tsx | 192 +++++++++++++++++++++++++-------------- 1 file changed, 125 insertions(+), 67 deletions(-) diff --git a/app/result/[id]/page.tsx b/app/result/[id]/page.tsx index 5d50311..ad6b7b4 100644 --- a/app/result/[id]/page.tsx +++ b/app/result/[id]/page.tsx @@ -44,6 +44,10 @@ export default function Page() { const myRoute = routesWithColor.find((route) => route.nickname === myNickname); const travelTime = myRoute?.travelTime || 0; + + + const totalTravelTime = routesWithColor.reduce((sum, route) => sum + (route.travelTime || 0), 0); + const averageTravelTime = routesWithColor.length > 0 ? Math.round(totalTravelTime / routesWithColor.length) : 0; const extractLineNumber = (linenumber: string): string => { if (!linenumber) return ''; @@ -96,12 +100,19 @@ export default function Page() { latitude: midpoint.latitude, longitude: midpoint.longitude, travelTime, + averageTravelTime, transferPath: myRoute?.transferPath || [], transferPathLines, userRoutes: routesWithColor, }; }); }, [midpointData, myNickname, id]); + + // 카테고리 텍스트 생성 함수 + const getCategoryText = (category: string | undefined): string => { + if (!category) return '장소가 가장 많은 곳'; + return `${category}이 가장 많은 곳`; + }; const [selectedResultId, setSelectedResultId] = useState(1); @@ -184,8 +195,15 @@ export default function Page() {
+
- 최종 위치 결과 Top 3 + 최종 위치 결과 Top3
) : ( - locationResults.map((result) => ( -
setSelectedResultId(result.id)} - className={`flex cursor-pointer flex-col gap-3.75 rounded border bg-white p-5 ${ - selectedResultId === result.id - ? 'border-blue-5 border-2' - : 'border-gray-2 hover:bg-gray-1' - }`} - > -
- - {result.endStation}역 - - - 이동시간 - - {result.travelTime}분 + locationResults.map((result) => { + const category = meetingData?.data?.purposes?.[meetingData.data.purposes.length - 1]; + const categoryText = getCategoryText(category); + + const handleRecommendClick = (e: React.MouseEvent) => { + e.stopPropagation(); + if (!id || !result.endStation) return; + + let meetingType = ''; + let categoryParam = ''; + + if (typeof window !== 'undefined') { + meetingType = localStorage.getItem(`meeting_${id}_meetingType`) || ''; + categoryParam = localStorage.getItem(`meeting_${id}_category`) || ''; + } + + if (!meetingType && meetingData?.data?.purposes && meetingData.data.purposes.length > 0) { + meetingType = meetingData.data.purposes[0]; + } + if (!categoryParam && category) { + categoryParam = category; + } + + const params = new URLSearchParams({ + meetingId: id, + midPlace: result.endStation, + lat: result.latitude.toString(), + lng: result.longitude.toString(), + }); + + if (meetingType) params.append('meetingType', meetingType); + if (categoryParam) params.append('category', categoryParam); + + router.push(`/recommend?${params.toString()}`); + }; + + return ( +
setSelectedResultId(result.id)} + className={`flex cursor-pointer flex-col gap-3.75 rounded-[4px] border bg-white p-5 ${ + selectedResultId === result.id + ? 'border-blue-5 border-2' + : 'border-gray-2 hover:bg-gray-1' + }`} + > + {/* 상단: 카테고리 텍스트 */} +
+ + + + {categoryText} +
+ + {/* 중간: 역 이름과 평균 이동시간 */} +
+ + {result.endStation}역 - -
- -
- 내 환승경로 -
-
- {result.transferPathLines.map( - (line: { display: string; text: string }, idx: number) => ( -
- - {line.display} +
+ + 평균 이동시간{' '} + + {result.averageTravelTime}분 - - {line.text} - - {idx < result.transferPathLines.length - 1 && ( - 화살표 - )} -
- ) - )} + + +
+
+ + {/* 하단: 두 개의 버튼 */} +
+ + +
- - -
- )) + ); + }) )}
From d28ef6b7cb7fc11b3ff5823cbbba770da289901d Mon Sep 17 00:00:00 2001 From: kimtaewoo <70637743+kim3360@users.noreply.github.com> Date: Wed, 18 Feb 2026 18:32:26 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix=20:=20=EA=B2=B0=EA=B3=BC=EB=B3=B4?= =?UTF-8?q?=EA=B8=B0=20&=20=ED=99=98=EC=8A=B9=20=EA=B2=BD=EB=A1=9C=20UI=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/result/[id]/page.tsx | 23 ++--- components/map/kakaoMapLine.tsx | 10 +- components/modal/transferModal.tsx | 150 +++++++++++++++++------------ public/icon/down.svg | 3 + public/icon/stars.svg | 6 ++ public/icon/train.svg | 3 + 6 files changed, 105 insertions(+), 90 deletions(-) create mode 100644 public/icon/down.svg create mode 100644 public/icon/stars.svg create mode 100644 public/icon/train.svg diff --git a/app/result/[id]/page.tsx b/app/result/[id]/page.tsx index ad6b7b4..cf34641 100644 --- a/app/result/[id]/page.tsx +++ b/app/result/[id]/page.tsx @@ -110,8 +110,8 @@ export default function Page() { // 카테고리 텍스트 생성 함수 const getCategoryText = (category: string | undefined): string => { - if (!category) return '장소가 가장 많은 곳'; - return `${category}이 가장 많은 곳`; + if (!category) return '밍글링 추천 1위'; + return `${category}이 많은 장소`; }; const [selectedResultId, setSelectedResultId] = useState(1); @@ -293,24 +293,13 @@ export default function Page() { : 'border-gray-2 hover:bg-gray-1' }`} > - {/* 상단: 카테고리 텍스트 */} +
- - - + stars {categoryText}
- {/* 중간: 역 이름과 평균 이동시간 */} +
{result.endStation}역 @@ -326,7 +315,7 @@ export default function Page() {
- {/* 하단: 두 개의 버튼 */} +
-
- + ); diff --git a/components/modal/transferModal.tsx b/components/modal/transferModal.tsx index 26ce2c9..dcda8ad 100644 --- a/components/modal/transferModal.tsx +++ b/components/modal/transferModal.tsx @@ -116,25 +116,44 @@ export default function TransferModal({ } }; - // transferPath에서 호선과 환승역 추출 함수 - const extractTransferLines = ( - route: UserRoute - ): Array<{ linenumber: string; station: string }> => { - const lines: Array<{ linenumber: string; station: string }> = []; - - // transferPath의 모든 항목에서 호선과 환승역 추출 - if (route.transferPath && Array.isArray(route.transferPath)) { - route.transferPath.forEach((path) => { - if (path.linenumber) { - lines.push({ - linenumber: path.linenumber, - station: path.station || '', + // 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 lines; + return steps; }; return ( @@ -145,78 +164,81 @@ export default function TransferModal({ > {/* 헤더 영역 */} - + 모임원 환승경로 보기 - + {endStation ? `${endStation}역 도착` : '도착역'} - {/* 리스트 영역 (스크롤) */} -
+ +
{userRoutes.length === 0 ? (
환승 경로 정보가 없습니다.
) : ( userRoutes.map((route, index) => { - const transferLines = extractTransferLines(route); + const routeSteps = extractRouteSteps(route); return (
- {/* 상단: 이름 및 출발역 */} -
- {route.nickname} - - {route.startStation} + +
+ + {route.nickname} +
+ + 이동시간 + + + {route.travelTime}분 + +
- {/* 하단: 호선 정보 및 시간 */} -
- {/* 호선 뱃지 */} -
- {transferLines.length === 0 ? ( - 환승 경로 없음 - ) : ( - transferLines.map((lineInfo, idx) => ( -
-
- - {lineInfo.station}({lineInfo.linenumber}) - - {/* 화살표 아이콘 (마지막 요소 제외) */} - {idx < transferLines.length - 1 && ( - - 오른쪽 화살표 - - )} -
+ + + {/* 하단: 환승 경로 (세로 배치) */} +
+
+ {routeSteps.map((step, idx) => ( +
+
+ train + {step.linenumber} +
+ +
+ arrow-down
- )) - )} +
+ ))} + +
+ 하차 +
- {/* 이동 시간 */} - - 이동시간 - - {route.travelTime}분 - - + +
+ {routeSteps.map((step, idx) => ( + {step.station}역 + ))} + + {endStation || routeSteps[routeSteps.length - 1]?.station}역 +
+ +
); diff --git a/public/icon/down.svg b/public/icon/down.svg new file mode 100644 index 0000000..0b41c24 --- /dev/null +++ b/public/icon/down.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icon/stars.svg b/public/icon/stars.svg new file mode 100644 index 0000000..c465644 --- /dev/null +++ b/public/icon/stars.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/icon/train.svg b/public/icon/train.svg new file mode 100644 index 0000000..34e7b39 --- /dev/null +++ b/public/icon/train.svg @@ -0,0 +1,3 @@ + + +