feat: BottomSheetSelect 수정

sopt-makers · Dec 19, 2024 · b9dd49a · b9dd49a
1 parent c5c76d5
commit b9dd49a
Showing 1 changed file with 20 additions and 4 deletions.
diff --git a/src/components/coffeechat/upload/CoffeechatForm/BottomSheetSelect/index.tsx b/src/components/coffeechat/upload/CoffeechatForm/BottomSheetSelect/index.tsx
@@ -14,11 +14,13 @@ interface Option {
 
 interface BottomSheetSelectProps {
   options: Option[];
-  value: string | string[] | null | undefined;
+  defaultOption?: Option;
+  value: string | null | undefined;
   placeholder: string;
   onChange: (value: string) => void;
 }
-const BottomSheetSelect = ({ options, value, placeholder, onChange }: BottomSheetSelectProps) => {
+
+const BottomSheetSelect = ({ options, defaultOption, value, placeholder, onChange }: BottomSheetSelectProps) => {
   const [open, setOpen] = useState(false);
   const [selectedValue, setSelectedValue] = useState(value);
   const [temporaryValue, setTemporaryValue] = useState(value);
@@ -32,7 +34,7 @@ const BottomSheetSelect = ({ options, value, placeholder, onChange }: BottomShee
 
   const handleConfirm = () => {
     setSelectedValue(temporaryValue);
-    if (temporaryValue !== '') onChange(temporaryValue as string);
+    onChange(temporaryValue as string);
 
     handleClose();
   };
@@ -49,10 +51,14 @@ const BottomSheetSelect = ({ options, value, placeholder, onChange }: BottomShee
     };
   }, [open]);
 
+  const getSelectedLabel = (value: string) => {
+    return options.find((option) => option.value === value)?.label;
+  };
+
   return (
     <Container>
       <InputField onClick={handleOpen}>
-        {selectedValue !== null ? <p>{selectedValue}</p> : <p style={{ color: '#808087' }}>{placeholder}</p>}
+        {selectedValue ? <p>{getSelectedLabel(selectedValue)}</p> : <p style={{ color: '#808087' }}>{placeholder}</p>}
         <IconChevronDown
           style={{
             width: 20,
@@ -68,6 +74,12 @@ const BottomSheetSelect = ({ options, value, placeholder, onChange }: BottomShee
           <Overlay onClick={handleClose} />
           <BottomSheet>
             <OptionList>
+              {defaultOption && (
+                <OptionItem onClick={() => handleOptionSelect(defaultOption.value)}>
+                  {defaultOption.label}
+                  {temporaryValue === defaultOption.value && <CheckedIcon />}
+                </OptionItem>
+              )}
               {options.map((option) => (
                 <OptionItem key={option.value} onClick={() => handleOptionSelect(option.value)}>
                   {option.label}
@@ -93,13 +105,16 @@ const Container = styled.div`
 
 const InputField = styled.div`
   display: flex;
+  gap: 12px;
   align-items: center;
   justify-content: space-between;
   border-radius: 10px;
   background-color: ${colors.gray800};
   cursor: pointer;
   padding: 11px 16px;
   ${fonts.BODY_16_M};
+
+  width: max-content;
 `;
 
 const Overlay = styled.div`
@@ -115,6 +130,7 @@ const Overlay = styled.div`
 const BottomSheet = styled.section`
   position: fixed;
   bottom: 0;
+  left: 20px;
   z-index: ${zIndex.헤더};
   margin-bottom: 12px;
   border-radius: 16px;