"반딧불 서비스의 모든 데이터와 운영을 효율적으로 관리하기 위한 강력한 백오피스 시스템."
반딧불 서비스의 콘텐츠, 사용자, 시스템 운영을 통합 관리하는 관리자 전용 대시보드입니다. DB 직접 접근 없이도 모든 핵심 기능을 웹 인터페이스를 통해 수행할 수 있도록 설계되었습니다.
- 효율적인 콘텐츠 관리: 검색, 등록, 수정, 삭제 기능을 통한 콘텐츠 라이프사이클 관리
- 배치 작업 모니터링: 시스템 내 배치 처리 현황 실시간 추적 및 제어
- 사용자 데이터 분석: 회원 관리 및 선호도 통계 분석을 통한 서비스 개선 인사이트 제공
- CRUD 작업: 콘텐츠 등록, 수정, 삭제, 조회
- 검색 시스템: 출연진, 감독, 콘텐츠별 통합 검색
- 실시간 관리: DB 및 Amazon S3 직접 접근 없이 웹 인터페이스를 통한 즉시 작업 수행
- 카테고리 통계: 장르별 콘텐츠 분포 시각화
- 대기열 모니터링: 서버 내 배치 요청 현황 실시간 조회
- 작업 상세 로그: 개별 배치 작업의 상세 실행 로그 확인
- 실패 작업 관리: 실패한 배치 재시도 및 무효화된 배치 취소
- 결과 분석: 배치 처리 성공/실패 통계 및 성능 모니터링
- 사용자 목록: 전체 회원 정보 조회 및 관리
- 선호도 분석: 회원별 좋아요/싫어요 피드백 통계
- 장르 선호도: 사용자 장르 선호도 시각화 (차트/그래프)
- 동기화 작업: 회원정보 수동/자동 동기화 기능
🛠️ UDT-fe-admin/
├── 📂 public/ # 정적 자산
│ ├── icons/ # 관리자 페이지 전용 아이콘
│ └── images/ # 이미지 자산 (장르, OTT 로고 등)
├── 📂 src/
│ ├── 📂 app/
│ │ ├── 📂 login/ # 🔐 관리자 로그인 페이지
│ │ ├── layout.tsx # 관리자 페이지 전용 레이아웃
│ │ ├── globals.css # 전역 스타일
│ │ └── page.tsx # 🏠 메인 대시보드 (탭 기반 네비게이션)
│ ├── 📂 components/ # 재사용 가능한 UI 컴포넌트
│ │ ├── 📂 admin/ # 🛠️ 백오피스 전용 컴포넌트
│ │ │ ├── AdminDashboard.tsx # 콘텐츠 관리 메인 대시보드
│ │ │ ├── ContentCard.tsx # 콘텐츠 카드 컴포넌트
│ │ │ ├── ContentForm.tsx # 콘텐츠 등록/수정 폼
│ │ │ ├── ContentDetail.tsx # 콘텐츠 상세 정보 모달
│ │ │ ├── CategoryChart.tsx # 카테고리별 통계 차트
│ │ │ ├── SearchFilter.tsx # 콘텐츠 검색 필터
│ │ │ ├── 📂 batch/ # ⚙️ 배치 처리 관련 컴포넌트
│ │ │ ├── 📂 userManagement/ # 👥 회원 관리 관련 컴포넌트
│ │ │ └── 📂 dialogs/ # 🔍 검색 다이얼로그
│ │ │ ├── actorSearchDialog.tsx # 배우 검색 다이얼로그
│ │ │ └── directorSearchDialog.tsx # 감독 검색 다이얼로그
│ │ ├── 📂 common/ # 🔄 공통 컴포넌트
│ │ └── 📂 ui/ # 🎨 shadcn/ui 기반 기본 컴포넌트
│ ├── 📂 hooks/ # Tanstack Query 기반 데이터 관리 Hooks 등 다양한 Custom Hooks를 저장해 둔 폴더
│ │ └── 📂 admin/ # 관리자 전용 API Hooks
│ ├── 📂 lib/ # 유틸리티 함수 및 설정
│ │ ├── 📂 apis/ # API 통신 관련 함수들
│ │ │ └── 📂 admin/ # 관리자 API 함수들
│ │ └── 📂 utils/ # 공통 유틸리티 함수
│ └── 📂 types/ # TypeScript 타입 정의
│ └── 📂 admin/ # 관리자 전용 타입 정의
- Node.js 22.x 이상
- npm 11.x 이상
npm installmacOS (Homebrew):
# mkcert 설치
brew install mkcert
brew install nss # Firefox 사용 시
# 로컬 인증 기관(CA) 생성 및 시스템에 설치
mkcert -install
# localhost와 local.banditbool.com 도메인용 인증서 생성
mkcert localhost local.banditbool.com 127.0.0.1 ::1Windows (Chocolatey):
# mkcert 설치
choco install mkcert
# 로컬 인증 기관(CA) 생성 및 시스템에 설치
mkcert -install
# localhost와 local.banditbool.com 도메인용 인증서 생성
mkcert localhost local.banditbool.com 127.0.0.1 ::1프로젝트루트/
├── localhost+3.pem # SSL 인증서
├── localhost+3-key.pem # 개인키
└── ... (기타 프로젝트 파일들)
npm run dev:httpsnpm run devnpm run build
npm run start- HTTPS: https://local.banditbool.com:3000
- HTTP: http://localhost:3000
- 백오피스 대시보드:
admin.banditbool.com
- 권장 브라우저: Chrome, Safari, Edge 최신 버전
- 화면 해상도: 데스크탑 환경 최적화 (1920x1080 이상 권장)
- 반응형 지원: 태블릿 및 모바일 기기에서도 사용 가능
⚠️ 관리자 전용 서비스
본 백오피스는 전용 관리자 계정을 통해서만 접근 가능합니다. 배치 작업은 매일 오전 4시에 일괄 처리되어 현황을 확인할 수 있습니다.
서비스 내 모든 콘텐츠의 생성, 수정, 삭제, 조회를 담당하는 핵심 관리 페이지입니다.
주요 기능:
- 콘텐츠 목록 조회: 무한 스크롤 기반 전체 콘텐츠 리스트
- 카테고리별 필터링: 장르별 콘텐츠 분류 및 통계
- 실시간 검색: 제목, 출연진, 감독 기반 통합 검색
- CRUD 작업:
- ✅ 등록: 새로운 콘텐츠 추가 (기본정보, 출연진, 상세정보)
- ✏️ 수정: 기존 콘텐츠 정보 업데이트
- 🗑️ 삭제: 콘텐츠 제거 (연관 데이터 정리 포함)
- 👀 상세 조회: 모달 형태의 콘텐츠 상세 정보
특징:
- DB 직접 접근 없이 웹 인터페이스를 통한 모든 작업 수행
- 출연진/감독 검색 다이얼로그를 통한 정확한 인물 정보 연결
- 카테고리별 통계 차트로 콘텐츠 분포 현황 파악
서버 내에서 대기 중인 배치 처리 요청들을 실시간으로 모니터링하는 페이지입니다.
주요 기능:
- 대기열 현황: 처리 대기 중인 배치 작업 목록
- 작업 타입별 분류: 콘텐츠 등록, 수정, 삭제 등 작업 유형별 구분
- 우선순위 관리: 배치 작업의 처리 순서 확인
- 실시간 상태 업데이트: 대기열 변화 자동 갱신
통계 정보:
- 총 대기 중인 작업 수
- 작업 타입별 분포
- 평균 대기 시간
- 시간대별 요청 패턴
완료된 배치 작업들의 결과를 분석하고 실패한 작업을 관리하는 페이지입니다.
주요 기능:
- 처리 결과 조회: 성공/실패한 배치 작업 목록
- 상세 로그 확인: 개별 배치 작업의 실행 로그 및 오류 정보
- 실패 작업 재시도: 실패한 배치 작업 재실행
- 무효 작업 정리: 취소되거나 무효화된 배치 작업 일괄 삭제
모니터링 지표:
- 성공률 통계
- 처리 시간 분석
- 오류 패턴 분석
- 시스템 성능 지표
서비스 가입 회원들의 정보와 선호도를 관리하고 분석하는 페이지입니다.
주요 기능:
- 회원 목록: 전체 사용자 목록 및 기본 정보 조회
- 회원 상세 정보: 개별 사용자의 상세 프로필 및 활동 이력
- 선호도 통계: 사용자별 좋아요/싫어요 피드백 분석
- 장르 선호도 시각화:
- 막대 차트, 파이 차트, 전체 선호도 수치를 제공하는 표 등 다양한 형태로 제공
관리 기능:
- 회원 정보 수동 동기화
- 자동 동기화 스케줄 관리
- 비활성 회원 관리
- 회원 피드백 데이터 분석
통계 대시보드:
- 총 회원 수 및 증가율
- 활성 회원 비율
- 장르별 인기도 트렌드
- 연령대별/성별 선호도 분석
| 기술 | 설명 |
|---|---|
| TypeScript | 정적 타입으로 안정적인 협업 지원 |
| React 19 | 컴포넌트 기반 UI, 관리자 도구에 최적화 |
| Next.js 15 (App Router) | SSR/CSR 하이브리드, API Route 활용 |
| Tailwind CSS + shadcn/ui | 유틸리티 퍼스트 CSS, 접근성 높은 관리자 UI |
| Tanstack Query + Axios | 서버 상태 캐싱 및 실시간 데이터 동기화 |
| Recharts | 데이터 시각화 및 통계 차트 |
| Lucide React | 일관된 아이콘 시스템 |
| ESLint + Prettier + Husky | 코드 품질 관리 및 커밋 전 자동 검사 |
- JWT 기반 인증: 관리자 권한 검증
- 역할 기반 접근 제어: 관리자 레벨별 기능 제한
- API 보안: 모든 요청에 대한 권한 검증
- HTTPS 지원: 데이터 전송 암호화
- 무한 스크롤: 대용량 데이터 효율적 로딩
- 가상화: 긴 목록의 렌더링 성능 최적화
- 캐싱 전략: Tanstack Query를 통한 스마트 캐싱
- 번들 최적화: 코드 스플리팅 및 트리 쉐이킹
- 실시간 배치 상태: 배치 처리 현황 실시간 모니터링
- 오류 추적: 실패한 작업에 대한 상세 로그
- 성능 지표: 시스템 처리량 및 응답 시간 추적
이 프로젝트는 LG유플러스 유레카 2기 과정의 최종 융합 프로젝트의 일환으로 개발되었습니다.