Repository navigation
[fix] Storybook에서 열린 채 시작하는 오버레이와 모바일 뷰포트 스토리가 빈 화면으로 그려지는 문제를 고친다 - #2278
seongwon030 merged 2 commits into
Conversation
- 데코레이터 useEffect에서 #modal-root를 만들면 자식 렌더가 먼저 돌아 Portal이 null을 반환하고 body 잠금만 남았다 - 앱 index.html처럼 preview-body.html에 #modal-root를 두고 effect의 생성 코드를 지운다
- Storybook 10은 defaultViewport를 읽지 않아 Popup·UnderlineTabs 모바일 스토리가 데스크톱 폭으로 열렸다 - Chromatic 스냅샷 폭에 쓰이는 defaultViewport는 두고 globals.viewport를 더한다
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review.
 |
| Layer / File(s) | Summary |
|---|---|
모달 Portal 대상 요소 제공 frontend/.storybook/preview-body.html, frontend/.storybook/preview.tsx, frontend/src/components/CLAUDE.md |
미리보기 HTML에 modal-root 요소를 추가했습니다. decorator에서 해당 요소를 생성하던 처리를 제거하고 문서의 생성 위치 설명을 갱신했습니다. |
모바일 스토리 뷰포트 설정 frontend/src/components/common/UnderlineTabs/UnderlineTabs.stories.tsx, frontend/src/pages/MainPage/components/Popup/Popup.stories.tsx |
두 스토리에 iphone6와 회전 상태 false를 지정하는 globals.viewport 설정을 추가했습니다. 기존 parameters.viewport.defaultViewport 설정은 유지했습니다. |
Priority:
Estimated code review effort: 2 (Simple) | ~8 minutes
Change: Bug fix · Severity of issue fixed: Medium
Suggested labels: 💻 FE, 🛠Fix
Merge Risk: 
b77e9
-
The Storybook-only changes have no established merge-blocking defect and are mergeable with normal checks.
Pre-merge checks: 
-
Check name Status Explanation Description Check Check skipped - CodeRabbit’s high-level summary is enabled. Title check 제목은 Storybook에서 초기 오버레이가 비어 보이고 모바일 뷰포트 스토리가 빈 화면으로 렌더링되는 문제를 명확히 설명합니다. PR의 주요 변경 사항과 일치합니다. Linked Issues check 직접 연결된 활성 이슈 [ #2277]의 두 코딩 요구사항을 PR 변경 요약이 충족한다.frontend/.storybook/preview-body.html에#modal-root를 추가하고frontend/.storybook/preview.tsx의 지연 생성 코드를 제거했다. 따라서 오버레이 Portal이 첫 렌더 전에 대상 요소를 사용할 수 있…Out of Scope Changes check 변경된 파일은 Storybook의 preview-body.html,preview.tsx, 관련 컴포넌트 문서,UnderlineTabs스토리,Popup스토리다.CLAUDE.md의 Portal 위치 문서 수정은 [#2277] 구현 위치와 일치한다. 테스트 대상 스토리의 메타데이터 수정은 모바일 뷰포트 요구사항을 구현한다. 제공된 변…Docstring Coverage No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat… Full details: Linked Issues check
-
Explanation
직접 연결된 활성 이슈 [
#2277]의 두 코딩 요구사항을 PR 변경 요약이 충족한다.frontend/.storybook/preview-body.html에#modal-root를 추가하고frontend/.storybook/preview.tsx의 지연 생성 코드를 제거했다. 따라서 오버레이 Portal이 첫 렌더 전에 대상 요소를 사용할 수 있다.UnderlineTabs/UnderlineTabs.stories.tsx와Popup/Popup.stories.tsx에globals.viewport를 추가했다. 기존defaultViewport도 유지했다. 변경 범위는 Storybook 설정과 스토리 메타데이터에 한정된다.
Full details: Out of Scope Changes check
-
Explanation
변경된 파일은 Storybook의
preview-body.html,preview.tsx, 관련 컴포넌트 문서,UnderlineTabs스토리,Popup스토리다.CLAUDE.md의 Portal 위치 문서 수정은 [#2277] 구현 위치와 일치한다. 테스트 대상 스토리의 메타데이터 수정은 모바일 뷰포트 요구사항을 구현한다. 제공된 변경 요약에는 이슈와 무관한 앱 기능 변경이 없다.
Full details: Docstring Coverage
-
Explanation
No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 0 functions across 2 files. (2 skipped: 2 unsupported.)
-
Finishing Touches
-
📝 Generate docstrings
-
- Commit to this branch
- Create a new PR
🧪 Generate unit tests (beta)
-
- Commit to this branch
- Create a new PR
-
- Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
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 @coderabbitai help to get the list of available commands.
![diboreview-e2e-bot[bot]](https://avatars.githubusercontent.com/in/5274969?s=60&v=4){kind=small}
|
Claude finished @seongwon030's task in 19s —— View job harry 리뷰 총평리뷰 기준을 위반한 곳은 없어요. 따로 남긴 인라인 코멘트도 없어요. 이번 PR은 |
|
이 PR의 규칙 관련 변경을 분석해 규칙 후보 1개를 찾았어요. 켜기 전에는 리뷰에 쓰지 않아요.
대시보드에서 근거를 보고 켜요: http://127.0.0.1:3000/repos/Moadong/moadong |
🎨 UI 변경사항을 확인해주세요
202개 스토리 변경 · 전체 202개 스토리 · 70개 컴포넌트 |
Close #2277
문제
열린 채 시작하는 오버레이 스토리가 첫 렌더에서 비어 있었다.
#modal-root를 preview 데코레이터의useEffect에서 만들었는데, 자식 컴포넌트가 먼저 렌더되면서Portal이getElementById에서 null을 받아 아무것도 그리지 않았다.useBodyScrollLock만 실행돼서 body는 잠긴 채로 남았다. 처음부터 열려 있으니 다시 렌더할 계기도 없어서, Chromatic baseline도 이 빈 상태로 찍혀 있었다.모바일 뷰포트 스토리가 데스크톱 폭으로 열렸다. Storybook 10은
parameters.viewport.defaultViewport를 읽지 않는다. 그래서 모바일 전용인Popup은 Storybook 화면에서 열리지 않았다.해결
.storybook/preview-body.html에<div id="modal-root">를 둬서 앱index.html과 같게 첫 렌더 전부터 존재하게 한다. effect의 생성 코드는 지웠다Popup·UnderlineTabs/CenterOnMobile에globals.viewport(iphone6)를 더한다. Chromatic 문서상 스냅샷 폭은defaultViewport를 따르므로 그 설정은 남겼다검증
수정 전(
develop-fe)과 수정 후 정적 빌드를 Playwright로 비교했다.#modal-root자식 수Popup매니저 iframe 폭ResultCard5개ResultCard5개는 수정 전 빌드끼리 비교해도 231~302px 차이가 나는, 원래 흔들리는 스토리다. 이번 변경과는 무관하다. 바뀐 오버레이 스토리에는 autodocs 페이지가 없어서, 오버레이가 docs 페이지를 덮는 문제는 생기지 않는다. 타입체크와build-storybook은 통과했다.영향 범위
Storybook과 Chromatic baseline만 바뀐다. 앱 번들에는 닿지 않는다. Chromatic이
globals.viewport도 읽는지는 확인하지 못했다. 그래서defaultViewport를 그대로 두었고, 이 두 스토리의 Chromatic 폭은 바뀌지 않을 것으로 본다.Summary by CodeRabbit