[#685] [fix] iOS PWA 환경에서의 status bar 스타일 추가

[hanyugeon]

구현 내용

• PWA환경에서 더 이상 StatusBar가 고정 색깔로 표현되지 않아요
  • 대신 body 태그가 StatusBar의 영역을 차지합니다.
  • top-safe-area 적용으로 컨탠츠가 해당 영역을 침범하지 않도록 했습니다.
• TopHeader를 리팩터링 했어요
  • position속성이 fixed로 바뀌었습니다.
  • 더 이상 text props에 의존적이지 않습니다. (text props를 제거되고 className props가 추가 되었어요.)
• useIsScrollAtTop 커스텀 훅을 작성했어요
  • isScrollAtTop 변수를 통해 스크롤이 아래로 이동하면 TopHeader의 배경이 blur 처리됩니다.

스크린샷

pr 포인트

• 리팩터링된 TopHeader 코드
• 새로운 TopHeader가 적용된 북카이브, 도서 검색, 독서 모임, 내 프로필 코드

관련 이슈

• Close [fix] iOS PWA 환경에서의 status bar 스타일 추가 #685

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dadok	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 19, 2024 6:41am

[github-actions]

🚀 Storybook: https://64aba10cd478ad51307a8997-lqkiupszyb.chromatic.com/

[github-actions]

⚡️ Lighthouse Average Scores Across Reports:

Category	Score
🔴 performance	66
🟢 accessibility	91
🟢 best practices	98
🟢 seo	100
🟢 pwa	100

⚡️ Average Details Across All Reports:

Category	Score
🟢 first contentful paint	0.9s
🔴 largest contentful paint	13.0s
🔴 interactive	8.3s
🟢 total blocking time	226.4ms
🟢 cumulative layout shift	0.0

[gxxrxn]

디자인 너무 좋아요~~!! 수고 많으셨습니다!!

[gxxrxn]

comment;

요건 어떤 속성인가요?!

[hanyugeon]

@gxxrxn

iOS 모바일 환경에서 상단 노치 부분까지 확장해서 전체화면으로 보여주도록 하는 옵션이에요!
해당 옵션을 true로 하여 BottomSheet 혹은 Menu 가 동작할때
나타나는 Dim 영역이 상단 노치 부분까지 포함 되도록 했습니다!