[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:
byeongcheolryu
2025-11-10 09:38:59 +09:00
parent 56386e6d88
commit bf39fd22bd
14 changed files with 804 additions and 40 deletions

60
src/hooks/useAuthGuard.ts Normal file
View 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]);
}