[FEAT] DeleteButton 컴포넌트 추가 - #80
Conversation
- TrashOnIcon과 "삭제하기" 텍스트로 구성된 삭제 버튼 컴포넌트를 추가했습니다 - 기본은 흰 배경, active(누르는 동안)에는 파란 배경/흰 아이콘·텍스트로 전환됩니다 - Figma 스펙(80x33)에 맞춰 고정 크기로 구현했습니다
- w-[340px], h-[200px] 등 임의값 클래스를 w-80, h-50 등 Tailwind 스케일 값으로 변경했습니다
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 13 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
WalkthroughDeleteButton 컴포넌트와 Storybook 스토리가 추가되고, ChangesDeleteButton 컴포넌트 구현
Scrollbar 스토리 클래스 조정
Estimated code review effort: 2 (Simple) | ~10분 Sequence Diagram(s)sequenceDiagram
participant Consumer
participant DeleteButton
participant TrashOnIcon
Consumer->>DeleteButton: onClick prop 전달
DeleteButton->>TrashOnIcon: 아이콘 렌더링
Consumer->>DeleteButton: 클릭 이벤트 발생
DeleteButton-->>Consumer: onClick 실행
Suggested reviewers: 공식 문서: Storybook Args/CSF, React 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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 |
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: 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/button/delete-button/DeleteButton.tsx`:
- Around line 4-6: DeleteButtonProps currently only exposes onClick, but the
requested API also needs disabled for proper button state control. Update
DeleteButtonProps in DeleteButton to include a disabled prop, and make sure the
DeleteButton component forwards it to the underlying button element and handles
the disabled styling/accessibility consistently. Use DeleteButtonProps and
DeleteButton as the symbols to locate and update the prop contract.
🪄 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: 5819e34e-b7a9-414d-bf91-09dfc0df7c0d
📒 Files selected for processing (4)
packages/timo-design-system/src/components/button/delete-button/DeleteButton.stories.tsxpackages/timo-design-system/src/components/button/delete-button/DeleteButton.tsxpackages/timo-design-system/src/components/index.tspackages/timo-design-system/src/components/layout/scrollbar/Scrollbar.stories.tsx
kimminna
left a comment
kimminna
left a comment
There was a problem hiding this comment.
미리 승인하겠습니다-!! 간단한 경로 수정만 확인해 주세염
…n/DeleteButton.stories.tsx Co-authored-by: 김민아 <kmina121777@naver.com>
- ./DeleteButton 상대경로를 @components/button/delete-button/DeleteButton alias로 변경했습니다
…button # Conflicts: # packages/timo-design-system/src/components/index.ts
yumin-kim2
left a comment
yumin-kim2
left a comment
There was a problem hiding this comment.
피그마와 브라우저 렌더링 오차 원인을 짚어서 고정 크기로 해결하신 판단이 좋았습니당👍
그리고 정민님 코드를 통해 [&_path]:fill-white로 SVG 내부까지 직접 스타일링할 수 있다는 걸 알게되었네요.! 수고하셨습니다아~~
3 participants
ISSUE 🔗
close #77
What is this PR? 🔍
트래시 아이콘과 "삭제하기" 텍스트로 구성된
DeleteButton컴포넌트를 디자인 시스템에 추가했습니다.배경
W Hug 80px, H Hug 33px, 패딩 6px, 아이콘-텍스트 gap 2px, 폰트headline-r-14)을 그대로 구현했을 때, hug(w-fit) 방식으로는 브라우저에서 실제 렌더링된 너비가 78.72px로 나와 Figma가 보여주는 80px과 차이가 났습니다.DeleteButton 컴포넌트
onClick만 받는 단순한 컴포넌트로 구현했습니다. 기본 상태는 흰 배경 + 검은 아이콘/텍스트,:active(누르고 있는 동안)에는 파란 배경(timo-blue-300) + 흰 아이콘/텍스트로 전환됩니다.:active의사 클래스로 처리하는 게 더 단순합니다.h-8.25 w-20(33×80px)로 고정하고, 내부는flex items-center gap-0.5 p-1.5로 아이콘·텍스트를 배치합니다.TrashOnIcon은 SVG 내부fill이currentColor가 아니라#3F3F3F로 고정돼 있어서, 텍스트 색상 클래스만으로는:active시 흰색으로 바뀌지 않습니다. 그래서active:[&_path]:fill-white임의 선택자로 버튼이 active 상태일 때 아이콘 내부path의 fill을 직접 덮어썼습니다.fill="currentColor"로 통일하는 방향을 별도로 검토할 필요가 있습니다.To Reviewers
active:[&_path]:fill-white처럼 SVG 내부 요소를 Tailwind 임의 선택자로 직접 건드리는 방식이 이 정도 스코프에서 적절한지 봐주세요. 아이콘을 currentColor 기반으로 통일하는 큰 리팩터링은 이번 PR 범위 밖입니다.같은 브랜치 작업 중 발견한
Scrollbar.stories.tsx의 임의값 클래스(w-[340px]등)를 Tailwind 스케일 값으로 바꾸는 커밋(1d8bbbe)도 함께 포함되어 있는데, DeleteButton과는 무관한 별도 스타일 정리라 커밋을 분리해뒀습니다.Screenshot 📷
2026-07-02.4.54.09.mov
Test Checklist ✔
pnpm --filter @repo/timo-design-system check-types통과pnpm --filter @repo/timo-design-system lint통과pnpm --filter @repo/timo-design-system build:storybook실행 → 정적 빌드 성공 확인:active상태(파란 배경 전환) 실제 확인 — 미실행: 로컬 브라우저 자동화 도구 없음pnpm build— 미실행: CI에서 확인 예정