feat(Select): 커스텀 스타일 주입할 수 있도록 className을 추가하고 Menu에 zindex 설정합니다. (#…

…186) * feat(Select): 기본 제공되는 컴포넌트에 className 주입할 수 있게 변경 및 Menu에 zindex 추가 (#185( * cs --------- Co-authored-by: HyeongKyeom Kim <[email protected]>
sopt-makers · Oct 31, 2024 · f16c80e · f16c80e
1 parent 55fc36c
commit f16c80e
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 8 deletions.
diff --git a/.changeset/cuddly-peaches-shake.md b/.changeset/cuddly-peaches-shake.md
@@ -0,0 +1,5 @@
+---
+'@sopt-makers/ui': patch
+---
+
+select classname prop 추가
diff --git a/apps/docs/src/App.tsx b/apps/docs/src/App.tsx
@@ -4,7 +4,7 @@ import { ChangeEvent, useState } from 'react';
 
 import '@sopt-makers/ui/dist/index.css';
 
-import { FieldBox, SearchField, Test, TextArea, TextField } from '@sopt-makers/ui';
+import { FieldBox, SearchField, Test, TextArea, TextField, SelectV2 } from '@sopt-makers/ui';
 import { colors } from '@sopt-makers/colors';
 
 function App() {
@@ -46,6 +46,11 @@ function App() {
     setSearch('');
   };
 
+  const options = [
+    { label: 'Option 1', value: 'option1' },
+    { label: 'Option 2', value: 'option2' },
+  ];
+
   return (
     <>
       <Test text='Test Component' size='big' color='blue' />
@@ -88,6 +93,30 @@ function App() {
       >
         <span style={{ color: colors.white }}>여긴 본문</span>
       </FieldBox>
+      <div>
+        <SelectV2.Root
+          visibleOptions={2}
+          onChange={() => {
+            console.log('dsad');
+          }}
+          type='text'
+        >
+          <SelectV2.Trigger>
+            <SelectV2.TriggerContent placeholder='새로운 SelectV2' />
+          </SelectV2.Trigger>
+          <SelectV2.Menu>
+            {options.map((option) => (
+              <SelectV2.MenuItem
+                key={option.value}
+                option={option}
+                onClick={() => {
+                  console.log('custom logic');
+                }}
+              />
+            ))}
+          </SelectV2.Menu>
+        </SelectV2.Root>
+      </div>
     </>
   );
 }

diff --git a/packages/ui/Input/Select.tsx b/packages/ui/Input/Select.tsx
@@ -144,18 +144,18 @@ function SelectTrigger({ children }: SelectTriggerProps) {
 }
 
 interface SelectTriggerContentProps {
-  className?: string;
   placeholder?: string;
+  className?: string;
 }
 
 // Select.TriggerContent 컴포넌트: trigger의 미리 정의된 UI
-function SelectTriggerContent({ className, placeholder }: SelectTriggerContentProps) {
+function SelectTriggerContent({ placeholder, className }: SelectTriggerContentProps) {
   const { open, selected } = useSelectContext();
 
   const selectedLabel = selected ? selected.label : placeholder;
 
   return (
-    <div className={`${S.select} ${open ? S.focus : ''} ${className ? className : ''}`}>
+    <div className={`${S.select} ${open ? S.focus : ''} ${className}`}>
       <p className={!selected ? S.selectPlaceholder : ''}>{selectedLabel}</p>
       <IconChevronDown
         style={{
@@ -171,18 +171,19 @@ function SelectTriggerContent({ className, placeholder }: SelectTriggerContentPr
 
 interface SelectMenuProps {
   children: React.ReactNode;
+  className?: string;
 }
 
 // SelectMenu 컴포넌트: 옵션 목록을 렌더링
-function SelectMenu({ children }: SelectMenuProps) {
+function SelectMenu({ children, className }: SelectMenuProps) {
   const { open, optionsRef, calcMaxHeight } = useSelectContext();
 
   if (!open) {
     return null;
   }
 
   return (
-    <ul className={S.optionList} ref={optionsRef} style={{ maxHeight: calcMaxHeight() }}>
+    <ul className={`${S.optionList} ${className}`} ref={optionsRef} style={{ maxHeight: calcMaxHeight() }}>
       {children}
     </ul>
   );
@@ -191,10 +192,11 @@ function SelectMenu({ children }: SelectMenuProps) {
 interface SelectMenuItemProps<T> {
   option: Option<T>;
   onClick?: () => void;
+  className?: string;
 }
 
 // SelectMenuItem 컴포넌트: 옵션 목록 하나의 UI
-function SelectMenuItem<T>({ option, onClick }: SelectMenuItemProps<T>) {
+function SelectMenuItem<T>({ option, onClick, className }: SelectMenuItemProps<T>) {
   const { open, type, handleOptionClick } = useSelectContext();
 
   const handleClick = () => {
@@ -211,7 +213,7 @@ function SelectMenuItem<T>({ option, onClick }: SelectMenuItemProps<T>) {
 
   return (
     <li>
-      <button className={S.option} onClick={handleClick} type='button'>
+      <button className={`${S.option} ${className}`} onClick={handleClick} type='button'>
         {type === 'textIcon' && option.icon}
         {(type === 'userList' || type === 'userListDesc') &&
           (option.profileUrl ? (

diff --git a/packages/ui/Input/style.css.ts b/packages/ui/Input/style.css.ts
@@ -193,6 +193,7 @@ export const optionList = style({
   'transformOrigin': 'top',
   'animation': `${fadeIn} 0.5s forwards`,
   'overflowX': 'hidden',
+  'zIndex': 24,
 
   '::-webkit-scrollbar-thumb': {
     background: theme.colors.gray500,