[FIX] 버스 이용시 1포인트 추가 로직 관련 수정 #690 - #691
Conversation
📝 WalkthroughWalkthroughFriend-city building requests now use POST. Student and friend-city pages pass points to ChangesFriend city bus-fare flow
Estimated code review effort: 3 (Moderate) | ~30 minutes Possibly related issues
Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/city/BusStation.tsx`:
- Around line 269-319: In the hasEnoughBusFare guard within the friend card
rendering, remove the native disabled attribute from the button while preserving
its unavailable styling, cursor state, and existing onClick toast handler so
clicks reliably display the insufficient-points message.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 8771ccc6-5770-4dd3-af95-671e7423ba10
📒 Files selected for processing (5)
src/app/services/city/service.tssrc/app/student/page.tsxsrc/app/student/users/[userId]/page.tsxsrc/components/city/BusFareErrorToast.tsxsrc/components/city/BusStation.tsx
| if (!hasEnoughBusFare) { | ||
| return ( | ||
| <HoverCard | ||
| key={friend.userId} | ||
| openDelay={100} | ||
| closeDelay={0} | ||
| > | ||
| <HoverCardTrigger asChild> | ||
| <button | ||
| type="button" | ||
| disabled | ||
| onClick={() => | ||
| toast.error( | ||
| "친구 도시 방문에 필요한 포인트가 부족합니다." | ||
| ) | ||
| } | ||
| className="flex h-20 w-full cursor-not-allowed items-center gap-3 rounded-2xl border border-slate-100 bg-slate-50 p-3 text-left opacity-60" | ||
| > | ||
| <div className="flex size-11 shrink-0 items-center justify-center overflow-hidden rounded-full bg-slate-200 text-sm font-black text-slate-400"> | ||
| {friend.profileImageUrl ? ( | ||
| <img | ||
| src={friend.profileImageUrl} | ||
| alt={`${friend.nickname} 프로필`} | ||
| className="h-full w-full object-cover" | ||
| /> | ||
| ) : ( | ||
| friend.nickname.slice(0, 1) | ||
| )} | ||
| </div> | ||
|
|
||
| <div className="min-w-0"> | ||
| <p className="truncate text-sm font-black text-slate-500"> | ||
| {friend.nickname} | ||
| </p> | ||
| <p className="mt-0.5 text-xs font-bold text-slate-400"> | ||
| 친구 도시로 이동하기 | ||
| </p> | ||
| </div> | ||
| </button> | ||
| </HoverCardTrigger> | ||
| <HoverCardContent | ||
| side="top" | ||
| align="center" | ||
| className="w-auto px-3 py-1.5 text-xs font-bold text-rose-500" | ||
| > | ||
| 포인트가 부족해 지금은 이동할 수 없어요. | ||
| </HoverCardContent> | ||
| </HoverCard> | ||
| ); | ||
| } | ||
|
|
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== locate BusStation.tsx =="
fd -a 'BusStation\.tsx$' . || true
echo "== inspect relevant file length/path =="
if [ -f src/components/city/BusStation.tsx ]; then
wc -l src/components/city/BusStation.tsx
sed -n '240,340p' src/components/city/BusStation.tsx
fi
echo "== search for same button pattern =="
rg -n 'disabled[\s\n\t]*onClick|cursor-not-allowed' src/components/city/BusStation.tsx || true
echo "== behavioral probe: disabled button click handling in generated HTML/JSDOM-lite logic =="
python3 - <<'PY'
html = '''<button type="button" class="flex h-20 w-full cursor-not-allowed items-center gap-3 rounded-2xl border border-slate-100 bg-slate-50 p-3 text-left opacity-60" disabled onclick="toast.error(...);">
<div>
<img src="https://example.com/a.jpg" alt="A">
</div>
</button>'''
print("disabled native button contains nested img via child div")
print("HTML disabled attribute is present")
PYRepository: MoMoFighters/FRONT-Fighters
Length of output: 8548
🌐 Web query:
W3C HTML buttons Disabled buttons do not dispatch click events
💡 Result:
According to the HTML specification, a form control—such as a button—that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on that element [1][2][3]. This requirement specifically targets the behavior of browser-native interaction events [2]. When a button is disabled, the browser prevents the standard activation behavior (such as submitting a form or firing a click event) that would otherwise occur upon user interaction [1][4]. While the specification is explicit regarding click events, practical implementation across different browsers has historically shown some nuance regarding other mouse events (like mousedown or mouseup) and whether event propagation occurs if an event is triggered on a descendant of a disabled element [2][5][6][7]. Because of these variations, developers often use CSS to ensure consistent behavior, such as setting pointer-events: none on disabled elements to completely prevent them from capturing or responding to mouse interactions [5]. In summary, the specification explicitly mandates the suppression of click events on disabled form controls to ensure they remain non-interactive [1][4].
Citations:
- 1: https://html.spec.whatwg.org/multipage/form-elements.html
- 2: Mouse events & disabled form controls whatwg/html#2368
- 3: https://dev.w3.org/html5/spec-LC/the-button-element.html
- 4: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/disabled
- 5: https://jakearchibald.com/2017/events-and-disabled-form-fields/
- 6: Expand disabled form control event handling spec text whatwg/html#12219
- 7: Event bubbling on disabled form elements whatwg/html#5886
Rely on CSS/tooltip instead of a disabled native button for the toast trigger.
This card is already styled and explained as unavailable, so the native disabled attribute is unnecessary. On a normal native disabled button with nested descendants, click behavior can be inconsistent; removing disabled lets the existing onClick toast fire reliably on the unavailable friend cards.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/city/BusStation.tsx` around lines 269 - 319, In the
hasEnoughBusFare guard within the friend card rendering, remove the native
disabled attribute from the button while preserving its unavailable styling,
cursor state, and existing onClick toast handler so clicks reliably display the
insufficient-points message.
close #690
Summary by CodeRabbit