FIRE-330-fe-방-시작하면-0-00-에서-시작하는-타이머-출력

src/components/room/Timer.tsx

@@ -1,11 +1,47 @@
+import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { ReactComponent as Divide } from '../../assets/svg/Divide.svg';
 
 export default function Timer() {
+  const [time, setTime] = useState(0);
+  function timer() {
+    let start = new Date().getTime();
+    const callback = () => {
+      const ts = new Date().getTime();
+      if (ts - 1000 > start) {
+        setTime((time) => time + 1);
+        start = new Date().getTime();
+        requestAnimationFrame(callback);
+      } else {
+        requestAnimationFrame(callback);
+      }
+    };
+    requestAnimationFrame(callback);
+  }
+  useEffect(() => {
+    timer();
+  }, []);
+
+  const TimerHour =
+    Math.floor(time / 3600) < 10
+      ? `0${Math.floor(time / 3600)}`
+      : Math.floor(time / 3600);
+
+  const TimerMinute =
+    Math.floor((time % 3600) / 60) < 10
+      ? `0${Math.floor((time % 3600) / 60)}`
+      : Math.floor((time % 3600) / 60);
+
+  const TimerSecond =
+    Math.floor(time % 60) < 10
+      ? `0${Math.floor(time % 60)}`
+      : Math.floor(time % 60);
+
   return (
     <Component>
       <Status />
-      <Hour>03</Hour> : <Minute>17</Minute>
+      <Hour>{TimerHour}</Hour> :<Minute>{TimerMinute}</Minute> :
+      <Second>{TimerSecond}</Second>
       <Divide />
     </Component>
   );
@@ -27,9 +63,13 @@ const Status = styled.div`
 `;
 
 const Hour = styled.span`
-  margin-right: 0.3rem; ;
+  margin-right: 0.3rem;
 `;
 
 const Minute = styled.span`
+  margin: 0 0.3rem 0 0.3rem;
+`;
+
+const Second = styled.span`
   margin: 0 2.2rem 0 0.3rem;
 `;