[AUD-82] AppPortal 유틸 공용 컴포넌트 제작 (#48)

* ✨ AppPortal 공용 유틸 컴포넌트 제작

* ✨ AppPortal Z-Index 상수 추가

* ✨ AppPortal Provider 적용

src/components/app-portal/AppPortal.css.ts

@@ -0,0 +1,12 @@
+import { style } from "@vanilla-extract/css";
+import { sprinkles } from "@/styles/sprinkle.css";
+
+export const Wrapper = style([
+    sprinkles({ zIndex: 'appPortal' }),
+    {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+
+    width: '100%',
+}])

src/components/app-portal/AppPortal.tsx

@@ -0,0 +1,45 @@
+import {
+    type PropsWithChildren,
+    createContext,
+    useContext,
+    useState,
+} from 'react';
+
+import { createPortal } from 'react-dom';
+
+import * as S from './AppPortal.css';
+
+interface PropsType extends PropsWithChildren {
+    portalName?: string | undefined;
+}
+
+const PortalContext = createContext<HTMLDivElement | null>(null);
+
+const PortalProvider = ({ children }: PropsType) => {
+    const [portalContainer, setPortalContainer] =
+        useState<HTMLDivElement | null>(null);
+
+    return (
+        <PortalContext.Provider value={portalContainer}>
+            <div
+                className={S.Wrapper}
+                id="app-portal"
+                ref={(element) => {
+                    if (element && !portalContainer)
+                        setPortalContainer(element);
+                }}
+            />
+            {children}
+        </PortalContext.Provider>
+    );
+};
+
+const PortalWrapper = ({ children }: PropsType) => {
+    const portalContainer = useContext(PortalContext);
+    return portalContainer ? createPortal(children, portalContainer) : null;
+};
+
+export const AppPortal = {
+    Provider: PortalProvider,
+    Wrapper: PortalWrapper,
+};

src/components/app-portal/index.ts

@@ -0,0 +1,3 @@
+import { AppPortal } from "./AppPortal";
+
+export default AppPortal;

src/routes/index.tsx

@@ -2,6 +2,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { Outlet, createBrowserRouter } from 'react-router-dom';
 
+import AppPortal from '@/components/app-portal';
 import { CoursePage, coursePageLoader } from '@/pages/course';
 import LoginPage from '@/pages/login';
 import MainPage from '@/pages/main';
@@ -18,15 +19,17 @@ const queryClient = new QueryClient({
 
 const InitializedRouter = () => (
     <QueryClientProvider client={queryClient}>
-        <TmapProvider
-            width="100%"
-            height="calc(100vh - 64px)"
-            lat={37.5652045}
-            lng={126.98702028}
-        >
-            <ReactQueryDevtools />
-            <Outlet />
-        </TmapProvider>
+        <AppPortal.Provider>
+            <TmapProvider
+                width="100%"
+                height="calc(100vh - 64px)"
+                lat={37.5652045}
+                lng={126.98702028}
+            >
+                <ReactQueryDevtools />
+                <Outlet />
+            </TmapProvider>
+        </AppPortal.Provider>
     </QueryClientProvider>
 );
 

src/styles/foundation.ts

@@ -1,4 +1,5 @@
 export const Z_INDEX = {
+    appPortal: 9999,
     globalNavigation: 999,
     mapFloatMenu: 9,
     pathPopover: 10,