배경

관리자는 어드민 사용자의 역할 매칭 요청건수를 확인하고 승인/반려 합니다. 그런데 매번 확인하러 목록을 보는 것은 불편합니다. 관리자가 바로 요청건이 추가됨을 알 수 있도록 어드민 상단에 아바타에 배찌를 추가하기로 했습니다.

작업내용

제출상태인 요청건수를 조회하는 API
배찌
- 새로고침하면 데이터 조회해서 화면에 반영
- 30분마다 주기적으로 데이터 조회해서 화면에 반영

사용

setinterval

intervalId :타이머를 식별하는 0이 아닌 숫자 값
setinterval(() => , HALF_AN_HOUR) : HALF_AN_HOUR 마다 () => 실행
clearInterval : intervalId 로 interval을 취소

사용

카운트다운에서 1초마다 실행
배찌 숫자 30분마다 조회

import React, {useEffect, useState} from "react";
import {Badge, Avatar} from 'antd';
import {MatchingService} from "./matching.service";
import {UserOutlined} from "@ant-design/icons";
import {MemberContext} from "../../../auth/member.context";
import {SUBMITTED_STATUS} from "./function";

let intervalId = null;
const HALF_AN_HOUR = 1800000;

const RequestCount = () => {
    const [count, setCount] = useState(0);
    useEffect(() => {
        if (intervalId) {
            clearInterval(intervalId);
            intervalId = null;
        }
        let params = {status: SUBMITTED_STATUS}
        MatchingService.getRequestCount(params).then(response => {
            setCount(response.data.totalCount);
        });

        intervalId = setInterval(() => {
            MatchingService.getRequestCount(params).then(response => {
                setCount(response.data.totalCount);
            });
        }, HALF_AN_HOUR);
        return function cleanup() {
            if (intervalId) {
                clearInterval(intervalId);
                intervalId = null;
            }
        };
    }, []);

    return (
        <Badge count={count}>
            <Avatar icon={<UserOutlined/>} src={MemberContext.memberInformation.picture}/>
        </Badge>
    )
};


export default RequestCount;

20250409 기능이 동작하는지 확인했다

(2025. 4. 9. 오후 2:47:57) (2025. 4. 9. 오후 3:08:53) 20분 지나도 발생 안함 이후 새로고침후 15분 후 발생함

배경

브라우저에서 다른 탭으로 이동한 상태로 15분을 기다려도 AppVersion 컴포넌트가 버전 체크를 하지 않아 알림이 뜨지 않음.

분석

AppVersion 코드는 setInterval 을 사용하는데 탭이 백그라운드일 땐 setInterval 자체가 지연되거나 완전히 멈춘다고 합니다 즉 다른 탭을 갔다가 나눔 어드민 화면으로 다시 돌아온 시점부터 15분 후에야 버전 확인 API호출한다

브라우저 탭의 백그라운드 = 사용자가 다른 탭을 보고 있음
브라우저 탭 포그라운드 = 즉 사용자가 보고 있는 탭

개선

브라우저를 다시 클릭하거나 탭을 전환했을 때 탭이 15분 이상 열려 있었다면 즉시 버전 체크 API를 호출하도록 개선한다

완료 기준

브라우저를 다시 클릭하거나 탭을 전환했을 때 탭이 15분이상 열려 있다면 버전 확인 API 호출 한다