[#41] 흡연구역 상세조회 UI 변경

[Taehyeon-Kim]

🔍 What is this PR?

상세 조회 ui	토스트 ui

위의 2가지 UI를 구현합니다. 상세 조회 UI의 변경사항이 있어서 반영했고, 프로토콜과 Extension을 활용해서 밑에서 올라오는 뷰에 대한 확장과 수정을 좀 더 편리하게 할 수 있도록 고민했습니다.
네트워크 통신은 다음 pr에서 진행하도록 하겠습니다.

고민 지점

처음에는 Life Cycle 핸들링, 화면 전환의 자유성 등의 이유로 ViewController의 형태로 구현을 하려 했으나 지도와 계속해서 인터랙션이 이루어져야 하기 때문에 ViewController로 구현하면 바탕의 지도 위의 Pin을 클릭하고 해제하는데에 어려움이 있었습니다. 그래서 ViewController 대신 View의 형태로 MapViewController에 추가되는 방식으로 구현했습니다.

📝 Changes

아래에서 올라오는 뷰를 BottomView라고 칭하겠습니다.

Protocol

• Presentable : BottomView과 될 UIView에 채택합니다.
• Contents : BottomView와 Binding될 컨텐츠에 채택합니다.

UIViewController + Extension

• addBottomView : 뷰의 계층에 BottomView를 추가합니다.
• hideBottomView : 현재 계층에 존재하는 BottomView를 숨기는 행위를 수행합니다.
• showCardView : CardView(상세 조회 뷰)를 보여줍니다.
• showMessageView : Message(메시지, 토스트 뷰)를 보여줍니다.

Extend

• 새롭게 BottomView를 추가하고자 한다면 새롭게 구현할 BottomView에 Presentable를 채택하고, BottomView와 binding할 데이터에 Contents를 채택하면 됩니다.
• 그 이후에 UIViewController에 추가 메소드를 구현하면 쉽게 BottomView를 추가할 수 있습니다. 우리는 이제 추가할 BottomView 자체에만 집중하면 됩니다.

Usage

보여줄 컨텐츠(데이터 모델)과 함께 show 메소드를 호출하면 됩니다.

// 상세 조회 뷰
let content = SmokingAreaResponseModel(name: "흡연구역", address: "상세주소", imageURLString: "/", distance: "233m")
showCardView(content, belowSubview: blurEffectView)

// 메시지 뷰
let content = MessageModel(contents: "흡연구역을 선택해 주세요")
showMessageView(content, belowSubview: blurEffectView)

📸 Screenshot

빨간색, 파란색 뷰는 테스트를 위해 임시로 올려놓은 뷰 입니다.

구현 내용	스크린샷
상세 조회 뷰 + 메시지 뷰

☑️ Test Checklist

📮 관련 이슈

• Resolved: #41