[#255] YDSLabel SwiftUI로 리팩토링

YDS-Storybook/SwiftUI/Atom/LabelPageView.swift

@@ -12,35 +12,39 @@ import YDS_SwiftUI
     let title: String = "Label"
 
     @State var text: String? = "Label"
-    @State var int: Int = 0
     @State var typoStyleSelectedIndex = 0
+    @State var lineLimit: Int?
     @State var textColorSelectedIndex: Int = 0
-    @State var lineBreakModeSelectedIndex: Int = 0
     @State var alignmentSelectedIndex: Int = 1
-    @State var lineBreakStrategySelectedIndex: Int = 2
+    @State var truncationModeSelectedIndex: Int = 2
+    @State var isAllowsTightening: Bool = false
 
-    var selectedColor: Color { return YDSSwiftUIColorWrapper.textColors.items[textColorSelectedIndex].color
-        ?? .black }
-    var selectedTypoStyle: Font { return Font(String.TypoStyle.allCases[typoStyleSelectedIndex].font) }
+    var selectedTypoStyle: Font {
+        return Font(String.TypoStyle.allCases[typoStyleSelectedIndex].font)
+    }
+    var selectedColor: Color {
+        return YDSSwiftUIColorWrapper.textColors.items[textColorSelectedIndex].color
+        ?? .black
+    }
+    var selectedAlignment: TextAlignment {
+        return TextAlignment.allCases[alignmentSelectedIndex]
+    }
+    var selectedTruncationMode: Text.TruncationMode {
+        return Text.TruncationMode.allCases[truncationModeSelectedIndex]
+    }
 
     public var body: some View {
         StorybookPageView(sample: {
             VStack {
-                GeometryReader { geometry in
-                    YDSLabel(
-                        text: text ?? "",
-                        typoStyle: YDSLabel.LabelTypoStyle.allCases[typoStyleSelectedIndex],
-                        textColor: selectedColor,
-                        maxWidth: geometry.size.width - 32,
-                        numberOfLines: int,
-                        lineBreakMode: NSLineBreakMode.allCases[lineBreakModeSelectedIndex],
-                        alignment: NSTextAlignment.allCases[alignmentSelectedIndex],
-                        lineBreakStrategy: NSParagraphStyle.LineBreakStrategy.allCases[lineBreakStrategySelectedIndex]
-                    )
-                    .frame(height: YDSScreenSize.width * 3/4 - 32)
-                    .padding(16)
-                    .clipped()
-                }
+                YDSLabel(
+                    text: text,
+                    font: selectedTypoStyle,
+                    lineLimit: lineLimit,
+                    textColor: selectedColor,
+                    alignment: selectedAlignment,
+                    truncationMode: selectedTruncationMode,
+                    allowsTightening: isAllowsTightening
+                )
             }
         }, options: [
             Option.optionalString(
@@ -50,30 +54,29 @@ import YDS_SwiftUI
                 description: "style",
                 cases: String.TypoStyle.allCases,
                 selectedIndex: $typoStyleSelectedIndex),
-            Option.int(description: "numberOfLines", value: $int),
+            Option.optionalInt(
+                description: "lineLimit",
+                value: $lineLimit),
             Option.enum(
                 description: "textColor",
                 cases: YDSSwiftUIColorWrapper.textColors.items,
                 selectedIndex: $textColorSelectedIndex),
-            Option.enum(
-                description: "lineBreakMode",
-                cases: NSLineBreakMode.allCases,
-                selectedIndex: $lineBreakModeSelectedIndex),
             Option.enum(
                 description: "alignment",
-                cases: NSTextAlignment.allCases,
+                cases: TextAlignment.allCases,
                 selectedIndex: $alignmentSelectedIndex),
             Option.enum(
-                description: "lineBreakStrategy",
-                cases: NSParagraphStyle.LineBreakStrategy.allCases,
-                selectedIndex: $lineBreakStrategySelectedIndex)
+                description: "truncationMode",
+                cases: Text.TruncationMode.allCases,
+                selectedIndex: $truncationModeSelectedIndex),
+            Option.bool(
+                description: "allowsTightening",
+                isOn: $isAllowsTightening)
         ])
         .navigationTitle(title)
     }
 }
 
-struct LabelPageView_Previews: PreviewProvider {
-    static var previews: some View {
-        LabelPageView()
-    }
+#Preview {
+    LabelPageView()
 }

YDS-Storybook/SwiftUI/Storybook/OptionView/Base/Option.swift

@@ -10,7 +10,7 @@ import SwiftUI
 enum Option: View {
     case bool(description: String?, isOn: Binding<Bool>)
     case `enum`(description: String?, cases: [Any], selectedIndex: Binding<Int>)
-    case int(description: String?, value: Binding<Int>)
+    case optionalInt(description: String?, value: Binding<Int?>)
     case optionalString(description: String?, text: Binding<String?>)
     case optionalIcon(description: String?, icons: [SwiftUIIcon], selectedIcon: Binding<SwiftUIIcon?>)
     case optionalImage(description: String?, images: [SwiftUIImage], selectedImage: Binding<SwiftUIImage?>)
@@ -22,8 +22,8 @@ enum Option: View {
             BoolOptionView(description: description, isOn: isOn)
         case .enum(let description, let cases, let selectedIndex):
             EnumOptionView(description: description, cases: cases, selectedIndex: selectedIndex)
-        case .int(let description, let value):
-            IntOptionView(description: description, value: value)
+        case .optionalInt(let description, let value):
+            OptionalIntOptionView(description: description, value: value)
         case .optionalString(let description, let text):
             OptionalStringOptionView(description: description, text: text)
         case .optionalIcon(let description, let icons, let selectedIcon):

YDS-Storybook/SwiftUI/Storybook/OptionView/IntOptionView.swift → YDS-Storybook/SwiftUI/Storybook/OptionView/OptionalIntOptionView.swift

@@ -1,14 +1,14 @@
 //
-//  IntOptionView.swift
+//  OptionalIntOptionView.swift
 //  YDS-Storybook
 //
-//  Created by 정지혁 on 2023/08/19.
+//  Created by 박지윤 on 1/16/24.
 //
 
 import SwiftUI
 import YDS_SwiftUI
 
-struct IntOptionView: View {
+struct OptionalIntOptionView: View {
     private enum Dimension {
         enum Spacing {
             static let vstack: CGFloat = 8
@@ -24,11 +24,11 @@ struct IntOptionView: View {
         }
     }
 
-    @Binding private var value: Int
+    @Binding private var value: Int?
 
     private let description: String?
 
-    init(description: String?, value: Binding<Int>) {
+    init(description: String?, value: Binding<Int?>) {
         self.description = description
         self._value = value
     }
@@ -40,7 +40,7 @@ struct IntOptionView: View {
                     Text(description)
                         .font(YDSFont.subtitle2)
                 }
-                Text("Int")
+                Text("Optional<Int>")
                     .font(YDSFont.body2)
             }
 
@@ -56,8 +56,8 @@ struct IntOptionView: View {
     }
 }
 
-struct IntOptionView_Previews: PreviewProvider {
+struct OptionalIntOptionView_Previews: PreviewProvider {
     static var previews: some View {
-        IntOptionView(description: "numberOfLines", value: .constant(1))
+        OptionalIntOptionView(description: "lineLimit", value: .constant(1))
     }
 }

YDS-Storybook/SwiftUI/Storybook/OptionView/OptionalStringOptionView.swift

@@ -27,7 +27,8 @@ struct OptionalStringOptionView: View {
     @Binding private var text: String?
 
     private let description: String?
-
+
+    @State private var isToggleOn = true
     @State private var placeholder: String
 
     init(description: String?, text: Binding<String?>) {
@@ -54,6 +55,7 @@ struct OptionalStringOptionView: View {
                     },
                     set: { isOn in
                         isOn ? (text = placeholder) : (text = nil)
+                        self.isToggleOn = isOn
                     }
                 ))
                 .labelsHidden()
@@ -72,6 +74,7 @@ struct OptionalStringOptionView: View {
             .font(YDSFont.body1)
             .tint(YDSColor.textPointed)
             .padding(Dimension.Padding.button)
+            .foregroundColor(isToggleOn ? YDSColor.bgNormalDark : YDSColor.bgDimDark)
             .background(
                 RoundedRectangle(cornerRadius: Dimension.Rectangle.cornerRadius)
                     .fill(YDSColor.inputFieldElevated)

YDS-Storybook/SwiftUI/Storybook/StorybookPageView.swift

@@ -86,7 +86,7 @@ struct StorybookPageView_Previews: PreviewProvider {
 
         @State var text: String? = "BoxButton"
         @State var isDisabled = false
-        @State var numberOfLines = 1
+        @State var lineLimit: Int? = 1
         @State var selectedBoxButtonType = 0
         @State var icon: SwiftUIIcon?
 
@@ -98,14 +98,14 @@ struct StorybookPageView_Previews: PreviewProvider {
                             icon
                         }
                         Text(text ?? "")
-                            .lineLimit(numberOfLines)
+                            .lineLimit(lineLimit)
                     }
                 }
                 .disabled(isDisabled)
             },
             options: [
                 Option.bool(description: "isDisabled", isOn: $isDisabled),
-                Option.int(description: "numberOfLines", value: $numberOfLines),
+                Option.optionalInt(description: "lineLimit", value: $lineLimit),
                 Option.enum(
                     description: "buttonType",
                     cases: BoxButtonType.allCases,

YDS-SwiftUI/Source/Atom/YDSLabel.swift

@@ -8,123 +8,51 @@
 import SwiftUI
 import YDS_Essential
 
-public struct YDSLabel: UIViewRepresentable {
-    let text: String?
-    let typoStyle: UIFont?
-    let textColor: Color?
-    let maxWidth: CGFloat?
-    let numberOfLines: Int?
-    let lineBreakMode: NSLineBreakMode?
-    let alignment: NSTextAlignment?
-    let lineBreakStrategy: NSParagraphStyle.LineBreakStrategy?
-
-    public enum LabelTypoStyle: CaseIterable {
-        case display1
-        case display2
-
-        case title1
-        case title2
-        case title3
-
-        case subtitle1
-        case subtitle2
-        case subtitle3
-
-        case body1
-        case body2
-
-        case button0
-        case button1
-        case button2
-        case button3
-        case button4
-
-        case caption0
-        case caption1
-        case caption2
-
-        var uiFont: UIFont {
-            switch self {
-            case .display1:
-                return UIFont.systemFont(ofSize: 40, weight: .bold )
-            case .display2:
-                return UIFont.systemFont(ofSize: 32, weight: .bold )
-            case .title1:
-                return UIFont.systemFont(ofSize: 28, weight: .bold )
-            case .title2:
-                return UIFont.systemFont(ofSize: 24, weight: .bold )
-            case .title3:
-                return UIFont.systemFont(ofSize: 20, weight: .bold )
-            case .subtitle1:
-                return UIFont.systemFont(ofSize: 20, weight: .semibold )
-            case .subtitle2:
-                return UIFont.systemFont(ofSize: 16, weight: .semibold )
-            case .subtitle3:
-                return UIFont.systemFont(ofSize: 14, weight: .semibold )
-            case .body1:
-                return UIFont.systemFont(ofSize: 15, weight: .regular )
-            case .body2:
-                return UIFont.systemFont(ofSize: 14, weight: .regular )
-            case .button0:
-                return UIFont.systemFont(ofSize: 16, weight: .medium )
-            case .button1:
-                return UIFont.systemFont(ofSize: 16, weight: .semibold )
-            case .button2:
-                return UIFont.systemFont(ofSize: 14, weight: .semibold )
-            case .button3:
-                return UIFont.systemFont(ofSize: 14, weight: .regular )
-            case .button4:
-                return UIFont.systemFont(ofSize: 12, weight: .medium )
-            case .caption0:
-                return UIFont.systemFont(ofSize: 12, weight: .semibold )
-            case .caption1:
-                return UIFont.systemFont(ofSize: 12, weight: .regular )
-            case .caption2:
-                return UIFont.systemFont(ofSize: 11, weight: .regular )
-            }
-        }
-    }
+extension Text.TruncationMode {
+    public static var allCases: [Text.TruncationMode] = [.head, .middle, .tail]
+}
 
-    public init(text: String,
-                typoStyle: LabelTypoStyle = .body1,
-                textColor: Color = Color.black,
-                maxWidth: CGFloat = .greatestFiniteMagnitude,
-                numberOfLines: Int = 0,
-                lineBreakMode: NSLineBreakMode = .byWordWrapping,
-                alignment: NSTextAlignment = .center,
-                lineBreakStrategy: NSParagraphStyle.LineBreakStrategy = .hangulWordPriority) {
+public struct YDSLabel: View {
+    let text: String?
+    let font: Font
+    let lineLimit: Int?
+    let textColor: Color
+    let alignment: TextAlignment
+    let truncationMode: Text.TruncationMode
+    let allowsTightening: Bool
+
+    public init(text: String? = "Label",
+                font: Font = YDSFont.display1,
+                lineLimit: Int? = nil,
+                textColor: Color = YDSColor.textPrimary,
+                alignment: TextAlignment = .center,
+                truncationMode: Text.TruncationMode = .tail,
+                allowsTightening: Bool = false
+    ) {
         self.text = text
-        self.typoStyle = typoStyle.uiFont
+        self.font = font
+        self.lineLimit = lineLimit
         self.textColor = textColor
-        self.maxWidth = maxWidth
-        self.numberOfLines = numberOfLines
-        self.lineBreakMode = lineBreakMode
         self.alignment = alignment
-        self.lineBreakStrategy = lineBreakStrategy
+        self.truncationMode = truncationMode
+        self.allowsTightening = allowsTightening
     }
 
-    public func makeUIView(context: Context) -> UILabel {
-        let label = UILabel()
-        label.text = text
-        label.font = typoStyle
-        label.textColor = UIColor(textColor ?? .black)
-        label.numberOfLines = numberOfLines ?? 0
-        label.lineBreakMode = lineBreakMode ?? .byWordWrapping
-        label.textAlignment = alignment ?? .center
-        label.lineBreakStrategy = lineBreakStrategy ?? .hangulWordPriority
-        label.preferredMaxLayoutWidth = maxWidth ?? .greatestFiniteMagnitude
-
-        return label
+    public var body: some View {
+        if let text = text {
+            Text(text)
+                .font(font)
+                .lineLimit(lineLimit)
+                .foregroundColor(textColor)
+                .multilineTextAlignment(alignment)
+                .truncationMode(truncationMode)
+                .allowsTightening(allowsTightening)
+        }
     }
+}
 
-    public func updateUIView(_ uiView: UILabel, context: Context) {
-        uiView.text = text
-        uiView.font = typoStyle
-        uiView.textColor = UIColor(textColor ?? .black)
-        uiView.numberOfLines = numberOfLines ?? 0
-        uiView.lineBreakMode = lineBreakMode ?? .byWordWrapping
-        uiView.textAlignment = alignment ?? .center
-        uiView.lineBreakStrategy = lineBreakStrategy ?? .hangulWordPriority
-        uiView.setContentHuggingPriority(.defaultHigh, for: .vertical)
+struct YDSLabel_Previews: PreviewProvider {
+    static var previews: some View {
+        YDSLabel()
     }
 }