[Feat] 출석 시 Weeth 에서 카메라 호출하도록 수정#111
Hidden character warning
Conversation
PR 검증 결과⏭️ TypeScript: 건너뜀 |
PR 테스트 결과⏭️ Jest: 건너뜀 |
|
구현한 기능 Preview: https://weeth-mqd28r8pn-weethsite-4975s-projects.vercel.app |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 Walkthrough개요AttendanceCodeModal에 웹캠 기반 QR 코드 스캔 기능을 추가하고, 새로운 useQRScanner 훅으로 실시간 QR 디코딩을 구현합니다. 관련 런타임 의존성, 카메라 아이콘, SSE 최적화 및 CI/pnpm 설정을 함께 업데이트합니다. 변경 사항QR 스캔 기능 추가
예상 코드 리뷰 시간🎯 3 (중간) | ⏱️ ~20분 관련 PR
제안하는 리뷰어
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/components/attendance/AttendanceCodeModal.tsx (1)
71-113: ⚡ Quick win스캔 타임아웃 로직 추가를 고려하세요.
현재 QR 스캔은 성공하거나 사용자가 수동으로 취소할 때까지 무한정 실행됩니다. 카메라가 QR 코드를 인식하지 못하는 상황(조명 불량, 손떨림 등)에서 배터리와 리소스를 계속 소비하게 됩니다.
최대 스캔 시간(예: 30초~60초) 또는 최대 시도 횟수를 설정하여, 일정 시간 후 자동으로 중단하고 사용자에게 수동 입력을 안내하는 것을 권장합니다.
⏱️ 타임아웃 추가 예시
useEffect(() => { if (!scanning) return; + const startTime = Date.now(); + const SCAN_TIMEOUT_MS = 30000; // 30초 const intervalId = window.setInterval(() => { + if (Date.now() - startTime > SCAN_TIMEOUT_MS) { + setCameraError('QR 코드를 찾을 수 없습니다. 수동으로 코드를 입력해 주세요.'); + handleStopScan(); + return; + } + if (scannedRef.current) return; // ... 나머지 로직 }, 250); return () => { window.clearInterval(intervalId); }; }, [scanning]);🤖 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/attendance/AttendanceCodeModal.tsx` around lines 71 - 113, The scanning loop in the useEffect (triggered by scanning) can run indefinitely; add a timeout or max-attempts mechanism that stops the interval and calls handleStopScan after a configurable period (e.g., 30–60s) or after N attempts to prevent battery/resource drain; implement by tracking elapsed time or an attempts counter inside the interval (or by creating a separate setTimeout) and when the limit is reached clearInterval(intervalId), set scannedRef.current appropriately, and call handleStopScan (also ensure cleanup in the return callback clears both interval and timeout and that you update any related state via setCode only when within the allowed time/attempts).
🤖 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.
Nitpick comments:
In `@src/components/attendance/AttendanceCodeModal.tsx`:
- Around line 71-113: The scanning loop in the useEffect (triggered by scanning)
can run indefinitely; add a timeout or max-attempts mechanism that stops the
interval and calls handleStopScan after a configurable period (e.g., 30–60s) or
after N attempts to prevent battery/resource drain; implement by tracking
elapsed time or an attempts counter inside the interval (or by creating a
separate setTimeout) and when the limit is reached clearInterval(intervalId),
set scannedRef.current appropriately, and call handleStopScan (also ensure
cleanup in the return callback clears both interval and timeout and that you
update any related state via setCode only when within the allowed
time/attempts).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: bcc628ca-52de-4255-8e37-b706e4da72f0
⛔ Files ignored due to path filters (2)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlsrc/assets/icons/camera.svgis excluded by!**/*.svg
📒 Files selected for processing (3)
package.jsonsrc/assets/icons/index.tssrc/components/attendance/AttendanceCodeModal.tsx
JIN921
left a comment
JIN921
left a comment
There was a problem hiding this comment.
확인했습니다 충돌만 해결해 주시면 될 거 같아요~! 수고하셧어요!!
PR 검증 결과⏭️ TypeScript: 건너뜀 |
PR 테스트 결과⏭️ Jest: 건너뜀 |
nabbang6
left a comment
nabbang6
left a comment
There was a problem hiding this comment.
확인햇습니다~!! 충돌 파일도 확인해봣는데 문제 없이 깔끔쓰한 게 고쳐주싱 것 같습니다,,, ㅠ ㅠ 짱!!!👍
…into feat/WTH-381-출석-시-Weeth-안에서-카메라-호출할-수-있도록-추가하기
PR 검증 결과⏭️ TypeScript: 건너뜀 |
PR 테스트 결과⏭️ Jest: 건너뜀 |
PR 검증 결과⏭️ TypeScript: 건너뜀 |
PR 검증 결과⏭️ TypeScript: 건너뜀 |
PR 테스트 결과⏭️ Jest: 건너뜀 |
PR 테스트 결과✅ Jest: 통과 🎉 모든 테스트를 통과했습니다! |
PR 검증 결과✅ TypeScript: 통과 🎉 모든 검증을 통과했습니다! |
PR 테스트 결과✅ Jest: 통과 🎉 모든 테스트를 통과했습니다! |
PR 검증 결과✅ TypeScript: 통과 🎉 모든 검증을 통과했습니다! |
PR 테스트 결과✅ Jest: 통과 🎉 모든 테스트를 통과했습니다! |
PR 검증 결과✅ TypeScript: 통과 |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/components/attendance/AttendanceCodeModal.tsx (1)
141-141: ⚡ Quick winspacing 클래스는 토큰 규칙에 맞춰 교체해 주세요.
Line 141의
gap-2.5는 현재 가이드의 spacing 토큰 범위와 맞지 않습니다. 토큰 클래스(gap-100~gap-400)로 변경하는 편이 일관성에 맞습니다.예시
- <div className="bg-container-neutral-alternative flex items-start gap-2.5 self-stretch rounded-md p-300"> + <div className="bg-container-neutral-alternative flex items-start gap-100 self-stretch rounded-md p-300">As per coding guidelines "Use spacing token classes:
p-100~500,gap-100~400."🤖 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/attendance/AttendanceCodeModal.tsx` at line 141, In AttendanceCodeModal replace the non-token spacing class "gap-2.5" on the div with the spacing token variant (e.g., "gap-200" or another token within gap-100..gap-400) so the className that currently contains "bg-container-neutral-alternative flex items-start gap-2.5 self-stretch rounded-md p-300" uses a permitted spacing token; update the class string to the chosen token and ensure consistency with other spacing tokens like p-300 already used.
🤖 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/app/api/proxy/`[...path]/route.ts:
- Around line 6-8: maxDuration is defined with a runtime conditional
(process.env.VERCEL ? 300 : 700), which is not allowed for Route Segment Config;
replace it with a static numeric value or resolve the value at build time.
Update the export const maxDuration in route.ts to a fixed number (e.g., 300 or
700) or change your build process to inject a static constant so maxDuration is
a literal in the output manifest; ensure you only modify the definition named
maxDuration and do not rely on process.env in that declaration.
In `@src/components/attendance/AttendanceCodeModal.tsx`:
- Around line 73-76: The current on successful scan calls onOpenChange(false)
directly which bypasses the component's handleOpenChange and its setCode('')
reset; update the success path in the block containing stopCamera(),
onConfirm?.(digits), onOpenChange(false) to either call handleOpenChange(false)
instead of onOpenChange(false) or explicitly call setCode('') before closing so
the modal's code state is cleared for the next open; ensure you reference and
use the existing handleOpenChange, setCode, stopCamera, onConfirm, and digits
symbols when making the change.
---
Nitpick comments:
In `@src/components/attendance/AttendanceCodeModal.tsx`:
- Line 141: In AttendanceCodeModal replace the non-token spacing class "gap-2.5"
on the div with the spacing token variant (e.g., "gap-200" or another token
within gap-100..gap-400) so the className that currently contains
"bg-container-neutral-alternative flex items-start gap-2.5 self-stretch
rounded-md p-300" uses a permitted spacing token; update the class string to the
chosen token and ensure consistency with other spacing tokens like p-300 already
used.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 8bc71bca-0cb1-4446-bccd-e8594617e9ab
📒 Files selected for processing (8)
.github/workflows/ci.yml.github/workflows/test.ymlamplify.ymlpnpm-workspace.yamlsrc/app/api/proxy/[...path]/route.tssrc/components/attendance/AttendanceCodeModal.tsxsrc/hooks/attendance/index.tssrc/hooks/attendance/useQRScanner.ts
✅ Files skipped from review due to trivial changes (2)
- .github/workflows/ci.yml
- amplify.yml
PR 테스트 결과✅ Jest: 통과 🎉 모든 테스트를 통과했습니다! |
PR 검증 결과✅ TypeScript: 통과 🎉 모든 검증을 통과했습니다! |
PR 테스트 결과✅ Jest: 통과 🎉 모든 테스트를 통과했습니다! |
PR 검증 결과✅ TypeScript: 통과 🎉 모든 검증을 통과했습니다! |
3 participants
✅ PR 유형
어떤 변경 사항이 있었나요?
📌 관련 이슈번호
✅ Key Changes
react-webcam,jsqr패키지 추가하여 웹에서 카메라 호출 및 QR 디코딩 기능 구현CameraIconexport 추가 (src/assets/icons/index.ts)AttendanceCodeModal에 "QR코드 스캔하기" 버튼 통합videoConstraints: { facingMode: { ideal: 'environment' } }— 모바일은 후면 카메라, PC는 기본 카메라로 자동 fallback📸 스크린샷 or 실행
2026-05-11.5.23.04.mov
🎸 기타 사항 or 추가 코멘트
@nabbang6
AttendanceCodeModal.tsx에서 충돌 나서 해결하긴 했는데 혹시 코드 빠진거 없는지 한번만 확인 부탁드려요 !! ㅠㅠSummary by CodeRabbit
출석 인증
New Features
Chores