관리자를 위한 메시지 발송 시스템 및 대시보드 프론트엔드 프로젝트입니다. 메시지 조회, 예약 발송 설정, 템플릿 관리 기능을 제공합니다.
더미데이터 생성, 배치 실행, 청구서 조회가 가능한 관리자 대시보드 화면입니다.
| 기능 | 설명 |
|---|---|
| 메시지 조회 | 서버에서 페이지 단위로 메시지 목록을 조회합니다. |
| 페이징 | 페이지당 10개의 데이터를 표시하며 이동이 가능합니다. |
| 상태 필터 | 전체 / COMPLETED / DEFERRED 상태별로 필터링합니다. |
| 발송 타입 | EMAIL / SMS 타입별로 구분하여 확인 가능합니다. |
| 요약 표시 | 전체 건수 및 현재 페이지 정보를 요약하여 표시합니다. |
메시지 템플릿 관리 및 시스템 예약 발송 설정을 위한 관리자 설정 화면입니다.
| 기능 | 설명 |
|---|---|
| 채널별 템플릿 | EMAIL / SMS 탭 선택 시 해당 채널의 템플릿을 조회합니다. |
| 템플릿 수정 | 현재 선택된 채널의 템플릿 내용을 실시간으로 수정합니다. |
| 예약 ON/OFF | 시스템 예약 발송 기능을 활성/비활성 토글합니다. |
| 예약 시간 | 예약 발송 시간(HH:mm)을 설정합니다. |
| 설정 저장 | 변경된 예약 설정을 서버에 저장하여 반영합니다. |
BILLGATES-FRONT/
├─ node_modules/
├─ public/
├─ src/
│ ├─ api/
│ │ ├─ Api.js # Axios 인스턴스 및 기본 설정
│ │ └─ messageApi.js # 메시지 조회 및 발송 관련 API 함수
│ │
│ ├─ pages/
│ │ ├─ Dashboard.js # 관리자 대시보드 (메인)
│ │ └─ Settings.js # 설정 관리 (템플릿, 예약)
│ │
│ ├─ styles/ # 컴포넌트 별 스타일 파일
│ │
│ ├─ App.css
│ ├─ App.js # 라우팅(Routing) 및 메인 레이아웃
│ ├─ index.css # Global Style
│ └─ index.js # Entry Point
│
├─ .gitignore
├─ package.json
└─ README.md
🧱 기술 스택
├─ React 18
├─ Axios
├─ JavaScript (ES6+)
└─ CSS
실행 방법
├─ npm install
└─ npm start