[ 🗺 Map ] UI 완성 후 타이머기능까지 연결하기

[Happhee]

🔥 Related Issues

close #8

🍀 작업 내용

• 지도 위에 버튼 만들기
• 버튼 이벤트 만들기
• 리액트 훅으로 타이머 기능구현하기

🌈 PR Point

💡 utils/useCounter.tsx

커스텀 훅으로 시분초 계산을 구현하고 버튼 이벤트까지 useCallback을 이용해 나타내었습니다!

import { useCallback, useRef, useState } from 'react';

const useCouter = (initMinutes: number, ms: number) => {
  const [count, setCount] = useState(initMinutes);
  const intervalRef = useRef<NodeJS.Timeout | null>(null);

  const start = useCallback(() => {
    if (intervalRef.current) return;
    intervalRef.current = setInterval(() => {
      setCount((prev) => prev + 1);
    }, ms);
  }, []);

  const stop = useCallback(() => {
    if (!intervalRef.current) return;
    clearInterval(intervalRef.current);
    intervalRef.current = null;
  }, []);

  return { count, start, stop };
};

export default useCouter;

💡 recoil/atom

리코일을 통해 플로깅 정보를 관리하여 어느 화면에서도 해당 상태를 참조할 수 있게 진행하였습니다!

export const floggingInfoState = atom<FloggingData>({
  key: 'floggingInfo',
  default: {
    date: '2023.01.12',
    location: '인천',
    distance: 0,
    duration: '00:00:00',
    photo: new FormData(),
  },
  effects_UNSTABLE: [persistAtom],
});

✅ JupgoButton

커스텀버튼을 만들어 props에 따라 다르게 보이고 이벤트도 지정할 수 있게 완성하여 지도에서 활용하였습니다!

interface JupgoButtonProps {
  btnType: string;
  handleBtnClick: React.MouseEventHandler;
}

const JupgoButton = (props: JupgoButtonProps) => {
  const { btnType, handleBtnClick } = props;

  return (
    <JupgoBtn onClick={handleBtnClick} btnType={btnType}>
      {btnType === 'floggingPause' ? (
        <IcTemporaryPause />
      ) : btnType === 'floggingStart' ? (
        <IcFloggingStart />
      ) : (
        <IcStop />
      )}
    </JupgoBtn>
  );
};

👀 스크린샷 / GIF / 링크

2023-01-24.4.20.37.mov

📚 Reference

• React로 타이머 구현하기 Part.1
• Pic.me를 마스터하고 와서 호다닥 만들기 완성💖