Conversation
WalkthroughFixedBottomBar를 React portal로 렌더링하도록 변경하고, 앱 레이아웃에 portal 컨테이너를 주입하며 관련 스토리북 데코레이터와 테스트를 추가했습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant App as 앱 레이아웃 (layout.tsx)
participant Doc as document/body
participant Bar as FixedBottomBar 컴포넌트
App->>Doc: portal 컨테이너 div(id=FIXED_BOTTOM_BAR_CONTAINER_ID) 주입
Bar->>Doc: portalTarget = getElementById(FIXED_BOTTOM_BAR_CONTAINER_ID)
Bar->>Doc: createPortal(바 콘텐츠) -> portalTarget
Bar->>Bar: 로컬 spacer 높이 계산 및 동기화
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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. Comment |
|
🧷 배포 미리보기: https://run-ro1ry3d5x-shionparks-projects.vercel.app |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@src/components/layout/FixedBottomBar/index.test.tsx`:
- Around line 7-37: The test's global ResizeObserver mock is not restored,
risking leakage to other tests; in beforeEach save the original
global.ResizeObserver (e.g., const originalResizeObserver =
global.ResizeObserver) before mocking it in the beforeEach that sets up
ResizeObserver, and in afterEach restore it (assign originalResizeObserver back
to global.ResizeObserver) alongside the existing jest.restoreAllMocks() and DOM
cleanup for container (refer to the existing beforeEach/afterEach,
FIXED_BOTTOM_BAR_CONTAINER_ID, and the ResizeObserver mock to locate where to
add the save/restore).
In `@src/components/layout/FixedBottomBar/index.tsx`:
- Around line 45-59: The portal currently calls createPortal(...,
document.getElementById(FIXED_BOTTOM_BAR_CONTAINER_ID)!) which will throw if the
container is missing; update the rendering to guard against a null container by
retrieving the element with
document.getElementById(FIXED_BOTTOM_BAR_CONTAINER_ID) into a variable and only
call createPortal (or render the portal block) when that element is non-null —
keep using FIXED_BOTTOM_BAR_CONTAINER_ID, createPortal, barRef and children but
ensure a null-check prevents the runtime crash in environments where the
container may not exist.
shionpark
approved these changes
Jan 29, 2026
Contributor
shionpark
left a comment
shionpark
left a comment
There was a problem hiding this comment.
“실제로 하는 역할과 DOM 상 위치가 불일치해 동작을 추적하기 어렵다”고 언급하신 부분에서
어떤 상황에서 문제가 발생하는지 궁금해서 찾아봤습니다.
FBB처럼 화면상으로는 전역 UI로 동작하지만 DOM 상에서는 특정 컴포넌트 내부에 위치한 경우,
레이아웃(overflow, stacking context), 이벤트 전파, 지역 스타일 상속 등의 이슈에서
원인을 구조만 보고 파악하기 어려워질 수 있다고 하네요. (참고 자료 첨부)
createPortal을 통해 FBB를 전역 레이어로 분리함으로써,
레이아웃·이벤트·스타일 동작을 DOM 구조 기준으로 추론할 수 있게 된 점이 좋아보입니다! 👍
비슷한 맥락에서, 전역 레이어 성격을 가진 모달 UI 역시
createPortal 기반으로 리팩토링을 고려해볼 수 있을 것 같네요!
참고 자료:
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
2 participants
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.
작업 내용
기존에는
개선
<body>의 자식 컨테이너에 fbb가 위치하도록 했습니다.비교
Before
After
Summary by CodeRabbit
릴리스 노트
New Features
테스트
리팩터
스토리북
✏️ Tip: You can customize this high-level summary in your review settings.