[RELEASE] v0.0.3.3

README.md

@@ -1,4 +1,6 @@
 <div align="center">
+  <img width="100" height="100" alt="image" src="https://github.com/user-attachments/assets/8ab6a065-30a7-47e8-826b-cc1f42bc57d7" />
+
   <h1 align="center">Timo</h1>
 
   <p align="center">
@@ -26,27 +28,117 @@
 
 ## What Is Timo?
 
+
+<img width="1440" height="929" alt="image" src="https://github.com/user-attachments/assets/2a914423-b362-460b-a0cf-d4620e0857af" />
+
+<br />
+
 Timo is a timebox-based to-do service that converts tasks into actionable, time-bound blocks — so you actually finish what you plan.
 
 Unlike traditional to-do lists, Timo asks you to estimate how long each task will take, then builds your day around those time blocks.
 
 As you use it, Timo learns your time patterns and helps you plan more realistically with AI-powered time recommendations.
 
+<br />
+
+
 ## Why We Built It
 
+<img width="3840" height="2160" alt="image" src="https://github.com/user-attachments/assets/f5999e80-24d5-4163-ad7b-464a11eb6f52" />
+
+<br/>
+
+<br/>
+
 - **To-do lists aren't enough**: Writing tasks down feels productive, but without a time structure, most lists stay unfinished at end of day.
 - **Time estimates make plans real**: A task without a duration is just a wish. Timo pairs every task with a time block from the start.
 - **Feedback closes the loop**: The gap between planned and actual time is where most tools stop. Timo closes that loop by recording real execution time and feeding it back into future planning.
 
 ## Features
 
-- **✏️ Todo + Time Estimate**: Add tasks with an expected duration and optional tags. The estimate becomes the foundation of your daily schedule.
+<img width="3840" height="2160" alt="image" src="https://github.com/user-attachments/assets/d885c832-0bee-4ef7-aa38-993bd43d916e" />
+
+<br/>
+
+<br/>
+
+- **📝 Todo + Time Estimate**: Enter what you need to do and how long you expect it to take — Timo turns it into a timebox that becomes part of your plan.
+
+<br/>
+
+<br/>
+
+<img width="3840" height="2160" alt="image" src="https://github.com/user-attachments/assets/f85b1a15-c86b-4a1b-b2ea-76779a87ae17" />
+
+<br/>
+
+<br/>
+
+- **⏱️ Timer-Based Execution**: Start a timebox and a timer runs for exactly the duration you set, keeping you focused on getting it done.
+
+<br/>
+
+<br/>
+
+<img width="3840" height="2160" alt="image" src="https://github.com/user-attachments/assets/f7b549b8-1072-4d31-abb0-0bfcefd91f8f" />
+
+<br/>
+
+<br/>
+
+- **📊 Timeline Tracking**: The actual time you spent is automatically recorded on the timeline as a time block, so you can see exactly when and how long you worked.
+
+<br/>
+
+<br/>
+
+<img width="3840" height="2160" alt="image" src="https://github.com/user-attachments/assets/bcd0f9be-7cdf-4d8d-a7af-595c6fa9544e" />
+
+<br/>
+
+<br/>
+
+- **🤖 AI Feedback**: Timo compares your accumulated estimated vs. actual time data and recommends the most realistic duration for each task, giving you feedback to plan better.
+
+<br/>
+
+<br/>
+
+<img width="3840" height="2160" alt="image" src="https://github.com/user-attachments/assets/71850f4c-d07a-4620-912d-3f1f2737cded" />
+
+<br/>
+
+<br/>
+
+- **▶️ Seamless Transition**: Complete a timebox and the next one starts right away, keeping your workflow moving without interruption.
+
+<br/>
+
+<br/>
+
+<img width="3840" height="2160" alt="image" src="https://github.com/user-attachments/assets/1b49c2a2-bc22-4728-8e93-a52e22e6d352" />
+
+<br/>
+
+<br/>
+
+- **📈 Daily Statistics**: See how much time you focused today, and compare estimated vs. actual time at a glance.
+
+<br/>
+
+<br/>
+
+<img width="3840" height="2160" alt="image" src="https://github.com/user-attachments/assets/aa70c797-e815-4b6d-a937-ec8dd5719b7c" />
+
+<br/>
+
+<br/>
 
-- **📦 Automatic Timebox Scheduling**: Each task is automatically converted into a time block on your schedule — turning a flat to-do list into an executable plan.
+- **🎯 Focus Mode**: Zoom into a single todo and work through it distraction-free.
 
-- **⏱️ Timer-Based Execution**: Start a timebox and a timer begins. Pause, extend, or go full-screen to stay focused. When time is up, you get a notification. Actual time spent is recorded automatically.
+<br/>
 
-- **🤖 AI Time Recommendations**: Timo learns how long similar tasks actually take you, then recommends more accurate time estimates — making future plans increasingly realistic.
+<br/>
 
 ## Getting Started
 
@@ -87,7 +179,7 @@ Timo is optimized for desktop use — designed for students and job seekers who
   <tr>
     <td align="center">
       <a href="https://github.com/kimminna">
-        <img src="https://github.com/kimminna.png" width="80" alt="김민아"/>
+        <img width="1276" height="2032" alt="image" src="https://github.com/user-attachments/assets/ebd38f45-73ad-4ad9-97d9-82d9c057abcd" />
       </a>
       <br/>
       <strong>김민아</strong>
@@ -96,7 +188,7 @@ Timo is optimized for desktop use — designed for students and job seekers who
     </td>
     <td align="center">
       <a href="https://github.com/yumin-kim2">
-        <img src="https://github.com/yumin-kim2.png" width="80" alt="김유민"/>
+        <img width="1276" height="2032" alt="image" src="https://github.com/user-attachments/assets/d093d5c5-27a0-4e7d-b83d-de9379f82f0c" />
       </a>
       <br/>
       <strong>김유민</strong>
@@ -105,7 +197,7 @@ Timo is optimized for desktop use — designed for students and job seekers who
     </td>
     <td align="center">
       <a href="https://github.com/jjangminii">
-        <img src="https://github.com/jjangminii.png" width="80" alt="김정민"/>
+        <img width="1276" height="2032" alt="image" src="https://github.com/user-attachments/assets/59959ce9-2cab-4a6f-b4ec-73463bac404d" />
       </a>
       <br/>
       <strong>김정민</strong>
@@ -114,7 +206,7 @@ Timo is optimized for desktop use — designed for students and job seekers who
     </td>
     <td align="center">
       <a href="https://github.com/ehye1">
-        <img src="https://github.com/ehye1.png" width="80" alt="이혜원"/>
+     <img width="1276" height="2032" alt="image" src="https://github.com/user-attachments/assets/20bb5e37-6b5e-4f20-8255-658531293e82" />
       </a>
       <br/>
       <strong>이혜원</strong>

README_ko.md

@@ -1,4 +1,6 @@
 <div align="center">
+  <img width="100" height="100" alt="image" src="https://github.com/user-attachments/assets/8ab6a065-30a7-47e8-826b-cc1f42bc57d7" />
+
   <h1 align="center">Timo</h1>
 
   <p align="center">
@@ -26,27 +28,115 @@
 
 ## Timo란?
 
+<img width="1440" height="929" alt="image" src="https://github.com/user-attachments/assets/2a914423-b362-460b-a0cf-d4620e0857af" />
+
+<br />
+
 Timo는 할 일을 실행 가능한 시간 단위(타임박스)로 변환해주는 투두 서비스입니다.
 
 단순히 할 일 목록을 나열하는 대신, 각 태스크에 예상 소요 시간을 입력하면 하루 일정이 자동으로 구성됩니다.
 
 반복 사용을 통해 Timo는 개인의 시간 사용 패턴을 학습하고, AI 기반 시간 추천으로 점점 더 현실적인 계획 수립을 돕습니다.
 
+<br />
+
 ## 왜 만들었나요?
 
+<img width="3840" height="2160" alt="image" src="https://github.com/user-attachments/assets/f5999e80-24d5-4163-ad7b-464a11eb6f52" />
+
+<br/>
+
+<br/>
+
 - **투두 리스트만으로는 부족합니다**: 할 일을 적는 것만으로는 실제로 완수하기 어렵습니다. 시간 구조 없이 작성된 목록은 대부분 그날 끝나지 않습니다.
 - **시간 추정이 계획을 실행 가능하게 만듭니다**: 소요 시간 없는 태스크는 바람일 뿐입니다. Timo는 모든 태스크에 시간을 붙여 구체적인 계획으로 만듭니다.
 - **실행과 피드백까지 연결합니다**: 계획한 시간과 실제 수행 시간의 차이를 추적하고, 이를 다음 계획에 반영해 점점 더 현실적인 일정을 만들어 갑니다.
 
 ## 주요 기능
 
-- **✏️ 투두 + 예상 소요 시간 입력**: 태스크를 입력할 때 예상 소요 시간과 태그를 함께 설정합니다. 이 정보가 하루 일정의 기반이 됩니다.
+<img width="3840" height="2160" alt="image" src="https://github.com/user-attachments/assets/d885c832-0bee-4ef7-aa38-993bd43d916e" />
+
+<br/>
+
+<br/>
+
+- **📝 투두 + 예상 소요 시간 입력**: 해야 할 일과 예상 소요 시간을 입력하면 타임박스가 생성되어 계획에 반영됩니다.
+
+<br/>
+
+<br/>
+
+<img width="3840" height="2160" alt="image" src="https://github.com/user-attachments/assets/f85b1a15-c86b-4a1b-b2ea-76779a87ae17" />
+
+<br/>
+
+<br/>
+
+- **⏱️ 타이머 실행**: 타임박스를 실행하면 설정한 시간만큼 타이머가 작동해 계획을 수행합니다.
+
+<br/>
+
+<br/>
+
+<img width="3840" height="2160" alt="image" src="https://github.com/user-attachments/assets/f7b549b8-1072-4d31-abb0-0bfcefd91f8f" />
+
+<br/>
+
+<br/>
+
+- **📊 타임라인 기록**: 실제로 수행한 시간만큼 타임라인에 박스 형태로 기록됩니다.
+
+<br/>
+
+<br/>
+
+<img width="3840" height="2160" alt="image" src="https://github.com/user-attachments/assets/bcd0f9be-7cdf-4d8d-a7af-595c6fa9544e" />
+
+<br/>
+
+<br/>
+
+- **🤖 AI 피드백**: 그동안의 예상 소요 시간과 실제 소요 시간 데이터를 비교해 AI가 가장 적합한 시간을 추천하고 피드백을 제공합니다.
+
+<br/>
+
+<br/>
+
+<img width="3840" height="2160" alt="image" src="https://github.com/user-attachments/assets/71850f4c-d07a-4620-912d-3f1f2737cded" />
+
+<br/>
+
+<br/>
+
+- **▶️ 다음 타임박스로 자연스러운 전환**: 하나의 타임박스를 완료하면 바로 다음 타임박스가 시작됩니다.
+
+<br/>
+
+<br/>
+
+<img width="3840" height="2160" alt="image" src="https://github.com/user-attachments/assets/1b49c2a2-bc22-4728-8e93-a52e22e6d352" />
+
+<br/>
+
+<br/>
+
+- **📈 통계**: 하루에 집중한 시간과 예상·실제 소요 시간의 차이를 한눈에 확인할 수 있습니다.
+
+<br/>
+
+<br/>
+
+<img width="3840" height="2160" alt="image" src="https://github.com/user-attachments/assets/aa70c797-e815-4b6d-a937-ec8dd5719b7c" />
+
+<br/>
+
+<br/>
 
-- **📦 타임박스 자동 생성**: 입력된 태스크는 실행 가능한 시간 단위의 타임박스로 자동 변환됩니다. 평면적인 리스트가 실행 가능한 일정으로 바뀝니다.
+- **🎯 집중 모드**: 하나의 투두에 집중해서 수행할 수 있는 모드입니다.
 
-- **⏱️ 타이머 기반 실행**: 타임박스를 시작하면 타이머가 작동합니다. 일시정지·연장·전체화면 기능을 제공하며, 완료 시 알림을 받을 수 있습니다. 실제 수행 시간은 자동으로 기록됩니다.
+<br/>
 
-- **🤖 AI 소요 시간 추천**: 반복 사용을 통해 유사 태스크의 실제 소요 시간 패턴을 학습하고, 더 정확한 시간 추천을 제공합니다. 이를 통해 사용할수록 더 현실적인 계획을 세울 수 있습니다.
+<br/>
 
 ## 실행 방법
 
@@ -87,7 +177,7 @@ Timo는 데스크탑 환경에서 장시간 자기주도적 작업을 수행하
   <tr>
     <td align="center">
       <a href="https://github.com/kimminna">
-        <img src="https://github.com/kimminna.png" width="80" alt="김민아"/>
+        <img width="1276" height="2032" alt="image" src="https://github.com/user-attachments/assets/ebd38f45-73ad-4ad9-97d9-82d9c057abcd" />
       </a>
       <br/>
       <strong>김민아</strong>
@@ -96,7 +186,7 @@ Timo는 데스크탑 환경에서 장시간 자기주도적 작업을 수행하
     </td>
     <td align="center">
       <a href="https://github.com/yumin-kim2">
-        <img src="https://github.com/yumin-kim2.png" width="80" alt="김유민"/>
+        <img width="1276" height="2032" alt="image" src="https://github.com/user-attachments/assets/d093d5c5-27a0-4e7d-b83d-de9379f82f0c" />
       </a>
       <br/>
       <strong>김유민</strong>
@@ -105,7 +195,7 @@ Timo는 데스크탑 환경에서 장시간 자기주도적 작업을 수행하
     </td>
     <td align="center">
       <a href="https://github.com/jjangminii">
-        <img src="https://github.com/jjangminii.png" width="80" alt="김정민"/>
+        <img width="1276" height="2032" alt="image" src="https://github.com/user-attachments/assets/59959ce9-2cab-4a6f-b4ec-73463bac404d" />
       </a>
       <br/>
       <strong>김정민</strong>
@@ -114,7 +204,7 @@ Timo는 데스크탑 환경에서 장시간 자기주도적 작업을 수행하
     </td>
     <td align="center">
       <a href="https://github.com/ehye1">
-        <img src="https://github.com/ehye1.png" width="80" alt="이혜원"/>
+        <img width="1276" height="2032" alt="image" src="https://github.com/user-attachments/assets/20bb5e37-6b5e-4f20-8255-658531293e82" />
       </a>
       <br/>
       <strong>이혜원</strong>

apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/todo-modal/use-create-todo-submit.ts

@@ -8,6 +8,7 @@ import type { CreateTodoRequest } from "@/schemas/todo/todo-schema";
 
 import { getGetTodayQueryKey } from "@/api/generated/endpoints/home/home";
 import { useCreateTodo } from "@/api/generated/endpoints/todo/todo";
+import { useStatisticsQueryInvalidation } from "@/hooks/statistics/use-statistics-query-invalidation";
 
 const buildCreateTodoRequestBody = (
   data: CreateTodoRequest,
@@ -29,13 +30,15 @@ export const useCreateTodoSubmit = () => {
   const [isErrorToastOpen, setIsErrorToastOpen] = useState(false);
   const { mutate: createTodo } = useCreateTodo();
   const queryClient = useQueryClient();
+  const { invalidateStatistics } = useStatisticsQueryInvalidation();
 
   const handleSubmit = (data: CreateTodoRequest) => {
     createTodo(
       { data: buildCreateTodoRequestBody(data) },
       {
         onSuccess: () => {
           queryClient.invalidateQueries({ queryKey: getGetTodayQueryKey() });
+          invalidateStatistics();
         },
         onError: () => {
           setIsErrorToastOpen(true);

apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/useTodayTodoList.ts

@@ -52,6 +52,7 @@ export const useTodayTodoList = (
     invalidateTimeBoxes,
     invalidateTodayView,
     invalidateFocusTodo,
+    invalidateStatistics,
   } = useTimerQueryInvalidation();
 
   const { mutate: startTimer, isPending: isStartTimerPending } = useStartTimer({
@@ -119,6 +120,7 @@ export const useTodayTodoList = (
           invalidateTimeBoxes();
           invalidateTodoDetail(todoId, dateKey);
           invalidateFocusTodo();
+          invalidateStatistics();
         },
         onError: (error: ErrorType<ErrorDto>) => {
           setTodos(previous);
@@ -149,6 +151,7 @@ export const useTodayTodoList = (
                 invalidateTodayView();
                 invalidateTodoDetail(todoId, dateKey);
                 invalidateFocusTodo();
+                invalidateStatistics();
               },
             },
           );