지역 페이지 CMS·SEO 운영 콘솔
MVP 이후의 확장으로 지역 페이지 트리 관리, 페이지별 SEO 메타 편집, 문의·예약 접수함, SEO 점검과 분석 연동 설정을 하나의 관리자 콘솔로 통합하는 구현한 프로젝트입니다.
프로젝트 개요
MVP 이후의 확장으로 지역 페이지 트리 관리, 페이지별 SEO 메타 편집, 문의·예약 접수함, SEO 점검과 분석 연동 설정을 하나의 관리자 콘솔로 통합하는 구현한 프로젝트입니다. 첫 번째 포트폴리오와 같은 Next.js·PostgreSQL 스택 위에 Redis 캐시와 이미지 저장소를 더해 설계합니다.
작업 범위
- 지역 페이지 트리 관리: 좌측 트리에서 지역 페이지를 선택하면 우측에 메타태그·H1·본문 블록·게시 상태를 편집하는 상세 패널이 열립니다
- 문의·예약 접수함: 접수된 문의와 예약을 좌측 목록에서 고르면 우측에 접수 내용, 유입 지역 페이지, 처리 상태와 메모가 표시되는 화면입니다
- SEO 점검 대시보드: 전체 지역 페이지의 메타 누락, 중복 Title, JSON-LD 필수 속성, 사이트맵 포함 여부를 목록과 상세 항목으로 점검하는 화면입니다
- 분석·검색엔진 연동 설정: GA4 측정 ID 삽입, 사이트맵 제출 안내, HTTPS 리다이렉트 상태를 설정하고 확인하는 연동 관리 화면입니다
주요 업무
- 지역 페이지 트리 관리 화면: 지역 페이지를 무제한으로 추가·수정·삭제할 수 있는 목록-상세 구조로, 목록 검색과 상태 필터를 함께 구현합니다
- 문의·예약 접수함 화면: 접수 상태(신규·확인·완료)를 단계별로 바꾸고 담당자 메모를 남기는 처리 흐름을 구현합니다
- SEO 점검 대시보드 화면: 페이지 단위 점검 규칙을 정의하고 항목별 통과·경고·오류 상태와 수정 바로가기를 제공하는 점검 엔진을 구현합니다
- 분석·검색엔진 연동 설정 화면: 측정 ID와 인증 설정을 관리자 화면에서 입력하면 방문자 사이트에 태그가 삽입되는 구조를 구현합니다
프로젝트 핵심 과제
지역 페이지 계층이 깊어질 때 이동·삭제가 하위 페이지의 URL과 사이트맵에 미치는 영향을 일관되게 반영하는 경로 갱신 로직 설계가 필요합니다
전체 페이지 SEO 점검이 오래 걸릴 수 있어
백그라운드 큐 실행과 진행 상태 표시 구조로 대응합니다
관리자가 같은 페이지를 동시에 편집하면 저장이 덮어써질 수 있어
버전 번호 기반 낙관적 잠금으로 충돌을 감지합니다
문의·예약 접수 상태가 여러 담당자에 의해 바뀔 때 이력의 순서가 어긋나지 않
트랜잭션 격리 수준을 설계합니다
핵심 기능 상세
지역 페이지 트리 관리
좌측 트리에서 지역 페이지를 선택하면 우측에 메타태그·H1·본문 블록·게시 상태를 편집하는 상세 패널이 열립니다.
- TanStack Query로 목록·상세 캐시를 분리하고 저장 시 낙관적 업데이트 적용
- 트리 구조는 부모-자식 경로(materialized path) 컬럼으로 저장해 하위 페이지 조회를 단순화
- Title·Description 글자 수 안내와 H1 중복 검사를 Zod 스키마와 실시간 입력 검증으로 구현
목록 선택 상태와 상세 패널을 URL 쿼리에 동기화해 편집 중인 페이지를 링크로 공유할 수 있는 구조를 설계합니다.
문의·예약 접수함
접수된 문의와 예약을 좌측 목록에서 고르면 우측에 접수 내용, 유입 지역 페이지, 처리 상태와 메모가 표시되는 화면입니다. 접수 상태(신규·확인·완료)를 단계별로 바꾸고 담당자 메모를 남기는 처리 흐름을 구현합니다.
- 접수 상태 전이 규칙을 서버에서 검증하는 상태 머신으로 구현
- Prisma 트랜잭션으로 상태 변경과 처리 이력 기록을 원자적으로 저장
- 지역·상태·기간 조건을 URL 쿼리로 유지하는 서버 사이드 필터링과 커서 페이지네이션 적용
접수 건에 유입 지역 페이지와 처리 이력을 연결해 지역별 문의 흐름을 한 화면에서 추적하는 구조를 구현합니다.
SEO 점검 대시보드
전체 지역 페이지의 메타 누락, 중복 Title, JSON-LD 필수 속성, 사이트맵 포함 여부를 목록과 상세 항목으로 점검하는 화면입니다.
- 점검 규칙을 함수 배열(rule registry)로 분리해 규칙 추가 시 화면 변경 없이 확장
- Bull Queue로 전체 페이지 점검을 백그라운드 작업으로 실행하고 진행 상태를 폴링으로 표시
- 점검 결과를 PostgreSQL에 스냅샷으로 저장해 이전 점검과의 차이를 비교
점검 규칙 레지스트리와 결과 스냅샷 비교로 수정 전후의 SEO 구조 변화를 확인할 수 있는 구조를 설계합니다.
분석·검색엔진 연동 설정
GA4 측정 ID 삽입, 사이트맵 제출 안내, HTTPS 리다이렉트 상태를 설정하고 확인하는 연동 관리 화면입니다.
- 측정 ID를 설정 테이블에 저장하고 레이아웃 서버 컴포넌트에서 조건부로 태그를 삽입
- 관리자 인증은 JWT 세션 쿠키(httpOnly)와 역할 기반 접근 제어 미들웨어로 구현
- 이미지는 S3 업로드 후 next/image 변환과 지연 로딩으로 제공
연동 설정 값이 방문자 사이트 렌더링에 반영되는 흐름과 관리자 접근 제어를 함께 구현합니다.
프로젝트 진행 단계
관리자 권한 모델과 페이지 트리 스키마 설계 · 2026.10
역할 기반 접근 제어, 경로 기반 페이지 트리, 접수 이력 테이블 설계
목록-상세 편집 콘솔 구현 · 2026.10
지역 페이지 트리, 메타 편집 패널, 게시 상태 관리 화면과 CRUD API 구현
접수함 처리 흐름과 상태 전이 개발 · 2026.10
접수 상태 머신, 처리 이력 트랜잭션, 필터링 API 구현
SEO 점검 엔진과 연동 설정 구현 · 2026.10
점검 규칙 레지스트리, Bull Queue 작업, GA4 설정과 S3 이미지 업로드 구현
개발 결과
기술적 주안점
- 목록 선택 상태와 상세 패널을 URL 쿼리에 동기화해 편집 중인 페이지를 링크로 공유할 수 있는 구조를 설계합니다
- 접수 건에 유입 지역 페이지와 처리 이력을 연결해 지역별 문의 흐름을 한 화면에서 추적하는 구조를 구현합니다
- 점검 규칙 레지스트리와 결과 스냅샷 비교로 수정 전후의 SEO 구조 변화를 확인할 수 있는 구조를 설계합니다
