[fix] 회원가입 버튼 겹침 문제 수정 #58
Conversation
There was a problem hiding this comment.
Pull request overview
This PR fixes a button overlapping issue in the signup flow by introducing a viewport utility that dynamically calculates and updates CSS custom properties for viewport height and safe area insets. The margin styling is moved from individual buttons to their container elements for more consistent spacing across mobile devices.
Changes:
- Added a new viewport utility (
viewport.ts) that calculates and updates viewport height and safe-area-inset-bottom values dynamically - Moved bottom margin from buttons to parent containers in
StepLayoutandTermStepcomponents - Added fallback values to CSS safe-area-inset variables for better browser compatibility
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils/ts/viewport.ts | New utility to dynamically calculate viewport dimensions and safe area insets |
| src/pages/Auth/SignUp/components/StepLayout.tsx | Moved margin-bottom styling from button to container div |
| src/pages/Auth/SignUp/TermStep.tsx | Moved margin-bottom styling from button to container div and removed mb-8 class |
| src/main.tsx | Initialize viewport utility on application startup |
| src/index.css | Added fallback values (0px) to safe-area-inset CSS variables |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/utils/ts/viewport.ts
Outdated
| const el = document.createElement('div'); | ||
| el.style.cssText = 'position:fixed;bottom:0;padding-bottom:env(safe-area-inset-bottom)'; | ||
| document.body.appendChild(el); | ||
| const sab = getComputedStyle(el).paddingBottom; | ||
| document.body.removeChild(el); | ||
| document.documentElement.style.setProperty('--sab', sab); |
There was a problem hiding this comment.
Creating and destroying a DOM element on every viewport event (resize, scroll, focus, etc.) can cause performance issues, especially on mobile devices where these events fire frequently. Consider calculating the safe-area-inset-bottom value once on initialization or caching the result, rather than recreating the element every time setVars is called.
| installViewportVars(); | ||
|
|
There was a problem hiding this comment.
The cleanup function returned by installViewportVars is never called in main.tsx, which means event listeners will never be removed. This could lead to memory leaks in scenarios where the application needs to clean up (though less common in single-page applications). Consider either using the cleanup function or documenting that cleanup is intentionally not performed for the application's lifetime.
| installViewportVars(); | |
| const cleanupViewportVars = installViewportVars(); | |
| window.addEventListener('beforeunload', cleanupViewportVars); |
No description provided.