dashboard/todayResponse.html at main · PrivaShield/dashboard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>보안 대시보드</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            padding: 20px;
            background-color: #FDFDFD;
        }

        .text-container {
            padding: 15px;
            background: #fff;
            display: inline-block;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
        }

        .text-container h3 {
            font-size: 1.2em;
            margin-bottom: 10px;
        }

        .big-text {
            font-size: 1.8em;
            font-weight: bold;
            color: #333;
        }

        .small-text {
            font-size: 0.9em;
            color: gray;
        }

        .type-list p {
            font-size: 1em;
            padding: 5px 0;
            color: #555;
        }
    </style>
</head>
<body>

    <!-- ✅ "오늘 감지된 민감 텍스트" 제목을 박스 안에 포함 -->
    <div class="text-container">
        <h3>오늘 감지된 민감 텍스트</h3> <!-- ✅ 박스 안으로 이동 -->

        <!-- 오늘 감지된 민감 데이터 개수 -->
        <p id="today-count" class="big-text">로딩 중...</p>

        <!-- 증감 표시 -->
        <p id="difference" class="small-text">증감: 0개</p>

        <!-- 텍스트 유형별 감지 수 표시 -->
        <div id="type-list" class="type-list"></div>
    </div>

    <script>
        // 데이터베이스에서 실제 데이터를 가져오는 함수
        async function fetchData() {
            try {
                // 실제 API URL로 변경
                const response = await fetch('https://example.com/api/security-dashboard'); // 예시 URL
                const data = await response.json(); // JSON 형태로 응답 받기

                // ✅ 데이터 처리
                const todayCount = data.todayData.totalCount;
                const todayTypes = data.todayData.types;
                const yesterdayCount = data.yesterdayData.count;
                const difference = todayCount - yesterdayCount;

                // ✅ 오늘 감지된 총 건수 업데이트
                document.getElementById('today-count').textContent = `총 ${todayCount}건`;

                // ✅ 어제와 비교한 증감 정보 업데이트
                let differenceText = '';
                if (difference > 0) {
                    differenceText = `어제보다 ${difference}건 증가`;
                } else if (difference < 0) {
                    differenceText = `어제보다 ${Math.abs(difference)}건 감소`;
                } else {
                    differenceText = '어제와 동일';
                }
                document.getElementById('difference').textContent = differenceText;

                // ✅ 감지된 데이터 유형별 개수 업데이트
                const typeListContainer = document.getElementById('type-list');
                typeListContainer.innerHTML = ''; // 기존 리스트 초기화

                todayTypes.forEach(type => {
                    const listItem = document.createElement('p');
                    listItem.innerHTML = `${type.name} (${type.count}건)`;
                    typeListContainer.appendChild(listItem);
                });
            } catch (error) {
                console.error("데이터를 가져오는 중 오류가 발생했습니다:", error);
                document.getElementById('today-count').textContent = '데이터 로드 실패';
            }
        }

        // 페이지 로드 시 데이터 요청
        fetchData();
    </script>
</body>
</html>