diff --git a/app/layout.tsx b/app/layout.tsx index b0bdf7e..8cfc97c 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -25,9 +25,9 @@ const pretendard = localFont({ export const metadata: Metadata = { metadataBase: new URL(process.env.NEXT_PUBLIC_BASE_URL || 'https://www.mingling.kr'), - title: '밍글링 - 어디서 만날지, 고민 시간을 줄여드려요', + title: '밍글링 - 중간 위치로 만날 곳 정하기', description: - '퇴근 후 모임, 주말 약속까지. 서울 어디서든 모두가 비슷하게 도착하는 마법의 장소를 찾아드려요.', + '퇴근 후 모임, 주말 약속까지! 서울 어디서든 모두가 비슷하게 도착하는 마법의 장소를 찾아드려요.', }; export default function RootLayout({ diff --git a/app/recommend/page.tsx b/app/recommend/page.tsx index 7b5d3de..9544c8a 100644 --- a/app/recommend/page.tsx +++ b/app/recommend/page.tsx @@ -1,7 +1,7 @@ 'use client'; import { useState, useMemo, Suspense } from 'react'; -import { useRouter, useSearchParams } from 'next/navigation'; +import { useRouter, useSearchParams } from 'next/navigation'; import Image from 'next/image'; import KakaoMapRecommend from '@/components/map/kakaoMapRecommend'; import { useRecommend } from '@/hooks/api/query/useRecommend'; @@ -9,7 +9,7 @@ import { useRecommend } from '@/hooks/api/query/useRecommend'; function RecommendContent() { const router = useRouter(); const searchParams = useSearchParams(); - const meetingId = searchParams.get('meetingId') || ''; + const meetingId = searchParams.get(`meetingId`) || ''; const midPlace = searchParams.get('midPlace') || ''; const lat = searchParams.get('lat'); const lng = searchParams.get('lng'); @@ -21,23 +21,25 @@ function RecommendContent() { // 현재 선택된 장소 ID (기본값: 첫 번째) const [selectedPlaceId, setSelectedPlaceId] = useState(1); - // 선택된 카테고리 (기본값: localStorage의 meetingCategory) - const [selectedCategory, setSelectedCategory] = useState(() => { + // 모임 카테고리 가져오기 (localStorage에서 캐싱된 값 사용) + const meetingCategory = useMemo(() => { const cachedCategory = localStorage.getItem(`meeting_${meetingId}_category`); - return cachedCategory || ''; - }); + if (cachedCategory) { + return cachedCategory; + } - // 카테고리 변경 핸들러 - const handleCategoryChange = (category: string) => { - setSelectedCategory(category); - setSelectedPlaceId(1); // 카테고리 변경 시 첫 번째 장소 선택 - }; + return ''; + }, [meetingId]); // 장소 추천 API 호출 - const { data: recommendData, isLoading, isError } = useRecommend({ + const { + data: recommendData, + isLoading, + isError, + } = useRecommend({ meetingId, midPlace, - category: selectedCategory, + category: meetingCategory, page: 1, size: 15, }); @@ -61,7 +63,6 @@ function RecommendContent() { })); }, [recommendData]); - const handleBack = () => { router.back(); }; @@ -89,7 +90,7 @@ function RecommendContent() { {/* 모바일 전용 지도 (작게 표시) */} -
+
@@ -118,64 +117,68 @@ function RecommendContent() { ) : (
{places.map((place) => ( -
setSelectedPlaceId(place.id)} - className={`flex cursor-pointer flex-col gap-2 rounded border p-4 ${ - selectedPlaceId === place.id - ? 'border-blue-5 border-2' // 선택 시 파란 테두리 - : 'border-gray-2 hover:bg-gray-1 bg-white' - }`} - > - {/* 상단: 이름 및 카테고리 */} -
-
- {place.name} - - {place.category} - +
setSelectedPlaceId(place.id)} + className={`flex cursor-pointer flex-col gap-2 rounded border p-4 ${ + selectedPlaceId === place.id + ? 'border-blue-5 border-2' // 선택 시 파란 테두리 + : 'border-gray-2 hover:bg-gray-1 bg-white' + }`} + > + {/* 상단: 이름 및 카테고리 */} +
+
+ + {place.name} + + + {place.category} + +
+ {/* 공유 아이콘 (이미지에 살짝 보임) */} +
- {/* 공유 아이콘 (이미지에 살짝 보임) */} - -
- {/* 설명 */} -

{place.description}

+ {/* 설명 */} +

{place.description}

- {/* 전화번호 */} -
- 전화 - {place.phone} -
- - {/* 주소 정보 */} -
-
- - 지번 - - {place.address} + {/* 전화번호 */} +
+ 전화 + {place.phone}
-
- - 도로명 - - {place.roadAddress} + + {/* 주소 정보 */} +
+
+ + 지번 + + {place.address} +
+
+ + 도로명 + + + {place.roadAddress} + +
-
- {/* 하단 버튼은 조건부 렌더링 */} - {selectedPlaceId === place.id ? ( - - ) : null} -
+ {/* 하단 버튼은 조건부 렌더링 */} + {selectedPlaceId === place.id ? ( + + ) : null} +
))}
)} @@ -192,8 +195,6 @@ function RecommendContent() { places={places} selectedPlaceId={selectedPlaceId} onSelectPlace={setSelectedPlaceId} - selectedCategory={selectedCategory} - onCategoryChange={setSelectedCategory} />
diff --git a/app/result/[id]/page.tsx b/app/result/[id]/page.tsx index 97d284d..4ae3416 100644 --- a/app/result/[id]/page.tsx +++ b/app/result/[id]/page.tsx @@ -29,21 +29,19 @@ export default function Page() { return midpointData.data.map((midpoint, index) => { const { endStation, endStationLine, userRoutes } = midpoint; - const myRoute = userRoutes.find((route) => route.nickname === myNickname); - - const travelTime = myRoute?.travelTime + const travelTime = myRoute?.travelTime || 0; // 기본값 0 설정 // 호선 번호 추출 함수 (숫자가 있으면 숫자만, 없으면 앞 글자만) const extractLineNumber = (linenumber: string): string => { if (!linenumber) return ''; - + // "호선" 제거 const cleaned = linenumber.replace('호선', '').trim(); - + // 숫자가 있는지 확인 const hasNumber = /\d/.test(cleaned); - + if (hasNumber) { // 숫자만 추출 (예: "4호선" → "4") return cleaned.replace(/\D/g, ''); @@ -53,10 +51,13 @@ export default function Page() { } }; - const transferPathLines: Array<{ display: string; text: string }> = []; - - if (myRoute?.transferPath && Array.isArray(myRoute.transferPath) && myRoute.transferPath.length > 0) { + + if ( + myRoute?.transferPath && + Array.isArray(myRoute.transferPath) && + myRoute.transferPath.length > 0 + ) { for (const path of myRoute.transferPath) { if (path?.linenumber) { const lineNumber = extractLineNumber(path.linenumber); @@ -69,8 +70,7 @@ export default function Page() { } } } - - + if (endStationLine) { const endLineNumber = extractLineNumber(endStationLine); if (endLineNumber) { @@ -94,12 +94,11 @@ export default function Page() { travelTime, transferPath: myRoute?.transferPath || [], transferPathLines, - userRoutes, + userRoutes, }; }); }, [midpointData, myNickname]); - const [selectedResultId, setSelectedResultId] = useState(1); const handleModifyStart = () => { @@ -108,7 +107,7 @@ export default function Page() { const getLineColor = (fullLineName: string) => { const cleaned = fullLineName.replace('호선', '').trim(); - + // 숫자 호선 처리 (1~9) if (/^\d+$/.test(cleaned)) { switch (cleaned) { @@ -134,7 +133,7 @@ export default function Page() { return 'bg-gray-400'; } } - + // 전체 호선명으로 처리 (앞 글자가 겹치는 경우 구분) switch (fullLineName) { // 수도권 도시철도(경전철) @@ -200,21 +199,23 @@ export default function Page() {
{/* 모바일 전용 지도 영역 */} - {locationResults.length > 0 && (() => { - const selectedResult = locationResults.find((r) => r.id === selectedResultId) || locationResults[0]; - return ( - - ); - })()} + {locationResults.length > 0 && + (() => { + const selectedResult = + locationResults.find((r) => r.id === selectedResultId) || locationResults[0]; + return ( + + ); + })()} {/* 결과 리스트 & 하단 버튼 */}
@@ -244,7 +245,9 @@ export default function Page() { > {/* 카드 헤더: 역 이름 & 시간 */}
- {result.endStation} + + {result.endStation}역 + 이동시간 @@ -256,9 +259,10 @@ export default function Page() { {/* 환승 경로 (호선 아이콘) */}
내 환승경로 -
-
- {result.transferPathLines.map((line: { display: string; text: string }, idx: number) => ( +
+
+ {result.transferPathLines.map( + (line: { display: string; text: string }, idx: number) => (
{/* 호선 원형 아이콘 */} )}
- ))} -
- + ) + )} +
{/* 모임원 경로 보기 버튼 (카드 내부) */}
diff --git a/components/footer.tsx b/components/footer.tsx index f467239..a881140 100644 --- a/components/footer.tsx +++ b/components/footer.tsx @@ -4,7 +4,7 @@ import Link from 'next/link'; import Image from 'next/image'; import { useOpenModal } from '@/hooks/useOpenModal'; -const ICON = ['threads', 'instagram']; +// const ICON = ['threads', 'instagram']; const Footer = () => { const openModal = useOpenModal(); @@ -16,12 +16,20 @@ const Footer = () => {