[CAT-172] 툴팁 구현 (#19)

Projects/Shared/DesignSystem/Example/Sources/ButtonDetailView.swift → Projects/Shared/DesignSystem/Example/Sources/Component/ButtonDetailView.swift

@@ -195,29 +195,19 @@ struct ButtonDetailView: View {
             .disabled(false)
           }
         }
-
-//        VStack {
-//          Text("Secondary")
-//            .frame(maxWidth: .infinity)
-//            .foregroundStyle(Global.Color.white)
-//            .background(Global.Color.black)
-//          HStack(spacing: 10) {
-//            Button(
-//              icon: Image(systemName: "center"),
-//              action: { /*action*/ }
-//            )
-//            .buttonStyle(.round(color: .secondary))
-//            
-//            Button(
-//              icon: Image(systemName: "center"),
-//              action: { /*action*/ }
-//            )
-//            .buttonStyle(.round(color: .primary))
-//          }
-//        }
-
-
-
+      }
+
+      VStack(spacing: 40) {
+        Text("Bottom CTA")
+          .font(.title)
+        VStack {
+          Button(
+            title: "Button",
+            action: { /*action*/ }
+          )
+          .buttonStyle(.box(size: .large, color: .primary, width: .low))
+          .padding(.horizontal, 20)
+        }
       }
     }
   }

Projects/Shared/DesignSystem/Example/Sources/Component/TooltipDetailView.swift

@@ -0,0 +1,115 @@
+//
+//  TooltipDetailView.swift
+//  DesignSystemExample
+//
+//  Created by devMinseok on 8/7/24.
+//  Copyright © 2024 PomoNyang. All rights reserved.
+//
+
+import SwiftUI
+
+import DesignSystem
+
+struct TooltipDetailView: View {
+  @State var downDirectionTooltip: DownDirectionTooltip?
+  @State var upDirectionTooltip: UpDirectionTooltip?
+  @State var downDirectionWithDimTooltip: DownDirectionWithDimTooltip?
+  @State var upDirectionWithDimTooltip: UpDirectionWithDimTooltip?
+
+  let downDirectionTooltip_ = DownDirectionTooltip()
+  let upDirectionTooltip_ = UpDirectionTooltip()
+  let downDirectionWithDimTooltip_ = DownDirectionWithDimTooltip()
+  let upDirectionWithDimTooltip_ = UpDirectionWithDimTooltip()
+
+
+  var body: some View {
+    VStack {
+      Button(
+        title: "Direction: .down, Color: .white, dim: false",
+        action: {
+          downDirectionTooltip = downDirectionTooltip_
+        }
+      )
+      .buttonStyle(.box(size: .large, color: .primary))
+      .setTooltipTarget(tooltip: downDirectionTooltip_)
+
+      Button(
+        title: "Direction: .up, Color: .black, dim: false",
+        action: {
+          upDirectionTooltip = upDirectionTooltip_
+        }
+      )
+      .buttonStyle(.box(size: .large, color: .primary))
+      .setTooltipTarget(tooltip: upDirectionTooltip_)
+
+      Button(
+        title: "Direction: .down, Color: .white, dim: true",
+        action: {
+          downDirectionWithDimTooltip = downDirectionWithDimTooltip_
+        }
+      )
+      .buttonStyle(.box(size: .large, color: .primary))
+      .setTooltipTarget(tooltip: downDirectionWithDimTooltip_)
+
+      Button(
+        title: "Direction: .up, Color: .black, dim: true",
+        action: {
+          upDirectionWithDimTooltip = upDirectionWithDimTooltip_
+        }
+      )
+      .buttonStyle(.box(size: .large, color: .primary))
+      .setTooltipTarget(tooltip: upDirectionWithDimTooltip_)
+    }
+    .frame(maxWidth: .infinity, maxHeight: .infinity)
+    .background(.yellow)
+    .tooltipDestination(tooltip: $downDirectionTooltip)
+    .tooltipDestination(tooltip: $upDirectionTooltip)
+    .tooltipDestination(tooltip: $downDirectionWithDimTooltip)
+    .tooltipDestination(tooltip: $upDirectionWithDimTooltip)
+  }
+}
+
+
+
+struct DownDirectionTooltip: Tooltip {
+  var title: Text { Text("DownDirectionTooltip") }
+  var color: TooltipColor { .white }
+  var direction: TooltipDirection { .down }
+  var targetCornerRadius: CGFloat? { Alias.BorderRadius.small }
+  var dimEnabled: Bool { false }
+  var padding: CGFloat { 12 }
+}
+
+struct UpDirectionTooltip: Tooltip {
+  var title: Text { Text("UpDirectionTooltip") }
+  var color: TooltipColor { .black }
+  var direction: TooltipDirection { .up }
+  var targetCornerRadius: CGFloat? { Alias.BorderRadius.small }
+  var dimEnabled: Bool { false }
+  var padding: CGFloat { 12 }
+}
+
+struct DownDirectionWithDimTooltip: Tooltip {
+  var title: Text { Text("DownDirectionWithDimTooltip") }
+  var color: TooltipColor { .white }
+  var direction: TooltipDirection { .down }
+  var targetCornerRadius: CGFloat? { Alias.BorderRadius.small }
+  var dimEnabled: Bool { true }
+  var padding: CGFloat { 12 }
+}
+
+struct UpDirectionWithDimTooltip: Tooltip {
+  var title: Text { Text("UpDirectionWithDimTooltip") }
+  var color: TooltipColor { .black }
+  var direction: TooltipDirection { .up }
+  var targetCornerRadius: CGFloat? { Alias.BorderRadius.small }
+  var dimEnabled: Bool { true }
+  var padding: CGFloat { 12 }
+}
+
+
+// Preview환경에서만 크래시 발생:
+// some View와 같은 제너릭 타입은 프리뷰에서 타입 추론에 문제가 생길 수 있습니다. 특히 프리뷰의 경우, 다양한 뷰가 서로 다른 타입으로 처리될 수 있어, 뷰의 타입이 명확하지 않은 경우 문제가 발생할 수 있습니다.
+//#Preview {
+//  TooltipDetailView()
+//}

Projects/Shared/DesignSystem/Example/Sources/ContentView.swift

@@ -49,7 +49,7 @@ struct ContentView: View {
           }
 
           NavigationLink {
-
+            TooltipDetailView()
           } label: {
             Text("Tooltip")
           }
@@ -71,18 +71,6 @@ struct ContentView: View {
           } label: {
             Text("Toast")
           }
-
-          NavigationLink {
-
-          } label: {
-            Text("System")
-          }
-
-          NavigationLink {
-
-          } label: {
-            Text("List")
-          }
         }
       }
       .navigationTitle("DesignSystem")

Projects/Shared/DesignSystem/Example/Sources/FontDetailView.swift → Projects/Shared/DesignSystem/Example/Sources/Typography/FontDetailView.swift

@@ -12,7 +12,7 @@ import DesignSystem
 
 struct FontDetailView: View {
   var body: some View {
-    VStack(alignment: .leading, spacing: 10) {
+    VStack(alignment: .leading, spacing: .zero) {
       Text("Time")
         .font(Typography.time)
       Text("Header1")

Projects/Shared/DesignSystem/Project.swift

@@ -20,8 +20,6 @@ let project: Project = .makeTMABasedProject(
   scripts: [],
   targets: [
     .sources,
-    .tests,
-    .testing,
     .example
   ],
   dependencies: [:],

Projects/Shared/DesignSystem/Sources/Component/Button/BarButtonDetail.swift

@@ -33,7 +33,7 @@ public struct BarButtonDetail<Title: View, LeftIcon: View, RightIcon: View>: Vie
   private let leftIcon: LeftIcon
   private let rightIcon: RightIcon
 
-  init (
+  init(
     @ViewBuilder title: () -> Title,
     @ViewBuilder leftIcon: () -> LeftIcon,
     @ViewBuilder rightIcon: () -> RightIcon

Projects/Shared/DesignSystem/Sources/Component/Button/Box/BoxButtonStyle.swift

@@ -12,18 +12,22 @@ public struct BoxButtonStyle: ButtonStyle {
   @Environment(\.isEnabled) var isEnabled
   let size: BoxButtonStyleSize
   let color: BoxButtonStyleColor
+  let width: ButtonHuggingPriorityHorizontal
 
   public init(
     size: BoxButtonStyleSize,
-    color: BoxButtonStyleColor
+    color: BoxButtonStyleColor,
+    width: ButtonHuggingPriorityHorizontal
   ) {
     self.size = size
     self.color = color
+    self.width = width
   }
 
   public func makeBody(configuration: Configuration) -> some View {
     configuration.label
       .frame(height: size.buttonHeight)
+      .frame(maxWidth: width.width)
       .font(size.font)
       .padding(.horizontal, size.horizontalSideSpacing)
       .background(
@@ -65,9 +69,10 @@ public struct BoxButtonStyle: ButtonStyle {
 extension ButtonStyle where Self == BoxButtonStyle {
   public static func box(
     size: BoxButtonStyleSize,
-    color: BoxButtonStyleColor
+    color: BoxButtonStyleColor,
+    width: ButtonHuggingPriorityHorizontal = .high
   ) -> Self {
-    return BoxButtonStyle(size: size, color: color)
+    return BoxButtonStyle(size: size, color: color, width: width)
   }
 }
 

Projects/Shared/DesignSystem/Sources/Component/Button/Box/BoxButtonStyleSize.swift

@@ -26,7 +26,7 @@ extension BoxButtonStyleSize {
     }
   }
 
-  var font: Font {
+  var font: Typography {
     switch self {
     case .large:
       Typography.header5

Projects/Shared/DesignSystem/Sources/Component/Button/ButtonHuggingPriorityHorizontal.swift

@@ -0,0 +1,25 @@
+//
+//  ButtonHuggingPriorityHorizontal.swift
+//  DesignSystem
+//
+//  Created by devMinseok on 8/10/24.
+//  Copyright © 2024 PomoNyang. All rights reserved.
+//
+
+import Foundation
+
+public enum ButtonHuggingPriorityHorizontal {
+  case high
+  case low
+}
+
+extension ButtonHuggingPriorityHorizontal {
+  var width: CGFloat? {
+    switch self {
+    case .high:
+      return nil
+    case .low:
+      return .infinity
+    }
+  }
+}

Projects/Shared/DesignSystem/Sources/Component/Button/Text/TextButtonStyleSize.swift

@@ -26,7 +26,7 @@ extension TextButtonStyleSize {
     }
   }
 
-  var font: Font {
+  var font: Typography {
     switch self {
     case .large:
       Typography.header5

Projects/Shared/DesignSystem/Sources/Component/Tooltip/ExcludeRoundedRectMask.swift

@@ -0,0 +1,30 @@
+//
+//  ExcludeRoundedRectMask.swift
+//  DesignSystem
+//
+//  Created by devMinseok on 8/9/24.
+//  Copyright © 2024 PomoNyang. All rights reserved.
+//
+
+import SwiftUI
+
+struct ExcludeRoundedRectMask: View {
+  let excludedRect: CGRect
+  let cornerRadius: CGFloat
+
+  var body: some View {
+    GeometryReader { geometry in
+      let fullRect = geometry.frame(in: .local)
+
+      Path { path in
+        path.addRect(fullRect)
+
+        let roundedRect = RoundedRectangle(cornerRadius: cornerRadius)
+          .path(in: excludedRect)
+        path.addPath(roundedRect)
+      }
+      .fill(style: FillStyle(eoFill: true))
+    }
+    .ignoresSafeArea()
+  }
+}

Projects/Shared/DesignSystem/Sources/Component/Tooltip/FrameMeasurePreferenceKey.swift

@@ -0,0 +1,21 @@
+//
+//  FrameMeasurePreferenceKey.swift
+//  DesignSystem
+//
+//  Created by devMinseok on 8/9/24.
+//  Copyright © 2024 PomoNyang. All rights reserved.
+//
+
+import SwiftUI
+
+struct FrameMeasurePreferenceKey: PreferenceKey {
+  typealias Value = [AnyHashable: CGRect]
+
+  static var defaultValue: Value = Value()
+
+  static func reduce(value: inout Value, nextValue: () -> Value) {
+    value.merge(nextValue()) { _, new in
+      new
+    }
+  }
+}

Projects/Shared/DesignSystem/Sources/Component/Tooltip/OverlayWithOnPreferenceChange.swift

@@ -0,0 +1,51 @@
+//
+//  OverlayWithOnPreferenceChange.swift
+//  DesignSystem
+//
+//  Created by devMinseok on 8/9/24.
+//  Copyright © 2024 PomoNyang. All rights reserved.
+//
+
+import SwiftUI
+
+struct OverlayWithOnPreferenceChange<
+  K, OverlayContent
+>: ViewModifier where K: PreferenceKey, K.Value: Equatable, OverlayContent: View {
+  let preferenceKey: K.Type
+  let contentForOverlay: (K.Value) -> OverlayContent
+  @State var value: K.Value?
+
+  init(
+    preferenceKey: K.Type,
+    @ViewBuilder contentForOverlay: @escaping (K.Value) -> OverlayContent
+  ) {
+    self.preferenceKey = preferenceKey
+    self.contentForOverlay = contentForOverlay
+  }
+
+  func body(content: Content) -> some View {
+    content
+      .overlay {
+        if let value {
+          contentForOverlay(value)
+        }
+      }
+      .onPreferenceChange(preferenceKey) { value in
+        self.value = value
+      }
+  }
+}
+
+extension View {
+  func overlayWithOnPreferenceChange<K, Content>(
+    _ key: K.Type,
+    @ViewBuilder content: @escaping (K.Value) -> Content
+  ) -> some View where K: PreferenceKey, K.Value: Equatable, Content: View {
+    modifier(
+      OverlayWithOnPreferenceChange(
+        preferenceKey: key,
+        contentForOverlay: content
+      )
+    )
+  }
+}