방문자는 Next.js 공개 페이지를 통해 Firestore REST API로 공개 데이터를 조회합니다. 소유자는 Google 로그인과 관리자 권한 확인 후 Firebase SDK로 콘텐츠와 공개 상태를 저장합니다. Firestore 보안 규칙이 공개 읽기와 관리자 전용 쓰기 및 비공개 메모를 구분합니다.
App Router · 공개 화면
서버에서 발행된 포스트와 프로젝트를 읽어 목록·상세 화면을 표시합니다.
관리자 · Firebase SDK
Google 로그인과 관리자 권한 확인 후 콘텐츠와 발행 상태를 저장합니다.
Firestore · 접근 제어
콘텐츠·상세·비공개 메모·프로필을 분리하고 보안 규칙으로 쓰기 권한을 제어합니다.
기술 선택 이유
Next.js App Router
공개 페이지는 서버에서 데이터를 조회하고 편집 화면은 클라이언트 컴포넌트로 구성합니다.
Firebase Authentication · Firestore (NoSQL)
Google 로그인과 NoSQL 문서 저장을 연동합니다. 컬렉션별로 콘텐츠를 구분하고 문서의 published 필드로 공개 여부를 관리하며 DB 보안 규칙에서 관리자 권한을 검사합니다.
DB · API · 인프라 구조
NoSQL 컬렉션 · 문서 구조
Firestore의 컬렉션 안에 slug를 ID로 하는 문서를 저장합니다. posts·projects는 콘텐츠, caseStudies는 공개 상세, privateCaseStudies는 비공개 메모, projectVisibility는 공개 상태, admins는 권한 등록에 사용합니다.
API와 읽기 경로
공개 페이지는 Firestore REST API를 사용하고, 관리자 기본값 API는 Firebase 토큰 검증과 관리자 권한 검사를 거칩니다. 편집 화면은 Firebase SDK로 저장합니다.
핵심 처리 흐름
01. 로그인과 권한 확인
Google 로그인 후 소유자 계정 설정과 관리자 문서를 확인합니다.
02. 콘텐츠 저장
포스트와 프로젝트를 저장하고 포트폴리오의 공개 상태를 함께 기록합니다.
03. 공개 페이지 반영
발행된 콘텐츠를 서버에서 조회해 공개 목록과 상세에 표시합니다.
03 / RESULTS & VALIDATION
결과/검증 — 그래서 무엇이 좋아졌는가
실제 서비스 적용 여부
현재 포트폴리오 사이트에 사용되는 프로젝트입니다. Firebase 연결과 공개 조회 응답을 확인했습니다.
관리 화면에서 편집
코드 수정 없이 포스트와 포트폴리오 내용을 저장할 수 있는 관리 화면을 구현했습니다. 실제 계정의 CRUD 실행 검증은 별도로 진행해야 합니다.
권한과 공개 화면 검증
토큰 검증·계정 제한·Markdown 보안 테스트와 공개 페이지·모바일·보안 헤더 브라우저 테스트를 실행했습니다.
검증 방법과 근거
로컬 린트와 프로덕션 빌드, 보안 단위 테스트, Playwright 브라우저 회귀 테스트로 확인했습니다. 관리자 계정 설정 및 Firestore 규칙 게시 후 실제 저장·삭제 검증이 필요합니다.
