[Style] GSButton의 Tab 스타일에 언더라인을 추가했습니다.

[wontaeyoung]

개요

• 13

• GSButton의 TabStyle에 언더라인을 추가했습니다.

✏️ 작업 사항

• Style 타입 이름 수정 Style -> GSButtonStyle
• Color 익스텐션 Ambiguous 에러 정리
• Tab 스타일 버튼 언더라인 추가

📸 스크린샷 (optional)

GSButton_Tab 스타일

주요 로직 (optional)

GSButton

• GSTab 타입이 추가되었습니다. GitSpace 모듈에서 GSTab 타입의 프로퍼티 사용이 필요하여 제네릭을 구현하지 않아도 되도록 GSButton 외부에 위치시켰습니다.
• 버튼이 초기화될 때 전달받은 tab 케이스와 외부에서 바인딩된 selectedTab을 비교하여 언더라인을 overlay 합니다.

public enum GSTab {
    case starred
    case activity
}

public struct GSButton<Label: View>: View {
    public enum GSButtonStyle {
        ...
        case tab(tabName: GSTab, selectedTab: Binding<GSTab>)
        ...
    }
}

case let .tab(tabName, selectedTab):
    content
        .font(
            .system(size: 20, weight: .medium)
        )
        .modifier(GSButtonLabelColorModifier(style))
        .overlay(alignment: .bottom) {
            if tabName == selectedTab.wrappedValue {
                Rectangle()
                    .foregroundColor(.primary)
                    .frame(height: 3)
                    .offset(y: 8)
            }
        }

GitSpace 모듈에서 구현 예시

• 아래와 같이 View에서 사용할 때, 바인딩 용도의 selectedTab 프로퍼티가 필요합니다.
• Button의 action에서 언더라인을 원하는 버튼으로 selectedTab을 변경해주면 스크린샷과 동일하게 Tab 버튼 UI가 다시 렌더링됩니다.

struct ContentView: View {
    @State var selectedTab: GSTab = .starred

    var body: some View {
        VStack {
            HStack {
                GSButton(style: .tab(tabName: .starred, selectedTab: $selectedTab)) {
                    selectedTab = .starred
                } label: {
                    Text("Starred")
                }

                GSButton(style: .tab(tabName: .activity, selectedTab: $selectedTab)) {
                    selectedTab = .activity
                } label: {
                    Text("Activity")
                }
            }
        }
        .padding()
    }
}

논의사항

현재 Asset Color와 hex init Color가 섞여서 사용되고 있고, 동일하게 gsGray라는 이름을 사용하고 있어서 Ambiguous 에러가 발생합니다. 임시적으로 hex Color로 초기화 된 정적 변수 이름을 gsGrey로 변경하였고, 회의 과정에서 Color 사용 방식에 대한 논의가 필요합니다.

extension Color {
-     static let gsGray1: Color = .init(hex: "#8D8F97")
-     static let gsGray2: Color = .init(hex: "#27292E")

+     static let gsGrey1: Color = .init(hex: "#8D8F97")
+     static let gsGrey2: Color = .init(hex: "#27292E")
+     static let gsGray1 = Color("GSGray1")
+     static let gsGray2 = Color("GSGray2")
+     static let gsGray3 = Color("GSGray3")
}