Skip to content

[Fix/#203] 홈 화면 Collapsible Header 플링 시 하단 검정 배경 노출문제 해결#204

Merged
wjdrjs00 merged 3 commits intodevelopfrom
fix/#203-collapsible-header
Mar 25, 2026
Merged

[Fix/#203] 홈 화면 Collapsible Header 플링 시 하단 검정 배경 노출문제 해결#204
wjdrjs00 merged 3 commits intodevelopfrom
fix/#203-collapsible-header

Conversation

@wjdrjs00
Copy link
Member

@wjdrjs00 wjdrjs00 commented Mar 25, 2026

[ PR Content ]

홈 화면 Collapsible Header 플링 시 하단 검정 배경 노출되던 문제를 수정했습니다.

Related issue

Screenshot 📸

수정 전 수정 후
Screen_recording_20260325_175825.MOV
Screen_recording_20260325_180813.mp4

Work Description

  • NestedScrollConnection 내 snap 애니메이션 로직에 오버슈트로 인한 범위 이탈 방지 코드 추가
  • onGloballyPositioned를 사용하여 StickyHeader의 실제 하단 위치를 기반으로 content offset을 계산하도록 수정

To Reviewers 📢

  • 잔 버그이긴 했는데 개인적으로 신경이 쓰여서 원인을 파악하고 수정해봤습니다.
  • 원인:
    • 플링 시 snapTo는 spring 애니메이션으로 currentHeightPx를 0f로 수렴시키는데, 초기 velocity(플랑 속도)가 클 경우 목표값을 순간적으로 지나치는 오버슈트가 발생합니다. 때문에 오버슈트로 currentHeightPx가 음수가 되면 translationY도 음수가 되어 Column이 위로 이동합니다.
    • 요기서 graphicsLayer의 translationY는 시각적 이동만 담당하고 레이아웃 공간은 바꾸지 않으므로, Column이 위로 올라간 만큼 하단에 빈 공간이 생기는 것이 원인이었습니다..
  • 해결방법:
    • 원인 파악과정과 달리 해결방법은 단순했는데,, animate 콜백에서도 coerceIn을 적용하여 spring 오버슈트로 인한 범위 이탈을 방지할 수 있습니다.

Summary by CodeRabbit

  • 버그 수정

    • 런타임에서 스티키 헤더의 실제 하단 위치를 측정해 스크롤/붕괴 동작의 위치 계산 정확도가 향상되었습니다.
    • 펼침/접힘 애니메이션과 플링 처리의 경계 및 스냅 동작을 개선해 불안정한 튕김이나 과도한 이동을 줄였습니다.
  • 리팩터

    • 초기 헤더 높이와 런타임 측정값을 분리해 레이아웃 및 오프셋 계산을 더 명확하고 안정적으로 처리합니다.

…산 적용

- onGloballyPositioned를 사용하여 StickyHeader의 실제 하단 위치를 기반으로 content offset을 계산하도록 수정
- NestedScrollConnection 내 fling 핸들링 및 snap 애니메이션 로직 최적화
- 불필요한 postFling 로직 제거 및 변수명 명확화 (stickyHeaderHeightDp -> initialStickyHeaderHeightDp)
@wjdrjs00 wjdrjs00 requested a review from l5x5l March 25, 2026 09:20
@wjdrjs00 wjdrjs00 self-assigned this Mar 25, 2026
@wjdrjs00 wjdrjs00 added 🐞 Fix 버그 수정 📱 UI UI 추가 및 수정 (비지니스 로직을 포함하지 않는 작업) 🧤 대현 labels Mar 25, 2026
@coderabbitai
Copy link

coderabbitai bot commented Mar 25, 2026

Walkthrough

StickyHeader의 실제 하단 위치를 런타임에 측정해 상태로 저장하고, 초기 StickyHeader 높이 값 사용을 조정하며 플링/스냅 처리 로직과 애니메이션 업데이트를 변경했습니다.

Changes

Cohort / File(s) Summary
HomeScreen UI 측정
presentation/src/main/java/com/threegap/bitnagil/presentation/screen/home/HomeScreen.kt
onGloballyPositioned로 StickyHeader의 boundsInParent().bottom을 측정해 collapsibleHeaderState.stickyHeaderActualBottomPx에 저장. StickyHeader 레이아웃에서 사용하던 높이 값을 initialStickyHeaderHeightDp로 전환.
Collapsible Header 상태 관리
presentation/src/main/java/com/threegap/bitnagil/presentation/screen/home/model/CollapsibleHeaderState.kt
생성자 파라미터 이름 변경(stickyHeaderHeightDpinitialStickyHeaderHeightDp), stickyHeaderActualBottomPx 상태 추가, collapsedContentOffsetDp 계산을 측정값 기반으로 변경, expansionProgress 계산 및 nested scroll 플링/스냅 로직과 스프링 애니메이션 업데이트의 경계/클램핑 및 반환값 조정.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 플링에 흔들리던 헤더를 재보며,
바닥 위치 하나에 마음을 맡기네.
찰나의 스냅, 애니메이션은 조여지고,
검정 벌판은 이내 보이지 않네.
토끼가 찍은 작은 수선, 퐁당 ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed PR 제목은 수정 대상 이슈 번호(#203)와 주요 변경 사항(Collapsible Header 플링 시 하단 검정 배경 노출문제 해결)을 명확하게 요약하고 있습니다.
Description check ✅ Passed PR 설명은 템플릿의 모든 주요 섹션(Related issue, Screenshot, Work Description, To Reviewers)을 포함하고 있으며, 버그 원인과 해결 방법을 상세히 설명하고 있습니다.
Linked Issues check ✅ Passed PR의 코드 변경사항이 #203의 모든 요구사항을 충족합니다: NestedScrollConnection의 snap 애니메이션에 coerceIn 추가로 오버슈트 방지, onGloballyPositioned로 StickyHeader 실제 위치 기반 계산, 플링 시 하단 배경 노출 문제 해결.
Out of Scope Changes check ✅ Passed 모든 변경사항이 #203의 홈 화면 Collapsible Header 플링 버그 해결에 직접 관련되어 있으며, 범위를 벗어난 변경은 없습니다.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/#203-collapsible-header

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@presentation/src/main/java/com/threegap/bitnagil/presentation/screen/home/model/CollapsibleHeaderState.kt`:
- Around line 31-35: The collapsed offset is 0 until onGloballyPositioned fills
stickyHeaderActualBottomPx, causing a visual jump; to fix, provide a safe
fallback instead of 0 by either initializing stickyHeaderActualBottomPx with a
fallback px value or making collapsedContentOffsetDp return with(density) {
max(stickyHeaderActualBottomPx, fallbackPx).toDp() }; use a deterministic
fallback derived from your known collapsed header height (or a passed-in
default) and update stickyHeaderActualBottomPx in the existing
onGloballyPositioned handler so the real measured value replaces the fallback
once available.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 263dc035-f7cf-4608-86a6-af5987aac606

📥 Commits

Reviewing files that changed from the base of the PR and between 4ae9e13 and 50fbf10.

📒 Files selected for processing (2)
  • presentation/src/main/java/com/threegap/bitnagil/presentation/screen/home/HomeScreen.kt
  • presentation/src/main/java/com/threegap/bitnagil/presentation/screen/home/model/CollapsibleHeaderState.kt

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@presentation/src/main/java/com/threegap/bitnagil/presentation/screen/home/model/CollapsibleHeaderState.kt`:
- Around line 41-42: expansionProgress 계산이 expandedHeaderHeightPx가 0 이하일 때 NaN을
반환하므로, CollapsibleHeaderState의 expansionProgress 게터에서 expandedHeaderHeightPx가 0f
이하인 경우 0f를 반환하도록 보호하세요; 즉 currentHeightPx / expandedHeaderHeightPx 연산을 수행하기 전에
expandedHeaderHeightPx <= 0f 조건을 검사하고, 그럴 때는 0f를 반환하고 그렇지 않으면 (currentHeightPx /
expandedHeaderHeightPx).coerceIn(0f, 1f)를 반환하도록 변경하면 됩니다 (참조 심볼:
expansionProgress, expandedHeaderHeightPx, currentHeightPx,
minExpandedHeaderHeight).

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f080a24b-0e3b-428b-a6e9-4ef4195e733c

📥 Commits

Reviewing files that changed from the base of the PR and between 50fbf10 and 89edf7d.

📒 Files selected for processing (1)
  • presentation/src/main/java/com/threegap/bitnagil/presentation/screen/home/model/CollapsibleHeaderState.kt

Copy link
Contributor

@l5x5l l5x5l left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다!

@wjdrjs00 wjdrjs00 merged commit 9d266a9 into develop Mar 25, 2026
2 checks passed
@wjdrjs00 wjdrjs00 deleted the fix/#203-collapsible-header branch March 25, 2026 14:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🐞 Fix 버그 수정 📱 UI UI 추가 및 수정 (비지니스 로직을 포함하지 않는 작업) 🧤 대현

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FIX] 홈 화면 Collapsible Header 플링 시 하단 검정 배경 노출

2 participants