feat: popover가 뷰포트 밖으로 나가면 반대 방향으로 이동한다

packages/vibrant-components/src/lib/Popover/Popover.tsx

@@ -1,8 +1,8 @@
 import { cloneElement, useCallback, useEffect, useRef, useState } from 'react';
-import { Box, useCurrentTheme, usePopover, useResponsiveValue } from '@vibrant-ui/core';
+import { Box, getWindowDimensions, useCurrentTheme, usePopover, useResponsiveValue } from '@vibrant-ui/core';
 import { Icon } from '@vibrant-ui/icons';
 import { Transition } from '@vibrant-ui/motion';
-import { isDefined, useCallbackRef } from '@vibrant-ui/utils';
+import { getElementRect, isDefined, useCallbackRef } from '@vibrant-ui/utils';
 import type { Position } from '@vibrant-ui/utils';
 import { Body } from '../Body';
 import { HStack } from '../HStack';
@@ -37,6 +37,7 @@ export const Popover = ({
     theme: { zIndex: themeZIndex },
   } = useCurrentTheme();
   const { getResponsiveValue } = useResponsiveValue();
+  const [positionValue, setPositionValue] = useState<Position>(position);
   const [popoverPosition, setPopoverPosition] = useState({ x: 0, y: 0 });
   const [arrowPosition, setArrowPosition] = useState({
     left: 0,
@@ -50,20 +51,19 @@ export const Popover = ({
   const handleOpen = useCallbackRef(onOpen);
   const handleClose = useCallbackRef(onClose);
 
+  const { width: windowWidth, height: windowHeight } = getWindowDimensions();
   const arrowHeight = Math.sqrt(ARROW_TRIANGLE_SIZE * ARROW_TRIANGLE_SIZE * 2) / 2;
 
-  const popoverWidth = popoverRef?.current?.offsetWidth ?? 0;
-  const popoverHeight = popoverRef?.current?.offsetHeight ?? 0;
-  const halfPopoverWidth = popoverWidth / 2;
-  const halfPopoverHeight = popoverHeight / 2;
+  const calcuratePositionValue = useCallback(
+    async (position: Position) => {
+      const { width: popoverWidth, height: popoverHeight } = await getElementRect(popoverRef.current);
+      const { width: childWidth, height: childHeight } = await getElementRect(childRef.current);
 
-  const childWidth = childRef?.current?.offsetWidth ?? 0;
-  const childHeight = childRef?.current?.offsetHeight ?? 0;
-  const halfChildWidth = childWidth / 2;
-  const halfChildHeight = childHeight / 2;
+      const halfPopoverWidth = popoverWidth / 2;
+      const halfPopoverHeight = popoverHeight / 2;
+      const halfChildWidth = childWidth / 2;
+      const halfChildHeight = childHeight / 2;
 
-  const calcuratePositionValue = useCallback(
-    (position: Position) => {
       if (position.includes('top')) {
         setArrowStyle({
           borderRightColor: backgroundColor,
@@ -236,23 +236,92 @@ export const Popover = ({
         }
       }
     },
-    [
-      arrowHeight,
-      arrowOffset,
-      backgroundColor,
-      childHeight,
-      childWidth,
-      computedOffset,
-      halfChildHeight,
-      halfChildWidth,
-      halfPopoverHeight,
-      halfPopoverWidth,
-      popoverHeight,
-      popoverWidth,
-    ]
+    [arrowHeight, arrowOffset, backgroundColor, computedOffset]
   );
 
-  useEffect(() => (isOpen ? handleOpen?.() : handleClose?.()), [isOpen, handleOpen, handleClose]);
+  const handlePopoverPositionChange = useCallback(async () => {
+    if (!popoverRef.current || !childRef.current) return;
+
+    const {
+      x: popoverX,
+      y: popoverY,
+      width: popoverWidth,
+      height: popoverHeight,
+    } = await getElementRect(popoverRef.current);
+    const { x: childX, y: childY, width: childWidth, height: childHeight } = await getElementRect(childRef.current);
+
+    if (position !== positionValue) {
+      if (position.includes('top') && childY - computedOffset - popoverHeight > 0) {
+        setPositionValue(position);
+      }
+
+      if (position.includes('bottom') && childY + childHeight + computedOffset + popoverHeight < windowHeight) {
+        setPositionValue(position);
+      }
+
+      if (position.includes('left') && childX - computedOffset - popoverWidth > 0) {
+        setPositionValue(position);
+      }
+
+      if (position.includes('right') && childX + childWidth + computedOffset + popoverWidth < windowWidth) {
+        setPositionValue(position);
+      }
+
+      return;
+    }
+
+    if (
+      positionValue.includes('top') &&
+      popoverY < 0 &&
+      childY + childHeight + computedOffset + popoverHeight < windowHeight
+    ) {
+      setPositionValue(positionValue.replace('top', 'bottom') as Position);
+    }
+
+    if (
+      positionValue.includes('bottom') &&
+      popoverY + popoverHeight >= windowHeight &&
+      childY - computedOffset - popoverHeight > 0
+    ) {
+      setPositionValue(positionValue.replace('bottom', 'top') as Position);
+    }
+
+    if (
+      positionValue.includes('left') &&
+      popoverX < 0 &&
+      childX + childWidth + computedOffset + popoverWidth < windowWidth
+    ) {
+      setPositionValue(positionValue.replace('left', 'right') as Position);
+    }
+
+    if (
+      positionValue.includes('right') &&
+      popoverX + popoverWidth >= windowWidth &&
+      childX - computedOffset - popoverWidth > 0
+    ) {
+      setPositionValue(positionValue.replace('right', 'left') as Position);
+    }
+  }, [computedOffset, position, positionValue, windowHeight, windowWidth]);
+
+  useEffect(() => {
+    handlePopoverPositionChange();
+  }, [handlePopoverPositionChange, windowWidth, windowHeight]);
+
+  useEffect(() => {
+    if (isOpen) {
+      handleOpen?.();
+
+      handlePopoverPositionChange();
+    } else handleClose?.();
+  }, [isOpen, handleOpen, handleClose, handlePopoverPositionChange]);
+
+  useEffect(() => {
+    setPositionValue(position);
+  }, [position]);
+
+  useEffect(() => {
+    calcuratePositionValue(positionValue);
+  }, [calcuratePositionValue, positionValue]);
 
   useEffect(() => {
     calcuratePositionValue(position);