[Feature/#294] 문답화면 segmented control 디자인 수정 (#297)

* feat: SegmentConrtolButtonStyle 구현

* feat: SegmentControlButton 구현

* feat PingPongDetailView SegmentControlButton 적용

Projects/Feature/BottleStorage/Interface/Sources/PingPongDetail/View/PingPongDetail/PingPongDetailView.swift

@@ -63,8 +63,7 @@ private extension PingPongDetailView {
   var tabButtons: some View {
     HStack(spacing: .xs) {
       ForEach(PingPongDetailViewTabType.allCases, id: \.title, content: { tab in
-        OutlinedStyleButton(
-          .small(contentType: .text),
+        SegmentControlButton(
           title: tab.title,
           buttonType: .throttle,
           isSelected: store.selectedTab == tab,

Projects/Shared/DesignSystem/Sources/Components/Button/SegmentControlButton/SegmentControlButton.swift

@@ -0,0 +1,55 @@
+//
+//  SegmentControlButton.swift
+//  SharedDesignSystem
+//
+//  Created by 임현규 on 10/1/24.
+//
+
+import SwiftUI
+
+public struct SegmentControlButton: View {
+  private let title: String
+  private let buttonType: ButtonType
+  private let isSelected: Bool?
+  private let _action: (() -> Void)?
+  private var action: () -> Void {
+    return _action ?? {}
+  }
+
+  public init(
+    title: String,
+    buttonType: ButtonType,
+    isSelected: Bool? = nil,
+    action: (() -> Void)? = nil
+  ) {
+    self.title = title
+    self.buttonType = buttonType
+    self.isSelected = isSelected
+    self._action = action
+  }
+
+  public var body: some View {
+    segmentControlButton
+      .buttonStyle(SegmentControlButtonStyle(isSelected: isSelected))
+  }
+}
+
+// MARK: - Private Views
+private extension SegmentControlButton {
+  var titleText: some View {
+    Text(title)
+      .font(to: .wantedSans(.body))
+  }
+
+  @ViewBuilder
+  var segmentControlButton: some View {
+    switch buttonType {
+    case .debounce:
+      titleText.asDebounceButton(action: action)
+    case .throttle:
+      titleText.asThrottleButton(action: action)
+    case .normal:
+      titleText.asButton(action: action)
+    }
+  }
+}

Projects/Shared/DesignSystem/Sources/Components/Button/SegmentControlButton/SegmentControlButtonStyle.swift

@@ -0,0 +1,57 @@
+//
+//  SegmentControlButtonStyle.swift
+//  SharedDesignSystem
+//
+//  Created by 임현규 on 10/1/24.
+//
+
+import SwiftUI
+
+struct SegmentControlButtonStyle: ButtonStyle {
+  @Environment(\.isEnabled) private var isEnabled: Bool
+  private let isSelected: Bool?
+
+  public init(isSelected: Bool? = nil) {
+    self.isSelected = isSelected
+  }
+
+  func makeBody(configuration: Configuration) -> some View {
+    let buttonState = makeButtonState(configuration)
+
+    return configuration.label
+      .padding(.horizontal, .sm)
+      .frame(height: 42)
+      .foregroundStyle(foregroundColor(buttonState))
+      .overlay(alignment: .bottom) {
+        switch buttonState {
+        case .enabled:
+          EmptyView()
+        case .selected:
+          Divider()
+            .frame(height: 2)
+            .background(to: ColorToken.border(.selected))
+        case .disabled:
+          EmptyView()
+        }
+      }
+  }
+}
+
+// MARK: - Private Methods
+private extension SegmentControlButtonStyle {
+  func makeButtonState(_ configuration: Configuration) -> ButtonStateType {
+    return !isEnabled ? .disabled : configuration.isPressed || isSelected == true ? .selected : .enabled
+  }
+
+  func foregroundColor(_ buttonState: ButtonStateType) -> Color {
+    switch buttonState {
+    case .enabled:
+      return ColorToken.text(.enableSecondary).color
+    case .selected:
+      return ColorToken.text(.selectPrimary).color
+    case .disabled:
+      return ColorToken.text(.disableSecondary).color
+    }
+  }
+}
+