[Feat] #220 - ToolTip 재사용 코드 구현 & 프로젝트 적용

[mini-min]

✨ 해결한 이슈

• Resolved: [Feat] 코치마크로 사용할 TipView 생성 & 프로젝트 적용 #220

🛠️ 작업내용

구현 내용	Home	DetailClip	LinkWeb
GIF

🖥️ 주요 코드 설명

1. ToasterTipView 생성

• title : 팁뷰에 담을 String 타입의 타이틀입니다.
• tipType : 기준 뷰로부터 팁뷰의 위치(top, bottom, left, right)를 정합니다. (TipType 프로토콜 준수)
• sourceItem : 팁뷰의 기준(화살표가 가리키는 지점) Item(View)을 지정합니다. - TabBarItem, ToolBarItem을 기준으로 잡을 수도 있어, AnyObject 타입으로 지정했습니다.
  

  TOASTER-iOS/TOASTER-iOS/Global/Components/ToasterTipView/ToasterTipView.swift

  Lines 32 to 35 in 23ac3e1

  	init(title: String, type: TipType, sourceItem: AnyObject) {
  	self.title = title
  	self.tipType = type
  	self.sourceView = (sourceItem as? UIView) ?? sourceItem.view

2. ToasterTipView 메서드 사용

• showToolTip() : 툴팁을 보여줄 때 사용하는 함수 (화살표 기준으로 커지는 애니메이션 포함)
• dismissToolTip(completion:) : 툴팁이 사라지게 할 때 사용하는 함수 (.curveEaseInOut 애니메이션 포함)
• showToolTipAndDismissAfterDelay(duration:Int, completion:) : 툴팁을 보여주고, 특정 시간 이후에 자동으로 사라지도록 하는 함수

3.TipView 기기별 1회만 표출하도록

UserDefaults 최초 nil인 상태 -> nil인 경우에만 툴팁 표출 -> 1회 표출 시에 Bool 값을 true로 변경 -> 이후에는 툴팁 표출 x

다음 업데이트 때 사용하는 경우가 있을 것으로 판단, 속성을 관리할 수 있도록 TipUserDefaults 파일에서 관리합니다.

TOASTER-iOS/TOASTER-iOS/Global/Components/ToasterTipView/TipUserDefaults.swift

Lines 10 to 14 in 23ac3e1

	enum TipUserDefaults {
	static let isShowHomeViewToolTip = "homeViewToolTip"
	static let isShowDetailClipViewToolTip = "detailClipViewToolTip"
	static let isShowLinkWebViewToolTip = "linkWebViewToolTip"
	}

• 조건문에서 UserDefaults 값 확인
• 조건문 내부 진입시, UserDefaults 값 true로 set
• 표출의 자연스러운 시간을 위해 0.5초 지연시간을 추가 부여했습니다.
• 툴팁 1개인 경우 4초 표출 / 2개 연속인 경우, 2초-3초 지연시간 주어서 표출되도록 설정했습니다.
  

  TOASTER-iOS/TOASTER-iOS/Present/DetailClip/View/DetailClipViewController.swift

  Lines 211 to 219 in 23ac3e1

  	func setupToolTip() {
  	if UserDefaults.standard.value(forKey: TipUserDefaults.isShowDetailClipViewToolTip) == nil {
  	UserDefaults.standard.set(true, forKey: TipUserDefaults.isShowDetailClipViewToolTip)
  	DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) { [weak self] in
  	self?.linkOptionBottomSheetView.addSubview(self?.firstToolTip ?? UIView())
  	self?.firstToolTip.showToolTipAndDismissAfterDelay(duration: 4)
  	}
  	}
  	}

✅ Checklist

• 필요없는 주석, 프린트문 제거했는지 확인
• 컨벤션 지켰는지 확인

[Genesis2010]

직접 구현하시느라 정말로 고생많으셨습니다!

TipPathView 을 자유롭게 위치하기 위해서 Autolayout 으로 설정한게 아니라 위치를 바꾸면서 draw 를 하는게 굉장히 인상 깊습니다!

코드 리뷰가 아닌.. 이해하는데 많은 궁금증이 생기네요...
삼각형을 그리고 위치하는데 고려한 부분이 아래의 사항이 맞는지 궁금합니다.

1. TipPathView 은 삼각형을 그리는 View 이고 draw 메서드가 호출되는 시점은 ToasterTipView 에서 레아이웃이 잡히고나서 실행된다
2. 그릴때는 부모 뷰인 ToasterTipView 크기에서 포인터를 이동해서 삼각형을 그린다
3. containerView 와 TipPathView 의 오토레이아웃 관계를 설정하지 않아도 자유롭게 위치를 바꿔서 그릴 수있다

containerView 가 상하좌우 9 씩 여백이 생기고, TipPathView 는 부모 뷰의 모든 공간을 사용 가능한 상황이지만 그리는 높이 크기를 9로 제한을 두어서 containerView 와 붙어있는 형태로 된다

라고 이해를 했는데.. 맞을까요..?

[mini-min]

직접 구현하시느라 정말로 고생많으셨습니다!

TipPathView 을 자유롭게 위치하기 위해서 Autolayout 으로 설정한게 아니라 위치를 바꾸면서 draw 를 하는게 굉장히 인상 깊습니다!

코드 리뷰가 아닌.. 이해하는데 많은 궁금증이 생기네요... 삼각형을 그리고 위치하는데 고려한 부분이 아래의 사항이 맞는지 궁금합니다.

1. TipPathView 은 삼각형을 그리는 View 이고 draw 메서드가 호출되는 시점은 ToasterTipView 에서 레아이웃이 잡히고나서 실행된다
2. 그릴때는 부모 뷰인 ToasterTipView 크기에서 포인터를 이동해서 삼각형을 그린다
3. containerView 와 TipPathView 의 오토레이아웃 관계를 설정하지 않아도 자유롭게 위치를 바꿔서 그릴 수있다

containerView 가 상하좌우 9 씩 여백이 생기고, TipPathView 는 부모 뷰의 모든 공간을 사용 가능한 상황이지만 그리는 높이 크기를 9로 제한을 두어서 containerView 와 붙어있는 형태로 된다

라고 이해를 했는데.. 맞을까요..?

네네 이해하신게 맞습니다!
containerView와 TipPathView를 구분하게 된 이유가, UIBezierPath로 삼각형을 그리게 되면서 - "뷰 영역 내부에서만 그릴 수 있다는 점"때문에 별도의 부모뷰로 한 계층을 더 추가하게 되었습니다.
삼각형의 높이는 9고 / 말씀하신 것처럼 containerView와 삼각형은 붙어있어야하기 때문에 9의 여백을 상하좌우 주게 된 것이죠!