1.CreateOnboardingScreen.md

🔷 Onboarding screen using the new page TabView

• App 이 시작되면 처음 Onboarding 화면을 swipe 해가면서 reusable component 를 사용하면서 card section 처럼 layout 을 만듭니다

👉 CardView

//  StartButtonView.swift
struct StartButtonView: View {
// MARK: -  PROPERTY

// MARK: -  BODY
var body: some View {
Button(action: {
	print("Exit the onboarding")
}) {
	HStack (spacing: 8) {
		Text("Start")

		Image(systemName: "arrow.right.circle")
			.imageScale(.large)
	} //: HSTACK
	.padding(.horizontal, 16)
	.padding(.vertical, 10)
	.background(
		Capsule().strokeBorder(Color.white, lineWidth: 1.25)
	)
} //: BUTTON
.accentColor(Color.white)
}
}

// MARK: -  PREVIEW
struct StartButtonView_Previews: PreviewProvider {
static var previews: some View {
StartButtonView()
	.preferredColorScheme(.dark)
	.previewLayout(.sizeThatFits)
}
}

//  FruitCardView.swift

struct FruitCardView: View {
// MARK: -  PROPERTY
@State private var isAnimating: Bool = false
// MARK: -  BODY
var body: some View {
ZStack {
VStack (spacing: 20) {
	// Fruit: Image
	Image("blueberry")
		.resizable()
		.scaledToFit()
		.shadow(color: Color(red: 0, green: 0, blue: 0, opacity: 0.15), radius: 8, x: 6, y: 8)
		// image scale effect
		.scaleEffect(isAnimating ? 1.0 : 0.6)

	// Fruit: Title
	Text("Blueberry")
		.foregroundColor(Color.white)
		.font(.largeTitle)
		.fontWeight(.heavy)
		.shadow(color: Color(red: 0, green: 0, blue: 0, opacity: 0.15), radius: 2, x: 2, y: 2)

	// Fruit: HeadLine
	Text("Blueberries are sweet, nutritious and wildy popular fruit all over the world.")
		.foregroundColor(Color.white)
		.multilineTextAlignment(.center)
		.padding(.horizontal, 16)
		.frame(maxWidth: 480)

	// Button: Start - resualbe UI Component
	StartButtonView()
} //: VSTACK
} //: ZSTACK
// Animation onApper
.onAppear {
withAnimation(.easeOut(duration: 0.5)) {
	isAnimating = true
}
}
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .center)
.background(LinearGradient(gradient: Gradient(colors: [Color("ColorBlueberryLight"), Color("ColorBlueberryDark")]), startPoint: .top, endPoint: .bottom))
.cornerRadius(20)
.padding(20)
}
}

👉 OnBoardingView

//  OnboardingView.swift

struct OnboardingView: View {
// MARK: -  BODY
var body: some View {
	TabView {
		// Loop 로 5개의 같은 CardSection 생성하기
		ForEach(0..<5) { item in
			FruitCardView()
		} //: LOOP
	} //: TABVIEW
	.tabViewStyle(PageTabViewStyle()) // PageTabViewStyle 로 적용됨
	.padding(.vertical, 20)
}
}