UI 단 설계

1. 공통 컴포넌트 찾기

(#번호는 깃허브 이슈 번호입니다.)

1. 뷰 스케치 및 각 화면 컴포넌트화, UI 로직 설계

https://embed.figma.com/design/ddvPvAAK1daBP79DfnHyBt/수현이랑-안드-피그마?node-id=0-1&t=CgP5znCfmL4ZM6zw-1&embed-host=notion&footer=false&theme=system

위 피그마 파일 내부, AOS 1차 GUI에, 뷰 스케치 및 각 화면 컴포넌트화 진행하였습니다 !

1. 공통되는 로직 확장함수화

• 토스트 메시지 활용 확장함수

  fun Context.toast(message: String) {
      Toast.makeText(this, message, Toast.LENGTH_SHORT).show()
  }
  

• 리플 제거 확장함수

  inline fun Modifier.noRippleClickable(
      crossinline onClick: () -> Unit
  ): Modifier = composed {
      clickable(
          indication = null,
          interactionSource = remember { MutableInteractionSource() }
      ) {
          onClick()
      }
  }
  

• 입력 후, 포커스 해제 확장함수

  fun Modifier.addFocusCleaner(
      focusManager: FocusManager,
      doOnClear: () -> Unit = {}): Modifier {
      return this.pointerInput(Unit) {
          detectTapGestures(onTap = {
              doOnClear()
              focusManager.clearFocus()
          })
      }
  }
  

• 가격 형식 (천자리 구분) 확장함수

  fun Int.toDecimalFormat(): String {
      val decimalFormat = DecimalFormat("#,###")
      return decimalFormat.format(this)
  }
  

• 가격 형식 포맷팅 확장함수

  fun thousandSeparatorTransformation(): VisualTransformation {
      return VisualTransformation { text ->
          val originalText = text.text
          val formattedText = originalText.toLongOrNull()?.let {
              DecimalFormat("#,###").format(it)
          } ?: originalText
  
          val offsetMapping = object : OffsetMapping {
              override fun originalToTransformed(offset: Int): Int {
                  return if (offset == 0) 0 else formattedText.length
              }
  
              override fun transformedToOriginal(offset: Int): Int {
                  return text.length
              }
          }
  
          TransformedText(AnnotatedString(formattedText), offsetMapping)
      }
  }