diff --git a/Projects/App/Resources/Assets.xcassets/heart_letter.imageset/Contents.json b/Projects/App/Resources/Assets.xcassets/heart_letter.imageset/Contents.json new file mode 100644 index 0000000..dc40e43 --- /dev/null +++ b/Projects/App/Resources/Assets.xcassets/heart_letter.imageset/Contents.json @@ -0,0 +1,23 @@ +{ + "images" : [ + { + "filename" : "heart_letter.png", + "idiom" : "universal", + "scale" : "1x" + }, + { + "filename" : "heart_letter@2x.png", + "idiom" : "universal", + "scale" : "2x" + }, + { + "filename" : "heart_letter@3x.png", + "idiom" : "universal", + "scale" : "3x" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Projects/App/Resources/Assets.xcassets/heart_letter.imageset/heart_letter.png b/Projects/App/Resources/Assets.xcassets/heart_letter.imageset/heart_letter.png new file mode 100644 index 0000000..143ed41 Binary files /dev/null and b/Projects/App/Resources/Assets.xcassets/heart_letter.imageset/heart_letter.png differ diff --git a/Projects/App/Resources/Assets.xcassets/heart_letter.imageset/heart_letter@2x.png b/Projects/App/Resources/Assets.xcassets/heart_letter.imageset/heart_letter@2x.png new file mode 100644 index 0000000..a2ffb16 Binary files /dev/null and b/Projects/App/Resources/Assets.xcassets/heart_letter.imageset/heart_letter@2x.png differ diff --git a/Projects/App/Resources/Assets.xcassets/heart_letter.imageset/heart_letter@3x.png b/Projects/App/Resources/Assets.xcassets/heart_letter.imageset/heart_letter@3x.png new file mode 100644 index 0000000..1d83c0c Binary files /dev/null and b/Projects/App/Resources/Assets.xcassets/heart_letter.imageset/heart_letter@3x.png differ diff --git a/Projects/App/Sources/Splash/SplashAnimatedView.swift b/Projects/App/Sources/Splash/SplashAnimatedView.swift new file mode 100644 index 0000000..f316a42 --- /dev/null +++ b/Projects/App/Sources/Splash/SplashAnimatedView.swift @@ -0,0 +1,175 @@ +// +// SplashAnimatedView.swift +// three-days-dev +// +// Created by 김지수 on 9/24/24. +// Copyright © 2024 com.weave. All rights reserved. +// + +import SwiftUI +import DesignCore + +enum SplashAnimationStep: CaseIterable { + case first, second, third, fourth, fifth, sixth + + var color: Color { + switch self { + case .first: Color(hex: 0xE4DED7) + case .second: Color(hex: 0xDFE7D1) + case .third: Color(hex: 0xD7D7EA) + case .fourth: Color(hex: 0xECDAE3) + default: Color(hex: 0xF5F1EE) + } + } + + var interval: Double { + switch self { + case .first: 1.0 + default: 0.5 + } + } +} + +struct IconState: Identifiable { + let id: Int + var offset: CGSize + var rotation: Angle + var opacity: Double +} + +struct SplashAnimatedView: View { + @State private var animationStep: SplashAnimationStep = .first + @State private var cycleCompleted = false + @State private var otherViewOpacity: CGFloat = 0.0 + @State private var showLetterAnimation = false + @State private var iconStates: [IconState] = [ + IconState( + id: 0, + offset: .zero, + rotation: .degrees( + 0 + ), + opacity: 1 + ), + IconState( + id: 1, + offset: .zero, + rotation: .degrees( + -5.47 + ), + opacity: 0 + ), + IconState( + id: 2, + offset: .zero, + rotation: .degrees( + 4.98 + ), + opacity: 0 + ), + IconState( + id: 3, + offset: .zero, + rotation: .degrees(15.52), + opacity: 0 + ) + ] + + var body: some View { + VStack(spacing: 84) { + Spacer() + + Text("3일동안 딱 한 사람만 알아가는\n새로운 설렘의 시작") + .typography(.semibold_24) + .multilineTextAlignment(.center) + .foregroundStyle(DesignCore.Colors.grey500) + .opacity(otherViewOpacity) + + ZStack { + DesignCore.Images.logoSmall.image + .offset(iconStates[0].offset) + .rotationEffect(iconStates[0].rotation) + .opacity(iconStates[0].opacity) + + DesignCore.Images.day1.image + .offset(iconStates[1].offset) + .rotationEffect(iconStates[1].rotation) + .opacity(iconStates[1].opacity) + + DesignCore.Images.day2.image + .offset(iconStates[2].offset) + .rotationEffect(iconStates[2].rotation) + .opacity(iconStates[2].opacity) + + DesignCore.Images.day3.image + .offset(iconStates[3].offset) + .rotationEffect(iconStates[3].rotation) + .opacity(iconStates[3].opacity) + } + + CTABorderButton( + title: "휴대폰 번호로 시작하기", + backgroundStyle: LinearGradient.gradientA, + isActive: true, + isShowLetter: $showLetterAnimation + ) { + + } + .frame(height: 70) + .padding(.horizontal, 50) + .opacity(otherViewOpacity) + + Spacer() + } + .textureBackground(animationStep.color) + .task { + await runSingleCycle() + } + } + + private func runSingleCycle() async { + for step in SplashAnimationStep.allCases.dropFirst() { + guard !cycleCompleted else { break } + try? await Task.sleep(for: .seconds(step.interval)) + withAnimation(.interactiveSpring(duration: 0.75)) { + updateIconStates(for: step) + animationStep = step + } + } + cycleCompleted = true + withAnimation { + showLetterAnimation = true + } + } + + private func updateIconStates(for step: SplashAnimationStep) { + switch step { + case .second: + iconStates[0].opacity = 0 + iconStates[1].opacity = 1 + case .third: + iconStates[2].opacity = 1 + case .fourth: + iconStates[3].opacity = 1 + case .fifth: + iconStates[1].offset = CGSize(width: -28, height: -8) + iconStates[2].offset = .zero + iconStates[3].offset = CGSize(width: 28, height: 8) + iconStates[1].rotation = .zero + iconStates[2].rotation = .zero + iconStates[3].rotation = .zero + otherViewOpacity = 0.3 + case .sixth: + iconStates[1].offset = CGSize(width: -64, height: -24) + iconStates[2].offset = .zero + iconStates[3].offset = CGSize(width: 64, height: 24) + otherViewOpacity = 1.0 + default: + break + } + } +} + +#Preview { + SplashAnimatedView() +} diff --git a/Projects/App/Sources/ThreeDaysApp.swift b/Projects/App/Sources/ThreeDaysApp.swift index a670c1f..a62da7d 100644 --- a/Projects/App/Sources/ThreeDaysApp.swift +++ b/Projects/App/Sources/ThreeDaysApp.swift @@ -27,7 +27,7 @@ struct ThreeDaysApp: App { case .designPreview: DesignPreviewView() case .main: - MainView() + SplashAnimatedView() } } diff --git a/Projects/Core/CoreKit/Sources/AppCoordinator.swift b/Projects/Core/CoreKit/Sources/AppCoordinator.swift index c586fa9..48beccd 100644 --- a/Projects/Core/CoreKit/Sources/AppCoordinator.swift +++ b/Projects/Core/CoreKit/Sources/AppCoordinator.swift @@ -14,7 +14,7 @@ import SwiftUI private init() {} //MARK: - Properties - public private(set) var rootView = FeatureType.designPreview + public private(set) var rootView = FeatureType.main //MARK: - Methods public func changeRootView(_ feature: FeatureType) { diff --git a/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/Contents.json b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/Contents.json new file mode 100644 index 0000000..73c0059 --- /dev/null +++ b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/Contents.json @@ -0,0 +1,6 @@ +{ + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day1.imageset/Contents.json b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day1.imageset/Contents.json new file mode 100644 index 0000000..7e4a002 --- /dev/null +++ b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day1.imageset/Contents.json @@ -0,0 +1,23 @@ +{ + "images" : [ + { + "filename" : "day1.png", + "idiom" : "universal", + "scale" : "1x" + }, + { + "filename" : "day1@2x.png", + "idiom" : "universal", + "scale" : "2x" + }, + { + "filename" : "day1@3x.png", + "idiom" : "universal", + "scale" : "3x" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day1.imageset/day1.png b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day1.imageset/day1.png new file mode 100644 index 0000000..e245d1d Binary files /dev/null and b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day1.imageset/day1.png differ diff --git a/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day1.imageset/day1@2x.png b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day1.imageset/day1@2x.png new file mode 100644 index 0000000..bc1754b Binary files /dev/null and b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day1.imageset/day1@2x.png differ diff --git a/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day1.imageset/day1@3x.png b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day1.imageset/day1@3x.png new file mode 100644 index 0000000..f1366b7 Binary files /dev/null and b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day1.imageset/day1@3x.png differ diff --git a/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day2.imageset/Contents.json b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day2.imageset/Contents.json new file mode 100644 index 0000000..8f50e30 --- /dev/null +++ b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day2.imageset/Contents.json @@ -0,0 +1,23 @@ +{ + "images" : [ + { + "filename" : "day2.png", + "idiom" : "universal", + "scale" : "1x" + }, + { + "filename" : "day2@2x.png", + "idiom" : "universal", + "scale" : "2x" + }, + { + "filename" : "day2@3x.png", + "idiom" : "universal", + "scale" : "3x" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day2.imageset/day2.png b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day2.imageset/day2.png new file mode 100644 index 0000000..48f1f94 Binary files /dev/null and b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day2.imageset/day2.png differ diff --git a/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day2.imageset/day2@2x.png b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day2.imageset/day2@2x.png new file mode 100644 index 0000000..0568041 Binary files /dev/null and b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day2.imageset/day2@2x.png differ diff --git a/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day2.imageset/day2@3x.png b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day2.imageset/day2@3x.png new file mode 100644 index 0000000..a1e32a3 Binary files /dev/null and b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day2.imageset/day2@3x.png differ diff --git a/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day3.imageset/Contents.json b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day3.imageset/Contents.json new file mode 100644 index 0000000..9e392bb --- /dev/null +++ b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day3.imageset/Contents.json @@ -0,0 +1,23 @@ +{ + "images" : [ + { + "filename" : "day3.png", + "idiom" : "universal", + "scale" : "1x" + }, + { + "filename" : "day3@2x.png", + "idiom" : "universal", + "scale" : "2x" + }, + { + "filename" : "day3@3x.png", + "idiom" : "universal", + "scale" : "3x" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day3.imageset/day3.png b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day3.imageset/day3.png new file mode 100644 index 0000000..80a604d Binary files /dev/null and b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day3.imageset/day3.png differ diff --git a/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day3.imageset/day3@2x.png b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day3.imageset/day3@2x.png new file mode 100644 index 0000000..5788a44 Binary files /dev/null and b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day3.imageset/day3@2x.png differ diff --git a/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day3.imageset/day3@3x.png b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day3.imageset/day3@3x.png new file mode 100644 index 0000000..4db454a Binary files /dev/null and b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/day3.imageset/day3@3x.png differ diff --git a/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/logo_small.imageset/Contents.json b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/logo_small.imageset/Contents.json new file mode 100644 index 0000000..556a2f8 --- /dev/null +++ b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/logo_small.imageset/Contents.json @@ -0,0 +1,23 @@ +{ + "images" : [ + { + "filename" : "logo_small.png", + "idiom" : "universal", + "scale" : "1x" + }, + { + "filename" : "logo_small@2x.png", + "idiom" : "universal", + "scale" : "2x" + }, + { + "filename" : "logo_small@3x.png", + "idiom" : "universal", + "scale" : "3x" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/logo_small.imageset/logo_small.png b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/logo_small.imageset/logo_small.png new file mode 100644 index 0000000..23450a8 Binary files /dev/null and b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/logo_small.imageset/logo_small.png differ diff --git a/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/logo_small.imageset/logo_small@2x.png b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/logo_small.imageset/logo_small@2x.png new file mode 100644 index 0000000..8a56ded Binary files /dev/null and b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/logo_small.imageset/logo_small@2x.png differ diff --git a/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/logo_small.imageset/logo_small@3x.png b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/logo_small.imageset/logo_small@3x.png new file mode 100644 index 0000000..d1e7595 Binary files /dev/null and b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/Splash/logo_small.imageset/logo_small@3x.png differ diff --git a/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/heart_letter.imageset/Contents.json b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/heart_letter.imageset/Contents.json new file mode 100644 index 0000000..dc40e43 --- /dev/null +++ b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/heart_letter.imageset/Contents.json @@ -0,0 +1,23 @@ +{ + "images" : [ + { + "filename" : "heart_letter.png", + "idiom" : "universal", + "scale" : "1x" + }, + { + "filename" : "heart_letter@2x.png", + "idiom" : "universal", + "scale" : "2x" + }, + { + "filename" : "heart_letter@3x.png", + "idiom" : "universal", + "scale" : "3x" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/heart_letter.imageset/heart_letter.png b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/heart_letter.imageset/heart_letter.png new file mode 100644 index 0000000..40cd946 Binary files /dev/null and b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/heart_letter.imageset/heart_letter.png differ diff --git a/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/heart_letter.imageset/heart_letter@2x.png b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/heart_letter.imageset/heart_letter@2x.png new file mode 100644 index 0000000..a83ca9b Binary files /dev/null and b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/heart_letter.imageset/heart_letter@2x.png differ diff --git a/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/heart_letter.imageset/heart_letter@3x.png b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/heart_letter.imageset/heart_letter@3x.png new file mode 100644 index 0000000..403a5f7 Binary files /dev/null and b/Projects/DesignSystem/DesignCore/Resources/Images/Images.xcassets/heart_letter.imageset/heart_letter@3x.png differ diff --git a/Projects/DesignSystem/DesignCore/Sources/BackgroundTextureView.swift b/Projects/DesignSystem/DesignCore/Sources/BackgroundTextureView.swift index 086766d..8a55a06 100644 --- a/Projects/DesignSystem/DesignCore/Sources/BackgroundTextureView.swift +++ b/Projects/DesignSystem/DesignCore/Sources/BackgroundTextureView.swift @@ -9,33 +9,15 @@ import SwiftUI public struct BackgroundTextureView: View { - public enum ColorType { - case `default` - case splashBrown - case splashGreen - case splashPurple - case splashPink - - var color: Color { - switch self { - case .default: return Color(hex: 0xF5F1EE) - case .splashBrown: return Color(hex: 0xE4DED7) - case .splashGreen: return Color(hex: 0xDFE7D1) - case .splashPurple: return Color(hex: 0xD7D7EA) - case .splashPink: return Color(hex: 0xECDAE3) - } - } - } + let color: Color - let type: ColorType - - public init(_ type: ColorType) { - self.type = type + public init(_ color: Color) { + self.color = color } public var body: some View { ZStack { - type.color + color DesignCore.Images.bgTexture.image .resizable() .frame( @@ -49,22 +31,18 @@ public struct BackgroundTextureView: View { } private struct BackgroundTextureViewModifier: ViewModifier { - let colorType: BackgroundTextureView.ColorType + let color: Color func body(content: Content) -> some View { content .background { - BackgroundTextureView(colorType) + BackgroundTextureView(color) } } } extension View { - public func textureBackground(_ type: BackgroundTextureView.ColorType) -> some View { - modifier(BackgroundTextureViewModifier(colorType: type)) + public func textureBackground(_ color: Color = .init(hex: 0xF5F1EE)) -> some View { + modifier(BackgroundTextureViewModifier(color: color)) } } - -#Preview { - BackgroundTextureView(.splashGreen) -} diff --git a/Projects/DesignSystem/DesignCore/Sources/CTAButton/CTABorderButton.swift b/Projects/DesignSystem/DesignCore/Sources/CTAButton/CTABorderButton.swift new file mode 100644 index 0000000..b9ea470 --- /dev/null +++ b/Projects/DesignSystem/DesignCore/Sources/CTAButton/CTABorderButton.swift @@ -0,0 +1,84 @@ +// +// CTABorderButton.swift +// DesignCore +// +// Created by 김지수 on 9/25/24. +// Copyright © 2024 com.weave. All rights reserved. +// + +import SwiftUI + +public struct CTABorderButton: View { + private let title: String + private let backgroundStyle: BackgroundStyle + private let titleColor: Color = .white + private let isActive: Bool + private var handler: () -> Void + @Binding public var isShowLetter: Bool + + public init( + title: String, + backgroundStyle: BackgroundStyle = DesignCore.Colors.grey500, + isActive: Bool = true, + isShowLetter: Binding = .constant(false), + handler: @escaping () -> Void + ) { + self.title = title + self.backgroundStyle = backgroundStyle + self.isActive = isActive + self._isShowLetter = isShowLetter + self.handler = handler + } + + private var buttonBackgroundColor: BackgroundStyle { + if !isActive { + return DesignCore.Colors.grey100 as! BackgroundStyle + } + return backgroundStyle + } + + public var body: some View { + ZStack(alignment: .topLeading) { + Capsule() + .foregroundStyle(.white) + Button(action: { + handler() + }, label: { + VStack(spacing: 0) { + ZStack { + Capsule() + .foregroundStyle(buttonBackgroundColor) + Text(title) + .foregroundStyle(titleColor) + .typography(.semibold_18) + } + } + }) + .disabled(!isActive) + .padding(.all, 5) + + DesignCore.Images.heartLetter.image + .offset(x: -5, y: isShowLetter ? -18 : -28) + .opacity(isShowLetter ? 1 : 0) + } + .shadow(.default) + } + + func showLetterWithAnimated() { + withAnimation { + isShowLetter = true + } + } +} + + +#Preview { + CTABorderButton( + title: "수락할께요", + backgroundStyle: LinearGradient.gradientA, + isActive: true + ) { + + } + .frame(width: 164, height: 70) +} diff --git a/Projects/Features/DesignPreview/Sources/DesignBackgroundTextureView.swift b/Projects/Features/DesignPreview/Sources/DesignBackgroundTextureView.swift index 6f482c1..d944f0e 100644 --- a/Projects/Features/DesignPreview/Sources/DesignBackgroundTextureView.swift +++ b/Projects/Features/DesignPreview/Sources/DesignBackgroundTextureView.swift @@ -15,7 +15,7 @@ struct DesignBackgroundTextureView: View { Text("This is Background 🎨") .typography(.semibold_20) } - .textureBackground(.splashPink) + .textureBackground() .navigationTitle("Texture Background") } }