[FEAT] 서비스 온보딩(튜토리얼) 구현 (#261)

[yurim830]

🐿️ Pull Requests

🪵 작업 브랜치

• [FEAT] 앱 최초 사용 시 온보딩 뷰 구현 #261

🥔 작업 내용

요약

1. 서비스 온보딩 페이지를 구현했습니다.
   'Onboarding' 네이밍을 취향선택에서 사용하고 있어서 Tutorial이라는 네이밍을 사용했습니다.
2. FontSystem을 수정했습니다.
   a. Pretendard-Extrabold 추가
   b. 커스텀 폰트 fallback 시 weight가 유지되지 않는 문제 수정
3. UIView+ 애니메이션 메소드(fade-in, blink)를 구현했습니다.
4. 로띠 파일명을 StringLiterals로 정리했습니다.

애니메이션 메소드

[Fade-in 애니메이션]

    func animateFadeIn(duration: TimeInterval = 0.8, delay: TimeInterval = 0) {
        self.alpha = 0
        self.isHidden = false
        
        UIView.animate(withDuration: duration, delay: delay, options: .curveEaseInOut) {
            self.alpha = 1
        }
    }

[깜빡이는 애니메이션]

• 디자인이 중간에 수정되는바람에 이 메소드를 사용하지는 못했지만, 추후 사용 가능성이 있다고 생각되어 두었습니다.
  LocalVerificationView의 깜빡임도 이걸로 대체하면 성능 향상에 도움이 될 것 같습니다!

  • CABasicAnimation은 layer의 속성을 이용하며 별도의 스레드에서 진행됨 (참고: 링크)
  • 기존 코드에서 사용하는 Timer와 animate는 메인스레드에서 진행됨

• 파라미터

  • duration: 깜빡임 주기 (사라졌다가 다시 나타나기까지의 전체 시간)
  • minAlpha: 깜빡이는 동안의 최소 alpha값
  • fadeIn: true일 경우 minAlpha에서 시작 (페이드 인), false일 경우 1.0에서 시작 (페이드 아웃)
  • animationKey: 애니메이션을 식별하는 고유 키

    func startBlinking(duration: TimeInterval = 0.8, minAlpha: CGFloat = 0.2, fadeIn: Bool = true, animationKey: String = "blinking") {
        stopBlinking(animationKey: animationKey)
        
        let animation = CABasicAnimation(keyPath: "opacity")
        animation.fromValue = fadeIn ? minAlpha : 1.0
        animation.toValue = fadeIn ? 1.0 : minAlpha
        animation.duration = duration / 2 // NOTE: 한 방향(예: 사라지는 과정)에 대한 시간
        animation.autoreverses = true
        animation.repeatCount = .infinity
        
        self.layer.add(animation, forKey: animationKey)
    }

    func stopBlinking(animationKey: String = "blinking") {
        self.layer.removeAnimation(forKey: animationKey)
    }

🚨 참고 사항

📸 스크린샷

기능	스크린샷
아이폰 16 Pro

💥 To be sure

• 모든 뷰가 잘 실행되는지 다시 한 번 체크해주세요 !

🌰 Resolve issue

• Resolved: [FEAT] 앱 최초 사용 시 온보딩 뷰 구현 #261

[cirtuare]

역시 !!! 짱 깔꼼하다 🥑💗

[cirtuare]

🐿️🐿️
요거 setLabel로 안 한 건 extraBold이 ACFontType에 안 들어가있어서 그런 건가요??
그렇다면 이 폰트스타일을 디자인시스템에 추가해달라고 디자인에게 요청하는 게 향후 관리에 편할 것 같습니다!!

[yurim830]

디자인측에서 디자인시스템에 h3B로 넣어주셔서 코드 수정했습니다~!

[yurim830]

25.08.24 디자인 변경사항 적용

• title: Extrabold 20 -> h3 bold
• subTitle: '최대 50개' primaryColor 적용