Components 만들기 #1

  👨🏻‍💻  오늘의 작업

[ 1. Components 만들기 - CustomButton ] 

//
//  Button.swift
//  SoBunSoBun
//
//  Created by 허성필 on 9/26/25.
//

import UIKit
import SnapKit

class Button: UIButton {
    enum ColorType {
        case primary, black
    }
    
    var colorType: ColorType = .primary {
        didSet {
        	// colorType가 .primary 일 때면 primary300 컬러, 아니면 black 색상
            self.backgroundColor = colorType == .primary ? .primary300 : .black0
        }
    }
    
    override var isEnabled: Bool {
        didSet {
        	// 비활성화 상태일 때
            self.backgroundColor = isEnabled ?
            (colorType == .primary ? .primary300 : .black0) : .neutral200
        }
    }
    
    init(title: String) {
        super.init(frame: .zero)
        self.setTitle(title, for: .normal)
        configure()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func configure() {
        self.setTitleColor(.backgroundWhite, for: .normal) // 기본상태
        self.setTitleColor(.backgroundWhite, for: .disabled) // disabled 상태
        self.setTitleColor(.backgroundWhite, for: .highlighted) // 클릭하고 있는 상태
        self.titleLabel?.font = title16.font // 폰트 설정
        self.layer.cornerRadius = 14 // 모서리 Radius 설정
        
        // 높이 설정
        self.snp.makeConstraints { make in
            make.height.equalTo(56)
        }
    }
}

 

 

[ 사용 예시 ]

private let customButton: Button = {
    let button = Button(title: "테스트 버튼")
    button.colorType = .black
    button.isEnabled = false

    return button
}()

 

private let customButton: Button = {
    let button = Button(title: "테스트 버튼")
    button.colorType = .primary

    return button
}()

---

  📱  버튼 컴포넌트 테스트

비활성화 / 검정색 버튼 / 파란색 버튼