[React] Webview safe-area (노치 영역)

ios, androd 내부에 react로 개발된 webview의 형태로 띄우려고 한다. (react native 말고..) 

 

허나 ios 같은 경우에는 특히 기기별로 화면의 버튼이 보이지 않는 경우도 있기 때문에 safe-area 를 적용하려고 했다.

 

1차 삽질

npm 혹은 yarn에서 편한 라이브러리가 있는지 검색해보았다. 

2023년 1월기준으로 두개밖에 나오지 않았다. ts를 지원하지 않았고 (index.d.ts 만들어서 사용하면 되지만..), 다운로드 수도 적고, 프로젝트를 함께 하고 있는 팀원분이 ts 지원하지 않는 라이브러리는 되도록이면 지양하자고 하셔서 다른 방법을 택해야 했다. 

 

2차 삽질 

React Native가 아닌 WKWebView 라는걸 사용해서 WKWebView 위에 우리가 만든 React 프로젝트를 띄울예정이라,

우선 배포를 하고 난 이후 배포된 WKWebView 위에서 Safe-area 를 적용해보자고 하셨다.

배포하고난 이후에 부랴부랴 찾기보단 미리 방법을 알고가고 싶어서 서치해봤는데 정보가 많이 안나왔다.

 

해결 방법

CSS 에서 제공하는 env 속성을 사용하면 safe-area 에 맞게 UI 를 조절할 수 있다. 

https://developer.mozilla.org/en-US/docs/Web/CSS/env

env() - CSS: Cascading Style Sheets | MDN

참고로 내 코드는 MUI 5를 사용했다. MUI 가 아닌 class를 통해서도 지정이 가능하다. 

import { Box, styled, Typography } from '@mui/material';
export interface IMainContentProps {}
export const MainContent: React.FC<IMainContentProps> = ({}) => {
	return (
		<SafeArea>
			<Typography variant="h1">노치 영역</Typography>
		</SafeArea>
	);
};

const SafeArea = styled(Box)(({ theme }) => ({
	height: 'constant(safe-area-inset-top)' + '10px',
	backgroundColor: 'red',

}));

 

 

 

 

여기서 그러면 React Native에서는 이 좋은걸 왜 안쓰고 라이브러리를 다들 쓰는데? 

이유는 이렇다.... 

 

편하다고 라이브러리부터 찾지말고 HTML, CSS 공식문서를 먼저 참고해야겠다고 느꼈다.