[#13] HandyFab 생성

[wjdalswl]

📌 Summary

HandyFab를 생성했습니다.

✍️ Description

• 이슈 티켓 : [feat] Component - Fab #13

💡 PR Point

다른 브랜치에서 HandyIcon 파일을 만드셨길래, 아직 icon 작업은 하지 않았습니다!

지금은 setConfiguration() 안에 size설정, cornerRadius 설정, 아이콘 설정, state변화에 따른 색상변화 등을 모두 한 곳에 넣어두었는데, 분리를 하는게 좋을지 고민입니다.

    private func setConfiguration() {
        NSLayoutConstraint.activate([
            widthAnchor.constraint(equalToConstant: size.fabSize),
            heightAnchor.constraint(equalToConstant: size.fabSize)
        ])
        self.layer.cornerRadius = size.fabSize / 2
        self.layer.borderWidth = type == .secondary ? 1 : 0

        var configuration = UIButton.Configuration.plain()

        let iconConfig = UIImage.SymbolConfiguration(pointSize: 24, weight: .regular)
        let iconImage = iconImage == nil ? UIImage(
            systemName: size.icon,
            withConfiguration: iconConfig
        ): iconImage
        
//        TODO: - HandyIcon으로 아이콘 변경, pointSize 삭제, resize 적용(아래 코드로 교체)
//        var iconConfig = iconImage == nil ? UIImage(systemName: size.icon): iconImage
//        iconConfig = iconConfig?.resize(to: 24)
        

        var iconColor: UIColor = type == .secondary ? HandySemantic.iconBasicSecondary : HandySemantic.iconBasicWhite
        switch (isDisabled, isHighlighted) {
        case (true, _):
            self.backgroundColor = type.disabledColor
            self.layer.borderColor = type.borderColor.cgColor
            iconColor = type == .secondary ? HandySemantic.iconBasicDisabled : HandySemantic.iconBasicWhite
            removeShadow()

        case (false, true):
            self.backgroundColor = type.highlightedColor
            self.layer.borderColor = type.borderColor.cgColor
            applyShadow()

        case (false, false):
            self.backgroundColor = type.backgroundColor
            self.layer.borderColor = type.borderColor.cgColor
            applyShadow()
        }
        
        configuration.image = iconImage?.withTintColor(iconColor, renderingMode: .alwaysOriginal)
        
        self.isEnabled = !isDisabled
        self.configuration = configuration
    }

🔥 Test

2024-08-09.7.09.48.mov

---

작업 내용	피그마

icon 컬러로 HandySemantic.iconBasicSecondary를 사용하였는데, 피그마와 색상이 다른 것 같다고 느꼈습니다! 변경이 필요한 부분이라면 말씀해주세요!

[LeeJoEun-01]

@wjdalswl 마이님!

제가 피그마 확인해보니 icon 색상이 icon/basic/tertiary으로 되어있던데 혹시 이 색상이 이상하다고 하신건가요??

[lygon55555]

@Invalidating은 왜 사용하셨는지 궁금합니다!

[jysuhr]

수고하셨습니다 :) 👍