[FEAT] Add task 버튼 클릭 시 투두 20개 제한 토스트 추가#197
Conversation
- 해당 날짜 투두 총 개수가 20개 이상이면 Add task 클릭 시 모달을 열지 않고 안내 토스트를 노출했습니다 - Today/Home 화면의 Add task 버튼에 동일 로직을 적용했습니다 - 안내 토스트 문구를 완료 여부와 무관한 전체 개수 기준으로 수정했습니다
- 클릭이 동작하지 않는 생성 모달 체크박스에서 cursor-pointer를 제거했습니다
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughHome과 Today 화면에서 투두 총 개수를 생성 모달에 전달합니다. 총 개수가 20개 이상이면 생성 모달 대신 제한 토스트를 표시하며, 관련 안내 문구와 생성 폼 체크박스 표시를 수정합니다. Changes투두 생성 제한
Estimated code review effort: 2 (Simple) | ~10 minutes Sequence Diagram(s)sequenceDiagram
participant 사용자
participant HomeTodayHeader
participant CreateTodoModalContainer
participant AnimatedToast
사용자->>HomeTodayHeader: Add task 클릭
HomeTodayHeader->>CreateTodoModalContainer: totalCount와 defaultDate 전달
alt totalCount >= 20
CreateTodoModalContainer->>AnimatedToast: 제한 토스트 표시
else totalCount < 20
CreateTodoModalContainer-->>사용자: 생성 모달 표시
end
Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed: dependency version conflict. Check your lock file or package.json. 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 |
Timo Performance ReportBundle Size — timo-web
Lighthouse — timo-web
Image Optimization — timo-web
측정 커밋: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeDayHeaderContainer.tsx (1)
33-33: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win시맨틱 태그(header) 활용
두 파일 모두 컴포넌트의 역할이 헤더(
*HeaderContainer)임에도<div className="...">를 최상위 요소로 사용하고 있어요! 😉
접근성(A11y) 가이드라인에 따라 화면 구조를 더 명확히 전달하기 위해<header>태그로 변경하는 것을 추천합니다. 스크린 리더 등 보조 기기가 헤더 영역을 쉽게 식별할 수 있게 되어 접근성이 크게 향상됩니다. (참고: MDN 문서 - header 태그)
apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeDayHeaderContainer.tsx#L33-L33:<div className="flex flex-col gap-3 pb-2">를<header className="flex flex-col gap-3 pb-2">로 수정해 주세요. (닫는 태그 포함)apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayDateHeaderContainer.tsx#L33-L33: 동일하게<div className="flex flex-col gap-3 pb-2">를<header className="flex flex-col gap-3 pb-2">로 수정해 주세요. (닫는 태그 포함)As per path instructions,
div남발 금지 → main, article, section, nav, header, footer 등 시맨틱 태그 사용 원칙을 준수해 주세요.🤖 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/todo-card/HomeDayHeaderContainer.tsx at line 33, Replace the root div with a semantic header element in HomeDayHeaderContainer.tsx at lines 33-33, preserving the existing className and updating its closing tag. Apply the same change in TodayDateHeaderContainer.tsx at lines 33-33, with no other structural changes.Source: Path instructions
🤖 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.
Outside diff comments:
In
`@apps/timo-web/app/`[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeDayHeaderContainer.tsx:
- Line 33: Replace the root div with a semantic header element in
HomeDayHeaderContainer.tsx at lines 33-33, preserving the existing className and
updating its closing tag. Apply the same change in TodayDateHeaderContainer.tsx
at lines 33-33, with no other structural changes.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: a4b8af1f-aa28-4a8f-9ad7-402b0f6db279
📒 Files selected for processing (6)
apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeDayHeaderContainer.tsxapps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayDateHeaderContainer.tsxapps/timo-web/components/todo-modal/create/CreateTodoModalContainer.tsxapps/timo-web/components/todo-modal/create/CreateTodoTaskFields.tsxapps/timo-web/messages/en.jsonapps/timo-web/messages/ko.json
jjangminii
left a comment
jjangminii
left a comment
There was a problem hiding this comment.
확인했습니다~ 확실히 유저에게 피드백해주는 방향이 더 좋을 것 같네요 👍 👍
| import { CreateTodoModalContent } from "@/components/todo-modal/create/CreateTodoModalContent"; | ||
| import { useCreateTodoSubmit } from "@/hooks/todo-modal/use-create-todo-submit"; | ||
|
|
||
| const MAX_TODO_COUNT = 20; |
2 participants
ISSUE 🔗
close #196
What is this PR? 🔍
Add task 버튼을 클릭했을 때 해당 날짜의 투두 개수 제한을 검사해, 제한을 넘으면 생성 모달 대신 안내 토스트를 띄우도록 했습니다. 아울러 생성 모달의 체크박스가 실제로는 클릭 동작을 하지 않는데도 pointer 커서로 표시되던 부분을 함께 수정했습니다.
배경
Add task 투두 개수 제한
CreateTodoModalContainer에totalCountprop을 추가하고, 20개 이상이면 모달을 열지 않고 토스트를 띄우도록 했습니다.handleAddClick에서totalCount >= MAX_TODO_COUNT(20)이면overlay.open을 호출하지 않고isTodoLimitToastOpen을 true로 설정해 토스트만 노출합니다.totalCount는HomeDayHeaderContainer,TodayDateHeaderContainer가 이미DateInformation에 전달하던 값(해당 날짜의 완료+미완료 전체 투두 개수)을 그대로 재사용해, 별도 API 호출 없이 즉시 판단할 수 있습니다. 처음에는 "미완료 투두 20개"만 세는 방식으로 구현했으나, 완료된 투두까지 합쳐서 20개일 때도 제한이 걸려야 한다는 피드백을 받아 완료 여부와 무관한 전체 개수 기준으로 변경했습니다. 이에 맞춰Toast.todoLimitLine1/2안내 문구도 "미완료 투두"에서 "하루 최대 20개"로 수정했습니다.totalCount값으로만 판단합니다. 여러 탭에서 동시에 추가하는 등 클라이언트 상태가 최신이 아닌 극단적인 동시성 케이스는 이번 PR 범위 밖입니다.생성 모달 체크박스 커서
CreateTodoTaskFields의 타이틀/서브태스크 체크박스에cursor-default를 추가했습니다.onChange={() => {}}로 실제 클릭 동작이 없는 장식용인데도 디자인 시스템Checkbox컴포넌트가 기본으로cursor-pointer를 적용하고 있어, 클릭 가능한 것처럼 보이는 문제가 있었습니다.Checkbox는className을cn()으로 마지막에 병합하므로,className="cursor-default"를 넘기면tailwind-merge가 기본cursor-pointer를 덮어씁니다. 실제로 토글이 동작하는 상세/편집 모달(DetailTodoTaskFields)의 체크박스는 그대로 두었습니다.To Reviewers
totalCount판단 기준을 완료 여부와 무관한 전체 개수로 정한 것이 맞는지 확인 부탁드립니다. 서버가 아닌 클라이언트에 이미 로드된 값으로만 판단하는 구조라, 페이지 진입 이후 다른 경로로 투두가 추가/삭제된 경우 짧은 시간 오차가 있을 수 있습니다.Screenshot 📷
Test Checklist ✔
pnpm check-types통과pnpm lint통과pnpm build통과