fix(ui) Select Menu 렌더링 위치 수정

sopt-makers · Jan 6, 2025 · 681a859 · 681a859
1 parent c70950e
commit 681a859
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git a/.changeset/few-goats-give.md b/.changeset/few-goats-give.md
@@ -0,0 +1,5 @@
+---
+'@sopt-makers/ui': patch
+---
+
+fix(ui) Select Menu 렌더링 위치 수정
diff --git a/packages/ui/Input/Select.tsx b/packages/ui/Input/Select.tsx
@@ -193,11 +193,22 @@ function SelectMenu({ children, className }: SelectMenuProps) {
     return null;
   }
 
-  const top = `${buttonRect.top + buttonRect.height}px`;
-  const left = `${buttonRect.left}px`;
+  const maxHeight = calcMaxHeight();
+
+  const scrollTop = window.scrollY || document.documentElement.scrollTop;
+  const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+  const spaceBelow = window.innerHeight - buttonRect.bottom;
+  const hasSpaceBelow = spaceBelow >= maxHeight;
+
+  const top = hasSpaceBelow
+    ? `${buttonRect.top + buttonRect.height + scrollTop}px`
+    : `${buttonRect.top + scrollTop - maxHeight}px`;
+  const left = `${buttonRect.left + scrollLeft}px`;
+
+  const animationClass = hasSpaceBelow ? S.optionListAnimation.down : S.optionListAnimation.up;
 
   return createPortal(
-    <ul className={`${S.optionList} ${className}`} ref={optionsRef} style={{ top, left, maxHeight: calcMaxHeight() }}>
+    <ul className={`${S.optionList} ${animationClass} ${className}`} ref={optionsRef} style={{ top, left, maxHeight }}>
       {children}
     </ul>,
     document.body,

diff --git a/packages/ui/Input/style.css.ts b/packages/ui/Input/style.css.ts
@@ -1,10 +1,19 @@
-import { globalStyle, style, keyframes } from '@vanilla-extract/css';
+import { globalStyle, style, keyframes, styleVariants } from '@vanilla-extract/css';
 import theme from '../theme.css';
 
-const fadeIn = keyframes({
+const fadeInDown = keyframes({
   '0%': { opacity: 0, transform: 'translateY(0)' },
   '100%': { opacity: 1, transform: 'translateY(10px)' },
 });
+const fadeInUp = keyframes({
+  '0%': { opacity: 0, transform: 'translateY(0)' },
+  '100%': { opacity: 1, transform: 'translateY(-10px)' },
+});
+
+export const optionListAnimation = styleVariants({
+  up: { animationName: fadeInUp },
+  down: { animationName: fadeInDown },
+});
 
 export const label = style({
   ...theme.fontsObject.LABEL_3_14_SB,
@@ -191,7 +200,8 @@ export const optionList = style({
   'background': theme.colors.gray800,
   'overflowY': 'auto',
   'transformOrigin': 'top',
-  'animation': `${fadeIn} 0.5s forwards`,
+  'animationDuration': '0.5s',
+  'animationFillMode': 'forwards',
   'overflowX': 'hidden',
   'zIndex': 24,