이 저장소는 Pingdom 프로젝트의 관리자 웹 애플리케이션을 관리합니다.
운영자가 Pingdom 서비스의 장소, 게시글, 신고, 사용자 제재, 장소 중복 데이터를 확인하고 관리할 수 있는 관리자 전용 웹 화면을 제공합니다.
프론트엔드 화면 구현뿐만 아니라 관리자 API 연동, 인증 상태 관리, NAVER Maps 기반 장소 시각화, 운영 데이터 조회 흐름을 담당합니다.
현재 GA(General Availability) 단계입니다.
안정화된 서비스를 제공하며, 기능, 구성, 인터페이스 및 제공 결과의 변경은 Release와 변경 이력을 통해 관리합니다.
| Item | Status |
|---|---|
| Development | Generally Available |
| Release | GA |
| Stability | Stable |
| Item | Description |
|---|---|
| Type | Admin |
| Responsibility | Pingdom 관리자 화면, 인증 흐름, 운영 기능 UI 및 API 연동 |
| Primary Output | 관리자 웹 애플리케이션 |
| Target | Pingdom 서비스 운영자 및 관리자 |
- 관리자 로그인, 보호 라우팅, JWT 기반 인증 상태 관리
- 장소, 게시글, 신고, 사용자 제재, 장소 중복 관리 화면
- NAVER Maps 기반 장소 목록 시각화 및 마커 상호작용
- 관리자 API 연동, 목록 조회, 검색, 정렬, 페이지네이션 처리
- 일반 사용자용 모바일/웹 애플리케이션
- 백엔드 API 서버 및 데이터베이스 구현
- 추천 알고리즘, 신고 정책, 제재 정책의 서버 측 핵심 로직
- 운영 인프라, 배포 파이프라인, 모니터링 시스템 구성
- 관리자 인증: 로그인, 로그아웃, 보호 라우팅, access token 자동 재발급을 처리합니다.
- 대시보드 조회: 관리자 홈에서 주요 운영 현황과 최근 활동 정보를 확인합니다.
- 장소 관리: 장소 목록 조회, 검색, 정렬, 상세 조회, 삭제, NAVER Maps 위치 확인을 제공합니다.
- 게시글 및 신고 관리: 게시글 목록, 상세 정보, 신고 이력, 삭제 및 신고 처리 흐름을 제공합니다.
- 사용자 제재 관리: 사용자 검색, 제재 등록, 제재 해제, 제재 이력 조회를 지원합니다.
- 장소 중복 관리: 중복 장소 후보 확인, 병합 영향 조회, 장소 병합 처리를 지원합니다.
| Category | Technology |
|---|---|
| Primary | TypeScript, React |
| Framework | Vite, React Router |
| Styling | styled-components |
| API | Axios |
| Map | NAVER Maps JavaScript SDK |
| Build | npm, Vite |
| Quality | ESLint, TypeScript |
| Delivery | 정적 웹 애플리케이션 빌드 결과물 |
이 저장소를 확인하거나 실행하기 위해 필요한 최소 절차입니다.
- Node.js 24
- npm
- 관리자 API 서버 접근 권한
- NAVER Maps 공개 Client ID 및 사용할 웹 서비스 URL 등록
git clone https://github.com/Type-Nu11/pingdom-admin.git
cd pingdom-admin
npm cinpm run dev기본 개발 서버는 Vite 설정에 따라 5173 포트를 사용합니다.
설정에 필요한 환경 변수는 .env 파일에 구성합니다. 로컬 개발에서는 Axios가
/api same-origin 경로를 사용하므로 프록시 대상만 지정합니다. Production build는
VITE_PUBLIC_API_BASE_URL을 사용하며, EC2 Docker 배포는 같은 도메인의 /api로 고정합니다.
VITE_PUBLIC_API_BASE_URL=https://api.example.com
VITE_PROXY_TARGET=http://localhost:8080
VITE_NAVER_MAP_CLIENT_ID=원격 개발 API를 사용할 때는 VITE_PROXY_TARGET만 해당 주소로 변경합니다.
실제 인증정보, API Key, 비밀 값 및 운영 환경 정보는 저장소에 커밋하지 않습니다.
지도에는 공개 Client ID만 사용합니다. Client Secret은 VITE_*에 넣지 않습니다.
로컬 http://localhost:5173과 실제 프론트 도메인을 네이버 웹 서비스 URL에 등록해야 합니다.
환경·CSP 및 실환경 검증 범위는 지도 전환 정리를 참고합니다.
EC2 배포 안내에 Docker 빌드·Nginx·Compose·기존 인증 프록시 연결,
환경변수·검증·복구 절차를 정리했습니다. 기본 웹 포트는 내부 127.0.0.1:8082이며
동일 EC2의 기존 앱 게이트웨이 8082와 충돌하지 않도록 배포 구성을 확인해야 합니다. 컨테이너 실행만으로 외부 TLS·앱 분기까지
완료되는 것은 아닙니다.
저장소 변경사항은 다음 방법으로 검증합니다.
| Verification | Purpose |
|---|---|
npm run lint |
ESLint 기반 코드 검사 |
npm run build |
TypeScript 타입 검사 및 프로덕션 빌드 |
npm test |
단위·계약·회귀 검사 |
npm run test:release-browser |
합성 데이터 기반 Chromium 회귀 검사 |
npm run test:ec2-image |
Docker 이미지·Nginx·가짜 게이트웨이 검증 |
npm run preview |
빌드 결과물 로컬 미리보기 |
.
├── public # 정적 리소스 및 로고
├── src
│ ├── api # 관리자 API 요청 모듈
│ ├── app # 전역 Provider 및 Router 구성
│ ├── assets # 마커 등 화면 리소스
│ ├── components # 공통 컴포넌트와 지도 컴포넌트
│ ├── constants # 인증, 레이아웃 등 상수
│ ├── hooks # 관리자 기능별 상태 및 API 연동 로직
│ ├── pages # 로그인, 대시보드, 장소, 게시글, 제재 화면
│ ├── styles # 전역 스타일과 테마
│ ├── types # API 응답 및 도메인 타입
│ └── utils # 인증 저장소, 디버그, 카테고리 유틸
├── index.html
├── vite.config.ts
├── eslint.config.js
├── tsconfig.json
└── README.md
현재 버전은 GA(General Availability) 단계입니다. 호환성에 영향을 주는 변경사항은 Release와 관련 문서를 통해 안내합니다. 변경사항은 저장소의 Release 또는 변경 이력을 기준으로 확인합니다.
Part of Pingdom