[FEAT] 타이머 종료·완료·연장·중단 모달 연결 및 다국어 지원

apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/todo-time.ts

@@ -1,6 +1,4 @@
-const SECONDS_PER_HOUR = 3600;
-
-const SECONDS_PER_MINUTE = 60;
+import { SECONDS_PER_HOUR, SECONDS_PER_MINUTE } from "@/constants/time";
 
 /**
  * 초 단위 duration을 "H:MM" 형식의 텍스트로 변환한다.

apps/timo-web/app/[locale]/(main)/focus/_containers/FocusSessionContainer.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { TimerOnIcon } from "@repo/timo-design-system/icons";
-import { useState } from "react";
+import { useTranslations } from "next-intl";
+import { useRef, useState } from "react";
 
 import type { FocusTask } from "@/app/[locale]/(main)/focus/_types/task-type";
 
@@ -11,22 +12,37 @@ import { focusTaskMock } from "@/app/[locale]/(main)/focus/_mocks/task-mock";
 import {
   convertDateToBadgeText,
   convertDateToDayNumberText,
-  convertDateToDayOfWeekText,
+  convertDateToDayOfWeekKey,
 } from "@/app/[locale]/(main)/focus/_utils/date";
 import { Timer } from "@/components/timer/Timer";
-import { TimerControls } from "@/components/timer/TimerControls";
+import {
+  TimerSessionControls,
+  type TimerSessionControlsHandle,
+} from "@/components/timer/TimerSessionControls";
+import { SECONDS_PER_MINUTE } from "@/constants/time";
+import { convertDurationToMinutes } from "@/utils/convert-duration-to-minutes";
 import { convertDurationToTimeText } from "@/utils/convert-duration-to-time-text";
 
 export const FocusSessionContainer = () => {
   const [task, setTask] = useState<FocusTask>(focusTaskMock);
   const today = new Date();
+  const timerSessionControlsRef = useRef<TimerSessionControlsHandle>(null);
+  const tWeekday = useTranslations("Common.weekday");
 
   const handleTogglePlay = () => {
     // TODO: API
     setTask((prev) => ({ ...prev, isRunning: !prev.isRunning }));
   };
 
-  const handleEnd = () => {
+  const handleExtendTimer = (minutes: number) => {
+    // TODO: API
+    setTask((prev) => ({
+      ...prev,
+      durationSeconds: prev.durationSeconds + minutes * SECONDS_PER_MINUTE,
+    }));
+  };
+
+  const handleCompleteTimer = () => {
     // TODO: API
     setTask((prev) => ({
       ...prev,
@@ -39,9 +55,12 @@ export const FocusSessionContainer = () => {
     }));
   };
 
-  const handleAddTime = () => {};
-
   const handleToggleCompleted = (completed: boolean) => {
+    if (completed && task.isRunning) {
+      timerSessionControlsRef.current?.openStopModal();
+      return;
+    }
+
     // TODO: API
     setTask((prev) => ({
       ...prev,
@@ -64,13 +83,15 @@ export const FocusSessionContainer = () => {
     }));
   };
 
+  const plannedMinutes = convertDurationToMinutes(task.durationSeconds);
+
   return (
     <div className="flex h-full overflow-x-auto">
       <div className="flex flex-1 flex-col gap-18">
         <FocusHeaderContainer />
         <FocusTaskItem
           dayNumber={convertDateToDayNumberText(today)}
-          dayOfWeek={convertDateToDayOfWeekText(today)}
+          dayOfWeek={tWeekday(convertDateToDayOfWeekKey(today))}
           title={task.title}
           completed={task.completed}
           dateText={convertDateToBadgeText(task.scheduledDate)}
@@ -94,11 +115,14 @@ export const FocusSessionContainer = () => {
             size="lg"
           />
 
-          <TimerControls
+          <TimerSessionControls
+            ref={timerSessionControlsRef}
             isRunning={task.isRunning}
             onTogglePlay={handleTogglePlay}
-            onEnd={handleEnd}
-            onAddTime={handleAddTime}
+            plannedMinutes={plannedMinutes}
+            actualMinutes={plannedMinutes}
+            onExtend={handleExtendTimer}
+            onComplete={handleCompleteTimer}
           />
         </div>
       </section>

apps/timo-web/app/[locale]/(main)/focus/_utils/date.ts

@@ -1,19 +1,21 @@
-const DAY_OF_WEEK_LABELS = [
-  "일요일",
-  "월요일",
-  "화요일",
-  "수요일",
-  "목요일",
-  "금요일",
-  "토요일",
+export type WeekdayKey = "SUN" | "MON" | "TUE" | "WED" | "THU" | "FRI" | "SAT";
+
+const WEEKDAY_KEYS: WeekdayKey[] = [
+  "SUN",
+  "MON",
+  "TUE",
+  "WED",
+  "THU",
+  "FRI",
+  "SAT",
 ];
 
 export const convertDateToDayNumberText = (date: Date): string => {
   return `${date.getDate()}`;
 };
 
-export const convertDateToDayOfWeekText = (date: Date): string => {
-  return DAY_OF_WEEK_LABELS[date.getDay()] ?? "";
+export const convertDateToDayOfWeekKey = (date: Date): WeekdayKey => {
+  return WEEKDAY_KEYS[date.getDay()] ?? "SUN";
 };
 
 export const convertDateToBadgeText = (date: Date): string => {

apps/timo-web/components/layout/sidebar/time/TimerPanel.tsx

@@ -4,17 +4,19 @@ import { TimerOnIcon } from "@repo/timo-design-system/icons";
 import { useState } from "react";
 
 import { Timer } from "@/components/timer/Timer";
-import { TimerControls } from "@/components/timer/TimerControls";
+import { TimerSessionControls } from "@/components/timer/TimerSessionControls";
 
 type TimerStatus = "RUNNING" | "PAUSED";
 
+const PLANNED_MINUTES = 12;
+
 export const TimerPanel = () => {
   const [status, setStatus] = useState<TimerStatus>("PAUSED");
 
   const handleTogglePlay = () =>
     setStatus((prev) => (prev === "RUNNING" ? "PAUSED" : "RUNNING"));
-  const handleEnd = () => setStatus("PAUSED");
-  const handleAddTime = () => {};
+  const handleExtendTimer = () => {};
+  const handleCompleteTimer = () => setStatus("PAUSED");
 
   return (
     <div className="flex flex-col items-center gap-11.25">
@@ -26,11 +28,13 @@ export const TimerPanel = () => {
         size="sm"
       />
 
-      <TimerControls
+      <TimerSessionControls
         isRunning={status === "RUNNING"}
         onTogglePlay={handleTogglePlay}
-        onEnd={handleEnd}
-        onAddTime={handleAddTime}
+        plannedMinutes={PLANNED_MINUTES}
+        actualMinutes={PLANNED_MINUTES}
+        onExtend={handleExtendTimer}
+        onComplete={handleCompleteTimer}
       />
     </div>
   );

apps/timo-web/components/timer/TimerCompleteModalPanel.tsx

@@ -0,0 +1,59 @@
+import { Modal } from "@repo/timo-design-system/ui";
+import { useTranslations } from "next-intl";
+
+import { formatDurationLabel } from "@/utils/format-duration-label";
+
+export interface TimerCompleteModalPanelProps {
+  plannedMinutes: number;
+  actualMinutes: number;
+  feedbackText?: string;
+  onComplete: () => void;
+}
+
+export const TimerCompleteModalPanel = ({
+  plannedMinutes,
+  actualMinutes,
+  feedbackText,
+  onComplete,
+}: TimerCompleteModalPanelProps) => {
+  const t = useTranslations("Focus.completeModal");
+  const tDuration = useTranslations("Focus.duration");
+  const hourUnit = tDuration("hourUnit");
+  const minuteUnit = tDuration("minuteUnit");
+
+  return (
+    <>
+      <Modal.Title>{t("title")}</Modal.Title>
+      <p className="typo-headline-r-14 text-timo-black mt-3">
+        {feedbackText ?? t("defaultFeedback")}
+      </p>
+
+      <div className="bg-timo-gray-500 mt-4.5 h-px w-full" />
+
+      <div className="mt-4 flex gap-6.5">
+        <div className="flex flex-col gap-1">
+          <span className="typo-body-m-12 text-timo-gray-900">
+            {t("plannedLabel")}
+          </span>
+          <span className="typo-headline-b-20 text-timo-gray-900">
+            {formatDurationLabel(plannedMinutes, hourUnit, minuteUnit)}
+          </span>
+        </div>
+        <div className="flex flex-col gap-1">
+          <span className="typo-body-m-12 text-timo-blue-300">
+            {t("actualLabel")}
+          </span>
+          <span className="typo-headline-m-20 text-timo-blue-300">
+            {formatDurationLabel(actualMinutes, hourUnit, minuteUnit)}
+          </span>
+        </div>
+      </div>
+
+      <Modal.Footer>
+        <Modal.FillButton className="flex-1 px-0" onClick={onComplete}>
+          {t("completeButton")}
+        </Modal.FillButton>
+      </Modal.Footer>
+    </>
+  );
+};

apps/timo-web/components/timer/TimerControlButton.tsx

@@ -30,7 +30,7 @@ export const TimerControlButton = ({
       onClick={onClick}
       disabled={disabled}
       className={cn(
-        "group flex size-14.5 items-center justify-center rounded-full",
+        "group focus-visible:border-timo-blue-300 flex size-14.5 items-center justify-center rounded-full border-2 border-transparent outline-none",
         isForcedActive
           ? "bg-timo-blue-50"
           : activeIcon

apps/timo-web/components/timer/TimerControls.tsx

@@ -6,46 +6,65 @@ import {
   PlusIcon,
   StopIcon,
 } from "@repo/timo-design-system/icons";
+import { Modal } from "@repo/timo-design-system/ui";
+import { useTranslations } from "next-intl";
 
 import { TimerControlButton } from "@/components/timer/TimerControlButton";
 
+const MODAL_TRIGGER_CLASS =
+  "group bg-timo-gray-300 active:bg-timo-blue-50 focus-visible:border-timo-blue-300 flex size-14.5 items-center justify-center rounded-full border-2 border-transparent outline-none";
+
 export interface TimerControlsProps {
   isRunning: boolean;
   onTogglePlay: () => void;
-  onEnd: () => void;
-  onAddTime: () => void;
+  onOpenEndModal: () => void;
+  onOpenExtendModal: () => void;
 }
 
 export const TimerControls = ({
   isRunning,
   onTogglePlay,
-  onEnd,
-  onAddTime,
+  onOpenEndModal,
+  onOpenExtendModal,
 }: TimerControlsProps) => {
+  const t = useTranslations("Focus.controls");
+
   return (
     <div className="flex items-center gap-5">
-      <TimerControlButton
-        icon={<EndBlackIcon />}
-        activeIcon={<EndBlueIcon />}
-        label="종료"
-        onClick={onEnd}
-      />
+      <Modal.Trigger
+        aria-label={t("end")}
+        onClick={onOpenEndModal}
+        className={MODAL_TRIGGER_CLASS}
+      >
+        <span className="group-active:hidden">
+          <EndBlackIcon />
+        </span>
+        <span className="hidden group-active:block">
+          <EndBlueIcon />
+        </span>
+      </Modal.Trigger>
 
       <TimerControlButton
         icon={
           isRunning ? <StopIcon width={24} height={24} /> : <PlayTimerIcon />
         }
-        label={isRunning ? "일시정지" : "재생"}
+        label={isRunning ? t("pause") : t("play")}
         variant={isRunning ? "active" : "default"}
         onClick={onTogglePlay}
       />
 
-      <TimerControlButton
-        icon={<PlusIcon width={27} height={27} />}
-        activeIcon={<PlusBlueIcon />}
-        label="시간 추가"
-        onClick={onAddTime}
-      />
+      <Modal.Trigger
+        aria-label={t("extend")}
+        onClick={onOpenExtendModal}
+        className={MODAL_TRIGGER_CLASS}
+      >
+        <span className="group-active:hidden">
+          <PlusIcon width={27} height={27} />
+        </span>
+        <span className="hidden group-active:block">
+          <PlusBlueIcon />
+        </span>
+      </Modal.Trigger>
     </div>
   );
 };

apps/timo-web/components/timer/TimerEndModalPanel.tsx

@@ -0,0 +1,42 @@
+import timoTimerLogo from "@repo/timo-design-system/assets/images/logo/timo-timer.svg";
+import { Modal, ModalButton } from "@repo/timo-design-system/ui";
+import Image from "next/image";
+import { useTranslations } from "next-intl";
+
+export interface TimerEndModalPanelProps {
+  onContinue: () => void;
+  onComplete: () => void;
+}
+
+export const TimerEndModalPanel = ({
+  onContinue,
+  onComplete,
+}: TimerEndModalPanelProps) => {
+  const t = useTranslations("Focus.endModal");
+
+  return (
+    <>
+      <Modal.Icon>
+        <Image src={timoTimerLogo} alt="" width={40} height={40} />
+      </Modal.Icon>
+      <Modal.Title>{t("title")}</Modal.Title>
+      <Modal.Description>{t("description")}</Modal.Description>
+      <Modal.Footer>
+        <ModalButton
+          variant="border"
+          className="flex-1 px-0"
+          onClick={onContinue}
+        >
+          {t("continueButton")}
+        </ModalButton>
+        <ModalButton
+          variant="fill"
+          className="flex-1 px-0"
+          onClick={onComplete}
+        >
+          {t("completeButton")}
+        </ModalButton>
+      </Modal.Footer>
+    </>
+  );
+};