Feature: Prevent timer animation on mobile

Author: fecapark

components/BottomSheet/contents/BottomSheetTimer/BottomSheetTimer.tsx

@@ -8,6 +8,7 @@ export default function BottomSheetTimer({
   return (
     <ContentContainer>
       <Timer
+        disableAnimation={true}
         onTimingStart={() => {
           hideBottomSheet();
         }}

components/Timer/Timer.styled.ts

@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
+import { css, keyframes } from "@emotion/react";
+import { Theme } from "../../styles/theme";
 
 const TimerFadeKeyframe = keyframes`
   from {
@@ -13,7 +14,11 @@ const TimerFadeKeyframe = keyframes`
   }
 `;
 
-export const Container = styled.div`
+export const TimerFadeAnimationCSS = css`
+  animation: ${TimerFadeKeyframe} 0.4s cubic-bezier(0.2, 0, 0, 1) 0.5s forwards;
+`;
+
+export const Container = styled.div<{ disableAnimation: boolean }>`
   display: flex;
   flex-direction: column;
   align-items: flex-end;
@@ -30,12 +35,14 @@ export const Container = styled.div`
     gap: 30px;
   }
 
-  opacity: 0;
-  transform: translate3d(0, 30px, 0);
-  animation: ${TimerFadeKeyframe} 0.4s cubic-bezier(0.2, 0, 0, 1) 0.5s forwards;
+  opacity: ${(props) => (props.disableAnimation ? "1" : "0")};
+  transform: translate3d(
+    0,
+    ${(props) => (props.disableAnimation ? "0" : "30px")},
+    0
+  );
 
-  @media screen and (max-width: ${({ theme }) =>
-      theme.responsiveSizes.hideTimer}px) {
+  @media screen and (max-width: ${Theme.responsiveSizes.hideTimer}px) {
     justify-content: center;
     flex-direction: row-reverse;
 

components/Timer/Timer.tsx

@@ -5,15 +5,14 @@ import {
   isClockPointerDownAtom as ICPD,
   isTimingNowAtom as ITN,
   languageOptionValueAtom as LOV,
-  progressUnitValueAtom as PUV,
   maxClockTimeAtom as MCT,
 } from "../../shared/atom";
-import { Container } from "./Timer.styled";
+import { Container, TimerFadeAnimationCSS } from "./Timer.styled";
 import "firebase/messaging";
 import RoundButton from "../Button/RoundButton/RoundButton";
 import useMediaMatch from "../../hooks/useMediaMatch";
 import { Theme } from "../../styles/theme";
-import { IProps } from "./Timer.type";
+import { ITimerProps } from "./Timer.type";
 import useRecordManager from "../../hooks/useRecordManager";
 import TimerOption from "../TimerOption/TimerOption";
 import TimeText from "../TimeText/TimeText";
@@ -23,7 +22,10 @@ let startTime: Date | null = null;
 let startDegree: number = 0;
 let isPausedBefore: boolean = false;
 
-export default function Timer({ onTimingStart }: IProps) {
+export default function Timer({
+  onTimingStart,
+  disableAnimation = false,
+}: ITimerProps) {
   const isClockPointerDown = useRecoilValue(ICPD);
   const language = useRecoilValue(LOV);
   const maxClockTime = useRecoilValue(MCT);
@@ -99,7 +101,10 @@ export default function Timer({ onTimingStart }: IProps) {
   }, [isTimingNow]);
 
   return (
-    <Container>
+    <Container
+      css={disableAnimation ? null : TimerFadeAnimationCSS}
+      disableAnimation={disableAnimation}
+    >
       <div className="option-container">
         {isHideTimer ? null : (
           <RoundButton

components/Timer/Timer.type.ts

@@ -1,3 +1,4 @@
-export interface IProps {
+export interface ITimerProps {
   onTimingStart?: () => void;
+  disableAnimation?: boolean;
 }

components/pages/records/RecordLogs/RecordLogs.tsx

@@ -1,6 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
-import { FaBoxOpen } from "react-icons/fa";
 import { useRecoilValue } from "recoil";
 import {
   getTimeRecordsFromDB,