DESIGN-5 DropdownBase sub Prop 추가

thebbodek · Sep 2, 2024 · 47879a7 · 47879a7
1 parent cb1d620
commit 47879a7
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/src/core/components/Dropdown/DropdownBase/index.tsx b/src/core/components/Dropdown/DropdownBase/index.tsx
@@ -1,13 +1,13 @@
-import useClickOutside from '@/hooks/useClickOutSide';
 import clsx from 'clsx';
-import { createContext, useState } from 'react';
+import React, { createContext, useState } from 'react';
 
+import useClickOutside from '@/hooks/useClickOutSide';
 import Typography from '../../Typography';
 import DropdownItem from './DropdownItem';
 import DropdownItems from './DropdownItems';
 import DropdownTrigger from './DropdownTrigger';
-import { DropdownContextValue, DropdownProps, ReturnType } from './types';
 import FormLabel from '@/core/components/FormLabel';
+import { DropdownContextValue, DropdownProps, ReturnType } from './types';
 
 export const DropdownContext = createContext<DropdownContextValue | undefined>(
   undefined,
@@ -23,23 +23,35 @@ const DropdownBase = ({
   content,
   feedback,
   feedbackColor = 'error',
-  ...formLabelProps
+  labelColor,
+  required,
+  sub,
 }: DropdownProps) => {
   const [isToggle, setIsToggle] = useState(false);
   const { contentRef } = useClickOutside<HTMLDivElement>(() =>
     setIsToggle(false),
   );
   const isVisibleContent = !readOnly && !disabled && isToggle;
+  const hasInputLabel = label || sub;
 
   return (
     <DropdownContext.Provider
       value={{ isToggle, setIsToggle, readOnly, disabled }}
     >
       <div ref={contentRef} className={clsx(className, 'relative')}>
-        {label && (
-          <label className='mb-2 inline-block'>
-            <FormLabel label={label} {...formLabelProps} />
-          </label>
+        {hasInputLabel && (
+          <div className='mb-2 flex items-center justify-between'>
+            {label && (
+              <label>
+                <FormLabel
+                  label={label}
+                  labelColor={labelColor}
+                  required={required}
+                />
+              </label>
+            )}
+            {sub && sub}
+          </div>
         )}
         {trigger}
         {isVisibleContent && content}

diff --git a/src/core/components/Dropdown/DropdownBase/types/index.ts b/src/core/components/Dropdown/DropdownBase/types/index.ts
@@ -21,6 +21,7 @@ export interface DropdownProps extends Partial<FormLabelProps> {
   content: ReactNode;
   feedback?: ReactNode;
   feedbackColor?: ThemeColors;
+  sub?: ReactNode;
 }
 
 export interface DropdownContextValue