diff --git a/src/app/(root)/input/page.tsx b/src/app/(root)/input/page.tsx new file mode 100644 index 00000000..3d533039 --- /dev/null +++ b/src/app/(root)/input/page.tsx @@ -0,0 +1,112 @@ +'use client'; + +import { Input } from '@/components/common/Input'; + +const page = () => { + return ( +
+
+ white Input +
+ + + + + alert('아이콘 클릭!')} + isRightIcon + rightIcon='show' + placeholder='Placeholder...' + /> + alert('아이콘 클릭!')} + isRightIcon + rightIcon='show' + placeholder='Placeholder...' + /> + alert('아이콘 클릭!')} + isRightIcon + rightIcon='hide' + placeholder='Placeholder...' + /> + alert('아이콘 클릭!')} + isRightIcon + rightIcon='hide' + placeholder='Placeholder...' + /> + alert('아이콘 클릭!')} + isRightIcon + rightIcon='hide' + placeholder='Placeholder...' + disabled={true} + /> +
+
+
+ Grey Input +
+ + + + + alert('아이콘 클릭!')} + isRightIcon + rightIcon='show' + placeholder='Placeholder...' + /> + alert('아이콘 클릭!')} + isRightIcon + rightIcon='show' + placeholder='Placeholder...' + /> + alert('아이콘 클릭!')} + isRightIcon + rightIcon='hide' + placeholder='Placeholder...' + /> + alert('아이콘 클릭!')} + isRightIcon + rightIcon='hide' + placeholder='Placeholder...' + /> + alert('아이콘 클릭!')} + isRightIcon + rightIcon='hide' + placeholder='Placeholder...' + disabled={true} + /> +
+
+
+ ); +}; + +export default page; diff --git a/src/components/common/Icon/assets/Hide.tsx b/src/components/common/Icon/assets/Hide.tsx index deb46245..ab9dffda 100644 --- a/src/components/common/Icon/assets/Hide.tsx +++ b/src/components/common/Icon/assets/Hide.tsx @@ -5,45 +5,20 @@ const Hide = ({ width, height, ...props }: SVGProps) => { - - - ); diff --git a/src/components/common/Icon/assets/Show.tsx b/src/components/common/Icon/assets/Show.tsx index d1f6874e..78ec664e 100644 --- a/src/components/common/Icon/assets/Show.tsx +++ b/src/components/common/Icon/assets/Show.tsx @@ -11,22 +11,14 @@ const Show = ({ width, height, ...props }: SVGProps) => { {...props} > ); diff --git a/src/components/common/Icon/index.tsx b/src/components/common/Icon/index.tsx index 636f4b68..c027ab9f 100644 --- a/src/components/common/Icon/index.tsx +++ b/src/components/common/Icon/index.tsx @@ -21,7 +21,7 @@ const Icon = ({ name, width = 20, height = 20, - color = 'black', + color, hoverColor, className, }: IconProps) => { diff --git a/src/components/common/Input/Input.variant.tsx b/src/components/common/Input/Input.variant.tsx index b2cf64a0..ed3cc2c9 100644 --- a/src/components/common/Input/Input.variant.tsx +++ b/src/components/common/Input/Input.variant.tsx @@ -1,44 +1,65 @@ import { cva } from 'class-variance-authority'; export const inputContainerVariants = cva( - 'flex w-full items-center gap-2 border px-2 box-border', + 'flex w-full items-center gap-2 px-4 rounded-lg', { variants: { variant: { - empty: 'border-none bg-inherit shadow-none', + white: 'bg-white-100', + grey50: 'bg-grey-50', }, + + isFocused: { + true: 'border border-green-500', + false: '', + }, + disabled: { + true: '!bg-grey-100 cursor-not-allowed', + }, + + // 추후 삭제 예정 bgcolor: { form: 'bg-green-100', search: 'bg-white-200', meal: 'bg-white-100', }, - borderRadius: { - basic: 'rounded-md', - large: 'rounded-lg', - }, height: { basic: 'h-[38px]', large: 'h-[62px]', }, - isFocused: { - true: 'border-green-600', - false: 'border-green-400', - }, - disabled: { - true: 'cursor-not-allowed opacity-80', + borderRadius: { + basic: 'rounded-md', + large: 'rounded-lg', }, isError: { true: 'border-red-300', }, + // --------------- + size: { + s: 'h-12', + m: 'h-16', + }, }, defaultVariants: { borderRadius: 'basic', - height: 'basic', bgcolor: 'form', + height: 'basic', + size: 's', }, }, ); export const inputVariants = cva( - 'w-full flex items-center bg-transparent text-[14px] placeholder:text-gray-400 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-80', + 'w-full flex items-center bg-transparent text-[14px] placeholder:text-placeholder focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-grey-100', + { + variants: { + size: { + s: 'text-base leading-[1.52] tracking-[-0.008em] font-medium', + m: 'text-lg leading-[1.52] tracking-[-0.008em] font-medium', + }, + }, + defaultVariants: { + size: 's', + }, + }, ); diff --git a/src/components/common/Input/index.tsx b/src/components/common/Input/index.tsx index 57c6c597..1a88ed0c 100644 --- a/src/components/common/Input/index.tsx +++ b/src/components/common/Input/index.tsx @@ -24,7 +24,7 @@ export type InputIconProps = rightIcon?: string; }; -export type InputProps = ComponentPropsWithoutRef<'input'> & +export type InputProps = Omit, 'size'> & VariantProps & VariantProps & InputIconProps & { @@ -41,6 +41,8 @@ export const Input = forwardRef( borderRadius, className, bgcolor, + height, + size, isLeftIcon = false, isRightIcon = false, rightIcon = '', @@ -49,17 +51,17 @@ export const Input = forwardRef( disabled, rightIconAction = () => {}, onSubmit = () => {}, - height, buttonText = '검색', isError, ...props - }: InputProps, + }, ref, ) => { const [isFocused, setIsFocused] = useState(false); const handleFocus = useCallback(() => setIsFocused(true), []); const handleBlur = useCallback(() => setIsFocused(false), []); + return (
( bgcolor, variant, height, + size, disabled, isError, })} > {isLeftIcon && } ( {...props} /> {isRightIcon && rightIcon && ( - )} @@ -108,4 +114,5 @@ export const Input = forwardRef( ); }, ); + Input.displayName = 'Input'; diff --git a/src/styles/colors.ts b/src/styles/colors.ts index 61019c39..aad81102 100644 --- a/src/styles/colors.ts +++ b/src/styles/colors.ts @@ -7,6 +7,7 @@ export const colors = { black: { 100: '#101010', }, + dimmed: 'rgba(0, 0, 0, 0.56)', grey: { 50: '#F5F5F6', 100: '#E2E3E5', diff --git a/tailwind.config.ts b/tailwind.config.ts index 19e453b4..d0e27630 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -10,6 +10,11 @@ const config: Config = { theme: { extend: { colors, + textColor: { + placeholder: colors.grey[200], + assistiveTxt: colors.grey[500], + dimmed: colors.dimmed, + }, translate: { '-1/2': '-50%', },