AI 챗봇 앱 [Step3] Hoi, Andy

[happykwon]

안녕하세요 그린 @GREENOVER , 만나서 반갑습니다! 😆
AI챗봇애 STEP3 PR 드립니다.

Autolayout의 매운맛을 제대로 느껴본 과정이였습니다..
계속 에러가 나서 많이 늦어졌네요 🤣

🔍 What is this PR?

Step3

구현사항

• 동적 cell 구현 (메세지에따른)
• indicator구현
• Autolayout

PR Point

UICollectionViewDelegateFlowLayout사용

셀 높이의 동적인 변화가 필요하기 때문에 UICollectionViewDelegateFlowLayout를 사용해 셀의 크기를 동적으로 계산하도록 했습니다.

extension DetailChatViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
          let message = viewModel.messageRepository.getMessages()[indexPath.row].content
          let width = collectionView.frame.width - 40
          let size = CGSize(width: width, height: CGFloat.greatestFiniteMagnitude)
          let attributes = [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 15)]
          let estimatedFrame = NSString(string: message).boundingRect(with: size, options: .usesLineFragmentOrigin, attributes: attributes, context: nil)
          return CGSize(width: width, height: estimatedFrame.height + 20)
      }
}

notification을 활용한 keyboard 대응 동적 view 구현

UIResponder.keyboardFrameEndUserInfoKey를 통해 키보드의 크기에 대한 CGRect값을 얻어 키보드가 올라온다면 height값만큼 view를 올려주도록 했고, self.view.transform = .identity를 사용해 keyboard가 사라지면 원래의 값으로 돌아오게 구현했습니다.

 @objc func keyboardUp(notification:NSNotification) {
        if let keyboardFrame:NSValue = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue {
            let keyboardRectangle = keyboardFrame.cgRectValue
            UIView.animate(
                withDuration: 0.3
                , animations: {
                    self.view.transform = CGAffineTransform(translationX: 0, y: -keyboardRectangle.height)
                }
            )
        }
    }

❓질문

1. GCD를 적절하게 사용하였는지

UI를 구현하는 코드는 mainThraed에서 작동하게 신경써서 구현했습니다. 혹시 빠진 부분이나 global에서 작동되어야 할 코드들이 있다면 조언 부탁드립니다 !

2. MVVM 모델 설계

역할을 분리해주려고 노력했지만... viewController에서 많은 것들이 처리되는 것 같습니다. viewModel이 너무 하는 일이 없는 것 같은데 혹시나 그린이 보기에 역할 구분이 잘 되지 않은 부분이 있다면 조언 부탁드립니다 !

3. Autolayout

Autolayout을 전부 구현하고 확인해보니 에러가 계속 떠서 어디서부터 잘못된 것인지 디버깅 하는데 갈피를 못잡았습니다.
현업에서 UI구성 시 이러한 사태를 방지하기 위해 어떤식으로 구현을 하는지 아니면, 그린만의 노하우가 있는지 궁금합니다.

│   ├── ChatBot
│   │   ├── App
│   │   │   ├── AppDelegate.swift
│   │   │   └── SceneDelegate.swift
│   │   ├── Assets
│   │   │   ├── Assets.xcassets
│   │   │   │   ├── AccentColor.colorset
│   │   │   │   │   └── Contents.json
│   │   │   │   ├── AppIcon.appiconset
│   │   │   │   │   └── Contents.json
│   │   │   │   └── Contents.json
│   │   │   └── Base.lproj
│   │   │       └── LaunchScreen.storyboard
│   │   ├── Config.xcconfig
│   │   ├── Info.plist
│   │   ├── Model
│   │   │   ├── OpenAICheatResponseDTO.swift
│   │   │   ├── RequestDTO.swift
│   │   │   └── RequestMessageModel.swift
│   │   ├── Network
│   │   │   ├── APIKeyManager.swift
│   │   │   ├── Config.xcconfig
│   │   │   ├── NetworkErrorEnum.swift
│   │   │   ├── OpenAIEndPoint.swift
│   │   │   ├── OpenAIService.swift
│   │   │   └── URLRequestBuilder.swift
│   │   ├── OpenAIResponseDTO.swift
│   │   ├── Repository
│   │   │   └── MessageRepository.swift
│   │   ├── Resource
│   │   ├── View
│   │   │   ├── ChatMessageCollectionView.swift
│   │   │   ├── DetailChatViewController.swift
│   │   │   ├── DetailChatViewUserInputSectionStackView.swift
│   │   │   ├── DetailMessageCollectionViewCell.swift
│   │   │   └── MessageCellStackView.swift
│   │   └── ViewModel
│   │       └── ChatViewModel.swift`