From 16d8a8b96a54a14e7045984de3ccb8d876f5d94d Mon Sep 17 00:00:00 2001
From: sohee <soheek@fairsquarelab.com>
Date: Thu, 28 Nov 2024 21:00:59 +0900
Subject: [PATCH] =?UTF-8?q?fix(ui):=20Select=EC=97=90=20createPortal=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Input/Select.tsx   | 17 ++++++++++++-----
 packages/ui/Input/style.css.ts | 14 +++++++++++---
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/ui/Input/Select.tsx b/packages/ui/Input/Select.tsx
index 1e964b6..293b576 100644
--- a/packages/ui/Input/Select.tsx
+++ b/packages/ui/Input/Select.tsx
@@ -1,5 +1,6 @@
 import { useState, useRef, useEffect, useCallback, createContext, useContext } from 'react';
 import { IconChevronDown, IconUser } from '@sopt-makers/icons';
+import { createPortal } from 'react-dom';
 import * as S from './style.css';
 
 export interface Option<T> {
@@ -176,16 +177,22 @@ interface SelectMenuProps {
 
 // SelectMenu 컴포넌트: 옵션 목록을 렌더링
 function SelectMenu({ children, className }: SelectMenuProps) {
-  const { open, optionsRef, calcMaxHeight } = useSelectContext();
+  const { open, optionsRef, calcMaxHeight, buttonRef } = useSelectContext();
 
-  if (!open) {
+  const buttonRect = buttonRef.current?.getBoundingClientRect();
+
+  if (!open || !buttonRect) {
     return null;
   }
 
-  return (
-    <ul className={`${S.optionList} ${className}`} ref={optionsRef} style={{ maxHeight: calcMaxHeight() }}>
+  const top = `${buttonRect.top + buttonRect.height}px`;
+  const left = `${buttonRect.left}px`;
+
+  return createPortal(
+    <ul className={`${S.optionList} ${className}`} ref={optionsRef} style={{ top, left, maxHeight: calcMaxHeight() }}>
       {children}
-    </ul>
+    </ul>,
+    document.body,
   );
 }
 
diff --git a/packages/ui/Input/style.css.ts b/packages/ui/Input/style.css.ts
index 0304537..2c4b7c5 100644
--- a/packages/ui/Input/style.css.ts
+++ b/packages/ui/Input/style.css.ts
@@ -189,18 +189,26 @@ export const optionList = style({
   'borderRadius': '13px',
   'minWidth': '160px',
   'background': theme.colors.gray800,
-  'overflow': 'scroll',
+  'overflowY': 'auto',
   'transformOrigin': 'top',
   'animation': `${fadeIn} 0.5s forwards`,
   'overflowX': 'hidden',
   'zIndex': 24,
 
+  '::-webkit-scrollbar': {
+    width: '14px',
+  },
+  '::-webkit-scrollbar-track': {
+    background: 'transparent',
+  },
   '::-webkit-scrollbar-thumb': {
     background: theme.colors.gray500,
     backgroundClip: 'padding-box',
-    border: '4px solid transparent',
+    border: '2px solid transparent',
+    borderTopWidth: '3px',
+    borderBottomWidth: '3px',
     boxShadow: `inset -3px 0 0 ${theme.colors.gray800}`,
-    borderRadius: '8px',
+    borderRadius: '16px',
   },
 });