Feedback for “overlay-kit 소개”

[developer-choi]

https://overlay-kit.slash.page/ko/docs/guides/introduction#%EC%98%A4%EB%B2%84%EB%A0%88%EC%9D%B4-%EC%9C%84%EC%B9%98-%EC%84%A4%EC%A0%95

오버레이는 화면에 적절한 위치에서 렌더링돼야 해요. 일반적으로 앱 루트에 렌더링하는 것이 좋아요.

OverlayProvider를 사용해 렌더링 위치를 지정할 수 있어요.

라고 안내가 되어있는데, 여기에 몇줄 더 추가해주시면 좋을거같아요.

설치방법

다른 Provider 보다 밑에 있는게 좋은 경우가 많아요.

예를들어, OverlayProvider는 Tanstack Query의 QueryClientProvider 보다 밑에 있어야 Overlay Kit로 띄우는 컴포넌트에서 Tanstack Query에 접근할 수 있어요 (useQuery() 같은거 사용)

<QueryClientProvider>
  <OverlayProvider>
    <App/>
  </OverlayProvier>
</QueryClientProvider>

같은 이유로, react-router-dom의 RouterProvider 보다 밑에 OverlayProvider 가 있어야 Overlay Kit로 띄우는 컴포넌트에서 useNavigate() 같은 hooks에 접근할 수 있어요.

<RouterProvider>
  <OverlayProvider>
    <App/>
  </OverlayProvier>
</RouterProvider>

ㅡㅡㅡ

위 문구를 다듬어서 PR 올려드려도 될까요?

[ojj1123]

저도 관련 내용 추가해두면 좋겠다는 생각이에요.
overlay-kit 을 회사 서비스 개발에 도입해보고 있는데, 동일한 경험을 했었거든요.
QueryClientProvider, RouterProvider 뿐만아니라 ThemeProvider나 국제화를 위한 IntlProvider 도 비슷한 맥락에서 OverlayProvider 가 가장 하위에 있어야 했어요.

FYI, 이런 이슈가 생기는 이유는 overlay 들이 OverlayProvider 하위의 children 아래에 렌더링이 되기 때문이구요.

overlay-kit/packages/src/context/provider/index.tsx

Lines 74 to 91 in 6a96688

	return (
	<OverlayContextProvider value={overlayState}>
	{children}
	{overlayState.overlayOrderList.map((item) => {
	const { id: currentOverlayId, componentKey, isOpen, controller: Controller } = overlayState.overlayData[item];
	return (
	<ContentOverlayController
	key={componentKey}
	isOpen={isOpen}
	controller={Controller}
	overlayId={currentOverlayId}
	overlayDispatch={overlayDispatch}
	/>
	);
	})}
	</OverlayContextProvider>
	);