fix: 시간 계산하는 로직 일부 수정 (#56)

* 계산된 지난시간, 초과시간이 특정 범위를 넘지 못하도록 수정

추가로 타입에 대한 주석도 추가

* dialog 옆에 여백 추가

src/renderer/entities/pomodoro/types.ts

@@ -13,14 +13,21 @@ export type PomodoroNextAction = 'plus' | 'minus';
 export type PomodoroEndReason = 'manual' | 'exceed';
 
 export type PomodoroCycle = {
+  /* 시작 시각 */
   startAt: number;
+  /* 종료 시각. 현재 cycle이 종료되지 않았다면 undefined */
   endAt?: number;
+  /* 목표 시간 */
   goalTime: number;
+  /* 초과 시간 */
   exceedMaxTime: number;
+  /* 모드 */
   mode: PomodoroMode;
 };
 
 export type PomodoroTime = {
+  /* 지난 시간. 값의 범위: 0 <= elapsed <= cycle.goalTime + cycle.exceedMaxTime */
   elapsed: number;
+  /* 초과 시간. 값의 범위: 0 <= exceeded <= cycle.exceedMaxTime */
   exceeded: number;
 };

src/renderer/features/pomodoro/hooks/use-pomodoro.ts

@@ -66,8 +66,9 @@ const updateCycles = (cycles: PomodoroCycle[], nextCycle?: PomodoroCycle): Pomod
 
 export const getPomodoroTime = (cycle: PomodoroCycle): PomodoroTime => {
   const now = cycle.endAt ?? Date.now();
-  const elapsed = now - cycle.startAt;
-  const exceeded = elapsed - cycle.goalTime;
+  const maxElapsedTime = cycle.goalTime + cycle.exceedMaxTime;
+  const elapsed = Math.min(maxElapsedTime, now - cycle.startAt);
+  const exceeded = Math.min(cycle.exceedMaxTime, elapsed - cycle.goalTime);
 
   return { elapsed, exceeded };
 };

src/renderer/pages/pomodoro.tsx

@@ -80,10 +80,8 @@ const Pomodoro = () => {
 
         cycles.forEach((cycle) => {
           const time = getPomodoroTime(cycle);
-          if (cycle.mode === 'focus')
-            focusedTime += Math.min(time.elapsed, cycle.goalTime + cycle.exceedMaxTime);
-          if (cycle.mode === 'rest')
-            restedTime += Math.min(time.elapsed, cycle.goalTime + cycle.exceedMaxTime);
+          if (cycle.mode === 'focus') focusedTime += time.elapsed;
+          if (cycle.mode === 'rest') restedTime += time.elapsed;
         });
 
         if (focusedTime < 1000 * 60) {

src/renderer/shared/ui/dialog.tsx

@@ -41,7 +41,7 @@ export const Dialog = ({
             fullScreen && 'fixed bottom-0 left-[50%] top-0 translate-x-[-50%] pt-[56px]',
             !fullScreen &&
               'fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] rounded-md p-[20px] shadow-lg',
-            'z-50 w-full max-w-md bg-background-primary',
+            'z-50 w-[95%] max-w-md bg-background-primary',
 
             animated &&
               'duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',