[Feat] 온보딩 ~ 앨범선택 뷰 UI 구현

PophoryPractice/PophoryPractice.xcodeproj/project.pbxproj

@@ -7,7 +7,17 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
+		3B2842F42C4944D500873964 /* pophoryButton.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3B2842F32C4944D500873964 /* pophoryButton.swift */; };
+		3B33A4FA2C58EC0200CE376C /* OnboardingView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3B33A4F92C58EC0200CE376C /* OnboardingView.swift */; };
+		3B9417432C5A5727002DAE37 /* PophoryTabView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3B9417422C5A5727002DAE37 /* PophoryTabView.swift */; };
+		3B9417462C5A5B75002DAE37 /* LoggedStateModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3B9417452C5A5B75002DAE37 /* LoggedStateModel.swift */; };
+		3BA899812C3E735A002C4213 /* albumModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3BA899802C3E735A002C4213 /* albumModel.swift */; };
+		3BA899842C3E7AF7002C4213 /* HomeView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3BA899832C3E7AF7002C4213 /* HomeView.swift */; };
+		3BA899862C3E7BB8002C4213 /* SelectAlbumCoverView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3BA899852C3E7BB8002C4213 /* SelectAlbumCoverView.swift */; };
+		3BA899882C3E8F46002C4213 /* AlbumIconView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3BA899872C3E8F46002C4213 /* AlbumIconView.swift */; };
 		3BC648FD2C2C53CD000BDAFA /* Colors.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 3BC648FC2C2C53CD000BDAFA /* Colors.xcassets */; };
+		3BEA3C532C57E49C00F55311 /* MyPageView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3BEA3C522C57E49C00F55311 /* MyPageView.swift */; };
+		3BEA3C552C57E5CC00F55311 /* AlbumDetailView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3BEA3C542C57E5CC00F55311 /* AlbumDetailView.swift */; };
 		3BFF3CF32C2C4F04001460A7 /* PophoryPracticeApp.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3BFF3CF22C2C4F04001460A7 /* PophoryPracticeApp.swift */; };
 		3BFF3CF52C2C4F04001460A7 /* ContentView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3BFF3CF42C2C4F04001460A7 /* ContentView.swift */; };
 		3BFF3CF72C2C4F05001460A7 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 3BFF3CF62C2C4F05001460A7 /* Assets.xcassets */; };
@@ -37,7 +47,17 @@
 /* End PBXContainerItemProxy section */
 
 /* Begin PBXFileReference section */
+		3B2842F32C4944D500873964 /* pophoryButton.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = pophoryButton.swift; sourceTree = "<group>"; };
+		3B33A4F92C58EC0200CE376C /* OnboardingView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OnboardingView.swift; sourceTree = "<group>"; };
+		3B9417422C5A5727002DAE37 /* PophoryTabView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PophoryTabView.swift; sourceTree = "<group>"; };
+		3B9417452C5A5B75002DAE37 /* LoggedStateModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LoggedStateModel.swift; sourceTree = "<group>"; };
+		3BA899802C3E735A002C4213 /* albumModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = albumModel.swift; sourceTree = "<group>"; };
+		3BA899832C3E7AF7002C4213 /* HomeView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HomeView.swift; sourceTree = "<group>"; };
+		3BA899852C3E7BB8002C4213 /* SelectAlbumCoverView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SelectAlbumCoverView.swift; sourceTree = "<group>"; };
+		3BA899872C3E8F46002C4213 /* AlbumIconView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AlbumIconView.swift; sourceTree = "<group>"; };
 		3BC648FC2C2C53CD000BDAFA /* Colors.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Colors.xcassets; sourceTree = "<group>"; };
+		3BEA3C522C57E49C00F55311 /* MyPageView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MyPageView.swift; sourceTree = "<group>"; };
+		3BEA3C542C57E5CC00F55311 /* AlbumDetailView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AlbumDetailView.swift; sourceTree = "<group>"; };
 		3BFF3CEF2C2C4F04001460A7 /* PophoryPractice.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = PophoryPractice.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		3BFF3CF22C2C4F04001460A7 /* PophoryPracticeApp.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PophoryPracticeApp.swift; sourceTree = "<group>"; };
 		3BFF3CF42C2C4F04001460A7 /* ContentView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ContentView.swift; sourceTree = "<group>"; };
@@ -77,6 +97,55 @@
 /* End PBXFrameworksBuildPhase section */
 
 /* Begin PBXGroup section */
+		3B33A4F82C58EB5400CE376C /* Onboarding */ = {
+			isa = PBXGroup;
+			children = (
+				3B33A4F92C58EC0200CE376C /* OnboardingView.swift */,
+			);
+			path = Onboarding;
+			sourceTree = "<group>";
+		};
+		3B9417412C5A571C002DAE37 /* TabView */ = {
+			isa = PBXGroup;
+			children = (
+				3B9417422C5A5727002DAE37 /* PophoryTabView.swift */,
+			);
+			path = TabView;
+			sourceTree = "<group>";
+		};
+		3B9417442C5A5B66002DAE37 /* Model */ = {
+			isa = PBXGroup;
+			children = (
+				3B9417452C5A5B75002DAE37 /* LoggedStateModel.swift */,
+			);
+			path = Model;
+			sourceTree = "<group>";
+		};
+		3BA8997F2C3E734E002C4213 /* Yunseo */ = {
+			isa = PBXGroup;
+			children = (
+				3BA899822C3E7AEE002C4213 /* View */,
+				3BA899802C3E735A002C4213 /* albumModel.swift */,
+			);
+			path = Yunseo;
+			sourceTree = "<group>";
+		};
+		3BA899822C3E7AEE002C4213 /* View */ = {
+			isa = PBXGroup;
+			children = (
+				3B9417442C5A5B66002DAE37 /* Model */,
+				3B9417412C5A571C002DAE37 /* TabView */,
+				3B33A4F82C58EB5400CE376C /* Onboarding */,
+				3BA899832C3E7AF7002C4213 /* HomeView.swift */,
+				3BA899852C3E7BB8002C4213 /* SelectAlbumCoverView.swift */,
+				3BA899872C3E8F46002C4213 /* AlbumIconView.swift */,
+				3B2842F32C4944D500873964 /* pophoryButton.swift */,
+				3BEA3C522C57E49C00F55311 /* MyPageView.swift */,
+				3BEA3C542C57E5CC00F55311 /* AlbumDetailView.swift */,
+			);
+			path = View;
+			sourceTree = "<group>";
+		};
 		3BFF3CE62C2C4F04001460A7 = {
 			isa = PBXGroup;
 			children = (
@@ -100,6 +169,7 @@
 		3BFF3CF12C2C4F04001460A7 /* PophoryPractice */ = {
 			isa = PBXGroup;
 			children = (
+				3BA8997F2C3E734E002C4213 /* Yunseo */,
 				3BFF3CF22C2C4F04001460A7 /* PophoryPracticeApp.swift */,
 				3BFF3CF42C2C4F04001460A7 /* ContentView.swift */,
 				3BFF3CF62C2C4F05001460A7 /* Assets.xcassets */,
@@ -269,8 +339,18 @@
 			files = (
 				3BFF3CF52C2C4F04001460A7 /* ContentView.swift in Sources */,
 				3BFF3D1F2C2C501A001460A7 /* YunseoView.swift in Sources */,
+				3B9417432C5A5727002DAE37 /* PophoryTabView.swift in Sources */,
 				3BFF3D1D2C2C5012001460A7 /* JoonView.swift in Sources */,
+				3BA899882C3E8F46002C4213 /* AlbumIconView.swift in Sources */,
+				3BA899842C3E7AF7002C4213 /* HomeView.swift in Sources */,
+				3BA899812C3E735A002C4213 /* albumModel.swift in Sources */,
+				3BA899862C3E7BB8002C4213 /* SelectAlbumCoverView.swift in Sources */,
+				3BEA3C532C57E49C00F55311 /* MyPageView.swift in Sources */,
+				3BEA3C552C57E5CC00F55311 /* AlbumDetailView.swift in Sources */,
+				3B33A4FA2C58EC0200CE376C /* OnboardingView.swift in Sources */,
+				3B9417462C5A5B75002DAE37 /* LoggedStateModel.swift in Sources */,
 				3BFF3CF32C2C4F04001460A7 /* PophoryPracticeApp.swift in Sources */,
+				3B2842F42C4944D500873964 /* pophoryButton.swift in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

PophoryPractice/PophoryPractice/ContentView.swift

@@ -8,17 +8,14 @@
 import SwiftUI
 
 struct ContentView: View {
+	@EnvironmentObject private var appState: AppState
+
     var body: some View {
-        VStack {
-            Image(systemName: "globe")
-                .imageScale(.large)
-                .foregroundStyle(.tint)
-            Text("Hello, world!")
-        }
-        .padding()
+        YunseoView()
     }
 }
 
 #Preview {
     ContentView()
+		.environmentObject(AppState())
 }

PophoryPractice/PophoryPractice/PophoryPracticeApp.swift

@@ -9,9 +9,12 @@ import SwiftUI
 
 @main
 struct PophoryPracticeApp: App {
+	@StateObject private var appState = AppState()
+
     var body: some Scene {
         WindowGroup {
-            ContentView()
+            YunseoView()
+				.environmentObject(appState)
         }
     }
 }

PophoryPractice/PophoryPractice/Yunseo/View/AlbumDetailView.swift

@@ -0,0 +1,18 @@
+//
+//  AlbumDetailView.swift
+//  PophoryPractice
+//
+//  Created by 강윤서 on 7/29/24.
+//
+
+import SwiftUI
+
+struct AlbumDetailView: View {
+    var body: some View {
+        Text("Album Detail View")
+    }
+}
+
+#Preview {
+    AlbumDetailView()
+}

PophoryPractice/PophoryPractice/Yunseo/View/AlbumIconView.swift

@@ -0,0 +1,24 @@
+//
+//  AlbumIconView.swift
+//  PophoryPractice
+//
+//  Created by 강윤서 on 7/10/24.
+//
+
+import SwiftUI
+
+struct AlbumIconView: View {
+    @Binding var isSelectedIcon: UUID
+    let element: AlbumIconModel
+
+    var body: some View {
+        return (element.id == isSelectedIcon ? selectIcon(for: isSelectedIcon): element.iconImage)
+    }
+
+    private func selectIcon(for id: UUID) -> Image {
+        if let index = AlbumIconModel.albumIcons.firstIndex(where: {$0.id == id}) {
+            return AlbumSelectIconModel.albumSelectIcons[index].iconImage
+        }
+        return Image(systemName: "circle")
+    }
+}

PophoryPractice/PophoryPractice/Yunseo/View/HomeView.swift

@@ -0,0 +1,71 @@
+//
+//  HomeView.swift
+//  PophoryPractice
+//
+//  Created by 강윤서 on 7/10/24.
+//
+
+import SwiftUI
+
+struct HomeView: View {
+    var body: some View {
+		NavigationStack {
+			VStack {
+				HStack {
+					Text("Pophory")
+						.font(.system(size: 40))
+						.fontWeight(.heavy)
+						.padding(.init(top: 26, leading: 20, bottom: 0, trailing: 0))
+
+					Spacer()
+				}
+
+				HStack {
+					Text("포포리 앨범에\n소중한 추억을 보관해봐!")
+						.padding(.leading, 20)
+						.font(.system(size: 24))
+						.fontWeight(.semibold)
+
+					Spacer()
+
+					NavigationLink {
+						SelectAlbumCoverView()
+							.toolbar(.hidden, for: .tabBar)
+							.navigationTitle("앨범 테마")
+					} label: {
+						Image(uiImage: .add)
+							.padding(.top, 34)
+					}
+
+					Spacer()
+				}
+				.padding(.top, 25)
+
+				NavigationLink {
+					AlbumDetailView()
+						.toolbar(.hidden, for: .tabBar)
+						.navigationTitle("앨범")
+				} label: {
+					Image(.icAlbumCoverFamily1)
+						.resizable()
+						.frame(width: 280, height: 380)
+						.clipShape(
+							.rect(
+								topLeadingRadius: 4,
+								bottomLeadingRadius: 4,
+								bottomTrailingRadius: 26,
+								topTrailingRadius: 26,
+								style: .circular)
+						)
+
+				}	
+				.padding(.top, 36)
+				Spacer()
+			}
+		}
+	}
+}
+
+#Preview {
+    HomeView()
+}

PophoryPractice/PophoryPractice/Yunseo/View/Model/LoggedStateModel.swift

@@ -0,0 +1,12 @@
+//
+//  LoggedStateModel.swift
+//  PophoryPractice
+//
+//  Created by 강윤서 on 7/31/24.
+//
+
+import SwiftUI
+
+class AppState: ObservableObject {
+	@Published var isLoggedIn: Bool = false
+}

PophoryPractice/PophoryPractice/Yunseo/View/MyPageView.swift

@@ -0,0 +1,18 @@
+//
+//  MyPageView.swift
+//  PophoryPractice
+//
+//  Created by 강윤서 on 7/29/24.
+//
+
+import SwiftUI
+
+struct MyPageView: View {
+    var body: some View {
+        Text("My Page View")
+    }
+}
+
+#Preview {
+    MyPageView()
+}

PophoryPractice/PophoryPractice/Yunseo/View/Onboarding/OnboardingView.swift

@@ -0,0 +1,59 @@
+//
+//  OnboardingView.swift
+//  PophoryPractice
+//
+//  Created by 강윤서 on 7/30/24.
+//
+
+import SwiftUI
+
+struct OnboardingView: View {
+	var image: [Image] = [
+		Image(.imgOnboarding01),
+		Image(.imgOnboarding02),
+		Image(.imgOnboarding03),
+		Image(.imgOnboarding04),
+	]
+	@State private var selectedIndex = 0
+	@EnvironmentObject private var appState: AppState
+	@GestureState private var dragAmount = CGSize.zero
+
+	var body: some View {
+		VStack {
+			TabView(selection: $selectedIndex) {
+				ForEach(0..<4, id: \.self) { index in
+					image[index]
+						.resizable()
+						.scaledToFit()
+						.tag(index)
+						.frame(maxWidth: .infinity, maxHeight: .infinity)
+				}
+			}
+			.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
+
+			HStack {
+				ForEach(0..<4) { index in
+					Circle()
+						.fill(index == selectedIndex ? .gray500 : .gray400)
+						.frame(width: 9, height: 9)
+				}
+			}
+
+			Text("SNS로 간편가입하기!")
+				.foregroundStyle(.gray500)
+				.font(.system(size: 16))
+				.padding(.top, 42)
+
+			Button("AppleID로 시작하기") {
+				appState.isLoggedIn = true
+			}
+			.buttonStyle(PophoryButton())
+			.padding([.leading, .trailing], 20)
+			.padding(.top, 14)
+		}
+	}
+}
+
+#Preview {
+	OnboardingView()
+}