Style/#374 공통여정 퀘스트 신고&차단 바텀시트 및 토스트메시지 추가

[y-eonee]

🔗 연결된 이슈

• Connected: [Style] 신고하기 바텀시트 UI, 토스트메시지 #374

📄 작업 내용

• 신고하기/차단하기 & 수정하기/삭제하기 바텀시트를 구현했습니다
• 새롭게 추가된 토스트메시지 case를 추가했고, 레이아웃을 수정했습니다.

구현 내용	시트	토스트메시지
GIF

예시로 그냥 이 뷰에서 실행해봤어요.. ㅎㅎ

💻 주요 코드 설명

바텀시트

공통여정 아카이브가 내가 작성한 퀘스트 & 남이 작성한 퀘스트 두가지로 나뉘어져서, mine과 others 라는 enum으로 구분합니다.
확장성 있게 구현해보고 싶어서 .. Item 구조체를 만들어서, 바텀시트 뷰에서 makeItem을 호출해서 뷰에 넣는 식으로 구현했습니다.

enum CommonQuestArchiveType {
    case mine
    case other
    
    struct Item {
        let title: String
        let icon: UIImage
        let color: UIColor
    }
    
    var items: [Item] {
        switch self {
        case .mine:
           ...

 override func setUI() {
        addSubviews(contentStackView, dismissButton)
        
        sheetType.items.enumerated().forEach { index, item in // item을 돌면서 하나의 item 컴포넌트를 생성합니다. 
            let rowView = makeItemRow(item: item)
            itemList.append(rowView)
            contentStackView.addArrangedSubviews(rowView)

            if index != sheetType.items.count - 1 {
                let divider = SectionDividerView()
                contentStackView.addArrangedSubviews(divider)
            }
        }
    }

이 부분에서 바텀시트를 사용할 때는 다음과 같이 부르면 됩니다!!

commonsheet.configure(sheeetTYpe: .mine) // sheet type을 정하는 configure를 먼저 호출해야합니다 
  if let sheet =  commonsheet.sheetPresentationController{
      sheet.detents = [.custom { _ in 224.adjustedH }]
      sheet.prefersGrabberVisible = true
      sheet.prefersScrollingExpandsWhenScrolledToEdge = false
      sheet.preferredCornerRadius = 8
  }
  self.present(commonsheet, animated: true)

[dev-domo]

바텀시트를 만들어주심에 감사를 표합니다...

[dev-domo]

필요없는 주석이라면 삭제해도 될 것 같습니다!

[dev-domo]

addArrangedSubviews 대신 addArrangedSubview를 호출해도 되겠네요! 밑에 divider를 추가할 때도요!

[dev-domo]

tag에 따라 분기 처리하기보다 만들어둔 CommonQuestArchiveType에 액션 케이스를 정의해주면 어떨까요? 대충 작성해보자면..

enum CommonQuestArchiveType {
    case mine
    case other
    
    enum Action {
        case edit, delete, report, block    // 차례대로 수정, 삭제, 신고, 차단
    }

    struct Item {
        let title: String
        let icon: UIImage
        let color: UIColor
        let action: Action    // 새로운 속성 추가
    }
    ...
}

이런 식으로 만들어서 switch-case문 없이 sheetType의 Item의 action에 접근하도록 설계할 수도 있을 것 같아요~

[y-eonee]

action에 접근해서 case에 따라 분기처리하는 방식으로 수정해보았습니다 !!!