[#5] View 레이아웃 관련 설정 !#6
Merged
Merged
Conversation
- 폼펙터와 상관 없이 전체화면 보여주도록 설정하기 - position:fixed 설정을 통해 화면 스크롤 방지해서 울렁임 없애기
- 위쪽 노치, 다이내-믹 아일랜드, 펀치홀 등으로 부터 컴포넌트 구출 - 아래쪽 홈탭 같은걸로부터도 방어 가능
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR resolves issue #5 by enhancing the layout for safe areas across various pages and updating the viewport settings.
- Replaces with a new component in multiple pages.
- Introduces the AppScreenWithSafeArea component to manage safe area insets on mobile devices.
- Updates index.html to include viewport-fit=cover and applies fixed positioning to the root element.
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/pages/PostPage.tsx | Updated to use AppScreenWithSafeArea for handling safe areas. |
| src/pages/NotFoundPage.tsx | Replaced AppScreen with AppScreenWithSafeArea for layout improvements. |
| src/pages/HomePage.tsx | Swapped AppScreen with AppScreenWithSafeArea and minor UI tweaks. |
| src/common/components/AppScreenWithSafeArea.tsx | Introduced a new component wrapping AppScreen for safe-area constraints. |
| index.html | Enhanced viewport meta tag and fixed the root container styling. |
Comments suppressed due to low confidence (1)
src/common/components/AppScreenWithSafeArea.tsx:11
- Ensure that the parent (or its container) is styled with 'position: relative' to properly contain the absolutely positioned div or consider using padding to handle safe area insets.
<div
| </head> | ||
| <body> | ||
| <div id="root"></div> | ||
| <div id="root" style="position: fixed; top: 0; right: 0; bottom: 0; left: 0"></div> |
There was a problem hiding this comment.
[nitpick] Consider moving the inline styling for the root element to an external stylesheet for enhanced maintainability and consistency.
jw0202058
approved these changes
Jun 22, 2025
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
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.
❗ 연관 이슈
📌 내용
index.html변경 사항viewport-fit:cover속성을 통해 폼팩터 상관 없이 전체화면이 보여지도록 했음position:fixed설정을 통해 화면 스크롤 방지해서 울렁임 없애기 (연관 이슈 참고)AppScreenWithSafeArea컴포넌트를 만들었어요AppScreen이라는 친구를 쓰는데 얘를 확장한 컴포넌트임테스트 많이 안해봐서 100프로 확신은 불가함
☑️ 체크 사항 & 논의 사항