[🎨디자인 시스템🎨]

[shippingpark]

🏷️ Description

DesignSystem 하위 폴더에서 해당 내용을 확인할 수 있습니다

🎨 디자인 시스템

Spacing

extension CGFloat {
  struct AK {
    static let commonHorizontal: CGFloat = 25.0
  }
}

constraints 작성 시 디자인가이드에 영향을 받는 Spacing인지 고려합니다.
공통 양식을 따르는 값이라면 DesingSystem에 명시된 Spacing을 따라 작성하고,
해당 값이 변동되면 앱의 모든 뷰가 변동 될 수 있도록 합니다.

예시

위의 tableView는 해당 뷰에 귀속되는 개념이 아닌 우리 앱 서비스의 일관성을 위한 간격을 필요로 해 보입니다.
그러니 숫자를 직접 입력하는 것이 아닌(하드코딩) 기본 Spacing 을 기입하여 추후 변동에 대비합니다
(좌우 간격을 30으로 넓히는 결정을 한다면 DesignSystem만 변경해주어도 되게)

NSLayoutConstraint.activate([
      travelTableView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
      travelTableView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: .AK.commonHorizontal),
      travelTableView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -.AK.commonHorizontal),
      travelTableView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
])

(오토레이아웃 고민 시)

위의 타이틀이 부모View로부터 떨어져야 할 값인지 TableView로부터 떨어져야 할 값인지 고민합니다.
DesignSystem 속 �Spacing이 변경되면 Title의 위치또한 자연스럽게 변하길 바라는 지 고민해 봅니다.
적절한 판단 하에 기준을 잡기 !

Color

extension UIColor {
  enum AkColorType: String {
    case white = "#FFFFFF"
    case gray1 = "#F1F1F1"
    case gray2 = "#B3B3B3"
    case gray3 = "#8E8E93"
    case black = "#000000"
    
    case akOrange = "#F64E05"
    case akGreen = "#DCED59"
    
    case akPurple = "#EFD0F4"
    case akSubGreen = "#E3F4DC"
    case akRed = "#FFD8D6"
    case akYellow = "#FFF4CA"
    case akBlue = "#D0E0F4"
  }
  
  static func akColor(_ type: AkColorType) -> UIColor {
    return UIColor(hexCode: type.rawValue)
  }
}

위의 메서드를 사용하여 색상을 입힙니다.
악동 쿠키들 서비스의 모든 화면은 위의 색상 분류만 사용합니다.
색상이 추가된다면 case를 추가합니다.

예시

let titleLabel = UILabel().set {
    $0l.font = .akFont(.gmarketMedium30)
    $0.textColor = .akColor(.black)
    $0.adjustsFontForContentSizeCategory = true
  }

위와 같은 View 저장속성 작성 시 set 메서드를 사용합니다
[Tip]
set 메서드 사용 시 $0..translatesAutoresizingMaskIntoConstraints = false 는 자동으로 적용 됩니다

Font

extension UIFont {
  static func akFont(_ type: AKFontType, dynamic: Bool = true) -> UIFont {
    guard let customFont = UIFont(name: type.customFont, size: type.size) else {
      return UIFont.systemFont(ofSize: type.size) // 폰트가 없는 경우 기본 시스템 폰트로 대체
    }
    return dynamic ? UIFontMetrics.default.scaledFont(for: customFont) : customFont
  }
}

다이나믹폰트를 구현하기 위해, 폰트를 반환하는 acFont 메서드는 위와 같이 작성되었습니다.

아래와 같이 사용하면 됩니다.

예시

let titleLabel = UILabel().set {
    $0.font = .akFont(.gmarketMedium30)
    $0.textColor = .akColor(.black)
    $0.adjustsFontForContentSizeCategory = true // 🚨
  }

🚨주의🚨
다이나믹 폰트의 동적인 적용을 위해서는 추가적으로 아래 옵션(adjustsFontForContentSizeCategory)을 true로 설정해야 합니다

커스텀 뷰 작성 규칙

#17
많은 레이아웃 관리, 독립적 행동을 필요로 하는 경우 해당 UIView 구성 코드는
ViewController 내부로부터 분리하여 UIView를 상속한 타입(커스텀 뷰)을 생성합니다