InputBase Badge prop 추가

thebbodek · Oct 30, 2024 · 2e20fdc · 2e20fdc
1 parent de2682b
commit 2e20fdc
Show file tree

Hide file tree

Showing 15 changed files with 69 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bbodek-ui",
-  "version": "0.0.259",
+  "version": "0.0.260",
   "type": "module",
   "author": "Bbodek",
   "license": "MIT",

diff --git a/src/core/components/Input/InputBase/index.tsx b/src/core/components/Input/InputBase/index.tsx
@@ -25,6 +25,7 @@ const InputBase = forwardRef(
       disabled = false,
       readOnly = false,
       required = false,
+      badge,
       sub,
       ...props
     }: InputBaseProps<T>,
@@ -33,28 +34,52 @@ const InputBase = forwardRef(
     const Component: React.ElementType = Element || 'div';
     const isDisabled = readOnly || disabled;
     const isVisibleEndComponent = !isDisabled && endComponent;
-    const hasInputLabel = label || sub;
+    const hasInputLabel = badge || label || sub;
+
+    const labelRenderer = () => {
+      if (badge && label) {
+        return (
+          <div className={'mb-2 flex items-center gap-x-0.5'}>
+            <div className={'flex-shrink-0'}>{badge}</div>
+            <div className='flex flex-1 items-center justify-between'>
+              {label && (
+                <label htmlFor={inputId}>
+                  <FormLabel
+                    label={label}
+                    labelColor={labelColor}
+                    required={required}
+                  />
+                </label>
+              )}
+              {sub && sub}
+            </div>
+          </div>
+        );
+      }
+
+      return (
+        <div className='mb-2 flex items-center justify-between'>
+          {label && (
+            <label htmlFor={inputId}>
+              <FormLabel
+                label={label}
+                labelColor={labelColor}
+                required={required}
+              />
+            </label>
+          )}
+          {sub && sub}
+        </div>
+      );
+    };
 
     return (
       <Component
         ref={ref}
         className={clsx(label && 'flex-v-stack', rootClassName)}
         {...props}
       >
-        {hasInputLabel && (
-          <div className='mb-2 flex items-center justify-between'>
-            {label && (
-              <label htmlFor={inputId}>
-                <FormLabel
-                  label={label}
-                  labelColor={labelColor}
-                  required={required}
-                />
-              </label>
-            )}
-            {sub && sub}
-          </div>
-        )}
+        {hasInputLabel && labelRenderer()}
         <div
           className={cn(
             `flex items-center overflow-hidden rounded-xl border bg-white px-3 py-4 text-subhead-02-regular border-${borderColor}`,

diff --git a/src/core/components/Input/InputBase/types/index.ts b/src/core/components/Input/InputBase/types/index.ts
@@ -15,6 +15,7 @@ export interface InputBaseProps<T extends React.ElementType>
   inputComponent: React.ReactNode;
   endComponent?: React.ReactNode;
   borderColor?: ThemeColors;
+  badge?: React.ReactNode;
   error?: boolean;
   readOnly?: boolean;
   disabled?: boolean;

diff --git a/src/core/components/Input/InputDatePicker/index.tsx b/src/core/components/Input/InputDatePicker/index.tsx
@@ -28,6 +28,7 @@ const InputDatePicker = ({
   className,
   inputClassName,
   afterAllDate,
+  badge,
   label,
   dateLabel,
   closeButtonText,
@@ -113,6 +114,7 @@ const InputDatePicker = ({
       feedbackColor={feedbackColor}
       disabled={disabled}
       readOnly={readOnly}
+      badge={badge}
       sub={sub}
       inputComponent={
         <input

diff --git a/src/core/components/Input/InputDatePicker/types/index.ts b/src/core/components/Input/InputDatePicker/types/index.ts
@@ -51,6 +51,7 @@ export interface InputDatePickerProps
       | 'readOnly'
       | 'required'
       | 'sub'
+      | 'badge'
     > {
   inputClassName?: string;
   label?: string;

diff --git a/src/core/components/Input/InputPassword/index.tsx b/src/core/components/Input/InputPassword/index.tsx
@@ -13,6 +13,7 @@ const InputPassword = forwardRef(
       label = '비밀번호',
       regCallback,
       feedback,
+      badge,
       ...props
     }: InputPasswordProps,
     ref: React.ComponentPropsWithRef<'input'>['ref'],
@@ -58,6 +59,7 @@ const InputPassword = forwardRef(
         required={required}
         feedback={feedback}
         labelColor={labelColor}
+        badge={badge}
         sub={sub}
         inputComponent={
           <input

diff --git a/src/core/components/Input/InputPassword/types/index.ts b/src/core/components/Input/InputPassword/types/index.ts
@@ -16,5 +16,6 @@ export interface InputPasswordProps
       | 'readOnly'
       | 'disabled'
       | 'sub'
+      | 'badge'
     >,
     Pick<UseInputProps, 'regCallback'> {}
diff --git a/src/core/components/Input/InputSearch/index.tsx b/src/core/components/Input/InputSearch/index.tsx
@@ -13,6 +13,7 @@ const InputSearch = <T extends React.ElementType = 'form'>({
   feedback,
   rounded,
   rootElement,
+  badge,
   ...props
 }: InputSearchProps<T> & React.ComponentPropsWithoutRef<'input'>) => {
   const id = useId();
@@ -77,6 +78,7 @@ const InputSearch = <T extends React.ElementType = 'form'>({
       readOnly={readOnly}
       disabled={disabled}
       rootClassName={rootClassName}
+      badge={badge}
       inputRootClassName={clsx(
         'flex items-center overflow-hidden border border-gray-02 bg-white py-2 text-body-02-medium',
         INPUT_SEARCH_ROUNDED[rounded],

diff --git a/src/core/components/Input/InputSearch/types/index.ts b/src/core/components/Input/InputSearch/types/index.ts
@@ -9,7 +9,13 @@ export interface InputSearchProps<T extends React.ElementType>
     >,
     Pick<
       InputBaseProps<T>,
-      'feedback' | 'rootClassName' | 'error' | 'readOnly' | 'disabled' | 'sub'
+      | 'feedback'
+      | 'rootClassName'
+      | 'error'
+      | 'readOnly'
+      | 'disabled'
+      | 'sub'
+      | 'badge'
     >,
     Pick<UseInputProps, 'regCallback'> {
   rootElement?: T;

diff --git a/src/core/components/Input/InputSelect/index.tsx b/src/core/components/Input/InputSelect/index.tsx
@@ -6,7 +6,7 @@ import { InputSelectProps } from './types';
 
 const InputSelect = forwardRef(
   (
-    { options, placeholder, value, ...props }: InputSelectProps,
+    { options, placeholder, value, badge, ...props }: InputSelectProps,
     ref: React.Ref<HTMLSelectElement>,
   ) => {
     const id = useId();
@@ -35,6 +35,7 @@ const InputSelect = forwardRef(
         inputRootClassName={'py-0 h-[3.75rem]'}
         error={error}
         sub={sub}
+        badge={badge}
         inputComponent={
           <select
             ref={ref}

diff --git a/src/core/components/Input/InputSelect/types/index.ts b/src/core/components/Input/InputSelect/types/index.ts
@@ -3,7 +3,10 @@ import { InputBaseProps } from '../../InputBase/types';
 
 export interface InputSelectProps
   extends SelectHTMLAttributes<HTMLSelectElement>,
-    Pick<InputBaseProps<'div'>, 'label' | 'rootClassName' | 'error' | 'sub'> {
+    Pick<
+      InputBaseProps<'div'>,
+      'label' | 'rootClassName' | 'error' | 'sub' | 'badge'
+    > {
   placeholder?: string;
   options: React.ReactNode[];
 }
diff --git a/src/core/components/Input/InputTextArea/index.tsx b/src/core/components/Input/InputTextArea/index.tsx
@@ -16,6 +16,7 @@ const InputTextArea = forwardRef(
       textAreaHeight,
       regCallback,
       feedback,
+      badge,
       ...props
     }: InputTextAreaProps,
     ref: React.Ref<HTMLTextAreaElement>,
@@ -63,6 +64,7 @@ const InputTextArea = forwardRef(
         )}
         feedback={feedback}
         error={error}
+        badge={badge}
         readOnly={readOnly}
         disabled={disabled}
         sub={sub}

diff --git a/src/core/components/Input/InputTextArea/types/index.ts b/src/core/components/Input/InputTextArea/types/index.ts
@@ -21,6 +21,7 @@ export interface InputTextAreaProps
       | 'readOnly'
       | 'disabled'
       | 'sub'
+      | 'badge'
     >,
     Pick<UseInputProps, 'regCallback'> {
   textAreaHeight?: TextAreaSizeType;

diff --git a/src/core/components/Input/InputTextField/index.tsx b/src/core/components/Input/InputTextField/index.tsx
@@ -15,6 +15,7 @@ const InputTextField = forwardRef(
       regCallback,
       feedback,
       feedbackColor,
+      badge,
       ...props
     }: InputTextFieldProps,
     ref: React.ComponentPropsWithRef<'input'>['ref'],
@@ -52,6 +53,7 @@ const InputTextField = forwardRef(
         disabled={disabled}
         feedback={feedback}
         feedbackColor={feedbackColor}
+        badge={badge}
         error={error}
         sub={sub}
         inputComponent={

diff --git a/src/core/components/Input/InputTextField/types/index.ts b/src/core/components/Input/InputTextField/types/index.ts
@@ -18,5 +18,6 @@ export interface InputTextFieldProps
       | 'disabled'
       | 'sub'
       | 'feedbackColor'
+      | 'badge'
     >,
     Pick<UseInputProps, 'regCallback'> {}