Dimiplan 백엔드 시스템을 위한 포괄적인 Angular 기반 관리자 인터페이스입니다. Material Design 3 테마를 적용한 현대적인 관리자 패널로, 시스템 모니터링, 데이터베이스 관리, 로그 분석, API 문서화 등의 기능을 제공합니다.
- 실시간 시스템 모니터링: 서버 가동시간, 메모리 사용량, CPU 사용률, 플랫폼 정보, Node.js 버전 등 실시간 표시
- AI 사용량 추적: AI API 크레딧 및 사용량 통계, 사용량 추세 시각화
- 사용자 통계: 총 사용자 수, 활성 사용자(30일), 최근 신규 사용자 등록 현황
- 빠른 작업: 로그, 데이터베이스, API 문서로의 편리한 탐색
- 시각화: 메모리 및 CPU 사용률 진행 막대, 환경별 상태 배지
- 테이블 브라우저: 행 개수와 함께 모든 데이터베이스 테이블 목록 표시
- 스키마 뷰어: 테이블 구조(컬럼명, 데이터 타입, 키 정보, Nullable 여부) 상세 표시
- 대화형 데이터 탐색: 페이지네이션(25, 50, 100, 200개 레코드)으로 테이블 데이터 탐색
- 데이터 내보내기: 테이블 데이터를 CSV 형식으로 다운로드
- 컬럼 정보 시각화: 데이터 타입별 색상 구분, 키 타입별 아이콘 표시(PRI, UNI, MUL)
- tooltips: 긴 데이터는 툴팁으로 전체 내용 확인 가능
- 로그 파일 브라우저: 파일 크기와 수정 날짜와 함께 사용 가능한 모든 로그 파일 목록
- 실시간 로그 뷰어: 선택한 로그 파일의 내용을 실시간으로 표시
- 로그 레벨 필터링: 로그 레벨별 필터링(error, warn, info, verbose)
- 구문 강조: 로그 레벨별 색상 구분, 타임스탬프 파싱
- 다운로드: 완전한 로그 파일 로컬 다운로드
- 사용자 친화적 표시: 파일 크기를 B, KB, MB, GB 단위로 자동 포맷팅
- 자동 JSDoc 문서화: JSDoc 주석 기반 API 문서 자동 생성 및 파싱
- 대화형 문서 탐색: 경로, 메서드, 설명으로 API 엔드포인트 검색
- 파일별 필터링: API 엔드포인트를 파일별로 그룹화하여 탐색
- 복잡한 반환값 처리: 중첩된 객체 및 배열 구조를 그룹화하여 표시
- cURL 예제: 각 엔드포인트에 대한 즉시 사용 가능한 cURL 명령어 생성 및 클립보드 복사
- 문서 내보내기: API 문서를 Markdown 형식으로 내보내기
- 실시간 재생성: 요청 시 JSDoc 문서 재생성
- HTTP 메서드별 색상 구분: GET, POST, PUT, DELETE 메서드별 시각적 구분
- Angular 20.0.3 (최신 버전, Standalone 컴포넌트 사용)
- Angular Material 20.0.3 (Material Design 3 테마)
- RxJS 7.8.2 (반응형 프로그래밍)
- Tailwind CSS 3.4.17 (유틸리티 우선 스타일링)
- Material Design 3 색상 시스템 및 타이포그래피
- PostCSS & Autoprefixer (CSS 처리)
- 완전 반응형 디자인: 모바일 친화적 레이아웃
- TypeScript 5.8.3 (강타입 시스템)
- Jasmine & Karma (단위 테스트)
- Angular CLI 20.0.2 (개발 도구)
- 모던 Angular 패턴: Standalone 컴포넌트, 함수형 인터셉터
- 의존성 주입: 서비스 기반 아키텍처
- 타입 안전성: 모든 API 응답에 대한 TypeScript 인터페이스
- Node.js 18+
- npm 또는 yarn
- Angular CLI 20+
npm installnpm start
# 또는
ng serve개발 서버가 실행되면 브라우저에서 http://localhost:4200/로 접속하세요.
npm run build
# 또는
ng build빌드 결과물은 dist/ 디렉토리에 생성됩니다.
npm test
# 또는
ng test- Google 계정 연동: Google OAuth를 통한 안전한 관리자 인증
- 강제 로그인: 401 에러 발생 시 자동으로 로그인 모달 표시
- 세션 유지: 쿠키 기반 세션 관리 (
withCredentials: true) - 자동 리다이렉트: 인증 후 관리자 패널로 자동 복귀
- HTTP 인터셉터: 모든 API 요청에 자동 크리덴셜 첨부
- 401 에러 자동 처리: 인증 실패 시 자동 로그인 프로세스
- CORS 지원: 도메인 간 쿠키 세션 상태 유지
- 타입 안전성: TypeScript를 통한 컴파일 타임 보안
기본적으로 https://api-dev.dimiplan.com에 연결됩니다. 다른 API 서버를 사용하려면 src/app/services/admin.service.ts에서 API_BASE_URL을 수정하세요.
- 다크/라이트 모드: 사용자가 토글 버튼으로 테마 전환 가능
- 테마 지속성: localStorage를 통한 테마 설정 저장 및 복원
- Material Design 3: 최신 Material Design 가이드라인 및 색상 토큰 적용
- 완전 반응형: 모바일과 데스크톱에서 최적화된 레이아웃
src/app/
├── components/ # 주요 컴포넌트
│ ├── dashboard/ # 대시보드 (시스템 상태, 사용자 통계, AI 사용량)
│ ├── database/ # 데이터베이스 관리 (테이블 탐색, 데이터 뷰어)
│ ├── logs/ # 로그 관리 (파일 브라우저, 로그 뷰어)
│ ├── api-docs/ # API 문서 (자동 생성, 검색, 내보내기)
│ └── login-modal/ # 로그인 모달 (Google OAuth)
├── services/ # 서비스 레이어
│ ├── admin.service.ts # 관리자 API 통합 서비스
│ └── auth-modal.service.ts # 인증 모달 관리 서비스
├── interceptors/ # HTTP 인터셉터
│ └── auth.interceptor.ts # 인증 및 CORS 처리
├── styles/ # 전역 스타일
│ ├── material-tokens.scss # Material Design 3 토큰
│ └── material-you-theme.scss # Material You 테마
├── app.config.ts # 애플리케이션 설정
├── app.routes.ts # 라우팅 설정
├── app.ts # 메인 애플리케이션 컴포넌트
└── app.html # 애플리케이션 템플릿
관리자 패널에서 사용하는 주요 API 엔드포인트:
GET /system-status- 시스템 상태 정보GET /stats/users- 사용자 통계GET /ai-usage- AI 사용량 통계GET /logs- 로그 파일 목록GET /logs/{filename}- 특정 로그 파일 내용GET /database/tables- 데이터베이스 테이블 목록GET /database/tables/{tableName}- 테이블 데이터 및 스키마GET /docs- API 문서POST /docs/regenerate- API 문서 재생성
- Standalone 컴포넌트:
@Component데코레이터에서 imports 직접 관리 - 함수형 인터셉터: 클래스 기반이 아닌 함수형 HTTP 인터셉터 사용
- 의존성 주입:
inject()함수를 통한 현대적 DI 패턴
- 로딩 상태: 모든 비동기 작업에 대한 로딩 인디케이터
- 에러 처리: 사용자 친화적 에러 메시지 및 자동 복구
- 반응형 피드백: 성공/실패에 대한 즉각적인 시각적 피드백
- 키보드 네비게이션: 접근성을 위한 키보드 지원
- 지연 로딩: 라우트별 컴포넌트 분할
- 메모리 관리: 컴포넌트 생명주기에 따른 구독 해제
- 효율적인 렌더링: Angular의 OnPush 변경 감지 전략 활용
이 관리자 패널은 Dimiplan 백엔드 시스템의 포괄적인 모니터링, 디버깅, 관리를 위한 원스톱 솔루션으로 설계되어 있습니다.