[WEAV-46] Design System - CTA Button 구현 #13
Conversation
* [WEAV-54] background texture image import * [WEAV-54] Texture Background View, Modifier 생성 적용 * [WEAV-54] Device Size 로 설정하도록 변경, aspectRatio 수정
Walkthrough이번 변경 사항은 SwiftUI 및 디자인 시스템의 여러 파일에서 색상 참조 방식을 업데이트하고 새로운 구조를 도입하는 데 중점을 두었습니다. 또한, 새로운 뷰와 버튼 컴포넌트가 추가되었으며, 이미지 자산에 대한 메타데이터 파일이 생성되었습니다. 이러한 변경은 전반적으로 코드의 구조를 개선하고, 디자인 요소의 일관성을 높이며, 사용자 인터페이스의 반응성을 향상시키는 데 기여합니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant DesignSystem
participant KeyboardResponder
User->>App: 요청 UI 표시
App->>DesignSystem: 색상 및 스타일 요청
DesignSystem-->>App: 색상 및 스타일 반환
App->>KeyboardResponder: 키보드 상태 요청
KeyboardResponder-->>App: 키보드 높이 및 상태 반환
App-->>User: UI 업데이트
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
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
CodeRabbit Configuration File (
|
![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
Outside diff range and nitpick comments (3)
Projects/Features/DesignPreview/Sources/DesignButtonView.swift (1)
53-55: 프리뷰에 더 많은 테스트 케이스를 추가하는 것이 좋겠습니다.현재 프리뷰는 기본 상태의
DesignButtonView만 보여주고 있습니다. 버튼의 다양한 상태(비활성화, 로딩 중 등)를 보여주는 추가 테스트 케이스를 프리뷰에 포함하면 좋을 것 같습니다.Projects/DesignSystem/DesignCore/Sources/Device.swift (1)
1-56: 잘 구현되었습니다!이 코드는 디바이스 관련 정보를 중앙 집중식으로 제공하는
Device열거형을 잘 정의하고 있습니다. 코드는 잘 구성되어 있고, 속성에 대해 명확한 명명 규칙을 따르고 있습니다. 또한 주석을 통해 각 속성의 목적을 잘 설명하고 있습니다.개선 사항으로는 다음과 같은 것들이 있습니다:
isMiniSize속성의 경우, 매직 넘버380을 사용하는 대신 상수로 정의하는 것이 좋겠습니다. 이렇게 하면 코드의 가독성과 유지 보수성이 향상됩니다.
isNotch속성의 경우,-1이라는 매직 넘버를 사용하는 대신0과 비교하는 것이 더 명확할 것 같습니다.
topInset과bottomInset속성의 주석에서 전체 높이를 설명하고 있는데, 이를 별도의 계산 속성으로 제공하는 것도 고려해 볼 만합니다.전반적으로 잘 구현된 코드이며, 위의 제안 사항은 코드의 품질을 더욱 높이기 위한 작은 개선 사항일 뿐입니다. 좋은 작업이었습니다!
Projects/DesignSystem/DesignCore/Sources/CTAButton/CTABottomButton.swift (1)
41-61: 접근성을 고려하여 accessibility label을 추가하는 것이 좋겠습니다.현재 버튼에는 명시적인 accessibility modifier나 label이 없습니다. 버튼의 텍스트가 어느 정도 맥락을 제공하지만, VoiceOver 등의 보조 기술을 사용하는 사용자를 위해 명확한 accessibility label을 추가하는 것이 좋습니다.
아래와 같이 accessibilityLabel 수정자를 추가해 보시는 것은 어떨까요?
Button(action: { handler() }, label: { // ... }) .accessibilityLabel(Text("CTA 버튼: \(title)"))
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (2)
Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/background_default.imageset/[email protected]is excluded by!**/*.pngProjects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/background_default.imageset/[email protected]is excluded by!**/*.png
Files selected for processing (16)
- Projects/App/Sources/ContentView.swift (1 hunks)
- Projects/App/Sources/ThreeDaysApp.swift (1 hunks)
- Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Contents.json (1 hunks)
- Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/background_default.imageset/Contents.json (1 hunks)
- Projects/DesignSystem/DesignCore/Sources/BackgroundTextureView.swift (1 hunks)
- Projects/DesignSystem/DesignCore/Sources/CTAButton/CTABottomButton.swift (1 hunks)
- Projects/DesignSystem/DesignCore/Sources/CTAButton/CTAButton.swift (1 hunks)
- Projects/DesignSystem/DesignCore/Sources/CornerRadius+Ext.swift (1 hunks)
- Projects/DesignSystem/DesignCore/Sources/Device.swift (1 hunks)
- Projects/DesignSystem/DesignCore/Sources/KeyboardResponder.swift (1 hunks)
- Projects/DesignSystem/DesignCore/Sources/LinearGradient+Ext.swift (1 hunks)
- Projects/Features/DesignPreview/Sources/DesignBackgroundTextureView.swift (1 hunks)
- Projects/Features/DesignPreview/Sources/DesignButtonView.swift (1 hunks)
- Projects/Features/DesignPreview/Sources/DesignColorPreview.swift (1 hunks)
- Projects/Features/DesignPreview/Sources/DesignPreview.swift (2 hunks)
- Projects/Features/DesignPreview/Sources/DesignTypographyPreview.swift (2 hunks)
Files skipped from review due to trivial changes (1)
- Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Contents.json
Additional context used
SwiftLint
Projects/DesignSystem/DesignCore/Sources/BackgroundTextureView.swift
[Warning] 26-26: Prefer
privateoverfileprivatedeclarations(private_over_fileprivate)
Projects/DesignSystem/DesignCore/Sources/CTAButton/CTABottomButton.swift
[Error] 35-35: Force casts should be avoided
(force_cast)
Projects/DesignSystem/DesignCore/Sources/CTAButton/CTAButton.swift
[Error] 32-32: Force casts should be avoided
(force_cast)
Projects/DesignSystem/DesignCore/Sources/CornerRadius+Ext.swift
[Warning] 17-17: Prefer
privateoverfileprivatedeclarations(private_over_fileprivate)
Additional comments not posted (28)
Projects/DesignSystem/DesignCore/Sources/LinearGradient+Ext.swift (1)
13-13: 좋아 보입니다!
DesignCore.Colors네임스페이스를 명시적으로 사용하여 색상 상수를 참조하는 것이 코드의 명확성과 유지보수성을 향상시킵니다. 이 변경 사항은 그라디언트 정의에 사용되는 색상의 출처를 명확히 합니다.Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/background_default.imageset/Contents.json (1)
1-22: 이미지 에셋 구성이 올바릅니다!JSON 파일의 구조가 Xcode 이미지 에셋의 표준 형식을 따르고 있습니다. 각 디바이스 해상도(1x, 2x, 3x)에 맞는 이미지 변형이 정의되어 있어, 다양한 디바이스에서 최적의 렌더링이 가능할 것으로 보입니다.
Projects/Features/DesignPreview/Sources/DesignBackgroundTextureView.swift (1)
12-21: 잘 구현되었습니다!
DesignBackgroundTextureView구조체는 SwiftUI의View프로토콜을 잘 준수하고 있으며,body프로퍼티에서ZStack과Text뷰를 사용하여 배경 텍스처와 텍스트를 올바르게 표시하고 있습니다. 또한textureBackground()수정자를 적용하여 배경 텍스처를 설정하고,navigationTitle수정자를 사용하여 뷰의 제목을 설정하고 있습니다.
#Preview프로퍼티 래퍼를 사용하여 미리보기도 잘 구현되어 있습니다.전반적으로 코드의 로직과 구문에는 문제가 없어 보입니다. 잘 작성된 코드라고 생각합니다!
Projects/App/Sources/ContentView.swift (1)
21-21: 좋아 보입니다!
DesignCore.red300에서DesignCore.Colors.red300으로의 변경은 색상 관리 시스템의 명확성과 가독성을 향상시킵니다. 이 변경은 코드의 유지 보수성을 높이고 색상 참조를 더 명시적으로 만듭니다.Projects/DesignSystem/DesignCore/Sources/CornerRadius+Ext.swift (2)
11-15: 좋아 보입니다!
View프로토콜에cornerRadius메서드를 추가하는 것은 좋은 생각입니다. 이 메서드는 뷰에 지정된 반경과 코너 마스크로 둥근 모서리를 적용할 수 있게 해줍니다.clipShape수정자를 사용하여RoundedCorner모양을 뷰에 적용하는 구현이 올바릅니다.
17-26: 좋은 구현입니다!
RoundedCorner구조체는 둥근 모서리를 가진 모양을 나타냅니다.radius와corners속성을 사용하여 모양을 커스터마이징할 수 있습니다.path(in:)메서드는UIBezierPath를 사용하여 둥근 모서리가 있는 경로를 올바르게 생성합니다.Tools
SwiftLint
[Warning] 17-17: Prefer
privateoverfileprivatedeclarations(private_over_fileprivate)
Projects/App/Sources/ThreeDaysApp.swift (1)
46-46: 좋아 보입니다!
DesignCore구조 내에서 색상 참조 방식을 변경하는 것은 코드의 명확성과 유지 보수성을 향상시킵니다. 이 변경은 애플리케이션에서 사용되는 색상 정의를 보다 체계적으로 정리하는 것으로 보입니다.Projects/DesignSystem/DesignCore/Sources/BackgroundTextureView.swift (1)
11-24: 잘 구현되었습니다!
BackgroundTextureView구조체는 배경 텍스처 이미지를 올바르게 표시하고 있습니다. 이미지는 장치의 크기에 맞게 조정되고 안전 영역을 무시하여 전체 화면을 채웁니다.Projects/Features/DesignPreview/Sources/DesignPreview.swift (3)
14-15: 좋아 보입니다!
PreviewTypesenum에textureBackground와ctaButton케이스를 추가하는 것은 디자인 시스템의 기능을 확장하는 좋은 방법입니다. 케이스 이름도 기존 컨벤션을 따르고 있어 일관성이 있네요.
21-22: 잘 되었습니다!
name연산 프로퍼티가 새로운 케이스에 대한 문자열 표현을 반환하도록 업데이트 되었네요. 반환되는 문자열 값이 enum 케이스 이름과 일치하고 설명이 잘 되어 있습니다.
33-36:DesignBackgroundTextureView와DesignButtonView타입이 정의되어 있는지 확인이 필요합니다.
previewView연산 프로퍼티가 새로운 케이스에 대해 적절한 뷰 타입을 반환하도록 수정된 것은 좋습니다. 하지만 반환되는DesignBackgroundTextureView와DesignButtonView타입이 제공된 코드 컨텍스트에서 정의되어 있지 않네요. 해당 타입들이 올바르게 정의되어 있는지 확인해 주세요. 그렇지 않으면 코드가 컴파일되지 않을 거에요.해당 타입들의 존재를 확인하기 위해 다음 스크립트를 실행해 보세요:
Verification successful
DesignBackgroundTextureView와DesignButtonView타입이 올바르게 정의되어 있습니다.검색 결과를 통해 두 타입 모두 Projects/Features/DesignPreview/Sources/ 디렉토리 내의 개별 파일에서 View 프로토콜을 준수하는 구조체로 정의되어 있음을 확인했습니다. 이는 코드가 올바르게 구성되어 있으며 컴파일 문제가 없을 것임을 나타냅니다.
- DesignBackgroundTextureView.swift에 DesignBackgroundTextureView 구조체가 정의되어 있습니다.
- DesignButtonView.swift에 DesignButtonView 구조체가 정의되어 있습니다.
두 타입 모두 올바르게 정의되어 있으므로 이전 리뷰 코멘트에서 제기된 우려사항은 해결되었습니다.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: 파일에서 `DesignBackgroundTextureView`와 `DesignButtonView` 타입 정의를 검색합니다. # Test: 프로젝트에서 해당 타입 정의를 검색합니다. Expect: 각 타입에 대한 정의가 발견되어야 합니다. rg --type swift $'DesignBackgroundTextureView|DesignButtonView'Length of output: 865
Projects/DesignSystem/DesignCore/Sources/KeyboardResponder.swift (3)
1-38: 전반적으로 잘 구현된 KeyboardResponder 클래스입니다.KeyboardResponder 클래스는 키보드 높이와 키보드 표시 여부를 관찰하는 역할을 명확히 수행하고 있습니다. Combine 프레임워크를 활용하여 효율적으로 키보드 알림을 처리하고, Published 프로퍼티를 통해 다른 뷰에서 쉽게 접근할 수 있도록 구현되었습니다.
12-16: 클래스 선언부와 프로퍼티 선언이 적절합니다.ObservableObject 프로토콜을 채택하여 Published 프로퍼티의 변경 사항을 자동으로 알리도록 하였고, cancellables 프로퍼티를 사용하여 Combine 구독을 저장하고 관리하는 것은 좋은 방법입니다.
18-37: init() 메서드의 구현이 적절합니다.키보드 알림을 구독하고 처리하는 로직이 init() 메서드에 잘 구현되어 있습니다. merge 연산자를 사용하여 효율적으로 알림을 병합하고, sink 연산자 내부에서 weak self를 사용하여 순환 참조를 방지하였습니다. 또한, 구독을 cancellables에 저장하여 적절한 메모리 관리를 수행하고 있습니다.
Projects/Features/DesignPreview/Sources/DesignButtonView.swift (1)
12-51: 코드가 깔끔하고 잘 구성되어 있습니다!
DesignButtonView는DesignCore패키지의 다양한 버튼 스타일을 잘 보여주고 있습니다.@FocusState와@State를 사용하여 텍스트 필드의 상태를 적절히 관리하고 있으며,CTABottomButton이 탭될 때 텍스트 필드의 포커스 상태를 올바르게 토글합니다. 또한NavigationView로 적절히 래핑되어 있고, 제목과 표시 모드가 적절히 설정되어 있습니다.Projects/DesignSystem/DesignCore/Sources/CTAButton/CTAButton.swift (2)
18-28: 초기화 코드가 잘 작성되었습니다!초기화 매개변수에 기본값을 제공하여 사용 편의성을 높였습니다. 또한 매개변수 값을 해당 속성에 올바르게 할당하고 있습니다.
37-54:body계산 속성이 잘 구현되었습니다!버튼의 뷰 계층 구조가 잘 정의되어 있고 가독성이 좋습니다. 제공된 속성에 따라 버튼의 모양을 사용자 정의하고
isActive상태에 따라 버튼을 올바르게 비활성화합니다.Projects/Features/DesignPreview/Sources/DesignColorPreview.swift (3)
15-20: LGTM!
DesignCore.Colors네임스페이스를 사용하여 색상 상수를 참조하도록blackColors배열이 올바르게 업데이트되었습니다. 변경 사항이 새로운 색상 구성과 잘 맞습니다.
24-25: LGTM!
tintColors배열도DesignCore.Colors네임스페이스를 사용하도록 잘 업데이트되었네요. 색상 상수 구성의 전반적인 리팩토링과 잘 맞습니다.
29-35: LGTM!
pastelColors배열에서도DesignCore.Colors네임스페이스를 통해 색상 상수를 참조하도록 일관되게 변경되었습니다. 새로운 색상 구성 방식과 잘 어울리는 것 같아요.Projects/DesignSystem/DesignCore/Sources/CTAButton/CTABottomButton.swift (2)
11-31: 구조체 선언과 프로퍼티가 잘 정의되어 있습니다!CTABottomButton 구조체는 SwiftUI의 View 프로토콜을 준수하며, 제네릭 타입 파라미터 BackgroundStyle을 사용하여 배경 스타일을 커스터마이징할 수 있도록 설계되었습니다. 또한 버튼의 주요 속성들을 프로퍼티로 선언하고, 이를 초기화하는 이니셜라이저를 제공하여 사용성을 높였습니다.
40-64: 버튼의 구현이 잘 이루어졌습니다!body 프로퍼티에서 Button을 구성하는 방식이 SwiftUI의 뷰 조합을 잘 활용하고 있습니다. ZStack과 VStack을 사용하여 뷰를 층층이 쌓고, buttonBackgroundColor, title 등의 프로퍼티를 통해 버튼의 모양을 커스터마이징했습니다.
특히 keyboardShown 프로퍼티에 따라 하단 Rectangle의 높이를 조정하는 부분이 인상적입니다. 이를 통해 키보드가 올라와도 버튼이 가려지지 않도록 할 수 있겠네요.
isActive가 false일 때 버튼을 비활성화하는 것도 사용자 경험 측면에서 좋은 선택입니다. 그리고 safe area를 무시함으로써 버튼이 화면 하단까지 꽉 차게 만들었습니다.
전반적으로 버튼의 구현이 훌륭합니다! 👍
Projects/Features/DesignPreview/Sources/DesignTypographyPreview.swift (6)
18-18: LGTM!색상 참조를 새로운 구조로 업데이트하는 것이 일관성 있어 보입니다.
21-21: LGTM!이 변경 사항도 색상 참조를 새로운 구조로 일관되게 업데이트하고 있습니다.
24-24: LGTM!여기서도 색상 참조가 새로운 구조로 잘 업데이트되었습니다.
33-33: LGTM!이 부분에서도 색상 참조가 새로운 구조로 잘 업데이트되었네요.
36-36: LGTM!여기서도 색상 참조가 새로운 구조로 일관되게 업데이트되었습니다.
39-39: LGTM!이 두 부분에서도 색상 참조가 새로운 구조로 잘 업데이트되었습니다. 전반적으로 변경 사항이 일관성을 유지하고 있어 좋네요.
Also applies to: 42-42
| } | ||
| } | ||
|
|
||
| fileprivate struct RoundedCorner: Shape { |
There was a problem hiding this comment.
fileprivate 대신 private을 사용하는 것이 좋습니다.
정적 분석 도구의 힌트에 따르면 fileprivate 선언 대신 private을 선호합니다.
이 차이를 적용하세요:
-fileprivate struct RoundedCorner: Shape {
+private struct RoundedCorner: Shape {Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| fileprivate struct RoundedCorner: Shape { | |
| private struct RoundedCorner: Shape { |
Tools
SwiftLint
[Warning] 17-17: Prefer
privateoverfileprivatedeclarations(private_over_fileprivate)
| } | ||
| } | ||
|
|
||
| fileprivate struct BackgroundTextureViewModifier: ViewModifier { |
There was a problem hiding this comment.
fileprivate 대신 private을 사용하는 것이 좋습니다.
BackgroundTextureViewModifier 구조체는 fileprivate 접근 제어를 사용하고 있습니다. 그러나 이 구조체는 파일 내의 다른 코드에서 접근할 필요가 없으므로 private으로 변경하는 것이 좋습니다. 이렇게 하면 구조체 내부에서만 접근 가능하도록 제한되어 더 나은 캡슐화를 촉진할 수 있습니다.
다음과 같이 접근 제어를 변경해보세요:
-fileprivate struct BackgroundTextureViewModifier: ViewModifier {
+private struct BackgroundTextureViewModifier: ViewModifier {Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| fileprivate struct BackgroundTextureViewModifier: ViewModifier { | |
| private struct BackgroundTextureViewModifier: ViewModifier { |
Tools
SwiftLint
[Warning] 26-26: Prefer
privateoverfileprivatedeclarations(private_over_fileprivate)
| public struct CTAButton<BackgroundStyle: ShapeStyle>: View { | ||
| private let title: String | ||
| private let backgroundStyle: BackgroundStyle | ||
| private let titleColor: Color = .white |
There was a problem hiding this comment.
제목 색상을 사용자 정의할 수 있도록 고려해 보세요.
현재 제목 색상이 흰색으로 하드코딩되어 있습니다. 이는 사용자 정의 옵션을 제한할 수 있습니다. 제목 색상을 사용자 정의할 수 있도록 변경하는 것이 좋습니다.
| private var buttonBackgroundColor: BackgroundStyle { | ||
| if !isActive { | ||
| return DesignCore.Colors.grey100 as! BackgroundStyle | ||
| } | ||
| return backgroundStyle | ||
| } |
There was a problem hiding this comment.
강제 캐스팅을 피하세요.
32번 줄에서 DesignCore.Colors.grey100을 제네릭 BackgroundStyle 타입으로 강제 캐스팅하고 있습니다. 강제 캐스팅은 캐스팅이 실패할 경우 런타임 크래시를 유발할 수 있으므로 피해야 합니다.
대신 다음과 같이 수정하는 것이 좋습니다:
-return DesignCore.Colors.grey100 as! BackgroundStyle
+return Color(DesignCore.Colors.grey100) as! BackgroundStyleDesignCore.Colors.grey100을 Color로 래핑하여 BackgroundStyle과 호환되도록 만들어주세요. 그래도 여전히 강제 캐스팅이 필요하다면, 제네릭 타입 제약조건을 사용하여 BackgroundStyle이 ShapeStyle을 준수하도록 만드는 것이 좋습니다.
제네릭 타입 제약조건을 추가하는 것에 대해 도움이 필요하신가요? 제가 수정 내용을 제안드릴 수 있습니다.
Committable suggestion was skipped due to low confidence.
Tools
SwiftLint
[Error] 32-32: Force casts should be avoided
(force_cast)
| private var buttonBackgroundColor: BackgroundStyle { | ||
| if !isActive { | ||
| return DesignCore.Colors.grey100 as! BackgroundStyle | ||
| } | ||
| return backgroundStyle | ||
| } |
There was a problem hiding this comment.
Force cast 사용을 피하는 것이 좋습니다.
buttonBackgroundColor 계산 프로퍼티에서 isActive가 false일 때 DesignCore.Colors.grey100을 BackgroundStyle 타입으로 force cast하고 있습니다. 이는 런타임 크래시를 유발할 수 있으므로 바람직하지 않습니다.
대신 아래와 같이 conditional cast나 기본값을 사용하는 것이 좋겠습니다:
private var buttonBackgroundColor: BackgroundStyle {
if !isActive, let inactiveColor = DesignCore.Colors.grey100 as? BackgroundStyle {
return inactiveColor
}
return backgroundStyle
}Tools
SwiftLint
[Error] 35-35: Force casts should be avoided
(force_cast)
구현사항
스크린샷(선택)
Summary by CodeRabbit
신규 기능
BackgroundTextureView및DesignBackgroundTextureView를 포함한 새로운 SwiftUI 뷰 추가.TextField와 여러 호출 액션 버튼(CTAButton,CTABottomButton)을 포함하는DesignButtonView추가.Device열거형 추가로 장치 특성에 대한 정보 제공.변경 사항
DesignCore.Colors구조로 업데이트하여 색상 관리 체계 개선.KeyboardResponder클래스를 통해 키보드 가시성 변화에 반응하는 레이아웃 조정 기능 추가.문서화
Contents.json파일 추가로 이미지 자산 메타데이터 제공.