포스트

3주차 과제 (9)

Lv.4

1. 전체, 오늘 구분하여 구현하기

Tab bar를 사용하려다 back button이 생기면서 더 꼬일거같아서 버튼으로 구현하기로 했다.

대부분 DB Query에 관한 내용이라 관련 내용은 pass

하지만 처음 화면이 보여질때 전체 화면이 보이게끔 하기위해서

totalBtn.isSelected = true 이걸 viewdidload에 적어주었다.

그리고 각 버튼을 눌렀을때 눌러진 모습을 보여주기 위해서

1
2
3
4
5
6
7
8
9
10
11
12
13
@IBAction func showTotalBtn(_ sender: UIButton) {
        dbManager.getData()
        
        todayBtn.isSelected = !todayBtn.isSelected
        totalBtn.isSelected = !totalBtn.isSelected
    }
    
@IBAction func showTodayBtn(_ sender: UIButton) {
        dateFormat.dateFormat = "yyyy-MM-dd"
        dbManager.getSpecificData(whereCondition: Constants.Fire.fireDate, condition: dateFormat.string(from: Date()))
        todayBtn.isSelected = !todayBtn.isSelected
        totalBtn.isSelected = !totalBtn.isSelected
    }

이런식으로 해주었다.

서로 반대를 해주는데 어차피 viewDidload에 true로 잡혀있기에 가능하다.

2. sideBar 달력을 tap했을때 이벤트 발생시키기

Docs에 의하면 selection을 사용할수 있는데, 그전에 selection객체와, delegate를 만들라고 되어있다.

viewDidload에 다음과 같이 적어서 만들어 주자

1
2
let dateSelection = UICalendarSelectionSingleDate(delegate: self)
calendarView.selectionBehavior = dateSelection

그리고 UICalendarSelectionSingleDateDelegate를 채택해준다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
extension SideBarViewController : UICalendarSelectionSingleDateDelegate {
    
   
    
    func dateSelection(_ selection: UICalendarSelectionSingleDate, didSelectDate dateComponents: DateComponents?) {
        
        let selectedDate = dateComponents
        let calendar = Calendar.current
        let myDate = calendar.date(from: selectedDate!)
        
        let dateFormat = DateFormatter()
        dateFormat.dateFormat = "yyyy-MM-dd"
        
        dbManager.getSpecificData(whereCondition: Constants.Fire.fireDate, condition: dateFormat.string(from: myDate!))

        
    }
    
    
}

이때 클릭했을때 보여주는 방식이 달라서 고민을 하고 찾아보다가 내가 원하는대로 변환하는게 있어서 가져왔다.

위와같이 해주면 이제 정상적으로 “2024-03-23” 뭐 이런식으로 나오게 된다.

3. TableView 구현하기

코드로 구현하는 부분인데 하는 방식은 같다.

이때 보이지 않는 증상이 있었는데 바로 AutoLayout문제였다.

내가 여태 잘못주고 있었다는 생각이 들었다.

TableView는 bottomLayout을 주지않으니 보이지 않았던 문제였다.

튜터님과 대화하면서 코드로 작성한 autolayout의 문제점을 발견했다.

그리고 이렇게 뭐가 안보일때는 view Hierchy를 써보라고 하셨다.

튜터님에게 조언을 받으며 해당기능을 구현할수 있었다.

DB 문제점 수정하기.

가장큰 문제점이 남았다.

1. 쿼리에 해당하지 않을때의 문제 수정

쿼리문에 해당하지않는 조건의 값이 없을때 계속 해서 출력을 해봐도 [] 만 나와서

하나하나 역추적을 제대로 해보기 시작했다.

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
29
30
31
32
33
func getMultiQueryData(whereCondition : String, condition : Any, anotherWhereCondition : String, anotherCondtion:Any) {
        
        dbModel.db.collection(Constants.collectionName).whereField(whereCondition, isEqualTo: condition).whereField(anotherWhereCondition, isEqualTo : anotherCondtion).order(by: Constants.Fire.fireId).getDocuments { (querySnapshot, error) in
            
            self.dbModel.lists = []
            
            if let e = error {
                print(e)
            } else {
                
                if let snapshotDocuments = querySnapshot?.documents {
                    for doc in snapshotDocuments {
                        let data = doc.data()
                        if let listId = data[Constants.Fire.fireId] as? Int
                            , let listTitle = data[Constants.Fire.fireTitle] as? String
                            , let listBool = data[Constants.Fire.fireBool] as? Bool
                            , let listFav = data[Constants.Fire.favBool] as? Bool
                            ,let listImage = data[Constants.Fire.fireImageTitle] as? String
                            , let listDate = data[Constants.Fire.fireDate] as? String {
                            
                            let list = ToDoModel(id: listId, title: listTitle, isComplete: listBool, isFav: listFav, imageTitle: listImage, date: listDate)
                            
                            self.dbModel.lists.append(list)
                            
                            self.delegate?.sendDB(data: self.dbModel.lists)
                            
                        }
                        
                    }
                }
            }
        }
    }

이것을 예로 든다면

처음에는 마지막 부분인 let list != [] 이런식으로 했지만, 해결되지않았다.

그래서 하나하나 올라가기 시작했고

snapShotDocument에서 if snapshotDocuments != [] { } else { print("null")} 로 했을때 null이 찍혔다.

드디어 내가 원하는 부분에대한 위치를 찾게 되었고,

1
2
3
self.dbModel.lists = [ToDoModel(id: 0, title: "조건에 일치하는 데이터가 없습니다", isComplete: false, isFav: false, imageTitle: "https://firebasestorage.googleapis.com/v0/b/todolist-1a790.appspot.com/o/O9IY1C0.jpg?alt=media&token=7e07e023-daf8-422d-a4ce-cdf43137e9cd", date: todayDate)]
    
self.delegate?.sendDB(data: self.dbModel.lists)

이렇게 list를 하나 만들어서 전달을 했다.

이렇게 해주었다.

하지만 이런부분도 데이터를 조작하게 하는건 좋지않을거라 판단하여 isHidden을 사용하여 가려보겠다.

2. 데이터 없을 때 기능 숨기기

1
2
3
4
5
6
7
8
9
if titleString != "조건에 일치하는 데이터가 없습니다" {            
    titleLabel.text = titleString
    } else { // 아무것도 해당하지 않는 경우 기능을 숨기기위해 구현
        titleLabel.text = titleString
        datePicker.isHidden = true
        uploadBtn.isHidden = true
        deadlineLabel.isHidden = true
        dateLabel.isHidden = true
}

전달받은 text값이 위와 같을때는 기능을 숨김 처리하였다.

Cell Animation 주기.

1
2
3
4
5
6
7
8
9
10
11
12
13
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
        let duration = 0.7
        let delayFactor = 0.005
        cell.transform = CGAffineTransform(scaleX: 0.4, y: 0.8)
        UIView.animate(withDuration: duration
                       ,delay:  delayFactor * Double(indexPath.row)
                       ,usingSpringWithDamping: 0.8
                       ,initialSpringVelocity:  0.4
                       ,options: [.autoreverse] 
                       , animations: {
            cell.transform = CGAffineTransform(translationX: 0, y: 0)
        })
    }

유튜브 영상을 보고 참고하여 만들어보았다

미적감각이 개판이지만, 되는걸로 만족한다.

가장 큰 문제가 남았는데, 어떻게 해결을 해야할지 아직도 고민중이다.

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