style: (#318) input 컴포넌트들의 border color 통일

Musma · Sep 11, 2024 · d4e1b08 · d4e1b08
1 parent 6ad7688
commit d4e1b08
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 96 deletions.
diff --git a/packages/react-component/src/components/DatePicker/DatePicker.tsx b/packages/react-component/src/components/DatePicker/DatePicker.tsx
@@ -171,10 +171,10 @@ export const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
             },
             // Disabled CSS
             disabled && {
+              cursor: 'not-allowed',
               backgroundColor: theme.colors.white.light,
+              borderColor: theme.colors.gray.darker,
               color: theme.colors.gray.main,
-              cursor: 'not-allowed',
-              borderColor: theme.colors.gray.main,
             },
           ]}
           onClick={() => {
@@ -191,20 +191,7 @@ export const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
             readOnly={true}
             value={inputValue}
             css={{
-              flex: 1,
-              width: '100%',
-              height: '100%',
               userSelect: 'none',
-              paddingLeft: 0,
-              paddingRight: 0,
-              cursor: 'inherit',
-              color: 'inherit',
-              '&:disabled': {
-                backgroundColor: theme.colors.white.light,
-              },
-              '&::placeholder': {
-                color: theme.colors.gray.light,
-              },
             }}
             {...rest}
           />

diff --git a/packages/react-component/src/components/DateRangePicker/DateRangePicker.tsx b/packages/react-component/src/components/DateRangePicker/DateRangePicker.tsx
@@ -186,10 +186,10 @@ export const DateRangePicker = forwardRef<HTMLInputElement, DateRangePickerProps
             },
             // Disabled CSS
             disabled && {
+              cursor: 'not-allowed',
               backgroundColor: theme.colors.white.light,
+              borderColor: theme.colors.gray.darker,
               color: theme.colors.gray.main,
-              cursor: 'not-allowed',
-              borderColor: theme.colors.gray.main,
             },
           ]}
           onClick={() => {
@@ -206,20 +206,7 @@ export const DateRangePicker = forwardRef<HTMLInputElement, DateRangePickerProps
             readOnly={true}
             value={inputValue}
             css={{
-              flex: 1,
-              width: '100%',
-              height: '100%',
               userSelect: 'none',
-              paddingLeft: 0,
-              paddingRight: 0,
-              cursor: 'inherit',
-              color: 'inherit',
-              '&:disabled': {
-                backgroundColor: theme.colors.white.light,
-              },
-              '&::placeholder': {
-                color: theme.colors.gray.light,
-              },
             }}
             {...rest}
           />

diff --git a/packages/react-component/src/components/Select/MultiSelect.tsx b/packages/react-component/src/components/Select/MultiSelect.tsx
@@ -209,10 +209,10 @@ const _MultiSelect = <T extends string>(
             },
           },
           disabled && {
+            cursor: 'not-allowed',
             backgroundColor: theme.colors.white.light,
-            borderColor: theme.colors.gray.main,
+            borderColor: theme.colors.gray.darker,
             color: theme.colors.gray.main,
-            cursor: 'not-allowed',
           },
         ]}
         onClick={handleSelectClick}
@@ -244,29 +244,6 @@ const _MultiSelect = <T extends string>(
             value={inputValue}
             readOnly={!open}
             disabled={disabled}
-            css={[
-              {
-                sm: {
-                  height: 18,
-                },
-                md: {
-                  height: 24,
-                },
-                lg: {
-                  height: 32,
-                },
-              }[size],
-              {
-                flex: 1,
-                fontSize: theme.inputSize.fontSize[size],
-                cursor: 'inherit',
-                color: 'currentColor',
-                '&:disabled': {
-                  color: theme.colors.gray.main,
-                  cursor: 'inherit',
-                },
-              },
-            ]}
             onChange={(e) => {
               setInputValue(e.target.value)
             }}

diff --git a/packages/react-component/src/components/Select/Select.tsx b/packages/react-component/src/components/Select/Select.tsx
@@ -200,8 +200,10 @@ const _Select = <T extends string>(
             cursor: 'pointer',
           },
           disabled && {
-            color: theme.colors.gray.main,
             cursor: 'not-allowed',
+            backgroundColor: theme.colors.white.light,
+            borderColor: theme.colors.gray.darker,
+            color: theme.colors.gray.main,
           },
         ]}
         onClick={handleSelectClick}

diff --git a/packages/react-component/src/components/TextInput/TextInput.tsx b/packages/react-component/src/components/TextInput/TextInput.tsx
@@ -193,11 +193,10 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
                 boxShadow: theme.shadow.md,
               },
             },
-            // Disabled CSS
             disabled && {
               cursor: 'not-allowed',
               backgroundColor: theme.colors.white.light,
-              borderColor: theme.colors.white.darker,
+              borderColor: theme.colors.gray.darker,
               color: theme.colors.gray.main,
             },
           ]}
@@ -210,21 +209,6 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
             id={id}
             type={inputType}
             ref={ref}
-            css={[
-              // Base CSS
-              {
-                flex: 1,
-                width: '100%',
-                height: '100%',
-                cursor: 'inherit',
-                backgroundColor: 'transparent',
-              },
-              // Disabled CSS
-              disabled && {
-                color: theme.colors.gray.main,
-                backgroundColor: theme.colors.white.light,
-              },
-            ]}
             disabled={disabled}
             onChange={handleTextInputChange}
             onBlur={handleTextInputBlur}

diff --git a/packages/react-component/src/components/YearPicker/YearPicker.tsx b/packages/react-component/src/components/YearPicker/YearPicker.tsx
@@ -202,10 +202,10 @@ export const YearPicker = forwardRef<HTMLInputElement, YearPickerProps>(
             },
             // Disabled CSS
             disabled && {
-              borderColor: theme.colors.gray.main,
+              cursor: 'not-allowed',
               backgroundColor: theme.colors.white.light,
+              borderColor: theme.colors.gray.darker,
               color: theme.colors.gray.main,
-              cursor: 'not-allowed',
             },
           ]}
           onClick={() => {

diff --git a/packages/react-component/src/elements/InputBase/InputBase.tsx b/packages/react-component/src/elements/InputBase/InputBase.tsx
@@ -2,27 +2,61 @@ import { forwardRef, InputHTMLAttributes } from 'react'
 
 import { useTheme } from '@emotion/react'
 
-type InputProps = InputHTMLAttributes<HTMLInputElement>
+import { Size } from 'src/types'
+export interface InputBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /**
+   * @default md
+   */
+  size?: Size
+}
 
-export const InputBase = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
-  const theme = useTheme()
-  return (
-    <input
-      ref={ref}
-      autoComplete="off"
-      css={{
-        padding: 0,
-        border: 0,
-        appearance: 'none',
-        outline: 'none',
-        boxSizing: 'border-box',
-        '&::placeholder': {
-          color: theme.colors.gray.main,
-        },
-      }}
-      {...props}
-    />
-  )
-})
+export const InputBase = forwardRef<HTMLInputElement, InputBaseProps>(
+  ({ size = 'md', ...props }, ref) => {
+    const theme = useTheme()
+    return (
+      <input
+        ref={ref}
+        autoComplete="off"
+        css={[
+          {
+            sm: {
+              height: 18,
+            },
+            md: {
+              height: 24,
+            },
+            lg: {
+              height: 32,
+            },
+          }[size],
+          {
+            padding: 0,
+            border: 0,
+            appearance: 'none',
+            outline: 'none',
+            boxSizing: 'border-box',
+            flex: 1,
+            width: '100%',
+            height: '100%',
+            cursor: 'inherit',
+            color: 'inherit',
+            fontSize: theme.inputSize.fontSize[size],
+            backgroundColor: 'transparent',
+            '&::placeholder': {
+              color: theme.colors.gray.main,
+            },
+            '&:disabled': {
+              cursor: 'not-allowed',
+              backgroundColor: theme.colors.white.light,
+              borderColor: theme.colors.gray.darker,
+              color: theme.colors.gray.main,
+            },
+          },
+        ]}
+        {...props}
+      />
+    )
+  },
+)
 
 InputBase.displayName = 'InputBase'