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

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

@@ -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,
@@ -252,7 +253,90 @@ export const Popover = ({
     ]
   );
 
-  useEffect(() => (isOpen ? handleOpen?.() : handleClose?.()), [isOpen, handleOpen, handleClose]);
+  const handlePopoverPositionChange = useCallback(() => {
+    if (!popoverRef.current || !childRef.current) return;
+
+    const { x: popoverX, y: popoverY } = popoverRef.current.getBoundingClientRect();
+    const { x: childX, y: childY } = childRef.current.getBoundingClientRect();
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+
+    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);
+    }
+  }, [childHeight, childWidth, computedOffset, popoverHeight, popoverWidth, position, positionValue]);
+
+  useEffect(() => {
+    handlePopoverPositionChange();
+
+    window.addEventListener('resize', handlePopoverPositionChange);
+
+    return () => window.removeEventListener('resize', handlePopoverPositionChange);
+  }, [handlePopoverPositionChange]);
+
+  useEffect(() => {
+    if (isOpen) {
+      handleOpen?.();
+
+      handlePopoverPositionChange();
+    } else handleClose?.();
+  }, [isOpen, handleOpen, handleClose, handlePopoverPositionChange]);
+
+  useEffect(() => {
+    setPositionValue(position);
+  }, [position]);
+
+  useEffect(() => {
+    calcuratePositionValue(positionValue);
+  }, [calcuratePositionValue, positionValue]);
 
   useEffect(() => {
     calcuratePositionValue(position);