Calculator display value reset after clicking operator sign

// basic four math funtions
function add(num1, num2) {
  return num1 + num2;
}

function subtract(num1, num2) {
  return num1 - num2;
}

function multiply(num1, num2) {
  return num1 * num2;
}

function divide(num1, num2) {
  return num1 / num2;
}

// operator function
function operator(sign, num1, num2) {
  if (sign === "+") {
    return add(num1, num2);
  } else if (sign === "-") {
    return subtract(num1, num2);
  } else if (sign === "*") {
    return multiply(num1, num2);
  } else if (sign === "/") {
    return divide(num1, num2);
  }
}

//populate display
const keys = document.querySelector(".calc-keys");
const display = document.querySelector(".calc-display");
const wholeCalc = document.querySelector(".calc-container");

keys.addEventListener("click", (event) => {
  if (event.target.matches("button")) {
    const key = event.target; //button press
    const action = key.dataset.action; // key-data type. number/operator
    const keyContent = key.textContent;
    const displayNum = display.textContent;

    //add numbers to display
    if (!action) {
      if (displayNum === "0") {
        display.textContent = keyContent;
      } else if (displayNum !== "0") {
        display.textContent = displayNum + keyContent;
      }
    }

    //add decimal to display
    if (action === "decimal") {
      display.textContent = displayNum + ".";
    }

    //reset display after operator click and new number input
    if (
      action === "add" ||
      action === "subtract" ||
      action === "multiply" ||
      action === "divide"
    ) {
      wholeCalc.dataset.previousKeyType = "operator";
    }

    const previousKeyType = wholeCalc.dataset.previousKeyType;

    if (!action) {
      if (displayNum === "0" || previousKeyType === "operator") {
        display.textContent = keyContent;
      } else {
        display.textContent = displayNum + keyContent;
      }
    }
  }
});

* {
  background: rgb(119, 89, 102);
}


/* CALCULATOR GRID LAYOUT */

.calc-container {
  display: grid;
  justify-content: center;
  gap: 1px;
}

.calc-display {
  height: 150px;
  width: auto;
  border: 2px black solid;
  font-size: 3.5rem;
  padding-right: 20px;
  text-align: right;
}

.calc-keys {
  display: grid;
  width: 500px;
  height: 500px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto auto;
  gap: 2px;
}


/* BUTTONS AND POSITIONING */

button {
  font-size: 20px;
}

button:hover {
  background: rgb(104, 77, 89);
  transition-delay: 0.1;
}

button[data-action="reset"] {
  background: rgba(90, 41, 41, 0.301);
}

.equals {
  grid-row: 2/6;
  grid-column: 4/5;
}

<div class="calc-container">
  <div class="calc-display">0</div>
  <div class="calc-keys">
    <button class="operator" data-action="add">+</button>
    <button class="operator" data-action="subtract">-</button>
    <button class="operator" data-action="multiply">&times;</button>
    <button class="operator" data-action="divide">÷</button>
    <button>9</button>
    <button>8</button>
    <button>7</button>
    <button>6</button>
    <button>5</button>
    <button>4</button>
    <button>3</button>
    <button>2</button>
    <button>1</button>
    <button>0</button>
    <button data-action="reset">AC</button>
    <button data-action="decimal">.</button>
    <button class="equals" data-action="total">=</button>
  </div>
</div>