Feat [#44] homeViewUI 구현과 분기처리

[boyeon0119]

👾 작업 내용

• 이용시간 통계 홈 뷰를 드디어 구현했습니다,,,
• 연장하기 버튼을 누른 경우, 실패하는 분기처리는 추후에 할 예정이며 시간 계산 함수들도 extension으로 추후에 따로 정리할 예정입니다.

🚀 PR Point

전체 홈 뷰 구조

• 전체를 컬랙션뷰로 나눠 lottie 이미지와 텍스트를 첫 번째 section, 전체 이용시간 프로그래스 바를 두 번째 section, 마지막 앱별 프로그래바를 cell로 만들어 데이터 개수에 따라 셀들이 쌓이는 세 번째 section으로 나눠서 그렸습니다.

---

앱 사용 시간

• 앱별 사용시간을 계산하는 함수를 통해 ms 단위의 시간 더미데이터를 계산해 progress의 애니메이션까지 적용해 코드를 구현했습니다.
• 커스텀 프로그래스 바가 쉽지 않았지만,,, 킹갓제너럴 박 준 혁님 덕분에 성공하였습니다.

[ 시간 단위 계산 함수 ]

func convertMillisecondsToHoursAndMinutes(milliseconds: Int) -> (hours: Int, minutes: Int) {
        let totalMinutes = milliseconds / (1000 * 60)
        let hours = totalMinutes / 60
        let remainingMinutes = totalMinutes % 60
        return (hours, remainingMinutes)
    }

[ 애니메이션 구현 ]

appProgressBar.setProgress(0, animated: false)
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
            let progress = Float(data.usedTime) / Float(data.appGoalTime)
            self.appProgressBar.setProgress(progress, animated: true)
        }

• 또한, 전체 통계 프로그래스바에서는 앱별 토탈 사용시간들의 합을 계산하는 함수를 통해 그 값을 온보딩 화면에서 세운 목표 시간을 기점으로 progressBar를 그려나가도록 적용하였습니다.

[ 전체 사용시간 ]

func updateTotalUsageTime(data: [AppUsingTimeModel]) {
        let totalProgress = Float(calculateTotalUsageTime(data: data)) / Float(totalTime)
        DispatchQueue.main.async {
            self.totalProgressBar.progress = totalProgress
            if self.calculateTotalUsageTime(data: data) >= self.totalTime {
                self.totalProgressBar.progress = 1
            }
        }
    }

---

블랙홀 분기처리

• 프로그래스바의 퍼센트에 따라 이미지와 텍스트가 바껴야하기 때문에 분기처리를 해줬습니다 (킹갓제너럴 이지히 찬양합니다)
• 셀과 셀 사이의 데이터 이용이라 homeView의 dataSource에서 분기처리를 해줬습니다.

[ 분기처리 과정 ]

// 프로그래스바의 퍼센트를 담는 프로퍼티 초기화
var progressPrecent: Double = 0

// cellForItemAt에서 셀과 셀 사이의 데이터를 주고 받아 값을 계산해서 퍼센트에 따른 분기처리
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        guard let blackholeImageCell = homeCollectionView.dequeueReusableCell(withReuseIdentifier: BlackHoleImageCell.identifier, for: indexPath) as? BlackHoleImageCell else { return UICollectionViewCell() }
        guard let myGoalTimeCell = homeCollectionView.dequeueReusableCell(withReuseIdentifier: MyGoalTimeCell.identifier, for: indexPath) as? MyGoalTimeCell else { return UICollectionViewCell() }
        guard let appUsingProgressViewCell = homeCollectionView.dequeueReusableCell(withReuseIdentifier: AppUsingProgressViewCell.identifier, for: indexPath) as? AppUsingProgressViewCell else { return UICollectionViewCell() }
        
        myGoalTimeCell.bindData(data: appUsingTimeModel)
        self.progressPrecent = Double(myGoalTimeCell.progress)
        
        switch indexPath.section {
        case 0:
            if progressPrecent < 0.24 {
                blackholeImageCell.configureCell(image: ImageLiterals.TabBar.icMyPage, text: StringLiteral.Home.blackHoleFirstStep)
            } else if progressPrecent < 0.49 {
                blackholeImageCell.configureCell(image: ImageLiterals.TabBar.icChallengeSelected, text: StringLiteral.Home.blackHoleSecondStep)
            } else if progressPrecent < 0.74 {
                blackholeImageCell.configureCell(image: ImageLiterals.TabBar.icChallenge, text: StringLiteral.Home.blackHoleThridStep)
            } else if progressPrecent < 0.99 {
                blackholeImageCell.configureCell(image: ImageLiterals.TabBar.icHomeSelected, text: StringLiteral.Home.blackHoleFourthStep)
            } else {
                blackholeImageCell.configureCell(image: ImageLiterals.TabBar.icMyPageSelected, text: StringLiteral.Home.blackHoleFifthStep)
            }
            return blackholeImageCell
        case 1:
            return myGoalTimeCell
            
        case 2:
            appUsingProgressViewCell.bindData(data: appUsingTimeModel[indexPath.row])
            return appUsingProgressViewCell
        default:
            return UICollectionViewCell()
        }
    }

📸 스크린샷

구현 내용	스크린샷
홈 뷰

🚀 기기 대응

기기명	Iphone 13 mini	Iphone 14	Iphone 15 pro	Iphone SE(3rd)
스크린샷

✅ Issue

Resolved #44

[Zoe0929]

P3. 분기처리 진짜찐짜 고생하셨습니다. 오늘도 어쨋든 성공보연

[Zoe0929]

P3. 여기는 빈 줄이 없는 게 더 좋을 것 같아요!

[Zoe0929]

P3. 여기 StringLiteral로 관리해줍시다!

[Zoe0929]

P1. 저희 앱 아이콘 뷰에서 사라져서 없애야 합니다!

[Zoe0929]

P3. adjusted를 했을 때 뷰가 깨지지 않는다면, 여기 .adjusted 추가해주세요!

[Zoe0929]

P3. 파라미터 기준으로 줄 바꿈하는 건 어떠신지 ?

[kim-seonwoo]

고민하신 흔적들이 많이 보입니다.
생각 충분히 해보시고 판단하셔서 리뷰 반영해주세요!

[kim-seonwoo]

p4. adjusted 달아주는게 좋은데 어떻게 생각하세요?

[kim-seonwoo]

p4. 여러번 재활용될 수 있는데 글로벌하게 빼는 거 어떻게 생각하세요?

[kim-seonwoo]

p4. 여기도 adjusted가 가능하지 않을까요?