Sidebar.jsx

→ click하면 ClickPlayButton로 redux(store)에 있는 isRunning 상태를 toggle함(true↔false)

import React from 'react';
import styled from 'styled-components';
import { theme } from '../../styles/GlobalStyles';
import {CgTimer,CgSandClock,CgPlayPause} from 'react-icons/cg';
import {ImExit} from "react-icons/im";
import { useDispatch } from 'react-redux';
import {setIsRunning} from '../../store/timeSlice';

import { typedUseSelector } from '../../store';

const Sidebar = ()=>{
  const dispatch = useDispatch();
  const usedTime = typedUseSelector((state) => {
    return `${state.time.usedTime.hour}:${state.time.usedTime.min}`;
  });
  const stretchingTime = typedUseSelector((state) => {
    return `${state.time.stretchTime.min}:${state.time.stretchTime.sec}`;
  });
  const ClickPlayButton =()=>{
    dispatch(setIsRunning());
  }
  return(
      <ContainerWrapper>
          <TimeContainer>
              <Icon><CgTimer/></Icon>
              <Text>총 이용 시간</Text>
              <Text>{usedTime}</Text>
              <Icon><CgSandClock/></Icon>
              <Text>스트레칭 시간</Text>
              <Text>{stretchingTime}</Text>
          </TimeContainer>
          <CapturingContainer>
              <Icon><CgPlayPause onClick={ClickPlayButton}/></Icon>
              <Text>일시정지</Text>    
              <Icon><ImExit/></Icon>
              <Text>종료하기</Text>  
          </CapturingContainer>
      </ContainerWrapper>
    )
}
export default Sidebar;

const ContainerWrapper=styled.div`
  width: 8rem;
  height: 33rem;
  background-color: ${theme.color.primary};
  border-radius: 0 1.5rem 1.5rem 0;
  box-shadow: 0 0.2rem 0.5rem ${theme.color.grayColor};
  color: ${theme.color.whiteColor}
`;
const TimeContainer=styled.div`
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:50%;    
`;
const CapturingContainer = styled.div`
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:50%;
`;

const Icon = styled.div`
  display:flex;
  align-items:center;
  font-size:2rem;
  flex-direction:column;
  margin-top:1rem;
`;
const Text = styled.div`
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:0.5rem;
`;
// TODO: 고쳐야됨

timeSlice.ts

→ 시간정보 저장하는 store

runUsedTimer에서 isRunning이 true일 때만 setInterval 설정하게되고 false면 clearInterval로 시간이 멈춰야되는데 else clearInterval(usedTimeId); 붙여도 제대로 동작안됨

import { createSlice } from '@reduxjs/toolkit';

const timeSlice = createSlice({
  name: 'timeSlice',
  initialState: {
    stretchTime: {min:0,sec:0},
    usedTime : {hour:0,min:0},
    isRunning:true
  },
  reducers: {
    setInitTime: (state,action)=>{
        state.stretchTime.min = action.payload;
        state.stretchTime.sec = 0;
        state.usedTime.hour =0;
        state.usedTime.min =0;
    },
    calUsedTime :(state) =>{
        if(state.usedTime.min===59){
            state.usedTime.min =0;
            state.usedTime.hour+=1;
        }
        else state.usedTime.min+=1;
    },
    calStretchTime :(state) =>{
        if(state.stretchTime.sec===0){
            state.stretchTime.sec =59;
            state.stretchTime.min-=1;
        }
        else state.stretchTime.sec-=1;
    },
    setIsRunning :(state)=>{
        state.isRunning = !state.isRunning;
    }
  },
});
export const runStretchTimer = (isRunning) => (dispatch) => {
    let stretchTimeId;
    if(isRunning){
        stretchTimeId = setInterval(()=>{
            dispatch(calStretchTime());
        },1000);
    }
    return ()=>clearInterval(stretchTimeId);  
};
// TODO: 1분으로 바꿔야 함
export const runUsedTimer = (isRunning) => (dispatch) => {
    let usedTimeId;
    if(isRunning){
        console.log("돌아간다")
        usedTimeId = setInterval(()=>{
            dispatch(calUsedTime());
        },1000);
    }
    console.log(usedTimeId);
    return ()=>clearInterval(usedTimeId);
};
export default timeSlice;
export const { setInitTime,calStretchTime,calUsedTime,setIsRunning } = timeSlice.actions;

방 페이지에서 이 밑에 코드로 isRunning값이 바뀌면 setInterval을 등록해줌 → timeSilce reducer에 있는 코드 참고

useEffect(()=>{
      console.log(isRunning);
      dispatch(runUsedTimer(isRunning));
      dispatch(runStretchTimer(isRunning));
    },[isRunning])