📌 그동안 공부했던 recoil, framer-motion 활용해서 타이머를 만들어봤음!

구현하고자 하는 타이머 레퍼런스 👉 pomofocus

📌 디자인 목업

기능 넣기 전에 기본적인 디자인 목업부터 만들고 시작!

• styled-components를 사용해 줬음!
• 아이콘 가져온 곳 👉 아이콘

📌 기능 추가하기

1. recoil 사용해서 state 관리

import { atom } from "recoil";

export const timerState = atom({
  key: "timerState",
  default: 1500, // 타이머 기본 셋팅 시간 25분 
});

// play, pause 버튼 state
export const isTimerActiveState = atom<boolean>({
  key: "isTimerActiveState",
  default: false,
});

// round state
export const roundCountState = atom({
  key: "roundCountState",
  default: 0,
});

// goal state
export const goalState = atom({
  key: "goalState",
  default: 0,
});

2. 25:00부터 00:00까지 거꾸로 타이머 구현하기 (setInterval 함수 사용해서 구현)

  useEffect(() => {
    let intervalId: NodeJS.Timeout | undefined = undefined;

    if (timerActive) {
      intervalId = setInterval(() => {
        setTimer((prevTimer) => {
          if (prevTimer <= 0) {
            return 1500;
          }
          return prevTimer - 1;
        });
      }, 1000);
    }

    return () => {
      if (intervalId) clearInterval(intervalId);
    };
  }, [timerActive, setTimer]);

3. 타이머 play, pause 구현

      <SvgContainer
        onClick={() => setTimerActive((prev) => !prev)} // state 바꿔주기
      >
        {timerActive ? (
          <Svg
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
          >
            <path d="M5.75 3a.75.75 0 0 0-.75.75v12.5c0 .414.336.75.75.75h1.5a.75.75 0 0 0 .75-.75V3.75A.75.75 0 0 0 7.25 3h-1.5ZM12.75 3a.75.75 0 0 0-.75.75v12.5c0 .414.336.75.75.75h1.5a.75.75 0 0 0 .75-.75V3.75a.75.75 0 0 0-.75-.75h-1.5Z" />
          </Svg>
        ) : (
          <Svg
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
          >
            <path d="M6.3 2.84A1.5 1.5 0 0 0 4 4.11v11.78a1.5 1.5 0 0 0 2.3 1.27l9.344-5.891a1.5 1.5 0 0 0 0-2.538L6.3 2.841Z" />
          </Svg>
        )}
      </SvgContainer>

4. 25분이 끝날때마다 ROUND 카운트 증가

  const handleTimerEnd = () => {
    setTimerActive(false); // 버튼 pause로 변경
    setTimer(1500); // 타이머 숫자 reset
    setRoundCount((prevCount) => {
      const newCount = prevCount + 1;
      if (newCount >= 4) {
        // roundCount가 4에 도달하면 0으로 리셋
        return 0;
      }
      return newCount;
    });
  };

5. ROUND 4번이면 GOAL 1번 카운트 증가

  useEffect(() => {
    if (initialRender) {
      // 처음 렌더링될 때는 setInitialRender를 false로 설정하여 다음부터는 이 조건을 건너뛰게 함
      setInitialRender(false);
    } else if (roundCount === 0) {
      // roundCount가 0으로 리셋되었다면 goal 업데이트 필요
      setGoal((prevGoal) => {
        return prevGoal < 12 ? prevGoal + 1 : prevGoal;
      });
    }
  }, [roundCount]);

📌 framer-motion으로 animation 추가

• motion은 사실상 많이 사용을 안했음...😅
  간단한 에니메이션만 넣어줬음.

const boxVariants = {
  hidden: { scale: 0.8, opacity: 0 },
  visible: {
    scale: 1.2,
    opacity: 1,
    transition: { duration: 0.5, bounce: 0.25 },
  },
  exit: { scale: 1, opacity: 1 },
};

const svgVariants = {
  hover: { scale: 1.2 },
};

      <BoxArea
        variants={boxVariants}
        initial="hidden"
        animate="visible"
        exit="exit"
      >
        <Box
          variants={boxVariants}
          initial="hidden"
          animate="visible"
          exit="exit"
          key={`minutes-${Math.floor(timer / 60)}`}
        >
          {Math.floor(timer / 60)
            .toString()
            .padStart(2, "0")}
        </Box>
        <ColonArea>
          <Colon />
          <Colon />
        </ColonArea>
        <Box
          variants={boxVariants}
          initial="hidden"
          animate="visible"
          exit="exit"
          key={`seconds-${timer}`}
        >
          {(timer % 60).toString().padStart(2, "0")}
        </Box>
      </BoxArea>

📌 errors

1. 분, 초 같은 에니메이션이지만 분, 초 각각 시간이 변할때만 에니메이션되게 만들기!

문제는 하나의 boxVariants으로 분, 초를 각각 에니메이션해야하는 거였음..
처음엔 일단 이렇게(👇) 코딩해봤는데 분을 나타내는 카드가 초가 바뀔때마다 같이 바뀌는 문제가 발생함..

      <BoxArea>
        <Box variants={boxVariants} initial="hidden" animate="visible">
          {Math.floor(timer / 60)
            .toString()
            .padStart(2, "0")}
        </Box>
        <ColonArea>
          <Colon />
          <Colon />
        </ColonArea>
        <Box variants={boxVariants} initial="hidden" animate="visible">
          {(timer % 60).toString().padStart(2, "0")}
        </Box>
      </BoxArea>

어떻게 해야 하나 찾아보다가 key 속성을 활용할 수 있다는 걸 알게됨

<BoxArea>
  <Box
    key={Math.floor(timer / 60)} // 타이머의 값이 변경될 때마다 새로운 key
    variants={boxVariants}
    initial="hidden"
    animate="visible"
  >
    {Math.floor(timer / 60)
      .toString()
      .padStart(2, "0")}
  </Box>
  <ColonArea>
    <Colon />
    <Colon />
  </ColonArea>
  <Box
    key={-timer} // Box 컴포넌트가 두 개이므로, 두 번째 Box에는 타이머 값에 음수를 취해 유니크한 key
    variants={boxVariants}
    initial="hidden"
    animate="visible"
  >
    {(timer % 60).toString().padStart(2, "0")}
  </Box>
</BoxArea>

😵‍💫이렇게 고쳤더니 오히려 2개의 error를 더 얻음 😵
1. Timer.tsx:118 Warning: Encountered two children with the same key, 0. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
2. Cannot destructure property 'animation' of 'this.resolved' as it is undefined.

하나씩 해결해보자면

1번 에러
리액트에서 렌더링되는 리스트의 각 항목이 고유의 key 값을 가져야 한다는 원칙을 위반했을 때 나타난다고 함.
key={Math.floor(timer / 60)} , key={-timer} 로 각각 고유한 key 값을 준줄알았는데,

• 첫 번째 컴포넌트의 key는 Math.floor(timer / 60). 타이머의 분을 나타냄.
• 두 번째 컴포넌트의 key는 timer. 타이머의 총 초를 나타냄.

만약 timer 시간이 끝나서 0이되면,
첫 번째 컴포넌트의 key도 0이 되고,
두 번째 컴포넌트의 key도 0이 되어 두 컴포넌트의 key가 동일해지는 상황이 발생함.

해결
각 컴포넌트에 고유한 key 값을 할당하기. 👇

<Box
  key={`minutes-${Math.floor(timer / 60)}`} // 분을 나타내는 Box의 key 수정
  variants={boxVariants}
  initial="hidden"
  animate="visible"
>
  {Math.floor(timer / 60)
    .toString()
    .padStart(2, "0")}
</Box>
...
<Box
  key={`seconds-${timer}`} // 초를 나타내는 Box의 key 수정
  variants={boxVariants}
  initial="hidden"
  animate="visible"
>
  {(timer % 60).toString().padStart(2, "0")}
</Box>

2번 에러
사실 첫 번째 에러를 해결하면 두 번째 에러가 자동으로 사라질 줄 알았으나,, 그런일은 일어나지 않았음,,,

두 번째 에러는 아무리 찾아봐도 모르겠어서 결국 chat gpt에게 물어봤음..

받은 답변
주어진 오류 메시지는 "Cannot destructure property 'animation' of 'this.resolved' as it is undefined."로,
특정 객체에서 destructuring을 시도할 때 해당 객체 또는 프로퍼티가 정의되지 않았을 때 발생합니다.

이 코드에서는 직접적으로 animation이라는 프로퍼티를 구조 분해 할당하는 부분이 보이지 않기 때문에, 오류의 원인은 framer-motion 라이브러리에서 발생하는 것일 수 있습니다. framer-motion은 애니메이션 관련 라이브러리이며, 여기서 사용된 컴포넌트(motion.div, motion.svg)의 애니메이션 처리 과정에서 문제가 발생한 것으로 추정됩니다.

이 문제를 해결하기 위한 몇 가지 접근 방법을 제안드립니다:

라이브러리 버전 확인: framer-motion 또는 관련 라이브러리의 버전이 최신인지 확인하세요. 때때로 오래된 버전의 라이브러리에서 버그가 발견되어 이후 버전에서 수정될 수 있습니다.
의존성 확인: 프로젝트의 package.json을 확인하여 framer-motion과 다른 관련 라이브러리들이 올바르게 설치되었는지 확인하세요. 필요하다면 npm install 또는 yarn을 실행하여 의존성을 최신 상태로 유지하세요.
코드 검토: motion.div와 motion.svg 컴포넌트의 사용 방법을 다시 한 번 검토하세요. variants, initial, animate 프로퍼티가 올바르게 설정되었는지 확인하고, framer-motion의 문서를 참조하여 올바르게 사용되고 있는지 확인하세요.
에러 로그 분석: 오류 메시지가 발생하는 정확한 위치를 찾기 위해 브라우저의 개발자 도구(Console, Sources 탭)를 사용하세요. 오류 스택 트레이스를 통해 문제의 근원을 좀 더 명확히 파악할 수 있습니다.
커뮤니티 도움 요청: framer-motion의 GitHub 이슈 트래커나 Stack Overflow 등의 개발자 커뮤니티에 해당 오류 메시지와 함께 도움을 요청할 수 있습니다. 비슷한 문제를 겪었던 다른 개발자의 경험이 도움이 될 수 있습니다.

다 해봐도 안됨...

그래서 화면을 한참 쳐다보다가 발견했는데
타이머가 끝나면 00 : 00 초를 보여주고 25:00으로 리셋이 되야하는데 00:01초에서 바로 25:00으로 바뀌는 걸 봐버림!😱

기존 코드 👇

  useEffect(() => {
    if (timer === 0) {
      handleTimerEnd();
    }
  }, [timer]);

수정 코드 👇

useEffect(() => {
  if (timer === 0) {
    // 타이머가 0에 도달하면 일시적으로 타이머를 멈추고 사용자에게 00:00을 보여줌
    setTimeout(() => {
      handleTimerEnd();
    }, 1000); // 1초(1000밀리초) 동안 00:00을 보여준 후, handleTimerEnd 함수를 호출함
  }
}, [timer]);

눈에 보이는 문제를 해결했더니 두번째 에러가 해결됬음...ㅎ
해결되서 좋지만 이 찝찝한 기분이 너무 별로다...
뭔가 대충은 알것 같지만 정확히 명료하게 이해가 안되니 답답하다 😭😭😭😭😭

결론: 공부를 더 열심히 하자! 이론도 좋지만 역시 실제로 뭔갈 만들어봐야 실력이 더 느는것 같다!! 이것 저것 더 만들어봅시다아아

📌 추가 구현하고싶은것.

• 중간에 다시 처음부터 하고 싶을 수도 있으니 리셋 버튼 만들기

• 타이머 끝나면 알림 소리나게 만들기

전체 코드 보러가기 👉 github