refactor(fe): 본문 스크롤 컨테이너를 ScrollBody로 승격#121
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
여러 화면에 복붙되던 본문 스크롤 클래스 묶음을 ScrollBody 컴포넌트로 모았다. iOS 관성 스크롤과 스크롤바 자리 예약이라는 암묵지를 한 곳에 담고, pad 프로퍼티로 하단 여백만 화면별로 고른다. 홈 설정, 태그 설정, 몽글 상세 화면은 기존에 이 묶음의 일부가 빠져 있어 스크롤바가 나타날 때 본문 폭이 밀렸는데, ScrollBody로 옮기면서 스크롤바 자리 예약과 iOS 관성 스크롤을 함께 얻는다. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
seongbin9786
force-pushed
the
refactor/fe-scroll-body
branch
from
July 19, 2026 08:15
9c0f095 to
0311d86
Compare
seongbin9786
marked this pull request as ready for review
July 19, 2026 08:18
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
여러 화면에 그대로 복붙되던 본문 스크롤 컨테이너 클래스 묶음을
ScrollBody컴포넌트로 승격했습니다.이 묶음에는 iOS 관성 스크롤(
-webkit-overflow-scrolling)과 스크롤바 자리 예약(scrollbar-gutter)이라는 암묵지가 담겨 있는데, 여러 곳에 흩어져 있다 보니 일부 화면에서는 이 묶음의 일부가 빠져 있었습니다. 스크롤바가 나타날 때 본문 폭이 밀리는 화면이 생기는 이유였습니다.변경 사항
src/components/ui/scroll-body.tsx추가. 고정 클래스 묶음을 한 곳에 담고,pad프로퍼티(tabbar= pb-24,screen= pb-8,none= 여백 없음)로 하단 여백만 화면별로 고릅니다. 화면별 간격(space-y-*)이나 좌우 여백(px-5)은 컴포넌트에 굳히지 않고className으로 넘깁니다.ScrollBody로 이관했습니다.TimelineScrollShell도 내부적으로ScrollBody를 렌더하도록 바꿨습니다. 헤더 슬롯과scrollRef전달, 바깥 동작은 그대로입니다.누락 화면 보정
아래 3개 화면은 기존에 묶음의 일부가 빠져 있어 이관하면서 함께 채웠습니다.
scrollbar-gutter자리 예약과 iOS 관성 스크롤이 없었는데 이제 함께 적용됩니다.scrollbar-gutter자리 예약과min-w-0이 빠져 있었는데 함께 채워졌습니다.시각적으로는 이 3개 화면에서 스크롤바가 나타날 때 본문이 밀리지 않는 차이만 생기며, 나머지 화면은 동작이 동일합니다.
Docs
src/components/ui/scroll-body.stories.tsx에pad변형별 스토리를 추가했습니다. 각 스토리는 높이가 정해진 세로 flex 컨테이너 안에서 긴 본문으로 스크롤이 드러나게 구성했습니다.pad="tabbar". 탭바가 겹치는 탭 화면. 하단 pb-24로 마지막 항목이 탭바에 가리지 않습니다.pad="screen". 일반 전체 화면. 하단 pb-8 여백만 둡니다.pad="none". 하단 여백 없이 콘텐츠 끝까지. 하단에 별도 고정 바가 붙는 화면용입니다.