refactor: 좌우 스와이프 더 확실하게 차단#223
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded@ljh130334 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 3 minutes and 44 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
Walkthrough터치/제스처 이벤트 처리 로직을 조정하여 수평 스와이프 차단을 강화하고, 수직 이동 추적을 추가했다. touchstart/move에 비수동 옵션을 적용하고, touchmove에서 preventDefault/stopPropagation을 적극 호출한다. touchend로 상태를 초기화하고, gesture* 이벤트 전반을 차단한다. Changes
Sequence Diagram(s)sequenceDiagram
actor User as 사용자
participant Doc as Document
participant Handlers as GestureHandlers
User->>Doc: touchstart
activate Handlers
Handlers->>Handlers: startX/startY 저장 (passive: false)
User->>Doc: touchmove (capture: true)
Handlers->>Handlers: currentX/currentY 계산<br/>diffX/diffY 비교
alt 수평 스와이프 (diffX > 5 && diffX > diffY)
Handlers->>Doc: preventDefault() + stopPropagation()
Note over Handlers: 스크롤/제스처 완전 차단
else 기타 이동
Handlers->>Handlers: 통과
end
User->>Doc: touchend
Handlers->>Handlers: startX/startY 초기화
deactivate Handlers
User->>Doc: gesturestart/change/end
Handlers->>Doc: preventDefault() (제스처 전면 차단)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (5)
index.html (5)
22-22: touchstart에 passive:false는 불필요해당 핸들러에서 preventDefault를 호출하지 않으므로 passive:true로 바꿔 스크롤 성능 힌트를 주는 것이 안전합니다.
- }, { passive: false }); + }, { passive: true });
33-37: return false는 addEventListener 컨텍스트에서 무의미preventDefault/stopPropagation만으로 충분합니다. 혼동 방지를 위해 제거 권장.
if (diffX > 5 && diffX > diffY) { e.preventDefault(); e.stopPropagation(); - return false; }
38-38: capture + passive:false는 전역 성능·호환성 영향 가능문서 캡처 단계에서 비수동 touchmove는 메인 스레드 일을 늘립니다. 실제 페이지 스크롤/터치 지연이 없는지 RUM/프레임 드랍 지표로 확인 바랍니다. 문제가 있으면 iOS Safari에만 제한하거나(UA/feature detect), 캡처를 해제하는 대안을 검토하세요.
33-37: 수평 스와이프 전면 차단은 가로 스크롤 UI를 망가뜨릴 수 있음수평 스크롤이 필요한 컴포넌트(가로 리스트/코드블록 등)에 escape 해놓는 것이 안전합니다. data-allow-x 같은 opt-out 훅 권장.
document.addEventListener('touchmove', function(e) { - if (startX === null || startY === null) return; + if (startX === null || startY === null) return; + const target = e.target; + if (target && (target.closest('[data-allow-x]') || target.closest('[contenteditable="true"]') || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName))) { + return; // 인터랙티브/허용 영역은 패스 + }
46-56: gesture 이벤트는 비표준(Safari 전용) — 환경 가드 권장*다른 브라우저에서는 존재하지 않습니다. 안전하게 기능 감지 후 등록하거나 try/catch로 감싸세요.
- document.addEventListener('gesturestart', function(e) { + if ('ongesturestart' in window) document.addEventListener('gesturestart', function(e) { e.preventDefault(); }, { passive: false }); - document.addEventListener('gesturechange', function(e) { + if ('ongesturechange' in window) document.addEventListener('gesturechange', function(e) { e.preventDefault(); }, { passive: false }); - document.addEventListener('gestureend', function(e) { + if ('ongestureend' in window) document.addEventListener('gestureend', function(e) { e.preventDefault(); }, { passive: false });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
index.html(1 hunks)
🔇 Additional comments (2)
index.html (2)
17-22: 세로 추적(startY/diffY) 추가는 방향성 판별에 유효수평/수직 분기 정확도가 좋아집니다. 이 부분은 유지 추천합니다.
Also applies to: 28-31
33-37: 임계값 5px은 오탭 가능성↑ — 실제 기기에서 재검증 필요약간의 손 떨림에도 가로 판정될 수 있습니다. 주요 디바이스(iOS/Android, 저/고 DPI)에서 뉴스피드 세로 스크롤 시 오차 판정 비율을 확인해 주세요. 필요시 6~8px로 미세 조정 제안.
1 participant
Summary by CodeRabbit