오늘 한 일 : 지난번에 빠르게 업데이트 하면서 생긴 똥 치우기 및 상세화면 기획/디자인 다음 할 일 : 상세화면 구현하기

<aside> ✏️ 2022.10.18

지난번에 빠르게 출시하느라 정리하지 못한 네비게이션 바 디자인시스템 코드를 정리했고 그에 따라서 디자인 부분을 전반적으로 수정했다.

그리고 서울시 공공데이터 API를 기반으로 상세 화면을 어떻게 만들지 기획, 디자인했다.

</aside>

작업

디자인시스템 코드 정리

일단 디자인 작업을 해서 디자인적인 디자인시스템을 수정하고

그에 따라서 코드에서 디자인시스템을 수정할 필요가 있었다.

디자인시스템의 네비게이션 바가 좀 더 유연하게 대처할 필요가 있어서 열거형으로 화면마다 네비게이션을 관리하지 않고,

메인일 때와 상세일 때로 나눠서 네비게이션 종류를 관리했다.

import UIKit

import NiCarNaeCar_Resource

import SnapKit
import Then

final class NDSNavigationBar: UIView {
    
    // MARK: - Properties
    
    private var viewController = UIViewController()
    public var backButton = BackButton()
    private var closeButton = CloseButton()
    
    private var titleLabel = UILabel().then {
        $0.textColor = R.Color.black200
        $0.textAlignment = .center
        $0.font = NiCarNaeCarFont.title2.font
    }
    
    private var detailTitleLabel = UILabel().then {
        $0.textColor = R.Color.black200
        $0.textAlignment = .center
        $0.font = NiCarNaeCarFont.body2.font
        $0.isHidden = true
    }
    
    var backButtonIsHidden: Bool = true {
        didSet {
            backButton.isHidden = backButtonIsHidden
        }
    }
    
    var closeButtonIsHidden: Bool = true {
        didSet {
            closeButton.isHidden = closeButtonIsHidden
        }
    }
    
    var title: String = "" {
        didSet {
            titleLabel.text = title
            detailTitleLabel.text = title
        }
    }
    
    var isCloseButtonDisabled = true {
        didSet {
            closeButton.isDisabled = isCloseButtonDisabled
        }
    }
    
    var isDetail: Bool = false {
        didSet {
            if isDetail {
                titleLabel.isHidden = true
                detailTitleLabel.isHidden = false
            } else {
                titleLabel.isHidden = false
                detailTitleLabel.isHidden = true
            }
        }
    }
    
    // MARK: - Initializer
    
    public init(_ viewController: UIViewController) {
        super.init(frame: .zero)
        self.backButton = BackButton(root: viewController)
        self.closeButton = CloseButton(root: viewController)
        configureUI()
        setLayout()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // MARK: - UI Method
    
    private func configureUI() {
        backgroundColor = R.Color.white
    }
    
    private func setLayout() {
        addSubviews(backButton, titleLabel, detailTitleLabel, closeButton)
                
        snp.makeConstraints { make in
            make.height.equalTo(Metric.navigationHeight)
        }
        
        backButton.snp.makeConstraints { make in
            make.top.equalToSuperview()
            make.leading.equalToSuperview().inset(Metric.navigationButtonLeading)
            make.width.height.equalTo(Metric.navigationButtonSize)
        }
        
        titleLabel.snp.makeConstraints { make in
            make.top.equalToSuperview().inset(Metric.navigationTitleTop)
            make.leading.equalToSuperview().inset(Metric.navigationTitleLeading)
        }
        
        detailTitleLabel.snp.makeConstraints { make in
            make.top.equalToSuperview().inset(Metric.navigationTitleTop)
            make.centerX.equalToSuperview()
        }
        
        closeButton.snp.makeConstraints { make in
            make.top.equalToSuperview()
            make.trailing.equalToSuperview().inset(Metric.navigationButtonTrailing)
            make.width.height.equalTo(Metric.navigationButtonSize)
        }
    }
}

→ 기존의 열거형으로 관리한 코드를 지우고, 메인화면일 때와 상세화면일 때로 나눠서 관리했다.

• 메인 화면일 때는 타이틀이 좌측에 위치하고 이 때, 가운데에 위치한 타이틀은 보이지 않는다.
• 상세 화면일 때는 타이틀이 중앙에 위치하므로 이에 맞게 hidden처리를 나눴다.

상세 화면 기획, 디자인

여러가지 후보가 있었지만 .. 가장 오른쪽으로 결정 !!