[WEAV-51] Tooltip View Modifier, Preview 구현

Projects/DesignSystem/DesignCore/Sources/Tooltip/ToolTip.swift

@@ -0,0 +1,65 @@
+//
+//  TooltipView.swift
+//  ComponentsKit
+//
+//  Created by 김지수 on 9/22/24.
+//  Copyright © 2024 com.weave. All rights reserved.
+//
+
+import SwiftUI
+
+extension View {
+    public func tooltip(message: String, offset: CGFloat) -> some View {
+        return modifier(ToolTipViewModifier(message: message, offset: offset))
+    }
+}
+
+struct ToolTipViewModifier: ViewModifier {
+    let message: String
+    let offset: CGFloat
+
+    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()
+                            }
+                            .offset(y: 12)
+                        }
+                    }
+                    .frame(width: 300)
+                    .offset(y: -offset)
+            }
+    }
+}
+
+fileprivate struct InvertedTriangle: View {
+    let color: Color = DesignCore.Colors.grey400
+
+    fileprivate var body: some View {
+        GeometryReader { geometry in
+            Path { path in
+                let width = geometry.size.width
+                let height = geometry.size.height
+
+                path.move(to: CGPoint(x: 0, y: 0))
+                path.addLine(to: CGPoint(x: width, y: 0))
+                path.addLine(to: CGPoint(x: width / 2, y: height))
+                path.closeSubpath()
+            }
+            .fill(color)
+        }
+        .frame(width: 16, height: 12)
+    }
+}

Projects/Features/DesignPreview/Sources/DesignPreview.swift

@@ -16,6 +16,7 @@ fileprivate enum PreviewTypes: CaseIterable {
     case shadow
     case textInput
     case toast
+    case tooltip
 
     var name: String {
         switch self {
@@ -26,6 +27,7 @@ fileprivate enum PreviewTypes: CaseIterable {
         case .shadow: return "Shadow"
         case .textInput: return "Text Input"
         case .toast: return "Toast"
+        case .tooltip: return "ToolTip"
         }
     }
 
@@ -46,6 +48,8 @@ fileprivate enum PreviewTypes: CaseIterable {
             DesignTextInputPreview()
         case .toast:
             DesignToastView()
+        case .tooltip:
+            DesignToolTipView()
         }
     }
 }

Projects/Features/DesignPreview/Sources/DesignToolTipView.swift

@@ -0,0 +1,48 @@
+//
+//  DesignToolTipView.swift
+//  DesignPreview
+//
+//  Created by 김지수 on 9/22/24.
+//  Copyright © 2024 com.weave. All rights reserved.
+//
+
+import SwiftUI
+import DesignCore
+
+struct DesignToolTipView: View {
+    var body: some View {
+        ZStack {
+            DesignCore.Colors.background
+
+            VStack(spacing: 60) {
+                RoundedRectangle(cornerRadius: 10)
+                    .frame(width: 200, height: 100)
+                    .tooltip(
+                        message: "현재 상대와 만난 시간을 볼 수 있어요!",
+                        offset: 100
+                    )
+
+                RoundedRectangle(cornerRadius: 10)
+                    .frame(width: 200, height: 100)
+                    .tooltip(
+                        message: "매칭된 상대의 프로필을 볼 수 있어요👀\n미공개 프로필은 날짜에 따라 업데이트 돼요.",
+                        offset: 100
+                    )
+
+                RoundedRectangle(cornerRadius: 10)
+                    .frame(width: 200, height: 100)
+                    .tooltip(
+                        message: "1일차 시작! 큐피드 WEAVY🧚와 함께\n매칭된 상대와의 채팅에서 서로를 알아가요.\n외모췍!!",
+                        offset: 100
+                    )
+            }
+        }
+        .ignoresSafeArea()
+        .navigationTitle("Tooltip")
+        .navigationBarTitleDisplayMode(.inline)
+    }
+}
+
+#Preview {
+    DesignToolTipView()
+}