💄 Style: 일시정지 시 회색 테두리 & 회색 시간 레이블

Author: sscoderati

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

@@ -1,22 +1,18 @@
 import styled from '@emotion/styled';
 
-interface TimerContainerProps {
-  timerPaused: boolean;
-}
-
-export const TimerContainer = styled.div<TimerContainerProps>`
+export const TimerContainer = styled.div<{ timerPaused: boolean }>`
   ${({ theme }) => theme.style.flexCenter};
   width: 170px;
   height: 170px;
   border-radius: 50%;
   background: ${({ theme, timerPaused }) =>
     timerPaused
-      ? theme.color.linearGradientRedVivid
+      ? 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;
@@ -25,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

@@ -54,6 +54,7 @@ const MeditationTimer = () => {
   return (
     <TimerContainer timerPaused={timerId && paused}>
       <TimerElement
+        timerPaused={timerId && paused}
         onClick={() => toggleTimer()}
         onMouseOver={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}

src/styles/colors.ts

@@ -27,6 +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%)`,
-  linearGradientRedVivid: `linear-gradient(90deg, #4b111f 0%, #ff2012 100%)`,
+  linearGradientGreyVivid: `linear-gradient(90deg, #3e3e3e 0%, #b3b3b3 100%)`,
   transparentGreyBackground: 'rgba(126, 126, 126, 0.5)'
 };