[REFACTOR] 모달·생성하기·시간 추가 버튼을 공용 Button으로 교체

apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsCalendarDisconnectModal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import timoTimerLogo from "@repo/timo-design-system/assets/images/logo/timo-timer.svg";
-import { ModalButton } from "@repo/timo-design-system/ui";
+import { Button } from "@repo/timo-design-system/ui";
 import Image from "next/image";
 
 import type { SettingsProfileLabels } from "@/app/[locale]/(main)/settings/_types/account/profile-type";
@@ -41,19 +41,27 @@ export const SettingsCalendarDisconnectModal = ({
         {labels.calendarDisconnectConfirmDescription}
       </p>
       <div className="mt-6 flex w-full gap-3">
-        <ModalButton variant="border" className="flex-1 px-0" onClick={onClose}>
+        <Button
+          variant="secondary"
+          appearance="outline"
+          size="lg"
+          className="flex-1"
+          onClick={onClose}
+        >
           {labels.calendarDisconnectConfirmCancel}
-        </ModalButton>
-        <ModalButton
-          variant="fill"
-          className="flex-1 px-0"
+        </Button>
+        <Button
+          variant="primary"
+          appearance="fill"
+          size="lg"
+          className="flex-1"
           onClick={() => {
             onDisconnect();
             onClose();
           }}
         >
           {labels.calendarDisconnectConfirmConfirm}
-        </ModalButton>
+        </Button>
       </div>
     </OverlayModal>
   );

apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawModalContainer.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import timoTimerLogo from "@repo/timo-design-system/assets/images/logo/timo-timer.svg";
-import { ModalButton } from "@repo/timo-design-system/ui";
+import { Button } from "@repo/timo-design-system/ui";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
 
@@ -44,19 +44,27 @@ export const SettingsWithdrawModalContainer = ({
         {t("withdrawConfirmDescription")}
       </p>
       <div className="mt-6 flex w-full gap-3">
-        <ModalButton
-          variant="border"
-          className="flex-1 px-0"
+        <Button
+          variant="secondary"
+          appearance="outline"
+          size="lg"
+          className="flex-1"
           onClick={() => {
             onWithdraw();
             onClose();
           }}
         >
           {t("withdrawConfirmConfirm")}
-        </ModalButton>
-        <ModalButton variant="fill" className="flex-1 px-0" onClick={onClose}>
+        </Button>
+        <Button
+          variant="primary"
+          appearance="fill"
+          size="lg"
+          className="flex-1"
+          onClick={onClose}
+        >
           {t("withdrawConfirmCancel")}
-        </ModalButton>
+        </Button>
       </div>
     </OverlayModal>
   );

apps/timo-web/app/[locale]/onboarding/_components/OnboardingButton.tsx

@@ -1,9 +1,9 @@
 import {
-  ChevronLeftIcon,
-  ChevronSmallRightIcon,
+  ChevronSmallLeftIcon,
+  ChevronSmallRightDisableIcon,
   ChevronSmallRightWhiteIcon,
 } from "@repo/timo-design-system/icons";
-import { cn } from "@repo/timo-design-system/utils";
+import { Button } from "@repo/timo-design-system/ui";
 
 interface OnboardingButtonProps {
   variant: "next" | "prev" | "start";
@@ -22,71 +22,54 @@ export const OnboardingButton = ({
 }: OnboardingButtonProps) => {
   if (variant === "prev") {
     return (
-      <button
-        type="button"
+      <Button
+        variant="secondary"
+        appearance="fill"
+        size="m"
+        icon={<ChevronSmallLeftIcon />}
+        className="w-auto px-2"
         onClick={onClick}
-        className="hover:bg-timo-gray-500 bg-timo-gray-200 flex items-center justify-center gap-2 rounded-[4px] px-4 py-2 transition-colors duration-200 ease-in-out"
       >
-        <ChevronLeftIcon width={18} height={18} />
-        <span className="typo-headline-m-16 text-timo-gray-900">{label}</span>
-      </button>
+        {label}
+      </Button>
     );
   }
 
+  const isDisabled = disabled || !isActive;
+
   if (variant === "start") {
-    // TODO: 원래 start 버튼 (항상 활성 스타일) — CalendarConnect 단계 재활성화 시 아래 주석 해제 후 isActive 분기 제거
-    // return (
-    //   <button
-    //     type="button"
-    //     onClick={onClick}
-    //     className="bg-timo-blue-300 flex items-center justify-center gap-2 rounded-[4px] px-4 py-2"
-    //   >
-    //     <span className="typo-headline-m-16 text-white">{label}</span>
-    //   </button>
-    // );
     return (
-      <button
-        type="button"
+      <Button
+        variant="primary"
+        appearance="fill"
+        size="m"
+        className="w-auto px-4"
+        disabled={isDisabled}
         onClick={onClick}
-        disabled={disabled || !isActive}
-        className={cn(
-          "flex items-center justify-center gap-2 rounded-[4px] px-4 py-2 transition-colors duration-200 ease-in-out",
-          isActive ? "bg-timo-blue-300" : "bg-timo-gray-200",
-        )}
       >
-        <span
-          className={cn(
-            "typo-headline-m-16",
-            isActive ? "text-white" : "text-timo-gray-700",
-          )}
-        >
-          {label}
-        </span>
-      </button>
+        {label}
+      </Button>
     );
   }
 
-  const isDisabled = disabled || !isActive;
-
   return (
-    <button
-      type="button"
-      onClick={onClick}
+    <Button
+      variant={isDisabled ? "secondary" : "primary"}
+      appearance="fill"
+      size="m"
+      icon={
+        isDisabled ? (
+          <ChevronSmallRightDisableIcon />
+        ) : (
+          <ChevronSmallRightWhiteIcon />
+        )
+      }
+      iconPosition="right"
+      className="w-auto px-2"
       disabled={isDisabled}
-      className={cn(
-        "flex items-center justify-center gap-2 rounded-[4px] px-4 py-2 transition-colors duration-200 ease-in-out",
-        isActive ? "bg-timo-blue-300" : "bg-timo-gray-200",
-      )}
+      onClick={onClick}
     >
-      <span
-        className={cn(
-          "typo-headline-m-16",
-          isActive ? "text-white" : "text-timo-gray-700",
-        )}
-      >
-        {label}
-      </span>
-      {isActive ? <ChevronSmallRightWhiteIcon /> : <ChevronSmallRightIcon />}
-    </button>
+      {label}
+    </Button>
   );
 };

apps/timo-web/components/tag/CreateTagModalContainer.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { DeleteIcon } from "@repo/timo-design-system/icons";
-import { CreateButton, TagNameInput } from "@repo/timo-design-system/ui";
+import { Button, TagNameInput } from "@repo/timo-design-system/ui";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
 
@@ -81,11 +81,16 @@ export const CreateTagModalContainer = ({
       </div>
 
       <div className="flex w-full items-center justify-end">
-        <CreateButton
-          label={t("createTagModal.create")}
+        <Button
+          variant="primary"
+          appearance="fill"
+          size="m"
+          className="w-auto px-4"
           disabled={!isValid}
           onClick={handleCreate}
-        />
+        >
+          {t("createTagModal.create")}
+        </Button>
       </div>
     </OverlayModal>
   );

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

@@ -50,7 +50,7 @@ export const TimerCompleteModalPanel = ({
       </div>
 
       <Modal.Footer>
-        <Modal.FillButton className="flex-1 px-0" onClick={onComplete}>
+        <Modal.FillButton onClick={onComplete}>
           {t("completeButton")}
         </Modal.FillButton>
       </Modal.Footer>

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

@@ -1,5 +1,5 @@
 import timoTimerLogo from "@repo/timo-design-system/assets/images/logo/timo-timer.svg";
-import { Modal, ModalButton } from "@repo/timo-design-system/ui";
+import { Button, Modal } from "@repo/timo-design-system/ui";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
 
@@ -22,20 +22,24 @@ export const TimerEndModalPanel = ({
       <Modal.Title>{t("title")}</Modal.Title>
       <Modal.Description>{t("description")}</Modal.Description>
       <Modal.Footer>
-        <ModalButton
-          variant="border"
-          className="flex-1 px-0"
+        <Button
+          variant="secondary"
+          appearance="outline"
+          size="lg"
+          className="flex-1"
           onClick={onContinue}
         >
           {t("continueButton")}
-        </ModalButton>
-        <ModalButton
-          variant="fill"
-          className="flex-1 px-0"
+        </Button>
+        <Button
+          variant="primary"
+          appearance="fill"
+          size="lg"
+          className="flex-1"
           onClick={onComplete}
         >
           {t("completeButton")}
-        </ModalButton>
+        </Button>
       </Modal.Footer>
     </>
   );

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

@@ -1,5 +1,4 @@
-import { Modal, ModalButton } from "@repo/timo-design-system/ui";
-import { cn } from "@repo/timo-design-system/utils";
+import { Button, Modal } from "@repo/timo-design-system/ui";
 import { useTranslations } from "next-intl";
 
 import { extendTimerBodyExtendMinutesMax } from "@/generated/endpoints/timer/timer.zod";
@@ -20,8 +19,9 @@ const PRESET_OPTIONS: {
   { preset: 60, labelKey: "presetOneHour" },
 ];
 
-const CHIP_FOCUS_BORDER_CLASS =
-  "border-2 border-transparent focus-visible:border-timo-blue-300 outline-none";
+const focusOnMount = (element: HTMLInputElement | null) => {
+  element?.focus();
+};
 
 export interface TimerExtendModalPanelProps {
   selectedPreset: ExtendTimePreset | null;
@@ -54,26 +54,23 @@ export const TimerExtendModalPanel = ({
 
       <div className="mt-5.75 grid w-full grid-cols-4 gap-1.25">
         {PRESET_OPTIONS.map(({ preset, labelKey }) => (
-          <button
+          <Button
             key={preset}
-            type="button"
+            variant="secondary"
+            appearance="fill"
+            size="m"
+            className="text-timo-black"
             aria-pressed={selectedPreset === preset}
             onClick={() => onSelectPreset(preset)}
-            className={cn(
-              "typo-headline-r-14 flex h-[37px] items-center justify-center rounded-[4px]",
-              CHIP_FOCUS_BORDER_CLASS,
-              selectedPreset === preset
-                ? "bg-timo-blue-300 text-white"
-                : "bg-timo-gray-300 text-timo-black",
-            )}
           >
             {t(labelKey)}
-          </button>
+          </Button>
         ))}
 
         {isCustomSelected ? (
-          <div className="border-timo-gray-500 focus-within:border-timo-blue-300 flex h-[37px] items-center justify-center rounded-[4px] border px-2">
+          <div className="border-timo-blue-300 focus-within:ring-timo-blue-300 flex h-8.5 items-center justify-center rounded-[4px] border px-2 focus-within:ring-2 focus-within:ring-offset-2">
             <input
+              ref={focusOnMount}
               type="text"
               inputMode="numeric"
               value={customMinutes}
@@ -100,42 +97,35 @@ export const TimerExtendModalPanel = ({
             </span>
           </div>
         ) : (
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            appearance="fill"
+            size="m"
+            className="text-timo-black"
             onClick={() => onSelectPreset("custom")}
-            className={cn(
-              "typo-headline-r-14 text-timo-gray-700 bg-timo-gray-300 flex h-[37px] items-center justify-center rounded-[4px]",
-              CHIP_FOCUS_BORDER_CLASS,
-            )}
           >
             {t("customPreset")}
-          </button>
+          </Button>
         )}
       </div>
 
       <div className="mt-2.5 flex w-full gap-1.5">
         {canGoBack ? (
-          <ModalButton
-            variant="border"
-            className="flex-1 px-0"
+          <Button
+            variant="secondary"
+            appearance="outline"
+            size="lg"
+            className="flex-1"
             onClick={onClose}
           >
             {t("closeButton")}
-          </ModalButton>
+          </Button>
         ) : (
-          <Modal.BorderButton className="flex-1 px-0" onClick={onClose}>
+          <Modal.BorderButton onClick={onClose}>
             {t("closeButton")}
           </Modal.BorderButton>
         )}
-        <Modal.FillButton
-          className={cn(
-            "flex-1 px-0",
-            !canSubmit &&
-              "border-timo-gray-500 text-timo-gray-700 border bg-white",
-          )}
-          disabled={!canSubmit}
-          onClick={onSubmit}
-        >
+        <Modal.FillButton disabled={!canSubmit} onClick={onSubmit}>
           {t("submitButton")}
         </Modal.FillButton>
       </div>