Ting! 검색 화면(SearchView) 구현 (1)

🛠 사용된 라이브러리

• UIKit: iOS의 기본 UI 프레임워크
• SnapKit: Auto Layout을 코드로 쉽게 작성할 수 있는 라이브러리
• Then: 객체 초기화를 깔끔하게 할 수 있는 라이브러리

📱 주요 구성요소

1. SearchBar

검색어를 입력받을 수 있는 기본적인 검색창.

let searchBar = UISearchBar().then {
    $0.placeholder = "검색어를 입력하세요"
    $0.searchBarStyle = .minimal
    $0.backgroundColor = .clear
}

2. 카테고리 데이터

검색 필터로 사용될 카테고리들을 정의.

let categories: [(String, [String])] = [
    ("구인/구직", ["구인", "구직"]),
    ("직무", ["개발", "기획", "디자인", "마케터", "데이터"]),
    ("시급성", ["급함", "보통", "여유로움"]),
    ("아이디어 상황", ["구체적임", "모호함", "없음"]),
    ("경험", ["처음 입문", "재직중", "휴직중", "취준중"])
]

3. 스크롤뷰와 필터 버튼

카테고리별 필터 버튼들을 스크롤 가능하게 표시.

let scrollView = UIScrollView().then {
    $0.showsVerticalScrollIndicator = false
}

let applyFilterButton = UIButton().then {
    $0.setTitle("필터 적용하기", for: .normal)
    $0.setTitleColor(.white, for: .normal)
    $0.backgroundColor = UIColor(hex: "#C2410C")
    $0.layer.cornerRadius = 10
}

💫 UI 구현

기본 레이아웃 설정

private func setupUI() {
    backgroundColor = UIColor(hex: "#FFF7ED")
    
    addSubview(searchBar)
    addSubview(scrollView)
    addSubview(applyFilterButton)
    
    // SnapKit을 사용한 제약조건 설정
    searchBar.snp.makeConstraints {
        $0.top.equalTo(safeAreaLayoutGuide).offset(10)
        $0.leading.trailing.equalToSuperview().inset(16)
    }
    
    // ... 나머지 제약조건들
}

카테고리 버튼 생성

각 카테고리별로 동적으로 버튼을 생성하고 배치.

private func setupCategoryButtons() {
    var previousView: UIView? = nil
    
    for (category, items) in categories {
        let categoryLabel = UILabel().then {
            $0.text = category
            $0.font = UIFont.boldSystemFont(ofSize: 16)
            $0.textColor = UIColor(hex: "#C2410C")
        }
        
        // ... 버튼 스택뷰 설정
    }
}

필터 버튼 스타일링

iOS 15 이상과 이하 버전에서 모두 동작하는 버튼 스타일링 구현.

private func createFilterButton(title: String) -> UIButton {
    let button = UIButton().then {
        $0.setTitle(title, for: .normal)
        $0.setTitleColor(UIColor(hex: "#C2410C"), for: .normal)
        $0.layer.borderColor = UIColor(hex: "#C2410C").cgColor
        $0.layer.borderWidth = 1
        $0.layer.cornerRadius = 15
        
        if #available(iOS 15.0, *) {
            var config = UIButton.Configuration.plain()
            config.contentInsets = NSDirectionalEdgeInsets(top: 8, leading: 12, bottom: 8, trailing: 12)
            $0.configuration = config
        } else {
            $0.contentEdgeInsets = UIEdgeInsets(top: 8, left: 12, bottom: 8, right: 12)
        }
    }
    return button
}

🎯 버튼 동작 구현

필터 버튼이 탭되었을 때의 동작을 구현.

@objc private func filterButtonTapped(_ sender: UIButton) {
    sender.isSelected.toggle()

    if sender.isSelected {
        sender.backgroundColor = UIColor(hex: "#9A4312")
        sender.setTitleColor(.red, for: .normal)
    } else {
        sender.backgroundColor = .clear
        sender.setTitleColor(UIColor(hex: "#C2410C"), for: .normal)
    }
}

🎨 UI 결과

구현된 검색 화면의 구성:

• 상단의 검색바
• 카테고리별로 구분된 필터 버튼들
• 하단의 필터 적용 버튼

사용자가 필터 버튼을 탭하면 시각적 피드백을 제공하고 선택 상태가 토글.

마치며

이 구현은 SnapKit과 Then 라이브러리를 활용해서 코드를 더 깔끔하고 관리하기 쉽게 구현. iOS 15 이상과 이하 버전 모두에서 동작하도록 대응.

전체 코드는 깔끔한 구조와 함께 재사용성을 고려해서 작성했으며, 필요에 따라 쉽게 커스터마이징 가능.

Velog에 붙여넣을 수 있도록 마크다운 형식으로 정리.