[FEAT] AddTaskButton 컴포넌트 구현#72
Merged
Merged
Conversation
- 할 일 추가 버튼(default/weekly/big variant) 컴포넌트와 스토리를 추가했습니다 - index.ts에 AddTaskButton export를 추가했습니다 - plus 아이콘 소스가 추가되어 더 이상 필요 없는 icons/.gitkeep을 삭제했습니다
- 클릭 가능함을 시각적으로 나타내기 위해 button 요소에 cursor: pointer 스타일을 추가했습니다
- 가독성을 위해 빈 줄을 추가했습니다
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
Walkthrough디자인 시스템에 ChangesAddTaskButton 기능 추가
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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.
Actionable comments posted: 5
🤖 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.
Inline comments:
In `@apps/timo-web/app/globals.css`:
- Around line 5-9: The global `button` cursor rule in `globals.css` applies
`cursor: pointer` to disabled buttons as well, which can mislead users. Update
the `@layer base` button styling so the `button` selector still uses pointer for
normal buttons, but add a more specific `button:disabled` rule to override it
with `cursor: not-allowed` or `default`, keeping the UX consistent.
In
`@packages/timo-design-system/src/components/button/add-task-button/AddTaskButton.tsx`:
- Around line 1-2: The AddTaskButton.tsx imports are using deep relative paths,
which violates the project’s import convention. Update the imports in
AddTaskButton to use the configured absolute path aliases from tsconfig paths
instead of ../../../icons and ../../../lib, and keep the same symbols PlusIcon
and cn referenced from those alias-based modules.
- Line 4: Rename the literal union type alias `AddTaskButtonVariant` to follow
the `Types` suffix convention, and update every reference that reuses it,
including `AddTaskButton.stories.tsx` and `index.ts`. Make sure the exported
symbol name stays consistent across the component file and all imports/exports
so consumers still compile after the rename.
- Line 19: The AddTaskButton component currently hardcodes domain-specific
Korean copy in its default text value, which violates the design-system rule for
generic UI only. Update AddTaskButton so text is required or provided from the
consuming app instead of defaulting inside the component, and keep any
locale-specific copy out of this package. Use the AddTaskButton prop definition
and its default parameter/initialization as the place to adjust.
- Around line 38-47: The text span in AddTaskButton is using a manual truncation
class combination that can be simplified. Update the cn call inside
AddTaskButton to replace the whitespace-nowrap/overflow-hidden/text-ellipsis
trio with Tailwind’s truncate utility for the weekly state, keeping the existing
min-w-0 and flex-1 behavior intact and preserving the non-weekly shrink-0
branch.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 89d05969-1d7d-4230-88f0-3437cdc1a7f2
📒 Files selected for processing (6)
apps/timo-web/app/globals.csspackages/timo-design-system/src/components/button/add-task-button/AddTaskButton.stories.tsxpackages/timo-design-system/src/components/button/add-task-button/AddTaskButton.tsxpackages/timo-design-system/src/components/index.tspackages/timo-design-system/src/components/tag/Tag.tsxpackages/timo-design-system/src/icons/.gitkeep
…to feat/ui/71-add-task-button
- 상대 경로(../../../icons, ./AddTaskButton) import를 @iCons, @lib, @components alias로 변경했습니다
- whitespace-nowrap/overflow-hidden/text-ellipsis 조합을 weekly variant에서 Tailwind truncate 유틸리티로 단순화했습니다
- 디자인 시스템에 도메인 특정 한국어 카피를 두지 않도록 text의 기본값을 제거하고 필수 prop으로 변경했습니다 - 타입을 맞추기 위해 Storybook 스토리 3곳에 text 값을 명시적으로 추가했습니다
- button:disabled에 cursor: not-allowed를 추가해 비활성화된 버튼이 pointer 커서로 표시되지 않도록 수정했습니다
ehye1
approved these changes
Jul 2, 2026
ehye1
left a comment
ehye1
left a comment
Contributor
There was a problem hiding this comment.
굿굿 깔끔하게 잘 작성해주셨네요!!
수고하셨습니당🫰🏻
…to feat/ui/71-add-task-button
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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.
Inline comments:
In `@packages/timo-design-system/src/components/index.ts`:
- Line 6: The public barrel in AddTaskButton is exposing a domain-specific
component from the design system, which breaks the package boundary. Remove
AddTaskButton from the timo-design-system export surface in the index barrel and
move it to an app-specific layer, or refactor it into a truly generic component
with domain text and behavior removed. Keep the design-system exports limited to
reusable UI primitives only, and use the AddTaskButton symbol to locate the
affected re-export.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: e1e1d755-fe45-475d-a1ff-a42bf286c673
📒 Files selected for processing (1)
packages/timo-design-system/src/components/index.ts
jjangminii
approved these changes
Jul 2, 2026
jjangminii
left a comment
jjangminii
left a comment
Contributor
There was a problem hiding this comment.
button 기본 커서를 전역 base 레이어에서 설정해서 매 컴포넌트마다 cursor-pointer를 붙이지 않아도 되니 일관성 있게 관리될 것 같습니다-!
고생하셨습니당~
yumin-kim2
approved these changes
Jul 2, 2026
yumin-kim2
left a comment
yumin-kim2
left a comment
Contributor
There was a problem hiding this comment.
exports 매핑 문제 때문에 디자인 시스템의 globals.css가 실제로는 적용되지 않고 있었다는 걸 발견하신 게 최고십니다....꼼꼼히 확인해보지 않으면 놓치기 쉬운 부분이잖아요👍 수고하셨씁니다~~!
…to feat/ui/71-add-task-button
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)
packages/timo-design-system/src/components/index.ts (1)
1-8: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winexport 경로 스타일이 파일 안에서 섞여 있어요.
1
6번째 줄은 상대 경로(8번째 줄은./...)를 쓰는데, 새로 추가된 7@components/...절대 별칭을 사용합니다. 같은 barrel 파일 안에서 두 스타일이 공존하면 나중에 리팩터링 시 혼란을 줄 수 있으니, 한쪽으로 통일하는 게 좋겠습니다.♻️ 제안: 상대 경로로 통일 (기존 컨벤션 유지)
-export { TodayBadge } from "`@components/badge/today-badge/TodayBadge`"; -export { PlayButton } from "`@components/button/play-button/PlayButton`"; +export { TodayBadge } from "./badge/today-badge/TodayBadge"; +export { PlayButton } from "./button/play-button/PlayButton";경로 일관성 하나만 맞춰도 유지보수성이 확 살아날 거예요, 이건 거의 공짜 리팩터라 안 할 이유가 없죠!
🤖 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 `@packages/timo-design-system/src/components/index.ts` around lines 1 - 8, The exports in components/index.ts mix relative paths and `@components` alias paths, so standardize them to one convention. Update the newly added TodayBadge and PlayButton re-exports to match the existing barrel style used by Checkbox, Color, Typography, Tag, PriorityIcon, and AddTaskButton, keeping the file consistent and easier to maintain.
🤖 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 `@packages/timo-design-system/src/components/index.ts`:
- Around line 1-8: The exports in components/index.ts mix relative paths and
`@components` alias paths, so standardize them to one convention. Update the newly
added TodayBadge and PlayButton re-exports to match the existing barrel style
used by Checkbox, Color, Typography, Tag, PriorityIcon, and AddTaskButton,
keeping the file consistent and easier to maintain.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 8464f012-7f04-487c-bdac-c57cb72278f7
📒 Files selected for processing (1)
packages/timo-design-system/src/components/index.ts
- 모든 export 경로를 상대 경로에서 @components 절대 경로로 통일했습니다
- react-component 제너레이터가 index.ts에 절대 경로 import를 자동 생성하도록 수정했습니다
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
4 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 #71
What is this PR? 🔍
할 일 추가 버튼(AddTaskButton) 컴포넌트를 디자인 시스템에 추가하고, 클릭 가능한 button 요소 전반에 cursor: pointer 스타일을 적용했습니다.
배경
AddTaskButton 컴포넌트
default/weekly/big3가지 variant를 지원하는 AddTaskButton 컴포넌트와 Storybook 스토리를 추가했습니다.ADD_TASK_BUTTON_VARIANT맵으로 variant별 너비/타이포그래피 클래스를 관리하고,weeklyvariant에서는text-ellipsis+flex-1로 좁은 너비에서도 텍스트가 잘리도록 처리했습니다. PlusIcon은 기존 아이콘 생성 파이프라인(source/plus.svg→generated/Plus.tsx)을 통해 추가했습니다.onClick은 옵셔널 prop으로만 노출하고 내부 상태는 갖지 않아, 실제 할 일 추가 로직은 호출 측(app)에서 주입하는 구조로 남겨뒀습니다.전역 button 스타일
apps/timo-web/app/globals.css의@layer base에button { cursor: pointer }, button:disabled { cursor: not-allowed; }규칙을 추가했습니다.src/styles/globals.css는package.json의exports["./styles"]가components.css를 가리키고 있어 실제로는 웹앱 빌드 체인에 연결되지 않는 것을 확인했습니다. 이에 따라 디자인 시스템 쪽 대신apps/timo-web/app/globals.css에 직접 규칙을 추가했습니다.globals.css(Storybook 전용)는 이번 변경 범위에서 제외했습니다. exports 매핑 자체를 정리하는 작업은 후속 과제로 남겨뒀습니다.Tag 컴포넌트
Tag.tsx에 가독성을 위한 빈 줄을 추가했습니다.isBlue변수 선언과return문 사이에 빈 줄을 추가했습니다.To Reviewers
디자인 시스템 패키지의
globals.css가exports매핑 문제로 실제 웹앱에는 적용되지 않는 구조적 이슈를 발견해, 이번 PR에서는 근본 원인(exports 매핑)을 고치는 대신apps/timo-web쪽에 직접 스타일을 추가하는 방향으로 처리했습니다. 이 판단이 맞는지, 아니면 exports 매핑을 함께 정리하는 것이 나을지 확인 부탁드립니다.Screenshot 📷
Test Checklist ✔
pnpm lint통과 (전체 모노레포)pnpm check-types통과 (전체 모노레포)