From 4b5c018a617e9a66a7ad33851121598693d8d074 Mon Sep 17 00:00:00 2001
From: cje <chej098t@gmail.com>
Date: Fri, 16 Feb 2024 18:17:11 +0900
Subject: [PATCH 1/4] =?UTF-8?q?refactor(usePosition):=20triggerRef=20?=
 =?UTF-8?q?=EC=9A=94=EC=86=8C=20=EA=B8=B0=EC=A4=80=EC=9C=BC=EB=A1=9C=20tar?=
 =?UTF-8?q?getRef=20=EC=9C=84=EC=B9=98=EA=B0=92=20=EA=B3=84=EC=82=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .storybook/preview-body.html |  2 --
 src/hooks/usePosition.ts     | 22 ++++++++--------------
 2 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
index 57e7030b..bd3b82dc 100644
--- a/.storybook/preview-body.html
+++ b/.storybook/preview-body.html
@@ -1,4 +1,2 @@
 <div id="modal-root" />
 <div id="toast-root" />
-<div id="tooltip-root" />
-<div id="dropdown-root" />
diff --git a/src/hooks/usePosition.ts b/src/hooks/usePosition.ts
index 67d96f85..c09a5b23 100644
--- a/src/hooks/usePosition.ts
+++ b/src/hooks/usePosition.ts
@@ -25,6 +25,7 @@ const usePosition = <
   const ref = useRef<T>(null);
   const triggerRef = defaultTriggerRef || ref;
   const targetRef = useRef<U>(null);
+
   const [position, setPosition] = useState(POSITION);
 
   useEffect(() => {
@@ -32,23 +33,16 @@ const usePosition = <
       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 },

From a023b36fa4bbe6ef19e3d6f83bac63159ef6da82 Mon Sep 17 00:00:00 2001
From: cje <chej098t@gmail.com>
Date: Fri, 16 Feb 2024 18:22:53 +0900
Subject: [PATCH 2/4] =?UTF-8?q?fix(Dropdown):=20viewport=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EB=B0=B0=EC=B9=98?=
 =?UTF-8?q?=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dropdown/components/DropdownList.tsx      | 28 ++++++++-----------
 src/components/Dropdown/index.tsx             |  9 ++----
 src/components/Dropdown/style.css.ts          |  3 +-
 .../Layout/components/ProfileButton.tsx       |  1 -
 4 files changed, 14 insertions(+), 27 deletions(-)

diff --git a/src/components/Dropdown/components/DropdownList.tsx b/src/components/Dropdown/components/DropdownList.tsx
index 24311c7d..f231e89c 100644
--- a/src/components/Dropdown/components/DropdownList.tsx
+++ b/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>
       )}
     </>
   );
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
index 29a30c56..6a5244ef 100644
--- a/src/components/Dropdown/index.tsx
+++ b/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,
       }}
diff --git a/src/components/Dropdown/style.css.ts b/src/components/Dropdown/style.css.ts
index 4127e315..b4a46f42 100644
--- a/src/components/Dropdown/style.css.ts
+++ b/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',
diff --git a/src/components/Layout/components/ProfileButton.tsx b/src/components/Layout/components/ProfileButton.tsx
index 6efa0487..870336c7 100644
--- a/src/components/Layout/components/ProfileButton.tsx
+++ b/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} />

From 4d3165581fd2d26190f43898624fd12611865aff Mon Sep 17 00:00:00 2001
From: cje <chej098t@gmail.com>
Date: Fri, 16 Feb 2024 18:24:20 +0900
Subject: [PATCH 3/4] =?UTF-8?q?refactor(Tooltip):=20portal=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0=20=EB=B0=8F=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Tooltip/components/TooltipContent.tsx     | 35 ++++++++-----------
 src/components/Tooltip/index.tsx              |  5 ++-
 src/components/Tooltip/style.css.ts           |  4 +++
 3 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/components/Tooltip/components/TooltipContent.tsx b/src/components/Tooltip/components/TooltipContent.tsx
index 4a9547c1..8594b95d 100644
--- a/src/components/Tooltip/components/TooltipContent.tsx
+++ b/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>
       )}
     </>
   );
diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
index 12353b11..1d9d2662 100644
--- a/src/components/Tooltip/index.tsx
+++ b/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>
   );
 };
diff --git a/src/components/Tooltip/style.css.ts b/src/components/Tooltip/style.css.ts
index a727dfe5..91185107 100644
--- a/src/components/Tooltip/style.css.ts
+++ b/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',

From 400928ca6a52e09da7549c2283a9eb2c25affa0c Mon Sep 17 00:00:00 2001
From: cje <chej098t@gmail.com>
Date: Fri, 16 Feb 2024 18:25:10 +0900
Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20=EC=82=AC=EC=9A=A9=ED=95=98?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20portal=20id=20=EC=83=81?=
 =?UTF-8?q?=EC=88=98=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/portal.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/constants/portal.ts b/src/constants/portal.ts
index cfccd0c4..16280c8a 100644
--- a/src/constants/portal.ts
+++ b/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;