안녕하세요. Deah 입니다.
지난 4~5일차 작업 때 인기급상승 탭을 만들고 상세 정보 화면 레이아웃을 잡아두었었는데요.
색동저고리 색들이 마구 남아있던 그 화면 기억하시나요?
오늘은 미뤄두었던(?) 상세 정보 화면을 드디어 완성해보려고 합니다.
원활한 진행을 위해 지난 작업을 한 번 훑어보고 시작해보도록 할게요!
✨ 작업일시: 2024-06-28 (Fri)
API 연결하기
인기급상승 상세 화면은 인기 급상승 콘텐츠를 눌렀을 때, 해당 콘텐츠의 제목, 포스터, 줄거리, 캐스트 정보가 노출됩니다. 인기급상승 탭에서 이미 Trending API를 통해 대부분의 필요한 정보를 가지고 있는 상태예요. 그래서 캐스트 정보만 추가로 가져오면 된답니다. 캐스트 정보는 Credits API를 사용해보도록 할게요!
Credits API는 영화와 TV를 구분하고 있기 때문에 2개의 엔드포인트를 사용합니다 :)
네트워크 통신 로직은 이미 제네릭을 통해 범용적으로 사용할 수 있도록 만들어뒀기 때문에 열거형으로 만들어둔 API 파일에 Credits API 정보만 바로 추가해주도록 하겠습니다.
- TMDbAPI.swift
enum GenreType: String {
case movie = "movie"
case tv = "tv"
}
enum TmdbAPI {
...
case credits(type: GenreType, id: Int)
...
var endPoint: URL {
...
case .credits(let type, let id):
return URL(string: baseURL + "\(type.rawValue)/\(id)/credits")!
...
}
}- TrendingDetailViewController.swift
class TrendingDetailViewController: BaseViewController {
// TrendingViewController에서 값 전달
var contentsData: TrendingResults?
var contentsType: GenreType = .movie
// Credits API 응답값 저장
var creditList: [Cast] = []
func callRequest() {
guard let contentsData = contentsData else { return }
NetworkManager.shared.callRequest(
api: .credits(type: contentsType, id: contentsData.id)) { (creditsList: Credits?, error: String?) in
// 예외처리, error 대응
self.creditList = creditsList.cast
self.detailView.detailTableView.reloadData()
}
}
}사용할 때는 TrendingDetailViewController에서 contentsType과 contentsData를 통해 Credits API를 연결해주면 됩니다. 그리고 CreditList에 데이터가 할당되면 각 셀에 데이터를 할당해주면 끝!
extension TrendingDetailViewController: UITableViewDelegate, UITableViewDataSource {
// 0: Overview, 1: Cast 테이블 뷰 섹션 나누기
func numberOfSections(in tableView: UITableView) -> Int {
return 2
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
if section == 0 {
return 1
} else {
return creditList.count // 캐스트 수만큼 셀 출력
}
}
func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
// 생략
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let section = indexPath.section
let idx = indexPath.row
if section == 0 {
let overviewCell = tableView.dequeueReusableCell(withIdentifier: TrendingDetailOverviewCell.id, for: indexPath) as! TrendingDetailOverviewCell
overviewCell.tableView = detailView.detailTableView
overviewCell.configreCellData(data: contentsData?.overview ?? Constants.Text.TrendingDetail.noOverview)
overviewCell.configureHandler()
return overviewCell
} else {
let castCell = tableView.dequeueReusableCell(withIdentifier: TrendingDetailCastCell.id, for: indexPath) as! TrendingDetailCastCell
let castData = creditList[idx]
castCell.configureCellData(data: castData)
return castCell
}
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
let section = indexPath.section
if section == 0 {
return UITableView.automaticDimension // 줄거리 영역 오토매틱 디멘션 처리
} else {
return 120
}
}
}상세 화면은 상단 영역과 하단 테이블 뷰 영역으로 나뉘어져 있습니다.
테이블 뷰는 줄거리를 보여주는 Overview 영역과 Cast 영역으로 또 나뉘어져 있어서, 2개의 셀로 구현을 해두었어요. 그래서 각 영역과 셀에 알맞게 데이터를 넣어주면?
결과물
 |
|---|
이런 화면이 됩니다! (짝짝짝짝)
색동저고리 화면보다 훨씬 나아보이네요 😎
줄거리 영역은 기본 2줄이 보이도록 하고, 버튼을 누르면 전체 텍스트를 볼 수 있습니다.
그리고 아래에는 캐스트에 관한 정보가 노출됩니다. (Credits API 응답값)
또 추가로 지난 번 작업했던 Base 코드를 인기콘텐츠 상세 화면에도 모두 적용해주었습니다.
마무리
오늘은 이전에 잡아두었던 레이아웃에 데이터를 넣어보았는데요. 완성되지 않은 상태를 계속 유지하고 있다는 사실을 애써 무시했지만 사실 계속 마음이 쓰였습니다. 오늘로써 드디어 색동저고리를 안 볼 수 있어서 다행이네요.
다음으로는 또 다시 완성되지 않은 화면인 홈 화면(...)을 채워보려고 합니다.
그럼 다음 일지에서 뵐게요!
