-
+
+
{speakingMinute}
:
-
+
{speakingSecond}
@@ -189,7 +177,7 @@ export default function TimeBasedTimer({
{/* 조작부 */}
startTimer(isOpponentDone)}
+ onStart={startTimer}
onPause={pauseTimer}
onReset={resetCurrentTimer}
stance={prosCons}
diff --git a/src/page/TimerPage/components/TimerView.tsx b/src/page/TimerPage/components/TimerView.tsx
index 478d3a8c..933ee49d 100644
--- a/src/page/TimerPage/components/TimerView.tsx
+++ b/src/page/TimerPage/components/TimerView.tsx
@@ -53,11 +53,9 @@ export default function TimerView({ state }: { state: TimerPageLogics }) {
isRunning: timer1.isRunning,
startTimer: timer1.startTimer,
pauseTimer: timer1.pauseTimer,
- denominator: timer1.denominator,
resetCurrentTimer: () => timer1.resetCurrentTimer(timer2.isDone),
}}
item={data.table[index]}
- isOpponentDone={timer2.isDone}
isSelected={prosConsSelected === 'PROS'}
onActivate={() => handleActivateTeam('PROS')}
prosCons="PROS"
@@ -81,11 +79,9 @@ export default function TimerView({ state }: { state: TimerPageLogics }) {
isRunning: timer2.isRunning,
startTimer: timer2.startTimer,
pauseTimer: timer2.pauseTimer,
- denominator: timer2.denominator,
resetCurrentTimer: () => timer2.resetCurrentTimer(timer1.isDone),
}}
item={data.table[index]}
- isOpponentDone={timer1.isDone}
isSelected={prosConsSelected === 'CONS'}
onActivate={() => handleActivateTeam('CONS')}
prosCons="CONS"
diff --git a/src/page/TimerPage/hooks/useCircularTimerAnimation.ts b/src/page/TimerPage/hooks/useCircularTimerAnimation.ts
index 228fd692..40459e34 100644
--- a/src/page/TimerPage/hooks/useCircularTimerAnimation.ts
+++ b/src/page/TimerPage/hooks/useCircularTimerAnimation.ts
@@ -1,18 +1,21 @@
import { animate, clamp, useMotionValue } from 'framer-motion';
import { useEffect } from 'react';
-export default function useCircularTimerAnimation(rawProgress: number) {
+export default function useCircularTimerAnimation(
+ rawProgress: number,
+ isRunning: boolean,
+) {
const progress = clamp(0, 100, rawProgress);
const progressMotionValue = useMotionValue(0);
useEffect(() => {
const controls = animate(progressMotionValue, progress, {
- duration: 0.7,
+ duration: isRunning ? 0.7 : 0,
ease: 'easeOut',
});
return () => controls.stop();
- }, [progress, progressMotionValue]);
+ }, [progress, progressMotionValue, isRunning]);
return progressMotionValue;
}
diff --git a/src/page/TimerPage/hooks/useFeedbackTimer.ts b/src/page/TimerPage/hooks/useFeedbackTimer.ts
index c073317e..d3df0cc3 100644
--- a/src/page/TimerPage/hooks/useFeedbackTimer.ts
+++ b/src/page/TimerPage/hooks/useFeedbackTimer.ts
@@ -82,16 +82,19 @@ export function useFeedbackTimer(): FeedbackTimerLogics {
*/
const adjustTime = useCallback(
(amount: number) => {
- if (isRunning) return;
+ if (isRunning) {
+ return;
+ }
+
+ let newTime: number;
setTimer((prevTimer) => {
- const newTime = (prevTimer ?? 0) + amount;
+ newTime = (prevTimer ?? 0) + amount;
return newTime < 0 ? 0 : newTime;
});
- setDefaultTimer((prevDefault) => {
- const newDefault = prevDefault + amount;
- return newDefault < 0 ? 0 : newDefault;
+ setDefaultTimer(() => {
+ return newTime < 0 ? 0 : newTime;
});
},
[isRunning],
diff --git a/src/page/TimerPage/hooks/useTimeBasedTimer.ts b/src/page/TimerPage/hooks/useTimeBasedTimer.ts
index 8f4c8641..d9957547 100644
--- a/src/page/TimerPage/hooks/useTimeBasedTimer.ts
+++ b/src/page/TimerPage/hooks/useTimeBasedTimer.ts
@@ -38,33 +38,6 @@ export function useTimeBasedTimer(): TimeBasedTimerLogics {
const targetTimeRef = useRef(null);
const speakingTargetTimeRef = useRef(null);
- // 진행률 계산용 변수
- const [denominator, setDenominator] = useState(1);
- const updateDenominator = useCallback(
- (isOpponentDone: boolean) => {
- if (isOpponentDone) {
- if (isSpeakingTimerAvailable) {
- setDenominator(speakingTimer ?? 0);
- } else {
- setDenominator(totalTimer ?? 0);
- }
- } else {
- if (isSpeakingTimerAvailable) {
- setDenominator(defaultTime.defaultSpeakingTimer ?? 0);
- } else {
- setDenominator(defaultTime.defaultTotalTimer ?? 0);
- }
- }
- },
- [
- defaultTime.defaultSpeakingTimer,
- defaultTime.defaultTotalTimer,
- isSpeakingTimerAvailable,
- speakingTimer,
- totalTimer,
- ],
- );
-
/**
* 타이머 시작을 위해 사용하는 저수준 함수
*/
@@ -111,37 +84,30 @@ export function useTimeBasedTimer(): TimeBasedTimerLogics {
* - isDone(완료) 상태일 땐 시작X
* - 1초마다 totalTimer, speakingTimer(필요시) 감소
*/
- const startTimer = useCallback(
- (isOpponentDone: boolean) => {
- if (intervalRef.current !== null || totalTimer === null || isDone) {
- return;
- }
-
- // 목표 시각을 실제 시각 기반으로 계산
- // 예를 들어, 현재 시각이 오후 13시 00분 30초인데, 1회당 발언 시간이 30초라면,
- // 1회당 발언 시간이 모두 끝나는 시간은 13시 01분 00초이므로,
- // 해당 시간을 목표 시간으로 두는 식임
- const startTime = Date.now();
- targetTimeRef.current = startTime + totalTimer * 1000;
- if (isSpeakingTimerAvailable) {
- speakingTargetTimeRef.current = startTime + speakingTimer * 1000;
- }
+ const startTimer = useCallback(() => {
+ if (intervalRef.current !== null || totalTimer === null || isDone) {
+ return;
+ }
- // 분모 갱신
- updateDenominator(isOpponentDone);
+ // 목표 시각을 실제 시각 기반으로 계산
+ // 예를 들어, 현재 시각이 오후 13시 00분 30초인데, 1회당 발언 시간이 30초라면,
+ // 1회당 발언 시간이 모두 끝나는 시간은 13시 01분 00초이므로,
+ // 해당 시간을 목표 시간으로 두는 식임
+ const startTime = Date.now();
+ targetTimeRef.current = startTime + totalTimer * 1000;
+ if (isSpeakingTimerAvailable) {
+ speakingTargetTimeRef.current = startTime + speakingTimer * 1000;
+ }
- // 타이머 인터벌 시작
- setTimerInterval();
- },
- [
- isDone,
- isSpeakingTimerAvailable,
- setTimerInterval,
- speakingTimer,
- totalTimer,
- updateDenominator,
- ],
- );
+ // 타이머 인터벌 시작
+ setTimerInterval();
+ }, [
+ isDone,
+ isSpeakingTimerAvailable,
+ setTimerInterval,
+ speakingTimer,
+ totalTimer,
+ ]);
/**
* 타이머 일시정지
@@ -185,9 +151,6 @@ export function useTimeBasedTimer(): TimeBasedTimerLogics {
} else {
setSpeakingTimer(defaultTime.defaultSpeakingTimer);
}
-
- // 분모 갱신
- updateDenominator(isOpponentDone);
},
[
isSpeakingTimerAvailable,
@@ -195,7 +158,6 @@ export function useTimeBasedTimer(): TimeBasedTimerLogics {
defaultTime.defaultTotalTimer,
totalTimer,
pauseTimer,
- updateDenominator,
],
);
@@ -222,25 +184,18 @@ export function useTimeBasedTimer(): TimeBasedTimerLogics {
// 계산한 시간을 1회당 발언 시간으로 설정
setSpeakingTimer(nextSpeakingTime);
- updateDenominator(isOpponentDone);
return nextSpeakingTime;
} else {
// # 1회당 발언 시간을 사용하지 않을 경우
// 전체 발언 시간 타이머는 초기값으로 리셋
- updateDenominator(isOpponentDone);
if (totalTimer === 0 || totalTimer === null) {
return 0;
}
return totalTimer;
}
},
- [
- defaultTime.defaultSpeakingTimer,
- isSpeakingTimerAvailable,
- totalTimer,
- updateDenominator,
- ],
+ [defaultTime.defaultSpeakingTimer, isSpeakingTimerAvailable, totalTimer],
);
/**
@@ -250,6 +205,7 @@ export function useTimeBasedTimer(): TimeBasedTimerLogics {
*/
const resetAndStartTimer = useCallback(
(isOpponentDone: boolean) => {
+ console.log(`# resetAndStartTimer 호출`);
const newTime = resetTimerForNextPhase(isOpponentDone);
if (intervalRef.current !== null || totalTimer === null || isDone) {
@@ -268,9 +224,6 @@ export function useTimeBasedTimer(): TimeBasedTimerLogics {
// 타이머 인터벌 시작
setTimerInterval();
-
- // 분모 갱신
- updateDenominator(isOpponentDone);
},
[
resetTimerForNextPhase,
@@ -278,7 +231,6 @@ export function useTimeBasedTimer(): TimeBasedTimerLogics {
isDone,
isSpeakingTimerAvailable,
totalTimer,
- updateDenominator,
],
);
@@ -305,9 +257,8 @@ export function useTimeBasedTimer(): TimeBasedTimerLogics {
setTotalTimer(null);
setSpeakingTimer(null);
setIsDone(false);
- updateDenominator(false);
intervalRef.current = null;
- }, [pauseTimer, updateDenominator]);
+ }, [pauseTimer]);
useEffect(() => () => pauseTimer(), [pauseTimer]);
@@ -327,7 +278,6 @@ export function useTimeBasedTimer(): TimeBasedTimerLogics {
setDefaultTime,
setIsDone,
clearTimer,
- denominator,
};
}
@@ -341,7 +291,7 @@ export interface TimeBasedTimerLogics {
defaultSpeakingTimer: number | null;
};
isSpeakingTimerAvailable: boolean;
- startTimer: (isOpponentDone: boolean) => void;
+ startTimer: () => void;
pauseTimer: () => void;
resetTimerForNextPhase: (isOpponentDone: boolean) => number;
resetAndStartTimer: (isOpponentDone: boolean) => void;
@@ -355,5 +305,4 @@ export interface TimeBasedTimerLogics {
>;
setIsDone: Dispatch>;
clearTimer: () => void;
- denominator: number;
}
diff --git a/src/page/TimerPage/hooks/useTimerHotkey.ts b/src/page/TimerPage/hooks/useTimerHotkey.ts
index 169f706d..cf066907 100644
--- a/src/page/TimerPage/hooks/useTimerHotkey.ts
+++ b/src/page/TimerPage/hooks/useTimerHotkey.ts
@@ -50,19 +50,11 @@ export function useTimerHotkey(state: TimerPageLogics) {
}
// 찬/반 타이머 토글 (시작/정지)
- const toggleTimeBasedTimer = () => {
- if (prosConsSelected === 'PROS') {
- if (timer1.isRunning) {
- timer1.pauseTimer();
- } else {
- timer1.startTimer(timer2.isDone);
- }
- } else if (prosConsSelected === 'CONS') {
- if (timer2.isRunning) {
- timer2.pauseTimer();
- } else {
- timer2.startTimer(timer1.isDone);
- }
+ const toggleTimer = (timer: typeof timer1 | typeof timer2) => {
+ if (timer.isRunning) {
+ timer.pauseTimer();
+ } else {
+ timer.startTimer();
}
};
@@ -76,7 +68,11 @@ export function useTimerHotkey(state: TimerPageLogics) {
normalTimer.startTimer();
}
} else {
- toggleTimeBasedTimer();
+ if (prosConsSelected === 'PROS') {
+ toggleTimer(timer1);
+ } else if (prosConsSelected === 'CONS') {
+ toggleTimer(timer2);
+ }
}
break;
case 'KeyR':
diff --git a/src/page/TimerPage/stories/TimeBasedTimer.stories.tsx b/src/page/TimerPage/stories/TimeBasedTimer.stories.tsx
index 690f6378..e6ae3cf5 100644
--- a/src/page/TimerPage/stories/TimeBasedTimer.stories.tsx
+++ b/src/page/TimerPage/stories/TimeBasedTimer.stories.tsx
@@ -10,7 +10,6 @@ const mockTimerInstance = {
isDone: false,
defaultTime: { defaultTotalTimer: 150, defaultSpeakingTimer: 50 },
isSpeakingTimer: true,
- denominator: 1,
startTimer: () => {},
pauseTimer: () => {},
resetTimerForNextPhase: () => {},