Merge pull request #960 from wakmusic/951-music-detail-ui-design

🔀 :: (#951) 음악 상세 페이지 디자인 수정

Projects/Features/MusicDetailFeature/Sources/MusicDetail/MusicDetailReactor.swift

@@ -111,7 +111,7 @@ final class MusicDetailReactor: Reactor {
         case .playListButtonDidTap:
             return playListButtonDidTap()
         case .dismissButtonDidTap:
-            return .just(.navigate(.dismiss))
+            return navigateMutation(navigate: .dismiss)
         }
     }
 
@@ -179,10 +179,7 @@ private extension MusicDetailReactor {
             )
             LogManager.analytics(log)
         }
-        return .concat(
-            .just(.navigate(.youtube(id: song.videoID))),
-            .just(.navigate(nil))
-        )
+        return navigateMutation(navigate: .youtube(id: song.videoID))
     }
 
     func nextButtonDidTap() -> Observable<Mutation> {
@@ -219,17 +216,14 @@ private extension MusicDetailReactor {
             title: song.title,
             artist: song.artistString
         )
-        return .concat(
-            .just(.navigate(.lyricsHighlighting(model: lyricHighlightingModel))),
-            .just(.navigate(nil))
-        )
+        return navigateMutation(navigate: .lyricsHighlighting(model: lyricHighlightingModel))
     }
 
     func creditButtonDidTap() -> Observable<Mutation> {
         guard let song = currentState.selectedSong else { return .empty() }
         let log = Log.clickCreditButton(id: song.videoID)
         LogManager.analytics(log)
-        return .just(.navigate(.credit(id: song.videoID)))
+        return navigateMutation(navigate: .credit(id: song.videoID))
     }
 
     func likeButtonDidTap() -> Observable<Mutation> {
@@ -269,34 +263,35 @@ private extension MusicDetailReactor {
         guard let song = currentState.selectedSong else { return .empty() }
         let log = Log.clickMusicPickButton(id: song.videoID)
         LogManager.analytics(log)
-        return .concat(
-            .just(.navigate(.musicPick(id: song.videoID))),
-            .just(.navigate(nil))
-        )
+        return navigateMutation(navigate: .musicPick(id: song.videoID))
     }
 
     func playListButtonDidTap() -> Observable<Mutation> {
         guard let song = currentState.selectedSong else { return .empty() }
         let log = Log.clickPlaylistButton(id: song.videoID)
         LogManager.analytics(log)
-        return .concat(
-            .just(.navigate(.playlist)),
-            .just(.navigate(nil))
-        )
+        return navigateMutation(navigate: .playlist)
     }
 }
 
 // MARK: - Private Methods
 
 private extension MusicDetailReactor {
+    func navigateMutation(navigate: NavigateType) -> Observable<Mutation> {
+        return .concat(
+            .just(.navigate(navigate)),
+            .just(.navigate(nil))
+        )
+    }
+
     func prefetchThumbnailImage(index: Int) {
-        if let songID = currentState.songIDs[safe: index],
-           let thumbnailPrefetchingSongID = currentState.songDictionary[songID]?.videoID,
-           let thumbnailURL = URL(
-               string: youtubeURLGenerator.generateHDThumbnailURL(id: thumbnailPrefetchingSongID)
-           ) {
-            ImagePrefetcher(urls: [thumbnailURL]).start()
-        }
+        let prefetchingSongImageURLs = [
+            currentState.songIDs[safe: index - 1],
+            currentState.songIDs[safe: index],
+            currentState.songIDs[safe: index + 1]
+        ].compactMap { $0 }
+            .compactMap { URL(string: youtubeURLGenerator.generateHDThumbnailURL(id: $0)) }
+        ImagePrefetcher(urls: prefetchingSongImageURLs).start()
     }
 
     func fetchSongDetailWith(index: Int) -> Observable<Mutation> {

Projects/Features/MusicDetailFeature/Sources/MusicDetail/MusicDetailView.swift

@@ -129,7 +129,7 @@ private extension MusicDetailView {
 
     func setLayout() {
         thumbnailCollectionView.snp.makeConstraints {
-            $0.top.lessThanOrEqualTo(self.safeAreaLayoutGuide.snp.top).offset(52)
+            $0.top.lessThanOrEqualTo(wmNavigationbarView.snp.bottom).offset(44)
             $0.centerX.equalToSuperview()
             $0.leading.trailing.equalToSuperview()
             $0.height.equalTo(thumbnailCollectionView.snp.width).multipliedBy(9.0 / 16.0)
@@ -148,7 +148,7 @@ private extension MusicDetailView {
         wmNavigationbarView.setRightViews([creditButton])
 
         musicControlView.snp.makeConstraints {
-            $0.top.equalTo(thumbnailCollectionView.snp.bottom).offset(36)
+            $0.top.equalTo(thumbnailCollectionView.snp.bottom).offset(20).priority(.required)
             $0.leading.trailing.equalToSuperview().inset(36)
             $0.bottom.lessThanOrEqualTo(musicToolbarView.snp.top)
             $0.height.equalTo(musicControlView.snp.width).multipliedBy(1.0 / 1.0)

Projects/Features/MusicDetailFeature/Sources/MusicDetail/Views/MusicHeartButton/MusicHeartButton.swift

@@ -20,39 +20,21 @@ final class MusicHeartButton: VerticalAlignButton {
     }
 
     func setIsLike(isLike: Bool, animated: Bool = true) {
-        let heartImage: UIImage
-        if isLike {
-            heartImage = DesignSystemAsset.MusicDetail.heartFill.image
+        let heartImage: UIImage = if isLike {
+            DesignSystemAsset.MusicDetail.heartFill.image
         } else {
-            heartImage = DesignSystemAsset.MusicDetail.heart.image
-        }
-
-        self.isLike = isLike
-        guard animated else {
-            self.setImage(heartImage, for: .normal)
-            self.setIsLikeTextColor(isLike: isLike)
-            return
-        }
-
-        self.imageView?.transform = .init(scaleX: 1.25, y: 1.25)
-        UIViewPropertyAnimator(duration: 0.3, curve: .easeIn) {
-            self.imageView?.transform = .identity
+            DesignSystemAsset.MusicDetail.heart.image
         }
-        .startAnimation()
 
         self.setImage(heartImage, for: .normal)
         self.setIsLikeTextColor(isLike: isLike)
     }
 
     private func setIsLikeTextColor(isLike: Bool) {
         if isLike {
-            self.setTitleColor(DesignSystemAsset.PrimaryColorV2.increase.color, for: .normal)
-            self.setTitleColor(DesignSystemAsset.PrimaryColorV2.increase.color, for: .selected)
-            self.setTitleColor(DesignSystemAsset.PrimaryColorV2.increase.color, for: .highlighted)
+            self.setTextColor(color: DesignSystemAsset.PrimaryColorV2.increase.color)
         } else {
-            self.setTitleColor(DesignSystemAsset.NewGrayColor.gray400.color, for: .normal)
-            self.setTitleColor(DesignSystemAsset.NewGrayColor.gray400.color, for: .selected)
-            self.setTitleColor(DesignSystemAsset.NewGrayColor.gray400.color, for: .highlighted)
+            self.setTextColor(color: DesignSystemAsset.NewGrayColor.gray400.color)
         }
     }
 }

Projects/Features/MusicDetailFeature/Sources/MusicDetail/Views/MusicToolbarView.swift

@@ -64,7 +64,15 @@ extension MusicToolbarView: MusicToolbarStateProtocol {
 
     func updateIsLike(likes: Int, isLike: Bool) {
         heartButton.setTitle("\(likes.toUnitNumber)", for: .normal)
-        heartButton.setIsLike(isLike: isLike)
+
+//        let textColor = isLike
+//        ? DesignSystemAsset.PrimaryColorV2.increase.color
+//        : DesignSystemAsset.NewGrayColor.gray400.color
+//        heartButton.setTitleColor(
+//            textColor,
+//            for: .normal
+//        )
+        heartButton.setIsLike(isLike: isLike, animated: false)
     }
 }
 

Projects/Features/MusicDetailFeature/Sources/MusicDetail/Views/ThumbnailCollectionView/ThumbnailCell.swift

@@ -51,8 +51,9 @@ private extension ThumbnailCell {
 
     func setLayout() {
         thumbnailImageView.snp.makeConstraints {
-            $0.top.bottom.equalToSuperview()
             $0.leading.trailing.equalToSuperview().inset(24)
+            $0.center.equalToSuperview()
+            $0.height.equalTo(thumbnailImageView.snp.width).multipliedBy(9.0 / 16.0)
         }
     }
 }

Projects/Features/PlaylistFeature/Sources/ViewModels/PlayListViewModel.swift

@@ -96,7 +96,11 @@ final class PlaylistViewModel: ViewModelType {
             })
             .withLatestFrom(output.selectedSongIds) { selectedPlaylistItem, selectedSongIds in
                 var mutableSelectedSongIds = selectedSongIds
-                mutableSelectedSongIds.insert(selectedPlaylistItem.id)
+                if mutableSelectedSongIds.contains(selectedPlaylistItem.id) {
+                    mutableSelectedSongIds.remove(selectedPlaylistItem.id)
+                } else {
+                    mutableSelectedSongIds.insert(selectedPlaylistItem.id)
+                }
                 return mutableSelectedSongIds
             }
             .bind(to: output.selectedSongIds)

Projects/UsertInterfaces/DesignSystem/Resources/Image/MusicDetail.xcassets/heart.fill.imageset/Contents.json

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "heart.fill.svg",
+      "filename" : "ic_32_heart_on.svg",
       "idiom" : "universal"
     }
   ],

Projects/UsertInterfaces/DesignSystem/Resources/Image/MusicDetail.xcassets/heart.imageset/Contents.json

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "heart.svg",
+      "filename" : "ic_32_heart_off.svg",
       "idiom" : "universal"
     }
   ],

Projects/UsertInterfaces/DesignSystem/Resources/Image/MusicDetail.xcassets/music_pick.imageset/Contents.json

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "ic_32_playadd_25.svg",
+      "filename" : "ic_32_playadd_400.svg",
       "idiom" : "universal"
     }
   ],

Projects/UsertInterfaces/DesignSystem/Resources/Image/MusicDetail.xcassets/playlist.imageset/Contents.json

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "playlist.svg",
+      "filename" : "ic_32_play_list_400.svg",
       "idiom" : "universal"
     }
   ],

Projects/UsertInterfaces/DesignSystem/Resources/Image/MusicDetail.xcassets/views.imageset/Contents.json

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "views.svg",
+      "filename" : "ic_32_views.svg",
       "idiom" : "universal"
     }
   ],

Projects/UsertInterfaces/DesignSystem/Sources/VerticalAlignButton.swift

@@ -37,4 +37,14 @@ open class VerticalAlignButton: UIButton {
         super.awakeFromNib()
         self.contentHorizontalAlignment = .left
     }
+
+    public func setTextColor(color: UIColor) {
+        self.configuration?.titleTextAttributesTransformer = UIConfigurationTextAttributesTransformer {
+            var attribute = $0
+            attribute.font = UIFont.setFont(.t7(weight: .medium))
+            attribute.foregroundColor = color
+            attribute.kern = -0.5
+            return attribute
+        }
+    }
 }