<div class="dbboxs">

  <h6><strong style="letter-spacing: -0.5px;">실시간 문의 현황</strong></h6>

  <div class="dbbox">

    <div class="innerbox"></div> <!-- 데이터 목록 -->

  </div>

</div>

<style>

.dbbox {

  display: flex;

  flex-direction: column;

  overflow: hidden;

  height: 245px;

}

.innerbox {

  display: flex;

  flex-direction: column;

}

.datab {

  background-color: rgba(5, 150, 255, 0.2);

  display: flex;

  gap: 20px;

  padding: 8px 10px;

  border-radius: 8px;

  margin-bottom: 5px;

  min-height: 45px;

  align-items: center;

  font-size: 16px;

}

</style>

<script>

const innerbox = document.querySelector('.innerbox');

function getRandomNumber() {

  const first = Math.floor(Math.random() * 9) + 1;

  const last = Math.floor(Math.random() * 9) + 1;

  return `010-${first}***-${last}***`;

}

function getRandomName() {

  const names = ['김', '이', '박', '최', '정', '강', '조', '윤', '장', '임', '오', '한', '신', '서', '권'];

  return `${names[Math.floor(Math.random() * names.length)]}**`;

}

function getTodayDate() {

  const today = new Date();

  return `${String(today.getFullYear()).slice(2)}. ${String(today.getMonth() + 1).padStart(2, '0')}. ${String(today.getDate()).padStart(2, '0')}`;

}

const dataList = [];

for (let i = 0; i < 30; i++) {

  dataList.push({ date: getTodayDate(), num: getRandomNumber(), name: getRandomName() });

}

function renderList() {

  innerbox.innerHTML = '';

  dataList.forEach(data => {

    const div = document.createElement('div');

    div.classList.add('datab');

    div.innerHTML = `<div>${data.date}</div><div>${data.num}</div><div>${data.name}</div>`;

    innerbox.appendChild(div);

  });

}

renderList();

let currentIndex = 0;

function scrollList() {

  const total = dataList.length;

  const height = 50;

  innerbox.style.transition = "transform 0.5s ease-in-out";

  innerbox.style.transform = `translateY(-${currentIndex * height}px)`;

  if (currentIndex > total - 5) {

    setTimeout(() => {

      innerbox.style.transition = "none";

      innerbox.style.transform = "translateY(0)";

      currentIndex = 0;

    }, 500);

  } else {

    currentIndex++;

  }

}

setInterval(scrollList, 1000);

</script>