[TIL / 25.03.31] 앨범에서 사진 고르고 잘라서 쓸 수 있도록! (feat. PHPickerViewController, TOCropViewController)

1. 오늘 진행한 부분

프로필 수정에 있어서 프로필 이미지 수정 부분을 건드리도록 했다. 우선 모하지 블로그에서 프로필 이미지는 1:1 비율을 가져가도록 하며, 이를 스토리지에 잠시 올리도록 api 요청 후에 UUID를 받아 업데이트할 타 정보들과 함께 프로필 수정 요청을 보내도록 한다.

 

그럼 로직이 사진을 선택 후 바로 UUID를 받아오도록 요청하기엔 다시 다른 사진으로 바꿀 수도 있고 그렇게 되면 너무 낭비가 되어 프로필 수정 버튼을 탭하면 프로필 이미지 업데이트 여부를 확인 후 새 이미지를 미디어 파일 업로드 api를 통해 UUID를 받아내 수정 api에 body로 함께 실어보내는 로직이 되겠다.

 

오늘은 조금 집중이 안됐어서 라이브러리 선택 후 기초 구현까지만 했다. 일단 PHPickerViewController를 통해 앨범에 있는 이미지를 하나 선택 후 이를 TOCropViewController를 통해 원하는 영역으로 이미지를 자를 수 있도록 한다.

원래 UIImagePicker를 전 졸작때 썼었는데, 이는 deprecate되고 PHPickerViewController를 추천한다고 한다.

 

 

2. 구현 내용

extension ProfileViewController: ProfileCardViewDelegate, PHPickerViewControllerDelegate, TOCropViewControllerDelegate {
    
    func didTapProfileImageView() {
        presentPicker()
    }
    
    private func presentPicker() {
        var config = PHPickerConfiguration()
        
        config.filter = .images
        config.selectionLimit = 1
        
        let imagePicker = PHPickerViewController(configuration: config)
        imagePicker.delegate = self
        
        self.present(imagePicker, animated: true)
    }
    
    func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
        picker.dismiss(animated: true)
        
        guard let result = results.first else { return }
        
        result.itemProvider.loadObject(ofClass: UIImage.self) { [weak self] (object, error) in
            if let error {
                print("이미지 로드 오류: \(error.localizedDescription)")
                return
            }
            
            DispatchQueue.main.async {
                guard let self, let image = object as? UIImage else { return }
                
                self.showCropViewController(with: image)
            }
        }
    }
    
    private func showCropViewController(with image: UIImage) {
        let cropViewController = TOCropViewController(croppingStyle: .default, image: image)
        cropViewController.delegate = self
        
        cropViewController.doneButtonTitle = "완료"
        cropViewController.cancelButtonTitle = "취소"
        cropViewController.aspectRatioPreset = .presetSquare
        cropViewController.aspectRatioLockEnabled = true
        cropViewController.resetAspectRatioEnabled = false
        cropViewController.aspectRatioPickerButtonHidden = true
        
        present(cropViewController, animated: true)
    }
    
    func cropViewController(_ cropViewController: TOCropViewController, didCropTo image: UIImage, with cropRect: CGRect, angle: Int) {
        profileView.setProfileCardEditedImage(image)
        
        cropViewController.dismiss(animated: true)
    }
    
    func cropViewController(_ cropViewController: TOCropViewController, didFinishCancelled cancelled: Bool) {
        cropViewController.dismiss(animated: true)
    }
    
}

 

우선 흐름은 다음과 같다. View에서 profileImageView를 tap하게 되면 해당 뷰컨트롤러가 대신 구현해준 didTapProfileImageView를 처리하게 되고 그 안에 있는 presentPicker를 처리하도록 한다.

presentPicker는 앨범에서 사진을 고를 수 있도록 config를 통해 사전 설정 후 present해주는데 사진 하나를 고르면 didFinishPicking으로 넘어가 UIImage로 캐스팅하게 된다.  UIImage를 얻어냈으면 CropViewController로 넘겨 crop 후 사진 설정을 할 수 있도록 한다.

 

전체적으로 양쪽 다 관련 ViewController를 만들고 configuration을 통해 설정을 하던지 직접 프로퍼티에 접근을 해서 관련 설정을 마치고 이용하도록 하게 되어있다. 

 

이제 최종 수정한 사진에 대해서 이미지 삭제 및 저장 시 UUID 로드 후 수정 요청까지 구현하면 되겠다.

 

PHPickerViewController 기능

TOCropViewController 기능