add Timer Component

src/ui/Duel/Main.tsx

@@ -14,7 +14,7 @@ import {
   SortCardModal,
   YesNoModal,
 } from "./Message";
-import { LifeBar, Mat, Menu } from "./PlayMat";
+import { LifeBar, Mat, Menu, Timer } from "./PlayMat";
 
 const NeosDuel = () => {
   return (
@@ -24,6 +24,7 @@ const NeosDuel = () => {
       <Menu />
       <LifeBar />
       <Mat />
+      <Timer />
       <CardModal />
       <CardListModal />
       <HintNotification />

src/ui/Duel/PlayMat/Timer/index.tsx

+import "./index.scss";
+
+import React, { useEffect, useState } from "react";
+import AnimatedNumbers from "react-animated-numbers";
+import { useSnapshot } from "valtio";
+
+import { matStore } from "@/stores";
+
+export const Timer: React.FC = () => {
+  const [time, setTime] = useState(0);
+  const snap = useSnapshot(matStore);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (time > 0) {
+        setTime((time) => time - 1);
+      }
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    setTime(snap.timeLimits.me);
+  }, [snap.timeLimits.me]);
+
+  useEffect(() => {
+    setTime(snap.timeLimits.op);
+  }, [snap.timeLimits.op]);
+
+  return <div>{<AnimatedNumbers animateToNumber={time} />}</div>;
+};

src/ui/Duel/PlayMat/index.ts

 export * from "./LifeBar";
 export * from "./Mat";
 export * from "./Menu";
+export * from "./Timer";