From f16c80e9cc156e674f835a5f0f2be84022dcbdcb Mon Sep 17 00:00:00 2001
From: suwonthugger <127329855+suwonthugger@users.noreply.github.com>
Date: Thu, 31 Oct 2024 21:01:10 +0900
Subject: [PATCH] =?UTF-8?q?feat(Select):=20=EC=BB=A4=EC=8A=A4=ED=85=80=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A3=BC=EC=9E=85=ED=95=A0=20?=
 =?UTF-8?q?=EC=88=98=20=EC=9E=88=EB=8F=84=EB=A1=9D=20className=EC=9D=84=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=ED=95=98=EA=B3=A0=20Menu=EC=97=90=20zindex?=
 =?UTF-8?q?=20=EC=84=A4=EC=A0=95=ED=95=A9=EB=8B=88=EB=8B=A4.=20(#186)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(Select): 기본 제공되는 컴포넌트에 className 주입할 수 있게 변경 및 Menu에 zindex 추가 (#185(

* cs

---------

Co-authored-by: HyeongKyeom Kim <97586683+Brokyeom@users.noreply.github.com>
---
 .changeset/cuddly-peaches-shake.md |  5 +++++
 apps/docs/src/App.tsx              | 31 +++++++++++++++++++++++++++++-
 packages/ui/Input/Select.tsx       | 16 ++++++++-------
 packages/ui/Input/style.css.ts     |  1 +
 4 files changed, 45 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/cuddly-peaches-shake.md

diff --git a/.changeset/cuddly-peaches-shake.md b/.changeset/cuddly-peaches-shake.md
new file mode 100644
index 0000000..a67feb8
--- /dev/null
+++ 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
index 8054a7d..bdafc9d 100644
--- 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
index 8cb7d46..1e964b6 100644
--- 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,10 +171,11 @@ 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) {
@@ -182,7 +183,7 @@ function SelectMenu({ children }: SelectMenuProps) {
   }
 
   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
index 2d8cef1..0304537 100644
--- 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,