[feat]: 보호된 대시보드 및 API 라우트 추가
- 인증된 사용자용 대시보드 페이지 구현 ((protected) 라우트 그룹) - API 엔드포인트 추가 (인증, 사용자 관리) - 커스텀 훅 추가 (useAuth) - 미들웨어 인증 로직 강화 - 환경변수 예제 업데이트 - 기존 dashboard 페이지 제거 후 보호된 라우트로 이동 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
60
src/hooks/useAuthGuard.ts
Normal file
60
src/hooks/useAuthGuard.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
/**
|
||||
* Auth Guard Hook
|
||||
*
|
||||
* Purpose:
|
||||
* - Protect pages from unauthenticated access
|
||||
* - Prevent browser back button cache issues
|
||||
* - Real-time authentication validation
|
||||
*
|
||||
* Usage:
|
||||
* ```tsx
|
||||
* export default function ProtectedPage() {
|
||||
* useAuthGuard();
|
||||
* // ... rest of component
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
export function useAuthGuard() {
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
// 페이지 로드 시 인증 확인
|
||||
const checkAuth = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/auth/check', {
|
||||
method: 'GET',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
// 인증 실패 시 로그인 페이지로 이동
|
||||
console.log('⚠️ 인증 실패: 로그인 페이지로 이동');
|
||||
router.replace('/login');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ 인증 확인 오류:', error);
|
||||
router.replace('/login');
|
||||
}
|
||||
};
|
||||
|
||||
checkAuth();
|
||||
|
||||
// 뒤로가기 시 페이지 새로고침 강제
|
||||
const handlePageShow = (event: PageTransitionEvent) => {
|
||||
if (event.persisted) {
|
||||
// 브라우저 캐시에서 로드된 경우 새로고침
|
||||
console.log('🔄 캐시된 페이지 감지: 새로고침');
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('pageshow', handlePageShow);
|
||||
|
||||
// Cleanup
|
||||
return () => {
|
||||
window.removeEventListener('pageshow', handlePageShow);
|
||||
};
|
||||
}, [router]);
|
||||
}
|
||||
Reference in New Issue
Block a user