[TIL] 키오스크 프로젝트 - 개발 3일차 -

1️⃣ Navigation - pushViewController

어제 구현했던 'View 전환 Animation' 부분은 Navigation 기능이 없어서 왼쪽화면을 슬라이드 해서 뒤로 갈 수 있는 기능이 동작하지 않는다.
그래서 어떤 기능을 사용할 지 구글링 해본 결과 pushViewController를 찾았다.

사용방법은 stroyboard에서 Navigation Controller를 추가해주고, 이동하려는 ViewController의 id를 정의 해주고 입력해준다. 그리고 아래와 같이 코드를 작성하면, 왼쪽화면을 슬라이드 하면 이전화면으로 돌아갈 수 있는 기능이 구현된다.

@IBAction func floatingButtonTapped(_ sender: Any) {
        
        let storyboard = UIStoryboard(name: "OrderList", bundle: nil)
        
        if let pushVC = storyboard.instantiateViewController(withIdentifier: "OrderList") as? OrderListViewController {
            self.navigationController?.pushViewController(pushVC, animated: true)
            print(selectedMenu)
        } else {
            print(selectedMenu)
        }
    }

2️⃣ tableView.selectRow(at: animated: scrollPosition:)

오늘은 이 부분을 구현하는데 6시간은 소비한 것 같다...
이 부분은 tableView의 cell 부분을 선택하고 segment버튼으로 데이터를 reload 한 후에 원래 segment index로 돌아와도 선택한 cell의 isSelected가 true가 되게 끔 구현한거다.

처음에는 selectRow() 메소드를 사용하지 않고, 직접적으로

isSelected = true

이렇게 작성했다. 하지만 이렇게 작성하니 cell이 잠시동안 만 활성화 되고 꺼지는 문제가 발생했다.
그래서 구글링으로 찾아 본 결과, isSelected는 직접적으로 건드리지 않는 것을 추천하는 내용을 알게 되었다. 그래서 다음으로 사용된 방법은

setSelected(true, animated: false)

setSelected()를 사용하는 방법이였다. 이 함수를 사용하면 isSelected를 직접적으로 수정하지 않기 때문에 동작이 될 줄 알았다.
하지만 이 방법도 위와 같은 현상이 발생하면서 동작이 되지 않았다.

결국 두 번의 실패 끝에 원인이 정확하게 파악하기 위해 여러가지 방법을 시도해봤다. 처음에는 생명주기때문에 reusecell로 인해 다시 false처리가 된다는 가정을 해서 비동기 처리도 해봤지만, 생명주기의 문제는 아니였다...

다음에는 isSelected가 정확히 어느 타이밍에 true에서 false로 선언되는지를 찾아보고자 했다. 그래서 이곳저곳에 print()문으로 isSelected의 상태를 출력해봤지만, 이 방법으로는 정확한 타이밍을 알 수 없었다. 그래서 유용한 함수가 없나 찾아보는 도중에

tableView(tableView: willSelectRowAt:)

라는 메소드가 있는 걸 알아냈다. 이 메소드는 cell을 선택하는

tableView(tableView: didSelectRowAt:)

메소드 바로 전에 실행 되어서 isSelected의 상태를 바로 볼 수 있었다.

위의 메소드를 확인해 본 결과 isSelected는 segment로 원래의 index 값에 돌아왔을 때 true로 변하지 않고, false로 머물러 있었다.

결국엔 위의 방법들이 틀리진 않았지만, 위의 방법들로는 isSelected의 상태를 바꿀 수 없는 것이였다.

마지막으로 애플공식 문서를 찾아보면서 isSelected를 바꿀 수 있는 메소드를 찾아본 결과, tableView.selectRow(at: animated: scrollPosition:)를 찾아낼 수 있었다.
그리고 코드를 넣어 돌려본 결과 isSelected가 true로 변환되면서, 구현하고자 하는 부분을 구현할 수 있게 되었다!!

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "MainViewTableCell", for: indexPath) as! MainViewTableCell
        // setCell 메서드를 호출하여 셀의 데이터를 설정합니다.
        cell.setCell(image: "americano", title: "title", description: "description", price: "4500")
        
        divideType(datas: data)
        switch segment.selectedSegmentIndex {
        case 0:
            cell.setCell(image: "americano", title: coffee[indexPath.row].name, description: "desciption", price: "4500")
            if selectedMenu.contains(where: { $0.name.contains(coffee[indexPath.row].name) } ) {
                tableView.selectRow(at: indexPath, animated: false, scrollPosition: .none)
            }
            return cell
        case 1:
            cell.setCell(image: "americano", title: nonCoffee[indexPath.row].name, description: "desciption", price: "4500")
            if selectedMenu.contains(where: { $0.name.contains(nonCoffee[indexPath.row].name) } ) {
                tableView.selectRow(at: indexPath, animated: false, scrollPosition: .none)
            }
            return cell
        case 2:
            cell.setCell(image: "americano", title: cake[indexPath.row].name, description: "desciption", price: "4500")
            if selectedMenu.contains(where: { $0.name.contains(cake[indexPath.row].name) } ) {
                tableView.selectRow(at: indexPath, animated: false, scrollPosition: .none)
            }
            return cell
        case 3:
            cell.setCell(image: "americano", title: bread[indexPath.row].name, description: "desciption", price: "4500")
            if selectedMenu.contains(where: { $0.name.contains(bread[indexPath.row].name) } ) {
                tableView.selectRow(at: indexPath, animated: false, scrollPosition: .none)
            }
            return cell
        default:
            return cell
            
        }
    }

3️⃣ 장바구니 개수 카운트

아래의 코드들은 cell을 선택할 때마다, selectedMenu의 카운트 값을 Label에 넣어서 장바구니의 개수를 반환해준다.

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        switch segment.selectedSegmentIndex {
        case 0:
            selectedMenu.append(coffee[indexPath.row])
            selectedLabel.text = String(selectedMenu.count)
        case 1:
            selectedMenu.append(nonCoffee[indexPath.row])
            selectedLabel.text = String(selectedMenu.count)
        case 2:
            selectedMenu.append(cake[indexPath.row])
            selectedLabel.text = String(selectedMenu.count)
        case 3:
            selectedMenu.append(bread[indexPath.row])
            selectedLabel.text = String(selectedMenu.count)
        default:
            break
        }
    }
    func tableView(_ tableView: UITableView, didDeselectRowAt indexPath: IndexPath) {
        switch segment.selectedSegmentIndex {
        case 0:
            self.selectedMenu = selectedMenu.filter { $0.name != coffee[indexPath.row].name }
            selectedLabel.text = String(selectedMenu.count)
        case 1:
            self.selectedMenu = selectedMenu.filter { $0.name != nonCoffee[indexPath.row].name }
            selectedLabel.text = String(selectedMenu.count)
        case 2:
            self.selectedMenu = selectedMenu.filter { $0.name != cake[indexPath.row].name }
            selectedLabel.text = String(selectedMenu.count)
        case 3:
            self.selectedMenu = selectedMenu.filter { $0.name != bread[indexPath.row].name }
            selectedLabel.text = String(selectedMenu.count)
        default:
            break
        }
    }