const color =
  (isUnchecked && 'palette.label.alternative') ||
  (isChecked && 'palette.primary.normal') ||
  'palette.label.normal'

기존 접근과 문제점

기존 접근

• 중첩된 삼항 연산자로 상태에 따라 값을 반환하는 코드 작성.
• 간결하지만 가독성이 떨어지고, 상태가 늘어나면 유지보수가 어려워짐.

문법적 접근

• if 문, switch 문, 객체 매핑, &&와 || 논리 연산자 등 다양한 문법으로 해결 가능.
• 하지만 이는 상태 관리의 본질적인 문제를 해결하지 못할 수 있음.

핵심 문제

• status 모델을 어떻게 정의하고 참조할 것인가?
  • 상태의 의미를 명확히 표현할 수 있어야 함.
  • 상태와 그에 따른 동작이 쉽게 확장 가능해야 함.
  • 코드의 가독성과 유지보수성을 높여야 함.

class StatusManager {
  static Status = {
    UNCHECKED: 'UNCHECKED',
    CHECKED: 'CHECKED',
    DEFAULT: 'DEFAULT',
  } as const

  static getColor(status: keyof typeof this.Status) {
    switch (status) {
      case this.Status.UNCHECKED:
        return 'palette.label.alternative'
      case this.Status.CHECKED:
        return 'palette.primary.normal'
      default:
        return 'palette.label.normal'
    }
  }
}

const color = StatusManager.getColor(StatusManager.Status.CHECKED)