feat: BottomSheetSelect에서 icon prop과 스타일 커스텀 추가

sopt-makers · Dec 19, 2024 · 59c9b00 · 59c9b00
1 parent 58376b2
commit 59c9b00
Showing 1 changed file with 23 additions and 12 deletions.
diff --git a/src/components/coffeechat/upload/CoffeechatForm/BottomSheetSelect/index.tsx b/src/components/coffeechat/upload/CoffeechatForm/BottomSheetSelect/index.tsx
@@ -3,7 +3,7 @@ import { colors } from '@sopt-makers/colors';
 import { fonts } from '@sopt-makers/fonts';
 import { IconCheck, IconChevronDown } from '@sopt-makers/icons';
 import { Button } from '@sopt-makers/ui';
-import { useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 
 import { zIndex } from '@/styles/zIndex';
 
@@ -18,9 +18,19 @@ interface BottomSheetSelectProps {
   value: string | null | undefined;
   placeholder: string;
   onChange: (value: string) => void;
+  icon?: ReactNode;
+  className?: string;
 }
 
-const BottomSheetSelect = ({ options, defaultOption, value, placeholder, onChange }: BottomSheetSelectProps) => {
+const BottomSheetSelect = ({
+  options,
+  defaultOption,
+  value,
+  placeholder,
+  onChange,
+  icon,
+  className,
+}: BottomSheetSelectProps) => {
   const [open, setOpen] = useState(false);
   const [selectedValue, setSelectedValue] = useState(value);
   const [temporaryValue, setTemporaryValue] = useState(value);
@@ -57,16 +67,18 @@ const BottomSheetSelect = ({ options, defaultOption, value, placeholder, onChang
 
   return (
     <Container>
-      <InputField onClick={handleOpen}>
+      <InputField onClick={handleOpen} className={className}>
         {selectedValue ? <p>{getSelectedLabel(selectedValue)}</p> : <p style={{ color: '#808087' }}>{placeholder}</p>}
-        <IconChevronDown
-          style={{
-            width: 20,
-            height: 20,
-            transform: open ? 'rotate(-180deg)' : '',
-            transition: 'all 0.5s',
-          }}
-        />
+        {icon || (
+          <IconChevronDown
+            style={{
+              width: 20,
+              height: 20,
+              transform: open ? 'rotate(-180deg)' : '',
+              transition: 'all 0.5s',
+            }}
+          />
+        )}
       </InputField>
 
       {open && (
@@ -100,7 +112,6 @@ export default BottomSheetSelect;
 
 const Container = styled.div`
   position: relative;
-  width: 100%;
 `;
 
 const InputField = styled.div`