Repository navigation
[REFACTOR] 모달·생성하기·시간 추가 버튼을 공용 Button으로 교체 - #317
Conversation
할 일 생성·태그 생성 모달의 CreateButton을 공용 Button(primary fill m)으로 교체했습니다.
Modal.BorderButton은 secondary outline lg, Modal.FillButton은 primary fill lg Button을 사용하도록 교체했습니다.
ModalButton을 직접 사용하던 모달을 공용 Button으로 교체하고, 시간 추가하기 버튼의 비활성 스타일 덮어쓰기와 중복 className을 제거했습니다.
공용 Button으로 교체되어 사용처가 없어진 ModalButton과 CreateButton 컴포넌트, 스토리, export를 제거했습니다.
secondary fill Button에 aria-pressed일 때 흰 배경과 파란 테두리로 바뀌는 선택 스타일과 Pressed 스토리를 추가했습니다.
시간 추가 모달의 프리셋·직접입력 칩을 공용 Button(secondary fill m)으로 교체하고, 직접입력 선택 시 입력창에 바로 포커스되며 선택 상태를 파란 테두리로 유지하도록 했습니다.
테두리가 항상 파란색이 되면서 사라진 포커스 표시를 Button과 같은 포커스 링으로 보완했습니다.
ehye1
added
⏰ Timo-web
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info
Walkthrough모달·타이머·생성·온보딩 화면의 버튼을 공용 Changes공용 Button 전환
Priority: ➖ Normal Estimated code review effort: 3 (Moderate) | ~20 minutes Change: Refactor Merge Risk | ⚪ Minimal · up to
|
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Out of Scope Changes check |  |
#316의 범위는 모달, 생성 버튼, 시간 추가 버튼의 공용 Button 전환입니다. OnboardingButton의 이전·다음·시작 버튼 교체는 #316에 연결된 요구사항이나 관련 코딩 목표로 확인되지 않습니다. 커밋 요약에 포함된 .claude/launch.json 삭제도 로컬 개발 환경 파일 정리로, #316의 기능 구현과 연결되지 않습니다… |
OnboardingButton 변경과 .claude/launch.json 삭제를 이 PR에서 제거하세요. 해당 변경이 필요하면 별도의 이슈에 연결한 PR로 분리하세요. |
✅ Passed checks (4 passed)
-
Check name Status Explanation Description check 설명은 공용 Button 적용, 기존 버튼 컴포넌트 제거, 스타일 변경, 접근성 처리 및 테스트 결과를 구체적으로 설명합니다. 변경 사항과 직접 관련되어 있습니다. Title check 제목은 모달, 생성하기, 시간 추가 버튼을 공용 Button으로 교체한 핵심 변경을 간결하게 설명합니다. Linked Issues check 직접 연결된 활성 이슈는 #316입니다. 생성 버튼은primary fill m으로 교체되었습니다. 모달 버튼은secondary outline lg와primary fill lg를 사용합니다. 탈퇴, 캘린더 연결 해제, 타이머 종료, 시간 추가 모달의 직접ModalButton사용을 교체했습니다. 시간 추가 버튼의 별도 비활성 스타일을 제…Docstring Coverage No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…
Full details: Out of Scope Changes check
-
Explanation
#316의범위는 모달, 생성 버튼, 시간 추가 버튼의 공용Button전환입니다.OnboardingButton의 이전·다음·시작 버튼 교체는#316에연결된 요구사항이나 관련 코딩 목표로 확인되지 않습니다. 커밋 요약에 포함된.claude/launch.json삭제도 로컬 개발 환경 파일 정리로,#316의기능 구현과 연결되지 않습니다.
- Fix all pre-merge checks with AI
✨ Finishing Touches
-
🧪 Generate unit tests (beta)
-
- Commit to this branch
- Create a new PR
-
- Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Comment @coderabbitai help to get the list of available commands.
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.
🔇 Additional comments (1)
packages/timo-design-system/src/components/button/button/Button.stories.tsx-148-148 (1)
148-148: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
⚠️ Unverified finding
Verification ran but could not confirm this finding. It is shown for review, not as a verified issue.Pressed 스토리에서 Controls를 활성화해 주세요.
현재 설정은 Controls 패널을 비활성화합니다. 이 스토리는
aria-pressed에 따른 스타일을 보여주므로, 해당 값을 Controls에서 바꿀 수 있도록args와argTypes를 연결해 주세요. Storybook의 공식 Args 문서를 구현 참고 자료로 권장합니다.As per coding guidelines, “Controls 패널에서 props가 조작 가능한가”.
Source: Coding guidelines
ℹ️ Review info
⚙️ Run configuration
- Configuration used: Repository: Team-Timo/Timo-client/.coderabbit.yaml
- Review profile: ASSERTIVE
- Plan: Advanced
- Run ID:
8e22be9a-869e-4342-a184-b44557fb54c5
📒 Files selected for processing (16)
apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsCalendarDisconnectModal.tsxapps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawModalContainer.tsxapps/timo-web/components/tag/CreateTagModalContainer.tsxapps/timo-web/components/timer/TimerCompleteModalPanel.tsxapps/timo-web/components/timer/TimerEndModalPanel.tsxapps/timo-web/components/timer/TimerExtendModalPanel.tsxapps/timo-web/components/timer/TimerStopModalPanel.tsxapps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsxpackages/timo-design-system/src/components/button/button/Button.stories.tsxpackages/timo-design-system/src/components/button/button/Button.tsxpackages/timo-design-system/src/components/button/create-button/CreateButton.stories.tsxpackages/timo-design-system/src/components/button/create-button/CreateButton.tsxpackages/timo-design-system/src/components/button/modal-button/ModalButton.stories.tsxpackages/timo-design-system/src/components/button/modal-button/ModalButton.tsxpackages/timo-design-system/src/components/index.tspackages/timo-design-system/src/components/layout/modal/Modal.tsx
💤 Files with no reviewable changes (5)
- packages/timo-design-system/src/components/index.ts
- packages/timo-design-system/src/components/button/modal-button/ModalButton.stories.tsx
- packages/timo-design-system/src/components/button/create-button/CreateButton.tsx
- packages/timo-design-system/src/components/button/modal-button/ModalButton.tsx
- packages/timo-design-system/src/components/button/create-button/CreateButton.stories.tsx
Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.
jjangminii
left a comment
jjangminii
left a comment
There was a problem hiding this comment.
확인했습니다~ 공통 컴포넌트로 바꾸니 훨씬 깔끔해졌네요 👍 👍
jjangminii
left a comment
jjangminii
left a comment
There was a problem hiding this comment.
혹시 온보딩도 버튼 공통 컴포넌트로 변경해 줄 수 있을까요? 제가 회의때 추가로 말한다는걸 까먹었어요 😢
온보딩 다음 버튼 비활성 상태에 쓸 #9F9F9F 작은 오른쪽 화살표 아이콘을 추가했습니다.
온보딩 이전(secondary 왼쪽 아이콘), 다음(활성 primary·비활성 secondary 오른쪽 아이콘), 시작하기(primary fill) 버튼을 공용 Button(m)으로 교체했습니다. 활성 조건은 기존과 동일하게 유지했습니다.
개인 개발 환경에서만 쓰는 .claude/launch.json이 커밋에 포함되어 제거했습니다.
|
온보딩 버튼도 공통 컴포넌트로 교체했습니다 ~! |
…ply-common-button # Conflicts: # apps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsx
This branch was successfully deployed
2 participants
ISSUE 🔗
close #316
What is this PR? 🔍
#305에서 만든 공용
Button을 실제 화면에 적용했습니다. 생성하기 버튼, 확인/취소 형태의 모든 모달 버튼, 시간 추가 모달의 프리셋 칩을Button으로 교체하고, 사용처가 없어진ModalButton·CreateButton을 제거했습니다.생성하기 버튼
CreateButton을Button primary fill m으로 교체했습니다.모달 하단 버튼
secondary outline lg, 오른쪽primary fill lg로 통일했습니다.온보딩 버튼
Button m으로 교체했습니다. 다음 버튼은 활성일 때primary, 비활성일 때secondary이고, 비활성용 화살표 아이콘(chevron-small-right-disable.svg)을 추가했습니다. 활성 조건은 기존과 같습니다.시간 추가 모달 칩
Button secondary fill m으로 교체했습니다.aria-pressed로 표현한 이유:aria-pressed가 필요합니다. 이 값 하나로 의미("눌린 토글 버튼")와 모양이 같이 정해집니다.Button의 secondary fill에aria-pressed:스타일(흰 배경 +blue-300테두리)을 추가해, 앞으로 토글 버튼이 생겨도aria-pressed만 넘기면 같은 모양이 됩니다.selectedprop을 추가하는 방법도 검토했습니다. 하지만 secondary fill에만 의미가 있는 prop이 생기고, 접근성 속성과 상태를 이중으로 관리하게 돼서 제외했습니다.aria-pressed를 넘기지 않는 기존 버튼에는 영향이 없습니다.timo-black(#121212)이라 className으로 지정했습니다. 다른 secondary 버튼은 피그마대로gray-900을 유지합니다.gray-500)으로 돌아가, 다른 선택된 칩과 다르게 보였습니다.blue-300으로 두어 선택된 칩과 같은 모양이 되도록 했습니다.Button과 같은 포커스 링(blue-300, 2px, 흰 틈 2px)을 더했습니다.autoFocus는jsx-a11y/no-autofocus에 걸려서, 모듈 레벨 callback ref(focusOnMount)로 마운트 시 한 번만 포커스되게 했습니다.To Reviewers
Screenshot 📷
Test Checklist ✔
pnpm check-types통과pnpm lint통과pnpm build통과