Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions frontend/.storybook/preview-body.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<!-- 앱(index.html)처럼 Portal 대상을 처음부터 둔다. 데코레이터 effect에서 만들면 열린 채 시작하는 오버레이의 첫 렌더가 비어 버린다. -->
<div id="modal-root"></div>
5 changes: 0 additions & 5 deletions frontend/.storybook/preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,11 +67,6 @@ const preview: Preview = {
} catch (error) {
console.warn('Failed to initialize mixpanel for Storybook:', error);
}
if (!document.getElementById('modal-root')) {
const modalRoot = document.createElement('div');
modalRoot.id = 'modal-root';
document.body.appendChild(modalRoot);
}
}, []);

return (
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/CLAUDE.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ common/Toast/
화면 위에 띄우는 컴포넌트는 아래 규약을 공유한다.

- **제어형**: `isOpen` + `onClose`를 받고 상태는 호출부가 소유한다. 컴포넌트가 스스로 열림 상태를 들지 않는다.
- **Portal**: `common/Portal/Portal.tsx`로 `#modal-root`(`index.html`)에 렌더한다. 조상의 `transform`·`overflow`로 인한 stacking context 문제를 피한다. Storybook에서는 `.storybook/preview.tsx`가 `#modal-root`를 만들어 준다.
- **Portal**: `common/Portal/Portal.tsx`로 `#modal-root`(`index.html`)에 렌더한다. 조상의 `transform`·`overflow`로 인한 stacking context 문제를 피한다. Storybook에서는 `.storybook/preview-body.html`이 `#modal-root`를 처음부터 둔다.
- **z-index**: `Z_INDEX`에 정의된 값만 사용 (`overlay: 1100` < `modal: 1200` < `toast: 1300`).

## Toast
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,5 +67,7 @@ export const CenterOnMobile: Story = {
defaultViewport: 'iphone6',
},
},
// defaultViewport는 Chromatic 스냅샷 폭에 쓰이고, Storybook 10 화면은 globals.viewport를 읽는다.
globals: { viewport: { value: 'iphone6', isRotated: false } },
render: () => <InteractiveTabs centerOnMobile />,
};
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ const meta = {
);
},
],
// defaultViewport는 Chromatic 스냅샷 폭에 쓰이고, Storybook 10 화면은 globals.viewport를 읽는다.
globals: { viewport: { value: 'iphone6', isRotated: false } },
tags: ['autodocs'],
} satisfies Meta<typeof Popup>;

Expand Down
Loading