사용자 접속 현황

egovframe-template-simple-react-contribution/src/pages/admin/logs/UserConnections.jsx

@@ -1,11 +1,228 @@
-import React from 'react';
+import React, {useState, useEffect, useCallback, useRef, PureComponent} from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import {BarChart, Bar, Rectangle, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer} from 'recharts';
 
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+
+import {format, sub} from "date-fns";
+import { ko } from 'date-fns/locale';
+
+import * as EgovNet from 'api/egovFetch';
+import URL from 'constants/url';
+
+import { default as EgovLeftNav } from 'components/leftmenu/EgovLeftNavAdmin';
+
+import { itemIdxByPage } from 'utils/calc';
 
 function UserConnections(props) {
+    // console.group("EgovAdminPrivacyList");
+    // console.log("[Start] EgovAdminPrivacyList ------------------------------");
+    // console.log("EgovAdminPrivacyList [props] : ", props);
+    const nowDate = new Date();
+    const oneMonthAgoDate = sub(nowDate, { months: 1 });
+    const [start_date, setStartDate] = useState(oneMonthAgoDate);
+    const [end_date, setEndDate] = useState(nowDate);           // new Date()
+
+    const location = useLocation();
+    // console.log("EgovAdminPrivacyList [location] : ", location);
+
+    // eslint-disable-next-line no-unused-vars
+    const [searchCondition, setSearchCondition] = useState(location.state?.searchCondition || {start_date: format(start_date, "yyyy-MM-dd"), end_date: format(end_date, "yyyy-MM-dd")});
+    const [chartData, setChartData] = useState([]);
+
+    const [listTag, setListTag] = useState([]);
+
+    const retrieveList = useCallback((srchCnd) => {
+        // console.groupCollapsed("EgovAdminUsageList.retrieveList()");
+        const retrieveListURL = '/admin/logs/user';
+
+        const requestOptions = {
+            method: "POST",
+            headers: {
+                'Content-type': 'application/json',
+            },
+            body: JSON.stringify(srchCnd)
+        }
+
+        EgovNet.requestFetch(
+            retrieveListURL,
+            requestOptions,
+            (resp) => {
+                let mutListTag = [];
+
+                const resultCnt = parseInt(resp.result.resultCnt);
+                const currentPageNo = 1;            // resp.result.paginationInfo.currentPageNo;
+                const pageSize = resultCnt;         // resp.result.paginationInfo.pageSize;
+
+                // 리스트 항목 구성
+                if (resultCnt === 0) {
+                    mutListTag.push(<p className="no_data" key="0">데이터가 없습니다.</p>);
+                } else {
+                    resp.result.resultList.forEach(function (item, index) {
+                        // if (index === 0) mutListTag = []; // 목록 초기화
+                        const listIdx = itemIdxByPage(resultCnt, currentPageNo, pageSize, index);
+
+                        mutListTag.push(
+                            <div key={listIdx} className="list_item">
+                                <div>{item[0]}</div>
+                                <div style={{textAlign: 'right', paddingRight: '10px'}}>{item[1].toLocaleString()}</div>
+                            </div>
+                        );
+                    });
+                }
+                setListTag(mutListTag);
+
+                let chartDataArray = resp.result.resultList.map((item, index) => ({
+                    logCnt: item[0],          // Assuming logCnt is the x-axis data
+                    "접속수": item[1],     // Assuming menuTitle is the y-axis data
+                }));
+                setChartData(chartDataArray);
+            },
+            function (resp) {
+                console.log("err response : ", resp);
+            }
+        );
+        // console.groupEnd("EgovAdminPrivacyList.retrieveList()");
+    },[listTag]);
+
+    const CustomTooltip = ({ active, payload, label }) => {
+        if (active && payload && payload.length) {
+            return (
+                <div className="custom-tooltip">
+                    <p className="intro">사용자 접속현황</p>
+                    <p className="label">{`${label} : ${payload[0].value}`}</p>
+                    {/*<p className="desc">Anything you want can be displayed here.</p>*/}
+                </div>
+            );
+        }
+        return null;
+    };
+
+    useEffect(() => {
+        retrieveList(searchCondition);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [start_date, end_date]);
+
+    // console.log("------------------------------EgovAdminPrivacyList [End]");
+    // console.groupEnd("EgovAdminPrivacyList");
+
 
     return (
         <div className="container">
-            UserConnections
+            <div className="c_wrap">
+                {/* <!-- Location --> */}
+                <div className="location">
+                    <ul>
+                        <li><Link to={URL.MAIN} className="home">Home</Link></li>
+                        <li><Link to={URL.ADMIN} >사이트관리</Link></li>
+                        <li>로그현황</li>
+                        <li>사용자 접속현황</li>
+                    </ul>
+                </div>
+                {/* <!--// Location --> */}
+
+                <div className="layout">
+                    {/* <!-- Navigation --> */}
+                    <EgovLeftNav></EgovLeftNav>
+                    {/* <!--// Navigation --> */}
+
+                    <div className="contents NOTICE_LIST" id="contents">
+                        {/* <!-- 본문 --> */}
+
+                        <div className="top_tit">
+                            <h1 className="tit_1">사용자 접속현황</h1>
+                        </div>
+
+                        {/* <!-- 검색조건 --> */}
+                        <div className="condition">
+                            <ul>
+                                <li className="half L">
+                                    <DatePicker
+                                        dateFormat='yyyy-MM-dd'                     // 날짜 형태
+                                        shouldCloseOnSelect                         // 날짜를 선택하면 datepicker가 자동으로 닫힘
+                                        minDate={new Date('2017-01-01')}        // minDate 이전 날짜 선택 불가
+                                        maxDate={new Date()}                        // maxDate 이후 날짜 선택 불가
+                                        selected={start_date}
+                                        locale={ko}
+                                        className="f_input1 al_c"
+                                        selectsStart
+                                        startDate={start_date}
+                                        endDate={end_date}
+                                        onChange={(date) => {
+                                            setStartDate(date);
+                                            setSearchCondition({
+                                                start_date: format(date, "yyyy-MM-dd"),
+                                                end_date: format(end_date, "yyyy-MM-dd")
+                                            });
+                                        }}
+                                    /> -
+                                </li>
+                                <li className="half R">
+                                    <DatePicker
+                                        dateFormat='yyyy-MM-dd'                     // 날짜 형태
+                                        shouldCloseOnSelect                         // 날짜를 선택하면 datepicker가 자동으로 닫힘
+                                        minDate={new Date('2017-01-01')}        // minDate 이전 날짜 선택 불가
+                                        maxDate={new Date()}                        // maxDate 이후 날짜 선택 불가
+                                        selected={end_date}
+                                        locale={ko}
+                                        className="f_input1 al_c"
+                                        selectsEnd
+                                        startDate={start_date}
+                                        endDate={end_date}
+                                        onChange={(date) => {
+                                            setEndDate(date);
+                                            setSearchCondition({
+                                                start_date: format(start_date, "yyyy-MM-dd"),
+                                                end_date: format(date, "yyyy-MM-dd")
+                                            });
+                                        }}
+                                    />
+                                </li>
+                            </ul>
+                        </div>
+                        {/* <!--// 검색조건 --> */}
+
+                        {/* <!-- 목록 --> */}
+                        <div className="logs_list row">
+                            <div className="col-sm-4 pe-0">
+                                <div className="board_list BRD010">
+                                    <div className="head">
+                                        <span>접속일자</span>
+                                        <span>접속횟수</span>
+                                    </div>
+                                    <div className="result overflow-auto">
+                                        {listTag}
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="col-sm-8 ps-0">
+                                <ResponsiveContainer width="100%" height={477}>
+                                    <BarChart data={chartData} layout="vertical"
+                                              height={477}
+                                              margin={{
+                                                  top: 0,
+                                                  right: 0,
+                                                  left: 20,
+                                                  bottom: 0,
+                                              }}
+                                    >
+                                        <CartesianGrid strokeDasharray="3 3" />
+                                        <XAxis type="number" />
+                                        <YAxis type="category" dataKey="logCnt" tick={{ fontSize: 10, whiteSpace: 'nowrap' }} />
+                                        <Tooltip content={<CustomTooltip/>} />
+                                        <Legend />
+                                        <Bar dataKey="접속수" fill="#87CEFA" activeBar={<Rectangle fill="gold" stroke="purple" />} />
+                                    </BarChart>
+                                </ResponsiveContainer>
+                            </div>
+                        </div>
+                        {/* <!--// 목록 --> */}
+
+                        {/* <!--// 본문 --> */}
+                    </div>
+                </div>
+            </div>
         </div>
     );
 }

kcsc-back-end/src/main/java/com/dbnt/kcscbackend/admin/logs/AdminLogsController.java

@@ -4,6 +4,7 @@ import com.dbnt.kcscbackend.admin.logs.entity.TnDailyMenuLog;
 import com.dbnt.kcscbackend.admin.logs.entity.ThPrivacyLog;
 import com.dbnt.kcscbackend.admin.logs.service.AdminMenuService;
 import com.dbnt.kcscbackend.admin.logs.service.AdminLogsService;
+import com.dbnt.kcscbackend.admin.logs.service.AdminUserService;
 import com.dbnt.kcscbackend.auth.entity.LoginVO;
 import com.dbnt.kcscbackend.config.common.BaseController;
 import com.dbnt.kcscbackend.config.common.ResponseCode;
@@ -32,6 +33,7 @@ import java.util.Map;
 public class AdminLogsController extends BaseController {
 
     private final AdminMenuService adminMenuService;
+    private final AdminUserService adminUserService;
     private final AdminLogsService adminLogsService;
 
     @Operation(
@@ -63,6 +65,34 @@ public class AdminLogsController extends BaseController {
     }
 
 
+    @Operation(
+            summary = "로그현황 - 사용자 접속현황",
+            description = "사용자 접속현황",
+            tags = {"AdminLogsController"}
+    )
+    @ApiResponses(value = {
+            @ApiResponse(responseCode = "200", description = "조회 성공"),
+            @ApiResponse(responseCode = "403", description = "인가된 사용자가 아님")
+    })
+    @RequestMapping(method = RequestMethod.POST, value = "/user", consumes = MediaType.APPLICATION_JSON_VALUE)
+    public ResultVO UserListCount(@RequestBody Map<String, String> dateRange,
+                                  @AuthenticationPrincipal LoginVO user)
+            throws Exception {
+
+        ResultVO resultVO = new ResultVO();
+        Map<String, Object> resultMap = new HashMap<>();
+
+        String startDate = dateRange.get("start_date");
+        String endDate = dateRange.get("end_date");
+
+        resultMap.put("resultCnt", adminUserService.selectUserCountCnt(startDate, endDate));
+        resultMap.put("resultList", adminUserService.selectUserCount(startDate, endDate));
+        resultVO.setResultCode(ResponseCode.SUCCESS.getCode());
+        resultVO.setResultMessage(ResponseCode.SUCCESS.getMessage());
+        resultVO.setResult(resultMap);
+        return resultVO;
+    }
+
     @Operation(
             summary = "로그현황 - 개인정보 로그",
             description = "개인정보 로그현황",

kcsc-back-end/src/main/java/com/dbnt/kcscbackend/admin/logs/entity/TnDailyUserConnLog.java

@@ -0,0 +1,34 @@
+package com.dbnt.kcscbackend.admin.logs.entity;
+
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+import lombok.experimental.Accessors;
+import org.hibernate.annotations.DynamicInsert;
+import org.hibernate.annotations.DynamicUpdate;
+import org.springframework.format.annotation.DateTimeFormat;
+
+import javax.persistence.*;
+import java.time.LocalDate;
+import java.awt.*;
+
+@Getter
+@Setter
+@Accessors(chain = true)
+@Entity
+@NoArgsConstructor
+@DynamicInsert
+@DynamicUpdate
+@Table(name = "tn_daily_user_log")
+public class TnDailyUserConnLog {
+    @Id
+    @Column(name = "dul_seq")
+    private Long dulSeq;
+
+    @Column(name = "log_cnt")
+    private Long logCnt;
+
+    @Column(name = "log_dt")
+    @DateTimeFormat(pattern = "yyyy-MM-dd")
+    private LocalDate logDt;
+}

kcsc-back-end/src/main/java/com/dbnt/kcscbackend/admin/logs/repository/UserLogsRepository.java

@@ -0,0 +1,25 @@
+package com.dbnt.kcscbackend.admin.logs.repository;
+
+import com.dbnt.kcscbackend.admin.logs.entity.TnDailyUserConnLog;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
+
+import java.util.List;
+
+public interface UserLogsRepository extends JpaRepository<TnDailyUserConnLog, Long> {
+
+    @Query(value = "SELECT COUNT(DISTINCT log_dt) "
+            + "FROM tn_daily_user_log "
+            + "WHERE log_dt BETWEEN TO_DATE(:startDate, 'YYYY-MM-DD') AND TO_DATE(:endDate, 'YYYY-MM-DD')", nativeQuery = true)
+    long countDistinctUserIds(@Param("startDate") String startDate, @Param("endDate") String endDate);
+
+    @Query(value = "SELECT TO_CHAR(log_dt, 'YYYY-MM-DD') as log_dt, sum(log_cnt) as log_cnt "
+            + "FROM tn_daily_user_log "
+            + "WHERE log_dt BETWEEN TO_DATE(:startDate, 'YYYY-MM-DD') AND TO_DATE(:endDate, 'YYYY-MM-DD') "
+            + "GROUP BY TO_CHAR(log_dt, 'YYYY-MM-DD') "
+            + "ORDER BY log_dt asc", nativeQuery = true)
+    List<Object[]> selectCountUser(@Param("startDate") String startDate, @Param("endDate") String endDate);
+
+
+}

kcsc-back-end/src/main/java/com/dbnt/kcscbackend/admin/logs/service/AdminUserService.java

@@ -0,0 +1,25 @@
+package com.dbnt.kcscbackend.admin.logs.service;
+
+import com.dbnt.kcscbackend.admin.logs.repository.UserLogsRepository;
+import lombok.RequiredArgsConstructor;
+import org.egovframe.rte.fdl.cmmn.EgovAbstractServiceImpl;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+
+@Service
+@RequiredArgsConstructor
+public class AdminUserService extends EgovAbstractServiceImpl {
+    private final UserLogsRepository userLogsRepository;
+
+    // 메뉴별 접속횟수
+    public List<Object[]> selectUserCount(String startDate, String endDate) {
+        return userLogsRepository.selectCountUser(startDate, endDate);
+    }
+
+    // 전체 레코드 수 가져오기
+    public long selectUserCountCnt(String startDate, String endDate) {
+        return userLogsRepository.countDistinctUserIds(startDate, endDate);
+    }
+
+}