Skip to content

feat : 결과보기 & 환승 경로 UI 수정 #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kangdy25 merged 2 commits into from
Feb 18, 2026
Merged

feat : 결과보기 & 환승 경로 UI 수정 #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0ff6423
fix : 중간지점 UI 수정
kim3360 Feb 17, 2026
d28ef6b
fix : 결과보기 & 환승 경로 UI 수정
kim3360 Feb 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
181 changes: 114 additions & 67 deletions app/result/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,10 @@

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 '';
Expand Down Expand Up @@ -96,12 +100,19 @@
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 '밍글링 추천 1위';
return `${category}이 많은 장소`;
};
Comment on lines +111 to +115
Copy link

@coderabbitai coderabbitai bot Feb 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

getCategoryText에서 한국어 조사 처리가 누락되었습니다.

"${category}이 많은 장소"는 카테고리가 받침으로 끝나는 경우(예: "식당이")에는 맞지만, 받침이 없는 경우(예: "카페")에는 "카페가 많은 장소"가 자연스럽습니다. 조사 "이/가"를 받침 유무에 따라 분기해야 합니다.

♻️ 조사 처리 제안 
  const getCategoryText = (category: string | undefined): string => {
    if (!category) return '밍글링 추천 1위';
-   return `${category}이 많은 장소`;
+   const lastChar = category.charCodeAt(category.length - 1);
+   const hasJongseong = (lastChar - 0xAC00) % 28 !== 0;
+   return `${category}${hasJongseong ? '이' : '가'} 많은 장소`;
  };
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// 카테고리 텍스트 생성 함수
const getCategoryText = (category: string | undefined): string => {
if (!category) return '밍글링 추천 1위';
return `${category}이 많은 장소`;
};
// 카테고리 텍스트 생성 함수
const getCategoryText = (category: string | undefined): string => {
if (!category) return '밍글링 추천 1위';
const lastChar = category.charCodeAt(category.length - 1);
const hasJongseong = (lastChar - 0xAC00) % 28 !== 0;
return `${category}${hasJongseong ? '이' : '가'} 많은 장소`;
};
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/result/`[id]/page.tsx around lines 111 - 115, getCategoryText currently
always appends "이" and ignores Korean particle rules; update getCategoryText to
detect whether the last hangul syllable of category has a jongseong (final
consonant) and choose "이" when there is a jongseong or "가" when there is none,
then return `${category}${particle} 많은 장소`; preserve the undefined case
returning '밍글링 추천 1위' and implement the detection using Unicode Hangul syllable
arithmetic ((char.codePointAt - 0xAC00) % 28) on the final character in the
string.


const [selectedResultId, setSelectedResultId] = useState<number>(1);

Expand All @@ -111,7 +122,7 @@
router.back();
};

const getLineColor = (fullLineName: string) => {

Check warning on line 125 in app/result/[id]/page.tsx

View workflow job for this annotation

GitHub Actions / build 

'getLineColor' is assigned a value but never used

Check warning on line 125 in app/result/[id]/page.tsx

View workflow job for this annotation

GitHub Actions / build 

'getLineColor' is assigned a value but never used
const cleaned = fullLineName.replace('호선', '').trim();
if (/^\d+$/.test(cleaned)) {
switch (cleaned) {
Expand Down Expand Up @@ -184,8 +195,15 @@
<section className="border-gray-1 flex w-full flex-col gap-5 bg-white md:w-77.5 md:gap-3">
<div className="px-5 pt-5 md:p-0">
<div className="flex items-center justify-between">
<button
onClick={() => router.back()}
className="flex items-center justify-center"
type="button"
>
<Image src="/icon/left_chevron.svg" alt="뒤로가기" width={24} height={24} />
</button>
<div className="text-gray-9 text-[22px] font-semibold tracking-[-1.94%]">
최종 위치 결과 Top 3
최종 위치 결과 Top3
</div>
<button
className="text-blue-5 bg-blue-1 hover:bg-blue-2 flex h-7 cursor-pointer items-center gap-1 rounded px-2.5 text-[11px] font-semibold transition-colors"
Expand Down Expand Up @@ -229,75 +247,104 @@
</span>
</div>
) : (
locationResults.map((result) => (
<div
key={result.id}
onClick={() => 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'
}`}
>
<div className="flex items-center justify-between">
<span className="text-gray-10 text-lg font-semibold">
{result.endStation}역
</span>
<span className="text-gray-6 text-[13px] font-normal">
이동시간
<span className="text-blue-5 ml-1.75 text-lg font-semibold">
{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 (
<div
key={result.id}
onClick={() => 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'
}`}
>

<div className="flex items-center gap-1.5">
<Image src='/icon/stars.svg' alt='stars' width={16} height={16} />
<span className="text-blue-5 text-sm font-medium">{categoryText}</span>
</div>


<div className="flex items-center justify-between">
<span className="text-gray-10 text-xl font-bold">
{result.endStation}역
</span>
</span>
</div>

<div className="text-gray-6 flex items-center gap-3 text-[13px]">
<span>내 환승경로</span>
</div>
<div className="flex items-center">
{result.transferPathLines.map(
(line: { display: string; text: string }, idx: number) => (
<div key={idx} className="flex items-center">
<span
className={`flex h-5 w-5 items-center justify-center rounded-full text-[11px] text-white ${getLineColor(line.text)}`}
>
{line.display}
<div className="flex flex-col items-end ">
<span className="text-gray-6 text-[13px] font-regular">
Copy link

@coderabbitai coderabbitai bot Feb 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Search for font-regular in the codebase
echo "=== Searching for font-regular definitions ==="
rg "font-regular" -n

echo -e "\n=== Looking for Tailwind config files ==="
fd "tailwind" -type f | head -20

echo -e "\n=== Checking if font-regular is used elsewhere ==="
rg "font-regular" --type jsx --type tsx -c

Repository: SWYP-mingling/Frontend

Length of output: 540

🏁 Script executed:

#!/bin/bash
# Find and examine tailwind config file
config_file=$(fd "tailwind.config" | head -1)
if [ -n "$config_file" ]; then
  echo "=== Tailwind Config Content ==="
  cat -n "$config_file"
fi

Repository: SWYP-mingling/Frontend

Length of output: 48

🏁 Script executed:

#!/bin/bash
# Check the specific file and surrounding context
if [ -f "app/result/\[id\]/page.tsx" ]; then
  echo "=== Checking app/result/[id]/page.tsx around line 308 ==="
  sed -n '300,320p' "app/result/\[id\]/page.tsx" | cat -n
fi

Repository: SWYP-mingling/Frontend

Length of output: 48

🏁 Script executed:

#!/bin/bash
# Read the actual page.tsx file with proper path
cat -n "app/result/[id]/page.tsx" | sed -n '300,320p'

echo -e "\n=== Look for tailwind config in common locations ==="
ls -la | grep -i tailwind
ls -la | grep -i config

Repository: SWYP-mingling/Frontend

Length of output: 1580

🏁 Script executed:

#!/bin/bash
# Check package.json for tailwind config
cat package.json | grep -A 20 -B 5 tailwind

echo -e "\n=== Check for global CSS or styles ==="
fd "\\.css" -type f | head -20

Repository: SWYP-mingling/Frontend

Length of output: 1122

🏁 Script executed:

#!/bin/bash
# Search for any font-weight or font customization
rg "font-weight|'font'|\"font\"" --type=json | head -30

Repository: SWYP-mingling/Frontend

Length of output: 48

🏁 Script executed:

#!/bin/bash
# Check postcss and next config
echo "=== postcss.config.mjs ==="
cat postcss.config.mjs

echo -e "\n=== next.config.ts ==="
cat next.config.ts

echo -e "\n=== Search for CSS files ==="
find . -name "*.css" -type f | grep -v node_modules | head -20

Repository: SWYP-mingling/Frontend

Length of output: 992

🏁 Script executed:

#!/bin/bash
# Check for globals.css and any custom font definitions
find . -name "globals.css" -o -name "global.css" -o -name "app.css" | grep -v node_modules | while read file; do
  echo "=== Found: $file ==="
  cat -n "$file"
done

Repository: SWYP-mingling/Frontend

Length of output: 2849

🏁 Script executed:

#!/bin/bash
# Search for any font customization in CSS or config files
rg "font-regular|font-normal|font-weight" --glob="*.css" --glob="*.ts" --glob="*.js" | grep -v node_modules | head -30

Repository: SWYP-mingling/Frontend

Length of output: 48

font-regular는 Tailwind CSS의 기본 유틸리티 클래스가 아닙니다.

표준 Tailwind CSS v4에서 font-weight: 400에 해당하는 클래스는 font-normal입니다. 프로젝트에는 font-regular를 커스텀 정의한 곳이 없으므로, 현재 코드에서 이 클래스가 적용되지 않습니다.

🐛 수정 제안 
-  <span className="text-gray-6 text-[13px] font-regular">
+  <span className="text-gray-6 text-[13px] font-normal">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<span className="text-gray-6 text-[13px] font-regular">
<span className="text-gray-6 text-[13px] font-normal">
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/result/`[id]/page.tsx at line 308, The span rendering text uses a
nonstandard Tailwind class "font-regular" which has no effect; update the
className on the span (the JSX element containing className="text-gray-6
text-[13px] font-regular") to use the standard Tailwind weight class
"font-normal" (or add a project-specific custom utility if you deliberately want
a different weight) so the font-weight:400 is applied correctly.

평균 이동시간{' '}
<span className="text-blue-5 text-[18px] font-bold">
{result.averageTravelTime}분
</span>
<span className="text-gray-10 ml-1 text-sm font-semibold">
{line.text}
</span>
{idx < result.transferPathLines.length - 1 && (
<Image
src="/icon/rightarrow.svg"
alt="화살표"
width={13}
height={22}
className="text-gray-6 mx-1.75 w-auto"
/>
)}
</div>
)
)}
</span>

</div>
</div>


<div className="flex gap-2">
<button
onClick={handleRecommendClick}
className="bg-gray-8 hover:bg-gray-9 flex-1 h-10 cursor-pointer rounded-[4px] text-[15px] font-normal text-white transition-colors"
type="button"
>
주변 장소 추천
</button>
<button
onClick={(e) => {
e.stopPropagation();
openModal(
'TRANSFER',
{ meetingId: id,
userRoutes: result.userRoutes,
endStation: result.endStation,
},
e
);
}}
className="bg-gray-1 hover:bg-gray-2 flex-1 h-10 cursor-pointer rounded-[4px] text-[15px] font-normal text-blue-5 transition-colors"
type="button"
>
환승 경로 보기
</button>
</div>
</div>

<button
onClick={(e) => {
e.stopPropagation();
openModal(
'TRANSFER',
{
userRoutes: result.userRoutes,
endStation: result.endStation,
},
e
);
}}
className="bg-gray-8 h-8 w-full cursor-pointer rounded py-1 text-[15px] font-normal text-white"
>
모임원 환승경로 보기
</button>
</div>
))
);
})
)}
</div>
</div>
Expand Down
10 changes: 1 addition & 9 deletions components/map/kakaoMapLine.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@
map.setBounds(bounds);
}, [map, endStation, userRoutes]);

const handleRecommendClick = () => {

Check warning on line 78 in components/map/kakaoMapLine.tsx

View workflow job for this annotation

GitHub Actions / build 

'handleRecommendClick' is assigned a value but never used

Check warning on line 78 in components/map/kakaoMapLine.tsx

View workflow job for this annotation

GitHub Actions / build 

'handleRecommendClick' is assigned a value but never used
if (!meetingId || !endStation) {
router.push('/recommend');
return;
Expand Down Expand Up @@ -202,15 +202,7 @@
})}
</Map>

<div className="absolute top-4 left-1/2 z-10 -translate-x-1/2 transform">
<button
className="bg-blue-5 hover:bg-blue-8 flex h-10 items-center rounded-full px-5 text-sm font-bold whitespace-nowrap text-white shadow-lg transition-colors"
onClick={handleRecommendClick}
>
{endStation.name}역 주변 장소 추천
</button>
</div>


<ZoomControl map={map} />
</div>
);
Expand Down
Loading
Loading