Setting/#6 에셋 및 탭바 세팅

[lsj8706]

🌱 작업한 내용

• 에셋 추가
• Color, Image, Font의 Literals 생성
• TabBar 세팅
• CustomNavigationBar 구현
• CustomButton 구현

🌱 PR Point

• 현재 피그마의 상태에서 보이는대로 에셋 추가 했습니다. (아직 디자이너 선생님들이 style guide를 완전히 확정하지 않은 것 같습니다.)
  따라서 추후 에셋이 수정될 가능성이 있습니다. 일단은 이대로 작업을 하고 나중에 한번에 바뀐 에셋으로 다시 수정하겠습니다~!
• 에셋을 이용하여 탭바 세팅하였습니다. 탭바 세팅을 위해 기본적인 뷰 폴더링을 했으니 각자 맡은 폴더에서 UI 구현 작업을 시작하면 됩니다!

ColorLiterals 사용법 예시

view.backgroundColor = UIColor.m1

ImageLiterals 사용법 예시

let sampleImageView: UIImageView = {
    let imageView = UIImageView()
    imageView.image = ImageLiterals.imgLogo
    return imageView
}()

FontLiterals 사용법 예시

let sampleLabel: UILabel = {
    let label = UILabel()
    label.text = "테스트 라벨입니다."
    label.font = UIFont.h1
    label.textColor = UIColor.g2
    return label
}()

---

네비게이션바를 구현하였습니다. 현재 피그마에 있는 모든 네비바를 분기처리하여 구현하였기 때문에 바로 사용하시면 됩니다!
뒤로가기 버튼을 누르면 화면이 pop 되게 구현했습니다.

CustomNavigationBar 사용법 예시

lazy var naviBar = CustomNavigationBar(self, type: .title).setTitle("보관함")

lazy var naviBar = CustomNavigationBar(self, type: .title).setTitle("보관함")

 lazy var naviBar = CustomNavigationBar(self, type: .titleWithLeftButton).setTitle("목표 보상")

lazy var naviBar = CustomNavigationBar(self, type: .search).showKeyboard().setTextFieldPlaceholder(placeholder: "출발지 검색")

(showKeybard()를 넣으면 해당 뷰가 보이는 동시에 키보드가 올라옵니다. <- 기획 쪽 의도 사항) VC에서 네비바의 우측 검색 버튼을 눌렀을 때 사용자가 입력한 text를 가져오고 싶다면 delegate 패턴을 통해 가져 올 수 있습니다.

final class TestVC: UIViewController {
    lazy var naviBar = CustomNavigationBar(self, type: .search).showKeyboard().setTextFieldPlaceholder(placeholder: "출발지 검색")
    
    override func viewDidLoad() {
        super.viewDidLoad()
        naviBar.delegate = self
        // 생략
    }
}

extension TestVC: CustomNavigationBarDelegate {
    func searchButtonDidTap(text: String) {
        // 여기서 검색 버튼 클릭 시 이벤트 처리 (서버 통신 등)
        print(text)
    }
}

---

CustomButton 사용 예시

• 추가적으로 이번 프로젝트에서 자주 사용되는 보라색 버튼을 구현했습니다. 중복되는 코드를 방지하기 위해 해당 버튼을 사용하는 곳에서는
  다음과 같이 추가하여 사용하면 됩니다! (물론 버튼의 색상을 바꿀 수 있습니다. CustomButton.swift에 주석으로 함수 사용법이 있습니다.)
  레이아웃은 기존의 UIButton의 레이아웃 잡듯이 잡으면 됩니다.

private let testButton = CustomButton(title: "코스 그리기")

• 임시적으로 CourseDrawingHomeVC 에 예시 코드를 넣었으니 한번 확인해보세요~!

📸 스크린샷

구현 내용	스크린샷
탭바 + 네비바

📮 관련 이슈

• Resolved: [Setting] 에셋 및 탭바 세팅 #6

[lee-yeonwoo]

굿

[dlwogus0128]

짱~