From 006b386677b846ee4f09aa43385eefba3fbb2836 Mon Sep 17 00:00:00 2001
From: suwonthugger <127329855+suwonthugger@users.noreply.github.com>
Date: Mon, 28 Oct 2024 02:48:05 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat(Select):=20=EA=B8=B0=EB=B3=B8=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B3=B5=EB=90=98=EB=8A=94=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=20className=20=EC=A3=BC=EC=9E=85?=
 =?UTF-8?q?=ED=95=A0=20=EC=88=98=20=EC=9E=88=EA=B2=8C=20=EB=B3=80=EA=B2=BD?=
 =?UTF-8?q?=20=EB=B0=8F=20Menu=EC=97=90=20zindex=20=EC=B6=94=EA=B0=80=20(#?=
 =?UTF-8?q?185(?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/docs/src/App.tsx          | 31 ++++++++++++++++++++++++++++++-
 packages/ui/Input/Select.tsx   | 16 +++++++++-------
 packages/ui/Input/style.css.ts |  1 +
 3 files changed, 40 insertions(+), 8 deletions(-)

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 a645074..8993383 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,

From 5c20580664fd10f7e12204015fa912b4f3c355ec Mon Sep 17 00:00:00 2001
From: suwonthugger <127329855+suwonthugger@users.noreply.github.com>
Date: Thu, 31 Oct 2024 20:50:37 +0900
Subject: [PATCH 2/2] cs

---
 .changeset/cuddly-peaches-shake.md | 5 +++++
 1 file changed, 5 insertions(+)
 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 추가