콘텐츠 메인

- 시리즈 탭 UI 페이지 생성
2025-02-21 21:10:16 +09:00
parent cf5d0dc19e
commit 6bd27c5301
19 changed files with 1439 additions and 22 deletions
--- a/SodaLive/Sources/Content/Main/V2/ContentMainViewV2.swift
+++ b/SodaLive/Sources/Content/Main/V2/ContentMainViewV2.swift
@@ -7,12 +7,131 @@

 import SwiftUI

+enum ContentMainTab {
+    case HOME
+    case SERIES
+    case CONTENT
+    case ALARM
+    case ASMR
+    case REPLAY
+    case FREE
+}
+
+struct TabItem {
+    let title: String
+    let tab: ContentMainTab
+}
+
 struct ContentMainViewV2: View {
+    
+    @State private var selectedTab: ContentMainTab = .SERIES
+    
+    let tabItemList = [
+        TabItem(title: "홈", tab: .HOME),
+        TabItem(title: "시리즈", tab: .SERIES),
+        TabItem(title: "단편", tab: .CONTENT),
+        TabItem(title: "모닝콜", tab: .ALARM),
+        TabItem(title: "ASMR", tab: .ASMR),
+        TabItem(title: "다시듣기", tab: .REPLAY),
+        TabItem(title: "무료", tab: .FREE)
+    ]
+    
+    init(selectedTab: ContentMainTab = .SERIES) {
+        self._selectedTab = State(initialValue: selectedTab)
+    }
+    
    var body: some View {
-        Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
+        ZStack {
+            
+            Color.black.ignoresSafeArea()
+            
+            VStack(spacing: 0) {
+                HStack(spacing: 0) {
+                    Text("콘텐츠 마켓")
+                        .font(.custom(Font.bold.rawValue, size: 21.3))
+                        .foregroundColor(Color.button)
+                    
+                    Spacer()
+                    
+                    Image("ic_content_keep")
+                        .onTapGesture {
+                            AppState.shared.setAppStep(step: .myBox(currentTab: .orderlist))
+                        }
+                }
+                .padding(.horizontal, 13.3)
+                
+                ScrollViewReader { proxy in
+                    ScrollView(.horizontal, showsIndicators: false) {
+                        HStack(spacing: 8) {
+                            ForEach(0..<tabItemList.count, id: \.self) { index in
+                                let tabItem = tabItemList[index]
+                                
+                                Text(tabItem.title)
+                                    .font(
+                                        .custom(
+                                            selectedTab == tabItem.tab ?
+                                            Font.bold.rawValue :
+                                                Font.medium.rawValue,
+                                            size: 16
+                                        )
+                                    )
+                                    .foregroundColor(
+                                        selectedTab == tabItem.tab ?
+                                            .button :
+                                                .graybb
+                                    )
+                                    .padding(.horizontal, 12)
+                                    .onTapGesture {
+                                        if selectedTab != tabItem.tab {
+                                            selectedTab = tabItem.tab
+                                            proxy.scrollTo(tabItem.tab, anchor: .center)
+                                        }
+                                    }
+                                    .id(tabItem.tab)
+                            }
+                        }
+                        .padding(.vertical, 15)
+                        .padding(.horizontal, 13.3)
+                    }
+                    .onAppear {
+                        withAnimation {
+                            proxy.scrollTo(selectedTab, anchor: .center)
+                        }
+                    }
+                    .onChange(of: selectedTab) { newTab in
+                        withAnimation {
+                            if newTab == .HOME {
+                                AppState.shared.back()
+                            } else {
+                                proxy.scrollTo(newTab, anchor: .center)
+                            }
+                        }
+                    }
+                }
+                
+                ZStack {
+                    switch selectedTab {
+                    case .HOME:
+                        EmptyView()
+                    case .SERIES:
+                        ContentMainTabSeriesView()
+                    case .CONTENT:
+                        EmptyView()
+                    case .ALARM:
+                        EmptyView()
+                    case .ASMR:
+                        EmptyView()
+                    case .REPLAY:
+                        EmptyView()
+                    case .FREE:
+                        EmptyView()
+                    }
+                }
+            }
+        }
    }
 }

 #Preview {
-    ContentMainViewV2()
+    ContentMainViewV2(selectedTab: .SERIES)
 }