Merge pull request #218 from sopt-makers/fix/select

fix(ui): Select에 createPortal 적용
sopt-makers · Nov 28, 2024 · d31c635 · d31c635
2 parents 9483c92 + 16d8a8b
commit d31c635
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git 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
@@ -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',
   },
 });