💄 Style: 타이머 상태에 따른 테두리 색 변경 스타일 추가

💄 Style: 타이머 상태에 따른 테두리 색 변경 스타일 추가

Author: sscoderati

src/pages/meditation/components/MeditationTimer.style.ts

@@ -1,15 +1,18 @@
 import styled from '@emotion/styled';
 
-export const TimerContainer = styled.div`
+export const TimerContainer = styled.div<{ timerPaused: boolean }>`
   ${({ theme }) => theme.style.flexCenter};
   width: 170px;
   height: 170px;
   border-radius: 50%;
-  background: ${({ theme }) => theme.color.linearGradientPurpleVivid};
+  background: ${({ theme, timerPaused }) =>
+    timerPaused
+      ? theme.color.linearGradientGreyVivid
+      : theme.color.linearGradientPurpleVivid};
   margin-top: 100px;
 `;
 
-export const TimerElement = styled.button`
+export const TimerElement = styled.button<{ timerPaused: boolean }>`
   ${({ theme }) => theme.style.flexCenter};
   border: none;
   outline: none;
@@ -18,7 +21,8 @@ export const TimerElement = styled.button`
   height: 150px;
   border-radius: 50%;
   background-color: #211730;
-  color: ${({ theme }) => theme.color.white};
+  color: ${({ theme, timerPaused }) =>
+    timerPaused ? theme.color.greyLight : theme.color.white};
   font-size: 1.5rem;
   font-weight: bold;
   &:hover {

src/pages/meditation/components/MeditationTimer.tsx

@@ -52,8 +52,9 @@ const MeditationTimer = () => {
   };
 
   return (
-    <TimerContainer>
+    <TimerContainer timerPaused={timerId && paused}>
       <TimerElement
+        timerPaused={timerId && paused}
         onClick={() => toggleTimer()}
         onMouseOver={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}

src/styles/colors.ts

@@ -27,5 +27,6 @@ export const color = {
   linearGradientPurple:
     'linear-gradient(160deg, #2a2427 0%, #47346d 50%, #7e4ea4 75%, #b796d0 100%)',
   linearGradientPurpleVivid: `linear-gradient(90deg, #47346d 0%, #5e12ff 100%)`,
+  linearGradientGreyVivid: `linear-gradient(90deg, #3e3e3e 0%, #b3b3b3 100%)`,
   transparentGreyBackground: 'rgba(126, 126, 126, 0.5)'
 };