[FEAT] DeleteButton 컴포넌트 추가#80
Open
jjangminii wants to merge 2 commits into
Open
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.
|
WalkthroughTrashOnIcon을 사용하는 DeleteButton 컴포넌트와 DeleteButtonProps 인터페이스가 추가되고, Storybook 스토리와 components/index.ts export가 함께 구성되었습니다. 별도로 Scrollbar 스토리의 크기 클래스가 arbitrary 값에서 Tailwind 스케일 클래스로 변경되었습니다. ChangesDeleteButton 컴포넌트 구현
Scrollbar 스토리 클래스 조정
Estimated code review effort: 2 (Simple) | ~10분 Sequence Diagram(s)sequenceDiagram
participant Consumer
participant DeleteButton
participant TrashOnIcon
Consumer->>DeleteButton: onClick 콜백 전달
DeleteButton->>TrashOnIcon: 아이콘 렌더링
Consumer->>DeleteButton: 클릭 이벤트 발생
DeleteButton-->>Consumer: onClick 실행
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: 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
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
1 participant
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 #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에서 확인 예정