fix: timer 변수명 수정, isLessThanOneHour 변수 적용방식 변경 close #10

team-offonoff · Oct 5, 2023 · ed4c955 · ed4c955
1 parent aa6ca90
commit ed4c955
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 17 deletions.
diff --git a/src/hooks/useTimer.tsx b/src/hooks/useTimer.tsx
@@ -9,7 +9,7 @@ const useTimer = ({ endTime }: UseTimerProps) => {
   const INTERVAL = 1000;
   const [timeLeft, setTimeLeft] = useState<number>(REST_TIME);
   const [isFinished, setIsFinished] = useState(false);
-  const [isOneHour, setIsOneHour] = useState(false);
+  const [isLessThanOneHour, setIsLessThanOneHour] = useState(false);
 
   const hours = String(Math.floor((timeLeft / (1000 * 60 * 60)) % 24)).padStart(2, '0');
   const minutes = String(Math.floor((timeLeft / (1000 * 60)) % 60)).padStart(2, '0');
@@ -23,20 +23,18 @@ const useTimer = ({ endTime }: UseTimerProps) => {
     if (timeLeft <= 0) {
       clearInterval(timer);
       setIsFinished(true);
-      console.log('타이머가 종료되었습니다.');
     }
 
-    if (!isOneHour && timeLeft <= 1000 * 60 * 60) {
-      setIsOneHour(true);
-      console.log('타이머가 1시간 이내 입니다.');
+    if (!isLessThanOneHour && timeLeft <= 1000 * 60 * 60) {
+      setIsLessThanOneHour(true);
     }
 
     return () => {
       clearInterval(timer);
     };
   }, [timeLeft]);
 
-  return { timeString: `${hours} : ${minutes} : ${second}`, isFinished, isOneHour };
+  return { displayTime: `${hours} : ${minutes} : ${second}`, isFinished, isLessThanOneHour };
 };
 
 export default useTimer;
diff --git a/src/routes/Home/Home.styles.tsx b/src/routes/Home/Home.styles.tsx
@@ -76,17 +76,17 @@ export const TimerContainer = styled.div`
   margin-top: 37px;
 `;
 
-export const Timer = styled.div`
+export const Timer = styled.div<{ isLessThanOneHour: boolean }>`
   display: flex;
   align-items: center;
   justify-content: center;
   width: 115px;
   height: 37px;
   font-size: 1.5rem;
   font-weight: 700;
-  color: rgb(255 255 255 / 40%);
+  color: ${(props) => (props.isLessThanOneHour ? '#3C3457' : 'rgb(255 255 255 / 40%)')};
   text-align: center;
-  background-color: #3c3457;
+  background-color: ${(props) => (props.isLessThanOneHour ? '#A46FF3' : '#3c3457')};
   border-radius: 50px;
 `;
 

diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx
@@ -57,14 +57,7 @@ const Home = () => {
         <SkipButton onClick={handleSkipButton}>이런 토픽은 안볼래요</SkipButton>
       </SkipButtonContainer>
       <TimerContainer>
-        <Timer
-          style={{
-            color: timer.isOneHour ? '#3C3457' : 'rgb(255 255 255 / 40%)',
-            backgroundColor: timer.isOneHour ? '#A46FF3' : '#3c3457',
-          }}
-        >
-          {timer.timeString}
-        </Timer>
+        <Timer isLessThanOneHour={timer.isLessThanOneHour}>{timer.displayTime}</Timer>
       </TimerContainer>
       <SelectContainer></SelectContainer>
       <UserInfoContainer>