[Feature] Movie Detail UI

MovieBooking/Data/DTO/Response/MovieDetailResponseDTO.swift

@@ -22,11 +22,7 @@ struct MovieDetailResponseDTO: Decodable {
     let popularity: Double
 }
 
-// MARK: - Nested Types
-
-extension MovieDetailResponseDTO {
-    struct Genre: Decodable {
-        let id: Int
-        let name: String
-    }
+struct Genre: Decodable {
+    let id: Int
+    let name: String
 }

MovieBooking/Domain/Entity/MovieDetail.swift

@@ -0,0 +1,51 @@
+//
+//  MovieDetail.swift
+//  MovieBooking
+//
+//  Created by 홍석현 on 10/16/25.
+//
+
+import Foundation
+
+struct MovieDetail {
+  let title: String
+  let genres: String
+  let releaseDate: Date?
+  let runningTime: Int
+  let rating: Double
+  let posterPath: String?
+  let summary: String
+
+  init(
+    title: String,
+    genres: String,
+    releaseDate: String,
+    runningTime: Int,
+    rating: Double,
+    posterPath: String?,
+    summary: String
+  ) {
+    let dateFormatter = DateFormatter()
+    dateFormatter.dateFormat = "yyyy-MM-dd."
+
+    self.title = title
+    self.genres = genres
+    self.releaseDate = dateFormatter.date(from: releaseDate)
+    self.runningTime = runningTime
+    self.rating = rating
+    self.posterPath = posterPath
+    self.summary = summary
+  }
+}
+
+extension MovieDetail {
+  static let mockData: MovieDetail = MovieDetail(
+    title: "The Shawshank Redemption",
+    genres: "Drama",
+    releaseDate: "1994-9-23.",
+    runningTime: 142 * 60,
+    rating: 8.7,
+    posterPath: "/bUrReoZFLGti6ehkBW0xw8f12MT.jpg",
+    summary: "Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency."
+  )
+}

MovieBooking/Feature/MovieDetail/Components/GenreLabel.swift

@@ -0,0 +1,34 @@
+//
+//  GenreLabel.swift
+//  MovieBooking
+//
+//  Created by 홍석현 on 10/17/25.
+//
+
+import SwiftUI
+
+struct GenreLabel: View {
+  private let genre: Genre
+
+  init(genre: Genre) {
+    self.genre = genre
+  }
+
+  var body: some View {
+    Text(genre.name)
+      .font(.caption)
+      .foregroundColor(.primary)
+      .padding(.vertical, 4)
+      .padding(.horizontal, 8)
+      .background(Color.purple.opacity(0.2))
+      .clipShape(Capsule())
+      .overlay(
+        Capsule()
+          .stroke(Color.purple.opacity(0.5), lineWidth: 1)
+      )
+  }
+}
+
+#Preview {
+  GenreLabel(genre: Genre(id: 0, name: "Drama"))
+}

MovieBooking/Feature/MovieDetail/Components/MovieDetailCardView.swift

@@ -0,0 +1,128 @@
+//
+//  MovieDetailCardView.swift
+//  MovieBooking
+//
+//  Created by 홍석현 on 10/16/25.
+//
+
+import SwiftUI
+
+struct MovieDetailCardView: View {
+  private let model: MovieDetail
+
+  init(model: MovieDetail) {
+    self.model = model
+  }
+
+  var body: some View {
+    VStack(alignment: .leading, spacing: 24) {
+      GenreLabel(genre: Genre(id: 0, name: "Drama"))
+
+      VStack(alignment: .leading, spacing: 12) {
+        titleView
+
+        StarRatingView(rating: model.rating)
+
+        HStack(spacing: 24) {
+          ReleaseDateView(date: model.releaseDate)
+
+          RunningTimeView(model.runningTime)
+        }
+      }
+
+      VStack(alignment: .leading, spacing: 12) {
+        Text("줄거리")
+          .font(.system(size: 18, weight: .semibold))
+          .foregroundStyle(Color.primary)
+        Text(model.summary)
+          .font(.system(size: 16, weight: .regular))
+          .lineSpacing(3)
+          .foregroundStyle(Color(hex: "757575"))
+      }
+
+      Button {
+        print("예매하기 버튼 눌림")
+      } label: {
+        Text("예매하기")
+          .frame(maxWidth: .infinity)
+          .font(.system(size: 16, weight: .bold))
+          .foregroundStyle(.white)
+          .background(.basicPurple)
+          .padding(.vertical, 16)
+          .clipShape(Capsule())
+          .shadow(color: .black.opacity(0.2), radius: 5, y: 5)
+      }
+
+    }
+    .padding(24)
+    .background(Color.white)
+    .clipShape(RoundedRectangle(cornerRadius: 16))
+    .shadow(color: .black.opacity(0.2), radius: 10, y: 10)
+  }
+}
+
+extension MovieDetailCardView {
+  // 영화 제목
+  var titleView: some View {
+    Text(model.title)
+      .font(.system(size: 36, weight: .light))
+      .frame(maxWidth: 200, alignment: .leading)
+      .lineSpacing(0)
+  }
+
+  // 상영 날짜
+  struct ReleaseDateView: View {
+    private let date: Date?
+
+    init(date: Date?) {
+      self.date = date
+    }
+
+    private var displayText: String {
+      guard let date = date else { return "개봉일 미정" }
+      let formatter = DateFormatter()
+      formatter.dateFormat = "yyyy. MM. dd."
+      return formatter.string(from: date)
+    }
+
+    var body: some View {
+      HStack {
+        Image(systemName: "calendar")
+          .foregroundStyle(Color.secondary)
+
+        Text(displayText)
+      }
+      .font(.system(size: 16))
+      .foregroundStyle(Color.secondary)
+    }
+  }
+
+  // 러닝 타임
+  struct RunningTimeView: View {
+    private let runningSecond: Int
+
+    private var displayText: String {
+      return "\(runningSecond / 60)분"
+    }
+
+    init(_ runningSecond: Int) {
+      self.runningSecond = runningSecond
+    }
+
+    var body: some View {
+      HStack {
+        Image(systemName: "clock")
+          .foregroundStyle(Color.secondary)
+
+        Text(displayText)
+      }
+      .font(.system(size: 16))
+      .foregroundStyle(Color.secondary)
+    }
+  }
+}
+
+#Preview {
+  MovieDetailCardView(model: .mockData)
+    .padding()
+}

MovieBooking/Feature/MovieDetail/Components/MoviePosterView.swift

@@ -0,0 +1,44 @@
+//
+//  MoviePosterView.swift
+//  MovieBooking
+//
+//  Created by 홍석현 on 10/16/25.
+//
+
+import SwiftUI
+
+struct MoviePosterView: View {
+  private let posterPath: String
+
+  init(posterPath: String) {
+    self.posterPath = posterPath
+  }
+
+  var body: some View {
+    AsyncImage(url: URL(string: "https://image.tmdb.org/t/p/w500\(posterPath)")) { phase in
+      switch phase {
+      case .success(let image):
+        image
+          .resizable()
+          .aspectRatio(contentMode: .fill)
+      case .failure:
+        Color.red
+          .overlay(
+            Text("Failed to load image")
+              .foregroundColor(.white)
+          )
+      case .empty:
+        ProgressView()
+      @unknown default:
+        EmptyView()
+      }
+    }
+    .frame(width: 250, height: 250)
+    .clipShape(RoundedRectangle(cornerRadius: 16))
+    .shadow(color: .black.opacity(0.4), radius: 10, x: 0, y: 8)
+  }
+}
+
+#Preview {
+  MoviePosterView(posterPath: "/bUrReoZFLGti6ehkBW0xw8f12MT.jpg")
+}

MovieBooking/Feature/MovieDetail/Components/StarRatingView.swift

@@ -0,0 +1,86 @@
+//
+//  StarRatingView.swift
+//  MovieBooking
+//
+//  Created by 홍석현 on 10/17/25.
+//
+
+import SwiftUI
+
+struct StarRatingView: View {
+  private let rating: Double // 0.0 ~ 10.0 범위
+  private let maxStars: Int = 5
+
+  init(rating: Double) {
+    self.rating = rating
+  }
+
+  private var normalizedRating: Double {
+    // 10점 만점을 5점 만점으로 환산
+    min(max(rating / 2.0, 0), Double(maxStars))
+  }
+
+  var body: some View {
+    HStack {
+      HStack(spacing: 2) {
+        ForEach(0..<maxStars, id: \.self) { index in
+          ZStack {
+            // 배경 별 (회색)
+            Image(systemName: "star.fill")
+              .foregroundColor(.gray.opacity(0.3))
+
+            // 채워진 별 (노란색)
+            Image(systemName: "star.fill")
+              .foregroundColor(.yellow)
+              .mask(
+                GeometryReader { geometry in
+                  let fillWidth = calculateFillWidth(
+                    for: index,
+                    totalWidth: geometry.size.width
+                  )
+                  Rectangle()
+                    .frame(width: fillWidth)
+                }
+              )
+          }
+        }
+      }
+
+      Text(String(format: "%.1f", normalizedRating))
+        .foregroundColor(.primary)
+        .font(.system(size: 16, weight: .light))
+    }
+  }
+
+  private func calculateFillWidth(for index: Int, totalWidth: CGFloat) -> CGFloat {
+    let starValue = Double(index)
+    let nextStarValue = Double(index + 1)
+
+    if normalizedRating >= nextStarValue {
+      // 완전히 채워진 별
+      return totalWidth
+    } else if normalizedRating > starValue {
+      // 부분적으로 채워진 별
+      let fraction = normalizedRating - starValue
+      return totalWidth * fraction
+    } else {
+      // 빈 별
+      return 0
+    }
+  }
+}
+
+#Preview {
+  VStack(spacing: 20) {
+    StarRatingView(rating: 8.7)
+
+    StarRatingView(rating: 7.5)
+
+    StarRatingView(rating: 9.2)
+
+    StarRatingView(rating: 5.0)
+
+    StarRatingView(rating: 10.0)
+  }
+  .padding()
+}

MovieBooking/Feature/MovieDetail/MovieDetailView.swift

@@ -0,0 +1,27 @@
+//
+//  MovieDetailView.swift
+//  MovieBooking
+//
+//  Created by 홍석현 on 10/16/25.
+//
+
+import SwiftUI
+
+struct MovieDetailView: View {
+  var body: some View {
+    ScrollView {
+      VStack(spacing: 24) {
+        if let path = MovieDetail.mockData.posterPath {
+          MoviePosterView(posterPath: path)
+        }
+
+        MovieDetailCardView(model: .mockData)
+          .padding(.horizontal, 24)
+      }
+    }
+  }
+}
+
+#Preview {
+  MovieDetailView()
+}