mobile1

src/features/auth/index.ts

@@ -1,2 +1,3 @@
 export { useAuth } from './model/useAuth';
 export { AuthProvider, useAuthContext } from './model/AuthProvider';
+export { AuthGuard } from './ui/AuthGuard';

src/features/auth/ui/AuthGuard.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { Box, CircularProgress, Typography } from '@mui/material';
+import { useAuthContext } from '../model/AuthProvider';
+import { colors } from '@/shared/lib/button-styles';
+
+interface AuthGuardProps {
+  children: React.ReactNode;
+}
+
+/**
+ * 인증 가드 컴포넌트
+ * - 로그인하지 않은 사용자는 로그인 페이지로 리다이렉트
+ * - user 정보가 없으면 접근 불가
+ */
+export const AuthGuard = ({ children }: AuthGuardProps) => {
+  const { isAuthenticated, user, isLoading } = useAuthContext();
+  const router = useRouter();
+
+  useEffect(() => {
+    // 로딩이 완료되고 인증되지 않았거나 사용자 정보가 없으면 로그인 페이지로 리다이렉트
+    if (!isLoading && (!isAuthenticated || !user)) {
+      console.log('🚫 인증되지 않은 접근 시도 - 로그인 페이지로 리다이렉트');
+      router.push('/login');
+    }
+  }, [isLoading, isAuthenticated, user, router]);
+
+  // 로딩 중
+  if (isLoading) {
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          minHeight: '100vh',
+          bgcolor: colors.gray[50],
+          gap: 3,
+        }}
+      >
+        <CircularProgress
+          size={60}
+          sx={{
+            color: colors.purple,
+          }}
+        />
+        <Typography
+          sx={{
+            color: colors.gray[600],
+            fontSize: { xs: '0.875rem', sm: '1rem' },
+            fontWeight: 500,
+          }}
+        >
+          인증 확인 중...
+        </Typography>
+      </Box>
+    );
+  }
+
+  // 인증되지 않았거나 사용자 정보가 없으면 아무것도 렌더링하지 않음 (리다이렉트 처리 중)
+  if (!isAuthenticated || !user) {
+    return null;
+  }
+
+  // 인증된 사용자만 children 렌더링
+  return <>{children}</>;
+};