[FE] 페어룸 타이머 기능 구현

frontend/src/components/PairRoom/TimerCard/TimerCard.styles.ts

@@ -0,0 +1,80 @@
+import { FaPause, FaPlay, FaStop } from 'react-icons/fa6';
+import styled, { css } from 'styled-components';
+
+export const Layout = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 3rem;
+  width: 100%;
+  height: 100%;
+  padding: 3rem;
+`;
+
+export const ProgressBar = styled.div<{ $progress: number }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 28vw;
+  height: 28vw;
+  max-width: 100%;
+  max-height: 100%;
+  border: 0.8rem solid transparent;
+  border-radius: 50%;
+  background-image: linear-gradient(white, white),
+    conic-gradient(
+      ${({ theme, $progress }) => `${theme.color.primary[500]} ${$progress}%, ${theme.color.black[30]} ${$progress}%`}
+    );
+  background-origin: border-box;
+  background-clip: content-box, border-box;
+  transition: background-image 1s ease-in;
+`;
+
+export const Timer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4rem;
+`;
+
+export const TimerTextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 0.4rem;
+  width: 10rem;
+  font-size: ${({ theme }) => theme.fontSize.sm};
+`;
+
+export const TimerText = styled.p`
+  font-size: 7rem;
+`;
+
+export const IconContainer = styled.div`
+  display: flex;
+  gap: 5rem;
+`;
+
+export const IconButton = styled.button`
+  width: ${({ theme }) => theme.fontSize.h4};
+  background: transparent;
+  font-size: ${({ theme }) => theme.fontSize.h4};
+`;
+
+const iconStyle = css<{ $isActive: boolean }>`
+  color: ${({ $isActive, theme }) => ($isActive ? theme.color.secondary[500] : theme.color.black[50])};
+  cursor: ${({ $isActive }) => ($isActive ? 'pointer' : 'default')};
+`;
+
+export const PlayIcon = styled(FaPlay)<{ $isActive: boolean }>`
+  ${iconStyle}
+`;
+
+export const PauseIcon = styled(FaPause)<{ $isActive: boolean }>`
+  ${iconStyle}
+`;
+
+export const StopIcon = styled(FaStop)<{ $isActive: boolean }>`
+  ${iconStyle}
+`;

frontend/src/components/PairRoom/TimerCard/TimerCard.tsx

@@ -1,10 +1,54 @@
 import { PairRoomCard } from '@/components/PairRoom/PairRoomCard';
 
-// TODO: 타이머 기능 추가
+import useTimer from '@/hooks/PairRoom/useTimer';
+
+import * as S from './TimerCard.styles';
+
+const formatMinutes = (minutes: number) => (minutes < 10 ? `0${minutes}` : `${minutes}`);
+
+const formatSeconds = (seconds: number) => (seconds < 10 ? `0${seconds}` : `${seconds}`);
+
+const formatTime = (time: number) => {
+  const minutes = Math.floor(time / (60 * 1000));
+  const seconds = Math.floor((time % 60000) / 1000);
+
+  return { minutes: formatMinutes(minutes), seconds: formatSeconds(seconds) };
+};
+
+const DEFAULT_TIME = 60 * 1000;
+
 const TimerCard = () => {
+  const { timeLeft, isActive, handleStart, handlePause, handleStop } = useTimer(DEFAULT_TIME);
+  const { minutes, seconds } = formatTime(timeLeft);
+
   return (
     <PairRoomCard>
-      <div>내용</div>
+      <S.Layout>
+        <S.ProgressBar $progress={(timeLeft / DEFAULT_TIME) * 100}>
+          <S.Timer>
+            <S.TimerTextContainer>
+              <S.TimerText>{minutes}</S.TimerText>
+              분(m)
+            </S.TimerTextContainer>
+            <S.TimerText>:</S.TimerText>
+            <S.TimerTextContainer>
+              <S.TimerText>{seconds}</S.TimerText>
+              초(s)
+            </S.TimerTextContainer>
+          </S.Timer>
+        </S.ProgressBar>
+        <S.IconContainer>
+          <S.IconButton disabled={isActive} onClick={handleStart}>
+            <S.PlayIcon $isActive={!isActive} />
+          </S.IconButton>
+          <S.IconButton disabled={!isActive} onClick={handlePause}>
+            <S.PauseIcon $isActive={isActive} />
+          </S.IconButton>
+          <S.IconButton disabled={!isActive} onClick={handleStop}>
+            <S.StopIcon $isActive={isActive} />
+          </S.IconButton>
+        </S.IconContainer>
+      </S.Layout>
     </PairRoomCard>
   );
 };

frontend/src/hooks/PairRoom/useTimer.ts

@@ -0,0 +1,38 @@
+import { useRef, useState, useEffect } from 'react';
+
+const useTimer = (defaultTime: number) => {
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const [timeLeft, setTimeLeft] = useState(defaultTime);
+  const [isActive, setIsActive] = useState(false);
+
+  const handleStart = () => setIsActive(true);
+
+  const handlePause = () => setIsActive(false);
+
+  const handleStop = () => {
+    setIsActive(false);
+    setTimeLeft(defaultTime);
+  };
+
+  useEffect(() => {
+    if (isActive && timeLeft > 0) {
+      timerRef.current = setInterval(() => {
+        setTimeLeft((timeLeft) => timeLeft - 1000);
+      }, 1000);
+    }
+
+    if (timeLeft === 0) {
+      setIsActive(false);
+      setTimeLeft(defaultTime);
+    }
+
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [timeLeft, isActive]);
+
+  return { timeLeft, isActive, handleStart, handlePause, handleStop };
+};
+
+export default useTimer;

frontend/src/pages/PairRoom/PairRoom.styles.tsx

@@ -4,7 +4,7 @@ export const Layout = styled.div`
   display: flex;
   gap: 3rem;
   width: 100%;
-  min-height: calc(100vh - 7rem);
+  height: calc(100vh - 7rem);
   padding: 3rem;
   background: ${({ theme }) => theme.color.primary[100]};
 `;