포스트

프로젝트 4일차

4일차가 시작이 되었다.

이전에 SearchBar를 구현했었기에 오늘은 먼저 해당 기능을 구현하려고 한다.

SearchBar 기능구현

Component 등록은 생략.

의식의 흐름대로 기능을 구현해본다.

1. 취소시 text 해제

1
2
3
func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
        searchBar.text = ""
    }

Apr-04-2024-10-48-16

완료.

2. 엔터를 쳤을때 검색 결과 나타내기

1
2
3
4
5
6
func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
    if let input = searchBar.text {
        filteredProducts = dataManager.products.filter{$0.name.contains(input)}
        mainCollectionView.reloadData()
    }        
}

컬렉션뷰가 가져오는 배열이 filteredProducts이기에 입력값을 포함하는 데이터들을 거기에 담아 보여주게 했다.

3. 검색내용을 지웠을때 화면을 첫 세그로

1
2
3
4
5
6
7
func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
        if searchBar.text?.count == 0 {
            productSegment.selectedSegmentIndex = 0
            filteredProducts = dataManager.products.filter { $0.category == "맥북" }
            mainCollectionView.reloadData()
        }
    }

입력을 지웠을때 세그와 배열을 초기화 해주었다.

세그만 0으로 해서는 안되는 문제였다.

4. 기능 발전

2번의 내용을 지우고 아래와 같이 발전시켰다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
extension ViewController: UISearchBarDelegate {
    
    // 입력 취소시
    func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
        searchBar.text = ""
    }
    
    // 활성화된 키보드에서 검색을 눌렀을때 키보드 사라짐.
    func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
        searchBar.endEditing(true)
    }
    
    // 검색어의 변화가 있을때
    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
        // 지웠을때
        if searchBar.text?.count == 0 {
            productSegment.selectedSegmentIndex = 0 // 인덱스 mac으로 되돌리기
            filteredProducts = dataManager.products.filter { $0.category == "맥북" }
            mainCollectionView.reloadData()
            
        // 타이핑 하고 있을때
        } else {
            filteredProducts = dataManager.products.filter{$0.name.contains(searchText)}
            mainCollectionView.reloadData()
        }
    }
    
}

테스트

Apr-04-2024-12-15-44

테스트 하면서 더 보완을 해야하긴 할것같다.

문제(?) 발견

Tab Bar를 통해 UI를 구성하면서 VC에서 MyPageVC로의 데이터 전달을 시도하였으나 아무리 시도해도 되지 않았다.

그러다 튜터님께 해당문제에 대해 조언을 구하기 위해 여쭤 봤다.

새로운 대책 제시

튜터님께서 현재 SelectedList가 이렇게 많이 쓰이는것이라면, 싱글톤을 쓰는게 좋다고 하셨다.

새로운 깨우침을 얻었다.

해당 기능을 구현 해보려한다.

싱글톤 방식 채택

싱글톤은 추후에 따로 정리하도록 하겠다.

처음에는 AppleProduct에 그냥 할까 하다가. 그러면 데이터 입력에 대한 코드가 전부 꼬이기에

새롭게 구성했다.

1
2
3
4
5
6
7
8
class ListManager {
    
    static let shared = ListManager()
    
    var list: [AppleProduct] = []
    
    private init () {}
}

그리고 selectedList와 관련되어있던 내용을 전부 ListManager.shared.list로 바꿔주었다.

하나 더!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// MARK: - 장바구니 선택
    @IBAction func openCart(_ sender: UIButton) {
        let modalVC = self.modalViewController
        modalVC.delegate = self
       
        // 사이드 메뉴 뷰 컨트롤러를 자식으로 추가하고 뷰 계층 구조에 추가.
        self.addChild(modalVC)
        self.view.addSubview(modalVC.view)
        
        let menuWidth = self.view.frame.width // 가로는 현재 화면과 동일하게
        let menuHeight = self.view.frame.height * 0.3 // 높이만 30%로 설정
        
        // 사이드 메뉴의 시작 위치를 화면 아래로 설정.
        modalVC.view.frame = CGRect(x: 0, y: view.frame.height, width: menuWidth, height: menuHeight)
        
        // 어두운 배경 뷰를 보이게 한다.
        self.dimmingView?.isHidden = false
        self.dimmingView?.alpha = 0.6
        
        UIView.animate(withDuration: 0.3, animations: {
            // 사이드 메뉴를 화면에 표시.
            modalVC.view.frame = CGRect(x: 0, y: self.view.frame.height - menuHeight, width: menuWidth, height: menuHeight)
            // 어두운 배경 뷰의 투명도를 조절.
            self.dimmingView?.alpha = 0.5
        })
        
    }

장바구니 선택할때 delegate를 통해 전달하던것을 지웠다 이제는 상관없기 때문이다.

작동 테스트 완료.

이젠 프로토콜 사용했던것들도 전부 날려버리자.

그래도 나름 데이터 전송 연습했으니 만족.

이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.