Skip to content

Commit aec003a

Browse files
GomHyeokGomHyeok
authored
[NL-54] : Chip Component 생성 (#29)
- Forturne 에서 사용 가능한 ChipComponent 생성
1 parent 86ef47f commit aec003a

File tree

9 files changed

+941
-0
lines changed

9 files changed

+941
-0
lines changed

‎DesignSystem/DesignSystem/Sources/Chip/RoundBorderChip.swift‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
//
2+
// RoundBorderChip.swift
3+
// DesignSystemLayer
4+
//
5+
// Created by 최재혁 on 8/9/25.
6+
//
7+
8+
import UIKit
9+
10+
public final class RoundBorderChip : UIView {
11+
public enum Style : CaseIterable {
12+
case primary, black, gray, red, orange, yellow, green, blue
13+
14+
fileprivate var backgroudColor : UIColor { return STColors.white.color }
15+
16+
fileprivate var tintColor : UIColor {
17+
switch self {
18+
case .primary : return STColors.primary2.color
19+
case .black : return STColors.gray2.color
20+
case .gray: return STColors.gray5.color
21+
case .red: return STColors.red3.color
22+
case .orange: return STColors.orange3.color
23+
case .yellow: return STColors.yellow3.color
24+
case .green: return STColors.green3.color
25+
case .blue: return STColors.blue3.color
26+
}
27+
}
28+
29+
fileprivate var borderColor : UIColor {
30+
switch self {
31+
case .primary : return STColors.primary7.color
32+
case .black: return STColors.gray2.color
33+
case .gray : return STColors.gray7.color
34+
case .red: return STColors.red3.color
35+
case .orange: return STColors.orange3.color
36+
case .yellow: return STColors.yellow3.color
37+
case .green: return STColors.green3.color
38+
case .blue: return STColors.blue3.color
39+
}
40+
}
41+
}
42+
43+
private lazy var contentStackView = UIStackView().then {
44+
$0.axis = .horizontal
45+
$0.spacing = 2
46+
$0.alignment = .center
47+
}
48+
49+
private lazy var arrowLeftView = UIImageView().then {
50+
$0.image = STImages.iconArrow.image
51+
$0.contentMode = .scaleAspectFit
52+
}
53+
54+
private lazy var arrowRightView = UIImageView().then {
55+
$0.image = STImages.iconArrow.image
56+
$0.contentMode = .scaleAspectFit
57+
$0.transform = CGAffineTransform(rotationAngle: .pi)
58+
}
59+
60+
private lazy var titleLabel = UILabel().then {
61+
$0.style = Typography.Body_14_SB
62+
$0.textAlignment = .center
63+
}
64+
65+
public init() {
66+
super.init(frame: .zero)
67+
setupUI()
68+
}
69+
70+
required init?(coder: NSCoder) {
71+
fatalError("init(coder:) has not been implemented")
72+
}
73+
74+
private func setupUI() {
75+
self.addSubview(contentStackView)
76+
contentStackView.addArrangedSubview(arrowLeftView)
77+
contentStackView.addArrangedSubview(titleLabel)
78+
contentStackView.addArrangedSubview(arrowRightView)
79+
80+
contentStackView.snp.makeConstraints { make in
81+
make.verticalEdges.equalToSuperview().inset(6)
82+
make.leading.equalToSuperview().inset(10)
83+
make.trailing.equalToSuperview().inset(10)
84+
}
85+
86+
arrowLeftView.snp.makeConstraints { make in
87+
make.width.height.equalTo(16)
88+
}
89+
90+
arrowLeftView.isHidden = true
91+
arrowRightView.isHidden = true
92+
93+
self.layer.cornerRadius = 14
94+
self.layer.masksToBounds = true
95+
}
96+
97+
public func update(text : String, icon : UIImage? = nil) {
98+
titleLabel.styledText = text
99+
arrowLeftView.isHidden = icon == nil
100+
arrowRightView.isHidden = icon == nil
101+
if let icon = icon {
102+
let template = icon.withRenderingMode(.alwaysTemplate)
103+
arrowLeftView.image = template
104+
arrowRightView.image = template
105+
}
106+
}
107+
108+
public func update(style : Style) {
109+
backgroundColor = style.backgroudColor
110+
titleLabel.textColor = style.tintColor
111+
arrowLeftView.tintColor = style.tintColor
112+
arrowRightView.tintColor = style.tintColor
113+
self.layer.borderColor = style.borderColor.cgColor
114+
self.layer.borderWidth = 1.0
115+
}
116+
}
117+
@available(iOS 17.0, *)
118+
#Preview {
119+
let stackView = UIStackView().then {
120+
$0.axis = .vertical
121+
$0.spacing = 8
122+
}
123+
124+
RoundBorderChip.Style.allCases.forEach {
125+
let titleOnly = RoundBorderChip()
126+
titleOnly.update(text: "Round border Chip")
127+
titleOnly.update(style: $0)
128+
stackView.addArrangedSubview(titleOnly)
129+
let chip = RoundBorderChip()
130+
chip.update(text: "Round border Chip", icon: STImages.iconArrow.image)
131+
chip.update(style: $0)
132+
stackView.addArrangedSubview(chip)
133+
}
134+
135+
return stackView
136+
}

‎DesignSystem/DesignSystem/Sources/Chip/RoundSolidChip.swift‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
//
2+
// RoundSolidChip.swift
3+
// DesignSystemLayer
4+
//
5+
// Created by 최재혁 on 8/8/25.
6+
//
7+
8+
import UIKit
9+
10+
public final class RoundSolidChip : UIView {
11+
public enum Style : CaseIterable {
12+
case primary, black, gray, red, orange, yellow, green, blue
13+
14+
fileprivate var backgroudColor : UIColor {
15+
switch self {
16+
case .primary: return STColors.primary2.color
17+
case .black: return STColors.gray2.color
18+
case .gray: return STColors.gray5.color
19+
case .red: return STColors.red3.color
20+
case .orange: return STColors.orange3.color
21+
case .yellow: return STColors.yellow3.color
22+
case .green: return STColors.gray3.color
23+
case .blue: return STColors.blue3.color
24+
}
25+
}
26+
27+
fileprivate var tintColor : UIColor { return STColors.white.color }
28+
29+
fileprivate var borderColor : UIColor {
30+
switch self {
31+
case .primary: return STColors.primary2.color
32+
case .black: return STColors.gray2.color
33+
case .gray: return STColors.gray5.color
34+
case .red: return STColors.red3.color
35+
case .orange: return STColors.orange3.color
36+
case .yellow: return STColors.yellow3.color
37+
case .green: return STColors.green3.color
38+
case .blue: return STColors.blue3.color
39+
}
40+
}
41+
}
42+
43+
private lazy var contentStackView = UIStackView().then {
44+
$0.axis = .horizontal
45+
$0.spacing = 2
46+
$0.alignment = .center
47+
}
48+
49+
private lazy var arrowLeftView = UIImageView().then {
50+
$0.image = STImages.iconArrow.image
51+
$0.contentMode = .scaleAspectFit
52+
}
53+
54+
private lazy var arrowRightView = UIImageView().then {
55+
$0.image = STImages.iconArrow.image
56+
$0.contentMode = .scaleAspectFit
57+
$0.transform = CGAffineTransform(rotationAngle: .pi)
58+
}
59+
60+
private lazy var titleLabel = UILabel().then {
61+
$0.style = Typography.Body_14_SB
62+
$0.textAlignment = .center
63+
}
64+
65+
public init() {
66+
super.init(frame: .zero)
67+
setupUI()
68+
}
69+
70+
required init?(coder: NSCoder) {
71+
fatalError("init(coder:) has not been implemented")
72+
}
73+
74+
private func setupUI() {
75+
self.addSubview(contentStackView)
76+
contentStackView.addArrangedSubview(arrowLeftView)
77+
contentStackView.addArrangedSubview(titleLabel)
78+
contentStackView.addArrangedSubview(arrowRightView)
79+
80+
contentStackView.snp.makeConstraints { make in
81+
make.verticalEdges.equalToSuperview().inset(6)
82+
make.leading.equalToSuperview().inset(10)
83+
make.trailing.equalToSuperview().inset(10)
84+
}
85+
86+
arrowLeftView.snp.makeConstraints { make in
87+
make.width.height.equalTo(16)
88+
}
89+
90+
arrowLeftView.isHidden = true
91+
arrowRightView.isHidden = true
92+
93+
self.layer.cornerRadius = 14
94+
self.layer.masksToBounds = true
95+
}
96+
97+
public func update(text : String, icon : UIImage? = nil) {
98+
titleLabel.styledText = text
99+
arrowLeftView.isHidden = icon == nil
100+
arrowRightView.isHidden = icon == nil
101+
102+
if let icon = icon {
103+
let template = icon.withRenderingMode(.alwaysTemplate)
104+
arrowLeftView.image = template
105+
arrowRightView.image = template
106+
}
107+
}
108+
109+
public func update(style : Style) {
110+
backgroundColor = style.backgroudColor
111+
titleLabel.textColor = style.tintColor
112+
arrowLeftView.tintColor = style.tintColor
113+
arrowRightView.tintColor = style.tintColor
114+
self.layer.borderColor = style.borderColor.cgColor
115+
}
116+
}
117+
118+
@available(iOS 17.0, *)
119+
#Preview {
120+
let stackView = UIStackView().then {
121+
$0.axis = .vertical
122+
$0.spacing = 8
123+
}
124+
125+
RoundSolidChip.Style.allCases.forEach {
126+
let titleOnly = RoundSolidChip()
127+
titleOnly.update(text: "Round Solid Chip")
128+
titleOnly.update(style: $0)
129+
stackView.addArrangedSubview(titleOnly)
130+
let chip = RoundSolidChip()
131+
chip.update(text: "Round Solid Chip", icon: STImages.iconArrow.image)
132+
chip.update(style: $0)
133+
stackView.addArrangedSubview(chip)
134+
}
135+
136+
return stackView
137+
}
138+

0 commit comments

Comments
 (0)