feat: 로그인 안한 상태로 페이지 접근 시 제한

Author: DongEun02

app/(with-sidebar)/layout.tsx

@@ -1,4 +1,7 @@
+'use client';
+
 import Sidebar from '@/components/common/Sidebar';
+import { useAuthGuard } from '@/hooks/useAuthGuard';
 
 import '@uiw/react-md-editor/markdown-editor.css';
 import '@uiw/react-markdown-preview/markdown.css';
@@ -8,6 +11,14 @@ export default function SidebarLayout({
 }: {
   children: React.ReactNode;
 }) {
+  const { loading, isAuthed } = useAuthGuard({ redirectTo: '/login' });
+
+  if (loading) return <div>로딩중...</div>;
+  if (!isAuthed) {
+    alert('로그인이 필요합니다.');
+    return null;
+  }
+
   return (
     <div className="flex">
       <Sidebar />

components/common/Sidebar.tsx

@@ -26,8 +26,8 @@ const Sidebar = () => {
   const handleLogout = async (): Promise<void> => {
     try {
       await signOut(auth);
+      alert('로그아웃 되었습니다.');
       router.replace('/landing');
-      router.refresh(); // 서버 컴포넌트/세션 UI 갱신
     } catch (err) {
       console.error('로그아웃 실패:', err);
       alert('로그아웃에 실패했습니다.');

components/write/PostDetail.tsx

@@ -15,7 +15,6 @@ const Markdown = dynamic(
 const PostDetail = ({ tilId }: { tilId: string }) => {
   const router = useRouter();
   const [data, setData] = useState<Til | null>(null);
-  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     const unsub = auth.onAuthStateChanged(async (user) => {
@@ -26,13 +25,11 @@ const PostDetail = ({ tilId }: { tilId: string }) => {
 
       const post = await fetchMyTil(user.uid, tilId);
       setData(post);
-      setLoading(false);
     });
 
     return () => unsub();
   }, [tilId, router]);
 
-  if (loading) return <div className="min-h-screen p-6">로딩중...</div>;
   if (!data) return <div className="min-h-screen p-6">글이 없습니다.</div>;
 
   return (

hooks/useAuthGuard.ts

@@ -0,0 +1,44 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { onAuthStateChanged, type User } from 'firebase/auth';
+import { useRouter } from 'next/navigation';
+import { auth } from '@/lib/firebase';
+
+type UseAuthGuardOptions = {
+  /** 로그인 안 됐을 때 보낼 경로 */
+  redirectTo?: string;
+};
+
+type UseAuthGuardResult = {
+  user: User | null;
+  loading: boolean;
+  isAuthed: boolean;
+};
+
+export function useAuthGuard(
+  options: UseAuthGuardOptions = {}
+): UseAuthGuardResult {
+  const { redirectTo = '/login' } = options;
+
+  const router = useRouter();
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const unsub = onAuthStateChanged(auth, (u) => {
+      if (!u) {
+        setUser(null);
+        setLoading(true);
+        router.replace(redirectTo);
+        return;
+      }
+      setUser(u);
+      setLoading(false);
+    });
+
+    return () => unsub();
+  }, [router, redirectTo]);
+
+  return { user, loading, isAuthed: !!user };
+}