feat: 버튼 스타일 추가#117
Conversation
|
""" Walkthrough버튼 컴포넌트에 새로운 스타일 "Stroke"가 추가되었습니다. 이에 따라 버튼 스타일, 구성, 색상, 뷰 컨트롤러에 관련 코드가 확장되었으며, 활성/비활성 상태 및 다양한 크기에서 Stroke 스타일 버튼이 생성될 수 있도록 구현이 보완되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant BKButtonTestViewController
participant BKButton
participant BKButtonConfiguration
User->>BKButtonTestViewController: 버튼 뷰 로드
BKButtonTestViewController->>BKButton: addButton/addDisabledButton 호출 (style: .stroke)
BKButton->>BKButtonConfiguration: 구성 생성(hasStroke 등)
BKButton->>BKButton: updateColors() 호출
BKButton-->>BKButton: 스타일 및 상태에 따라 테두리/색상 설정
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changes(해당 변경사항 중 범위를 벗어난 코드 변경은 발견되지 않았습니다.) Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/Projects/BKDesign/Sources/Components/Button/BKButton.swift (1)
213-213: 조건문을 더 관용적인 Swift 스타일로 개선하세요.
isDisabled == false대신!isDisabled를 사용하는 것이 더 일반적인 Swift 코딩 스타일입니다.- if style == .stroke && isDisabled == false { + if style == .stroke && !isDisabled {src/Projects/BKDesign/Sources/Components/Button/BKButtonConfiguration.swift (1)
60-60: hasStroke 속성 초기화를 단순화하세요.불필요한 삼항 연산자를 제거하여 코드를 더 간결하게 만들 수 있습니다.
- self.hasStroke = style == .stroke ? true : false + self.hasStroke = style == .stroke
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/Projects/BKDesign/PreviewApp/Sources/View/BKButtonTestViewController.swift(2 hunks)src/Projects/BKDesign/Sources/Components/Button/BKButton.swift(1 hunks)src/Projects/BKDesign/Sources/Components/Button/BKButtonConfiguration.swift(2 hunks)src/Projects/BKDesign/Sources/Components/Button/BKButtonStyle.swift(3 hunks)
🧰 Additional context used
🧠 Learnings (4)
📓 Common learnings
Learnt from: doyeonk429
PR: YAPP-Github/Reed-iOS#68
File: src/Projects/BKDesign/PreviewApp/Sources/View/BKButtonTestViewController.swift:124-133
Timestamp: 2025-07-10T08:21:49.399Z
Learning: doyeonk429는 테스트 전용으로만 사용되는 extension이나 코드는 해당 테스트 파일에 그대로 두는 것을 선호합니다. 실제 프로덕션 코드에서 사용되지 않는 테스트 전용 코드는 별도 파일로 분리하지 않고 테스트 파일 내에 유지하는 것이 그들의 코드 구성 방식입니다.
Learnt from: doyeonk429
PR: YAPP-Github/Reed-iOS#98
File: src/Projects/BKPresentation/Sources/AuthFlow/View/TermsView.swift:78-85
Timestamp: 2025-07-22T05:37:28.756Z
Learning: doyeonk429는 Reed-iOS 프로젝트에서 더미 데이터나 테스트 데이터의 구체적인 내용(예: URL 주소)에 대해서는 리뷰 시 지적하지 않기를 선호한다. 더미 데이터는 임시적이며 실제 기능 구현 시 교체될 예정이므로 URL의 구체적인 주소는 중요하지 않다고 본다.
Learnt from: doyeonk429
PR: YAPP-Github/Reed-iOS#63
File: src/Projects/BKDesign/Sources/Extensions/UIColor+.swift:38-48
Timestamp: 2025-07-08T17:17:40.046Z
Learning: doyeonk429는 BKDesign 프로젝트에서 다크모드 지원 코드를 미래를 위한 사전 준비 코드로 구현하고 있다. 현재 다크모드 디자인이 없어서 모든 다크모드 분기에서 라이트모드 색상을 반환하도록 의도적으로 구현했으며, 나중에 다크모드 디자인이 완성되면 해당 케이스만 구현하면 되는 구조로 설계했다.
Learnt from: doyeonk429
PR: YAPP-Github/Reed-iOS#98
File: src/Projects/BKPresentation/Sources/AuthFlow/View/TermsViewController.swift:3-5
Timestamp: 2025-07-22T05:39:10.746Z
Learning: doyeonk429는 Reed-iOS 프로젝트에서 UI 구현 단계에서 미래의 기능 연결을 위해 필요한 import들을 미리 추가해두는 방식을 선호한다. 현재 사용되지 않더라도 곧 사용될 예정인 라이브러리들은 제거하지 않고 유지하는 것을 원한다.
Learnt from: doyeonk429
PR: YAPP-Github/Reed-iOS#68
File: src/Projects/BKDesign/PreviewApp/Sources/View/BKButtonTestViewController.swift:0-0
Timestamp: 2025-07-10T08:21:44.204Z
Learning: doyeonk429는 BKDesign PreviewApp의 테스트 파일에서 주석 처리된 코드를 의도적으로 남겨두어 쉽게 테스트 구성을 전환할 수 있도록 구현한다. 이는 개발 편의성을 위한 것으로, 테스트 파일에서는 일반적인 "주석 처리된 코드 제거" 규칙을 적용하지 않는다.
Learnt from: doyeonk429
PR: YAPP-Github/Reed-iOS#105
File: src/Projects/BKPresentation/Sources/TabBarFlow/BottomTabBarController.swift:24-30
Timestamp: 2025-07-24T13:00:59.096Z
Learning: doyeonk429는 BottomTabBarController에서 viewDidLayoutSubviews의 레이어 재생성 방식을 유지하기를 선호합니다. 탭바에서는 레이아웃 변경 케이스가 거의 없기 때문에 성능 최적화보다는 현재의 단순한 구현 방식이 더 적합하다고 판단합니다.
src/Projects/BKDesign/Sources/Components/Button/BKButton.swift (1)
Learnt from: doyeonk429
PR: #63
File: src/Projects/BKDesign/Sources/Extensions/UIColor+.swift:50-92
Timestamp: 2025-07-08T17:17:37.703Z
Learning: BKDesign 프로젝트에서 UIColor+ 확장의 시맨틱 컬러 메서드들(.bkContentColor, .bkBorderColor, .bkDividerColor, .bkBaseColor)이 현재 다크 모드에서도 라이트 모드 색상을 반환하는 것은 의도적인 구현입니다. 아직 다크 모드가 구현되지 않았지만, 미래의 다크 모드 지원을 위한 코드 구조로 준비되어 있습니다.
src/Projects/BKDesign/Sources/Components/Button/BKButtonStyle.swift (1)
Learnt from: doyeonk429
PR: #63
File: src/Projects/BKDesign/Sources/Extensions/UIColor+.swift:50-92
Timestamp: 2025-07-08T17:17:37.703Z
Learning: BKDesign 프로젝트에서 UIColor+ 확장의 시맨틱 컬러 메서드들(.bkContentColor, .bkBorderColor, .bkDividerColor, .bkBaseColor)이 현재 다크 모드에서도 라이트 모드 색상을 반환하는 것은 의도적인 구현입니다. 아직 다크 모드가 구현되지 않았지만, 미래의 다크 모드 지원을 위한 코드 구조로 준비되어 있습니다.
src/Projects/BKDesign/PreviewApp/Sources/View/BKButtonTestViewController.swift (3)
Learnt from: doyeonk429
PR: #63
File: src/Projects/BKDesign/Sources/Extensions/UIColor+.swift:50-92
Timestamp: 2025-07-08T17:17:37.703Z
Learning: BKDesign 프로젝트에서 UIColor+ 확장의 시맨틱 컬러 메서드들(.bkContentColor, .bkBorderColor, .bkDividerColor, .bkBaseColor)이 현재 다크 모드에서도 라이트 모드 색상을 반환하는 것은 의도적인 구현입니다. 아직 다크 모드가 구현되지 않았지만, 미래의 다크 모드 지원을 위한 코드 구조로 준비되어 있습니다.
Learnt from: doyeonk429
PR: #68
File: src/Projects/BKDesign/Sources/Components/Button/BKButtonGroup.swift:86-92
Timestamp: 2025-07-10T08:21:16.126Z
Learning: BKButtonGroup의 horizontal 레이아웃에서 stackView.distribution을 .fillProportionally로 설정한 것은 의도된 디자인입니다. doyeonk429는 버튼들이 콘텐츠 길이에 따라 다른 너비를 가지는 것을 선호합니다.
Learnt from: clxxrlove
PR: #80
File: src/Projects/BKDesign/Sources/Components/BottomSheet/BKBottomSheetViewController.swift:148-148
Timestamp: 2025-07-14T05:23:04.937Z
Learning: Reed-iOS 프로젝트의 BKBottomSheetViewController에서 버튼 영역 높이(84)는 디자인 시스템에 기반한 의도적인 고정값입니다. clxxrlove에 따르면 작은 기기에서도 동일한 크기가 유지되어야 하며, 동적 계산보다는 상수화만 필요합니다.
🧬 Code Graph Analysis (2)
src/Projects/BKDesign/Sources/Components/Button/BKButton.swift (1)
src/Projects/BKDesign/Sources/Components/Button/BKButtonStyle.swift (1)
color(123-129)
src/Projects/BKDesign/Sources/Components/Button/BKButtonStyle.swift (1)
src/Projects/BKDesign/Sources/Extensions/UIColor+.swift (3)
bkBaseColor(91-102)bkBackgroundColor(38-50)bkContentColor(52-63)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build
🔇 Additional comments (7)
src/Projects/BKDesign/Sources/Components/Button/BKButton.swift (1)
214-220: 테두리 스타일링 로직이 올바르게 구현되었습니다.stroke 스타일에 대한 테두리 색상과 두께 설정이 적절하며, 다른 스타일에서는 테두리를 제거하는 로직도 정확합니다. 현재 버튼 상태에 따른 색상 처리도 올바릅니다.
src/Projects/BKDesign/Sources/Components/Button/BKButtonStyle.swift (3)
19-20: 새로운 stroke 스타일 케이스가 적절히 추가되었습니다.주석과 함께 명확하게 정의되어 있으며, 기존 스타일들과 일관된 네이밍을 따르고 있습니다.
51-56: stroke 스타일의 배경색 정의가 적절합니다.투명한 배경을 위해
.bkBaseColor(.primary)를 사용하고, 비활성 상태에서는 표준 비활성 배경색을 사용하는 것이 stroke 버튼의 디자인 패턴에 부합합니다.
89-94: stroke 스타일의 전경색 정의가 일관성 있게 구현되었습니다.브랜드 색상을 활용한 텍스트 및 테두리 색상 설정이 tertiary 스타일과 일관되며, 비활성 상태 처리도 적절합니다.
src/Projects/BKDesign/PreviewApp/Sources/View/BKButtonTestViewController.swift (2)
61-62: stroke 스타일 버튼 테스트 케이스가 적절히 추가되었습니다.활성화된 버튼과 비활성화된 버튼 모두 테스트할 수 있도록 구성되어 있어, stroke 스타일의 모든 상태를 검증할 수 있습니다.
77-82: 비활성화된 버튼 테스트를 위한 헬퍼 메서드가 잘 구현되었습니다.기존
addButton메서드와 일관된 패턴을 따르면서, 비활성화 상태 테스트를 위한 명확한 역할을 수행합니다. 테스트 전용 코드를 테스트 파일 내에 유지하는 방식도 적절합니다.src/Projects/BKDesign/Sources/Components/Button/BKButtonConfiguration.swift (1)
66-66: 반환 타입을Self로 변경한 것이 좋은 개선사항입니다.이 변경으로 서브클래싱과 프로토콜 준수에 대한 유연성이 향상되며, API가 더 제네릭하고 재사용 가능해집니다. 모든 modifier 메서드에 일관되게 적용된 점도 우수합니다.
Also applies to: 73-73, 80-80, 87-87, 94-94, 101-101, 108-108
clxxrlove
left a comment
clxxrlove
left a comment
There was a problem hiding this comment.
BKButtonSize에 대해서도 수정이 있어야 할 거 같아요.
수고하셨습니다 !
|
@clxxrlove 버튼 사이즈 수정 어디서 필요할까요? 새로 추가되는 피그마 디자인에는 버튼 사이즈 관련한 변경사항이 안보입니다. |
컴포넌트랑 지금 사이즈가 안 맞아요. 높이만 봤을 때 var height: CGFloat {
switch self {
case .small, .rounded:
40
case .medium:
48
case .large:
52
}
}인데, 실제 사이즈는 52/48/46/44/38이에요. |
|
@clxxrlove 디자인시스템 상으로는 버튼 사이즈가 52/46(변경된거같음)/38(변경된거같음) 이렇게 2개만 있는데요. 이 고정값은 반영하되, 다른 사이즈 대응 가능하게 커스텀 형식 하나 추가하는걸로 변경하겠습니다. 괜찮을까요? |
네넵 |
요거 커스텀 사이즈 대응은 제외하고 구현했습니다. |
2 participants
🔗 관련 이슈
📘 작업 유형
📙 작업 내역
🧪 테스트 내역
🎨 스크린샷 또는 시연 영상 (선택)
✅ PR 체크리스트
💬 추가 설명 or 리뷰 포인트 (선택)
Summary by CodeRabbit
신규 기능
버그 수정
기타