From 98cef32784919dd89d385cf9b877d4b60333496e Mon Sep 17 00:00:00 2001 From: jjangminii Date: Tue, 7 Jul 2026 23:41:39 +0900 Subject: [PATCH 1/8] =?UTF-8?q?feat(web):=20focus=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EC=97=90=20=ED=83=80=EC=9D=B4=EB=A8=B8=20=EC=98=81?= =?UTF-8?q?=EC=97=AD=EC=9D=84=20=EA=B5=AC=ED=98=84=ED=95=9C=EB=8B=A4=20(#1?= =?UTF-8?q?09)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Figma 디자인을 기반으로 focus 페이지에 타이머(재생/일시정지/시간추가) 영역을 구현했습니다 --- .../focus/_containers/FocusTimerContainer.tsx | 37 +++++++++++++++++++ .../app/[locale]/(main)/focus/page.tsx | 8 +++- 2 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 apps/timo-web/app/[locale]/(main)/focus/_containers/FocusTimerContainer.tsx diff --git a/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusTimerContainer.tsx b/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusTimerContainer.tsx new file mode 100644 index 00000000..6fd8c851 --- /dev/null +++ b/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusTimerContainer.tsx @@ -0,0 +1,37 @@ +"use client"; + +import { TimerOnIcon } from "@repo/timo-design-system/icons"; +import { useState } from "react"; + +import { Timer } from "@/components/timer/Timer"; +import { TimerControls } from "@/components/timer/TimerControls"; + +type TimerStatus = "RUNNING" | "PAUSED"; + +export const FocusTimerContainer = () => { + const [status, setStatus] = useState("PAUSED"); + + const handleTogglePlay = () => + setStatus((prev) => (prev === "RUNNING" ? "PAUSED" : "RUNNING")); + const handleEnd = () => setStatus("PAUSED"); + const handleAddTime = () => {}; + + return ( +
+ } + time="10:30" + plannedLabel="12M" + progress={70} + size="lg" + /> + + +
+ ); +}; diff --git a/apps/timo-web/app/[locale]/(main)/focus/page.tsx b/apps/timo-web/app/[locale]/(main)/focus/page.tsx index e8b0076e..ddf8d7ae 100644 --- a/apps/timo-web/app/[locale]/(main)/focus/page.tsx +++ b/apps/timo-web/app/[locale]/(main)/focus/page.tsx @@ -1,3 +1,9 @@ +import { FocusTimerContainer } from "@/app/[locale]/(main)/focus/_containers/FocusTimerContainer"; + export default function FocusPage() { - return <>; + return ( +
+ +
+ ); } From 9503d6d9332ba31205daadb6dbe72fabcc106397 Mon Sep 17 00:00:00 2001 From: jjangminii Date: Tue, 7 Jul 2026 23:42:34 +0900 Subject: [PATCH 2/8] =?UTF-8?q?fix(web):=20=ED=83=80=EC=9D=B4=EB=A8=B8=20?= =?UTF-8?q?=EC=9E=AC=EC=83=9D=20=EC=A4=91=20=EC=BB=A8=ED=8A=B8=EB=A1=A4=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=A0=84=EC=B2=B4=EA=B0=80=20=EA=B0=95?= =?UTF-8?q?=EC=A1=B0=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=ED=95=9C=EB=8B=A4=20(#109)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Figma 디자인 대조 결과 재생 중 상태에서는 재생 버튼뿐 아니라 종료·시간추가 버튼도 함께 강조되어야 함을 확인하여 수정했습니다 --- apps/timo-web/components/timer/TimerControls.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/apps/timo-web/components/timer/TimerControls.tsx b/apps/timo-web/components/timer/TimerControls.tsx index 69c18ff2..dfbb4f31 100644 --- a/apps/timo-web/components/timer/TimerControls.tsx +++ b/apps/timo-web/components/timer/TimerControls.tsx @@ -22,12 +22,15 @@ export const TimerControls = ({ onEnd, onAddTime, }: TimerControlsProps) => { + const variant = isRunning ? "active" : "default"; + return (
} + icon={isRunning ? : } activeIcon={} label="종료" + variant={variant} onClick={onEnd} /> @@ -36,14 +39,17 @@ export const TimerControls = ({ isRunning ? : } label={isRunning ? "일시정지" : "재생"} - variant={isRunning ? "active" : "default"} + variant={variant} onClick={onTogglePlay} /> } + icon={ + isRunning ? : + } activeIcon={} label="시간 추가" + variant={variant} onClick={onAddTime} />
From 15bf149c2ad150384478fb3bd78536a5b4958997 Mon Sep 17 00:00:00 2001 From: jjangminii Date: Wed, 8 Jul 2026 00:18:24 +0900 Subject: [PATCH 3/8] =?UTF-8?q?style(web):=20=ED=83=80=EC=9D=B4=EB=A8=B8?= =?UTF-8?q?=20=EC=98=81=EC=97=AD=20=EB=84=88=EB=B9=84=EB=A5=BC=20=EC=8A=A4?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=8B=B1=20=EC=8A=A4=EC=BC=80=EC=9D=BC=20?= =?UTF-8?q?=EB=8B=A8=EC=9C=84=EB=A1=9C=20=ED=91=9C=ED=98=84=ED=95=9C?= =?UTF-8?q?=EB=8B=A4=20(#109)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - w-[546px] arbitrary value를 동일한 값의 스페이싱 스케일 단위(w-136.5)로 변경했습니다 --- .../[locale]/(main)/focus/_containers/FocusTimerContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusTimerContainer.tsx b/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusTimerContainer.tsx index 6fd8c851..af00735b 100644 --- a/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusTimerContainer.tsx +++ b/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusTimerContainer.tsx @@ -17,7 +17,7 @@ export const FocusTimerContainer = () => { const handleAddTime = () => {}; return ( -
+
} time="10:30" From efbb16bc6352886847f8de4294a289d476d0bc5a Mon Sep 17 00:00:00 2001 From: jjangminii Date: Wed, 8 Jul 2026 03:26:01 +0900 Subject: [PATCH 4/8] =?UTF-8?q?feat(web):=20focus=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=ED=83=9C=EC=8A=A4=ED=81=AC=20=EC=83=81=EC=84=B8=20?= =?UTF-8?q?=EC=98=81=EC=97=AD=EC=9D=84=20=EA=B5=AC=ED=98=84=ED=95=9C?= =?UTF-8?q?=EB=8B=A4=20(#109)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Figma 디자인을 기반으로 태스크 상세 영역(날짜, 체크박스, 하위 테스크, 메모, 재생 버튼)을 구현했습니다 - FocusTaskContainer와 FocusTimerContainer를 FocusSessionContainer로 통합해 재생/완료 상태를 공유하도록 했습니다 --- .../focus/_components/FocusTaskCard.tsx | 113 ++++++++++++++++++ .../_containers/FocusSessionContainer.tsx | 107 +++++++++++++++++ .../focus/_containers/FocusTimerContainer.tsx | 37 ------ .../[locale]/(main)/focus/_mocks/task-mock.ts | 15 +++ .../[locale]/(main)/focus/_types/task-type.ts | 16 +++ .../app/[locale]/(main)/focus/_utils/date.ts | 25 ++++ .../[locale]/(main)/focus/_utils/duration.ts | 12 ++ .../app/[locale]/(main)/focus/page.tsx | 12 +- 8 files changed, 290 insertions(+), 47 deletions(-) create mode 100644 apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskCard.tsx create mode 100644 apps/timo-web/app/[locale]/(main)/focus/_containers/FocusSessionContainer.tsx delete mode 100644 apps/timo-web/app/[locale]/(main)/focus/_containers/FocusTimerContainer.tsx create mode 100644 apps/timo-web/app/[locale]/(main)/focus/_mocks/task-mock.ts create mode 100644 apps/timo-web/app/[locale]/(main)/focus/_types/task-type.ts create mode 100644 apps/timo-web/app/[locale]/(main)/focus/_utils/date.ts create mode 100644 apps/timo-web/app/[locale]/(main)/focus/_utils/duration.ts diff --git a/apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskCard.tsx b/apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskCard.tsx new file mode 100644 index 00000000..31687ddf --- /dev/null +++ b/apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskCard.tsx @@ -0,0 +1,113 @@ +import { + CalendarOnIcon, + ClockOnIcon, + PlayIcon, + StopIcon, +} from "@repo/timo-design-system/icons"; +import { Checkbox, PlayButton } from "@repo/timo-design-system/ui"; +import { cn } from "@repo/timo-design-system/utils"; + +import type { FocusTaskSubtask } from "@/app/[locale]/(main)/focus/_types/task-type"; + +export interface FocusTaskCardProps { + dayNumber: string; + dayOfWeek: string; + title: string; + completed: boolean; + dateText: string; + durationText: string; + isRunning: boolean; + subtasks: FocusTaskSubtask[]; + memo?: string; + onToggleCompleted: (completed: boolean) => void; + onTogglePlay: () => void; + onToggleSubtaskCompleted: (subtaskId: number, completed: boolean) => void; +} + +export const FocusTaskCard = ({ + dayNumber, + dayOfWeek, + title, + completed, + dateText, + durationText, + isRunning, + subtasks, + memo, + onToggleCompleted, + onTogglePlay, + onToggleSubtaskCompleted, +}: FocusTaskCardProps) => { + return ( +
+
+

{dayNumber}

+

{dayOfWeek}

+
+ +
+ +

+ {title} +

+
+ +
+
+
+ + + {dateText} + +
+ +
+ + + {durationText} + +
+
+ + + {isRunning ? ( + + ) : ( + + )} + +
+ +
+ {subtasks.map((subtask) => ( +
+ + onToggleSubtaskCompleted(subtask.subtaskId, checked) + } + /> +

+ {subtask.content} +

+
+ ))} + + {memo && ( +

+ {memo} +

+ )} +
+
+ ); +}; diff --git a/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusSessionContainer.tsx b/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusSessionContainer.tsx new file mode 100644 index 00000000..38a1d73b --- /dev/null +++ b/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusSessionContainer.tsx @@ -0,0 +1,107 @@ +"use client"; + +import { TimerOnIcon } from "@repo/timo-design-system/icons"; +import { useState } from "react"; + +import type { FocusTask } from "@/app/[locale]/(main)/focus/_types/task-type"; + +import { FocusTaskCard } from "@/app/[locale]/(main)/focus/_components/FocusTaskCard"; +import { FocusHeaderContainer } from "@/app/[locale]/(main)/focus/_containers/FocusHeaderContainer"; +import { focusTaskMock } from "@/app/[locale]/(main)/focus/_mocks/task-mock"; +import { + convertDateToBadgeText, + convertDateToDayNumberText, + convertDateToDayOfWeekText, +} from "@/app/[locale]/(main)/focus/_utils/date"; +import { convertDurationToTimeText } from "@/app/[locale]/(main)/focus/_utils/duration"; +import { Timer } from "@/components/timer/Timer"; +import { TimerControls } from "@/components/timer/TimerControls"; + +export const FocusSessionContainer = () => { + const [task, setTask] = useState(focusTaskMock); + const today = new Date(); + + const handleTogglePlay = () => { + // TODO: API + setTask((prev) => ({ ...prev, isRunning: !prev.isRunning })); + }; + + const handleEnd = () => { + // TODO: API + setTask((prev) => ({ + ...prev, + isRunning: false, + completed: true, + subtasks: prev.subtasks.map((subtask) => ({ + ...subtask, + completed: true, + })), + })); + }; + + const handleAddTime = () => {}; + + const handleToggleCompleted = (completed: boolean) => { + // TODO: API + setTask((prev) => ({ + ...prev, + completed, + isRunning: completed ? false : prev.isRunning, + subtasks: prev.subtasks.map((subtask) => ({ ...subtask, completed })), + })); + }; + + const handleToggleSubtaskCompleted = ( + subtaskId: number, + completed: boolean, + ) => { + // TODO: API + setTask((prev) => ({ + ...prev, + subtasks: prev.subtasks.map((subtask) => + subtask.subtaskId === subtaskId ? { ...subtask, completed } : subtask, + ), + })); + }; + + return ( +
+
+ + +
+ +
+
+ } + time="10:30" + plannedLabel="12M" + progress={70} + size="lg" + /> + + +
+
+
+ ); +}; diff --git a/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusTimerContainer.tsx b/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusTimerContainer.tsx deleted file mode 100644 index af00735b..00000000 --- a/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusTimerContainer.tsx +++ /dev/null @@ -1,37 +0,0 @@ -"use client"; - -import { TimerOnIcon } from "@repo/timo-design-system/icons"; -import { useState } from "react"; - -import { Timer } from "@/components/timer/Timer"; -import { TimerControls } from "@/components/timer/TimerControls"; - -type TimerStatus = "RUNNING" | "PAUSED"; - -export const FocusTimerContainer = () => { - const [status, setStatus] = useState("PAUSED"); - - const handleTogglePlay = () => - setStatus((prev) => (prev === "RUNNING" ? "PAUSED" : "RUNNING")); - const handleEnd = () => setStatus("PAUSED"); - const handleAddTime = () => {}; - - return ( -
- } - time="10:30" - plannedLabel="12M" - progress={70} - size="lg" - /> - - -
- ); -}; diff --git a/apps/timo-web/app/[locale]/(main)/focus/_mocks/task-mock.ts b/apps/timo-web/app/[locale]/(main)/focus/_mocks/task-mock.ts new file mode 100644 index 00000000..b9927a4b --- /dev/null +++ b/apps/timo-web/app/[locale]/(main)/focus/_mocks/task-mock.ts @@ -0,0 +1,15 @@ +import type { FocusTask } from "@/app/[locale]/(main)/focus/_types/task-type"; + +export const focusTaskMock: FocusTask = { + taskId: 1, + title: "앱잼 1차 과제 제출", + completed: false, + scheduledDate: new Date(2026, 6, 1), + durationSeconds: 7200, + isRunning: false, + subtasks: [ + { subtaskId: 1, content: "기획서 작성하기", completed: false }, + { subtaskId: 2, content: "와이어프레임 그리기", completed: true }, + ], + memo: "회의 전까지 초안 공유하기회의 전까지 초안 공유하기회의 전까지 초안 공유하기회의 전까지 초안 공유하기회의 전까지 초안 공유하기회의 전까지 초안 공유하기회의 전까지 초안 공유하기회의 전까지 초안 공유하기회의 전까지 초안 공유하기회의 전까지 초안 공유하기회의 전까지 초안 공유하기회의 전까지 초안 공유하기", +}; diff --git a/apps/timo-web/app/[locale]/(main)/focus/_types/task-type.ts b/apps/timo-web/app/[locale]/(main)/focus/_types/task-type.ts new file mode 100644 index 00000000..06ccb449 --- /dev/null +++ b/apps/timo-web/app/[locale]/(main)/focus/_types/task-type.ts @@ -0,0 +1,16 @@ +export interface FocusTaskSubtask { + subtaskId: number; + content: string; + completed: boolean; +} + +export interface FocusTask { + taskId: number; + title: string; + completed: boolean; + scheduledDate: Date; + durationSeconds: number; + isRunning: boolean; + subtasks: FocusTaskSubtask[]; + memo?: string; +} diff --git a/apps/timo-web/app/[locale]/(main)/focus/_utils/date.ts b/apps/timo-web/app/[locale]/(main)/focus/_utils/date.ts new file mode 100644 index 00000000..525c0776 --- /dev/null +++ b/apps/timo-web/app/[locale]/(main)/focus/_utils/date.ts @@ -0,0 +1,25 @@ +const DAY_OF_WEEK_LABELS = [ + "일요일", + "월요일", + "화요일", + "수요일", + "목요일", + "금요일", + "토요일", +]; + +export const convertDateToDayNumberText = (date: Date): string => { + return `${date.getDate()}`; +}; + +export const convertDateToDayOfWeekText = (date: Date): string => { + return DAY_OF_WEEK_LABELS[date.getDay()] ?? ""; +}; + +export const convertDateToBadgeText = (date: Date): string => { + const year = `${date.getFullYear()}`.slice(-2); + const month = `${date.getMonth() + 1}`.padStart(2, "0"); + const day = `${date.getDate()}`.padStart(2, "0"); + + return `${year}.${month}.${day}`; +}; diff --git a/apps/timo-web/app/[locale]/(main)/focus/_utils/duration.ts b/apps/timo-web/app/[locale]/(main)/focus/_utils/duration.ts new file mode 100644 index 00000000..5097d596 --- /dev/null +++ b/apps/timo-web/app/[locale]/(main)/focus/_utils/duration.ts @@ -0,0 +1,12 @@ +const SECONDS_PER_HOUR = 3600; + +const SECONDS_PER_MINUTE = 60; + +export const convertDurationToTimeText = (durationSeconds: number): string => { + const hours = Math.floor(durationSeconds / SECONDS_PER_HOUR); + const minutes = Math.floor( + (durationSeconds % SECONDS_PER_HOUR) / SECONDS_PER_MINUTE, + ); + + return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`; +}; diff --git a/apps/timo-web/app/[locale]/(main)/focus/page.tsx b/apps/timo-web/app/[locale]/(main)/focus/page.tsx index 44cf7e04..86c4e9b8 100644 --- a/apps/timo-web/app/[locale]/(main)/focus/page.tsx +++ b/apps/timo-web/app/[locale]/(main)/focus/page.tsx @@ -1,13 +1,5 @@ -import { FocusHeaderContainer } from "@/app/[locale]/(main)/focus/_containers/FocusHeaderContainer"; -import { FocusTimerContainer } from "@/app/[locale]/(main)/focus/_containers/FocusTimerContainer"; +import { FocusSessionContainer } from "@/app/[locale]/(main)/focus/_containers/FocusSessionContainer"; export default function FocusPage() { - return ( -
- -
- -
-
- ); + return ; } From c4a24570852380f47bd7323e197168da5b6a5e6b Mon Sep 17 00:00:00 2001 From: jjangminii Date: Wed, 8 Jul 2026 03:26:23 +0900 Subject: [PATCH 5/8] =?UTF-8?q?fix(web):=20=ED=83=80=EC=9D=B4=EB=A8=B8=20?= =?UTF-8?q?=EC=BB=A8=ED=8A=B8=EB=A1=A4=20=EB=B2=84=ED=8A=BC=20=EA=B0=95?= =?UTF-8?q?=EC=A1=B0=20=EB=B2=94=EC=9C=84=EB=A5=BC=20=EC=9E=AC=EC=83=9D=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=EC=9C=BC=EB=A1=9C=20=EB=90=98=EB=8F=8C?= =?UTF-8?q?=EB=A6=B0=EB=8B=A4=20(#109)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 재생 중에도 종료·시간추가 버튼은 회색을 유지하고 재생 버튼만 강조되도록 이전 변경을 되돌렸습니다 --- apps/timo-web/components/timer/TimerControls.tsx | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/apps/timo-web/components/timer/TimerControls.tsx b/apps/timo-web/components/timer/TimerControls.tsx index dfbb4f31..69c18ff2 100644 --- a/apps/timo-web/components/timer/TimerControls.tsx +++ b/apps/timo-web/components/timer/TimerControls.tsx @@ -22,15 +22,12 @@ export const TimerControls = ({ onEnd, onAddTime, }: TimerControlsProps) => { - const variant = isRunning ? "active" : "default"; - return (
: } + icon={} activeIcon={} label="종료" - variant={variant} onClick={onEnd} /> @@ -39,17 +36,14 @@ export const TimerControls = ({ isRunning ? : } label={isRunning ? "일시정지" : "재생"} - variant={variant} + variant={isRunning ? "active" : "default"} onClick={onTogglePlay} /> : - } + icon={} activeIcon={} label="시간 추가" - variant={variant} onClick={onAddTime} />
From aab8d252df100ec9822b98be00bfea7dd68be489 Mon Sep 17 00:00:00 2001 From: jjangminii Date: Wed, 8 Jul 2026 14:39:35 +0900 Subject: [PATCH 6/8] =?UTF-8?q?feat(web):=20focus=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=B5=9C=EC=86=8C=20=EB=84=88=EB=B9=84=20=EC=9D=B4?= =?UTF-8?q?=ED=95=98=EC=97=90=EC=84=9C=20=EA=B0=80=EB=A1=9C=20=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A1=A4=EB=90=98=EB=8F=84=EB=A1=9D=20=ED=95=9C?= =?UTF-8?q?=EB=8B=A4=20(#109)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 태스크 카드가 무한정 찌그러지지 않도록 최소 너비를 지정했습니다 - 화면이 좁아지면 축소 대신 페이지에 가로 스크롤이 생기도록 했습니다 --- .../app/[locale]/(main)/focus/_components/FocusTaskCard.tsx | 2 +- .../(main)/focus/_containers/FocusSessionContainer.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskCard.tsx b/apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskCard.tsx index 31687ddf..09a56973 100644 --- a/apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskCard.tsx +++ b/apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskCard.tsx @@ -39,7 +39,7 @@ export const FocusTaskCard = ({ onToggleSubtaskCompleted, }: FocusTaskCardProps) => { return ( -
+

{dayNumber}

{dayOfWeek}

diff --git a/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusSessionContainer.tsx b/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusSessionContainer.tsx index 38a1d73b..7c6bcae9 100644 --- a/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusSessionContainer.tsx +++ b/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusSessionContainer.tsx @@ -65,8 +65,8 @@ export const FocusSessionContainer = () => { }; return ( -
-
+
+
Date: Wed, 8 Jul 2026 15:11:25 +0900 Subject: [PATCH 7/8] =?UTF-8?q?style(web):=20FocusTaskCard=20=EC=84=B8?= =?UTF-8?q?=EB=A1=9C=20=EC=97=AC=EB=B0=B1=EC=9D=84=20=ED=95=98=EB=8B=A8=20?= =?UTF-8?q?=ED=8C=A8=EB=94=A9=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= =?UTF-8?q?=ED=95=9C=EB=8B=A4=20(#109)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - py-8(상하 패딩)을 pb-8(하단 패딩만)로 변경했습니다 --- .../app/[locale]/(main)/focus/_components/FocusTaskCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskCard.tsx b/apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskCard.tsx index 09a56973..2361ef09 100644 --- a/apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskCard.tsx +++ b/apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskCard.tsx @@ -39,7 +39,7 @@ export const FocusTaskCard = ({ onToggleSubtaskCompleted, }: FocusTaskCardProps) => { return ( -
+

{dayNumber}

{dayOfWeek}

From 45e5e4163df2ce2bf5ab97a74ee2dbe926251745 Mon Sep 17 00:00:00 2001 From: jjangminii Date: Wed, 8 Jul 2026 15:17:33 +0900 Subject: [PATCH 8/8] =?UTF-8?q?name(web):=20FocusTaskCard=EB=A5=BC=20Focus?= =?UTF-8?q?TaskItem=EC=9C=BC=EB=A1=9C=20=EB=A6=AC=EB=84=A4=EC=9E=84?= =?UTF-8?q?=ED=95=98=EA=B3=A0=20section=20=ED=83=9C=EA=B7=B8=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=ED=95=9C=EB=8B=A4=20(#109)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 카드보다 아이템에 가까운 컴포넌트라 용도에 맞게 리네임했습니다 - 루트 태그를 div에서 section으로 변경했습니다 --- .../{FocusTaskCard.tsx => FocusTaskItem.tsx} | 10 +++++----- .../(main)/focus/_containers/FocusSessionContainer.tsx | 4 ++-- 2 files changed, 7 insertions(+), 7 deletions(-) rename apps/timo-web/app/[locale]/(main)/focus/_components/{FocusTaskCard.tsx => FocusTaskItem.tsx} (93%) diff --git a/apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskCard.tsx b/apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskItem.tsx similarity index 93% rename from apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskCard.tsx rename to apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskItem.tsx index 2361ef09..a29c3ed1 100644 --- a/apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskCard.tsx +++ b/apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskItem.tsx @@ -9,7 +9,7 @@ import { cn } from "@repo/timo-design-system/utils"; import type { FocusTaskSubtask } from "@/app/[locale]/(main)/focus/_types/task-type"; -export interface FocusTaskCardProps { +export interface FocusTaskItemProps { dayNumber: string; dayOfWeek: string; title: string; @@ -24,7 +24,7 @@ export interface FocusTaskCardProps { onToggleSubtaskCompleted: (subtaskId: number, completed: boolean) => void; } -export const FocusTaskCard = ({ +export const FocusTaskItem = ({ dayNumber, dayOfWeek, title, @@ -37,9 +37,9 @@ export const FocusTaskCard = ({ onToggleCompleted, onTogglePlay, onToggleSubtaskCompleted, -}: FocusTaskCardProps) => { +}: FocusTaskItemProps) => { return ( -
+

{dayNumber}

{dayOfWeek}

@@ -108,6 +108,6 @@ export const FocusTaskCard = ({

)}
-
+ ); }; diff --git a/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusSessionContainer.tsx b/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusSessionContainer.tsx index 7c6bcae9..24b12380 100644 --- a/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusSessionContainer.tsx +++ b/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusSessionContainer.tsx @@ -5,7 +5,7 @@ import { useState } from "react"; import type { FocusTask } from "@/app/[locale]/(main)/focus/_types/task-type"; -import { FocusTaskCard } from "@/app/[locale]/(main)/focus/_components/FocusTaskCard"; +import { FocusTaskItem } from "@/app/[locale]/(main)/focus/_components/FocusTaskItem"; import { FocusHeaderContainer } from "@/app/[locale]/(main)/focus/_containers/FocusHeaderContainer"; import { focusTaskMock } from "@/app/[locale]/(main)/focus/_mocks/task-mock"; import { @@ -68,7 +68,7 @@ export const FocusSessionContainer = () => {
-