✨ OnboardingView 구현

PyeonHaeng · Mar 18, 2024 · d8d401a · d8d401a
1 parent 62c1a75
commit d8d401a
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 59 deletions.
diff --git a/PyeonHaeng-iOS/Sources/HomeComponent.swift b/PyeonHaeng-iOS/Sources/HomeComponent.swift
@@ -1,5 +1,5 @@
 //
-//  AppRootComponent.swift
+//  HomeComponent.swift
 //  PyeonHaeng-iOS
 //
 //  Created by 홍승현 on 2/1/24.
@@ -10,15 +10,15 @@ import HomeAPI
 import HomeAPISupport
 import Network
 
-// MARK: - HomeDependency
+// MARK: - AppRootDependency
 
-protocol HomeDependency {
+protocol AppRootDependency {
   var homeService: HomeServiceRepresentable { get }
 }
 
-// MARK: - AppRootComponent
+// MARK: - HomeComponent
 
-struct HomeComponent: HomeDependency {
+struct HomeComponent: AppRootDependency {
   let homeService: HomeServiceRepresentable
 
   init() {

diff --git a/PyeonHaeng-iOS/Sources/PyeonHaengApp.swift b/PyeonHaeng-iOS/Sources/PyeonHaengApp.swift
@@ -10,7 +10,7 @@ import SwiftUI
 
 @main
 struct PyeonHaengApp: App {
-  private let appComponent = AppRootComponent()
+  private let appComponent = HomeComponent()
 
   init() {
     FontRegistrar.registerFonts() // 앱을 실행하기 전에 폰트를 로드합니다.

diff --git a/PyeonHaeng-iOS/Sources/Scenes/OnboardingScene/OnboardingView.swift b/PyeonHaeng-iOS/Sources/Scenes/OnboardingScene/OnboardingView.swift
@@ -5,76 +5,81 @@
 //  Created by 홍승현 on 1/24/24.
 //
 
+import DesignSystem
 import SwiftUI
 
-// MARK: - OnboardingView
+// MARK: - OnboardingViewd
 
 struct OnboardingView: View {
-  @StateObject private var viewModel = OnboardingViewModel()
+  @State private var currentPage = 0
+  @Environment(\.dismiss) private var dismiss
+  private let pages = OnboardingPage.pages
 
   var body: some View {
     NavigationStack {
-      VStack {
-        TabView(selection: $viewModel.currentPage) {
-          ForEach(0 ..< viewModel.pageCount, id: \.self) { index in
+      ZStack {
+        TabView(selection: $currentPage) {
+          ForEach(pages) { page in
             VStack {
-              Spacer().frame(height: viewModel.spacerHeight(for: index))
-              Image(viewModel.currentImageName)
+              Spacer()
+              page.image
                 .resizable()
                 .aspectRatio(contentMode: .fit)
                 .padding(.horizontal, 40)
               Spacer()
+              Text(LocalizedStringKey(page.title))
+                .multilineTextAlignment(.center)
+                .font(.h2)
+              Spacer().frame(height: 16)
+              Text(LocalizedStringKey(page.body))
+                .font(.body2)
+                .foregroundStyle(Color.gray500)
+                .multilineTextAlignment(.center)
+              Spacer()
+                .frame(height: 120)
             }
-            .tag(index)
+            .tag(page.tag)
           }
         }
-        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
-
-        // 커스텀 페이지 컨트롤
-        OnboardingPageControl(currentPage: $viewModel.currentPage, pageCount: viewModel.pageCount)
-          .padding(.vertical)
-
-        // 본문 제목
-        Text(viewModel.currentTitle)
-          .font(.h2)
-          .transition(.opacity.combined(with: .slide))
-          .animation(.easeInOut, value: viewModel.currentPage)
-
-        Spacer().frame(height: 16)
-
-        // 본문 내용
-        Text(viewModel.currentBody)
-          .font(.body2)
-          .foregroundStyle(Color.gray500)
-          .multilineTextAlignment(.center)
-          .padding(.top, 8)
-          .transition(.opacity.combined(with: .slide))
-          .animation(.easeInOut, value: viewModel.currentPage)
-
-        Spacer().frame(height: 84)
-
-        Button(action: {
-          withAnimation {
-            viewModel.nextPage()
+        VStack {
+          Spacer()
+          OnboardingPageControl(
+            currentPage: $currentPage,
+            pageCount: pages.count
+          )
+          .padding(.top, 100)
+          Button {
+            if currentPage == pages.count - 1 {
+              dismiss()
+            } else {
+              withAnimation {
+                currentPage += 1
+              }
+            }
+          } label: {
+            Text(currentPage == pages.count - 1 ? "편행 시작하기" : "다음")
+              .font(.h5)
+              .foregroundStyle(.white)
+              .frame(maxWidth: .infinity)
+              .padding()
+              .background(Color.green500)
+              .clipShape(.rect(cornerRadius: 10))
+              .padding(.horizontal, 20)
           }
-        }) {
-          Text(viewModel.nextButtonText)
-            .font(.h5)
-            .foregroundStyle(.white)
-            .frame(maxWidth: .infinity)
-            .padding()
-            .background(Color.green500)
-            .clipShape(.rect(cornerRadius: 10))
-            .padding(.horizontal, 20)
+          .padding(.bottom, 8)
+          .padding(.top, 208)
         }
-        .padding(.bottom, 8)
-      }
+      } // ZStack
+      .tabViewStyle(.page)
       .toolbar {
         ToolbarItem(placement: .topBarTrailing) {
-          Button(viewModel.skipButtonText) {
-            // 건너뛰기 버튼 액션
+          Button {
+            dismiss()
+          } label: {
+            Text("건너뛰기")
+              .font(.b2)
+              .foregroundStyle(Color.green500)
           }
-          .foregroundStyle(Color.green500)
         }
       }
     }

diff --git a/PyeonHaeng-iOS/Sources/Scenes/SplashScene/SplashView.swift b/PyeonHaeng-iOS/Sources/Scenes/SplashScene/SplashView.swift
@@ -10,9 +10,9 @@ import SwiftUI
 
 struct SplashView: View {
   @State private var showingSplash: Bool = true
-  private let dependency: HomeDependency
+  private let dependency: AppRootDependency
 
-  init(dependency: HomeDependency) {
+  init(dependency: AppRootDependency) {
     self.dependency = dependency
   }
 
@@ -40,5 +40,5 @@ struct SplashView: View {
 }
 
 #Preview {
-  SplashView(dependency: AppRootComponent())
+  SplashView(dependency: HomeComponent())
 }