[WEAV-136] ToolTip AttibutedString 적용 (#42)

* [WEAV-136] ToolTip AttibutedString init, 적용 * 리뷰 반영 - 오타 수정
Student-Center · Nov 19, 2024 · c20ec95 · c20ec95
1 parent 58a0296
commit c20ec95
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 22 deletions.
diff --git a/Projects/DesignSystem/DesignCore/Sources/Tooltip/ToolTip.swift b/Projects/DesignSystem/DesignCore/Sources/Tooltip/ToolTip.swift
@@ -9,37 +9,63 @@
 import SwiftUI
 
 extension View {
-    public func tooltip(message: String, offset: CGFloat) -> some View {
+    public func tooltip(message: String?, offset: CGFloat) -> some View {
+        return modifier(ToolTipViewModifier(message: message, offset: offset))
+    }
+
+    public func tooltip(message: AttributedString?, offset: CGFloat) -> some View {
         return modifier(ToolTipViewModifier(message: message, offset: offset))
     }
 }
 
 struct ToolTipViewModifier: ViewModifier {
-    let message: String
+    let message: AttributedString?
     let offset: CGFloat
 
+    init(
+        message: AttributedString?,
+        offset: CGFloat
+    ) {
+        self.message = message
+        self.offset = offset
+    }
+
+    init(
+        message: String?,
+        offset: CGFloat
+    ) {
+        if let message {
+            self.message = .init(stringLiteral: message)
+        } else {
+            self.message = nil
+        }
+        self.offset = offset
+    }
+
     func body(content: Content) -> some View {
         content
             .overlay {
-                Text(message)
-                    .padding(.horizontal, 20)
-                    .padding(.vertical, 10)
-                    .typography(.regular_12)
-                    .foregroundStyle(.white)
-                    .multilineTextAlignment(.center)
-                    .background {
-                        ZStack {
-                            RoundedRectangle(cornerRadius: 6)
-                                .fill(DesignCore.Colors.grey400)
-                            VStack {
-                                Spacer()
-                                InvertedTriangle()
+                if let message {
+                    Text(message)
+                        .padding(.horizontal, 20)
+                        .padding(.vertical, 10)
+                        .typography(.regular_12)
+                        .foregroundStyle(.white)
+                        .multilineTextAlignment(.center)
+                        .background {
+                            ZStack {
+                                RoundedRectangle(cornerRadius: 6)
+                                    .fill(DesignCore.Colors.grey400)
+                                VStack {
+                                    Spacer()
+                                    InvertedTriangle()
+                                }
+                                .offset(y: 12)
                             }
-                            .offset(y: 12)
                         }
-                    }
-                    .frame(width: 300)
-                    .offset(y: -offset)
+//                        .frame(width: 300)
+                        .offset(y: -offset)
+                }
             }
     }
 }

diff --git a/Projects/Features/SignUp/Sources/ProfileInput/AuthProfileAge/AuthProfileAgeInputIntent.swift b/Projects/Features/SignUp/Sources/ProfileInput/AuthProfileAge/AuthProfileAgeInputIntent.swift
@@ -34,6 +34,7 @@ extension AuthProfileAgeInputIntent {
         func onFocusChanged(_ value: Bool)
         func onTapNextButton(_ year: String)
         func onYearChanged(_ year: String)
+        func toggleToolTip()
 
         // default
         func onAppear()
@@ -75,4 +76,7 @@ extension AuthProfileAgeInputIntent: AuthProfileAgeInputIntent.Intentable {
             )
         }
     }
+    func toggleToolTip() {
+        model?.toggleToolTip()
+    }
 }
diff --git a/Projects/Features/SignUp/Sources/ProfileInput/AuthProfileAge/AuthProfileAgeInputModel.swift b/Projects/Features/SignUp/Sources/ProfileInput/AuthProfileAge/AuthProfileAgeInputModel.swift
@@ -21,6 +21,7 @@ final class AuthProfileAgeInputModel: ObservableObject {
         var isFocused: Bool { get }
         var isValidated: Bool { get }
         var targetGender: GenderType { get }
+        var isShowToolTip: Bool { get }
 
         // default
         var isLoading: Bool { get }
@@ -37,6 +38,7 @@ final class AuthProfileAgeInputModel: ObservableObject {
     @Published var birthYear = String()
     @Published var isFocused: Bool = false
     @Published var targetGender: GenderType = .female
+    @Published var isShowToolTip: Bool = false
 
     // default
     @Published var isLoading: Bool = false
@@ -55,6 +57,7 @@ protocol AuthProfileAgeInputModelActionable: AnyObject {
     func setFocuse(_ value: Bool)
     func setValidation(value: Bool)
     func setTargetGender(_ gender: GenderType)
+    func toggleToolTip()
 
     // default
     func setLoading(status: Bool)
@@ -79,6 +82,9 @@ extension AuthProfileAgeInputModel: AuthProfileAgeInputModelActionable {
     func setTargetGender(_ gender: GenderType) {
         targetGender = gender
     }
+    func toggleToolTip() {
+        isShowToolTip.toggle()
+    }
     // default
     func setLoading(status: Bool) {
         isLoading = status

diff --git a/Projects/Features/SignUp/Sources/ProfileInput/AuthProfileAge/AuthProfileAgeInputView.swift b/Projects/Features/SignUp/Sources/ProfileInput/AuthProfileAge/AuthProfileAgeInputView.swift
@@ -37,12 +37,32 @@ public struct AuthProfileAgeInputView: View {
         self._container = StateObject(wrappedValue: container)
     }
 
+    private var tooltipMessage: AttributedString {
+        let text = """
+        2024년 기준으로 2004년생(만 20살)부터
+        1989년생(만 35살)까지 가입할 수 있어요
+        """
+
+        var attributedString = AttributedString(text)
+        let boldRanges = [
+            text.range(of: "2004년생(만 20살)부터"),
+            text.range(of: "1989년생(만 35살)")
+        ].compactMap { $0 }
+
+        boldRanges.forEach { range in
+            let attributedRange = attributedString.range(of: text[range])!
+            attributedString[attributedRange].inlinePresentationIntent = .stronglyEmphasized
+        }
+
+        return attributedString
+    }
+
     public var body: some View {
         VStack {
             ProfileInputTemplatedView(
                 currentPage: 2,
                 maxPage: 5,
-                subMessage: "좋은 \(state.targetGender) 소개시켜 드릴께요!",
+                subMessage: "좋은 \(state.targetGender.name)분 소개시켜 드릴께요!",
                 mainMessage: "당신의 나이는 무엇인가요?"
             ) {
                 VStack {
@@ -82,7 +102,9 @@ public struct AuthProfileAgeInputView: View {
                     .frame(height: 92)
 
                     Button(action: {
-
+                        withAnimation {
+                            intent.toggleToolTip()
+                        }
                     }, label: {
                         HStack(spacing: 4) {
                             DesignCore.Images.iconInformation.image
@@ -94,6 +116,7 @@ public struct AuthProfileAgeInputView: View {
                     .padding(.top, 20)
                 }
                 .padding(.top, 8)
+                .tooltip(message: state.isShowToolTip ? tooltipMessage : nil, offset: 0)
             }
 
             Spacer()
@@ -118,6 +141,11 @@ public struct AuthProfileAgeInputView: View {
 
         }
         .setLoading(state.isLoading)
+        .onTapGesture {
+            if state.isShowToolTip {
+                intent.toggleToolTip()
+            }
+        }
     }
 }
 

diff --git a/Projects/Model/Model/Sources/SignUp/Domain/SignUpFormDomain.swift b/Projects/Model/Model/Sources/SignUp/Domain/SignUpFormDomain.swift
@@ -153,10 +153,17 @@ public enum GenderType: String, CaseIterable {
     case male
     case female
 
-    var toDto: Components.Schemas.Gender {
+    public var toDto: Components.Schemas.Gender {
         switch self {
         case .male: .MALE
         case .female: .FEMALE
         }
     }
+
+    public var name: String {
+        switch self {
+        case .male: "남성"
+        case .female: "여성"
+        }
+    }
 }