✨ [FEAT] 홈 배너 UI 구현

NadoSunbae-iOS/NadoSunbae-iOS/Global/Extension/UIImageView+.swift

@@ -0,0 +1,43 @@
+//
+//  UIImageView+.swift
+//  NadoSunbae
+//
+//  Created by madilyn on 2022/08/06.
+//
+
+import UIKit
+
+extension UIImageView {
+
+    /// 컬러만 있는 Image를 ImageView에 넣어 주는 메서드
+    func setImageColor(color: UIColor) {
+        let templateImage = self.image?.withRenderingMode(.alwaysTemplate)
+        self.image = templateImage
+        self.tintColor = color
+    }
+
+    /// URL을 통해 이미지를 불러오는 메서드 + 캐싱
+    func setImageUrl(_ url: String) {
+        let cacheKey = NSString(string: url)
+
+        /// 해당 Key에 캐시 이미지가 저장되어 있으면 이미지 사용
+        if let cachedImage = ImageCacheManager.shared.object(forKey: cacheKey) {
+            self.image = cachedImage
+            return
+        }
+
+        DispatchQueue.global().async {
+            if let url = URL(string: url) {
+                let data = try? Data(contentsOf: url)
+                DispatchQueue.main.async {
+                    if let data = data, let image = UIImage(data: data) {
+
+                        /// 다운받은 이미지를 캐시에 저장
+                        ImageCacheManager.shared.setObject(image, forKey: cacheKey)
+                        self.image = image
+                    }
+                }
+            }
+        }
+    }
+}

NadoSunbae-iOS/NadoSunbae-iOS/Network/ImageCacheManager.swift

@@ -0,0 +1,14 @@
+//
+//  ImageCacheManager.swift
+//  NadoSunbae
+//
+//  Created by madilyn on 2022/08/06.
+//
+
+import UIKit
+
+/// 캐시를 저장해 놓을 싱글톤 클래스
+class ImageCacheManager {
+    static let shared = NSCache<NSString, UIImage>()
+    private init() {}
+}

NadoSunbae-iOS/NadoSunbae-iOS/Screen/Home/Header/HomeBannerHeaderCell.swift

@@ -7,7 +7,7 @@
 
 import UIKit
 
-class HomeBannerHeaderCell: UITableViewCell {
+class HomeBannerHeaderCell: BaseTVC {
 
     // MARK: Components
     private let logoImgView = UIImageView().then {

NadoSunbae-iOS/NadoSunbae-iOS/Screen/Home/Header/HomeTitleHeaderCell.swift

@@ -7,7 +7,7 @@
 
 import UIKit
 
-class HomeTitleHeaderCell: UITableViewCell {
+class HomeTitleHeaderCell: BaseTVC {
 
     // MARK: Components
     private let titleLabel = UILabel().then {

NadoSunbae-iOS/NadoSunbae-iOS/Screen/Home/HomeBannerCVC.swift

@@ -0,0 +1,41 @@
+//
+//  HomeBannerCVC.swift
+//  NadoSunbae
+//
+//  Created by madilyn on 2022/08/06.
+//
+
+import UIKit
+import SnapKit
+import Then
+
+class HomeBannerCVC: BaseCVC {
+
+    // MARK: Components
+    private let imgView = UIImageView()
+
+    // MARK: Initialization
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        configureUI()
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    func setData(imageURL: String) {
+        imgView.setImageUrl(imageURL)
+    }
+}
+
+// MARK: - UI
+extension HomeBannerCVC {
+    private func configureUI() {
+        contentView.addSubviews([imgView])
+
+        imgView.snp.makeConstraints {
+            $0.edges.equalToSuperview()
+        }
+    }
+}

NadoSunbae-iOS/NadoSunbae-iOS/Screen/Home/TVC/HomeBannerTVC.swift

@@ -0,0 +1,111 @@
+//
+//  HomeBannerTVC.swift
+//  NadoSunbae
+//
+//  Created by madilyn on 2022/08/06.
+//
+
+import UIKit
+import SnapKit
+import Then
+
+class HomeBannerTVC: BaseTVC {
+
+    // MARK: Components
+    private let bannerCV = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewLayout()).then {
+        $0.showsHorizontalScrollIndicator = false
+        $0.isPagingEnabled = true
+    }
+    private lazy var pageControl = UIPageControl().then {
+        $0.pageIndicatorTintColor = .init(white: 1, alpha: 0.5)
+        $0.currentPageIndicatorTintColor = .white
+        $0.numberOfPages = bannerImaURLsData.count - 2
+        $0.isUserInteractionEnabled = false
+    }
+
+    // MARK: - Properties
+    private lazy var CVFlowLayout = UICollectionViewFlowLayout().then {
+        $0.scrollDirection = .horizontal
+        $0.minimumLineSpacing = 0
+        $0.minimumInteritemSpacing = 0
+        $0.sectionInset = .zero
+        $0.itemSize = CGSize.init(width: screenWidth, height: 104)
+    }
+
+    /// 첫 인덱스 -> 마지막 이미지, 마지막 인덱스 -> 첫 이미지 추가하기!
+    private var bannerImaURLsData = ["https://user-images.githubusercontent.com/43312096/183249441-5ad2cffb-db34-421a-a23c-915415c0593a.png", "https://user-images.githubusercontent.com/43312096/183249428-0c5b531b-6290-40c3-80ec-2517c9c990f8.png", "https://user-images.githubusercontent.com/43312096/183249432-034f6b8b-5518-49ce-bd69-4e6f4764b071.png", "https://user-images.githubusercontent.com/43312096/183249433-17ae6687-1632-423b-929b-6c57ac51edf3.png", "https://user-images.githubusercontent.com/43312096/183249439-97333cf5-a88d-4d72-8dca-9641e4587260.png", "https://user-images.githubusercontent.com/43312096/183249441-5ad2cffb-db34-421a-a23c-915415c0593a.png", "https://user-images.githubusercontent.com/43312096/183249428-0c5b531b-6290-40c3-80ec-2517c9c990f8.png"]
+
+    // MARK: - Initialization
+    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
+        super.init(style: style, reuseIdentifier: reuseIdentifier)
+
+        configureUI()
+        setBannerCV()
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    private func setBannerCV() {
+        bannerCV.dataSource = self
+        bannerCV.delegate = self
+
+        bannerCV.collectionViewLayout = CVFlowLayout
+        bannerCV.register(HomeBannerCVC.self, forCellWithReuseIdentifier: HomeBannerCVC.className)
+
+        DispatchQueue.main.async {
+            self.bannerCV.scrollToItem(at: [0, 1], at: .left, animated: false)
+        }
+    }
+}
+
+// MARK: - UICollectionViewDataSource
+extension HomeBannerTVC: UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
+    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
+        return bannerImaURLsData.count
+    }
+
+    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
+        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: HomeBannerCVC.className, for: indexPath) as? HomeBannerCVC else { return UICollectionViewCell() }
+        cell.setData(imageURL: bannerImaURLsData[indexPath.row])
+        return cell
+    }
+}
+
+// MARK: - UICollectionViewDelegate
+extension HomeBannerTVC: UICollectionViewDelegate {
+
+    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
+        let pageFloat = (scrollView.contentOffset.x / scrollView.frame.size.width)
+        let pageInt = Int(round(pageFloat))
+
+        switch pageInt {
+        case 0:
+            pageControl.currentPage = bannerImaURLsData.count - 3
+            bannerCV.scrollToItem(at: [0, bannerImaURLsData.count - 2], at: .left, animated: false)
+        case bannerImaURLsData.count - 1:
+            pageControl.currentPage = 0
+            bannerCV.scrollToItem(at: [0, 1], at: .left, animated: false)
+        default:
+            pageControl.currentPage = pageInt - 1
+        }
+    }
+}
+
+// MARK: - UI
+extension HomeBannerTVC {
+    private func configureUI() {
+        contentView.addSubviews([bannerCV, pageControl])
+
+        bannerCV.snp.makeConstraints {
+            $0.edges.equalToSuperview()
+        }
+
+        pageControl.snp.makeConstraints {
+            $0.centerX.equalToSuperview()
+            $0.bottom.equalToSuperview().inset(8)
+            $0.height.equalTo(8)
+        }
+    }
+}

NadoSunbae-iOS/NadoSunbae-iOS/Screen/Home/VC/HomeVC.swift

@@ -38,6 +38,7 @@ class HomeVC: BaseVC {
         backgroundTV.register(HomeBannerHeaderCell.self, forCellReuseIdentifier: HomeBannerHeaderCell.className)
         backgroundTV.register(HomeTitleHeaderCell.self, forCellReuseIdentifier: HomeTitleHeaderCell.className)
         backgroundTV.register(HomeFooterCell.self, forCellReuseIdentifier: HomeFooterCell.className)
+        backgroundTV.register(HomeBannerTVC.self, forCellReuseIdentifier: HomeBannerTVC.className)
     }
 }
 
@@ -67,7 +68,8 @@ extension HomeVC: UITableViewDataSource {
         if let tableSection = HomeBackgroundTVSectionType(rawValue: indexPath.section) {
             switch tableSection {
             case .banner:
-                return UITableViewCell()
+                guard let bannerCell = tableView.dequeueReusableCell(withIdentifier: HomeBannerTVC.className) as? HomeBannerTVC else { return HomeBannerTVC() }
+                return bannerCell
             case .review:
                 return UITableViewCell()
             case .questionPerson:
@@ -77,6 +79,21 @@ extension HomeVC: UITableViewDataSource {
             }
         } else { return UITableViewCell() }
     }
+
+    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
+        if let tableSection = HomeBackgroundTVSectionType(rawValue: indexPath.section) {
+            switch tableSection {
+            case .banner:
+                return 104
+            case .review:
+                return 48
+            case .questionPerson:
+                return 48
+            case .community:
+                return 48
+            }
+        } else { return 0 }
+    }
 }
 
 // MARK: - UITableViewDelegate

NadoSunbae-iOS/NadoSunbae-iOS/Support/Assets.xcassets/Home/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

NadoSunbae-iOS/NadoSunbae-iOS/Support/Assets.xcassets/Home/selectedSegmentImage.imageset/Contents.json

@@ -0,0 +1,26 @@
+{
+  "images" : [
+    {
+      "filename" : "Ellipse 4.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "Ellipse [email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "Ellipse [email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "template-rendering-intent" : "original"
+  }
+}

NadoSunbae-iOS/NadoSunbae-iOS/Support/Assets.xcassets/Home/unselectedSegmentImage.imageset/Contents.json

@@ -0,0 +1,26 @@
+{
+  "images" : [
+    {
+      "filename" : "Ellipse 4.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "Ellipse [email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "Ellipse [email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "template-rendering-intent" : "original"
+  }
+}