[PC-207] 매칭 상세 보기 Value Talk Ui 구현

[sksowk156]

PC-207

1. ⭐️ 변경된 내용

• 매칭 상세 Value Talk Ui 구현
• Typography bodySSB, bodySM lineheight 20으로 변경

2. 🖼️ 스크린샷(선택)

KakaoTalk_20241230_023532192.mp4

3. 💡 알게된 부분

• 중첩 스크롤 기능

private class CollapsingHeaderNestedScrollConnection(
    val headerHeight: Int
) : NestedScrollConnection {

    // 헤더 offset(픽셀 단위), 0이면 펼침, -headerHeight이면 완전 접힘
    var headerOffset: Int by mutableIntStateOf(0)
        private set

    // 스크롤 이벤트가 오기 전, 먼저 얼마나 소모할지 계산
    override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
        // y축 델타(수직 스크롤 양)
        val delta = available.y.toInt()

        // 새 offset = 기존 offset + 스크롤 델타
        val newOffset = headerOffset + delta
        val previousOffset = headerOffset

        // -headerHeight ~ 0 사이로 제한
        //   -> 최소 -105: 완전히 접힘, 최대 0: 완전히 펼침
        headerOffset = newOffset.coerceIn(-headerHeight, 0)

        // 소비(consumed)된 스크롤 양 = (바뀐 offset - 기존 offset)
        val consumed = headerOffset - previousOffset

        // x축은 소비 안 함(0f), y축은 consumed만큼 소비했다고 반환
        return Offset(0f, consumed.toFloat())
    }
}

제가 생각했던 것과 다르게 AppBar(저희는 header)와 그 아래에 있는 LazyColumn가 하나로 움직이는게 아니라 각각의 위치를 offset으로 관리한다는 걸 알게 되었어요!

참고
공식문서
등을 참고했습니다

4. 📌 이 부분은 꼭 봐주세요!

• 지금 상단에 상태바 부분에 대한 처리가 안되어 있어서, 스크롤 시에 상태바를 덮는 현상이 있었어요!
  현재는 ' WindowCompat.setDecorFitsSystemWindows(window, true) ' 로 상태바를 덮지 못하게 해두었는데, UI에 따라 상태바를 덮을 수 있게 해야할 것 같아요!

[tgyuuAn]

진혁님 고생하셨습니다~~~~

큰 변경사항은 없구 사소한 컨벤션 관련해서 코멘트를 남겼어요!

저도 얼른 바텀 네비 관련해서 UI 완성해서 PR 올려볼게용~~~

[tgyuuAn]

👍