← 포트폴리오 목록

스포츠 레슨 이벤트·콘텐츠 운영 콘솔

홍보 사이트 오픈 뒤 담당자가 사용할 이벤트·콘텐츠 운영 콘솔을 제안하는 확장 구현한 프로젝트입니다.

프로젝트 납품 요약

아래 프로젝트 개요와 핵심 기능에서 구현 화면을 확인할 수 있습니다.

서비스 타입Web
업종플랫폼
기술 스택
React 18TypeScriptTailwind CSSViteNode.jsExpressPrismaPostgreSQL
주요 기능
  • 운영 현황
  • 이벤트 관리
  • 템플릿·콘텐츠
  • 게시·배포

프로젝트 개요

범위: 개발, 디자인, 기획

홍보 사이트 오픈 뒤 담당자가 사용할 이벤트·콘텐츠 운영 콘솔을 제안하는 확장 구현한 프로젝트입니다. 이벤트 등록과 콘텐츠 교체, 공통 템플릿 관리, 게시 상태와 예약 게시, 배포 안내를 한 콘솔에서 다루는 구조를 보여 줍니다.

작업 범위

  • 운영 현황: 담당자가 진행 중 이벤트와 게시 예정 건, 새로 올라온 초안을 처리 카드로 봅니다. 카드를 누르면 해당 목록이 필터가 걸린 채 열립니다
  • 이벤트 관리: 담당자가 이벤트 목록을 상태와 기간으로 걸러 보고 새 이벤트를 등록하거나 기존 이벤트의 문구·이미지·관련 링크를 교체합니다. 저장 전에 방문자 화면 미리보기로 확인합니다
  • 템플릿·콘텐츠: 담당자가 이벤트 공통 템플릿의 구성 블록과 서비스 소개 문구를 수정합니다. 블록 순서를 바꾸고 노출을 끄면 방문자 화면 미리보기에 바로 반영됩니다
  • 게시·배포: 담당자가 이벤트 게시 상태를 초안·예약·게시·종료로 관리하고 예약 시각을 지정합니다. 배포 단계 확인 목록과 운영 안내를 한 화면에서 봅니다

주요 업무

  • 운영 현황 화면: 처리 카드 줄, 최근 수정 이벤트 표, 이번 주 게시 예정 이벤트 목록, 사이트 상태 표시 구조를 설계합니다
  • 이벤트 관리 화면: 이벤트 표, 상태 칩, 등록·수정 대화상자, 이미지 교체, 방문자 화면 미리보기, 복제 버튼 구조를 설계합니다
  • 템플릿·콘텐츠 화면: 템플릿 블록 목록과 순서 변경, 블록별 노출 토글, 소개 문구 편집, 변경 이력 구조를 설계합니다
  • 게시·배포 화면: 게시 상태 표, 예약 시각 지정, 게시 되돌리기, 배포 점검 목록, 운영 안내 문서 목록 구조를 설계합니다
스포츠 레슨 이벤트·콘텐츠 운영 콘솔
요구사항 정의

프로젝트 핵심 과제

프로젝트 진행 시 해결한 핵심 기술 과제입니다.

이벤트 구조가 후속 프로모션에서 달라질 수

템플릿 블록을 데이터로 정의하고 필드 추가에 대응하는 설계 필요

담당자가 개발 지식 없이 콘텐츠를 교체해야 하므로 미리보기와 입력 검증 중심의 화면 설계

호스팅 환경이 협의 대상이라 예약 게시 작업과 배포 점검 항목을 환경별 설정값으로 분리하는 설계

지원사업 검수 자료가 필요할 수

변경 이력과 배포 점검 기록을 남기는 구조 설계 필요

구현 내용

핵심 기능 상세

핵심 기능 1

운영 현황

담당자가 진행 중 이벤트와 게시 예정 건, 새로 올라온 초안을 처리 카드로 봅니다. 카드를 누르면 해당 목록이 필터가 걸린 채 열립니다.

  • 이벤트 상태별 건수와 예약 건수를 한 요약 쿼리로 집계해 카드에 연결
  • 카드 클릭 시 쿼리 파라미터로 필터를 전달해 목록 건수와 카드 숫자가 같도록 구성
  • 게시 예정 시각을 기준으로 이번 주 목록을 조회

카드 숫자와 목록 건수가 같은 집계 쿼리를 쓰도록 구성해 화면 간 수치가 어긋나지 않게 구현합니다.

운영 현황
운영 현황 실제 화면
핵심 기능 2

이벤트 관리

담당자가 이벤트 목록을 상태와 기간으로 걸러 보고 새 이벤트를 등록하거나 기존 이벤트의 문구·이미지·관련 링크를 교체합니다. 저장 전에 방문자 화면 미리보기로 확인합니다.

  • 이벤트 데이터를 JSON 스키마로 검증하고 오류 칸을 표시하는 등록 API 구현
  • 수정 내용을 저장 전 미리보기와 같은 템플릿 컴포넌트로 렌더링
  • 이벤트 복제 기능으로 이전 이벤트를 새 이벤트의 초안으로 재활용

미리보기와 실제 방문자 화면이 같은 템플릿 컴포넌트를 쓰도록 구성해, 저장 전 화면과 게시 뒤 화면이 어긋나지 않게 구현합니다.

이벤트 관리
이벤트 관리 실제 화면
핵심 기능 3

템플릿·콘텐츠

담당자가 이벤트 공통 템플릿의 구성 블록과 서비스 소개 문구를 수정합니다. 블록 순서를 바꾸고 노출을 끄면 방문자 화면 미리보기에 바로 반영됩니다.

  • 템플릿 블록 구성을 순서 값이 있는 배열로 저장해 순서 변경을 즉시 반영
  • 변경 내용을 버전으로 저장해 이전 구성으로 되돌리기 지원
  • 블록 필수 항목을 서버에서 검증하고 오류 칸을 표시

템플릿 구성을 데이터로 저장해 코드 수정 없이 이벤트 화면 구조를 바꾸고 이전 버전으로 되돌릴 수 있게 구현합니다.

템플릿·콘텐츠
템플릿·콘텐츠 실제 화면
핵심 기능 4

게시·배포

담당자가 이벤트 게시 상태를 초안·예약·게시·종료로 관리하고 예약 시각을 지정합니다. 배포 단계 확인 목록과 운영 안내를 한 화면에서 봅니다.

  • 게시 상태와 예약 시각을 저장하고 예약 시각이 되면 상태가 바뀌는 주기 작업 구현
  • 게시·종료 변경 이력을 기록하고 되돌리기 지원
  • 배포 점검 항목을 체크 목록 데이터로 관리하고 완료 시각 저장

게시 예약을 서버 주기 작업으로 처리해 담당자가 화면을 열어 두지 않아도 예약 시각에 상태가 바뀌도록 구현합니다.

게시·배포
게시·배포 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

운영 데이터 모델 설계 · 2026.11

이벤트·템플릿 버전·게시 상태·배포 점검 테이블 설계

STEP 2

이벤트 관리·미리보기 구현 · 2026.11

등록·수정·복제와 방문자 화면 미리보기 구현

STEP 3

템플릿·게시 관리 구현 · 2026.11

블록 순서·노출 관리, 예약 게시와 되돌리기 구현

STEP 4

배포 안내·점검 구현 · 2026.11

배포 점검 목록, 운영 안내 문서, 변경 이력 화면 구성

개발 결과

미리보기와 방문자 화면의 동일 템플릿 구조 설계저장 전 미리보기와 게시 화면이 같은 컴포넌트를 쓰는 구조를 설계합니다.
템플릿 버전 관리 구현블록 구성을 버전으로 저장해 변경 이력 확인과 되돌리기가 가능하도록 구현합니다.
예약 게시 주기 작업 구성예약 시각에 서버가 게시 상태를 바꾸는 주기 작업을 구성합니다.
배포 점검 기록 구조 구축배포 점검 항목과 완료 시각을 기록해 검수 자료로 쓸 수 있는 구조를 구축합니다.

기술적 주안점

  • 카드 숫자와 목록 건수가 같은 집계 쿼리를 쓰도록 구성해 화면 간 수치가 어긋나지 않게 구현합니다
  • 미리보기와 실제 방문자 화면이 같은 템플릿 컴포넌트를 쓰도록 구성해, 저장 전 화면과 게시 뒤 화면이 어긋나지 않게 구현합니다
  • 템플릿 구성을 데이터로 저장해 코드 수정 없이 이벤트 화면 구조를 바꾸고 이전 버전으로 되돌릴 수 있게 구현합니다

유사한 프로젝트를 기획하고 계신가요?

필요한 기능과 일정을 알려주시면 개발 범위를 함께 정리하겠습니다.

프로젝트 문의