레시피 상세화면 UI를 정의해 보았습니다.

HomeCafeRecipes/HomeCafeRecipes/Presentation/CustomNavigationBar.swift

@@ -0,0 +1,49 @@
+//
+//  CustomNavigationBar.swift
+//  HomeCafeRecipes
+//
+//  Created by 김건호 on 6/22/24.
+//
+
+import UIKit
+
+final class CustomNavigationBar: UIView {
+
+    private let titleLabel = UILabel()
+    let backButton = UIButton(type: .system)
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        setupUI()
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    private func setupUI() {
+
+        backButton.setImage(UIImage(systemName: "chevron.backward"), for: .normal)
+        backButton.tintColor = .black
+        addSubview(backButton)
+
+        titleLabel.font = UIFont.systemFont(ofSize: 18, weight: .bold)
+        titleLabel.textAlignment = .center
+        addSubview(titleLabel)
+
+        backButton.translatesAutoresizingMaskIntoConstraints = false
+        titleLabel.translatesAutoresizingMaskIntoConstraints = false
+
+        NSLayoutConstraint.activate([
+            backButton.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16),
+            backButton.centerYAnchor.constraint(equalTo: centerYAnchor),
+
+            titleLabel.centerXAnchor.constraint(equalTo: centerXAnchor),
+            titleLabel.centerYAnchor.constraint(equalTo: centerYAnchor)
+        ])
+    }
+
+    func setTitle(_ title: String) {
+        titleLabel.text = title
+    }
+}

HomeCafeRecipes/HomeCafeRecipes/Presentation/Feed/RecipeDetailViewModel.swift

@@ -0,0 +1,24 @@
+//
+//  RecipeItemViewModel.swift
+//  HomeCafeRecipes
+//
+//  Created by 김건호 on 6/13/24.
+//
+
+import Foundation
+
+struct RecipeDetailViewModel {
+    let id: Int
+    let recipeName: String
+    let recipeDescription: String
+    let recipeImageUrls: [URL]
+    let isLiked: Bool
+
+    init(recipe: Recipe) {
+        self.id = recipe.id
+        self.recipeName = recipe.name
+        self.recipeDescription = recipe.description
+        self.recipeImageUrls = recipe.imageUrls.compactMap { URL(string: $0) }
+        self.isLiked = recipe.isLikedByCurrentUser
+    }
+}

HomeCafeRecipes/HomeCafeRecipes/Presentation/Feed/View/RecipeDetailView.swift

@@ -0,0 +1,141 @@
+//
+//  RecipeDetailView.swift
+//  HomeCafeRecipes
+//
+//  Created by 김건호 on 6/13/24.
+//
+
+import UIKit
+
+import Kingfisher
+
+final class RecipeDetailView: UIView {
+
+    let customNavigationBar = CustomNavigationBar()
+    private let scrollView = UIScrollView()
+    private let pageControl = UIPageControl()
+    private let recipeNameLabel = UILabel()
+    private let recipeDescriptionLabel = UILabel()
+    private let photoIndexLabel = UILabel()
+    private var imagesAdded = false
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        setupUI()
+        setupLayout()
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    private func setupUI() {
+        backgroundColor = .white
+        setupNavigationBar()
+        setupScrollView()
+        setupPageControl()
+        setupLabels()
+    }
+
+    private func setupNavigationBar() {
+        addSubview(customNavigationBar)
+        customNavigationBar.translatesAutoresizingMaskIntoConstraints = false
+    }
+
+    private func setupScrollView() {
+        addSubview(scrollView)
+        scrollView.translatesAutoresizingMaskIntoConstraints = false
+        scrollView.isPagingEnabled = true
+        scrollView.showsHorizontalScrollIndicator = false
+        scrollView.delegate = self
+    }
+
+    private func setupPageControl() {
+        addSubview(pageControl)
+        pageControl.translatesAutoresizingMaskIntoConstraints = false
+    }
+
+    private func setupLabels() {
+        addSubview(recipeNameLabel)
+        addSubview(recipeDescriptionLabel)
+        addSubview(photoIndexLabel)
+
+        recipeNameLabel.translatesAutoresizingMaskIntoConstraints = false
+        recipeDescriptionLabel.translatesAutoresizingMaskIntoConstraints = false
+        photoIndexLabel.translatesAutoresizingMaskIntoConstraints = false
+
+        recipeNameLabel.font = Fonts.detailTitleFont
+        recipeNameLabel.numberOfLines = 0
+        recipeDescriptionLabel.font = Fonts.detailBodyFont
+        recipeDescriptionLabel.numberOfLines = 0
+        photoIndexLabel.font = Fonts.detailBodyFont
+    }
+
+    private func setupLayout() {
+        NSLayoutConstraint.activate([
+            customNavigationBar.topAnchor.constraint(equalTo: safeAreaLayoutGuide.topAnchor),
+            customNavigationBar.leadingAnchor.constraint(equalTo: leadingAnchor),
+            customNavigationBar.trailingAnchor.constraint(equalTo: trailingAnchor),
+            customNavigationBar.heightAnchor.constraint(equalToConstant: 44),
+
+            scrollView.topAnchor.constraint(equalTo: customNavigationBar.bottomAnchor, constant: 10),
+            scrollView.leadingAnchor.constraint(equalTo: leadingAnchor),
+            scrollView.trailingAnchor.constraint(equalTo: trailingAnchor),
+            scrollView.heightAnchor.constraint(equalToConstant: 200),
+
+            pageControl.topAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: 10),
+            pageControl.centerXAnchor.constraint(equalTo: centerXAnchor),
+
+            photoIndexLabel.topAnchor.constraint(equalTo: pageControl.bottomAnchor, constant: 10),
+            photoIndexLabel.centerXAnchor.constraint(equalTo: centerXAnchor),
+
+            recipeNameLabel.topAnchor.constraint(equalTo: photoIndexLabel.bottomAnchor, constant: 20),
+            recipeNameLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20),
+            recipeNameLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20),
+
+            recipeDescriptionLabel.topAnchor.constraint(equalTo: recipeNameLabel.bottomAnchor, constant: 20),
+            recipeDescriptionLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20),
+            recipeDescriptionLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20)
+        ])
+    }
+
+
+    func configure(with viewModel: RecipeDetailViewModel) {
+        recipeNameLabel.text = viewModel.recipeName
+        recipeDescriptionLabel.text = viewModel.recipeDescription
+        setupScrollViewContent(with: viewModel.recipeImageUrls)
+        pageControl.numberOfPages = viewModel.recipeImageUrls.count
+        updatePhotoIndexLabel(currentPage: 0)
+    }
+
+    private func setupScrollViewContent(with recipeImageUrls: [URL]) {
+        scrollView.subviews.forEach { $0.removeFromSuperview() }
+
+        let imageViewWidth = UIScreen.main.bounds.width
+
+        recipeImageUrls.enumerated().forEach { index, url in
+            let imageView = UIImageView()
+            imageView.kf.setImage(with: url)
+            imageView.contentMode = .scaleAspectFill
+
+            let xPos = CGFloat(index) * imageViewWidth
+            imageView.frame = CGRect(x: xPos, y: 0, width: imageViewWidth, height: 200)
+            scrollView.addSubview(imageView)
+        }
+
+        let contentWidth = imageViewWidth * CGFloat(recipeImageUrls.count)
+        scrollView.contentSize = CGSize(width: contentWidth, height: 200)
+    }
+
+    private func updatePhotoIndexLabel(currentPage: Int) {
+        photoIndexLabel.text = "\(currentPage + 1) / \(pageControl.numberOfPages)"
+    }
+}
+
+extension RecipeDetailView: UIScrollViewDelegate {
+    func scrollViewDidScroll(_ scrollView: UIScrollView) {
+        let pageIndex = round(scrollView.contentOffset.x / UIScreen.main.bounds.width)
+        pageControl.currentPage = Int(pageIndex)
+        updatePhotoIndexLabel(currentPage: Int(pageIndex))
+    }
+}

HomeCafeRecipes/HomeCafeRecipes/Presentation/Feed/View/RecipeDetailViewController.swift

@@ -0,0 +1,66 @@
+//
+//  RecipeDetailViewController.swift
+//  HomeCafeRecipes
+//
+//  Created by 김건호 on 6/14/24.
+//
+
+import UIKit
+
+import RxSwift
+
+final class RecipeDetailViewController: UIViewController {
+
+    private let contentView = RecipeDetailView()
+    private let customNavigationBar = CustomNavigationBar()
+    private let interactor: RecipeDetailInteractor
+    private let disposeBag = DisposeBag()
+    private var recipeDetailViewModel: RecipeDetailViewModel?
+    private let recipeListMapper = RecipeListMapper()
+
+    init(interactor: RecipeDetailInteractor) {
+        self.interactor = interactor
+        super.init(nibName: nil, bundle: nil)
+        self.interactor.setDelegate(self)
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    override func loadView() {
+        view = contentView
+    }
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        interactor.viewDidLoad()
+        contentView.customNavigationBar.backButton.addTarget(self, action: #selector(backButtonTapped), for: .touchUpInside)
+    }
+
+    private func displayError(_ error: Error) {
+        let alert = UIAlertController(title: "해당 레시피를 로드하는데 실패했습니다.", message: error.localizedDescription, preferredStyle: .alert)
+        alert.addAction(UIAlertAction(title: "OK", style: .default))
+        present(alert, animated: true)
+    }
+
+    @objc private func backButtonTapped() {
+        navigationController?.popViewController(animated: true)
+    }
+}
+
+// MARK: - RecipeDetailInteractorDelegate
+
+extension RecipeDetailViewController: RecipeDetailInteractorDelegate {
+    func fetchedRecipe(result: Result<Recipe, Error>) {
+        switch result {
+        case .success(let recipe):
+            let recipeItemViewModel = recipeListMapper.mapToRecipeDetailViewModel(from: recipe)
+            DispatchQueue.main.async {
+                self.contentView.configure(with: recipeItemViewModel)
+            }
+        case .failure(let error):
+            self.displayError(error)
+        }
+    }
+}

HomeCafeRecipes/HomeCafeRecipes/Presentation/Mapper/RecipeListMapper.swift

@@ -12,7 +12,7 @@ struct RecipeListMapper {
         return recipes.map { RecipeListItemViewModel(recipe: $0) }
     }
 
-    func mapToRecipeItemViewModel(from recipe: Recipe) -> RecipeItemViewModel {
-        return RecipeItemViewModel(recipe: recipe)
+    func mapToRecipeDetailViewModel(from recipe: Recipe) -> RecipeDetailViewModel {
+        return RecipeDetailViewModel(recipe: recipe)
     }
 }

HomeCafeRecipes/HomeCafeRecipes/Resources/Fonts.swift

@@ -10,4 +10,6 @@ import UIKit
 struct Fonts {
     static let titleFont: UIFont = .systemFont(ofSize: 16, weight: .bold)
     static let bodyFont: UIFont = .systemFont(ofSize: 14, weight: .regular)
+    static let detailTitleFont: UIFont = .systemFont(ofSize: 24, weight: .bold)
+    static let detailBodyFont: UIFont = .systemFont(ofSize: 16, weight: .regular)
 }