[Feat/#30] 홈뷰 스크린타임 구현

Team-HMH · May 14, 2024 · 9d1863d · 9d1863d
1 parent 4f984f8
commit 9d1863d
Showing 1 changed file with 69 additions and 58 deletions.
diff --git a/HMH_iOS/HMH_iOS/Presentation/Home/Views/HomeView.swift b/HMH_iOS/HMH_iOS/Presentation/Home/Views/HomeView.swift
@@ -32,62 +32,12 @@ struct HomeView: View {
 
     var body: some View {
         ScrollView {
-            VStack(alignment: .leading) {
-                ZStack(alignment: .topLeading) {
-                    LottieView(animation: .named("Main-A-final.json"))
-                        .playing(loopMode: .autoReverse)
-                        .resizable()
-                        .aspectRatio(contentMode: .fit)
-                    VStack(alignment: .leading){
-                        Text(StringLiteral.Home.usageStatusA)
-                            .font(.text1_medium_22)
-                            .foregroundStyle(.whiteText)
-                            .frame(alignment: .topLeading)
-                            .padding(EdgeInsets(top: 8,
-                                                leading: 20,
-                                                bottom: 0,
-                                                trailing: 0))
-                        Spacer()
-                        VStack(alignment: .leading) {
-                            Text("목표 사용 시간 3시간 중")
-                                .font(.detail4_medium_12)
-                                .foregroundStyle(.gray2)
-                                .frame(alignment: .leading)
-                                .padding(EdgeInsets(top: 0,
-                                                    leading: 20,
-                                                    bottom: 0,
-                                                    trailing: 0))
-                            HStack {
-                                DeviceActivityReport(context, filter: filter)
-                                    .frame(maxHeight: 35, alignment: .leading)
-                                Spacer()
-                                Text("20분 남음")
-                                    .font(.detail3_semibold_12)
-                                    .foregroundStyle(.whiteText)
-                            }
-                            . padding(EdgeInsets(top: 2,
-                                                 leading: 20,
-                                                 bottom: 24,
-                                                 trailing: 20))
-                            ProgressView(value: 3, total: 10)
-                                .foregroundStyle(.gray5)
-                                .padding(EdgeInsets(top: 0,
-                                                    leading: 20,
-                                                    bottom: 0,
-                                                    trailing: 20))
-                                .tint(.whiteText)
-                        }
-                        .padding(.bottom, -20)
-                    }
-                }
-                .padding(.bottom, 60)
-                DeviceActivityReport(appContext, filter: appFilter)
-            }
-            .background(.blackground)
-            .customNavigationBar(title: StringLiteral.NavigationBar.home,
-                                 showBackButton: false,
-                                 showPointButton: false)
+            main
         }
+        .customNavigationBar(title: StringLiteral.NavigationBar.home,
+                             showBackButton: false,
+                             showPointButton: false)
+        .background(.blackground)
         .onAppear {
             screenTimeViewModel.requestAuthorization()
 
@@ -103,10 +53,71 @@ struct HomeView: View {
                 categories: screenTimeViewModel.selectionToDiscourage.categoryTokens
             )
         }
-        .background(.blackground)
     }
 }
 
-#Preview {
-    HomeView()
+extension HomeView {
+    var main: some View {
+        VStack {
+            headerView
+            DeviceActivityReport(appContext, filter: appFilter)
+                .frame(height: 80 * CGFloat(screenTimeViewModel.selectionToDiscourage.applicationTokens.count))
+                .padding(.bottom, 20)
+        }
+    }
+
+    var headerView: some View {
+        VStack(alignment: .leading) {
+            ZStack(alignment: .topLeading) {
+                LottieView(animation: .named("Main-A-final.json"))
+                    .playing(loopMode: .autoReverse)
+                    .resizable()
+                    .aspectRatio(contentMode: .fit)
+                VStack(alignment: .leading){
+                    Text(StringLiteral.Home.usageStatusA)
+                        .font(.text1_medium_22)
+                        .foregroundStyle(.whiteText)
+                        .frame(alignment: .topLeading)
+                        .padding(EdgeInsets(top: 8,
+                                            leading: 20,
+                                            bottom: 0,
+                                            trailing: 0))
+                    Spacer()
+                    VStack(alignment: .leading) {
+                        Text("목표 사용 시간 3시간 중")
+                            .font(.detail4_medium_12)
+                            .foregroundStyle(.gray2)
+                            .frame(alignment: .leading)
+                            .padding(EdgeInsets(top: 0,
+                                                leading: 20,
+                                                bottom: 0,
+                                                trailing: 0))
+                        HStack {
+                            DeviceActivityReport(context, filter: filter)
+                                .frame(maxHeight: 35, alignment: .leading)
+                            Spacer()
+                            Text("20분 남음")
+                                .font(.detail3_semibold_12)
+                                .foregroundStyle(.whiteText)
+                        }
+                        . padding(EdgeInsets(top: 2,
+                                             leading: 20,
+                                             bottom: 24,
+                                             trailing: 20))
+                        ProgressView(value: 3, total: 10)
+                            .foregroundStyle(.gray5)
+                            .padding(EdgeInsets(top: 0,
+                                                leading: 20,
+                                                bottom: 0,
+                                                trailing: 20))
+                            .tint(.whiteText)
+                    }
+                }
+            }
+        }
+    }
 }
+
+//#Preview {
+//    HomeView()
+//}