[Style] GSButton 디자인 시스템을 구현했습니다.

[wontaeyoung]

개요

• 3

• GSDesignSystem 프레임워크의 GSButton 디자인 시스템을 구현했습니다.

✏️ 작업 사항

• Hexa값 초기화 컬러를 위한 Color extension 추가
• Button 케이스별 디자인 정의
  • Primary
  • Secondary
  • Tag
  • Plain
  • Tab
• Color Scheme에 따른 다크모드 대응
• 커스텀 Disabled 기능 구현

📸 스크린샷 (optional)

GSButton

주요 로직 (optional)

Style + State로 디자인 분기 처리

디자인 시스템의 다양한 버튼 케이스를 Style과 State 연관값으로 조합해서 구현했습니다.

명시적으로 이름을 표시하여 사용성을 높이고, 열거형으로 관리하여 사용자의 휴먼 에러를 방지했습니다.

이후 버튼 디자인 추가에도 유연하게 대응이 가능합니다.

public enum Style {
    case primary(ableState: AbleState)
    case secondary(ableState: AbleState)
    case tag(tagState: TagState)
    case plain(destructiveState: DestructiveState)
    case tab

    public enum AbleState {
        case enabled
        case disabled
    }

    public enum TagState {
        case idle
        case editing(activityState: ActivityState)
        case selected

        public enum ActivityState {
            case active
            case inactive
        }
    }

    public enum DestructiveState {
        case idle
        case destructive
    }
}

커스텀 Disabled 구현

SwiftUI에서 기본적으로 제공하는 disabled는 버튼 디자인을 강제로 회색으로 변경하는 문제가 있습니다.

이를 해결하기 위해 Custom으로 Disabled를 구현했습니다.

ableState가 disabled 케이스인 경우 버튼 Z축으로 투명한 Capsule을 오버레이해서 버튼이 탭되지 않도록 처리했습니다.

.overlay {
    switch style {
    case .primary(ableState: .disabled), .secondary(ableState: .disabled):
        Capsule()
            .fill(Color.white.opacity(0.1))
    ...
    }
}