@tipp/ui 1.6.22 → 1.6.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "1.6.22",
+  "version": "1.6.24",
   "private": false,
   "type": "module",
   "exports": {
@@ -36,7 +36,7 @@
     "react": "^18.3.1",
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.3.1",
-    "react-toastify": "^10.0.5"
+    "react-toastify": "^11.0.5"
   },
   "devDependencies": {
     "@types/echarts": "^4.9.22",
@@ -59,8 +59,8 @@
     "ts-node": "^10.9.2",
     "tsup": "^8.0.2",
     "typescript": "^5.3.3",
-    "@tipp/typescript-config": "1.0.1",
-    "@tipp/eslint-config": "1.0.1"
+    "@tipp/eslint-config": "1.0.1",
+    "@tipp/typescript-config": "1.0.1"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:css",

package/src/app/platform/contents-card.tsx

@@ -47,6 +47,7 @@ export const ContentsCard = forwardRef<HTMLDivElement, ContentsCardProps>(
           width: '100%',
           display: 'grid',
           cursor: 'pointer',
+          maxHeight: '450px',
         }}
       >
         {/* 섬네일 */}

package/src/atoms/dialog.tsx

@@ -1,7 +1,7 @@
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { Cross1Icon } from '@radix-ui/react-icons';
 import { Flex, Theme } from '@radix-ui/themes';
-import { ToastContainer } from './toast';
+import { usePortalContainer } from '@/theme/portal-provider';
 import { Heading } from './heading';
 import { IconButton } from './icon-button';
 
@@ -39,9 +39,10 @@ function Content(props: ContentProps): React.ReactElement {
     className,
     ...rest
   } = props;
+  const { dialogContainerRef } = usePortalContainer();
 
   return (
-    <RadixDialog.Portal>
+    <RadixDialog.Portal container={dialogContainerRef.current}>
       <Theme asChild>
         <RadixDialog.Overlay className="DialogOverlay">
           <RadixDialog.Content
@@ -83,7 +84,6 @@ function Content(props: ContentProps): React.ReactElement {
               </Flex>
             ) : null}
           </RadixDialog.Content>
-          <ToastContainer />
         </RadixDialog.Overlay>
       </Theme>
     </RadixDialog.Portal>

package/src/atoms/drawer.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
 import { Grid, Theme } from '@radix-ui/themes';
+import { usePortalContainer } from '@/theme/portal-provider';
 import { ClosePanelArrowIcon } from '../icons/close-panel-arrow';
 import { Flex } from './flex';
 import { Separator } from './separator';
 import { IconButton } from './icon-button';
-import { ToastContainer } from './toast';
 
 export function Root(props: Dialog.DialogProps): React.ReactNode {
   return <Dialog.Root {...props} />;
@@ -25,20 +25,15 @@ const preventDefault: Dialog.DialogContentProps['onPointerDownOutside'] = (
 export function Content(props: ContentProps): React.ReactElement {
   const { position = 'right', className, children, ...rest } = props;
 
-  const containerRef = useRef<Element | null>(null);
-  useEffect(() => {
-    containerRef.current = document.getElementsByClassName('radix-themes')[0];
-  }, []);
-
   const mobileHeaderSize = 48;
   const desktopHeaderSize = 64;
   const separatorSize = 1;
+  const { drawerContainerRef } = usePortalContainer();
 
   return (
-    <Dialog.Portal container={containerRef.current}>
+    <Dialog.Portal container={drawerContainerRef.current}>
       <Theme>
         <Dialog.Overlay className="DrawerOverlay" />
-        <ToastContainer />
         <Dialog.Content
           className={`DrawerContent ${position} ${className || ''}`}
           onPointerDownOutside={preventDefault}

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from './atoms';
 export * from './molecules';
 export * from './theme/theme-provider';
+export * from './theme/portal-provider';
 export * from './theme/use-theme';
 export * from './ui-props';
 export * from './icon';

package/src/theme/portal-provider.tsx

@@ -0,0 +1,38 @@
+import React, { createContext, useContext, useRef } from 'react';
+
+interface PortalProviderProps {
+  children: React.ReactElement;
+}
+
+interface PortalState {
+  dialogContainerRef: React.RefObject<HTMLDivElement>;
+  drawerContainerRef: React.RefObject<HTMLDivElement>;
+}
+
+const PortalContext = createContext<PortalState>(
+  null as unknown as PortalState
+);
+
+export function PortalProvider({ children }: PortalProviderProps): JSX.Element {
+  const dialogContainerRef = useRef<HTMLDivElement | null>(null);
+  const drawerContainerRef = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <PortalContext.Provider value={{ dialogContainerRef, drawerContainerRef }}>
+      {children}
+      <div className="drawer-portal-container" ref={drawerContainerRef} />
+      <div className="dialog-portal-container" ref={dialogContainerRef} />
+    </PortalContext.Provider>
+  );
+}
+
+export const usePortalContainer = (): PortalState => {
+  try {
+    const state = useContext(PortalContext);
+    return state;
+  } catch (error) {
+    throw new Error('PortalProvider not found');
+  }
+};
+
+export default PortalProvider;

package/src/theme/theme-provider.tsx

@@ -4,7 +4,7 @@ import { Theme } from '@radix-ui/themes';
 type ThemeProps = React.ComponentProps<typeof Theme>;
 
 export interface ThemeProviderProps extends ThemeProps {
-  children: React.ReactNode;
+  children: React.ReactElement;
 }
 
 export function ThemeProvider(props: ThemeProviderProps): React.ReactElement {