feat(component): 재사용 타이틀 탭 바를 추가한다

SodaLive/Sources/V2/Component/CapsuleTabBar.swift

@@ -0,0 +1,78 @@
+//
+//  CapsuleTabBar.swift
+//  SodaLive
+//
+
+import SwiftUI
+
+struct CapsuleTabBar<Item: Hashable>: View {
+    let items: [Item]
+    @Binding var selectedItem: Item
+    let title: (Item) -> String
+
+    var body: some View {
+        ScrollView(.horizontal, showsIndicators: false) {
+            LazyHStack(alignment: .center, spacing: SodaSpacing.s8) {
+                ForEach(items, id: \.self) { item in
+                    CapsuleTabBarItem(
+                        title: title(item),
+                        isSelected: selectedItem == item,
+                        action: {
+                            selectedItem = item
+                        }
+                    )
+                }
+            }
+            .padding(.horizontal, SodaSpacing.s20)
+        }
+        .frame(maxWidth: .infinity)
+        .frame(height: 52, alignment: .center)
+        .background(Color.black)
+    }
+}
+
+private struct CapsuleTabBarItem: View {
+    let title: String
+    let isSelected: Bool
+    let action: () -> Void
+
+    var body: some View {
+        Button {
+            action()
+        } label: {
+            Text(title)
+                .appFont(.body5)
+                .foregroundColor(Color.white)
+                .lineLimit(1)
+                .padding(.horizontal, SodaSpacing.s12)
+                .padding(.vertical, SodaSpacing.s8)
+                .frame(height: 34)
+                .background(isSelected ? Color.soda400 : Color.black)
+                .clipShape(Capsule())
+                .overlay(
+                    Capsule()
+                        .stroke(isSelected ? Color.soda400 : Color.gray700, lineWidth: 1)
+                )
+        }
+        .buttonStyle(.plain)
+    }
+}
+
+struct CapsuleTabBar_Previews: PreviewProvider {
+    private enum PreviewTab: String, CaseIterable {
+        case recommended = "추천"
+        case ranking = "랭킹"
+        case following = "팔로잉"
+        case live = "라이브"
+        case content = "콘텐츠"
+        case audition = "오디션"
+    }
+
+    static var previews: some View {
+        CapsuleTabBar(
+            items: PreviewTab.allCases,
+            selectedItem: .constant(.recommended),
+            title: { $0.rawValue }
+        )
+    }
+}

SodaLive/Sources/V2/Component/DefaultTitleBar.swift

@@ -0,0 +1,39 @@
+//
+//  DefaultTitleBar.swift
+//  SodaLive
+//
+
+import SwiftUI
+
+struct DefaultTitleBar<Menu: View>: View {
+    let title: String
+    private let menu: Menu
+
+    init(
+        title: String,
+        @ViewBuilder menu: () -> Menu
+    ) {
+        self.title = title
+        self.menu = menu()
+    }
+
+    var body: some View {
+        TitleBar {
+            Text(title)
+                .appFont(.heading2)
+                .foregroundColor(.white)
+                .lineLimit(1)
+                .truncationMode(.tail)
+        } trailing: {
+            menu
+        }
+    }
+}
+
+struct DefaultTitleBar_Previews: PreviewProvider {
+    static var previews: some View {
+        DefaultTitleBar(title: "화면명") {
+            Image("ic_bar_search")
+        }
+    }
+}

SodaLive/Sources/V2/Component/HomeTitleBar.swift

@@ -0,0 +1,32 @@
+//
+//  HomeTitleBar.swift
+//  SodaLive
+//
+
+import SwiftUI
+
+struct HomeTitleBar<Menu: View>: View {
+    private let menu: Menu
+
+    init(@ViewBuilder menu: () -> Menu) {
+        self.menu = menu()
+    }
+
+    var body: some View {
+        TitleBar {
+            Image("img_text_logo_v2")
+                .resizable()
+                .scaledToFit()
+        } trailing: {
+            menu
+        }
+    }
+}
+
+struct HomeTitleBar_Previews: PreviewProvider {
+    static var previews: some View {
+        HomeTitleBar {
+            Image("ic_bar_bell")
+        }
+    }
+}

SodaLive/Sources/V2/Component/TextTabBar.swift

@@ -0,0 +1,51 @@
+//
+//  TextTabBar.swift
+//  SodaLive
+//
+
+import SwiftUI
+
+struct TextTabBar<Item: Hashable>: View {
+    let items: [Item]
+    @Binding var selectedItem: Item
+    let title: (Item) -> String
+
+    var body: some View {
+        HStack(alignment: .center, spacing: SodaSpacing.s20) {
+            ForEach(items.prefix(3), id: \.self) { item in
+                Button {
+                    selectedItem = item
+                } label: {
+                    Text(title(item))
+                        .appFont(.heading3)
+                        .foregroundColor(selectedItem == item ? Color.white : Color.gray600)
+                        .frame(height: 52, alignment: .center)
+                        .contentShape(Rectangle())
+                }
+                .buttonStyle(.plain)
+            }
+            
+            Spacer()
+        }
+        .padding(.horizontal, SodaSpacing.s20)
+        .frame(maxWidth: .infinity)
+        .frame(height: 52, alignment: .leading)
+        .background(Color.black)
+    }
+}
+
+struct TextTabBar_Previews: PreviewProvider {
+    private enum PreviewTab: String, CaseIterable {
+        case recommended = "추천"
+        case ranking = "랭킹"
+        case following = "팔로잉"
+    }
+
+    static var previews: some View {
+        TextTabBar(
+            items: PreviewTab.allCases,
+            selectedItem: .constant(.recommended),
+            title: { $0.rawValue }
+        )
+    }
+}

SodaLive/Sources/V2/Component/TitleBar.swift

@@ -0,0 +1,45 @@
+//
+//  TitleBar.swift
+//  SodaLive
+//
+
+import SwiftUI
+
+struct TitleBar<Leading: View, Trailing: View>: View {
+    private let leading: Leading
+    private let trailing: Trailing
+
+    init(
+        @ViewBuilder leading: () -> Leading,
+        @ViewBuilder trailing: () -> Trailing
+    ) {
+        self.leading = leading()
+        self.trailing = trailing()
+    }
+
+    var body: some View {
+        HStack(alignment: .center, spacing: 0) {
+            leading
+
+            Spacer(minLength: 0)
+
+            trailing
+        }
+        .padding(.horizontal, SodaSpacing.s20)
+        .frame(maxWidth: .infinity)
+        .frame(height: 60, alignment: .center)
+        .background(Color.black)
+    }
+}
+
+struct TitleBar_Previews: PreviewProvider {
+    static var previews: some View {
+        TitleBar {
+            Text("Title")
+                .appFont(.heading3)
+                .foregroundColor(.white)
+        } trailing: {
+            Image("ic_bar_search")
+        }
+    }
+}