20260330 fe checkin redirect prob#346
Merged
Merged
Conversation
Walkthrough뷰포트 높이 대응과 로그인 후 리디렉션 기능을 추가합니다. App에서 CSS 변수 Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
frontend/src/components/AdminRoute.jsx (1)
40-40: 의존성 배열로 인한 불필요한 관리자 권한 검사 반복
location.pathname과location.search가 의존성 배열에 포함되어, 관리자 페이지 내에서 라우트 변경 시마다/api/user/detailsAPI가 호출됩니다. 관리자 페이지들은 복잡한 필터링 로직을 포함하고 있어(예: AdminMemberManage의 searchQuery, roleFilter 등), URL 변경 시 불필요한 권한 검사가 반복될 수 있습니다.
returnUrl은 리다이렉트 시점에만 필요하므로, 의존성 배열을 단순화하는 것을 권장합니다.♻️ 제안하는 수정
useEffect(() => { const checkAdmin = async () => { try { const { data } = await api.get('/api/user/details'); const role = data?.role; setIsAuthorized(isAdminRole(role)); } catch (error) { setIsAuthorized(false); const returnUrl = encodeURIComponent( location.pathname + location.search ); setRedirectPath( error?.status === 401 ? `/login?returnUrl=${returnUrl}` : '/' ); } finally { setLoading(false); } }; checkAdmin(); - }, [location.pathname, location.search]); + }, []);
useLocation()에서 반환된location객체는 항상 현재 위치를 참조하므로, 리다이렉트 시점에 올바른returnUrl을 계산할 수 있습니다. 빈 의존성 배열을 사용하면 컴포넌트 마운트 시 한 번만 권한 검사가 실행됩니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/AdminRoute.jsx` at line 40, The useEffect in AdminRoute.jsx currently includes location.pathname and location.search in its dependency array causing repeated admin permission checks on intra-admin route changes; change the effect to run only on mount by removing those dependencies (use an empty dependency array) and compute returnUrl from the current location inside the effect when performing the redirect logic so returnUrl still reflects the latest location at redirect time; update references to location.pathname/location.search usage to be inside the effect body and keep the permission check function (e.g., the fetch to /api/user/details) called only once on mount.frontend/src/hooks/useAuthGuard.js (1)
30-30: 의존성 배열로 인한 불필요한 API 호출 가능성 검토 필요
location.pathname과location.search가 의존성 배열에 포함되어 있어, 보호된 경로 내에서 네비게이션할 때마다/api/user/detailsAPI가 호출됩니다. 이는 동일한 인증 세션 내에서 불필요한 네트워크 요청을 발생시킬 수 있습니다.
returnUrl계산은 리다이렉트 시점에만 필요하므로, 의존성 배열에서 location 관련 값을 제거하고 리다이렉트 로직 내에서 현재 위치를 읽는 방식을 고려해 보세요.♻️ 제안하는 수정
useEffect(() => { const checkAuth = async () => { try { await api.get('/api/user/details'); } catch (error) { if (error.status === 401) { toast.error('로그인 후 이용하실 수 있습니다.'); const returnUrl = encodeURIComponent( location.pathname + location.search ); nav(`/login?returnUrl=${returnUrl}`); } } }; checkAuth(); - }, [nav, location.pathname, location.search]); + }, [nav]);
location객체는useLocation()에서 반환된 참조이므로, 의존성 배열에 포함하지 않아도 리다이렉트 시점에 최신 값을 읽을 수 있습니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/hooks/useAuthGuard.js` at line 30, The effect in useAuthGuard.js is re-running on every path/search change because location.pathname and location.search are in the dependency array; remove those from the dependency array (keep nav and other stable deps) and instead compute the returnUrl inside the redirect logic by reading the current location (from useLocation()) at the time you perform the redirect (e.g., inside the effect body before calling nav or redirect). Update references to location.pathname/location.search to be local reads only when building returnUrl so the API call (fetching /api/user/details) doesn’t run on every navigation within a protected route.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@frontend/src/components/AdminRoute.jsx`:
- Line 40: The useEffect in AdminRoute.jsx currently includes location.pathname
and location.search in its dependency array causing repeated admin permission
checks on intra-admin route changes; change the effect to run only on mount by
removing those dependencies (use an empty dependency array) and compute
returnUrl from the current location inside the effect when performing the
redirect logic so returnUrl still reflects the latest location at redirect time;
update references to location.pathname/location.search usage to be inside the
effect body and keep the permission check function (e.g., the fetch to
/api/user/details) called only once on mount.
In `@frontend/src/hooks/useAuthGuard.js`:
- Line 30: The effect in useAuthGuard.js is re-running on every path/search
change because location.pathname and location.search are in the dependency
array; remove those from the dependency array (keep nav and other stable deps)
and instead compute the returnUrl inside the redirect logic by reading the
current location (from useLocation()) at the time you perform the redirect
(e.g., inside the effect body before calling nav or redirect). Update references
to location.pathname/location.search to be local reads only when building
returnUrl so the API call (fetching /api/user/details) doesn’t run on every
navigation within a protected route.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: fd6941db-c63e-4ba5-aa8a-935cac79a30b
📒 Files selected for processing (16)
frontend/src/App.jsxfrontend/src/components/AdminRoute.jsxfrontend/src/components/Layout.jsxfrontend/src/components/Sidebar.jsxfrontend/src/components/Sidebar.module.cssfrontend/src/components/login/LoginForm.jsxfrontend/src/components/protectedRoute.jsxfrontend/src/components/signup/SignUpForm.jsxfrontend/src/hooks/useAuthGuard.jsfrontend/src/index.cssfrontend/src/pages/AdminDashboard.module.cssfrontend/src/pages/AdminHome.module.cssfrontend/src/pages/Board.module.cssfrontend/src/pages/Home.module.cssfrontend/src/pages/LoginAndSignUp.module.cssfrontend/src/pages/external/External.module.css
This was referenced Apr 3, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
개요
QR 코드를 스캔하여 접속했을 때 사용자가 로그인되어 있지 않으면 로그인 페이지로 튕기게 되는데, 이때 접속하려던 출석 토큰 정보를 유지하여 로그인 직후 자동으로 출석이 완료되도록 UX를 개선
주요 변경 사항
ProtectedRoute& AdminRoute
(인증 가드)
인증되지 않은 사용자가 보호된 경로(e.g. /attendance)에 접근 시, 현재의 전체 URL(쿼리 스트링 포함)을 returnUrl 파라미터로 인코딩하여 로그인 페이지로 전달
예: /login?returnUrl=/attendance?token=ABC123XYZ
LoginForm(로그인 처리)
로그인 성공 시 returnUrl 파라미터가 있는지 확인하고, 존재하면 해당 주소로 즉시 리다이렉트합니다. 정보가 없으면 기본값인 홈(/)으로 이동
SignUpForm(회원가입 처리)
회원가입 시에도 returnUrl 정보를 넘겨주어, 회원가입 완료 후 로그인 시에도 출석 페이지로 돌아갈 수 있도록 상태를 보존
useCheckIn커스텀 훅 (자동 출석 처리)
/attendance 페이지 로드 시 URL에 token이 있으면 즉시 백엔드 API 콜을 수행하도록 로직을 강화
중복 방지 로직: 출석 요청이 완료되면 URL에서 토큰을 제거(Clean-up)하여 새로고침 시 중복 요청이 가지 않도록 처리
Summary by CodeRabbit
릴리스 노트
새로운 기능
버그 수정
스타일