Closed 0chil closed 1 month ago
0chil
commented
1 month ago @nijuy
악,,, 예리한 발견 감사합니다
일단은 임시방편.. 레이아웃 재구성을 고민해봐야할 것 같기도 합니다.
랭킹 페이지처럼 화면 높이가 100vh를 넘어갈 때마다 BottomNav 높이만큼의 여백이 필요할 거 같은데
뭔가 당장 딱. 좋은 방법이 안 떠오르네용...
그러게요.. 일단 머지는 하지만 찝찝합니다ㅠㅠ
Outlet을 감싸는 div를 하나 만들고, height: calc(100vh - 4rem);
하는 방법은 어떨까요?
사실 가능은 한데
BottomNav 부분의 배경 색이 따로노는 문제가 있습니다
요런 식으로 말이죵(흰색 틈이 데스크탑에서는 엄청 큽니다)
좋은 아이디어 있을까요?
nijuy
commented
1 month ago 너무 오래 걸렸지만 BottomNav와 화면 사이의 관계를 아래 정도로 정리해봤는데요!
BottomNav와 화면이 겹쳐야 하는 경우 = BottomNav가 위치하는 영역에 배경 색이 존재하는 경우
position: fixed 로 구현 가능 | Wave가 들어가는 화면 | 또는 유저 페이지 |
|---|---|
BottomNav와 화면이 겹치지 말아야 하는 경우 = BottomNav가 위치하는 영역에 콘텐츠가 존재하는 경우
position: sticky 로 구현 가능position: fixed && BottomNav 높이만큼 하단 여백 주기 (⬅️현재 적용한 방식) | 랭킹 화면 | 유저 페이지 |
|---|---|
| 유저 페이지도 여기 해당할 수 있는 케이스지만! 현재는 padding-bottom이 4rem 이상이라 문제 X |
두 케이스로 딱딱 나뉘는 게 아니라 모두 해당할 수도 있어서 어렵네용......... (유저 페이지의 경우 하단 영역에 배경 색도 있고, 콘텐츠도 추가될 가능성이 있음)
Outlet을 감싸는 div를 하나 만들고, height: calc(100vh - 4rem); 하는 방법은 어떨까요?
GameLayout 내 페이지에 일괄 적용이 가능하다는 점에서 아아주 솔깃했는데, 배경 색이 따로 노는 부분이 계속 신경 쓰일 거 같더라고요 🤯
(아니면 이 방법을 택하되, BottomNav의 border-radius를 삭제해서 따로 노는 부분이 안 생기게 하는 것도 괜찮을 거 같아요!
확실히 둥근 모서리가 스낵게임의 분위기에 잘 어울리지만... 삭제한다고 해서 이질감이 크지 않을 거 같기 때문에.......)
💻 개요
📋 변경 및 추가 사항
BottomNav의 position을 fixed로 복구하고, 랭킹 페이지 하단에 BottomNav 높이만큼(
mb-16,4rem) 마진을 주었습니다.💬 To. 리뷰어
일단은 임시방편.. 레이아웃 재구성을 고민해봐야할 것 같기도 합니다.