[Fix/BAR-235] Dropdown 컴포넌트 위치 오류 해결

.storybook/preview-body.html

@@ -1,4 +1,2 @@
 <div id="modal-root" />
 <div id="toast-root" />
-<div id="tooltip-root" />
-<div id="dropdown-root" />

src/components/Dropdown/components/DropdownList.tsx

@@ -1,31 +1,25 @@
 import { type PropsWithChildren } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 
-import Portal from '@components/Portal';
-import { PORTAL_ID } from '@constants/portal';
-
 import { useDropdownContext } from '..';
 import * as styles from '../style.css';
 
 const DropdownList = ({ children }: PropsWithChildren) => {
-  const { size, targetRef, position, fixed, isOpen } = useDropdownContext();
+  const { isOpen, targetRef, size, position } = useDropdownContext();
 
   return (
     <>
       {isOpen && (
-        <Portal id={PORTAL_ID['DROPDOWN']}>
-          <ul
-            ref={targetRef}
-            className={styles.menuList({ size })}
-            style={assignInlineVars({
-              [styles.position]: fixed ? 'fixed' : 'absolute',
-              [styles.top]: `${position.top}px`,
-              [styles.left]: `${position.left}px`,
-            })}
-          >
-            {children}
-          </ul>
-        </Portal>
+        <ul
+          ref={targetRef}
+          className={styles.menuList({ size })}
+          style={assignInlineVars({
+            [styles.top]: `${position.top}px`,
+            [styles.left]: `${position.left}px`,
+          })}
+        >
+          {children}
+        </ul>
       )}
     </>
   );

src/components/Dropdown/index.tsx

@@ -28,8 +28,6 @@ interface DropdownContextProps {
   position: typeof INIT_POSITION;
   /** dropdown menulist 요소의 ref 객체  */
   targetRef: RefObject<HTMLUListElement>;
-  /** dropdown menulist css position fixed 적용 여부 */
-  fixed?: boolean;
   /** dropdown menulist 열림, 닫힘 상태 */
   isOpen: boolean;
   /** dropdown trigger toggle 함수 */
@@ -38,7 +36,7 @@ interface DropdownContextProps {
 
 interface DropdownRootProps
   extends HTMLAttributes<HTMLDivElement>,
-    Pick<DropdownContextProps, 'size' | 'placement' | 'fixed'> {
+    Pick<DropdownContextProps, 'size' | 'placement'> {
   className?: HTMLAttributes<HTMLDivElement>['className'];
 }
 
@@ -48,19 +46,17 @@ const DropdownRoot = ({
   children,
   size = 'small',
   placement = 'bottom-left',
-  fixed = false,
   ...props
 }: PropsWithChildren<DropdownRootProps>) => {
   const { isOpen, onClose, onToggle } = useDisclosure();
   const dropdownRef = useClickAway({
     onClickAway: onClose,
-  });
+  })!;
   const { targetRef, position } = usePosition<HTMLDivElement, HTMLUListElement>(
     {
       defaultTriggerRef: dropdownRef,
       isOpen,
       placement,
-      fixed,
     },
   );
 
@@ -71,7 +67,6 @@ const DropdownRoot = ({
         placement,
         position,
         targetRef,
-        fixed,
         isOpen,
         onToggle,
       }}

src/components/Dropdown/style.css.ts

@@ -14,13 +14,12 @@ export const trigger = style({
   width: 'fit-content',
 });
 
-export const position = createVar();
 export const top = createVar();
 export const left = createVar();
 
 export const menuList = recipe({
   base: {
-    position,
+    position: 'absolute',
     top,
     left,
     marginTop: '4px',

src/components/Layout/components/ProfileButton.tsx

@@ -26,7 +26,6 @@ const ProfileButton = () => {
       className={styles.dialogWrapper}
       size="medium"
       placement="bottom-right"
-      fixed
     >
       <Dropdown.Trigger className={styles.profile}>
         <Icon icon="profileHeader" width={28} height={28} />

src/components/Tooltip/components/TooltipContent.tsx

@@ -2,9 +2,6 @@ import type { PropsWithChildren } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 
-import { PORTAL_ID } from '@constants/portal';
-
-import Portal from '../../Portal';
 import { useTooltipContext } from '..';
 import * as styles from '../style.css';
 
@@ -28,23 +25,21 @@ const TooltipContent = ({ children }: PropsWithChildren) => {
   return (
     <>
       {isOpen && (
-        <Portal id={PORTAL_ID['TOOLTIP']}>
-          <div
-            ref={targetRef}
-            className={clsx(
-              styles.content({ hasArrow }),
-              hasArrow && placement && ARROW_STYLE[placement],
-              isTopMinimalTooltip && MARGIN_STYLE.MINIMAL,
-              isTopHighlightTooltip && MARGIN_STYLE.HIGHLIGHT,
-            )}
-            style={assignInlineVars({
-              [styles.top]: `${position.top}px`,
-              [styles.left]: `${position.left}px`,
-            })}
-          >
-            {children}
-          </div>
-        </Portal>
+        <div
+          ref={targetRef}
+          className={clsx(
+            styles.content({ hasArrow }),
+            hasArrow && placement && ARROW_STYLE[placement],
+            isTopMinimalTooltip && MARGIN_STYLE.MINIMAL,
+            isTopHighlightTooltip && MARGIN_STYLE.HIGHLIGHT,
+          )}
+          style={assignInlineVars({
+            [styles.top]: `${position.top}px`,
+            [styles.left]: `${position.left}px`,
+          })}
+        >
+          {children}
+        </div>
       )}
     </>
   );

src/components/Tooltip/index.tsx

@@ -6,6 +6,7 @@ import usePosition from '@hooks/usePosition';
 
 import TooltipContent from './components/TooltipContent';
 import TooltipTrigger from './components/TooltipTrigger';
+import * as styles from './style.css';
 
 const INIT_POSITION = { top: 0, left: 0 };
 
@@ -51,7 +52,9 @@ const TooltipRoot = ({
         onClose,
       }}
     >
-      <div ref={triggerRef}>{children}</div>
+      <div ref={triggerRef} className={styles.wrapper}>
+        {children}
+      </div>
     </TooltipContext.Provider>
   );
 };

src/components/Tooltip/style.css.ts

@@ -4,6 +4,10 @@ import { recipe } from '@vanilla-extract/recipes';
 import { sprinkles } from '@styles/sprinkles.css';
 import { COLORS, Z_INDEX } from '@styles/tokens';
 
+export const wrapper = style({
+  position: 'relative',
+});
+
 export const trigger = style({
   width: 'fit-content',
   height: 'fit-content',

src/constants/portal.ts

@@ -1,6 +1,4 @@
 export const PORTAL_ID = {
   MODAL: 'modal-root',
   TOAST: 'toast-root',
-  TOOLTIP: 'tooltip-root',
-  DROPDOWN: 'dropdown-root',
 } as const;

src/hooks/usePosition.ts

@@ -25,30 +25,24 @@ const usePosition = <
   const ref = useRef<T>(null);
   const triggerRef = defaultTriggerRef || ref;
   const targetRef = useRef<U>(null);
+
   const [position, setPosition] = useState(POSITION);
 
   useEffect(() => {
     if (!triggerRef.current || !targetRef.current || !isOpen) {
       return;
     }
 
-    const {
-      x,
-      y,
-      bottom: triggerBottom,
-      width: triggerWidth,
-      height: triggerHeight,
-    } = triggerRef.current.getBoundingClientRect();
+    const { width: triggerWidth, height: triggerHeight } =
+      triggerRef.current.getBoundingClientRect();
     const { width: targetWidth } = targetRef.current.getBoundingClientRect();
 
-    const { scrollX, scrollY } = window;
-
-    const top = y + scrollY - triggerHeight;
-    const bottom = !fixed ? y + scrollY + triggerHeight : triggerBottom;
+    const top = -triggerHeight;
+    const bottom = triggerHeight;
 
-    const left = x + scrollX;
-    const center = left + triggerWidth / 2 - targetWidth / 2;
-    const right = left + triggerWidth - targetWidth;
+    const left = 0;
+    const center = triggerWidth / 2 - targetWidth / 2;
+    const right = triggerWidth - targetWidth;
 
     const CALCULATED_POSITION: Record<Placement, typeof POSITION> = {
       'top-left': { top, left },