[Feat] #372 - 온보딩 뷰 구현 #381

L-j-h-c · 2022-03-12T08:17:47Z

🔥Pull requests

온보딩 뷰 구현

⛳️ 작업한 브랜치

feature/[Feat] 온보딩 뷰 구현하기 #372

👷 작업한 내용

온보딩 뷰 구현
스플래시에서 isOnboarding이 nil인 경우 onboarding으로 감.
spark시작하기를 누른 경우 Isonboarding값을 set해줌

🚨참고 사항

살짝 귀여운...MVVM 구조를 써봤습니다.

📸 스크린샷

기능	스크린샷
GIF

📟 관련 이슈

Resolved: [Feat] 온보딩 뷰 구현하기 #372

OnboardingVC, CVC, ViewModel 생성

어셋 및 상수 추가

OnboardingCVC 레이아웃 구성

OnboardingVC UI 틀 잡기

guideLabel AttributedString 적용

셀 인덱스에 따라 버튼 isHidden 옵션 조절

페이지컨트롤 및 버튼 isHidden 옵션 세팅

스킵 버튼 기능 구현

sparkStartButton 셀 밖으로 뺴고 loginVC로 연결

…to feature/TeamSparker#372 # Conflicts: # Spark-iOS/Spark-iOS.xcodeproj/project.pbxproj # Spark-iOS/Spark-iOS/Resource/Constants/Storyboard.swift # Spark-iOS/Spark-iOS/Resource/Constants/ViewController.swift

일러스트 어셋 추가 및 적용

isOnboarding Userdefault 세팅

yangsubinn

💐 오호 . . .
view에 대한 viewModel만 봤어서 cell에 대한 viewModel 되게 신기하게 잘 봤습니당

yangsubinn · 2022-03-13T05:43:59Z

Spark-iOS/Spark-iOS/Source/Cells/Onboarding/OnboardingCVCViewModel.swift

+
+import UIKit
+
+struct OnboardingCVCViewModel {


OnboardingCVCViewModel로 따로 사용하면서 느낀 viewModel의 장점이 있을까여?

음...저도 viewModel을 실전에서 처음 사용해보는거라 맞는 판단일지는 모르겠지만
일단 비즈니스 로직이 뷰모델로 분리되어 있으니 로직에 대한 수정사항이 있을 때 수정하기가 편했던 것 같아요.
이런 식으로 분리되어 있으니까 가독성이 좋아지는 것 같기도 하고? 익숙해지면 협업에서도 편하지 않을까 생각이 듭니다...

hyun99999

적절한 delegate 메서드를 사용해서 필요에 따라서 적용한것 같아서 아주 좋네요!

ViewModel 을 사용해본점은 멋지네요!! 이처럼 현업에서는 필요에 따라서 해당 플로우에 디자인 패턴을 적용한다고 해요!
준호선배는 가볍게 적용해봤다고하니 이렇게 현업하는 프로젝트에 적용해본것도 좋은 경험이 될거 같네요! 디자인패턴과 관련된 코드리뷰는 읽고 참고만 하고 넘어가도 될거 같네요! 대신 좀 더 공부해서 리펙 할 떄는 잘 적용해봐요 ㅋㅋㅋ 분명히 그 특징을 살려야 유효한 디자인 패턴도 존재하니까요!

hyun99999 · 2022-03-13T08:49:33Z

Spark-iOS/Spark-iOS/Source/Cells/Onboarding/OnboardingCVC.swift

+        label.lineBreakMode = .byCharWrapping
+        label.numberOfLines = 0


유효한 속성이 아닌거 같아서 의도가 있을까요?

아하 lineBreakMode도 설정해줘야 여러 줄이 나오는 줄 알았네요! 수정했습니당~

hyun99999 · 2022-03-13T08:53:27Z

Spark-iOS/Spark-iOS/Source/Cells/Onboarding/OnboardingCVCViewModel.swift

+    var illustImage: UIImage? {
+        switch index {
+        case 0:
+            return UIImage(named: "illustOnboarding1")
+        case 1:
+            return UIImage(named: "illustOnboarding2")
+        case 2:
+            return UIImage(named: "illustOnboarding3")
+        default:
+            return UIImage(named: "illustOnboarding4")
+        }
+    }


view model 의 경우는 뷰와 독립적인 면이 특징이고 이 특징은 간편하게 코드를 테스트할 수 있는 장점으로 이어진다구 해요! 그래서 저는 view model 을 설계할때면 uikit 을 import 하지 않고 이렇게 UIImage 보다는 텍스트로 넘겨요!
이것도 참고하면 좋을거 같네요!

아하 그렇게 할 수도 있겠군요!! 조언 감사합니다~! 확실히 UI적인 부분을 분리해준다는 말이 그렇게 적용될 수도 있겠네요... 너무나 꿀팁!

hyun99999 · 2022-03-13T08:57:57Z

Spark-iOS/Spark-iOS/Source/ViewControllers/Splash/Onboarding/OnboardingVC.swift

+    private var sparkStartButtonHidden: Bool = false {
+        didSet {
+            if sparkStartButtonHidden == false {
+                sparkStartButton.isHidden = false
+                sparkStartButton.alpha = 0
+                UIView.animate(withDuration: 0.3) {
+                    self.sparkStartButton.alpha = 1
+                }
+            } else {
+                sparkStartButton.isHidden = true
+            }
+        }
+    }


기본값이 true 면 좋을것같네요!

앗 제가 원래 의도는 True로 주려고 했던건데 예리하시네요...

hyun99999 · 2022-03-13T09:07:09Z

Spark-iOS/Spark-iOS/Source/ViewControllers/Splash/Onboarding/OnboardingVC.swift

+    // 스크롤 애니메이션이 끝나면 호출되는 메서드 - 완전히 끝에 도달한 뒤에 버튼을 나타내기 위해서 사용
+    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
+        if (scrollView.contentOffset.x + 1) >= (scrollView.contentSize.width - scrollView.frame.size.width) {
+            sparkStartButtonHidden = false
+        } else {
+            sparkStartButtonHidden = true
+        }
+    }


hyun99999 · 2022-03-13T09:09:09Z

Spark-iOS/Spark-iOS/Source/ViewControllers/Splash/Onboarding/OnboardingVC.swift

+extension OnboardingVC {
+    private func setUI() {
+        navigationController?.isNavigationBarHidden = true


네비게이션 컨트롤러는 만들어주는 곳이 없어보이는데 왜 히든하셨나용?

정말로 아무 생각 없이 넣은 코드...반성...

hyun99999 · 2022-03-13T09:10:11Z

Spark-iOS/Spark-iOS/Source/ViewControllers/Splash/Onboarding/OnboardingVC.swift

+    @objc
+    private func presentToLogin() {
+        guard let loginVC = UIStoryboard(name: Const.Storyboard.Name.login, bundle: nil).instantiateViewController(withIdentifier: Const.ViewController.Identifier.login) as? LoginVC else { return }
+        loginVC.modalPresentationStyle = .fullScreen
+        loginVC.modalTransitionStyle = .crossDissolve
+        UserDefaults.standard.set(false, forKey: Const.UserDefaultsKey.isOnboarding)
+        self.present(loginVC, animated: true, completion: nil)
+    }


present 메서드 completion 에 UserDefaults 메서드를 사용해줘도 좋을거 같네요!

넵 그러네요 수정했습니다!

L-j-h-c

ㄹl뷰 감사함니다 섬배들~

L-j-h-c · 2022-03-13T13:13:51Z

Spark-iOS/Spark-iOS/Source/Cells/Onboarding/OnboardingCVCViewModel.swift

+
+import UIKit
+
+struct OnboardingCVCViewModel {


음...저도 viewModel을 실전에서 처음 사용해보는거라 맞는 판단일지는 모르겠지만
일단 비즈니스 로직이 뷰모델로 분리되어 있으니 로직에 대한 수정사항이 있을 때 수정하기가 편했던 것 같아요.
이런 식으로 분리되어 있으니까 가독성이 좋아지는 것 같기도 하고? 익숙해지면 협업에서도 편하지 않을까 생각이 듭니다...

L-j-h-c · 2022-03-13T13:15:15Z

Spark-iOS/Spark-iOS/Source/Cells/Onboarding/OnboardingCVCViewModel.swift

+    var illustImage: UIImage? {
+        switch index {
+        case 0:
+            return UIImage(named: "illustOnboarding1")
+        case 1:
+            return UIImage(named: "illustOnboarding2")
+        case 2:
+            return UIImage(named: "illustOnboarding3")
+        default:
+            return UIImage(named: "illustOnboarding4")
+        }
+    }


아하 그렇게 할 수도 있겠군요!! 조언 감사합니다~! 확실히 UI적인 부분을 분리해준다는 말이 그렇게 적용될 수도 있겠네요... 너무나 꿀팁!

L-j-h-c · 2022-03-13T13:16:07Z

Spark-iOS/Spark-iOS/Source/ViewControllers/Splash/Onboarding/OnboardingVC.swift

+    private var sparkStartButtonHidden: Bool = false {
+        didSet {
+            if sparkStartButtonHidden == false {
+                sparkStartButton.isHidden = false
+                sparkStartButton.alpha = 0
+                UIView.animate(withDuration: 0.3) {
+                    self.sparkStartButton.alpha = 1
+                }
+            } else {
+                sparkStartButton.isHidden = true
+            }
+        }
+    }


앗 제가 원래 의도는 True로 주려고 했던건데 예리하시네요...

L-j-h-c · 2022-03-13T13:16:54Z

Spark-iOS/Spark-iOS/Source/ViewControllers/Splash/Onboarding/OnboardingVC.swift

+    @objc
+    private func presentToLogin() {
+        guard let loginVC = UIStoryboard(name: Const.Storyboard.Name.login, bundle: nil).instantiateViewController(withIdentifier: Const.ViewController.Identifier.login) as? LoginVC else { return }
+        loginVC.modalPresentationStyle = .fullScreen
+        loginVC.modalTransitionStyle = .crossDissolve
+        UserDefaults.standard.set(false, forKey: Const.UserDefaultsKey.isOnboarding)
+        self.present(loginVC, animated: true, completion: nil)
+    }


넵 그러네요 수정했습니다!

L-j-h-c · 2022-03-13T13:17:41Z

Spark-iOS/Spark-iOS/Source/ViewControllers/Splash/Onboarding/OnboardingVC.swift

+extension OnboardingVC {
+    private func setUI() {
+        navigationController?.isNavigationBarHidden = true


정말로 아무 생각 없이 넣은 코드...반성...

코드리뷰 반영

스플래시 조건처리를 잘못해서 올렸습니다...

…to feature/TeamSparker#372

L-j-h-c added 12 commits March 12, 2022 11:28

[Chore] TeamSparker#372 - OnboardingVC, CVC, ViewModel 생성

9b716fe

OnboardingVC, CVC, ViewModel 생성

[Chore] TeamSparker#372 - 어셋 및 상수 추가

da98bff

어셋 및 상수 추가

[Feat] TeamSparker#372 - OnboardingCVC 레이아웃 구성

39fa906

OnboardingCVC 레이아웃 구성

[Feat] TeamSparker#372 - OnboardingVC UI 틀 잡기

436b230

OnboardingVC UI 틀 잡기

[Feat] TeamSparker#372 - guideLabel AttributedString 적용

d9cdb28

guideLabel AttributedString 적용

[Feat] TeamSparker#372 - 셀 인덱스에 따라 버튼 isHidden 옵션 조절

e63c08e

셀 인덱스에 따라 버튼 isHidden 옵션 조절

[Feat] TeamSparker#372 - 페이지컨트롤 및 버튼 isHidden 옵션 세팅

15ebdd3

페이지컨트롤 및 버튼 isHidden 옵션 세팅

[Feat] TeamSparker#372 - 스킵 버튼 기능 구현

cbfb59c

스킵 버튼 기능 구현

[Fix] TeamSparker#372 - sparkStartButton 셀 밖으로 뺴고 loginVC로 연결

184da43

sparkStartButton 셀 밖으로 뺴고 loginVC로 연결

[Feat] TeamSparker#372 - 일러스트 어셋 추가 및 적용

cda1404

일러스트 어셋 추가 및 적용

[Feat] TeamSparker#372 - isOnboarding Userdefault 세팅

c6e2cd4

isOnboarding Userdefault 세팅

L-j-h-c added Feat 새로운 기능 구현 🧚‍♀️Devil『쥬노』 뀨의 의지 공식후계자입니다 아몰랑 labels Mar 12, 2022

L-j-h-c requested review from hyun99999 and yangsubinn March 12, 2022 08:17

L-j-h-c self-assigned this Mar 12, 2022

yangsubinn approved these changes Mar 13, 2022

View reviewed changes

hyun99999 approved these changes Mar 13, 2022

View reviewed changes

L-j-h-c commented Mar 13, 2022

View reviewed changes

L-j-h-c added 3 commits March 13, 2022 22:18

[Fix] TeamSparker#372 - 코드리뷰 반영

6bea7fc

코드리뷰 반영

[Fix] TeamSparker#372 - 잘못 변경한 부분 수정

c41630f

스플래시 조건처리를 잘못해서 올렸습니다...

Merge branch 'develop' of https://github.com/TeamSparker/Spark-iOS in…

cdbb8cc

…to feature/TeamSparker#372

L-j-h-c merged commit 41286bc into TeamSparker:develop Mar 13, 2022

hyun99999 mentioned this pull request Mar 19, 2022

[Chore] #408 - 빌드 버전 변경(11) #409

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feat] #372 - 온보딩 뷰 구현 #381

[Feat] #372 - 온보딩 뷰 구현 #381

L-j-h-c commented Mar 12, 2022

yangsubinn left a comment

yangsubinn Mar 13, 2022

L-j-h-c Mar 13, 2022

hyun99999 left a comment

hyun99999 Mar 13, 2022

L-j-h-c Mar 13, 2022

hyun99999 Mar 13, 2022

L-j-h-c Mar 13, 2022

hyun99999 Mar 13, 2022

L-j-h-c Mar 13, 2022

hyun99999 Mar 13, 2022

hyun99999 Mar 13, 2022

L-j-h-c Mar 13, 2022

hyun99999 Mar 13, 2022

L-j-h-c Mar 13, 2022

L-j-h-c left a comment

L-j-h-c Mar 13, 2022

L-j-h-c Mar 13, 2022

L-j-h-c Mar 13, 2022

L-j-h-c Mar 13, 2022

L-j-h-c Mar 13, 2022

		label.lineBreakMode = .byCharWrapping
		label.numberOfLines = 0

[Feat] #372 - 온보딩 뷰 구현 #381

[Feat] #372 - 온보딩 뷰 구현 #381

Conversation

L-j-h-c commented Mar 12, 2022

🔥Pull requests

🚨참고 사항

📸 스크린샷

📟 관련 이슈

yangsubinn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hyun99999 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

L-j-h-c left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment