Skip to content

Commit 942ae6e

Browse files
fecaparkfecapark
committed
Refactor: Refactoring Timer
1 parent b516dd1 commit 942ae6e

File tree

7 files changed

+90
-62
lines changed

7 files changed

+90
-62
lines changed

‎components/Clock/Graduation/Graduation.styled.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled from "@emotion/styled";
2-
import { IGraduationStyleProps } from "../Clock.type";
2+
import { IGraduationStyleProps } from "./Graduation.type";
33
import { getRotatedPosition } from "../Clock.util";
44

55
export const GraduationContainer = styled.div<IGraduationStyleProps>`

‎components/Clock/Graduation/Graduation.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useRecoilValue } from "recoil";
2-
import { IGraduationProps } from "../Clock.type";
2+
import { IGraduationProps } from "./Graduation.type";
33
import {
44
clockDegreeAtom as CD,
55
maxClockTimeAtom as MCT,

‎components/TimeText/TimeText.styled.ts

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import styled from "@emotion/styled";
2+
3+
export const TimeTextContainer = styled.div<{
4+
triggerZoom: boolean;
5+
isHide: boolean;
6+
}>`
7+
${({ theme }) => theme.shareCSS.noDrag};
8+
9+
font-size: ${(props) => (props.isHide ? "72" : "60")}px;
10+
line-height: 1em;
11+
font-weight: 100;
12+
13+
display: flex;
14+
flex-direction: column;
15+
align-items: flex-end;
16+
17+
transform-origin: right bottom;
18+
transform: scale(${(props) => (props.triggerZoom ? 2.5 : 1)});
19+
transition: transform
20+
${(props) =>
21+
props.triggerZoom
22+
? "0.3s cubic-bezier(0.2, 0, 0, 1)"
23+
: "0.15s cubic-bezier(0, 0, 0, 1)"};
24+
transition-delay: 0.3s;
25+
26+
.row {
27+
width: 100px;
28+
display: flex;
29+
justify-content: ${(props) => (props.isHide ? "center" : "flex-end")};
30+
31+
.min,
32+
.sec {
33+
font-family: "Poppins", sans-serif;
34+
}
35+
}
36+
`;

‎components/TimeText/TimeText.tsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { useRecoilValue } from "recoil";
2+
import useMediaMatch from "../../hooks/useMediaMatch";
3+
import {
4+
clockDegreeAtom as CD,
5+
isClockPointerDownAtom as ICPD,
6+
isTimingNowAtom as ITN,
7+
progressUnitValueAtom as PUV,
8+
maxClockTimeAtom as MCT,
9+
} from "../../shared/atom";
10+
import { Theme } from "../../styles/theme";
11+
import {
12+
getPercentageFromDegree,
13+
getTimeFromDegree,
14+
} from "../Timer/Timer.util";
15+
import { TimeTextContainer } from "./TimeText.styled";
16+
17+
export default function TimeText() {
18+
const isTimingNow = useRecoilValue(ITN);
19+
const clockDegree = useRecoilValue(CD);
20+
const isClockPointerDown = useRecoilValue(ICPD);
21+
const progressUnit = useRecoilValue(PUV);
22+
const maxClockTime = useRecoilValue(MCT);
23+
const [isHideTimer, _] = useMediaMatch(Theme.mediaQueries.hideTimerMaxWidth);
24+
25+
return (
26+
<TimeTextContainer
27+
triggerZoom={isClockPointerDown || isTimingNow}
28+
isHide={isHideTimer}
29+
>
30+
<div className="row">
31+
<span className="min">
32+
{progressUnit === "time"
33+
? getTimeFromDegree(clockDegree, maxClockTime).min
34+
: getPercentageFromDegree(clockDegree).int}
35+
</span>
36+
</div>
37+
<div className="row">
38+
<span className="sec">
39+
{progressUnit === "time"
40+
? getTimeFromDegree(clockDegree, maxClockTime).sec
41+
: "." + getPercentageFromDegree(clockDegree).float}
42+
</span>
43+
</div>
44+
</TimeTextContainer>
45+
);
46+
}

‎components/Timer/Timer.styled.ts

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -44,35 +44,3 @@ export const Container = styled.div`
4444
bottom: auto;
4545
}
4646
`;
47-
48-
export const TimeText = styled.div<{ triggerZoom: boolean; isHide: boolean }>`
49-
${({ theme }) => theme.shareCSS.noDrag};
50-
51-
font-size: ${(props) => (props.isHide ? "72" : "60")}px;
52-
line-height: 1em;
53-
font-weight: 100;
54-
55-
display: flex;
56-
flex-direction: column;
57-
align-items: flex-end;
58-
59-
transform-origin: right bottom;
60-
transform: scale(${(props) => (props.triggerZoom ? 2.5 : 1)});
61-
transition: transform
62-
${(props) =>
63-
props.triggerZoom
64-
? "0.3s cubic-bezier(0.2, 0, 0, 1)"
65-
: "0.15s cubic-bezier(0, 0, 0, 1)"};
66-
transition-delay: 0.3s;
67-
68-
.row {
69-
width: 100px;
70-
display: flex;
71-
justify-content: ${(props) => (props.isHide ? "center" : "flex-end")};
72-
73-
.min,
74-
.sec {
75-
font-family: "Poppins", sans-serif;
76-
}
77-
}
78-
`;

‎components/Timer/Timer.tsx

Lines changed: 6 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,33 @@ import {
44
clockDegreeAtom as CD,
55
isClockPointerDownAtom as ICPD,
66
isTimingNowAtom as ITN,
7-
soundEffectAudioAtom as SEA,
87
languageOptionValueAtom as LOV,
98
progressUnitValueAtom as PUV,
109
maxClockTimeAtom as MCT,
1110
} from "../../shared/atom";
12-
import { Container, TimeText } from "./Timer.styled";
13-
import { getPercentageFromDegree, getTimeFromDegree } from "./Timer.util";
11+
import { Container } from "./Timer.styled";
1412
import "firebase/messaging";
1513
import RoundButton from "../Button/RoundButton/RoundButton";
1614
import useMediaMatch from "../../hooks/useMediaMatch";
1715
import { Theme } from "../../styles/theme";
1816
import { IProps } from "./Timer.type";
1917
import useRecordManager from "../../hooks/useRecordManager";
2018
import TimerOption from "../TimerOption/TimerOption";
19+
import TimeText from "../TimeText/TimeText";
2120

2221
let timerInterval: NodeJS.Timer | null = null;
2322
let startTime: Date | null = null;
2423
let startDegree: number = 0;
2524
let isPausedBefore: boolean = false;
2625

2726
export default function Timer({ onTimingStart }: IProps) {
28-
const [isTimingNow, setIsTimingNow] = useRecoilState(ITN);
29-
const [clockDegree, setClockDegree] = useRecoilState(CD);
3027
const isClockPointerDown = useRecoilValue(ICPD);
3128
const language = useRecoilValue(LOV);
32-
const progressUnit = useRecoilValue(PUV);
3329
const maxClockTime = useRecoilValue(MCT);
34-
const [isHideTimer, _] = useMediaMatch(Theme.mediaQueries.hideTimerMaxWidth);
30+
const [isTimingNow, setIsTimingNow] = useRecoilState(ITN);
31+
const [clockDegree, setClockDegree] = useRecoilState(CD);
3532
const { manageBehavior, manageTimeRecords } = useRecordManager();
33+
const [isHideTimer, _] = useMediaMatch(Theme.mediaQueries.hideTimerMaxWidth);
3634
const isEmptyClockDegree = clockDegree >= 360;
3735

3836
const removeTimerInterval = () => {
@@ -131,25 +129,7 @@ export default function Timer({ onTimingStart }: IProps) {
131129
/>
132130
<TimerOption />
133131
</div>
134-
<TimeText
135-
triggerZoom={isClockPointerDown || isTimingNow}
136-
isHide={isHideTimer}
137-
>
138-
<div className="row">
139-
<span className="min">
140-
{progressUnit === "time"
141-
? getTimeFromDegree(clockDegree, maxClockTime).min
142-
: getPercentageFromDegree(clockDegree).int}
143-
</span>
144-
</div>
145-
<div className="row">
146-
<span className="sec">
147-
{progressUnit === "time"
148-
? getTimeFromDegree(clockDegree, maxClockTime).sec
149-
: "." + getPercentageFromDegree(clockDegree).float}
150-
</span>
151-
</div>
152-
</TimeText>
132+
<TimeText />
153133
</Container>
154134
);
155135
}

‎components/Timer/Timer.util.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@ export const getTimeFromDegree = (degree: number, maxClockTime: number) => {
77
const parseTimeFactor = (maxClockTime * 60) / 360;
88
const totalSec = Math.round((360 - degree) * parseTimeFactor);
99

10-
// console.log(degree, maxClockTime, parseTimeFactor);
11-
1210
const min = Math.floor(totalSec / 60);
1311
const sec = totalSec % 60;
1412

0 commit comments

Comments
 (0)