From d3365b16ad4baf849f90480056ed2fd714a819e2 Mon Sep 17 00:00:00 2001 From: hyewon <130418741+ehye1@users.noreply.github.com> Date: Wed, 7 Oct 2026 13:16:25 +0900 Subject: [PATCH 01/11] =?UTF-8?q?refactor(web):=20=EC=83=9D=EC=84=B1?= =?UTF-8?q?=ED=95=98=EA=B8=B0=20=EB=B2=84=ED=8A=BC=EC=9D=84=20=EA=B3=B5?= =?UTF-8?q?=EC=9A=A9=20Button=EC=9C=BC=EB=A1=9C=20=EA=B5=90=EC=B2=B4=20(#3?= =?UTF-8?q?16)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 할 일 생성·태그 생성 모달의 CreateButton을 공용 Button(primary fill m)으로 교체했습니다. --- .../components/tag/CreateTagModalContainer.tsx | 13 +++++++++---- .../todo-modal/create/CreateTodoModalContent.tsx | 13 +++++++++---- 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/apps/timo-web/components/tag/CreateTagModalContainer.tsx b/apps/timo-web/components/tag/CreateTagModalContainer.tsx index 6f9a77db..d275d044 100644 --- a/apps/timo-web/components/tag/CreateTagModalContainer.tsx +++ b/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 = ({
- + > + {t("createTagModal.create")} +
); diff --git a/apps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsx b/apps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsx index 009984e6..95738e6f 100644 --- a/apps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsx +++ b/apps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsx @@ -2,7 +2,7 @@ import { zodResolver } from "@hookform/resolvers/zod"; import { DeleteIcon } from "@repo/timo-design-system/icons"; -import { CreateButton, TodoToolbar } from "@repo/timo-design-system/ui"; +import { Button, TodoToolbar } from "@repo/timo-design-system/ui"; import { useTranslations } from "next-intl"; import { useController, useForm } from "react-hook-form"; @@ -207,11 +207,16 @@ export const CreateTodoModalContent = ({ }} /> - + > + {t("createModal.create")} + From 742303bb4d87d5c35bdd09f944c6140a3562908b Mon Sep 17 00:00:00 2001 From: hyewon <130418741+ehye1@users.noreply.github.com> Date: Wed, 7 Oct 2026 13:17:07 +0900 Subject: [PATCH 02/11] =?UTF-8?q?refactor(ui):=20Modal=20=ED=95=98?= =?UTF-8?q?=EB=8B=A8=20=EB=B2=84=ED=8A=BC=EC=9D=84=20=EA=B3=B5=EC=9A=A9=20?= =?UTF-8?q?Button=EC=9C=BC=EB=A1=9C=20=EA=B5=90=EC=B2=B4=20(#316)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Modal.BorderButton은 secondary outline lg, Modal.FillButton은 primary fill lg Button을 사용하도록 교체했습니다. --- .../src/components/layout/modal/Modal.tsx | 28 +++++++++++++------ 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/packages/timo-design-system/src/components/layout/modal/Modal.tsx b/packages/timo-design-system/src/components/layout/modal/Modal.tsx index 4c10ea60..c1e8d96c 100644 --- a/packages/timo-design-system/src/components/layout/modal/Modal.tsx +++ b/packages/timo-design-system/src/components/layout/modal/Modal.tsx @@ -15,7 +15,7 @@ import { import { createPortal } from "react-dom"; import { acquireModalStackIndex, cn, hasOpenFloatingLayer } from "../../../lib"; -import { ModalButton } from "../../button/modal-button/ModalButton"; +import { Button } from "../../button/button/Button"; // tailwind-config theme.css의 --z-index-modal-overlay/--z-index-modal-panel과 동일한 기준값이다. const BASE_OVERLAY_Z_INDEX = 40; @@ -232,20 +232,25 @@ export type ModalBorderButtonProps = ButtonHTMLAttributes; const ModalBorderButton = ({ onClick, className, + children, ...rest }: ModalBorderButtonProps) => { const { close } = useModalContext(); return ( - { onClick?.(e); close(); }} - className={cn("flex-1 px-0", className)} - /> + className={cn("flex-1", className)} + > + {children} + ); }; @@ -254,20 +259,25 @@ export type ModalFillButtonProps = ButtonHTMLAttributes; const ModalFillButton = ({ onClick, className, + children, ...rest }: ModalFillButtonProps) => { const { close } = useModalContext(); return ( - { onClick?.(e); close(); }} - className={cn("flex-1 px-0", className)} - /> + className={cn("flex-1", className)} + > + {children} + ); }; From c0b4f7a0f55d7b7b781d8ce3ea86a15ad6f03197 Mon Sep 17 00:00:00 2001 From: hyewon <130418741+ehye1@users.noreply.github.com> Date: Wed, 7 Oct 2026 13:21:22 +0900 Subject: [PATCH 03/11] =?UTF-8?q?refactor(web):=20=EB=AA=A8=EB=8B=AC=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=EC=9D=84=20=EA=B3=B5=EC=9A=A9=20Button?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EA=B5=90=EC=B2=B4=20(#316)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ModalButton을 직접 사용하던 모달을 공용 Button으로 교체하고, 시간 추가하기 버튼의 비활성 스타일 덮어쓰기와 중복 className을 제거했습니다. --- .../SettingsCalendarDisconnectModal.tsx | 22 +++++++++++------ .../SettingsWithdrawModalContainer.tsx | 22 +++++++++++------ .../timer/TimerCompleteModalPanel.tsx | 2 +- .../components/timer/TimerEndModalPanel.tsx | 22 ++++++++++------- .../timer/TimerExtendModalPanel.tsx | 24 +++++++------------ .../components/timer/TimerStopModalPanel.tsx | 16 ++++++++----- 6 files changed, 63 insertions(+), 45 deletions(-) diff --git a/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsCalendarDisconnectModal.tsx b/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsCalendarDisconnectModal.tsx index ac26e8c0..31f6a9d8 100644 --- a/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsCalendarDisconnectModal.tsx +++ b/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}

- +
); diff --git a/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawModalContainer.tsx b/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawModalContainer.tsx index 1f43dfba..4ae6e597 100644 --- a/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawModalContainer.tsx +++ b/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")}

- { onWithdraw(); onClose(); }} > {t("withdrawConfirmConfirm")} - - + +
); diff --git a/apps/timo-web/components/timer/TimerCompleteModalPanel.tsx b/apps/timo-web/components/timer/TimerCompleteModalPanel.tsx index babed0f6..c80ff2ea 100644 --- a/apps/timo-web/components/timer/TimerCompleteModalPanel.tsx +++ b/apps/timo-web/components/timer/TimerCompleteModalPanel.tsx @@ -50,7 +50,7 @@ export const TimerCompleteModalPanel = ({ - + {t("completeButton")} diff --git a/apps/timo-web/components/timer/TimerEndModalPanel.tsx b/apps/timo-web/components/timer/TimerEndModalPanel.tsx index b2e57e0d..370284e5 100644 --- a/apps/timo-web/components/timer/TimerEndModalPanel.tsx +++ b/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 = ({ {t("title")} {t("description")} - {t("continueButton")} - - + ); diff --git a/apps/timo-web/components/timer/TimerExtendModalPanel.tsx b/apps/timo-web/components/timer/TimerExtendModalPanel.tsx index 8de4e4be..289ececf 100644 --- a/apps/timo-web/components/timer/TimerExtendModalPanel.tsx +++ b/apps/timo-web/components/timer/TimerExtendModalPanel.tsx @@ -1,4 +1,4 @@ -import { Modal, ModalButton } from "@repo/timo-design-system/ui"; +import { Button, Modal } from "@repo/timo-design-system/ui"; import { cn } from "@repo/timo-design-system/utils"; import { useTranslations } from "next-intl"; @@ -115,27 +115,21 @@ export const TimerExtendModalPanel = ({
{canGoBack ? ( - {t("closeButton")} - + ) : ( - + {t("closeButton")} )} - + {t("submitButton")}
diff --git a/apps/timo-web/components/timer/TimerStopModalPanel.tsx b/apps/timo-web/components/timer/TimerStopModalPanel.tsx index 25f7c584..fd0d247a 100644 --- a/apps/timo-web/components/timer/TimerStopModalPanel.tsx +++ b/apps/timo-web/components/timer/TimerStopModalPanel.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"; @@ -37,12 +37,16 @@ export const TimerStopModalPanel = ({ })} - - {t("continueButton")} - - + {t("continueButton")} + ); From ed75430438b5ba6aa03bf79ae4764ac6f3af90b8 Mon Sep 17 00:00:00 2001 From: hyewon <130418741+ehye1@users.noreply.github.com> Date: Wed, 7 Oct 2026 13:22:45 +0900 Subject: [PATCH 04/11] =?UTF-8?q?refactor(ui):=20=EC=82=AC=EC=9A=A9?= =?UTF-8?q?=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20ModalButton=C2=B7Crea?= =?UTF-8?q?teButton=20=EC=A0=9C=EA=B1=B0=20(#316)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 공용 Button으로 교체되어 사용처가 없어진 ModalButton과 CreateButton 컴포넌트, 스토리, export를 제거했습니다. --- .../create-button/CreateButton.stories.tsx | 39 ---------------- .../button/create-button/CreateButton.tsx | 29 ------------ .../modal-button/ModalButton.stories.tsx | 46 ------------------- .../button/modal-button/ModalButton.tsx | 36 --------------- .../src/components/index.ts | 2 - 5 files changed, 152 deletions(-) delete mode 100644 packages/timo-design-system/src/components/button/create-button/CreateButton.stories.tsx delete mode 100644 packages/timo-design-system/src/components/button/create-button/CreateButton.tsx delete mode 100644 packages/timo-design-system/src/components/button/modal-button/ModalButton.stories.tsx delete mode 100644 packages/timo-design-system/src/components/button/modal-button/ModalButton.tsx diff --git a/packages/timo-design-system/src/components/button/create-button/CreateButton.stories.tsx b/packages/timo-design-system/src/components/button/create-button/CreateButton.stories.tsx deleted file mode 100644 index 36f12114..00000000 --- a/packages/timo-design-system/src/components/button/create-button/CreateButton.stories.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { CreateButton } from "./CreateButton"; - -import type { Meta, StoryObj } from "@storybook/react"; - -const meta = { - title: "Components/CreateButton", - component: CreateButton, - parameters: { - layout: "centered", - }, - argTypes: { - label: { - control: "text", - description: "버튼에 표시될 텍스트", - table: { - type: { summary: "string" }, - }, - }, - disabled: { - control: "boolean", - description: "버튼 비활성화 여부", - table: { - type: { summary: "boolean" }, - defaultValue: { summary: "false" }, - }, - }, - }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - args: { label: "생성하기" }, -}; - -export const Disabled: Story = { - args: { label: "생성하기", disabled: true }, -}; diff --git a/packages/timo-design-system/src/components/button/create-button/CreateButton.tsx b/packages/timo-design-system/src/components/button/create-button/CreateButton.tsx deleted file mode 100644 index 1ae43d93..00000000 --- a/packages/timo-design-system/src/components/button/create-button/CreateButton.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { cn } from "../../../lib"; - -export interface CreateButtonProps { - label: string; - disabled?: boolean; - onClick?: () => void; -} - -export const CreateButton = ({ - label, - disabled = false, - onClick, -}: CreateButtonProps) => { - return ( - - ); -}; diff --git a/packages/timo-design-system/src/components/button/modal-button/ModalButton.stories.tsx b/packages/timo-design-system/src/components/button/modal-button/ModalButton.stories.tsx deleted file mode 100644 index bf575de2..00000000 --- a/packages/timo-design-system/src/components/button/modal-button/ModalButton.stories.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { ModalButton } from "./ModalButton"; - -import type { Meta, StoryObj } from "@storybook/react"; - -const meta = { - title: "Components/Button/ModalButton", - component: ModalButton, - parameters: { - layout: "centered", - }, - argTypes: { - variant: { control: "radio", options: ["fill", "border"] }, - onClick: { action: "clicked" }, - }, - args: { - variant: "fill", - children: "삭제하기", - }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const AllStates: Story = { - parameters: { controls: { disable: true } }, - render: () => ( -
- 돌아가기 - 삭제하기 -
- ), -}; - -export const CustomWidth: Story = { - parameters: { controls: { disable: true } }, - render: () => ( -
- - 돌아가기 - - - 삭제하기 - -
- ), -}; diff --git a/packages/timo-design-system/src/components/button/modal-button/ModalButton.tsx b/packages/timo-design-system/src/components/button/modal-button/ModalButton.tsx deleted file mode 100644 index 22cb7e31..00000000 --- a/packages/timo-design-system/src/components/button/modal-button/ModalButton.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { cn } from "../../../lib"; - -import type { ButtonHTMLAttributes } from "react"; - -export type ModalButtonVariantTypes = "fill" | "border"; - -const MODAL_BUTTON_VARIANT: Record = { - fill: "bg-timo-blue-300 text-white focus-visible:ring-timo-blue-300 focus-visible:ring-2 focus-visible:ring-offset-2", - border: - "border border-timo-gray-500 text-timo-black focus-visible:border-timo-blue-300", -}; - -export interface ModalButtonProps extends ButtonHTMLAttributes { - variant: ModalButtonVariantTypes; -} - -export const ModalButton = ({ - variant, - className, - children, - ...rest -}: ModalButtonProps) => { - return ( - - ); -}; diff --git a/packages/timo-design-system/src/components/index.ts b/packages/timo-design-system/src/components/index.ts index 4e7cd294..b1120afc 100644 --- a/packages/timo-design-system/src/components/index.ts +++ b/packages/timo-design-system/src/components/index.ts @@ -10,7 +10,6 @@ export { PriorityIcon } from "./priority/priority-icon/PriorityIcon"; export { PrioritySelector } from "./priority/priority-selector/PrioritySelector"; export type { PriorityLevel } from "./priority/priority-selector/PrioritySelector"; export { Button } from "./button/button/Button"; -export { CreateButton } from "./button/create-button/CreateButton"; export { DeleteButton } from "./button/delete-button/DeleteButton"; export { AddTaskButton } from "./button/add-task-button/AddTaskButton"; export { TodayBadge } from "./badge/today-badge/TodayBadge"; @@ -19,7 +18,6 @@ export type { TogglePanelOption } from "./toggle-panel/TogglePanel"; export { PlayButton } from "./button/play-button/PlayButton"; export { TabButton } from "./button/tab-button/TabButton"; export { Toast } from "./toast/Toast"; -export { ModalButton } from "./button/modal-button/ModalButton"; export { Modal } from "./layout/modal/Modal"; export { SidebarButton } from "./button/sidebar-button/SidebarButton"; export { TodayButton } from "./button/today-button/TodayButton"; From 0fc3298bc9ee2d50dc7ee97c7f6299ac7089f0c0 Mon Sep 17 00:00:00 2001 From: hyewon <130418741+ehye1@users.noreply.github.com> Date: Wed, 7 Oct 2026 13:43:40 +0900 Subject: [PATCH 05/11] =?UTF-8?q?feat(ui):=20Button=20secondary=20fill?= =?UTF-8?q?=EC=97=90=20=EC=84=A0=ED=83=9D(aria-pressed)=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=B6=94=EA=B0=80=20(#316)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit secondary fill Button에 aria-pressed일 때 흰 배경과 파란 테두리로 바뀌는 선택 스타일과 Pressed 스토리를 추가했습니다. --- .../button/button/Button.stories.tsx | 43 +++++++++++++++++++ .../src/components/button/button/Button.tsx | 2 +- 2 files changed, 44 insertions(+), 1 deletion(-) diff --git a/packages/timo-design-system/src/components/button/button/Button.stories.tsx b/packages/timo-design-system/src/components/button/button/Button.stories.tsx index 240eec39..d542ac72 100644 --- a/packages/timo-design-system/src/components/button/button/Button.stories.tsx +++ b/packages/timo-design-system/src/components/button/button/Button.stories.tsx @@ -144,6 +144,49 @@ export const WithRightIcon: Story = { ), }; +export const Pressed: Story = { + parameters: { controls: { disable: true } }, + render: () => ( +
+ + + + +
+ ), +}; + export const Layout: Story = { parameters: { controls: { disable: true } }, render: () => ( diff --git a/packages/timo-design-system/src/components/button/button/Button.tsx b/packages/timo-design-system/src/components/button/button/Button.tsx index 04c81eb8..581e2d7b 100644 --- a/packages/timo-design-system/src/components/button/button/Button.tsx +++ b/packages/timo-design-system/src/components/button/button/Button.tsx @@ -17,7 +17,7 @@ const BUTTON_VARIANTS: Record< "border-timo-blue-300 text-timo-blue-300 border bg-white disabled:border-timo-gray-500 disabled:text-timo-gray-700", }, secondary: { - fill: "bg-timo-gray-300 text-timo-gray-900 disabled:text-timo-gray-700", + fill: "bg-timo-gray-300 text-timo-gray-900 disabled:text-timo-gray-700 aria-pressed:border aria-pressed:border-timo-blue-300 aria-pressed:bg-white", outline: "border-timo-gray-500 text-timo-gray-900 border bg-white disabled:text-timo-gray-700", }, From bc1471128ba3060b9686243152df3a1742c1ba55 Mon Sep 17 00:00:00 2001 From: hyewon <130418741+ehye1@users.noreply.github.com> Date: Wed, 7 Oct 2026 13:43:41 +0900 Subject: [PATCH 06/11] =?UTF-8?q?refactor(web):=20=EC=8B=9C=EA=B0=84=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=AA=A8=EB=8B=AC=20=ED=94=84=EB=A6=AC?= =?UTF-8?q?=EC=85=8B=20=EC=B9=A9=EC=9D=84=20=EA=B3=B5=EC=9A=A9=20Button?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EA=B5=90=EC=B2=B4=20(#316)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 시간 추가 모달의 프리셋·직접입력 칩을 공용 Button(secondary fill m)으로 교체하고, 직접입력 선택 시 입력창에 바로 포커스되며 선택 상태를 파란 테두리로 유지하도록 했습니다. --- .../timer/TimerExtendModalPanel.tsx | 39 +++++++++---------- 1 file changed, 18 insertions(+), 21 deletions(-) diff --git a/apps/timo-web/components/timer/TimerExtendModalPanel.tsx b/apps/timo-web/components/timer/TimerExtendModalPanel.tsx index 289ececf..76b522d1 100644 --- a/apps/timo-web/components/timer/TimerExtendModalPanel.tsx +++ b/apps/timo-web/components/timer/TimerExtendModalPanel.tsx @@ -1,5 +1,4 @@ import { Button, Modal } from "@repo/timo-design-system/ui"; -import { cn } from "@repo/timo-design-system/utils"; import { useTranslations } from "next-intl"; import { extendTimerBodyExtendMinutesMax } from "@/generated/endpoints/timer/timer.zod"; @@ -20,8 +19,10 @@ const PRESET_OPTIONS: { { preset: 60, labelKey: "presetOneHour" }, ]; -const CHIP_FOCUS_BORDER_CLASS = - "border-2 border-transparent focus-visible:border-timo-blue-300 outline-none"; +// JSX 안에 인라인으로 두면 리렌더마다 다시 포커스되므로 컴포넌트 밖에 둔다 +const focusOnMount = (element: HTMLInputElement | null) => { + element?.focus(); +}; export interface TimerExtendModalPanelProps { selectedPreset: ExtendTimePreset | null; @@ -54,26 +55,23 @@ export const TimerExtendModalPanel = ({
{PRESET_OPTIONS.map(({ preset, labelKey }) => ( - + ))} {isCustomSelected ? ( -
+
) : ( - + )}
From 6c2bfd92fa504e66fbda838875cb031e5bb58566 Mon Sep 17 00:00:00 2001 From: hyewon <130418741+ehye1@users.noreply.github.com> Date: Wed, 7 Oct 2026 13:54:53 +0900 Subject: [PATCH 07/11] =?UTF-8?q?fix(web):=20=EC=A7=81=EC=A0=91=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=20=EB=B0=95=EC=8A=A4=EC=97=90=20=ED=8F=AC=EC=BB=A4?= =?UTF-8?q?=EC=8A=A4=20=EB=A7=81=20=EC=B6=94=EA=B0=80=20(#316)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 테두리가 항상 파란색이 되면서 사라진 포커스 표시를 Button과 같은 포커스 링으로 보완했습니다. --- apps/timo-web/components/timer/TimerExtendModalPanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/timo-web/components/timer/TimerExtendModalPanel.tsx b/apps/timo-web/components/timer/TimerExtendModalPanel.tsx index 76b522d1..bcbce60b 100644 --- a/apps/timo-web/components/timer/TimerExtendModalPanel.tsx +++ b/apps/timo-web/components/timer/TimerExtendModalPanel.tsx @@ -69,7 +69,7 @@ export const TimerExtendModalPanel = ({ ))} {isCustomSelected ? ( -
+
Date: Wed, 7 Oct 2026 17:24:03 +0900 Subject: [PATCH 08/11] =?UTF-8?q?[CHORE]=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .claude/launch.json | 17 +++++++++++++++++ .../components/timer/TimerExtendModalPanel.tsx | 1 - 2 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 .claude/launch.json diff --git a/.claude/launch.json b/.claude/launch.json new file mode 100644 index 00000000..984cfc58 --- /dev/null +++ b/.claude/launch.json @@ -0,0 +1,17 @@ +{ + "version": "0.0.1", + "configurations": [ + { + "name": "storybook", + "runtimeExecutable": "pnpm", + "runtimeArgs": ["storybook"], + "port": 6006 + }, + { + "name": "web", + "runtimeExecutable": "pnpm", + "runtimeArgs": ["dev:web"], + "port": 3000 + } + ] +} diff --git a/apps/timo-web/components/timer/TimerExtendModalPanel.tsx b/apps/timo-web/components/timer/TimerExtendModalPanel.tsx index bcbce60b..ca344fbd 100644 --- a/apps/timo-web/components/timer/TimerExtendModalPanel.tsx +++ b/apps/timo-web/components/timer/TimerExtendModalPanel.tsx @@ -19,7 +19,6 @@ const PRESET_OPTIONS: { { preset: 60, labelKey: "presetOneHour" }, ]; -// JSX 안에 인라인으로 두면 리렌더마다 다시 포커스되므로 컴포넌트 밖에 둔다 const focusOnMount = (element: HTMLInputElement | null) => { element?.focus(); }; From 1613e9f4fe546e1ab63688d52e5c1a99b450a6f1 Mon Sep 17 00:00:00 2001 From: hyewon <130418741+ehye1@users.noreply.github.com> Date: Wed, 7 Oct 2026 18:15:02 +0900 Subject: [PATCH 09/11] =?UTF-8?q?feat(ui):=20=EB=B9=84=ED=99=9C=EC=84=B1?= =?UTF-8?q?=20=EC=9E=91=EC=9D=80=20=EC=98=A4=EB=A5=B8=EC=AA=BD=20=ED=99=94?= =?UTF-8?q?=EC=82=B4=ED=91=9C=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20(#316)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 온보딩 다음 버튼 비활성 상태에 쓸 #9F9F9F 작은 오른쪽 화살표 아이콘을 추가했습니다. --- .../src/icons/source/chevron-small-right-disable.svg | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 packages/timo-design-system/src/icons/source/chevron-small-right-disable.svg diff --git a/packages/timo-design-system/src/icons/source/chevron-small-right-disable.svg b/packages/timo-design-system/src/icons/source/chevron-small-right-disable.svg new file mode 100644 index 00000000..3f724b29 --- /dev/null +++ b/packages/timo-design-system/src/icons/source/chevron-small-right-disable.svg @@ -0,0 +1,3 @@ + + + From 38d26612723a26db3a01114ac04d680593395993 Mon Sep 17 00:00:00 2001 From: hyewon <130418741+ehye1@users.noreply.github.com> Date: Wed, 7 Oct 2026 18:15:03 +0900 Subject: [PATCH 10/11] =?UTF-8?q?refactor(web):=20=EC=98=A8=EB=B3=B4?= =?UTF-8?q?=EB=94=A9=20=EC=9D=B4=EC=A0=84=C2=B7=EB=8B=A4=EC=9D=8C=C2=B7?= =?UTF-8?q?=EC=8B=9C=EC=9E=91=ED=95=98=EA=B8=B0=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=EC=9D=84=20=EA=B3=B5=EC=9A=A9=20Button=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EA=B5=90=EC=B2=B4=20(#316)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 온보딩 이전(secondary 왼쪽 아이콘), 다음(활성 primary·비활성 secondary 오른쪽 아이콘), 시작하기(primary fill) 버튼을 공용 Button(m)으로 교체했습니다. 활성 조건은 기존과 동일하게 유지했습니다. --- .../_components/OnboardingButton.tsx | 91 ++++++++----------- 1 file changed, 37 insertions(+), 54 deletions(-) diff --git a/apps/timo-web/app/[locale]/onboarding/_components/OnboardingButton.tsx b/apps/timo-web/app/[locale]/onboarding/_components/OnboardingButton.tsx index 9c6a6a14..ef4cd131 100644 --- a/apps/timo-web/app/[locale]/onboarding/_components/OnboardingButton.tsx +++ b/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 ( - + {label} + ); } + const isDisabled = disabled || !isActive; + if (variant === "start") { - // TODO: 원래 start 버튼 (항상 활성 스타일) — CalendarConnect 단계 재활성화 시 아래 주석 해제 후 isActive 분기 제거 - // return ( - // - // ); return ( - + {label} + ); } - const isDisabled = disabled || !isActive; - return ( - + {label} + ); }; From 0138cfedbe00457f9a4651571fa61d1da83167c7 Mon Sep 17 00:00:00 2001 From: hyewon <130418741+ehye1@users.noreply.github.com> Date: Wed, 7 Oct 2026 18:17:11 +0900 Subject: [PATCH 11/11] =?UTF-8?q?chore(root):=20=EB=A1=9C=EC=BB=AC=20?= =?UTF-8?q?=EC=8B=A4=ED=96=89=20=EC=84=A4=EC=A0=95=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0=20(#316)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 개인 개발 환경에서만 쓰는 .claude/launch.json이 커밋에 포함되어 제거했습니다. --- .claude/launch.json | 17 ----------------- 1 file changed, 17 deletions(-) delete mode 100644 .claude/launch.json diff --git a/.claude/launch.json b/.claude/launch.json deleted file mode 100644 index 984cfc58..00000000 --- a/.claude/launch.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "version": "0.0.1", - "configurations": [ - { - "name": "storybook", - "runtimeExecutable": "pnpm", - "runtimeArgs": ["storybook"], - "port": 6006 - }, - { - "name": "web", - "runtimeExecutable": "pnpm", - "runtimeArgs": ["dev:web"], - "port": 3000 - } - ] -}