Merge pull request #42 from DeveloperBlog-Devflow/feature/layout

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,13 @@ export default function SidebarLayout({
 }: {
   children: React.ReactNode;
 }) {
+  const { loading, isAuthed } = useAuthGuard({ redirectTo: '/login' });
+
+  if (loading) return <div>로딩중...</div>;
+  if (!isAuthed) {
+    return null;
+  }
+
   return (
     <div className="flex">
       <Sidebar />

components/auth/LoginForm.tsx

@@ -22,12 +22,19 @@ const LoginForm = ({ handleOpenModal }: LoginFormProps) => {
 
   const router = useRouter();
 
+  // 쿠키 설정 헬퍼 함수
+  const setLoginCookie = () => {
+    // 7일간 유지되는 쿠키 설정
+    document.cookie = 'isLoggedIn=true; path=/; max-age=' + 60 * 60 * 24 * 7;
+  };
+
   const handleGithubLogin = async () => {
     if (isLoading) return;
     setIsLoading(true);
     setError('');
     try {
       await signupWithGithub();
+      setLoginCookie(); // 쿠키 설정
       router.push('/');
     } catch (err: unknown) {
       setError('Github 로그인에 실패했습니다.');
@@ -58,6 +65,7 @@ const LoginForm = ({ handleOpenModal }: LoginFormProps) => {
         password
       );
       // console.log('로그인 성공!', userCredential.user);
+      setLoginCookie(); // 쿠키 설정
       router.push('/');
     } catch (err) {
       // console.error('로그인 에러:', err);

components/common/Sidebar.tsx

@@ -26,8 +26,10 @@ const Sidebar = () => {
   const handleLogout = async (): Promise<void> => {
     try {
       await signOut(auth);
+      document.cookie =
+        'isLoggedIn=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
+      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 };
+}

middleware.ts

@@ -0,0 +1,28 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+
+  // 쿠키에서 isLoggedIn 확인
+  const isLoggedIn = request.cookies.get('isLoggedIn')?.value === 'true';
+
+  if (pathname === '/') {
+    // 로그인이 안 된 경우에만 랜딩으로 보냄
+    if (!isLoggedIn) {
+      return NextResponse.redirect(new URL('/landing', request.url));
+    }
+    // 로그인 된 상태라면 그대로 루트('/')를 보여줌
+    return NextResponse.next();
+  }
+
+  if (pathname === '/landing' && isLoggedIn) {
+    return NextResponse.redirect(new URL('/', request.url));
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ['/', '/landing'],
+};