프로젝트 개요
인사이트·팝업·연혁·구성원을 비개발자가 직접 관리하는 Strapi 지향 헤드리스 CMS 콘솔을 구현하는 확장 프로젝트입니다. 역할별 권한, 변경 이력, 미리보기와 재검증, SEO 메타 관리까지 MVP 이후의 운영 로드맵을 한 화면 체계로 설계합니다.
작업 범위
- 인사이트 편집·발행 관리: 블록 트리로 글 구조를 편집하고, 임시저장·예약·발행 상태를 전환하며 작성 중인 글을 미리 확인하는 화면입니다
- 팝업·연혁·구성원 CRUD: 메인 팝업의 노출 기간, 연혁 항목, 구성원 프로필을 등록·수정·삭제하고 노출 순서를 끌어서 바꾸는 관리 화면입니다
- 역할 권한·변경 이력: 관리자·편집자·검토자 역할별로 메뉴와 동작을 제한하고, 콘텐츠 변경 내역을 비교해 확인하는 화면입니다
- SEO 메타·재검증 관리: 페이지별 검색 제목·설명·공유 이미지를 입력하고 검색·공유 미리보기를 보며, 필요한 경로의 재검증을 수동으로 요청하는 화면입니다
주요 업무
- 인사이트 편집·발행 관리 화면: 글 본문을 블록 단위로 저장하고 발행 상태를 상태 머신으로 관리하며, 발행 시 홈페이지 재검증 요청을 보냅니다
- 팝업·연혁·구성원 CRUD 화면: 목록과 상세 패널을 한 화면에 두고, 순서 변경은 정렬 필드를 한 번에 저장하는 방식으로 구성합니다
- 역할 권한·변경 이력 화면: 역할별 권한을 콘텐츠 타입×동작 표로 정의하고, 저장 시 변경 전후 값을 이력 테이블에 함께 기록합니다
- SEO 메타·재검증 관리 화면: SEO 필드의 권장 길이를 검사하고 누락 항목을 목록으로 모아 보여주며, 경로 단위 재검증 요청 이력을 남깁니다
프로젝트 핵심 과제
발행 직후 홈페이지 정적 페이지가 갱신되기까지 CMS 미리보기와 공개 화면의 내용이 다르게 보이는 시간차를 안내하는 재검증 흐름 설계
여러 편집자가 같은 글을 동시에 열었을 때 덮어쓰기를 막는 낙관적 잠금과 충돌 안내 화면 설계
블록 단위 본문을 이력으로 비교할 때 이동·삽입된 블록을 변경으로 정확히 구분하는 diff 규칙 설계
팝업 노출 기간이 겹칠 때 우선순위와 자동 종료를 서버에서 일관되게 판정하는 규칙 설계
핵심 기능 상세
인사이트 편집·발행 관리
블록 트리로 글 구조를 편집하고, 임시저장·예약·발행 상태를 전환하며 작성 중인 글을 미리 확인하는 화면입니다.
- 블록 단위 JSON 본문 모델과 Tiptap 에디터로 서식·이미지·인용 블록 편집
- 임시저장·검토·발행 3단계를 허용 전이 표로 관리하는 상태 머신 설계
- 발행 이벤트에서 Next.js revalidate 웹훅을 호출하는 재검증 연동
글 구조 편집, 상태 전환, 미리보기, 재검증 호출을 하나의 편집 흐름으로 묶는 구조를 구현하도록 설계합니다.
팝업·연혁·구성원 CRUD
메인 팝업의 노출 기간, 연혁 항목, 구성원 프로필을 등록·수정·삭제하고 노출 순서를 끌어서 바꾸는 관리 화면입니다.
- dnd-kit 기반 드래그 정렬과 정렬 필드 일괄 저장 구현
- 팝업 노출 시작·종료 일시를 서버에서 검증하는 기간 겹침 규칙 설계
- React Hook Form과 Zod로 구성원 프로필 입력 유효성 검증
세 종류의 콘텐츠를 동일한 목록·상세 패턴으로 관리해 비개발자가 한 번 익히면 모든 메뉴를 쓸 수 있는 구조를 설계합니다.
역할 권한·변경 이력
관리자·편집자·검토자 역할별로 메뉴와 동작을 제한하고, 콘텐츠 변경 내역을 비교해 확인하는 화면입니다. 역할별 권한을 콘텐츠 타입×동작 표로 정의하고, 저장 시 변경 전후 값을 이력 테이블에 함께 기록합니다.
- 콘텐츠 타입×동작(조회·작성·발행·삭제) 권한 표를 정책 미들웨어로 적용
- 저장 트랜잭션 안에서 변경 전후 JSON diff를 이력 테이블에 기록
- 이력 비교 화면에서 필드별 변경 전후 값을 나란히 표시
권한 표를 한 곳에서 정의하고 API·메뉴·버튼 노출에 같은 기준을 적용하며, 변경 전후 비교가 가능한 이력 구조를 구현하도록 설계합니다.
SEO 메타·재검증 관리
페이지별 검색 제목·설명·공유 이미지를 입력하고 검색·공유 미리보기를 보며, 필요한 경로의 재검증을 수동으로 요청하는 화면입니다.
- 제목·설명 글자 수 권장 범위를 입력 중 실시간 검사하는 폼 구성
- 검색 결과와 공유 카드 미리보기를 입력값으로 즉시 렌더링
- 경로 단위 revalidatePath 호출 결과를 재검증 이력 테이블에 저장
메타 입력, 미리보기, 재검증 요청과 결과 기록을 한 화면에 모아 비개발자도 검색 노출 설정을 직접 점검하도록 설계합니다.
프로젝트 진행 단계
콘텐츠 타입·권한 모델 설계 · 2026.10
인사이트·팝업·연혁·구성원 스키마와 역할×동작 권한 표, 이력 테이블 ERD 설계
Strapi 커스터마이징·정책 구현 · 2026.10
콘텐츠 타입 생성, 라이프사이클 훅으로 이력 기록, 정책 미들웨어 적용
블록 에디터·관리 콘솔 UI 개발 · 2026.10
블록 트리 편집 화면, 목록·상세 패널, 드래그 정렬 컴포넌트 구현
미리보기·재검증·배포·매뉴얼 · 2026.10
Draft Mode 미리보기, 재검증 웹훅, S3 업로드 설정, 배포 환경 구성, 관리자 매뉴얼 작성
개발 결과
기술적 주안점
- 글 구조 편집, 상태 전환, 미리보기, 재검증 호출을 하나의 편집 흐름으로 묶는 구조를 구현하도록 설계합니다
- 세 종류의 콘텐츠를 동일한 목록·상세 패턴으로 관리해 비개발자가 한 번 익히면 모든 메뉴를 쓸 수 있는 구조를 설계합니다
- 권한 표를 한 곳에서 정의하고 API·메뉴·버튼 노출에 같은 기준을 적용하며, 변경 전후 비교가 가능한 이력 구조를 구현하도록 설계합니다
