✨#296: 지역 필터링 화면 UI 추가

StreetDrop/StreetDrop.xcodeproj/project.pbxproj

@@ -819,6 +819,7 @@
 			isa = PBXGroup;
 			children = (
 				040685082A01539800377094 /* Assets.xcassets */,
+				C4F5D3E02C5B2265008AF976 /* CityAndDistrictsData.json */,
 				C4D16FC52A1B9184008B076F /* Font */,
 				0406850D2A01539800377094 /* Info.plist */,
 				C44980772BC37CB70001E6C3 /* NaverMaps.plist */,
@@ -1120,7 +1121,6 @@
 		1816ED442A6858C2005009FC /* MyPage */ = {
 			isa = PBXGroup;
 			children = (
-				C4F5D3E02C5B2265008AF976 /* CityAndDistrictsData.json */,
 				1876F0432A66E6E00064B887 /* MyPageRepository.swift */,
 				1816ED452A6858DE005009FC /* NicknameEditRepository.swift */,
 			);

StreetDrop/StreetDrop/Presentation/MainScene/ViewModel/MainViewModel.swift

@@ -115,19 +115,19 @@ extension MainViewModel {
             }
             .disposed(by: disposedBag)
 
-        input.viewDidAppearEvent
-            .bind(with: self) { owner, _ in
-                owner.fetchingPopUpInfomationUseCase.execute()
-                    .subscribe(with: self) { owner, popUpInfomations in
-                        owner.popUpInfomations = popUpInfomations
-                        owner.showFirstPopUpInfomation()
-                    } onFailure: { _, error in
-                        print(error.localizedDescription)
-                    }
-                    .disposed(by: disposedBag)
-
-            }
-            .disposed(by: disposedBag)
+//        input.viewDidAppearEvent
+//            .bind(with: self) { owner, _ in
+//                owner.fetchingPopUpInfomationUseCase.execute()
+//                    .subscribe(with: self) { owner, popUpInfomations in
+//                        owner.popUpInfomations = popUpInfomations
+//                        owner.showFirstPopUpInfomation()
+//                    } onFailure: { _, error in
+//                        print(error.localizedDescription)
+//                    }
+//                    .disposed(by: disposedBag)
+//
+//            }
+//            .disposed(by: disposedBag)
 
         input.viewWillAppearEvent // ViewWillAppear 시, fetchPois
             .skip(1) // 첫 ViewWillAppear땐 CLLocation 가져오지 못해 스킵

StreetDrop/StreetDrop/Presentation/MyPage/View/FilterModal/CityTableViewCell.swift

@@ -0,0 +1,84 @@
+//
+//  CityTableViewCell.swift
+//  StreetDrop
+//
+//  Created by 차요셉 on 8/5/24.
+//
+
+import UIKit
+
+import SnapKit
+
+final class CityTableViewCell: UITableViewCell {
+    static let identifier = "StateTableViewCell"
+
+    override func setSelected(_ selected: Bool, animated: Bool) {
+        super.setSelected(selected, animated: animated)
+        contentView.backgroundColor = selected ? .gray800 : .gray900
+        nameLabel.textColor = selected ? .textPrimary : .gray400
+    }
+
+    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
+        super.init(style: style, reuseIdentifier: reuseIdentifier)
+        configureUI()
+    }
+
+    @available(*, unavailable)
+    required init?(coder aDecoder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    private let nameLabel: UILabel = {
+        let label: UILabel = .init()
+        label.font = .pretendard(size: 16, weight: 500)
+        label.numberOfLines = 1
+        label.textColor = .gray400
+        label.setLineHeight(lineHeight: 24)
+
+        return label
+    }()
+
+    private let countLabel: UILabel = {
+        let label: UILabel = .init()
+        label.font = .pretendard(size: 16, weightName: .medium)
+        label.numberOfLines = 1
+        label.textColor = .textPrimary
+        label.setLineHeight(lineHeight: 24)
+
+        return label
+    }()
+
+    private let bottomView: UIView = {
+        let view: UIView = .init()
+        view.backgroundColor = .gray800
+
+        return view
+    }()
+
+    func configure(regionName: String) {
+        nameLabel.text = regionName
+    }
+}
+
+private extension CityTableViewCell {
+    func configureUI() {
+        contentView.backgroundColor = .gray900
+
+        [
+            nameLabel,
+            bottomView
+        ].forEach {
+            contentView.addSubview($0)
+        }
+
+        nameLabel.snp.makeConstraints {
+            $0.centerY.equalToSuperview()
+            $0.leading.equalToSuperview().inset(24)
+        }
+
+        bottomView.snp.makeConstraints {
+            $0.height.equalTo(1)
+            $0.horizontalEdges.bottom.equalToSuperview()
+        }
+    }
+}

StreetDrop/StreetDrop/Presentation/MyPage/View/FilterModal/GuTableViewCell.swift

@@ -0,0 +1,58 @@
+//
+//  GuTableViewCell.swift
+//  StreetDrop
+//
+//  Created by 차요셉 on 12/20/24.
+//
+
+import UIKit
+
+import SnapKit
+
+final class GuTableViewCell: UITableViewCell {
+    static let identifier = "GuTableViewCell"
+
+    override func setSelected(_ selected: Bool, animated: Bool) {
+        super.setSelected(selected, animated: animated)
+        nameLabel.textColor = selected ? .textPrimary : .gray400
+    }
+
+    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
+        super.init(style: style, reuseIdentifier: reuseIdentifier)
+        configureUI()
+    }
+
+    @available(*, unavailable)
+    required init?(coder aDecoder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    private let nameLabel: UILabel = {
+        let label: UILabel = .init()
+        label.font = .pretendard(size: 16, weightName: .medium)
+        label.textColor = .gray400
+        label.numberOfLines = 1
+        label.setLineHeight(lineHeight: 24)
+        label.textAlignment = .center
+
+        return label
+    }()
+
+    func configure(regionName: String) {
+        nameLabel.text = regionName
+    }
+}
+
+private extension GuTableViewCell {
+    func configureUI() {
+        backgroundColor = .gray600
+
+        addSubview(nameLabel)
+
+        nameLabel.snp.makeConstraints {
+            $0.centerY.equalToSuperview()
+            $0.horizontalEdges.equalToSuperview()
+        }
+    }
+}
+

StreetDrop/StreetDrop/Presentation/MyPage/View/FilterModal/RegionFilteringModalViewController.swift

@@ -9,11 +9,15 @@ import UIKit
 
 import SnapKit
 import RxSwift
+import RxRelay
 
 final class RegionFilteringModalViewController: UIViewController, ModalPresentable {
     var upperMarginHeight: CGFloat = 158
     var containerViewTopConstraint: Constraint?
     let disposeBag: DisposeBag = .init()
+    private let viewModel: RegionFilteringModalViewModel = .init()
+    private var cityDataSource: UITableViewDiffableDataSource<Int, String>?
+    private var guDataSource: UITableViewDiffableDataSource<Int, String>?
 
     let modalContainerView: UIView = {
         let view: UIView = .init()
@@ -22,15 +26,170 @@ final class RegionFilteringModalViewController: UIViewController, ModalPresentab
         return view
     }()
 
+    private let regionFilterLabel: UILabel = {
+        let label: UILabel = .init()
+        label.text = "지역 필터"
+        label.textColor = .textPrimary
+        label.font = .pretendard(size: 20, weight: 700)
+        label.setLineHeight(lineHeight: 28)
+
+        label.textAlignment = .center
+
+        return label
+    }()
+
+    private let line: UIView = {
+        let view: UIView = .init()
+
+        return view
+    }()
+
+    private lazy var cityTableView: UITableView = {
+        let tableView: UITableView = .init()
+        tableView.backgroundColor = .gray900
+        tableView.register(CityTableViewCell.self, forCellReuseIdentifier: CityTableViewCell.identifier)
+        tableView.rowHeight = 56
+        tableView.showsVerticalScrollIndicator = false
+
+        return tableView
+    }()
+
+    private lazy var guTableView: UITableView = {
+        let tableView: UITableView = .init()
+        tableView.backgroundColor = .gray800
+        tableView.register(GuTableViewCell.self, forCellReuseIdentifier: GuTableViewCell.identifier)
+        tableView.rowHeight = 56
+
+        return tableView
+    }()
+
+    private let filteringButton: UIButton = {
+        let button: UIButton = .init()
+        button.backgroundColor = .primary400
+        button.layer.cornerRadius = 12
+        button.setTitle("0개", for: .normal)
+        button.setTitleColor(.gray900, for: .normal)
+        button.titleLabel?.font = .pretendard(size: 16, weight: 700)
+
+        return button
+    }()
+
     override func viewDidLoad() {
         super.viewDidLoad()
         setupModal()
+        configureDataSource()
+        bindViewModel()
         configureUI()
     }
 }
 
 private extension RegionFilteringModalViewController {
+    func bindViewModel() {
+        let input: RegionFilteringModalViewModel.Input = .init(
+            viewDidLoadEvent: .just(Void())
+        )
+
+        let output = viewModel.convert(input: input, disposedBag: disposeBag)
+
+        output.cityNames
+            .bind(with: self) { owner, cityNames in
+                owner.displayCityNames(cityNames)
+            }
+            .disposed(by: disposeBag)
+
+        output.guNames
+            .bind(with: self) { owner, guNames in
+                owner.displayGuNames(guNames)
+            }
+            .disposed(by: disposeBag)
+    }
+
     func configureUI() {
+        [
+            regionFilterLabel,
+            line,
+            cityTableView,
+            guTableView,
+            filteringButton
+        ].forEach {
+            modalContainerView.addSubview($0)
+        }
+
+        regionFilterLabel.snp.makeConstraints {
+            $0.height.equalTo(28)
+            $0.top.horizontalEdges.equalToSuperview().inset(24)
+        }
+
+        line.snp.makeConstraints {
+            $0.height.equalTo(1)
+            $0.top.equalTo(regionFilterLabel.snp.bottom).offset(20)
+            $0.horizontalEdges.equalToSuperview()
+        }
+
+        cityTableView.snp.makeConstraints {
+            $0.width.equalTo(120)
+            $0.top.equalTo(line.snp.bottom)
+            $0.leading.equalToSuperview()
+            $0.bottom.equalTo(filteringButton.snp.top).offset(-12)
+        }
+
+        guTableView.snp.makeConstraints {
+            $0.top.equalTo(line.snp.bottom)
+            $0.leading.equalTo(cityTableView.snp.trailing)
+            $0.trailing.equalToSuperview()
+            $0.bottom.equalTo(cityTableView)
+        }
+
+        filteringButton.snp.makeConstraints {
+            $0.height.equalTo(56)
+            $0.horizontalEdges.equalToSuperview().inset(24)
+            $0.bottom.equalTo(view.safeAreaLayoutGuide).inset(16)
+        }
+    }
+
+    func displayCityNames(_ cityNames: [String]) {
+        var snapshot = NSDiffableDataSourceSnapshot<Int, String>()
+        snapshot.appendSections([0])
+        snapshot.appendItems(cityNames, toSection: 0)
+        cityDataSource?.apply(snapshot, animatingDifferences: true)
+    }
+
+    func displayGuNames(_ cityNames: [String]) {
+        var snapshot = NSDiffableDataSourceSnapshot<Int, String>()
+        snapshot.appendSections([0])
+        snapshot.appendItems(cityNames, toSection: 0)
+        guDataSource?.apply(snapshot, animatingDifferences: true)
+    }
+}
+
+// MARK: - Table View
+
+extension RegionFilteringModalViewController {
+    private func configureDataSource() {
+        cityDataSource = UITableViewDiffableDataSource<Int, String>(
+            tableView: cityTableView,
+            cellProvider: { tableView, indexPath, city -> UITableViewCell in
+                guard let cell = tableView.dequeueReusableCell(
+                    withIdentifier: CityTableViewCell.identifier,
+                    for: indexPath
+                ) as? CityTableViewCell else { return UITableViewCell() }
+                cell.configure(regionName: city)
+
+                return cell
+            }
+        )
 
+        guDataSource = UITableViewDiffableDataSource<Int, String>(
+            tableView: guTableView,
+            cellProvider: { tableView, indexPath, gu -> UITableViewCell in
+                guard let cell = tableView.dequeueReusableCell(
+                    withIdentifier: GuTableViewCell.identifier,
+                    for: indexPath
+                ) as? GuTableViewCell else { return UITableViewCell() }
+                cell.configure(regionName: gu)
+
+                return cell
+            }
+        )
     }
 }