絶対に音が出ないWebタイマー　バージョンアップ

前に作成した「絶対に音が出ないWebタイマー」をバージョンアップというか、更新しました。

https://timer.fuuu.work/

HTML＋JavaScriptで作成していましたが、勉強がてらReactで実装しました。
合わせて、タイマーの値を変えられるように設定画面も追加しました。

Reactの他にTailwindCSS、Viteを使いました。
私のような心配性の方用です。静かなオフィスとか、カフェとかで使いたい時にどうぞ！

詰まった点はタイマーの停止を別のfunctionから止められなかったことです。
useRefを使えば解決しました。

--- 省略 ---
 // タイマーID
  const intervalId = useRef(null);
--- 省略 ---
  // タイマー停止ボタン
  const stopTImer = () => {
    if (intervalId.current) {
      clearInterval(intervalId.current);
      intervalId.current = null;
      setMassage("");
      setMassageColor("bg-white");
    }
  };
--- 省略 ---
  // ------------------------------
  // タイマー開始
  // 引数：時間（秒）
  // ------------------------------
  const timerStart = (timeSelect) => {
    setErrorMessage("");
    let alertCnt = 0;

    // 既にタイマーが動いている場合は起動しない
    if (intervalId.current) {
      setErrorMessage("タイマーが起動中です。");
      return;
    }
--- 省略 ---
    intervalId.current = setInterval(() => {