🚀 Next.js + Firebase로 만드는 풀스택 웹앱 실전 프로젝트

🎯 목표

• 사용자별 문서 소유(UID) 구조 설계
• 공개/비공개(isPublic) 필드로 접근 제어
• 목록‧등록‧상세‧수정‧삭제 구현
• 실시간(onSnapshot) 목록 반영

0) Firestore 규칙(개발→실전형으로 강화)

Firestore Rules

// 콘솔 > Firestore Database > 규칙
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {

    match /posts/{postId} {
      // 읽기: 공개글이거나, 내 글이면 허용
      allow read: if resource.data.isPublic == true
                  || (request.auth != null && request.auth.uid == resource.data.uid);

      // 생성: 로그인 상태이며, 본인 UID로만 생성 가능
      allow create: if request.auth != null
                    && request.resource.data.uid == request.auth.uid
                    && request.resource.data.title is string
                    && request.resource.data.title.size() > 0
                    && request.resource.data.title.size() <= 120;

      // 수정/삭제: 소유자만
      allow update, delete: if request.auth != null
                            && request.auth.uid == resource.data.uid;
    }
  }
}

이 규칙이 보장하는 것

• 소유권(UID) 기반 접근 제어: 문서의 uid가 request.auth.uid와 같을 때만 쓰기(수정/삭제) 허용
• 공개/비공개: isPublic == true면 누구나 읽기 허용, 아니면 소유자만 읽기 가능
• 생성 유효성: 로그인 상태에서만 생성, 그리고 클라이언트가 보낸 uid가 본인 UID와 동일해야 함. title은 문자열/길이 제한 검사.

세부 해설

• allow read: if resource.data.isPublic == true || (request.auth != null && request.auth.uid == resource.data.uid);

  → 비공개 글은 문서 소유자만 읽기. 공개 글은 전체 읽기 가능.

• allow create: if request.auth != null && request.resource.data.uid == request.auth.uid && ...

  → 위임 쓰기 방지(남의 UID로 문서 생성 차단). title의 타입·길이 체크로 기본 밸리데이션까지 수행.

• allow update, delete: if request.auth != null && request.auth.uid == resource.data.uid;

  → 문서가 이미 존재하므로 resource.data.uid(기존 문서의 uid) 기준으로 소유자만 수정/삭제 허용.

팁

• 규칙에서 serverTimestamp()는 타입이 timestamp로 저장됩니다. 목록 정렬 시 createdAt이 null일 수 있으니 초기 렌더에서 null 안전하게 처리하세요.
• 실서비스에서는 title 외에도 content 길이, 금칙어 등 추가 검사로 악성 입력을 줄일 수 있습니다.

포인트

• 모든 문서에 uid, isPublic, createdAt, updatedAt를 유지합니다.
• 공개글은 모두 읽기 가능, 비공개는 소유자만 읽기/수정/삭제 가능.

1) 타입 정의

• Firestore 문서 스키마를 TypeScript 타입으로 고정해 빌드타임에 오류를 줄입니다.
• createdAt/updatedAt는 Firestore Timestamp 객체(seconds/nanoseconds). 렌더 시 new Date(seconds*1000) 등으로 변환해 사용합니다.

types/post.ts

export type Post = {
  id: string;
  uid: string;
  title: string;
  content?: string;
  isPublic: boolean;
  createdAt?: { seconds: number; nanoseconds: number } | null;
  updatedAt?: { seconds: number; nanoseconds: number } | null;
};

포인트

• id는 문서 ID(컬렉션 내부 키). Firestore에서 doc.id로 획득.
• content는 선택 필드(?). 에디터/요약 목록에서 undefined 방어 필요.

2) 글 작성 폼(재사용 컴포넌트)

components/PostForm.tsx

'use client';

import { useState, FormEvent } from 'react';

type Props = {
  initial?: { title?: string; content?: string; isPublic?: boolean };
  submitText?: string;
  onSubmit: (data: {
    title: string;
    content: string;
    isPublic: boolean;
  }) => Promise<void>;
};

export default function PostForm({
  initial,
  submitText = '저장',
  onSubmit,
}: Props) {
  const [title, setTitle] = useState(initial?.title ?? '');
  const [content, setContent] = useState(initial?.content ?? '');
  const [isPublic, setIsPublic] = useState(initial?.isPublic ?? true);
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState<string | null>(null);

  const handle = async (e: FormEvent) => {
    e.preventDefault();
    if (!title.trim()) return setErr('제목을 입력하세요.');
    setErr(null);
    setLoading(true);
    try {
      await onSubmit({
        title: title.trim(),
        content: content.trim(),
        isPublic,
      });
    } catch (e: any) {
      setErr(e?.message ?? '저장 실패');
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handle} style={{ display: 'grid', gap: 12 }}>
      <input
        placeholder='제목'
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        style={{ padding: 10, border: '1px solid #ddd', borderRadius: 8 }}
      />
      <textarea
        placeholder='내용(선택)'
        value={content}
        onChange={(e) => setContent(e.target.value)}
        rows={8}
        style={{ padding: 10, border: '1px solid #ddd', borderRadius: 8 }}
      />
      <label style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <input
          type='checkbox'
          checked={isPublic}
          onChange={(e) => setIsPublic(e.target.checked)}
        />
        공개글로 등록
      </label>
      {err && <p style={{ color: 'crimson', fontSize: 14 }}>{err}</p>}
      <button
        disabled={loading}
        style={{ padding: '10px 12px', borderRadius: 8 }}
      >
        {loading ? '처리 중…' : submitText}
      </button>
    </form>
  );
}

역할

• 등록/수정 공용 폼 컴포넌트. 상위에서 onSubmit만 주입받아 동작합니다.

동작 흐름

1. 초기값(initial)을 상태에 주입 → 등록/수정 둘 다 지원
2. 제출 시:
   • title 공백 검사(UX 레벨 1차 밸리데이션)
   • onSubmit({ title, content, isPublic }) 호출
   • 오류 발생 시 err 상태에 메시지 표시
3. 버튼 disabled={loading}로 중복 제출 방지

장점

• 비즈니스 로직(Firestore add/update)은 페이지에서 담당, UI는 폼 컴포넌트로 분리 → 관심사 분리로 유지보수 용이.

3) 목록 페이지(실시간, 공개/내 글 토글)

app/posts/page.tsx

'use client';

import { useEffect, useMemo, useState } from 'react';
import Link from 'next/link';
import { auth, db } from '@/lib/firebase.client';
import { collection, onSnapshot, orderBy, query, where } from 'firebase/firestore';
import type { Post } from '@/types/post';
import { onAuthStateChanged } from 'firebase/auth';

export default function PostsPage() {
  const [posts, setPosts] = useState<Post[]>([]);
  const [mine, setMine] = useState(false);
  const [uid, setUid] = useState<string | null>(null);

  useEffect(() => {
    const unsubAuth = onAuthStateChanged(auth, (u) => setUid(u ? u.uid : null));
    return () => unsubAuth();
  }, []);

  const qRef = useMemo(() => {
    const base = collection(db, 'posts');
    // 공개글만 or 내 글만
    return mine && uid
      ? query(base, where('uid', '==', uid), orderBy('createdAt', 'desc'))
      : query(base, where('isPublic', '==', true), orderBy('createdAt', 'desc'));
  }, [mine, uid]);

  useEffect(() => {
    const unsub = onSnapshot(qRef, (snap) => {
      const list = snap.docs.map(d => ({ id: d.id, ...(d.data() as any) })) as Post[];
      setPosts(list);
    });
    return () => unsub();
  }, [qRef]);

  return (
    <main style={{maxWidth:800,margin:'40px auto',padding:16}}>
      <h1>게시글 목록</h1>
      <div style={{display:'flex',gap:12,alignItems:'center',margin:'12px 0'}}>
        <label style={{display:'flex',gap:8,alignItems:'center'}}>
          <input type="checkbox" checked={mine} onChange={(e)=>setMine(e.target.checked)} />
          내 글만 보기
        </label>
        <Link href="/posts/new" style={{marginLeft:'auto'}}>+ 새 글</Link>
      </div>

      <ul style={{display:'grid',gap:10}}>
        {posts.map(p => (
          <li key={p.id} style={{border:'1px solid #eee',borderRadius:8,padding:12}}>
            <Link href={`/posts/${p.id}`} style={{fontWeight:600}}>{p.title}</Link>
            <div style={{fontSize:12,opacity:.7,marginTop:6}}>
              {p.isPublic ? '공개' : '비공개'} · {p.uid.slice(0,6)}…
            </div>
          </li>
        ))}
        {posts.length === 0 && <p>글이 없습니다.</p>}
      </ul>
    </main>
  );
}

🔎 인덱스 에러가 나면 콘솔에서 제공하는 링크로 복합 인덱스 생성을 해주세요

(예: where('uid','==') + orderBy('createdAt') 조합).

역할

• 공개글 혹은 내 글만 보기 필터 제공
• onSnapshot으로 실시간 반영 (등록/수정/삭제 즉시 업데이트)

동작 순서

1. onAuthStateChanged로 현재 사용자 UID 상태(uid) 유지
2. mine(내 글만 보기)와 uid에 따라 쿼리 분기:
   • 공개글: where('isPublic','==',true) + orderBy('createdAt','desc')
   • 내 글: where('uid','==',uid) + orderBy('createdAt','desc')
3. onSnapshot(qRef, ...) 구독으로 문서 변경사항 실시간 수신 → setPosts(list)
4. 언마운트 시 unsub()로 구독 해제

주의(인덱스)

• where + orderBy 조합은 복합 인덱스가 필요할 수 있습니다. 콘솔 에러의 “Create index” 링크로 생성하세요.

UX 포인트

• posts.length === 0일 때 안내 문구
• 리스트 항목엔 title + 메타(isPublic, uid.slice(0,6))

4) 새 글 작성 (소유자 UID로 저장)

hooks/useAuth.ts

'use client';

import { useEffect, useState } from 'react';
import { auth } from '@/lib/firebase.client';
import { onAuthStateChanged, User } from 'firebase/auth';

export function useAuth() {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const unsub = onAuthStateChanged(auth, (u) => {
      setUser(u);
      setLoading(false);
    });
    return () => unsub();
  }, []);
  return { user, loading };
}

역할

• 페이지/컴포넌트에서 쉽게 로그인 상태를 재사용하기 위한 경량 훅.

동작

• 마운트 시 onAuthStateChanged 구독 → { user, loading } 반환
• 초기에 loading=true로 시작하여 복원 완료 시 false. 이 값으로 깜박임 방지.

app/posts/new/page.tsx

'use client';

import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { addDoc, collection, serverTimestamp } from 'firebase/firestore';
import { db } from '@/lib/firebase.client';
import PostForm from '@/components/PostForm';
import { useAuth } from '@/hooks/useAuth';

export default function NewPostPage() {
  const router = useRouter();
  const { user, loading } = useAuth();

  useEffect(() => {
    if (!loading && !user) router.replace('/login');
  }, [loading, user, router]);

  if (loading) return null; // 또는 스켈레톤 UI
  if (!user) return null; // 리다이렉트 직전 깜빡임 방지

  const create = async (data: {
    title: string;
    content: string;
    isPublic: boolean;
  }) => {
    const docRef = await addDoc(collection(db, 'posts'), {
      uid: user.uid,
      title: data.title,
      content: data.content,
      isPublic: data.isPublic,
      createdAt: serverTimestamp(),
      updatedAt: serverTimestamp(),
    });
    router.replace(`/posts/${docRef.id}`);
  };

  return (
    <main style={{ maxWidth: 720, margin: '40px auto', padding: 16 }}>
      <h1>새 글 작성</h1>
      <PostForm onSubmit={create} submitText='등록' />
    </main>
  );
}

역할

• 소유자 UID로 문서를 생성하고, serverTimestamp()로 시간 기록.

동작 순서

1. useAuth()로 로그인 여부 확인
   • 비로그인: router.replace('/login') (뒤로가기로 다시 진입하지 않도록 replace)
2. PostForm 제출 → addDoc(collection('posts'), { ... }):
   • uid: user.uid(소유권 명시)
   • createdAt/updatedAt: serverTimestamp()(서버 시간 기준)
3. 생성 후 상세 페이지로 이동: router.replace('/posts/{docId}')

보안 연계

• 규칙에서 create 시 uid 동일성을 검사하므로, 클라이언트가 잘못된 UID를 보내면 거부됩니다.

5) 상세/수정/삭제 (소유자만 수정 노출)

app/posts/[id]/page.tsx

'use client';

import { useEffect, useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { auth, db } from '@/lib/firebase.client';
import {
  deleteDoc,
  doc,
  getDoc,
  updateDoc,
  serverTimestamp,
} from 'firebase/firestore';
import { onAuthStateChanged } from 'firebase/auth';
import type { Post } from '@/types/post';
import PostForm from '@/components/PostForm';

export default function PostDetailPage() {
  const { id } = useParams<{ id: string }>();
  const router = useRouter();
  const [post, setPost] = useState<Post | null>(null);
  const [uid, setUid] = useState<string | null>(null);
  const [editing, setEditing] = useState(false);

  useEffect(() => onAuthStateChanged(auth, (u) => setUid(u?.uid ?? null)), []);
  useEffect(() => {
    const load = async () => {
      const snap = await getDoc(doc(db, 'posts', id));
      if (!snap.exists()) return router.replace('/posts');
      setPost({ id: snap.id, ...(snap.data() as any) });
    };
    load();
  }, [id, router]);

  const isOwner = uid && post && uid === post.uid;

  const update = async (data: {
    title: string;
    content: string;
    isPublic: boolean;
  }) => {
    await updateDoc(doc(db, 'posts', id), {
      title: data.title,
      content: data.content,
      isPublic: data.isPublic,
      updatedAt: serverTimestamp(),
    });
    setEditing(false);
    // 상세 재조회
    const snap = await getDoc(doc(db, 'posts', id));
    setPost({ id: snap.id, ...(snap.data() as any) });
  };

  const remove = async () => {
    if (!confirm('삭제하시겠습니까?')) return;
    await deleteDoc(doc(db, 'posts', id));
    router.replace('/posts');
  };

  if (!post) return null;

  return (
    <main style={{ maxWidth: 720, margin: '40px auto', padding: 16 }}>
      {!editing ? (
        <>
          <h1>{post.title}</h1>
          {post.content && (
            <p style={{ whiteSpace: 'pre-wrap', marginTop: 12 }}>
              {post.content}
            </p>
          )}
          <div style={{ fontSize: 12, opacity: 0.7, marginTop: 8 }}>
            {post.isPublic ? '공개' : '비공개'} · 작성자 {post.uid.slice(0, 6)}…
          </div>
          {isOwner && (
            <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
              <button
                onClick={() => setEditing(true)}
                style={{ padding: '8px 12px', borderRadius: 8 }}
              >
                수정
              </button>
              <button
                onClick={remove}
                style={{
                  padding: '8px 12px',
                  borderRadius: 8,
                  border: '1px solid #f33',
                  color: '#f33',
                }}
              >
                삭제
              </button>
            </div>
          )}
        </>
      ) : (
        <>
          <h1>글 수정</h1>
          <PostForm
            initial={{
              title: post.title,
              content: post.content,
              isPublic: post.isPublic,
            }}
            submitText='수정 완료'
            onSubmit={update}
          />
          <button onClick={() => setEditing(false)} style={{ marginTop: 12 }}>
            취소
          </button>
        </>
      )}
    </main>
  );
}

역할

• 문서 상세 보기 + 소유자만 수정/삭제 버튼 노출

동작 순서

1. URL 파라미터 id로 문서 로드(getDoc)
   • 없으면 /posts로 리다이렉트
2. onAuthStateChanged로 현재 uid 유지
3. isOwner = uid === post.uid로 권한 판정
4. 수정:
   • PostForm에 initial 전달 → 편집 완료 시 updateDoc + updatedAt: serverTimestamp()
   • 저장 후 최신 데이터를 재조회하여 화면 갱신
5. 삭제:
   • confirm 후 deleteDoc → /posts로 이동

규칙과의 상호작용

• 수정/삭제는 소유자만 허용(rules의 update, delete 조건)
• 타인 문서 수정/삭제를 시도하면 권한 에러 발생(Firestore가 서버에서 차단)

UX 팁

• 로딩/에러 상태를 분리 렌더하면 사용자 경험이 좋아집니다.
• 타이틀만 있는 최소 렌더 후 본문/메타를 점진적 노출해도 좋습니다.

6) 헤더 수정

HeaderAuth 컴포넌트에 “Posts” 메뉴를 추가해서 로그인/비로그인 상관없이 접근 가능하게 구성해보겠습니다. 이 메뉴는 /posts 목록 페이지로 이동합니다.

✅ 수정된 components/HeaderAuth.tsx

'use client';

import { useEffect, useState } from 'react';
import { auth } from '@/lib/firebase.client';
import { onAuthStateChanged, signOut, User } from 'firebase/auth';
import Link from 'next/link';

export default function HeaderAuth() {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const unsub = onAuthStateChanged(auth, (u) => {
      setUser(u);
      setLoading(false);
    });
    return () => unsub();
  }, []);

  if (loading) return null;

  return (
    <header
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: 16,
        padding: '12px 16px',
        borderBottom: '1px solid #eee',
      }}
    >
      {/* 왼쪽 네비게이션 */}
      <nav style={{ display: 'flex', gap: 12 }}>
        <Link href='/'>Home</Link>
        <Link href='/posts'>Posts</Link>
        <Link href='/dashboard'>Dashboard</Link>
      </nav>

      {/* 오른쪽 로그인/로그아웃 영역 */}
      <div style={{ marginLeft: 'auto' }}>
        {user ? (
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <span style={{ fontSize: 14, opacity: 0.8 }}>
              안녕하세요, {user.email}
            </span>
            <button
              onClick={() => signOut(auth)}
              style={{
                padding: '6px 10px',
                border: '1px solid #ddd',
                borderRadius: 8,
                background: 'white',
              }}
            >
              로그아웃
            </button>
          </div>
        ) : (
          <div style={{ display: 'flex', gap: 12 }}>
            <Link href='/login'>로그인</Link>
            <Link href='/signup'>회원가입</Link>
          </div>
        )}
      </div>
    </header>
  );
}

목적

• Posts 메뉴를 추가해 누구나 목록 페이지로 접근 가능(공개글은 전체 읽기 허용).
• Dashboard는 로그인 전용.

내비게이션 원칙

• 인증 흐름: 보호 페이지는 AuthGate/리다이렉트로 접근 제어
• 공개 영역: Posts는 공개글 우선, 로그인 시 “내 글만 보기”로 개인 필터 제공

✨ 설명

7) 동작 체크리스트

• /posts에서 공개글 목록 보임
• “내 글만 보기” 체크 시 내 UID 글만 실시간 표기
• /posts/new에서 등록 → 상세 페이지 이동
• 상세에서 소유자만 “수정/삭제” 버튼 노출
• 규칙 위반(타인 글 수정/삭제) 시 권한 에러 발생

실제로 동작 테스트를 하다보면 정렬 색인이 생성되지 않아서 다음과 같은 에러가 납니다.

다음 에러는 Firestore 복합 인덱스가 없어 쿼리를 실행할 수 없다는 뜻입니다.

FirebaseError: [code=failed-precondition]: The query requires an index.

콘솔에 “You can create it here” 링크가 같이 뜨죠. 그 링크가 필요한 인덱스를 미리 채워둔 생성 링크입니다.

왜 생기나요?

• where()가 2개 이상이거나

• where() + orderBy()를 서로 다른 필드로 쓰거나

• in / array-contains-any와 orderBy를 같이 쓰는 등

  단일 인덱스로는 못 커버할 때 복합 인덱스가 필요합니다.

이 에러는 Firestore를 다루다보면 자주 나는 에러로 해결책은 콘솔의 에러 링크를 클릭해서 Firestore 복합 인덱스를 생성하면 됩니다.

혹 클릭이 안되면 드래그해서 복붙해서 링크로 이동해주세요.

이렇게 상태가 변경되면 복합 인덱스가 정상적으로 생성된 것입니다.

내 글만 보기 체크시에도 복합 인덱스로 인해서 에러가 뜨기 때문에 한번더 링크를 타고 들어가 복합 인덱스를 생성해줍니다.

이제 게시글 목록에서 정상적으로 게시글이 보이는 것을 확인할 수 있습니다.

실습저장소

GitHub - heroyooi/nextjs-firebase at ch1_3