From 14895fbf43e156fd4121415465a07114a954461b Mon Sep 17 00:00:00 2001 From: Lee Hye Won Date: Tue, 7 Jul 2026 02:25:26 +0900 Subject: [PATCH 01/28] =?UTF-8?q?feat(web):=20TodayTodoCard=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20(#101)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - isDone + isDraggable 조합으로 4가지 variant 처리 (Record 패턴) - Checkbox, PlayButton 디자인 시스템 컴포넌트 재사용 - icon/onIconClick prop으로 아이콘 피커 연동 구조 준비 - HamburgerGray 아이콘 추가 (done 상태 핸들) - PriorityIcon Disable 색상 gray-500 -> gray-700 수정 - Calendar SVG 계열 clipPath 오프셋 0.5px 수정 Co-Authored-By: Claude Sonnet 4.6 --- apps/timo-web/app/today/_components/.gitkeep | 0 .../app/today/_components/TodayTodoCard.tsx | 194 ++++++++++++++++++ apps/timo-web/app/today/page.tsx | 72 ++++++- .../priority/priority-icon/PriorityIcon.tsx | 2 +- .../src/icons/source/calendar-blue.svg | 2 +- .../src/icons/source/calendar-disable.svg | 2 +- .../src/icons/source/calendar-on.svg | 2 +- .../src/icons/source/hamburger-gray.svg | 3 + .../src/icons/source/hamburger.svg | 3 + 9 files changed, 275 insertions(+), 5 deletions(-) delete mode 100644 apps/timo-web/app/today/_components/.gitkeep create mode 100644 apps/timo-web/app/today/_components/TodayTodoCard.tsx create mode 100644 packages/timo-design-system/src/icons/source/hamburger-gray.svg create mode 100644 packages/timo-design-system/src/icons/source/hamburger.svg diff --git a/apps/timo-web/app/today/_components/.gitkeep b/apps/timo-web/app/today/_components/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/apps/timo-web/app/today/_components/TodayTodoCard.tsx b/apps/timo-web/app/today/_components/TodayTodoCard.tsx new file mode 100644 index 00000000..2fd09e6d --- /dev/null +++ b/apps/timo-web/app/today/_components/TodayTodoCard.tsx @@ -0,0 +1,194 @@ +"use client"; + +import { + CalendarDisableIcon, + CalendarOnIcon, + ClockDisableIcon, + ClockOnIcon, + HamburgerGrayIcon, + HamburgerIcon, + MemoDisableIcon, + MemoOnIcon, + PlayDisabledIcon, + PlayIcon, + RepeatTodoDisableIcon, + RepeatTodoOnIcon, + TrashDisableIcon, + TrashOnIcon, +} from "@repo/timo-design-system/icons"; +import { + Checkbox, + PlayButton, + PriorityIcon, + TagIcon, +} from "@repo/timo-design-system/ui"; +import { cn } from "@repo/timo-design-system/utils"; + +import type { ComponentProps, ReactNode } from "react"; + +type Priority = ComponentProps["priority"]; + +const CARD_STYLE = { + active: { + card: "bg-white", + title: "text-timo-gray-900", + subText: "text-timo-gray-700", + meta: "text-timo-gray-900", + }, + done: { + card: "bg-timo-gray-200", + title: "text-timo-gray-700", + subText: "text-timo-gray-700", + meta: "text-timo-gray-700", + }, +} as const; + +export interface SubTodo { + id: string; + text: string; + isDone?: boolean; +} + +export interface TodayTodoCardProps { + title: string; + isDone?: boolean; + isDraggable?: boolean; + icon?: ReactNode; + onIconClick?: () => void; + subTodos?: SubTodo[]; + date?: string; + time?: string; + priority?: Priority; + tag?: string; + hasMemo?: boolean; + hasRepeat?: boolean; + onCheck?: () => void; + onPlay?: () => void; + onDelete?: () => void; + onSubTodoCheck?: (id: string) => void; +} + +export const TodayTodoCard = ({ + title, + isDone = false, + isDraggable = false, + icon, + onIconClick, + subTodos, + date, + time, + priority, + tag, + hasMemo, + hasRepeat, + onCheck, + onPlay, + onDelete, + onSubTodoCheck, +}: TodayTodoCardProps) => { + const style = CARD_STYLE[isDone ? "done" : "active"]; + + return ( +
+ {/* Title row */} +
+
+ onCheck?.()} + disabled={isDone} + /> + {isDraggable && + (isDone ? ( + + ) : ( + + ))} + {(icon || onIconClick) && ( + + )} + + {title} + +
+ + {isDone ? ( + + ) : ( + + )} + +
+ + {/* Sub-todos */} + {subTodos && subTodos.length > 0 && ( +
+ {subTodos.map((sub) => ( +
+ onSubTodoCheck?.(sub.id)} + disabled={isDone} + /> + + {sub.text} + +
+ ))} +
+ )} + + {/* Toolbar */} +
+ {date && ( + + )} + {time && ( + + )} + {priority && } + {tag && } + {hasMemo && (isDone ? : )} + {hasRepeat && + (isDone ? : )} + +
+
+ ); +}; diff --git a/apps/timo-web/app/today/page.tsx b/apps/timo-web/app/today/page.tsx index 38a6b1d1..46b4bde2 100644 --- a/apps/timo-web/app/today/page.tsx +++ b/apps/timo-web/app/today/page.tsx @@ -1,3 +1,73 @@ +import { TodayTodoCard } from "./_components/TodayTodoCard"; + export default function TodayPage() { - return <>; + return ( +
+ {/* 1. 기본 (핸들 O, 미완료) */} + + + {/* 2. 핸들 없는 버전 (미완료) */} + + + {/* 3. 완료 + 핸들 O */} + + + {/* 4. 완료 + 핸들 없는 버전 */} + +
+ ); } diff --git a/packages/timo-design-system/src/components/priority/priority-icon/PriorityIcon.tsx b/packages/timo-design-system/src/components/priority/priority-icon/PriorityIcon.tsx index 369da149..ce4f7a41 100644 --- a/packages/timo-design-system/src/components/priority/priority-icon/PriorityIcon.tsx +++ b/packages/timo-design-system/src/components/priority/priority-icon/PriorityIcon.tsx @@ -14,7 +14,7 @@ const PRIORITY_COLOR: Record = { high: "bg-timo-orange", medium: "bg-timo-gray-600", low: "bg-timo-black", - Disable: "bg-timo-gray-500", + Disable: "bg-timo-gray-700", white: "bg-white", blue: "bg-timo-blue-300", }; diff --git a/packages/timo-design-system/src/icons/source/calendar-blue.svg b/packages/timo-design-system/src/icons/source/calendar-blue.svg index dfa750e2..71aca311 100644 --- a/packages/timo-design-system/src/icons/source/calendar-blue.svg +++ b/packages/timo-design-system/src/icons/source/calendar-blue.svg @@ -12,7 +12,7 @@ - + diff --git a/packages/timo-design-system/src/icons/source/calendar-disable.svg b/packages/timo-design-system/src/icons/source/calendar-disable.svg index aa9aa1d0..93a3afed 100644 --- a/packages/timo-design-system/src/icons/source/calendar-disable.svg +++ b/packages/timo-design-system/src/icons/source/calendar-disable.svg @@ -12,7 +12,7 @@ - + diff --git a/packages/timo-design-system/src/icons/source/calendar-on.svg b/packages/timo-design-system/src/icons/source/calendar-on.svg index ec57b8d5..55c9c0e6 100644 --- a/packages/timo-design-system/src/icons/source/calendar-on.svg +++ b/packages/timo-design-system/src/icons/source/calendar-on.svg @@ -12,7 +12,7 @@ - + diff --git a/packages/timo-design-system/src/icons/source/hamburger-gray.svg b/packages/timo-design-system/src/icons/source/hamburger-gray.svg new file mode 100644 index 00000000..d77b9e97 --- /dev/null +++ b/packages/timo-design-system/src/icons/source/hamburger-gray.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/timo-design-system/src/icons/source/hamburger.svg b/packages/timo-design-system/src/icons/source/hamburger.svg new file mode 100644 index 00000000..21474438 --- /dev/null +++ b/packages/timo-design-system/src/icons/source/hamburger.svg @@ -0,0 +1,3 @@ + + + From f270c93a0132a86d5a03102d1a62ed6a42fe8482 Mon Sep 17 00:00:00 2001 From: Lee Hye Won Date: Tue, 7 Jul 2026 03:10:51 +0900 Subject: [PATCH 02/28] =?UTF-8?q?refactor(web):=20TodayTodoCard=20toolbar?= =?UTF-8?q?=20props=20=EA=B5=AC=EC=A1=B0=ED=99=94=20=EB=B0=8F=20hover=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=A0=81=EC=9A=A9=20(#101)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - toolbar 관련 props를 TodayTodoCardToolbar 객체로 묶음 - isDimmed = isDone && !isHovered 로 hover시 흐려짐 해제 구현 - 체크박스 disabled 제거 (항상 클릭 가능) - icon 조건 수정: icon && (onIconClick만 있을 때 빈 버튼 렌더 방지) - page.tsx 테스트 코드 제거 Co-Authored-By: Claude Sonnet 4.6 --- .../app/today/_components/TodayTodoCard.tsx | 84 +++++++++++-------- apps/timo-web/app/today/page.tsx | 72 +--------------- 2 files changed, 48 insertions(+), 108 deletions(-) diff --git a/apps/timo-web/app/today/_components/TodayTodoCard.tsx b/apps/timo-web/app/today/_components/TodayTodoCard.tsx index 2fd09e6d..74ca0288 100644 --- a/apps/timo-web/app/today/_components/TodayTodoCard.tsx +++ b/apps/timo-web/app/today/_components/TodayTodoCard.tsx @@ -23,6 +23,7 @@ import { TagIcon, } from "@repo/timo-design-system/ui"; import { cn } from "@repo/timo-design-system/utils"; +import { useState } from "react"; import type { ComponentProps, ReactNode } from "react"; @@ -49,6 +50,15 @@ export interface SubTodo { isDone?: boolean; } +export interface TodayTodoCardToolbar { + date?: string; + time?: string; + priority?: Priority; + tag?: string; + memo?: boolean; + repeat?: boolean; +} + export interface TodayTodoCardProps { title: string; isDone?: boolean; @@ -56,12 +66,7 @@ export interface TodayTodoCardProps { icon?: ReactNode; onIconClick?: () => void; subTodos?: SubTodo[]; - date?: string; - time?: string; - priority?: Priority; - tag?: string; - hasMemo?: boolean; - hasRepeat?: boolean; + toolbar?: TodayTodoCardToolbar; onCheck?: () => void; onPlay?: () => void; onDelete?: () => void; @@ -75,21 +80,20 @@ export const TodayTodoCard = ({ icon, onIconClick, subTodos, - date, - time, - priority, - tag, - hasMemo, - hasRepeat, + toolbar, onCheck, onPlay, onDelete, onSubTodoCheck, }: TodayTodoCardProps) => { - const style = CARD_STYLE[isDone ? "done" : "active"]; + const [isHovered, setIsHovered] = useState(false); + const isDimmed = isDone && !isHovered; + const style = CARD_STYLE[isDimmed ? "done" : "active"]; return (
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} className={cn( "border-timo-gray-500 flex w-full flex-col gap-1 rounded-[4px] border px-5 py-4", style.card, @@ -98,18 +102,14 @@ export const TodayTodoCard = ({ {/* Title row */}
- onCheck?.()} - disabled={isDone} - /> + onCheck?.()} /> {isDraggable && - (isDone ? ( + (isDimmed ? ( ) : ( ))} - {(icon || onIconClick) && ( + {icon && (
- - {isDone ? ( + + {isDimmed ? ( ) : ( @@ -142,7 +147,6 @@ export const TodayTodoCard = ({ onSubTodoCheck?.(sub.id)} - disabled={isDone} /> {sub.text} @@ -154,39 +158,45 @@ export const TodayTodoCard = ({ {/* Toolbar */}
- {date && ( + {toolbar?.date && ( )} - {time && ( + {toolbar?.time && ( )} - {priority && } - {tag && } - {hasMemo && (isDone ? : )} - {hasRepeat && - (isDone ? : )} + {toolbar?.priority && ( + + )} + {toolbar?.tag && } + {toolbar?.memo && (isDimmed ? : )} + {toolbar?.repeat && + (isDimmed ? : )}
diff --git a/apps/timo-web/app/today/page.tsx b/apps/timo-web/app/today/page.tsx index 46b4bde2..38a6b1d1 100644 --- a/apps/timo-web/app/today/page.tsx +++ b/apps/timo-web/app/today/page.tsx @@ -1,73 +1,3 @@ -import { TodayTodoCard } from "./_components/TodayTodoCard"; - export default function TodayPage() { - return ( -
- {/* 1. 기본 (핸들 O, 미완료) */} - - - {/* 2. 핸들 없는 버전 (미완료) */} - - - {/* 3. 완료 + 핸들 O */} - - - {/* 4. 완료 + 핸들 없는 버전 */} - -
- ); + return <>; } From ac806e3f2ec7373937effd6ad2d0ad221b8d5ed6 Mon Sep 17 00:00:00 2001 From: Lee Hye Won Date: Tue, 7 Jul 2026 21:22:46 +0900 Subject: [PATCH 03/28] =?UTF-8?q?feat(web):=20CreateTodoToolbar=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20?= =?UTF-8?q?=EB=B0=8F=20TodayTodoCard=EC=97=90=20=ED=86=B5=ED=95=A9=20(#101?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - CreateTodoToolbar 컴포넌트를 구현했습니다 - TodayTodoCard 인라인 toolbar를 CreateTodoToolbar로 교체했습니다 - isDimmed 상태에서 모든 toolbar 아이템을 disable 처리했습니다 - 한글 20자·영어 30자 기준 truncateTitle 함수를 적용했습니다 - 미사용 CARD_STYLE meta 필드를 제거했습니다 - TodayPage에 테스트 데이터를 추가했습니다 --- .../app/today/_components/TodayTodoCard.tsx | 111 +++++------ apps/timo-web/app/today/page.tsx | 43 ++++- apps/timo-web/components/.gitkeep | 0 .../timo-web/components/CreateTodoToolbar.tsx | 178 ++++++++++++++++++ 4 files changed, 268 insertions(+), 64 deletions(-) delete mode 100644 apps/timo-web/components/.gitkeep create mode 100644 apps/timo-web/components/CreateTodoToolbar.tsx diff --git a/apps/timo-web/app/today/_components/TodayTodoCard.tsx b/apps/timo-web/app/today/_components/TodayTodoCard.tsx index 74ca0288..b855da42 100644 --- a/apps/timo-web/app/today/_components/TodayTodoCard.tsx +++ b/apps/timo-web/app/today/_components/TodayTodoCard.tsx @@ -1,46 +1,53 @@ "use client"; import { - CalendarDisableIcon, - CalendarOnIcon, - ClockDisableIcon, - ClockOnIcon, HamburgerGrayIcon, HamburgerIcon, - MemoDisableIcon, - MemoOnIcon, PlayDisabledIcon, PlayIcon, - RepeatTodoDisableIcon, - RepeatTodoOnIcon, - TrashDisableIcon, - TrashOnIcon, + StopIcon, } from "@repo/timo-design-system/icons"; import { Checkbox, PlayButton, PriorityIcon, - TagIcon, } from "@repo/timo-design-system/ui"; import { cn } from "@repo/timo-design-system/utils"; -import { useState } from "react"; +import { useEffect, useState } from "react"; + +import { CreateTodoToolbar } from "../../../components/CreateTodoToolbar"; import type { ComponentProps, ReactNode } from "react"; type Priority = ComponentProps["priority"]; +function truncateTitle(text: string): string { + let korean = 0; + let other = 0; + + for (let i = 0; i < text.length; i++) { + if (/[가-힣]/.test(text.charAt(i))) { + korean++; + } else { + other++; + } + if (korean / 20 + other / 30 >= 1) { + return text.slice(0, i) + "…"; + } + } + return text; +} + const CARD_STYLE = { active: { card: "bg-white", title: "text-timo-gray-900", subText: "text-timo-gray-700", - meta: "text-timo-gray-900", }, done: { card: "bg-timo-gray-200", title: "text-timo-gray-700", subText: "text-timo-gray-700", - meta: "text-timo-gray-700", }, } as const; @@ -87,7 +94,12 @@ export const TodayTodoCard = ({ onSubTodoCheck, }: TodayTodoCardProps) => { const [isHovered, setIsHovered] = useState(false); + const [isPlaying, setIsPlaying] = useState(false); const isDimmed = isDone && !isHovered; + + useEffect(() => { + if (isDone) setIsPlaying(false); + }, [isDone]); const style = CARD_STYLE[isDimmed ? "done" : "active"]; return ( @@ -119,20 +131,23 @@ export const TodayTodoCard = ({ {icon} )} - - {title} + + {truncateTitle(title)}
{ + setIsPlaying((prev) => !prev); + onPlay?.(); + }} > - {isDimmed ? ( + {isDone ? ( + ) : isPlaying ? ( + ) : ( )} @@ -157,47 +172,17 @@ export const TodayTodoCard = ({ )} {/* Toolbar */} -
- {toolbar?.date && ( - - )} - {toolbar?.time && ( - - )} - {toolbar?.priority && ( - - )} - {toolbar?.tag && } - {toolbar?.memo && (isDimmed ? : )} - {toolbar?.repeat && - (isDimmed ? : )} - +
+
); diff --git a/apps/timo-web/app/today/page.tsx b/apps/timo-web/app/today/page.tsx index 38a6b1d1..86d42619 100644 --- a/apps/timo-web/app/today/page.tsx +++ b/apps/timo-web/app/today/page.tsx @@ -1,3 +1,44 @@ +"use client"; + +import { useState } from "react"; + +import { TodayTodoCard } from "./_components/TodayTodoCard"; + +const INITIAL_SUB_TODOS = [ + { id: "1", text: "PlayButton 토글 구현", isDone: false }, + { id: "2", text: "CreateTodoToolbar 작업", isDone: true }, +]; + export default function TodayPage() { - return <>; + const [isDone, setIsDone] = useState(false); + const [subTodos, setSubTodos] = useState(INITIAL_SUB_TODOS); + + const handleSubTodoCheck = (id: string) => { + setSubTodos((prev) => + prev.map((sub) => + sub.id === id ? { ...sub, isDone: !sub.isDone } : sub, + ), + ); + }; + + return ( +
+ setIsDone((prev) => !prev)} + onSubTodoCheck={handleSubTodoCheck} + /> +
+ ); } diff --git a/apps/timo-web/components/.gitkeep b/apps/timo-web/components/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/apps/timo-web/components/CreateTodoToolbar.tsx b/apps/timo-web/components/CreateTodoToolbar.tsx new file mode 100644 index 00000000..47b76517 --- /dev/null +++ b/apps/timo-web/components/CreateTodoToolbar.tsx @@ -0,0 +1,178 @@ +"use client"; + +import { + CalendarBlueIcon, + CalendarDisableIcon, + CalendarOnIcon, + ClockBlueIcon, + ClockDisableIcon, + ClockOnIcon, + MemoBlueIcon, + MemoDisableIcon, + MemoOnIcon, + RepeatBlueIcon, + RepeatTodoDisableIcon, + RepeatTodoOnIcon, + TrashBlueIcon, + TrashDisableIcon, + TrashOnIcon, +} from "@repo/timo-design-system/icons"; +import { PriorityIcon, TagIcon } from "@repo/timo-design-system/ui"; +import { cn } from "@repo/timo-design-system/utils"; + +import type { ComponentProps } from "react"; + +type Priority = ComponentProps["priority"]; + +type ActiveItem = + | "date" + | "time" + | "priority" + | "tag" + | "memo" + | "repeat" + | "delete"; + +export interface CreateTodoToolbarProps { + date?: string; + time?: string; + priority?: Priority; + tag?: string; + memo?: boolean; + repeat?: boolean; + delete?: boolean; + activeItem?: ActiveItem; + onDateClick?: () => void; + onTimeClick?: () => void; + onPriorityClick?: () => void; + onTagClick?: () => void; + onMemoClick?: () => void; + onRepeatClick?: () => void; + onDeleteClick?: () => void; +} + +export const CreateTodoToolbar = ({ + date, + time, + priority, + tag, + memo, + repeat, + delete: isDeleteSet, + activeItem, + onDateClick, + onTimeClick, + onPriorityClick, + onTagClick, + onMemoClick, + onRepeatClick, + onDeleteClick, +}: CreateTodoToolbarProps) => { + return ( +
+ + + + + + + + + + + + + +
+ ); +}; From 9e431b93e1f63a6d25364abbc2793a640fd45c11 Mon Sep 17 00:00:00 2001 From: Lee Hye Won Date: Tue, 7 Jul 2026 21:24:01 +0900 Subject: [PATCH 04/28] =?UTF-8?q?fix(ui):=20TagIcon=20=EC=A2=8C=EC=9A=B0?= =?UTF-8?q?=20padding=20=ED=94=BC=EA=B7=B8=EB=A7=88=20=EC=8A=A4=ED=8E=99?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=88=98=EC=A0=95=20(#101)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 좌우 padding을 6.5px에서 10px로 수정했습니다 --- .../timo-design-system/src/components/tag/tag-icon/TagIcon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/timo-design-system/src/components/tag/tag-icon/TagIcon.tsx b/packages/timo-design-system/src/components/tag/tag-icon/TagIcon.tsx index 53902191..717c8864 100644 --- a/packages/timo-design-system/src/components/tag/tag-icon/TagIcon.tsx +++ b/packages/timo-design-system/src/components/tag/tag-icon/TagIcon.tsx @@ -10,7 +10,7 @@ export const TagIcon = ({ text, variant = "default" }: TagIconProps) => { return (
From 6c5811d0425b94acd57fc7e9a44f6488867c6b75 Mon Sep 17 00:00:00 2001 From: Lee Hye Won Date: Tue, 7 Jul 2026 21:24:42 +0900 Subject: [PATCH 05/28] =?UTF-8?q?chore(ui):=20memo-blue=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EC=86=8C=EC=8A=A4=20SVG=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/timo-design-system/src/icons/source/memo-blue.svg | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 packages/timo-design-system/src/icons/source/memo-blue.svg diff --git a/packages/timo-design-system/src/icons/source/memo-blue.svg b/packages/timo-design-system/src/icons/source/memo-blue.svg new file mode 100644 index 00000000..068dcffb --- /dev/null +++ b/packages/timo-design-system/src/icons/source/memo-blue.svg @@ -0,0 +1,3 @@ + + + From 53cecbc88448602b684ee5cf4dfda8db5a6b20b1 Mon Sep 17 00:00:00 2001 From: Lee Hye Won Date: Tue, 7 Jul 2026 21:26:43 +0900 Subject: [PATCH 06/28] =?UTF-8?q?refactor(web):=20CreateTodoToolbar=20time?= =?UTF-8?q?=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20width=20=ED=81=B4=EB=9E=98?= =?UTF-8?q?=EC=8A=A4=20=EB=8B=A8=EC=88=9C=ED=99=94=20(#101)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - w-[36px]을 Tailwind 표준 클래스 w-9으로 변경했습니다 --- apps/timo-web/components/CreateTodoToolbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/timo-web/components/CreateTodoToolbar.tsx b/apps/timo-web/components/CreateTodoToolbar.tsx index 47b76517..06e097a7 100644 --- a/apps/timo-web/components/CreateTodoToolbar.tsx +++ b/apps/timo-web/components/CreateTodoToolbar.tsx @@ -113,7 +113,7 @@ export const CreateTodoToolbar = ({ {time && ( Date: Tue, 7 Jul 2026 21:44:18 +0900 Subject: [PATCH 07/28] =?UTF-8?q?fix(web):=20TodayTodoCard=20=EA=B2=BD?= =?UTF-8?q?=EB=A1=9C=EB=A5=BC=20locale=20=EB=9D=BC=EC=9A=B0=ED=8A=B8=20?= =?UTF-8?q?=EA=B5=AC=EC=A1=B0=EC=97=90=20=EB=A7=9E=EA=B2=8C=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99=20(#101)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - app/today/_components에서 app/[locale]/(main)/today/_components로 이동했습니다 - CreateTodoToolbar import 경로를 새 위치에 맞게 수정했습니다 --- .../{ => [locale]/(main)}/today/_components/TodayTodoCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename apps/timo-web/app/{ => [locale]/(main)}/today/_components/TodayTodoCard.tsx (98%) diff --git a/apps/timo-web/app/today/_components/TodayTodoCard.tsx b/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx similarity index 98% rename from apps/timo-web/app/today/_components/TodayTodoCard.tsx rename to apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx index b855da42..9a91a0e6 100644 --- a/apps/timo-web/app/today/_components/TodayTodoCard.tsx +++ b/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx @@ -15,7 +15,7 @@ import { import { cn } from "@repo/timo-design-system/utils"; import { useEffect, useState } from "react"; -import { CreateTodoToolbar } from "../../../components/CreateTodoToolbar"; +import { CreateTodoToolbar } from "../../../../../components/CreateTodoToolbar"; import type { ComponentProps, ReactNode } from "react"; From d9678f80564bf2e163c5e137cae1675a23500634 Mon Sep 17 00:00:00 2001 From: Lee Hye Won Date: Tue, 7 Jul 2026 21:55:44 +0900 Subject: [PATCH 08/28] =?UTF-8?q?fix(web):=20=EC=BD=94=EB=93=9C=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81=20=E2=80=94=20truncate=20?= =?UTF-8?q?=EA=B2=BD=EA=B3=84=EA=B0=92=C2=B7=EC=9E=90=EB=8F=99=EC=A0=95?= =?UTF-8?q?=EC=A7=80=20=EC=95=8C=EB=A6=BC=C2=B7import=20alias=C2=B7?= =?UTF-8?q?=EB=B9=88=20=ED=83=9C=EA=B7=B8=EC=B9=A9=20(#101)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - truncateTitle 비교 연산자를 >= 에서 > 로 수정해 정확히 한국어 20자/영어 30자를 표시했습니다 - isDone 자동 정지 시 onPlay?.()를 호출해 부모 컴포넌트에 상태 변화를 알렸습니다 - CreateTodoToolbar 상대 경로 import를 @/components alias로 교체했습니다 - tag 값이 없을 때 빈 TagIcon 칩이 렌더링되던 버그를 수정했습니다 Co-Authored-By: Claude Sonnet 4.6 --- .../(main)/today/_components/TodayTodoCard.tsx | 14 ++++++++++---- apps/timo-web/components/CreateTodoToolbar.tsx | 16 +++++++++------- 2 files changed, 19 insertions(+), 11 deletions(-) diff --git a/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx b/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx index 9a91a0e6..8ac0a8e3 100644 --- a/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx +++ b/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx @@ -15,10 +15,11 @@ import { import { cn } from "@repo/timo-design-system/utils"; import { useEffect, useState } from "react"; -import { CreateTodoToolbar } from "../../../../../components/CreateTodoToolbar"; - import type { ComponentProps, ReactNode } from "react"; +import { CreateTodoToolbar } from "@/components/CreateTodoToolbar"; + + type Priority = ComponentProps["priority"]; function truncateTitle(text: string): string { @@ -31,7 +32,7 @@ function truncateTitle(text: string): string { } else { other++; } - if (korean / 20 + other / 30 >= 1) { + if (korean / 20 + other / 30 > 1) { return text.slice(0, i) + "…"; } } @@ -98,7 +99,12 @@ export const TodayTodoCard = ({ const isDimmed = isDone && !isHovered; useEffect(() => { - if (isDone) setIsPlaying(false); + if (isDone && isPlaying) { + setIsPlaying(false); + onPlay?.(); + } + // isDone 변경 시점의 isPlaying/onPlay를 참조하는 것이 의도된 동작 + // eslint-disable-next-line react-hooks/exhaustive-deps }, [isDone]); const style = CARD_STYLE[isDimmed ? "done" : "active"]; diff --git a/apps/timo-web/components/CreateTodoToolbar.tsx b/apps/timo-web/components/CreateTodoToolbar.tsx index 06e097a7..b2c60a96 100644 --- a/apps/timo-web/components/CreateTodoToolbar.tsx +++ b/apps/timo-web/components/CreateTodoToolbar.tsx @@ -128,7 +128,7 @@ export const CreateTodoToolbar = ({ type="button" onClick={onPriorityClick} aria-label="우선순위" - className="flex size-[22px] items-center justify-center" + className="flex size-5.5 items-center justify-center" > - + {(tag ?? activeItem === "tag") && ( + + )} )} - {truncateTitle(title)} + {title}
{ - setIsPlaying((prev) => !prev); - onPlay?.(); - }} + disabled={isDone} + onClick={onPlay} > - {internalIsDone ? ( + {isDone ? ( ) : isPlaying ? ( @@ -166,39 +133,30 @@ export const TodayTodoCard = ({ - {/* Sub-todos */} - {internalSubTodos.length > 0 && ( -
- {internalSubTodos.map((sub) => ( -
+ {subTodos.length > 0 && ( +
    + {subTodos.map((sub) => ( +
  • { - setInternalSubTodos((prev) => - prev.map((s) => - s.id === sub.id ? { ...s, isDone: !s.isDone } : s, - ), - ); - onSubTodoCheck?.(sub.id); - }} + onChange={() => onSubTodoCheck(sub.id)} /> {sub.text} -
+ ))} -
+ )} - {/* Toolbar */}
From 0080c32db01203cd2aba6a87604737b7f4250e92 Mon Sep 17 00:00:00 2001 From: Lee Hye Won Date: Wed, 8 Jul 2026 21:32:08 +0900 Subject: [PATCH 14/28] =?UTF-8?q?feat(ui):=20TagIcon=20disable=20variant?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20tag=20=ED=95=AD=EC=83=81=20?= =?UTF-8?q?=ED=91=9C=EC=8B=9C=20(#101)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - TagIcon에 disable variant를 추가했습니다 - CreateTodoToolbar에서 tag를 항상 표시하고 값이 없을 때 disable 상태로 렌더링했습니다 - TagIcon.stories에 Disable 스토리를 추가했습니다 --- apps/timo-web/components/CreateTodoToolbar.tsx | 14 ++++++-------- .../components/tag/tag-icon/TagIcon.stories.tsx | 6 +++++- .../src/components/tag/tag-icon/TagIcon.tsx | 10 ++++++++-- 3 files changed, 19 insertions(+), 11 deletions(-) diff --git a/apps/timo-web/components/CreateTodoToolbar.tsx b/apps/timo-web/components/CreateTodoToolbar.tsx index b2c60a96..617c18e3 100644 --- a/apps/timo-web/components/CreateTodoToolbar.tsx +++ b/apps/timo-web/components/CreateTodoToolbar.tsx @@ -137,14 +137,12 @@ export const CreateTodoToolbar = ({ /> - {(tag ?? activeItem === "tag") && ( - - )} + )} - + {title}
From 7ed3d4169c926c3739582d747d591d303136a9c2 Mon Sep 17 00:00:00 2001 From: Lee Hye Won Date: Thu, 9 Jul 2026 01:34:03 +0900 Subject: [PATCH 17/28] =?UTF-8?q?feat(web):=20TodayTodo=20=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=BB=A8=ED=85=8C=EC=9D=B4=EB=84=88=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EB=8B=A8=EC=9D=BC=20=ED=83=80?= =?UTF-8?q?=EC=9D=B4=EB=A8=B8=20=EC=A0=9C=EC=95=BD=20=EA=B5=AC=ED=98=84=20?= =?UTF-8?q?(#101)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - TodayTodoListContainer를 신규 생성하여 todo 목록 상태를 관리했습니다 - runningTodoId로 동시에 하나의 타이머만 실행되도록 제약을 구현했습니다 - page.tsx를 TodayTodoListContainer 단일 렌더링으로 단순화했습니다 - mock 데이터를 API 응답 형태(TodoMock)로 재구성했습니다 --- .../_containers/TodayTodoListContainer.tsx | 102 ++++++++++++ .../today/_mocks/today-todo-mock.ts | 146 +++++++++--------- .../(main)/(with-time-sidebar)/today/page.tsx | 6 +- 3 files changed, 179 insertions(+), 75 deletions(-) create mode 100644 apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer.tsx diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer.tsx new file mode 100644 index 00000000..71604dc3 --- /dev/null +++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer.tsx @@ -0,0 +1,102 @@ +"use client"; + +import { useState } from "react"; + +import type { TodoMock } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_mocks/today-todo-mock"; + +import { TodayTodoCardContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoCardContainer"; +import { todayTodoMocks } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_mocks/today-todo-mock"; + +const PRIORITY_MAP = { + URGENT: "urgent", + HIGH: "high", + MEDIUM: "medium", + LOW: "low", +} as const; + +const formatDuration = (seconds: number): string => { + const h = Math.floor(seconds / 3600); + const m = Math.floor((seconds % 3600) / 60); + return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`; +}; + +const formatDate = (isoDate: string): string => { + const date = new Date(isoDate); + return `${date.getMonth() + 1}/${date.getDate()}`; +}; + +export const TodayTodoListContainer = () => { + const [todos, setTodos] = useState(todayTodoMocks); + const [runningTodoId, setRunningTodoId] = useState( + todayTodoMocks.find((t) => t.timerStatus === "RUNNING")?.todoId ?? null, + ); + + const handlePlay = (todoId: number) => { + // TODO: API + setRunningTodoId((prev) => (prev === todoId ? null : todoId)); + }; + + const handleCheck = (todoId: number) => { + // TODO: API + setTodos((prev) => + prev.map((t) => + t.todoId === todoId ? { ...t, completed: !t.completed } : t, + ), + ); + if (runningTodoId === todoId) setRunningTodoId(null); + }; + + const handleDelete = (todoId: number) => { + // TODO: API + setTodos((prev) => prev.filter((t) => t.todoId !== todoId)); + if (runningTodoId === todoId) setRunningTodoId(null); + }; + + const handleSubTodoCheck = (todoId: number, subtaskId: string) => { + // TODO: API + setTodos((prev) => + prev.map((t) => + t.todoId === todoId + ? { + ...t, + subtasks: t.subtasks.map((s) => + s.subtaskId === Number(subtaskId) + ? { ...s, completed: !s.completed } + : s, + ), + } + : t, + ), + ); + }; + + return ( +
+ {todos.map((todo) => ( + ({ + id: String(s.subtaskId), + text: s.content, + isDone: s.completed, + }))} + onPlay={() => handlePlay(todo.todoId)} + onCheck={() => handleCheck(todo.todoId)} + onDelete={() => handleDelete(todo.todoId)} + onSubTodoCheck={(id) => handleSubTodoCheck(todo.todoId, id)} + /> + ))} +
+ ); +}; diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_mocks/today-todo-mock.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_mocks/today-todo-mock.ts index 3b1d2fc3..2b96261b 100644 --- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_mocks/today-todo-mock.ts +++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_mocks/today-todo-mock.ts @@ -1,73 +1,77 @@ -import type { TodayTodoCardContainerProps } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoCardContainer"; +interface TodoTag { + tagId: number; + name: string; +} -export const todayTodoMock: TodayTodoCardContainerProps = { - title: "티모 하이와프 작업하기", - isDone: false, - isDraggable: true, - timerStatus: "RUNNING", - toolbar: { - date: "7/22", - time: "2:00:00", - priority: "urgent", - tag: "업무", - memo: false, - repeat: true, - }, - subTodos: [ - { id: "1", text: "티모 타이머 명시 제작하기", isDone: true }, - { id: "2", text: "티모 타이머 명시 제작하기", isDone: false }, - ], -}; +interface TodoSubtask { + subtaskId: number; + content: string; + completed: boolean; +} + +export interface TodoMock { + todoId: number; + icon: string; + title: string; + completed: boolean; + date: string; + durationSeconds: number; + priority: "URGENT" | "HIGH" | "MEDIUM" | "LOW"; + tag: TodoTag | null; + hasMemo: boolean; + isRepeated: boolean; + timerStatus: "RUNNING" | "PAUSED" | "STOPPED"; + sortOrder: number; + subtasks: TodoSubtask[]; +} -export const todayTodoMocks: (TodayTodoCardContainerProps & { id: string })[] = - [ - { - id: "1", - title: "디자인 시스템 컴포넌트 정리하기", - isDone: false, - isDraggable: true, - timerStatus: "STOPPED", - toolbar: { - date: "7/8", - time: "10:00", - priority: "urgent", - tag: "작업", - memo: true, - repeat: false, - }, - subTodos: [ - { id: "1-1", text: "색상 토큰 정리", isDone: true }, - { id: "1-2", text: "타이포그래피 스펙 문서화", isDone: false }, - ], - }, - { - id: "2", - title: "완료된 할 일 예시", - isDone: true, - isDraggable: true, - timerStatus: "STOPPED", - toolbar: { - date: "7/8", - time: "1:00:00", - priority: "medium", - tag: "완료", - memo: false, - repeat: false, - }, - subTodos: [], - }, - { - id: "3", - title: "서브투두 없는 단순 카드", - isDone: false, - timerStatus: "STOPPED", - toolbar: { - date: "7/8", - time: "0:30:00", - priority: "high", - memo: true, - repeat: false, - }, - subTodos: [], - }, - ]; +export const todayTodoMocks: TodoMock[] = [ + { + todoId: 1, + icon: "ICON_1", + title: "디자인 시스템 컴포넌트 정리하기", + completed: false, + date: "2026-07-09", + durationSeconds: 36000, + priority: "URGENT", + tag: { tagId: 1, name: "작업" }, + hasMemo: true, + isRepeated: false, + timerStatus: "STOPPED", + sortOrder: 0, + subtasks: [ + { subtaskId: 1, content: "색상 토큰 정리", completed: true }, + { subtaskId: 2, content: "타이포그래피 스펙 문서화", completed: false }, + ], + }, + { + todoId: 2, + icon: "ICON_2", + title: "완료된 할 일 예시", + completed: true, + date: "2026-07-09", + durationSeconds: 3600, + priority: "MEDIUM", + tag: { tagId: 2, name: "완료" }, + hasMemo: false, + isRepeated: false, + timerStatus: "STOPPED", + sortOrder: 1, + subtasks: [], + }, + { + todoId: 3, + icon: "ICON_3", + title: "서브투두 없는 단순 카드", + completed: false, + date: "2026-07-09", + durationSeconds: 1800, + priority: "HIGH", + tag: null, + hasMemo: true, + isRepeated: true, + timerStatus: "STOPPED", + sortOrder: 2, + subtasks: [], + }, +]; diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/page.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/page.tsx index 51dec9f9..6e632bd5 100644 --- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/page.tsx +++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/page.tsx @@ -1,14 +1,12 @@ import { TodayHeaderContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayHeaderContainer"; -import { TodayTodoCardContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoCardContainer"; -// TODO: API 연결 후 mock 데이터 제거 -import { todayTodoMock } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_mocks/today-todo-mock"; +import { TodayTodoListContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer"; export default function TodayPage() { return (
- +
); From e0b80cbe9eca0ef2f268f1cb76900aa04f39d615 Mon Sep 17 00:00:00 2001 From: Lee Hye Won Date: Thu, 9 Jul 2026 01:34:57 +0900 Subject: [PATCH 18/28] =?UTF-8?q?feat(web):=20TodayTodoCard=20dimmed=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B2=98?= =?UTF-8?q?=EB=A6=AC=20=EB=B0=8F=20isDraggable=20=EC=A0=9C=EA=B1=B0=20(#10?= =?UTF-8?q?1)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - CreateTodoToolbar에 isDimmed prop을 추가하여 dimmed 상태 아이콘을 Disable 변형으로 전환했습니다 - dimmed 상태에서 날짜·시간 텍스트 색상을 gray-700으로 변경했습니다 - toolbar 항목을 dimmed 상태에서 항상 표시하도록 변경했습니다 - isDraggable prop을 TodayTodoCard 및 TodayTodoCardContainer에서 제거했습니다 - handleCheck 시 서브투두를 일괄 완료 처리하도록 수정했습니다 --- .../_containers/TodayTodoCardContainer.tsx | 12 +++---- .../today/_components/TodayTodoCard.tsx | 25 +++++-------- .../timo-web/components/CreateTodoToolbar.tsx | 36 ++++++++++++++----- 3 files changed, 41 insertions(+), 32 deletions(-) diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoCardContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoCardContainer.tsx index bf114007..a695abc1 100644 --- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoCardContainer.tsx +++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoCardContainer.tsx @@ -16,7 +16,6 @@ export interface TodayTodoCardContainerProps { subTodos: SubTodo[]; toolbar: TodayTodoCardToolbar; timerStatus: "RUNNING" | "PAUSED" | "STOPPED"; - isDraggable?: boolean; icon?: ReactNode; onIconClick?: () => void; onCheck?: () => void; @@ -28,7 +27,6 @@ export interface TodayTodoCardContainerProps { export const TodayTodoCardContainer = ({ title, isDone: initialIsDone, - isDraggable = false, icon, onIconClick, subTodos: initialSubTodos, @@ -53,9 +51,12 @@ export const TodayTodoCardContainer = ({ const handleCheck = () => { const next = !isDone; setIsDone(next); - if (next && isPlaying) { - setIsPlaying(false); - onPlay?.(); + if (next) { + setSubTodos((prev) => prev.map((s) => ({ ...s, isDone: true }))); + if (isPlaying) { + setIsPlaying(false); + onPlay?.(); + } } onCheck?.(); }; @@ -80,7 +81,6 @@ export const TodayTodoCardContainer = ({ isDone={isDone} isDimmed={isDimmed} isPlaying={isPlaying} - isDraggable={isDraggable} icon={icon} onIconClick={onIconClick} subTodos={subTodos} diff --git a/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx b/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx index 6b52d717..6a44bc21 100644 --- a/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx +++ b/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx @@ -1,8 +1,6 @@ "use client"; import { - HamburgerGrayIcon, - HamburgerIcon, PlayDisabledIcon, PlayIcon, StopIcon, @@ -53,7 +51,6 @@ export interface TodayTodoCardProps { isDone: boolean; isDimmed: boolean; isPlaying: boolean; - isDraggable?: boolean; icon?: ReactNode; onIconClick?: () => void; subTodos: SubTodo[]; @@ -71,7 +68,6 @@ export const TodayTodoCard = ({ isDone, isDimmed, isPlaying, - isDraggable = false, icon, onIconClick, subTodos, @@ -97,12 +93,6 @@ export const TodayTodoCard = ({
onCheck()} /> - {isDraggable && - (isDimmed ? ( - - ) : ( - - ))} {icon && (
diff --git a/apps/timo-web/components/CreateTodoToolbar.tsx b/apps/timo-web/components/CreateTodoToolbar.tsx index 617c18e3..8061967d 100644 --- a/apps/timo-web/components/CreateTodoToolbar.tsx +++ b/apps/timo-web/components/CreateTodoToolbar.tsx @@ -41,6 +41,7 @@ export interface CreateTodoToolbarProps { memo?: boolean; repeat?: boolean; delete?: boolean; + isDimmed?: boolean; activeItem?: ActiveItem; onDateClick?: () => void; onTimeClick?: () => void; @@ -59,6 +60,7 @@ export const CreateTodoToolbar = ({ memo, repeat, delete: isDeleteSet, + isDimmed, activeItem, onDateClick, onTimeClick, @@ -78,7 +80,7 @@ export const CreateTodoToolbar = ({ > {activeItem === "date" ? ( - ) : date ? ( + ) : date && !isDimmed ? ( ) : ( @@ -89,7 +91,9 @@ export const CreateTodoToolbar = ({ "typo-caption-r-10", activeItem === "date" ? "text-timo-blue-300" - : "text-timo-gray-900", + : isDimmed + ? "text-timo-gray-700" + : "text-timo-gray-900", )} > {date} @@ -105,7 +109,7 @@ export const CreateTodoToolbar = ({ > {activeItem === "time" ? ( - ) : time ? ( + ) : time && !isDimmed ? ( ) : ( @@ -116,7 +120,9 @@ export const CreateTodoToolbar = ({ "typo-caption-r-10 w-9 text-center", activeItem === "time" ? "text-timo-blue-300" - : "text-timo-gray-900", + : isDimmed + ? "text-timo-gray-700" + : "text-timo-gray-900", )} > {time} @@ -132,7 +138,11 @@ export const CreateTodoToolbar = ({ > @@ -140,14 +150,22 @@ export const CreateTodoToolbar = ({