#46 - feat: 드롭다운에 description 추가

Wingle-SMWU · Apr 25, 2023 · ec32416 · ec32416
1 parent a11f82b
commit ec32416
Showing 1 changed file with 19 additions and 1 deletion.
diff --git a/src/components/ui/dropDownUI.tsx b/src/components/ui/dropDownUI.tsx
@@ -11,9 +11,16 @@ interface DropDownProps {
   list: string[];
   selected: string;
   onSelectedChange: (selected: string) => void;
+  description?: string;
 }
 
-export default function DropDown({ label, list, selected, onSelectedChange }: DropDownProps) {
+export default function DropDown({
+  label,
+  list,
+  selected,
+  onSelectedChange,
+  description,
+}: DropDownProps) {
   const [isActive, setIsActive] = useState(false);
 
   const onActiveToggle = useCallback(() => {
@@ -53,6 +60,7 @@ export default function DropDown({ label, list, selected, onSelectedChange }: Dr
           ))}
         </S.DropdownMenuContainer>
       </S.DropdownContainer>
+      {description && <S.Description>{description}</S.Description>}
     </S.Container>
   );
 }
@@ -121,4 +129,14 @@ const S = {
     background-color: ${theme.color.gray200};
   `}
   `,
+  Description: styled.div`
+    height: 17px;
+    font-size: 12px;
+    color: ${({ theme }) => theme.color.gray900};
+    flex: none;
+    order: 2;
+    align-self: stretch;
+    flex-grow: 0;
+    margin: 8px 0px;
+  `,
 };