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

HomeCafeRecipes/HomeCafeRecipes/Presentation/Feed/RecipeDetailViewModel.swift

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

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

@@ -0,0 +1,114 @@
+//
+//  RecipeDetailView.swift
+//  HomeCafeRecipes
+//
+//  Created by 김건호 on 6/13/24.
+//
+
+import UIKit
+import Kingfisher
+
+final class RecipeDetailView: UIView {
+
+    private let scrollView = UIScrollView()
+    private let pageControl = UIPageControl()
+    private let recipenameLabel = UILabel()
+    private let recipedescriptionLabel = UILabel()
+    private let photoIndexLabel = UILabel()
+    private var recipeimageUrls: [URL] = []
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        setupUI()
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    private func setupUI() {
+        backgroundColor = .white
+        addSubview(scrollView)
+        addSubview(pageControl)
+        addSubview(recipenameLabel)
+        addSubview(recipedescriptionLabel)
+        addSubview(photoIndexLabel)
+
+        scrollView.translatesAutoresizingMaskIntoConstraints = false
+        pageControl.translatesAutoresizingMaskIntoConstraints = false
+        recipenameLabel.translatesAutoresizingMaskIntoConstraints = false
+        recipedescriptionLabel.translatesAutoresizingMaskIntoConstraints = false
+        photoIndexLabel.translatesAutoresizingMaskIntoConstraints = false
+
+        scrollView.isPagingEnabled = true
+        scrollView.showsHorizontalScrollIndicator = false
+        scrollView.delegate = self
+
+        NSLayoutConstraint.activate([
+            scrollView.topAnchor.constraint(equalTo: safeAreaLayoutGuide.topAnchor),
+            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)
+        ])
+
+        recipenameLabel.font = .systemFont(ofSize: 24, weight: .bold)
+        recipenameLabel.numberOfLines = 0
+        recipedescriptionLabel.font = .systemFont(ofSize: 16)
+        recipedescriptionLabel.numberOfLines = 0
+        photoIndexLabel.font = .systemFont(ofSize: 16)
+    }
+
+    func configure(with viewModel: RecipeDetailViewModel) {
+        recipenameLabel.text = viewModel.name
+        recipedescriptionLabel.text = viewModel.description
+        recipeimageUrls = viewModel.imageUrls
+
+        setupScrollView()
+        pageControl.numberOfPages = recipeimageUrls.count
+        updatePhotoIndexLabel(currentPage: 0)
+    }
+
+    private func setupScrollView() {
+        let imageViewWidth = UIScreen.main.bounds.width
+
+        for (index, url) in recipeimageUrls.enumerated() {
+            let imageView = UIImageView()
+            imageView.kf.setImage(with: url)
+            imageView.contentMode = .scaleAspectFill
+            imageView.clipsToBounds = true
+
+            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) / \(recipeimageUrls.count)"
+    }
+}
+
+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,84 @@
+//
+//  RecipeDetailViewController.swift
+//  HomeCafeRecipes
+//
+//  Created by 김건호 on 6/14/24.
+//
+
+import UIKit
+import RxSwift
+
+final class RecipeDetailViewController: UIViewController {
+
+    private let recipeDetailView = RecipeDetailView()
+    private let customNavigationBar = CustomNavigationBar()
+    private let interactor: RecipeDetailInteractor
+    private let disposeBag = DisposeBag()
+    private var recipeDetailViewModel: RecipeDetailViewModel?
+
+    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 viewDidLoad() {
+        super.viewDidLoad()
+        setupUI()
+        interactor.viewDidLoad()
+    }
+
+    private func setupUI() {
+        view.backgroundColor = .white
+        view.addSubview(recipeDetailView)
+        view.addSubview(customNavigationBar)
+
+        recipeDetailView.translatesAutoresizingMaskIntoConstraints = false
+        customNavigationBar.translatesAutoresizingMaskIntoConstraints = false
+
+        NSLayoutConstraint.activate([
+            customNavigationBar.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
+            customNavigationBar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+            customNavigationBar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+            customNavigationBar.heightAnchor.constraint(equalToConstant: 44),
+
+            recipeDetailView.topAnchor.constraint(equalTo: customNavigationBar.bottomAnchor),
+            recipeDetailView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+            recipeDetailView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+            recipeDetailView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
+        ])
+
+        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.recipeDetailView.configure(with: recipeItemViewModel)
+            }
+        case .failure(let error):
+            DispatchQueue.main.async {
+                self.displayError(error)
+            }
+        }
+    }
+}