feat: 프로필 편집 레이아웃 vip 사이클 구현

[anyukyung]

🧑‍🚀 PR 요약

해당 pr에서 작업한 내역을 적어주세요.

• 이게.. 왜 700줄이지? 읽기 힘드실 것 같아서 일단 사과의 말씀 드립니다...
• 간단한 뷰라고 생각했는데, 구현하면서 자잘한 고민이 많이 생겨서 생각보다 시간이 오래걸렸네요..💦💦

• 크게 프로필 편집 뷰 구성과 vip 사이클을 구현했습니다.
• 프로필 뷰 - 편집 뷰 간 라우팅과 데이터 패싱을 구현했습니다.
• PHPicker를 통해 사진을 한장만 선택할 수 있도록 했습니다.
  • PHPicker를 선택한 이유는 권한이 필요하지 않고 (사실 동영상 접근하려면 권한 자체는 필요하긴 함)
  • 애초에 구현 요구사항에 사진 편집 여부가 없었기때문에 PHPicker로 충분하다고 생각했습니다!
  • 그런데 구현하다보니 _프로필 이미지를 삭제하는 플로우_가 없더군요 ㅠ...ㅠㅠㅠ 뷰가 아예 없어서 나중에 추가해야할 것 같습니다.
• 이미지, 닉네임, 소개 변화 여부에 따라 완료 버튼을 활성화하도록 했습니다.

고민

• 기존 SignUpInteractor에서 정규식으로 닉네임 유효성을 검증하는 부분을 UserWorker 쪽으로 뺐습니다. EditProfile에서도 필요해서 공통으로 쓰려고 뺐는데 아예 별도의 구현체로 빼는게 나을지 고민중입니다..
• 현재 프로필 뷰는 전체 컬렉션뷰로 구현되어 있습니다. 그리고 헤더에 프로필 정보, 컬렉션뷰에는 동영상이 들어가있는데요.
  fetchProfile을 하면서 헤더에 접근하는 부분에서 고민이 생겼습니다..
• 도무지 아이디어가 안떠올라 그냥 fetchProfile하는 부분에서 supplementaryViewProvider를 설정해주었는데 내부에서 addTarget하는게 영 좋지않아 보입니당...

        videoDatasource.supplementaryViewProvider = { [weak self] (collectionView, kind, indexPath) in
            guard kind == UICollectionView.elementKindSectionHeader else { return UICollectionReusableView() }
            let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind,
                                                                         withReuseIdentifier: ProfileHeaderView.identifier,
                                                                         for: indexPath) as? ProfileHeaderView
            header?.editButton.addTarget(self, action: #selector(self?.editbuttonDidTap), for: .touchUpInside)
            header?.configure(profileImage: viewModel.profileImage,
                              nickname: viewModel.nickname,
                              introduce: viewModel.introduce)
            return header
        }

• 또 완료 버튼 활성화에 대해 고민하다가, 프로필/닉네임/소개가 변경될 때마다 interactor를 트리거하고
  원래 설정한 닉네임, 소개와 비교 + 유효성 검증을 하도록 했는데 가독성이 영 좋지않아서.. 더 나은 방법 있으면 리뷰 부탁드립니다 ㅎㅎ

    func validateProfileInfo(with request: EditProfileModels.ValidateProfileInfo.Request) {
        let nicknameChanged = nickname != request.nickname
        let introduceChanged = introduce != request.introduce
        let profileInfoChanged = nicknameChanged || request.profileImageChanged || introduceChanged
        let profileInfoValiation = (userWorker?.validateNickname(request.nickname) == .valid) && validateIntroduce(request.introduce ?? "")
        let response = EditProfileModels.ValidateProfileInfo.Response(isValid: profileInfoChanged && profileInfoValiation,
                                                                      nicknameChanged: nicknameChanged)
        presenter?.presentProfileInfoValidation(with: response)
    }

📌 변경 사항

변경사항 및 주의 사항 (모듈 설치 등)을 적어주세요.

📸 ScreenShot

작동, 구현화면

RPReplay_Final1701165327.mov

Linked Issue

close #114

[loinsir]

오... dismiss의 completion으로 안주어도 아래라인들 잘 실행되나요? 궁금...

[anyukyung]

wwdc에서 dismiss 후 이미지를 처리하더라구욧... 그러게요 문제가 없나 궁금하긴하네요

[chopmozzi]

고생하셨습니다. 추가적인 확인이 필요하다고 말씀하셔서 일단 Approve는 추후에 하겠습니당.

[anyukyung]

@chopmozzi @loinsir

• 구현 영상 추가함
• 구현은 했으나 아직 미흡한 부분 있음 💦 살려주세요
  • push될 때 배경색 투명해짐 / 내비바 크기 짱큼 등등
• 그리고 제일 큰 문제는 지금 프로필 부분을 supplementaryView로 구현해놓은 부분
• 안에 데이터가 들어가는데 supplementaryView로 구현한게 문제가 돼서 이슈를 따로 파서 별도의 섹션으로 두고, data 뿌려주는것도 리팩토링할 생각입니다;; 이게 생각보다 이슈가 커져서 영상 편집 화면 구현 후 리팩토링 하겠습니다ㅠ 결론적으루 supplementaryViewProvider에서 데이터 뿌려주는 부분은 변경할 거라고 봐주심 되겠습니다

[chopmozzi]

고생하셨습니다!! 추가적인 부분은 이슈 따로 파서 진행하시는걸로 알고 어프루브 하겠읍니다

[loinsir]

앞으로의 개선을 기대합니다~⚒️