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