From 681a859d11d931ead8c9ad04a8099478247d2b17 Mon Sep 17 00:00:00 2001
From: sohee <soheek@fairsquarelab.com>
Date: Mon, 6 Jan 2025 19:51:18 +0900
Subject: [PATCH] =?UTF-8?q?fix(ui)=20Select=20Menu=20=EB=A0=8C=EB=8D=94?=
 =?UTF-8?q?=EB=A7=81=20=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/few-goats-give.md   |  5 +++++
 packages/ui/Input/Select.tsx   | 17 ++++++++++++++---
 packages/ui/Input/style.css.ts | 16 +++++++++++++---
 3 files changed, 32 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/few-goats-give.md

diff --git a/.changeset/few-goats-give.md b/.changeset/few-goats-give.md
new file mode 100644
index 0000000..da88bb2
--- /dev/null
+++ 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
index ac15e25..7fbcfc5 100644
--- 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
index 2c4b7c5..cf38cb0 100644
--- 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,