[iOS/#489] 팔로워 확인을 위한 Social tap UI - HeaderView 변경 (#490)

* feat: 팔로잉 확인을 위한 HeaderView 변경

* fix: 로컬라이징 누락 해결

iOS/FlipMate/FlipMate/Presentation/SocialScene/View/SocialUserInfoHeaderView.swift

@@ -11,26 +11,36 @@ final class SocialUserInfoHeaderView: UICollectionReusableView {
 
     // MARK: - Constant
     private enum Constant {
-        static let defaultNickName = "닉네임"
+        static let defaultNickName = NSLocalizedString("nickname", comment: "")
+        static let following = NSLocalizedString("followingNumber", comment: "")
+        static let follower = NSLocalizedString("followerNumber", comment: "")
         static let defaultTime = "00:00:00"
+        static let defaultNumber = "0"
     }
 
     private enum ProfileImageViewConstant {
-        static var width: CGFloat = 90
-        static var height: CGFloat = 90
+        static var width: CGFloat = 60
+        static var height: CGFloat = 60
         static var top: CGFloat = 32
+        static var leading: CGFloat = 20
+        static var spacing: CGFloat = 5
     }
 
     private enum UserNameLabelConstant {
         static var bottom: CGFloat = 8
-        static var title = "닉네임"
+        static var title = Constant.defaultNickName
     }
 
     private enum LearningTimeLabelConstant {
         static var bottom: CGFloat = 8
         static var title = "00:00:00"
     }
 
+    private enum FollowViewConstant {
+        static var spacing: CGFloat = 10
+        static var trailing: CGFloat = -20
+    }
+
     private enum DividerConstant {
         static var bottom: CGFloat = 24
         static var height: CGFloat = 1
@@ -48,6 +58,91 @@ final class SocialUserInfoHeaderView: UICollectionReusableView {
         return imageView
     }()
 
+    private lazy var userInfoStackView: UIStackView = {
+        let view = UIStackView()
+
+        view.translatesAutoresizingMaskIntoConstraints = false
+        view.axis = .vertical
+        view.alignment = .leading
+        view.distribution = .equalSpacing
+        view.spacing = ProfileImageViewConstant.spacing
+
+        return view
+    }()
+
+    private lazy var followInfoStackView: UIStackView = {
+        let view = UIStackView()
+
+        view.axis = .vertical
+        view.alignment = .leading
+        view.distribution = .equalSpacing
+        view.spacing = FollowViewConstant.spacing
+
+        return view
+    }()
+
+    private lazy var followingStackView: UIStackView = {
+        let view = UIStackView()
+
+        view.axis = .horizontal
+        view.alignment = .leading
+        view.distribution = .equalSpacing
+        view.spacing = FollowViewConstant.spacing
+
+        return view
+    }()
+
+    private lazy var followingLabel: UILabel = {
+        let label = UILabel()
+
+        label.font = FlipMateFont.mediumRegular.font
+        label.text = Constant.following
+        label.textColor = FlipMateColor.gray2.color
+
+        return label
+    }()
+
+    private lazy var followingNumberLabel: UILabel = {
+        let label = UILabel()
+
+        label.font = FlipMateFont.mediumBold.font
+        label.textColor = .label
+        label.text = Constant.defaultNumber
+
+        return label
+    }()
+
+    private lazy var followerStackView: UIStackView = {
+        let view = UIStackView()
+
+        view.axis = .horizontal
+        view.alignment = .leading
+        view.distribution = .equalSpacing
+        view.spacing = FollowViewConstant.spacing
+
+        return view
+    }()
+
+    private lazy var followerLabel: UILabel = {
+        let label = UILabel()
+
+        label.font = FlipMateFont.mediumRegular.font
+        label.text = Constant.follower
+        label.textColor = FlipMateColor.gray2.color
+
+        return label
+    }()
+
+    private lazy var followerNumberLabel: UILabel = {
+        let label = UILabel()
+
+        label.font = FlipMateFont.mediumBold.font
+        label.textColor = .label
+        label.text = Constant.defaultNumber
+
+        return label
+    }()
+
     private lazy var userNameLabel: UILabel = {
         let label = UILabel()
         label.font = FlipMateFont.mediumBold.font
@@ -61,7 +156,7 @@ final class SocialUserInfoHeaderView: UICollectionReusableView {
         let label = UILabel()
         label.font = FlipMateFont.mediumBold.font
         label.text = Constant.defaultTime
-        label.textColor = .label
+        label.textColor = FlipMateColor.gray2.color
         label.textAlignment = .center
         return label
     }()
@@ -93,33 +188,53 @@ final class SocialUserInfoHeaderView: UICollectionReusableView {
     func update(learningTime: Int) {
         learningTimeLabel.text = learningTime.secondsToStringTime()
     }
+
+    func update(following: Int) {
+        followingNumberLabel.text = "\(following)"
+    }
+
+    func update(follower: Int) {
+        followerNumberLabel.text = "\(follower)"
+    }
 }
 
 // MARK: - UI Setting
 private extension SocialUserInfoHeaderView {
     func configureUI() {
-        [ profileImageView, userNameLabel, learningTimeLabel, divider ].forEach {
+        [ profileImageView, userInfoStackView, followInfoStackView, divider ].forEach {
             $0.translatesAutoresizingMaskIntoConstraints = false
             self.addSubview($0)
         }
 
+        [userNameLabel, learningTimeLabel].forEach {
+            self.userInfoStackView.addArrangedSubview($0)
+        }
+
+        [followingStackView, followerStackView].forEach {
+            self.followInfoStackView.addArrangedSubview($0)
+        }
+
+        [followingLabel, followingNumberLabel].forEach {
+            self.followingStackView.addArrangedSubview($0)
+        }
+
+        [followerLabel, followerNumberLabel].forEach {
+            self.followerStackView.addArrangedSubview($0)
+        }
+
         NSLayoutConstraint.activate([
             profileImageView.topAnchor.constraint(equalTo: self.topAnchor, constant: ProfileImageViewConstant.top),
             profileImageView.widthAnchor.constraint(equalToConstant: ProfileImageViewConstant.width),
             profileImageView.heightAnchor.constraint(equalToConstant: ProfileImageViewConstant.height),
-            profileImageView.centerXAnchor.constraint(equalTo: self.centerXAnchor),
+            profileImageView.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: ProfileImageViewConstant.leading),
 
-            userNameLabel.topAnchor.constraint(equalTo: profileImageView.bottomAnchor, constant: UserNameLabelConstant.bottom),
-            userNameLabel.centerXAnchor.constraint(equalTo: self.centerXAnchor),
-            userNameLabel.leadingAnchor.constraint(equalTo: self.leadingAnchor),
-            userNameLabel.trailingAnchor.constraint(equalTo: self.trailingAnchor),
+            userInfoStackView.centerYAnchor.constraint(equalTo: profileImageView.centerYAnchor),
+            userInfoStackView.leadingAnchor.constraint(equalTo: profileImageView.trailingAnchor, constant: ProfileImageViewConstant.leading),
 
-            learningTimeLabel.topAnchor.constraint(equalTo: userNameLabel.bottomAnchor, constant: LearningTimeLabelConstant.bottom),
-            learningTimeLabel.centerXAnchor.constraint(equalTo: self.centerXAnchor),
-            learningTimeLabel.leadingAnchor.constraint(equalTo: self.leadingAnchor),
-            learningTimeLabel.trailingAnchor.constraint(equalTo: self.trailingAnchor),
+            followInfoStackView.centerYAnchor.constraint(equalTo: profileImageView.centerYAnchor),
+            followInfoStackView.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: FollowViewConstant.trailing),
 
-            divider.topAnchor.constraint(equalTo: learningTimeLabel.bottomAnchor, constant: DividerConstant.bottom),
+            divider.topAnchor.constraint(equalTo: profileImageView.bottomAnchor, constant: DividerConstant.bottom),
             divider.leadingAnchor.constraint(equalTo: leadingAnchor),
             divider.trailingAnchor.constraint(equalTo: trailingAnchor),
             divider.heightAnchor.constraint(equalToConstant: DividerConstant.height)

iOS/FlipMate/FlipMate/Presentation/SocialScene/ViewController/SocialViewController.swift

@@ -28,7 +28,7 @@ final class SocialViewController: BaseViewController {
         layout.minimumInteritemSpacing = LayoutConstant.itemSpacing
         layout.itemSize = CGSize(
             width: UIScreen.main.bounds.width / LayoutConstant.itemCountForLine - LayoutConstant.itemSpacing * 2,
-            height: LayoutConstant.iemHeight)
+            height: LayoutConstant.itemHeight)
         layout.headerReferenceSize = CGSize(width: LayoutConstant.sectionWidth, height: LayoutConstant.sectionHeight)
         let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
         collectionView.register(FriendsCollectionViewCell.self)
@@ -165,18 +165,20 @@ final class SocialViewController: BaseViewController {
     func bindFriendsRelatedPublisher() {
         viewModel.freindsPublisher
             .receive(on: DispatchQueue.main)
-            .sink { [weak self] friends in
+            .sink { [weak self] followings in
                 guard let self = self else { return }
+                guard let header = findHeader() else { return }
                 var snapshot = Snapshot()
                 snapshot.appendSections([.main])
-                snapshot.appendItems(friends.map { Friend(
+                snapshot.appendItems(followings.map { Friend(
                     id: $0.id,
                     nickName: $0.nickName,
                     profileImageURL: $0.profileImageURL,
                     totalTime: $0.totalTime,
                     startedTime: $0.startedTime,
                     isStuding: $0.isStuding)}
                 )
+                header.update(following: followings.count)
                 self.diffableDataSource.apply(snapshot, animatingDifferences: true)
             }
             .store(in: &cancellables)
@@ -283,11 +285,11 @@ private extension SocialViewController {
 
         static var lineSpacing: CGFloat = 16
         static var itemSpacing: CGFloat = 16
-        static var iemHeight: CGFloat = 179
+        static var itemHeight: CGFloat = 179
         static var itemCountForLine = 3.0
 
         static var sectionWidth: CGFloat = 50
-        static var sectionHeight: CGFloat = 200
+        static var sectionHeight: CGFloat = 110
     }
 
     private enum ProfileImageViewConstant {
@@ -305,9 +307,4 @@ private extension SocialViewController {
         static var bottom: CGFloat = 8
         static var title = "00:00:00"
     }
-
-    private enum DividerConstant {
-        static var bottom: CGFloat = 24
-        static var height: CGFloat = 1
-    }
 }

iOS/FlipMate/FlipMate/Resources/en.lproj/Localizable.strings

@@ -132,6 +132,9 @@ If you have any questions or concerns about this privacy policy, or if you have
 "min" = "min";
 "me" = "Me";
 "friend" = "Friend";
+"nickname" = "Nickname";
+"followingNumber" = "Following";
+"followerNumber" = "Follower";
 
 // MARK: - ChartViewController
 "daily" = "Daily";

iOS/FlipMate/FlipMate/Resources/ja.lproj/Localizable.strings

@@ -133,6 +133,9 @@
 "min" = "分";
 "me" = "私";
 "friend" = "友達";
+"nickname" = "ニックネーム";
+"followingNumber" = "フォロー";
+"followerNumber" = "フォロワー";
 
 // MARK: - ChartViewController
 "daily" = "毎日";

iOS/FlipMate/FlipMate/Resources/ko.lproj/Localizable.strings

@@ -130,6 +130,9 @@
 "min" = "분(m)";
 "me" = "나";
 "friend" = "친구";
+"nickname" = "닉네임";
+"followingNumber" = "팔로잉";
+"followerNumber" = "팔로워";
 
 // MARK: - Chart Scene
 "daily" = "일간";