[UI] 활성 타이머가 있는 투두의 재생 버튼을 색으로 구분한다#209
Merged
Merged
Conversation
홈/오늘 탭 목록과 투두 수정 모달의 재생 버튼이 재생 중이든 일시정지든 상관없이 전부 같은 파란색이라, 어떤 투두가 지금 활성 타이머를 갖고 있는지 목록에서 구분이 안 됐습니다. 활성 타이머가 아예 없으면 전부 파란색, 활성 타이머가 있으면 그 투두만 파란색·나머지는 회색으로 낮추도록 PlayButton에 active prop을 추가하고 홈/오늘/투두 수정 모달 세 곳에 동일하게 적용했습니다.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
⏰ Timo-web
prop 이름만으로 드러나는 설명이라 정리했습니다.
Timo Performance ReportBundle Size — timo-web
Lighthouse — timo-web
Image Optimization — timo-web
측정 커밋: |
Walkthrough활성 타이머와 Todo ID를 비교해 재생 버튼 하이라이트 상태를 계산하고, Home·Today·상세 모달의 카드와 공통 Changes타이머 재생 하이라이트
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested labels: Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
kimminna
approved these changes
Jul 14, 2026
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsx (1)
141-142: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value불필요한
Boolean()캐스팅 생략
isActiveTodo는activeTimer가 존재할 때 이미 명확한 boolean 값(===비교 결과)을 가집니다. 반대로activeTimer가 없을 때는 앞의!activeTimer가true가 되어 단락 평가(short-circuit)가 발생하므로Boolean(isActiveTodo)가 실행조차 되지 않습니다.
DetailTodoModalContainer의 구현과 동일하게Boolean()을 생략하여 코드를 간결하게 유지할 수 있습니다.
apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsx#L141-L142:!activeTimer || isActiveTodo로 변경합니다.apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer.tsx#L95-L95: 동일하게!activeTimer || isActiveTodo로 변경합니다.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/timo-web/app/`[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsx around lines 141 - 142, Remove the unnecessary Boolean() cast from isPlayHighlighted, using !activeTimer || isActiveTodo in HomeTodoContainer.tsx (lines 141-142) and TodayTodoListContainer.tsx (line 95). Preserve the existing short-circuit behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In
`@apps/timo-web/app/`[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsx:
- Around line 141-142: Remove the unnecessary Boolean() cast from
isPlayHighlighted, using !activeTimer || isActiveTodo in HomeTodoContainer.tsx
(lines 141-142) and TodayTodoListContainer.tsx (line 95). Preserve the existing
short-circuit behavior.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 226476c9-39a0-4b30-b9d9-e8792c0ec25d
📒 Files selected for processing (9)
apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsxapps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsxapps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoCardContainer.tsxapps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer.tsxapps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsxapps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsxapps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsxapps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsxpackages/timo-design-system/src/components/button/play-button/PlayButton.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
ISSUE 🔗
close #208
What is this PR? 🔍
홈/오늘 탭 목록과 투두 수정 모달의 재생 버튼이 재생 중이든 일시정지든 상관없이 항상 같은 파란색으로 보여서, 여러 투두 중 지금 활성 타이머를 가진 게 어떤 건지 구분이 안 되던 문제를 수정했습니다.
배경
PlayButton은timerStatus === "RUNNING"일 때만 아이콘 모양(재생 → 정지)을 바꿨고, 색상은 완료 여부(disabled)로만 결정됐습니다.variant("play"/"stop") 두 값 모두 동일한 파란 배경 클래스를 썼습니다.PAUSED)된 투두와 아예 시작하지 않은(STOPPED) 투두가 똑같은 파란 재생 버튼으로 보여서, 재생 중이던 타이머를 일시정지하면 그 투두가 다른 투두들과 구분되지 않았습니다.PAUSED상태만 아이콘 색으로 구분하는 방향을 검토했지만, 실제로 필요한 신호는 "재생 중이냐"가 아니라 "지금 활성 타이머를 가진 투두가 이 투두냐"라는 걸 확인했습니다.PlayButton에 색상 전용activeprop을 추가하고, "활성 타이머(재생/일시정지 모두 포함)가 아예 없으면 전부 파랑, 있으면 그 투두만 파랑·나머지는 회색"이라는 규칙을 홈/오늘 탭 목록과 투두 수정 모달 세 곳에 동일하게 적용했습니다.재생 버튼 활성 상태 구분
PlayButton에disabled와 별개인activeprop을 추가하고, 홈/오늘 탭 목록·투두 수정 모달에서 "이 투두가 지금 활성 타이머를 가지고 있는가"를 계산해 전달하도록 했습니다.RUNNING/PAUSED를 모두 포함하는 개념이라, 일시정지해도 그 투두는 여전히 "활성" 상태로 남아있어야 나머지 투두와 시각적으로 구분됩니다. 기존에는 이 구분이 아예 없었습니다.isPlayHighlighted = !activeTimer || activeTimer.todoId === todo.todoId한 줄로 계산합니다.PlayButton은disabled(완료돼서 클릭 자체가 막히는 경우, 회색 + 클릭 불가)와active(다른 투두가 활성이라 시각적으로만 낮추는 경우, 회색이지만 클릭은 계속 가능)를 서로 다른 조건으로 분리해 처리합니다. 아이콘도isPlayHighlighted가 false면 기존에 있던 회색PlayDisabledIcon을 그대로 재사용해 배경색과 맞췄습니다. 투두 수정 모달은 홈/오늘 목록과 달리 자기 자신의todo.timerStatus만 알고 있어서,DetailTodoModalContainer에서useActiveTimer()를 직접 호출해 전역 활성 타이머와 비교하도록 했습니다.To Reviewers
PlayButton의activeprop 기본값을true로 둬서 기존 호출부(포커스 페이지 등, 이번에 안 건드린 곳)는 동작 변화가 없도록 했는데, 이 부분 확인 부탁드립니다."활성 타이머 유무"만으로 나머지 투두를 전부 회색 처리하는 방식이 목록이 길어졌을 때도 UX상 괜찮을지도 봐주시면 좋겠습니다.
Screenshot 📷
HomeTodoCard/TodayTodoCard/DetailTodoTaskFieldsTest Checklist ✔
pnpm check-types통과pnpm lint통과Summary by CodeRabbit