갓난애기도 배울 수 있는 React Native 가이드 ⏺️ 보너스편18 – 관리자용 웹 대시보드와 연동하기 (Firebase Hosting + React Admin)

갓난애기도 배울 수 있는 React Native 가이드 ⏺️ 보너스편18 – 관리자용 웹 대시보드와 연동하기 (Firebase Hosting + React Admin)

React Native 앱에서는 사용자별 알림 설정, 기록, 통계를 모두 구현했습니다.
이번에는 한 단계 더 나아가 관리자가 웹에서 전체 데이터를 열람하고 관리할 수 있도록
Firebase Firestore와 연동되는 웹 기반 관리자 대시보드를 만들어보겠습니다.

관리자는 여기서 유저별 알림 전송 내역, 전송량 통계, 사용자 관리 등을
React 웹에서 실시간으로 모니터링 및 조작할 수 있습니다. 🖥️🧑‍💼

---

✅ 1. 구현 목표

기능 설명

Firestore 데이터 조회	클라우드 알림 로그 실시간 조회
유저별 필터	특정 사용자만 필터링하여 보기
통계 시각화 (옵션)	요일별/유형별 알림 집계 결과 그래프로 표시
Firebase Hosting에 배포	웹 대시보드를 Firebase에서 간편하게 배포

---

✅ 2. 프로젝트 구조

기술 설명

React + Vite	빠른 개발을 위한 웹 프레임워크
Firebase SDK	인증 + Firestore 연동
Recharts / Chart.js	차트 시각화 라이브러리
Firebase Hosting	관리자 페이지 배포용

---

✅ 3. 초기 세팅

npm create vite@latest admin-dashboard --template react
cd admin-dashboard
npm install firebase recharts

---

✅ 4. Firebase 웹 설정

반응형

1. Firebase Console → 프로젝트 → 설정 → 웹 앱 추가
2. Firebase SDK 설정 값 복사
3. .env 또는 firebase.js에 환경변수 추가

📄 src/firebase.js

// Firebase 웹 설정
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: 'YOUR_KEY',
  authDomain: '...',
  projectId: '...',
  storageBucket: '...',
  messagingSenderId: '...',
  appId: '...',
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

---

✅ 5. 알림 로그 조회 화면 구현

📄 src/components/AlarmTable.jsx

import { useEffect, useState } from 'react';
import { db } from '../firebase';
import { collection, getDocs } from 'firebase/firestore';

export default function AlarmTable() {
  const [logs, setLogs] = useState([]);

  useEffect(() => {
    const load = async () => {
      const snapshot = await getDocs(collection(db, 'alarm_logs'));
      const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      setLogs(data);
    };
    load();
  }, []);

  return (
    <div>
      <h2>📋 알림 기록 전체 목록</h2>
      <table>
        <thead>
          <tr>
            <th>유저 ID</th>
            <th>제목</th>
            <th>내용</th>
            <th>보낸 시각</th>
          </tr>
        </thead>
        <tbody>
          {logs.map(log => (
            <tr key={log.id}>
              <td>{log.userId}</td>
              <td>{log.title}</td>
              <td>{log.message}</td>
              <td>{new Date(log.sentAt?.seconds * 1000).toLocaleString()}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

---

✅ 6. 관리자용 필터 & 차트 추가

📄 src/components/StatsChart.jsx

import { BarChart, XAxis, YAxis, Tooltip, Bar, PieChart, Pie, Cell } from 'recharts';

export default function StatsChart({ logs }) {
  const typeData = logs.reduce((acc, cur) => {
    const type = cur.type || 'unknown';
    acc[type] = (acc[type] || 0) + 1;
    return acc;
  }, {});
  const chartData = Object.entries(typeData).map(([type, count]) => ({ name: type, value: count }));

  return (
    <div>
      <h3>📊 알림 유형 통계</h3>
      <PieChart width={400} height={250}>
        <Pie data={chartData} dataKey="value" label>
          {chartData.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={['#ff6384', '#36a2eb', '#cc65fe', '#ffce56'][index % 4]} />
          ))}
        </Pie>
        <Tooltip />
      </PieChart>
    </div>
  );
}

---

✅ 7. Firebase Hosting에 배포하기

npm install -g firebase-tools
firebase login
firebase init hosting
npm run build
firebase deploy

---

✅ 8. 보안 규칙 설정 예시 (admin만 읽기 가능)

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /alarm_logs/{docId} {
      allow read: if request.auth != null && request.auth.token.admin == true;
    }
  }
}

관리자는 custom claims로 권한 부여 필요 (Firebase Admin SDK 사용)

---

✅ 9. 이번 글에서 배운 것

• Firebase와 React를 이용한 관리자 웹 대시보드 구현
• Firestore에서 알림 로그를 조회하고 테이블로 출력
• 알림 유형 데이터를 차트로 시각화
• Firebase Hosting으로 실제 배포 및 접근 가능하게 처리

---

📘 다음 확장 예고

✅ 관리자 계정 로그인 구현 및 권한 분리 (Admin Auth)
✅ 대시보드에서 사용자별 알림 전송 기능 추가
✅ 웹과 앱 연동을 위한 공용 Firestore 구조 설계

---

 

React Firebase Admin,React Firestore 대시보드,React Native 관리자 연동,React Firebase Hosting 배포,Firebase 관리화면 만들기,React Firestore 차트,React 알림 로그 관리,React 관리자 툴,React Firebase Admin SDK,React FCM 관리자 웹

---